Restyled country dropdown
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
lilia
parent
5d3020b9ed
commit
e74cba8a92
11 changed files with 2043 additions and 54 deletions
11
bower.json
11
bower.json
|
|
@ -17,7 +17,8 @@
|
|||
"libphonenumber-api": "git://github.com/codedust/libphonenumber-api",
|
||||
"backbone.localstorage": "liliakai/Backbone.localStorage#master",
|
||||
"momentjs": "~2.8.3",
|
||||
"indexeddb-backbonejs-adapter": "*"
|
||||
"indexeddb-backbonejs-adapter": "*",
|
||||
"intl-tel-input": "~4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mocha": "~2.0.1",
|
||||
|
|
@ -83,6 +84,11 @@
|
|||
],
|
||||
"indexeddb-backbonejs-adapter": [
|
||||
"backbone-indexeddb.js"
|
||||
],
|
||||
"intl-tel-input": [
|
||||
"build/css/intlTelInput.css",
|
||||
"build/img/flags.png",
|
||||
"build/js/intlTelInput.js"
|
||||
]
|
||||
},
|
||||
"concat": {
|
||||
|
|
@ -97,7 +103,8 @@
|
|||
"indexeddb-backbonejs-adapter",
|
||||
"qrcode",
|
||||
"libphonenumber-api",
|
||||
"momentjs"
|
||||
"momentjs",
|
||||
"intl-tel-input"
|
||||
],
|
||||
"lib": [
|
||||
"jquery",
|
||||
|
|
|
|||
1
components/intl-tel-input/build/css/intlTelInput.css
Normal file
1
components/intl-tel-input/build/css/intlTelInput.css
Normal file
File diff suppressed because one or more lines are too long
BIN
components/intl-tel-input/build/img/flags.png
Normal file
BIN
components/intl-tel-input/build/img/flags.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
1007
components/intl-tel-input/build/js/intlTelInput.js
Normal file
1007
components/intl-tel-input/build/js/intlTelInput.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,7 @@
|
|||
<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="/stylesheets/index.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="/components/intl-tel-input/build/css/intlTelInput.css" type="text/css" />
|
||||
</head>
|
||||
<body class='signal index'>
|
||||
<div class='title-bar' id='header'>
|
||||
|
|
@ -44,11 +45,8 @@
|
|||
</script>
|
||||
<script type="text/x-tmpl-mustache" id="phone-number">
|
||||
<div class="phone-input-form">
|
||||
<select class="regionCode">
|
||||
<option value="ZZ" selected>Country</option>
|
||||
</select>
|
||||
<div class="number-container">
|
||||
<input type="text" class="number" placeholder="Phone Number" />
|
||||
<div id="number-container">
|
||||
<input type="tel" class="number" placeholder="Phone Number" />
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
1008
js/components.js
1008
js/components.js
File diff suppressed because one or more lines are too long
|
|
@ -17,36 +17,6 @@ var Whisper = Whisper || {};
|
|||
|
||||
(function () {
|
||||
'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({
|
||||
className: 'conversation',
|
||||
|
|
@ -56,7 +26,7 @@ var Whisper = Whisper || {};
|
|||
this.$el.html($(Mustache.render(this.template)));
|
||||
this.input = new Whisper.PhoneInputView({el: this.$el.find('div.phone-number-input')});
|
||||
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: {
|
||||
|
|
|
|||
|
|
@ -28,15 +28,7 @@ var Whisper = Whisper || {};
|
|||
|
||||
render: function() {
|
||||
this.$el.html($(Mustache.render(this.template)));
|
||||
var regionCodes = [];
|
||||
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]}));
|
||||
}
|
||||
this.$el.find('input.number').intlTelInput();
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -47,12 +39,11 @@ var Whisper = Whisper || {};
|
|||
|
||||
validateNumber: function() {
|
||||
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 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').addClass('valid');
|
||||
return parsedNumber;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="stylesheets/options.css">
|
||||
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="components/intl-tel-input/build/css/intlTelInput.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
|
@ -86,11 +87,8 @@
|
|||
</div>
|
||||
<script type="text/x-tmpl-mustache" id="phone-number">
|
||||
<div class="phone-input-form">
|
||||
<select class="regionCode">
|
||||
<option value="ZZ" selected>Country</option>
|
||||
</select>
|
||||
<div class="number-container">
|
||||
<input type="text" class="number" placeholder="Phone Number" />
|
||||
<div id="number-container">
|
||||
<input type="tel" class="number" placeholder="Phone Number" />
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -83,3 +83,7 @@ img.preview {
|
|||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
ul.country-list {
|
||||
min-width: 197px !important;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
* 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
|
||||
|
|
@ -142,3 +143,7 @@ h2 {
|
|||
input.form-control, select.form-control {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
ul.country-list {
|
||||
min-width: 197px !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue