Merge pull request #4523 from gratipay/extract-modal

Extract a modal component
gratipay · Jun 24, 2017 · c1a2adf · c1a2adf
2 parents bacb96b + c45e1b9
commit c1a2adf
Show file tree

Hide file tree

Showing 11 changed files with 183 additions and 112 deletions.
diff --git a/js/gratipay/confirm.js b/js/gratipay/confirm.js
@@ -1,11 +1,11 @@
 Gratipay.confirm = function(message, yes, no) {
-    var $m = $('.modal');
+    var $m = $('.confirmation-modal');
     $m.show();
     $('.confirmation-message', $m).html(message);
     $('.yes', $m).off('click').click(function() { yes(); Gratipay.confirm.close(); });
     $('.no', $m).off('click').click(function() { no(); Gratipay.confirm.close(); });
 };
 
 Gratipay.confirm.close = function() {
-    $('.modal').hide();
+    $('.confirmation-modal').hide();
 };
diff --git a/js/gratipay/countryChooser.js b/js/gratipay/countryChooser.js
@@ -2,17 +2,8 @@ Gratipay.countryChooser = {}
 
 Gratipay.countryChooser.init = function() {
     $('.open-country-chooser').click(Gratipay.countryChooser.open);
-    $('.close-country-chooser').click(Gratipay.countryChooser.close);
-    $('#grayout').click(Gratipay.countryChooser.close);
 };
 
 Gratipay.countryChooser.open = function() {
-    $('.open-country-chooser').blur();
-    $('#grayout').show()
-    $('#country-chooser').show();
-};
-
-Gratipay.countryChooser.close = function() {
-    $('#country-chooser').hide()
-    $('#grayout').hide()
+    Gratipay.modal.open('#country-chooser');
 };
diff --git a/js/gratipay/modal.js b/js/gratipay/modal.js
@@ -0,0 +1,21 @@
+Gratipay.modal = {}
+
+Gratipay.modal.open = function(modalWrapper) {
+    $(modalWrapper).show().focus();
+
+    var closeModal = function() {
+        Gratipay.modal.close(modalWrapper);
+    };
+    $(modalWrapper).on('click', function (e) {
+        if (e.target === this) {
+            closeModal();
+        } else {
+            return; // Don't close modal if the click was on descendants
+        }
+    });
+    $(modalWrapper).find('button.close-modal').click(closeModal);
+};
+
+Gratipay.modal.close = function(modalWrapper) {
+    $(modalWrapper).hide();
+};
diff --git a/scss/components/confirmation-modal.scss b/scss/components/confirmation-modal.scss
@@ -0,0 +1,20 @@
+.confirmation-modal {
+    display: none;
+    position: fixed;
+    left: 50%;
+    top: 30%;
+    margin-top: 24px;
+    margin-left: -144px;
+    width: 288px;
+    font: normal 14px/18px $Ideal;
+    padding: 24px;
+    background: $white;
+    border: 2px solid $black;
+    @include border-radius(5px);
+    box-shadow: 0px 0px 32px 16px rgba($black, 0.5);
+    z-index: 3;
+
+    .continue {
+        text-align: right;
+    }
+}
diff --git a/scss/components/modal.scss b/scss/components/modal.scss
@@ -1,20 +1,110 @@
-.modal {
-    display: none;
+/*
+ * ======= MARKUP =======
+ *
+ * <div class="modal-wrapper">
+ *     <div class="modal">
+ *         <header>
+ *             <h2>Title!</h2>
+ *             <button class="close-modal">
+ *               X
+ *             </button>
+ *         </header>
+ *         <section>
+ *             Your content here.
+ *         </section>
+ *     </div>
+ * </div>
+ *
+ * ======= VISUAL EXPLANATION =======
+ *
+ * div.modal-wrapper (full-screen)
+ *
+ *             div.modal (horizontally centered)
+ *              ----------------------------
+ *             |  header       (button) [x] |
+ *             |____________________________|
+ *             |  section                   |
+ *             |                            |
+ *             |                            |
+ *             |                            |
+ *             |                            |
+ *              ----------------------------
+ *
+ * ======= NOTES =======
+ *
+ * - The modal width is not fixed. Set width on .modal directly, or it'll
+ *   be decided by child content
+ * - To open/close, show/hide the .modal-wrapper div. Hidden by default.
+ */
+
+.modal-wrapper {
+    width: 100vw;
+    height: 100vh;
     position: fixed;
-    left: 50%;
-    top: 30%;
-    margin-top: 24px;
-    margin-left: -144px;
-    width: 288px;
-    font: normal 14px/18px $Ideal;
-    padding: 24px;
-    background: $white;
-    border: 2px solid $black;
-    @include border-radius(5px);
-    box-shadow: 0px 0px 32px 16px rgba($black, 0.5);
-    z-index: 3;
-
-    .continue {
-        text-align: right;
+    top: 0;
+    left: 0;
+    text-align: center;
+    display: none;
+    background: transparentize($black, 0.3);
+}
+
+.modal {
+    $border-radius: 5px;
+    $header-height: 55px;
+
+    display: inline-block;
+    position: relative;
+    @include border-radius($border-radius);
+    @include box-shadow(0, 0, 50px, $black);
+
+    margin-top: 15vh;
+
+    header {
+        text-align: left;
+        width: 100%;
+        height: $header-height;
+        border: 1px solid $darker-black;
+        background: white;
+        @include border-radius($border-radius $border-radius 0 0);
+
+        h2 {
+            margin: 0;
+            font-size: 20px;
+            padding: 0px 20px 0px 20px;
+            line-height: $header-height;
+            vertical-align: middle;
+            text-transform: none;
+        }
+
+        button {
+            border-top: 1px solid $darker-black;
+            border-right: 1px solid $darker-black;
+            border-bottom: 1px solid $darker-black;
+            color: $darker-black;
+            vertical-align: middle;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            height: $header-height;
+            width: $header-height;
+            background: none;
+            @include border-radius(0 $border-radius 0 0);
+
+            &:hover {
+                background-color: $light-brown;
+            }
+        }
+    }
+
+    section {
+        border-right: 1px solid $darker-black;
+        border-left: 1px solid $darker-black;
+        border-bottom: 1px solid $darker-black;
+        text-align: left;
+        overflow: auto;
+        max-height: 70vh;
+        z-index: 0;
+        background: $lightest-gray;
+        @include border-radius(0 0 $border-radius $border-radius);
     }
 }
diff --git a/scss/pages/identities.scss b/scss/pages/identities.scss
@@ -65,75 +65,21 @@
         }
     }
 
-    #country-chooser {
-        z-index: 1001;
-        display: none;
-        background: white;
-        @include border-radius(5px);
-        @include box-shadow(0, 0, 10px, $black);
-        position: fixed;
-        width: 240px;
-        height: 50vh;
-        top: 25%;
-        left: 50%;
-        margin-left: -120px;
-
-        header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 1;
-            width: 240px;
-            height: 36px;
-            background: white;
-            border-bottom: 1px solid $black;
-            @include border-radius(5px 5px 0 0);
-            @include box-shadow(0, 0, 10px, $black);
+    #country-chooser .modal {
+        width: 300px;
 
-            h2 {
-                margin: 0;
-                padding: 12px 20px 0;
+        a.country {
+            padding: 5px 20px;
+            display: block;
+            img {
+                margin: 0 5px -10px 0;
             }
-            button {
-                position: absolute;
-                top: 5px;
-                right: 20px;
-            }
-        }
-
-        section {
-            overflow: auto;
-            height: 50vh;
-            z-index: 0;
-            margin-top: 36px;
-            background: $lightest-gray;
-            @include border-radius(0 0 5px 5px);
-            @include box-shadow(0, 0, 10px, $black);
-
-            a {
-                padding: 5px 20px;
-                display: block;
-                img {
-                    margin: 0 5px -10px 0;
-                }
-                span {
-                    font: bold 18px/18px $Ideal;
-                }
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
+            span {
+                font: bold 18px/18px $Ideal;
             }
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
-
-    #grayout {
-        width: 100vw;
-        height: 100vh;
-        position: fixed;
-        top: 0;
-        left: 0;
-        background: transparentize($black, 0.3);
-        z-index: 1000;
-        display: none;
-    }
 }
diff --git a/scss/variables.scss b/scss/variables.scss
@@ -11,6 +11,7 @@ $brown: #630;
 $light-brown: desaturate(lighten($brown, 60), 60);
 
 $black: #454545;
+$darker-black: #333;
 $darker-gray: #CCC;
 $medium-gray: #999;
 $gray: #555;

diff --git a/tests/ttw/test_team_distributing.py b/tests/ttw/test_team_distributing.py
@@ -52,7 +52,7 @@ def test_owner_can_remove_a_member(self):
         self.sign_in('picard')
         self.visit('/TheEnterprise/distributing/')
         self.css('table.team span.remove').first.click()
-        self.wait_for('.modal .yes').first.click()
+        self.wait_for('.confirmation-modal .yes').first.click()
         assert self.wait_for_success() == 'alice has been removed from the team.'
         assert self.enterprise.get_memberships() == []
 

diff --git a/www/%team/distributing/index.html.spt b/www/%team/distributing/index.html.spt
@@ -59,7 +59,7 @@ banner = team.name
     <tbody class="team-members"></tbody>
 </table>
 
-<div class="modal">
+<div class="confirmation-modal">
     <p><b>{{ _("Are you sure?") }}</b></p>
     <p class="confirmation-message"></p>
     <div class="continue">

diff --git a/www/assets/gratipay.css.spt b/www/assets/gratipay.css.spt
@@ -29,6 +29,7 @@
 @import "scss/components/chart";
 @import "scss/components/chosen";
 @import "scss/components/communities";
+@import "scss/components/confirmation-modal";
 @import "scss/components/cta";
 @import "scss/components/danger-zone";
 @import "scss/components/dropdown";

diff --git a/www/~/%username/identities/index.spt b/www/~/%username/identities/index.spt
@@ -34,21 +34,22 @@ nidentities = len(identities)
 
     <div class="clear"></div>
 
-    <div id="country-chooser">
-        <header>
-            <h2>{{ _("Which Country?") }}</h2>
-            <button class="close-country-chooser">&times;</button>
-        </header>
-        <section>
-            {% for name, code in countries %}
-            <a href="{{ code }}">
-                <img class="flag {{ code }}"
-                     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=">
-                <span>{{ name }}</span>
-            </a>
-            {% endfor %}
-        </section>
+    <div class="modal-wrapper" id="country-chooser">
+        <div class="modal">
+            <header>
+                <h2>{{ _("Which Country?") }}</h2>
+                <button class="close-modal icon">&#xe010;</button>
+            </header>
+            <section>
+                {% for name, code in countries %}
+                <a href="{{ code }}" class="country">
+                    <img class="flag {{ code }}"
+                         src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=">
+                    <span>{{ name }}</span>
+                </a>
+                {% endfor %}
+            </section>
+        </div>
     </div>
-    <div id="grayout"></div>
 </div>
 {% endblock %}