From efb49e4a621d8c5415753820f634bb789769fc97 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Sat, 17 Jun 2017 13:15:07 +0530 Subject: [PATCH 1/7] Rename modal to confirmation-modal --- js/gratipay/confirm.js | 4 ++-- scss/components/{modal.scss => confirmation-modal.scss} | 2 +- tests/ttw/test_team_distributing.py | 2 +- www/%team/distributing/index.html.spt | 2 +- www/assets/gratipay.css.spt | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) rename scss/components/{modal.scss => confirmation-modal.scss} (94%) diff --git a/js/gratipay/confirm.js b/js/gratipay/confirm.js index 7a76cd29c5..1ef4159a5d 100644 --- a/js/gratipay/confirm.js +++ b/js/gratipay/confirm.js @@ -1,5 +1,5 @@ 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(); }); @@ -7,5 +7,5 @@ Gratipay.confirm = function(message, yes, no) { }; Gratipay.confirm.close = function() { - $('.modal').hide(); + $('.confirmation-modal').hide(); }; diff --git a/scss/components/modal.scss b/scss/components/confirmation-modal.scss similarity index 94% rename from scss/components/modal.scss rename to scss/components/confirmation-modal.scss index e5a4c2427f..97d99a1b29 100644 --- a/scss/components/modal.scss +++ b/scss/components/confirmation-modal.scss @@ -1,4 +1,4 @@ -.modal { +.confirmation-modal { display: none; position: fixed; left: 50%; diff --git a/tests/ttw/test_team_distributing.py b/tests/ttw/test_team_distributing.py index 89fb3034c0..f7b12eac59 100644 --- 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 index 3769e038fb..a1e322a8a0 100644 --- a/www/%team/distributing/index.html.spt +++ b/www/%team/distributing/index.html.spt @@ -59,7 +59,7 @@ banner = team.name -
+

{{ _("Are you sure?") }}

diff --git a/www/assets/gratipay.css.spt b/www/assets/gratipay.css.spt index b2da2dc116..aeb177d7f5 100644 --- 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"; @@ -40,7 +41,6 @@ @import "scss/components/loading-indicators"; @import "scss/components/long-form"; @import "scss/components/memberships"; -@import "scss/components/modal"; @import "scss/components/nav"; @import "scss/components/pagination"; @import "scss/components/payments-by"; From 3739e11249b2644fd2e373f6151fa96b226dcc37 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Sat, 17 Jun 2017 13:34:18 +0530 Subject: [PATCH 2/7] Extract grayout into modal.scss --- js/gratipay/countryChooser.js | 8 ++++---- scss/components/modal.scss | 10 ++++++++++ scss/pages/identities.scss | 11 ----------- www/assets/gratipay.css.spt | 1 + www/~/%username/identities/index.spt | 1 - 5 files changed, 15 insertions(+), 16 deletions(-) create mode 100644 scss/components/modal.scss diff --git a/js/gratipay/countryChooser.js b/js/gratipay/countryChooser.js index 9d88c4bcaf..9facb5167e 100644 --- a/js/gratipay/countryChooser.js +++ b/js/gratipay/countryChooser.js @@ -3,16 +3,16 @@ 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() + $('body').append(''); + $('#modal-grayout').click(Gratipay.countryChooser.close); $('#country-chooser').show(); }; Gratipay.countryChooser.close = function() { - $('#country-chooser').hide() - $('#grayout').hide() + $('#country-chooser').hide(); + $('#modal-grayout').remove(); }; diff --git a/scss/components/modal.scss b/scss/components/modal.scss new file mode 100644 index 0000000000..9e4fbc9ac3 --- /dev/null +++ b/scss/components/modal.scss @@ -0,0 +1,10 @@ +#modal-grayout { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background: transparentize($black, 0.3); + z-index: 1000; +} + diff --git a/scss/pages/identities.scss b/scss/pages/identities.scss index 99e0e9c238..11b737069f 100644 --- a/scss/pages/identities.scss +++ b/scss/pages/identities.scss @@ -125,15 +125,4 @@ } } } - - #grayout { - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; - background: transparentize($black, 0.3); - z-index: 1000; - display: none; - } } diff --git a/www/assets/gratipay.css.spt b/www/assets/gratipay.css.spt index aeb177d7f5..7cc741a052 100644 --- a/www/assets/gratipay.css.spt +++ b/www/assets/gratipay.css.spt @@ -41,6 +41,7 @@ @import "scss/components/loading-indicators"; @import "scss/components/long-form"; @import "scss/components/memberships"; +@import "scss/components/modal"; @import "scss/components/nav"; @import "scss/components/pagination"; @import "scss/components/payments-by"; diff --git a/www/~/%username/identities/index.spt b/www/~/%username/identities/index.spt index d03a662647..254f1229ab 100644 --- a/www/~/%username/identities/index.spt +++ b/www/~/%username/identities/index.spt @@ -49,6 +49,5 @@ nidentities = len(identities) {% endfor %}
-
{% endblock %} From e55e5af5d2bf456f29b1c753adbed8d0bb693fee Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Sat, 17 Jun 2017 13:54:46 +0530 Subject: [PATCH 3/7] Extract country-chooser styles into modal.scss --- scss/components/modal.scss | 59 +++++++++++++++++++++++++ scss/pages/identities.scss | 65 +++++----------------------- www/~/%username/identities/index.spt | 30 +++++++------ 3 files changed, 86 insertions(+), 68 deletions(-) diff --git a/scss/components/modal.scss b/scss/components/modal.scss index 9e4fbc9ac3..f773b3e8e4 100644 --- a/scss/components/modal.scss +++ b/scss/components/modal.scss @@ -1,3 +1,62 @@ +.modal-wrapper { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + text-align: center; + display: none; + z-index: 1001; +} + +.modal { + $border-radius: 5px; + $header-height: 36px; + + display: inline-block; + position: relative; + background: white; + @include border-radius($border-radius); + @include box-shadow(0, 0, 10px, $black); + + margin-top: 15vh; + + header { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: $header-height; + background: white; + border-bottom: 1px solid $black; + @include border-radius($border-radius $border-radius 0 0); + @include box-shadow(0, 0, 10px, $black); + + h2 { + margin: 0; + padding: 12px 20px 0; + } + + button { + position: absolute; + top: 5px; + right: 20px; + } + } + + section { + text-align: left; + + overflow: auto; + max-height: 70vh; + z-index: 0; + margin-top: $header-height; + background: $lightest-gray; + @include border-radius(0 0 $border-radius $border-radius); + @include box-shadow(0, 0, 10px, $black); + } +} + #modal-grayout { width: 100vw; height: 100vh; diff --git a/scss/pages/identities.scss b/scss/pages/identities.scss index 11b737069f..871ced80a6 100644 --- a/scss/pages/identities.scss +++ b/scss/pages/identities.scss @@ -65,64 +65,21 @@ } } - #country-chooser { - z-index: 1001; - display: none; - background: white; - @include border-radius(5px); - @include box-shadow(0, 0, 10px, $black); - position: fixed; + #country-chooser .modal { 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); - h2 { - margin: 0; - padding: 12px 20px 0; - } - button { - position: absolute; - top: 5px; - right: 20px; + a.country { + padding: 5px 20px; + display: block; + img { + margin: 0 5px -10px 0; } - } - - 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; } } } diff --git a/www/~/%username/identities/index.spt b/www/~/%username/identities/index.spt index 254f1229ab..532f07daf0 100644 --- a/www/~/%username/identities/index.spt +++ b/www/~/%username/identities/index.spt @@ -34,20 +34,22 @@ nidentities = len(identities)
-
-
-

{{ _("Which Country?") }}

- -
-
- {% for name, code in countries %} - - - {{ name }} - - {% endfor %} -
+
{% endblock %} From f585ee655ea5845f7efd05a21d4dcc5c9035f737 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Sat, 17 Jun 2017 14:12:21 +0530 Subject: [PATCH 4/7] Replace countryChooser.js with modal.js --- js/gratipay/countryChooser.js | 11 +---------- js/gratipay/modal.js | 17 +++++++++++++++++ www/~/%username/identities/index.spt | 2 +- 3 files changed, 19 insertions(+), 11 deletions(-) create mode 100644 js/gratipay/modal.js diff --git a/js/gratipay/countryChooser.js b/js/gratipay/countryChooser.js index 9facb5167e..f2d96e153e 100644 --- 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); }; Gratipay.countryChooser.open = function() { - $('.open-country-chooser').blur(); - $('body').append(''); - $('#modal-grayout').click(Gratipay.countryChooser.close); - $('#country-chooser').show(); -}; - -Gratipay.countryChooser.close = function() { - $('#country-chooser').hide(); - $('#modal-grayout').remove(); + Gratipay.modal.open('#country-chooser'); }; diff --git a/js/gratipay/modal.js b/js/gratipay/modal.js new file mode 100644 index 0000000000..2f17d66381 --- /dev/null +++ b/js/gratipay/modal.js @@ -0,0 +1,17 @@ +Gratipay.modal = {} + +Gratipay.modal.open = function(modalWrapper) { + $('body').append(''); + $(modalWrapper).show().focus(); + + var closeModal = function() { + Gratipay.modal.close(modalWrapper); + }; + $('#modal-grayout').click(closeModal); + $(modalWrapper).find('button.close-modal').click(closeModal); +}; + +Gratipay.modal.close = function(modalWrapper) { + $(modalWrapper).hide(); + $('#modal-grayout').remove(); +}; diff --git a/www/~/%username/identities/index.spt b/www/~/%username/identities/index.spt index 532f07daf0..f966bcd44b 100644 --- a/www/~/%username/identities/index.spt +++ b/www/~/%username/identities/index.spt @@ -38,7 +38,7 @@ nidentities = len(identities)

{{ _("Which Country?") }}

- +
{% for name, code in countries %} From 283c2ea17a8f58548e63fcafbacc946172d5bf13 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Sat, 17 Jun 2017 16:39:33 +0530 Subject: [PATCH 5/7] Remove grayout, reuse modalWrapper --- js/gratipay/modal.js | 10 +++++++--- scss/components/modal.scss | 13 +------------ 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/js/gratipay/modal.js b/js/gratipay/modal.js index 2f17d66381..6d3660b67a 100644 --- a/js/gratipay/modal.js +++ b/js/gratipay/modal.js @@ -1,17 +1,21 @@ Gratipay.modal = {} Gratipay.modal.open = function(modalWrapper) { - $('body').append(''); $(modalWrapper).show().focus(); var closeModal = function() { Gratipay.modal.close(modalWrapper); }; - $('#modal-grayout').click(closeModal); + $(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(); - $('#modal-grayout').remove(); }; diff --git a/scss/components/modal.scss b/scss/components/modal.scss index f773b3e8e4..ff041a8456 100644 --- a/scss/components/modal.scss +++ b/scss/components/modal.scss @@ -6,7 +6,7 @@ left: 0; text-align: center; display: none; - z-index: 1001; + background: transparentize($black, 0.3); } .modal { @@ -56,14 +56,3 @@ @include box-shadow(0, 0, 10px, $black); } } - -#modal-grayout { - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; - background: transparentize($black, 0.3); - z-index: 1000; -} - From 10c37089e1836f9f1a3086f4e235dc83da8f1046 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Sat, 17 Jun 2017 16:23:24 +0530 Subject: [PATCH 6/7] Design modifications --- scss/components/modal.scss | 41 ++++++++++++++++++---------- scss/pages/identities.scss | 2 +- scss/variables.scss | 1 + www/~/%username/identities/index.spt | 2 +- 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/scss/components/modal.scss b/scss/components/modal.scss index ff041a8456..09b80cbbdc 100644 --- a/scss/components/modal.scss +++ b/scss/components/modal.scss @@ -11,48 +11,61 @@ .modal { $border-radius: 5px; - $header-height: 36px; + $header-height: 55px; display: inline-block; position: relative; - background: white; @include border-radius($border-radius); - @include box-shadow(0, 0, 10px, $black); + @include box-shadow(0, 0, 50px, $black); margin-top: 15vh; header { - position: absolute; - top: 0; - left: 0; + text-align: left; width: 100%; height: $header-height; + border: 1px solid $darker-black; background: white; - border-bottom: 1px solid $black; @include border-radius($border-radius $border-radius 0 0); - @include box-shadow(0, 0, 10px, $black); h2 { margin: 0; - padding: 12px 20px 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: 5px; - right: 20px; + 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; - margin-top: $header-height; background: $lightest-gray; @include border-radius(0 0 $border-radius $border-radius); - @include box-shadow(0, 0, 10px, $black); } } diff --git a/scss/pages/identities.scss b/scss/pages/identities.scss index 871ced80a6..16c0898116 100644 --- a/scss/pages/identities.scss +++ b/scss/pages/identities.scss @@ -66,7 +66,7 @@ } #country-chooser .modal { - width: 240px; + width: 300px; a.country { padding: 5px 20px; diff --git a/scss/variables.scss b/scss/variables.scss index 9f4029e2b8..c8e3ea86bd 100644 --- 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/www/~/%username/identities/index.spt b/www/~/%username/identities/index.spt index f966bcd44b..75679101d7 100644 --- a/www/~/%username/identities/index.spt +++ b/www/~/%username/identities/index.spt @@ -38,7 +38,7 @@ nidentities = len(identities)

{{ _("Which Country?") }}

- +
{% for name, code in countries %} From c45e1b9facabfae37733fda4d4f0c565bd47b6eb Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Sat, 17 Jun 2017 17:14:45 +0530 Subject: [PATCH 7/7] Add notes about modal component --- scss/components/modal.scss | 39 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/scss/components/modal.scss b/scss/components/modal.scss index 09b80cbbdc..7a0eeb83c9 100644 --- a/scss/components/modal.scss +++ b/scss/components/modal.scss @@ -1,3 +1,42 @@ +/* + * ======= MARKUP ======= + * + *
+ *
+ *
+ *

Title!

+ * + *
+ *
+ * Your content here. + *
+ *
+ *
+ * + * ======= 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;