mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restyled country dropdown

Browse source 
Added jquery plugin that allows for flags and country codes to be
displayed in a user-friendly way, on top of the existing phone view
This commit is contained in:
Emily Chao 2015-01-15 11:11:45 -10:00 committed by lilia
parent 5d3020b9ed
commit e74cba8a92
11 changed files with 2043 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
bower.json
View file

@ -17,7 +17,8 @@
"libphonenumber-api": "git://github.com/codedust/libphonenumber-api", "libphonenumber-api": "git://github.com/codedust/libphonenumber-api",
"backbone.localstorage": "liliakai/Backbone.localStorage#master", "backbone.localstorage": "liliakai/Backbone.localStorage#master",
"momentjs": "~2.8.3", "momentjs": "~2.8.3",
"indexeddb-backbonejs-adapter": "*" "indexeddb-backbonejs-adapter": "*",
"intl-tel-input": "~4.0.1"
}, },
"devDependencies": { "devDependencies": {
"mocha": "~2.0.1", "mocha": "~2.0.1",
@ -83,6 +84,11 @@
], ],
"indexeddb-backbonejs-adapter": [ "indexeddb-backbonejs-adapter": [
"backbone-indexeddb.js" "backbone-indexeddb.js"
],
"intl-tel-input": [
"build/css/intlTelInput.css",
"build/img/flags.png",
"build/js/intlTelInput.js"
] ]
}, },
"concat": { "concat": {
@ -97,7 +103,8 @@
"indexeddb-backbonejs-adapter", "indexeddb-backbonejs-adapter",
"qrcode", "qrcode",
"libphonenumber-api", "libphonenumber-api",
"momentjs" "momentjs",
"intl-tel-input"
], ],
"lib": [ "lib": [
"jquery", "jquery",

1
components/intl-tel-input/build/css/intlTelInput.css Normal file
View file

File diff suppressed because one or more lines are too long

BIN
components/intl-tel-input/build/img/flags.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

1007
components/intl-tel-input/build/js/intlTelInput.js Normal file
View file

File diff suppressed because one or more lines are too long

8
index.html
View file

@ -14,6 +14,7 @@
<link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" /> <link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<link href="/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" /> <link href="/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" /> <link href="/stylesheets/index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/components/intl-tel-input/build/css/intlTelInput.css" type="text/css" />
</head> </head>
<body class='signal index'> <body class='signal index'>
<div class='title-bar' id='header'> <div class='title-bar' id='header'>
@ -44,11 +45,8 @@
</script> </script>
<script type="text/x-tmpl-mustache" id="phone-number"> <script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form"> <div class="phone-input-form">
<select class="regionCode"> <div id="number-container">
<option value="ZZ" selected>Country</option> <input type="tel" class="number" placeholder="Phone Number" />
</select>
<div class="number-container">
<input type="text" class="number" placeholder="Phone Number" />
</div> </div>
</div> </div>
</script> </script>

1008
js/components.js
View file

File diff suppressed because one or more lines are too long

32
js/views/new_conversation_view.js
View file

@ -17,36 +17,6 @@ var Whisper = Whisper || {};
(function () { (function () {
'use strict'; 'use strict';
var MessageRecipientInputView = Backbone.View.extend({
events: {
'change': 'verifyNumber',
'focus' : 'removeError'
},
removeError: function() {
this.$el.removeClass('error');
},
verifyNumber: function() {
try {
var val = this.$el.val();
if (val[0] === '+') {
// assume that the country code is specified
var number = libphonenumber.util.verifyNumber(val);
} else {
// assume that the country code should match our own
var me = textsecure.utils.unencodeNumber(textsecure.storage.getUnencrypted("number_id"))[0];
var myRegionCode = libphonenumber.util.getRegionCodeForNumber(me);
var number = libphonenumber.util.verifyNumber(val, myRegionCode);
}
this.removeError();
return number;
} catch(ex) {
this.$el.addClass('error');
console.log(ex);
}
}
});
Whisper.NewConversationView = Backbone.View.extend({ Whisper.NewConversationView = Backbone.View.extend({
className: 'conversation', className: 'conversation',
@ -56,7 +26,7 @@ var Whisper = Whisper || {};
this.$el.html($(Mustache.render(this.template))); this.$el.html($(Mustache.render(this.template)));
this.input = new Whisper.PhoneInputView({el: this.$el.find('div.phone-number-input')}); this.input = new Whisper.PhoneInputView({el: this.$el.find('div.phone-number-input')});
this.fileInput = new Whisper.FileInputView({el: this.$el.find('.attachments')}); this.fileInput = new Whisper.FileInputView({el: this.$el.find('.attachments')});
this.$el.find('#phone-number-input').append(this.input.render().el); this.$el.find('div.phone-number-input').append(this.input.render().el);
}, },
events: { events: {

13
js/views/phone-input-view.js
View file

@ -28,15 +28,7 @@ var Whisper = Whisper || {};
render: function() { render: function() {
this.$el.html($(Mustache.render(this.template))); this.$el.html($(Mustache.render(this.template)));
var regionCodes = []; this.$el.find('input.number').intlTelInput();
var countryNames = [];
$.each(libphonenumber.util.getAllRegionCodes(), function(regionCode, countryName) {
regionCodes.push(regionCode);
countryNames.push(countryName);
});
for (var i = 0; i < regionCodes.length; i++) {
this.$el.find('.regionCode').append($('<option>', { value: regionCodes[i], text: countryNames[i]}));
}
return this; return this;
}, },
@ -47,12 +39,11 @@ var Whisper = Whisper || {};
validateNumber: function() { validateNumber: function() {
try { try {
var regionCode = this.$el.find('.regionCode').val(); var regionCode = this.$el.find('li.active').attr('data-country-code').toUpperCase();
var number = this.$el.find('input.number').val(); var number = this.$el.find('input.number').val();
var parsedNumber = libphonenumber.util.verifyNumber(number, regionCode); var parsedNumber = libphonenumber.util.verifyNumber(number, regionCode);
this.$el.find('.regionCode').val(libphonenumber.util.getRegionCodeForNumber(parsedNumber));
this.$el.find('.number-container').removeClass('invalid'); this.$el.find('.number-container').removeClass('invalid');
this.$el.find('.number-container').addClass('valid'); this.$el.find('.number-container').addClass('valid');
return parsedNumber; return parsedNumber;

8
options.html
View file

@ -19,6 +19,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/options.css"> <link rel="stylesheet" href="stylesheets/options.css">
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="components/intl-tel-input/build/css/intlTelInput.css">
</head> </head>
<body> <body>
<div class='container'> <div class='container'>
@ -86,11 +87,8 @@
</div> </div>
<script type="text/x-tmpl-mustache" id="phone-number"> <script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form"> <div class="phone-input-form">
<select class="regionCode"> <div id="number-container">
<option value="ZZ" selected>Country</option> <input type="tel" class="number" placeholder="Phone Number" />
</select>
<div class="number-container">
<input type="text" class="number" placeholder="Phone Number" />
</div> </div>
</div> </div>
</script> </script>

4
stylesheets/index.css
View file

@ -83,3 +83,7 @@ img.preview {
padding: 5px; padding: 5px;
border-radius: 3px; border-radius: 3px;
} }
ul.country-list {
min-width: 197px !important;
}

5
stylesheets/options.css
View file

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by * it under the terms of the GNU Lesser General Public License as published by
@ -142,3 +143,7 @@ h2 {
input.form-control, select.form-control { input.form-control, select.form-control {
border-radius: 0; border-radius: 0;
} }
ul.country-list {
min-width: 197px !important;
}