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
11 years ago · e74cba8a92
parent 5d3020b9ed
commit e74cba8a92
11 changed files with 2043 additions and 54 deletions
--- a/bower.json
+++ b/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",
--- a/components/intl-tel-input/build/css/intlTelInput.css
+++ b/components/intl-tel-input/build/css/intlTelInput.css
--- a/components/intl-tel-input/build/img/flags.png
+++ b/components/intl-tel-input/build/img/flags.png
--- a/components/intl-tel-input/build/js/intlTelInput.js
+++ b/components/intl-tel-input/build/js/intlTelInput.js
--- a/index.html
+++ b/index.html
@ -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>
--- a/js/components.js
+++ b/js/components.js
--- a/js/views/new_conversation_view.js
+++ b/js/views/new_conversation_view.js
@ -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: {
--- a/js/views/phone-input-view.js
+++ b/js/views/phone-input-view.js
@ -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;
--- a/options.html
+++ b/options.html
@ -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>
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@ -83,3 +83,7 @@ img.preview {
  padding: 5px;
  border-radius: 3px;
 }
+
+ul.country-list {
+  min-width: 197px !important;
+}
--- a/stylesheets/options.css
+++ b/stylesheets/options.css
@ -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;
+}