From c6c53a67dc621cfd846c11ebe1dc2f338c48683c Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 11:54:08 +0200 Subject: [PATCH 01/21] [WO-264] fix css transition flickering in editor --- src/sass/components/_lightbox.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss index 25bc93d..fb6f093 100755 --- a/src/sass/components/_lightbox.scss +++ b/src/sass/components/_lightbox.scss @@ -21,6 +21,7 @@ height: 100%; padding: $lightbox-padding; background: #fff; + backface-visibility: hidden; header { text-align: center; position: relative; @@ -77,11 +78,9 @@ // effect .lightbox-effect .lightbox-body { transform: scale(0.7); - opacity: 0; transition: all 0.3s; } .lightbox-overlay.show .lightbox-effect .lightbox-body { transform: scale(1); - opacity: 1; } \ No newline at end of file From d0c59fc58fab2a4e8cc25bdf51e31804246ef776 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 13:03:54 +0200 Subject: [PATCH 02/21] Use flexbox in write-view --- src/sass/views/_write.scss | 13 +++++++------ src/tpl/write.html | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/sass/views/_write.scss b/src/sass/views/_write.scss index c09feff..eaa9e2a 100644 --- a/src/sass/views/_write.scss +++ b/src/sass/views/_write.scss @@ -1,4 +1,6 @@ .view-write { + display: flex; + flex-direction: column; margin: 0px; padding: 0px; color: $color-grey-dark; @@ -19,6 +21,7 @@ } .headers { + flex-shrink: 0; margin-top: 10px; p { @@ -38,6 +41,7 @@ } .subject-box { + flex-shrink: 0; position: relative; margin: 20px 0 7px 0; width: inherit; @@ -47,7 +51,6 @@ height: em(44); .subject-line { - float: left; padding: 10px; width: 80%; color: $color-grey; @@ -82,6 +85,7 @@ } .attachments-box { + flex-shrink: 0; position: relative; margin: 0 0 5px 0; width: inherit; @@ -126,13 +130,10 @@ } .body { + flex-grow: 1; line-height: 1.5em; cursor: text; - - @include respond-to(desktop) { - height: 445px; - overflow-y: scroll; - } + overflow-y: scroll; *[contentEditable] { outline: 0px; diff --git a/src/tpl/write.html b/src/tpl/write.html index 7a89620..1b848a6 100644 --- a/src/tpl/write.html +++ b/src/tpl/write.html @@ -19,7 +19,7 @@

- +
From 138a4628625532bc109cf863ea6e1c862a287d18 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 16:41:07 +0200 Subject: [PATCH 03/21] [WO-283] Implement BCC and dynamic address headers for writer --- src/js/controller/write.js | 25 +++++++++++++++++++++-- src/sass/_angular-csp.scss | 18 +++++++++++++++++ src/sass/all.scss | 1 + src/sass/components/_labels.scss | 8 ++++++++ src/sass/views/_write.scss | 34 ++++++++++++++++++++++++++++---- src/tpl/write.html | 20 ++++++++++++++----- 6 files changed, 95 insertions(+), 11 deletions(-) create mode 100755 src/sass/_angular-csp.scss diff --git a/src/js/controller/write.js b/src/js/controller/write.js index a58a7ef..11e9ed2 100644 --- a/src/js/controller/write.js +++ b/src/js/controller/write.js @@ -48,9 +48,11 @@ define(function(require) { $scope.to = [{ address: '' }]; + $scope.showCC = false; $scope.cc = [{ address: '' }]; + $scope.showBCC = false; $scope.bcc = [{ address: '' }]; @@ -85,6 +87,7 @@ define(function(require) { $scope.cc.unshift({ address: recipient.address }); + $scope.showCC = true; }); $scope.cc.forEach($scope.verify); } @@ -404,6 +407,11 @@ define(function(require) { scope.$apply(); } + function removeInput(field, index, scope) { + field.splice(index, 1); + scope.$apply(); + } + function checkForEmptyInput(field) { var emptyFieldExists = false; field.forEach(function(recipient) { @@ -415,6 +423,18 @@ define(function(require) { return emptyFieldExists; } + function cleanupEmptyInputs(field, scope) { + var i; + + for (i = field.length - 2; i >= 0; i--) { + if (!field[i].address) { + field.splice(i, 1); + } + } + + scope.$apply(); + } + ngModule.directive('field', function() { return { //scope: true, // optionally create a child scope @@ -455,6 +475,8 @@ define(function(require) { // create new field input addInput(field, scope); } + + cleanupEmptyInputs(field, scope); }); element.on('keydown', function(e) { @@ -476,8 +498,7 @@ define(function(require) { // backspace, delete on empty input // remove input e.preventDefault(); - field.splice(index, 1); - scope.$apply(); + removeInput(field, index, scope); // focus on previous id var previousId = fieldName + (index - 1); document.getElementById(previousId).focus(); diff --git a/src/sass/_angular-csp.scss b/src/sass/_angular-csp.scss new file mode 100755 index 0000000..0d3d3a9 --- /dev/null +++ b/src/sass/_angular-csp.scss @@ -0,0 +1,18 @@ +/* Include this file in your html if you are using the CSP mode. */ + +@charset "UTF-8"; + +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], +.ng-cloak, .x-ng-cloak, +.ng-hide { + display: none !important; +} + +ng\:form { + display: block; +} + +.ng-animate-block-transitions { + transition:0s all!important; + -webkit-transition:0s all!important; +} diff --git a/src/sass/all.scss b/src/sass/all.scss index 09e309c..29a61de 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -8,6 +8,7 @@ @import "fonts"; @import "responsive"; @import "scaffolding"; +@import "angular-csp"; // use angular csp specific classes // Components @import "components/buttons"; diff --git a/src/sass/components/_labels.scss b/src/sass/components/_labels.scss index 2cf5cc0..2810711 100755 --- a/src/sass/components/_labels.scss +++ b/src/sass/components/_labels.scss @@ -46,6 +46,14 @@ } } +.label-blank { + background-color: transparent; + color: $color-black; + text-align: left; + padding-left: 0; + padding-right: 0; +} + .label-light { background-color: $label-light-back-color; color: $label-light-color; diff --git a/src/sass/views/_write.scss b/src/sass/views/_write.scss index eaa9e2a..96b6de9 100644 --- a/src/sass/views/_write.scss +++ b/src/sass/views/_write.scss @@ -25,18 +25,44 @@ margin-top: 10px; p { - margin: 0.2em 0; - padding: 0.2em 0; + margin: 0.4em 0 0.2em; cursor: text; } - span { + .label { + margin-bottom: 0.2em; + } + + label { + display: inline-block; + width: 2em; color: $color-grey; } input { margin-left: 0.3em; - width: 80%; + } + } + + .headers-more { + float: right; + margin: 0.4em 0; + + button { + display: inline-block; + background: none; + padding: 0 0.5em; + margin: 0; + text-decoration: none; + color: $color-black; + transition: color 0.3s; + outline: 0; + + &:hover, + &:focus { + color: $color-blue; + text-decoration: underline; + } } } diff --git a/src/tpl/write.html b/src/tpl/write.html index 1b848a6..96fed9b 100644 --- a/src/tpl/write.html +++ b/src/tpl/write.html @@ -7,16 +7,26 @@
+
+ + +

- To: + - +

-

- Cc: +

+ - + + +

+

+ + +

From 0b3f19a8ce07d4ed864a425e71c272c9f51e70c8 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 16:42:31 +0200 Subject: [PATCH 04/21] [WO-328] Show and style webkit scrollbars --- src/sass/_scaffolding.scss | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/sass/_scaffolding.scss b/src/sass/_scaffolding.scss index fcc60c3..438c8c9 100755 --- a/src/sass/_scaffolding.scss +++ b/src/sass/_scaffolding.scss @@ -4,6 +4,9 @@ *:before, *:after { box-sizing: border-box; + + // remove flickering on item touch selection in ios + -webkit-tap-highlight-color: transparent !important; } // Body reset @@ -34,6 +37,24 @@ textarea { -moz-osx-font-smoothing: grayscale; } +// Custom scrollbars in webkit +// @see http://css-tricks.com/custom-scrollbars-in-webkit/ +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: $color-grey-lighter; + border: 3px solid transparent; + background-clip: content-box; + cursor: pointer; + &:hover { + background-color: $color-blue; + } +} + // add space at the top since ios7 apps are now fullscreen .ios-spacer { padding-top: 20px; @@ -45,14 +66,4 @@ textarea { // allow text selection user-select: none; - - // make scrollbars invisible - ::-webkit-scrollbar { - width: 0px; - } - - // remove flickering on item touch selection in ios - * { - -webkit-tap-highlight-color: transparent !important; - } } \ No newline at end of file From c2ce4e73eff201d9f97f6a5b2e7a896e7f9fc714 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 19:39:29 +0200 Subject: [PATCH 05/21] [WO-329] Use flexbox in read-view, refactor address-headers in write and read views --- src/sass/_scaffolding.scss | 2 +- src/sass/all.scss | 1 + src/sass/components/_mail-addresses.scss | 17 ++++ src/sass/views/_read.scss | 103 +++++++++++------------ src/sass/views/_write.scss | 23 +---- src/tpl/read.html | 46 +++++----- src/tpl/write.html | 18 ++-- 7 files changed, 99 insertions(+), 111 deletions(-) create mode 100644 src/sass/components/_mail-addresses.scss diff --git a/src/sass/_scaffolding.scss b/src/sass/_scaffolding.scss index 438c8c9..515f4e4 100755 --- a/src/sass/_scaffolding.scss +++ b/src/sass/_scaffolding.scss @@ -49,7 +49,7 @@ textarea { background: $color-grey-lighter; border: 3px solid transparent; background-clip: content-box; - cursor: pointer; + cursor: pointer !important; &:hover { background-color: $color-blue; } diff --git a/src/sass/all.scss b/src/sass/all.scss index 29a61de..c05a6e2 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -21,6 +21,7 @@ @import "components/layout"; @import "components/popover"; @import "components/input"; +@import "components/mail-addresses"; // Views @import "views/shared"; diff --git a/src/sass/components/_mail-addresses.scss b/src/sass/components/_mail-addresses.scss new file mode 100644 index 0000000..994a619 --- /dev/null +++ b/src/sass/components/_mail-addresses.scss @@ -0,0 +1,17 @@ +.mail-addresses { + p { + margin: 0.4em 0 0.2em; + cursor: text; + } + + .label { + margin-bottom: 0.2em; + margin-right: 0.5em; + } + + label { + display: inline-block; + width: 2.75em; + color: $color-grey; + } +} \ No newline at end of file diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss index 4ef3e09..ed90a3d 100644 --- a/src/sass/views/_read.scss +++ b/src/sass/views/_read.scss @@ -1,19 +1,19 @@ .view-read { + display: flex; + flex-direction: column; margin: 0px; padding: 10px 15px; height: 100%; + width: 100%; color: $color-grey-dark; .headers { + flex-shrink: 0; margin-bottom: 1em; - p { - margin: 0px; - padding: 0px; - } - .subject { font-size: $font-size-bigger; + margin: 0; } .date { @@ -21,24 +21,31 @@ font-size: $font-size-small; margin-top: 0.25em; margin-bottom: 1.5em; - padding: 0px; } - .address { - color: $color-grey; - padding: 0.2em 0; - + .mail-addresses { .label { - margin-left: 0.3em; + cursor: pointer; + } - &:hover { - cursor: pointer; - } + p { + margin-top: 0.2em; + margin-bottom: 0; + } + } + + .controls { + float: right; + margin: 0 15px 10px; + + button { + margin-left: 7px; } } } .attachments { + flex-shrink: 0; position: relative; width: inherit; border: 1px; @@ -72,54 +79,50 @@ } .seperator-line { + flex-shrink: 0; height: 1px; color: $color-grey-lighter; background-color: $color-grey-lighter; } .body { + flex-grow: 1; + position: relative; margin-top: 1.75em; cursor: text; - padding-bottom: 250px; line-height: 1.5em; - height: 100%; overflow-y: scroll; user-select: text; .working { - margin: 0 auto; - height: 100%; - width: 230px; - display: table; + position: absolute; + top: 50%; + width: 100%; + transform: translateY(-50%); + vertical-align: middle; + text-align: center; - .container { - display: table-cell; + .spinner { + font-size: 2em; + margin-right: 0.2em; vertical-align: middle; - .spinner { - position: relative; + // todo: outsource component + display: inline-block; + height: 1em; + width: 1em; + animation: rotation .6s linear infinite; + border-left: 0.17em solid $color-grey-light; + border-right: 0.17em solid $color-grey-light; + border-bottom: 0.17em solid $color-grey-light; + border-top: 0.17em solid $color-grey; + border-radius: 100%; + } - div { - position: absolute; - top: 0; - left: 0; - height: 30px; - width: 30px; - animation: rotation .6s linear infinite; - border-left: 5px solid $color-grey-light; - border-right: 5px solid $color-grey-light; - border-bottom: 5px solid $color-grey-light; - border-top: 5px solid $color-grey; - border-radius: 100%; - } - } - - h1 { - margin: 0; - padding-left: 40px; - line-height: 30px; - color: $color-grey-input; - } + strong { + color: $color-grey-input; + font-size: 2em; + vertical-align: middle; } } @@ -137,6 +140,7 @@ } iframe { + flex-grow: 1; width: 100%; } @@ -175,13 +179,4 @@ } } -} - -.controls { - float: right; - margin: 10px 15px; - - button { - margin-left: 7px; - } } \ No newline at end of file diff --git a/src/sass/views/_write.scss b/src/sass/views/_write.scss index 96b6de9..d5bbf16 100644 --- a/src/sass/views/_write.scss +++ b/src/sass/views/_write.scss @@ -20,31 +20,12 @@ border: 0!important; } - .headers { + .mail-addresses { flex-shrink: 0; margin-top: 10px; - - p { - margin: 0.4em 0 0.2em; - cursor: text; - } - - .label { - margin-bottom: 0.2em; - } - - label { - display: inline-block; - width: 2em; - color: $color-grey; - } - - input { - margin-left: 0.3em; - } } - .headers-more { + .mail-addresses-more { float: right; margin: 0.4em 0; diff --git a/src/tpl/read.html b/src/tpl/read.html index 618fc14..32cc377 100644 --- a/src/tpl/read.html +++ b/src/tpl/read.html @@ -1,24 +1,29 @@ -
- - - -
-
+
+ + + +
+

{{(state.mailList.selected.subject) ? state.mailList.selected.subject : 'No subject'}}

{{state.mailList.selected.sentDate | date:'EEEE, MMM d, yyyy h:mm a'}}

-

- From: {{u.name || u.address}} -

-

- To: {{u.name || u.address}} -

-
-

- Cc: {{u.name || u.address}} +

+

+ + {{u.name || u.address}}

-
+

+ + {{u.name || u.address}} +

+
+

+ + {{u.name || u.address}} +

+
+
@@ -44,13 +49,8 @@
-
- - -

Loading...

-

Decrypting...

- -
+ +
diff --git a/src/tpl/write.html b/src/tpl/write.html index 96fed9b..7beb025 100644 --- a/src/tpl/write.html +++ b/src/tpl/write.html @@ -6,30 +6,24 @@
-
-
+
+

- - - +

- - - +

- - - +

-
+
From fdd9c221447ced0d9f9440be310375440c44d094 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 19:41:14 +0200 Subject: [PATCH 06/21] [WO-312] Fix slowness for large inbox * Fix memory leak causing iScroll to be re-initialized each time mail-list model changes * Only do $scope.$apply() when keyboard shortcuts are actually executed --- src/js/controller/mail-list.js | 27 ++++++++++++++++----------- src/js/controller/navigation.js | 9 ++++++++- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/js/controller/mail-list.js b/src/js/controller/mail-list.js index 6b52512..75fc9bc 100644 --- a/src/js/controller/mail-list.js +++ b/src/js/controller/mail-list.js @@ -164,7 +164,7 @@ define(function(require) { var index = getFolder().messages.indexOf(email); // show the next mail if (getFolder().messages.length > 1) { - // if we're about to delete the last entry of the array, show the previous (i.e. the one below in the list), + // if we're about to delete the last entry of the array, show the previous (i.e. the one below in the list), // otherwise show the next one (i.e. the one above in the list) $scope.select(_.last(getFolder().messages) === email ? getFolder().messages[index - 1] : getFolder().messages[index + 1]); } else { @@ -289,6 +289,8 @@ define(function(require) { }]; // sender address this.to = [{ address: 'max.musterman@gmail.com' + }, { + address: 'max.musterman@gmail.com' }]; // list of receivers this.cc = [{ address: 'john.doe@gmail.com' @@ -403,7 +405,8 @@ define(function(require) { return { link: function(scope, elm, attrs) { var model = attrs.ngIscroll, - listEl = elm[0]; + listEl = elm[0], + myScroll; /* * iterates over the mails in the mail list and loads their bodies if they are visible in the viewport @@ -418,7 +421,7 @@ define(function(require) { isPartiallyVisibleTop, isPartiallyVisibleBottom, isVisible; for (var i = 0, len = listItems.length; i < len; i++) { - // the n-th list item (the dom representation of an email) corresponds to + // the n-th list item (the dom representation of an email) corresponds to // the n-th message model in the filteredMessages array listItem = listItems.item(i).getBoundingClientRect(); message = scope.filteredMessages[i]; @@ -439,17 +442,19 @@ define(function(require) { } }; - // re-init iScroll when model length changes - scope.$watch(model, function() { - var myScroll; - // activate iscroll - myScroll = new IScroll(listEl, { - mouseWheel: true - }); + // activate iscroll + myScroll = new IScroll(listEl, { + mouseWheel: true, + scrollbars: true, + fadeScrollbars: true + }); + myScroll.on('scrollEnd', scope.loadVisibleBodies); + // refresh iScroll when model length changes + scope.$watch(model, function() { + myScroll.refresh(); // load the visible message bodies, when the list is re-initialized and when scrolling stopped scope.loadVisibleBodies(); - myScroll.on('scrollEnd', scope.loadVisibleBodies); }, true); } }; diff --git a/src/js/controller/navigation.js b/src/js/controller/navigation.js index 1c918ee..2de2e5e 100644 --- a/src/js/controller/navigation.js +++ b/src/js/controller/navigation.js @@ -153,6 +153,7 @@ define(function(require) { // n -> new mail e.preventDefault(); scope.state.writer.write(); + scope.$apply(); } else if (modifier && e.keyCode === 70 && !scope.state.writer.open) { // f -> find @@ -161,39 +162,45 @@ define(function(require) { $timeout(function() { scope.state.mailList.searching = false; }, 200); + scope.$apply(); } else if (modifier && e.keyCode === 82 && scope.state.writer && !scope.state.writer.open && scope.state.mailList.selected) { // r -> reply e.preventDefault(); scope.state.writer.write(scope.state.mailList.selected); + scope.$apply(); } else if (modifier && e.keyCode === 83 && scope.state.writer && !scope.state.writer.open && scope.state.mailList.synchronize) { // s -> sync folder e.preventDefault(); scope.state.mailList.synchronize(); + scope.$apply(); } else if (e.keyCode === 27 && scope.state.writer.open) { // escape -> close writer e.preventDefault(); scope.state.writer.close(); + scope.$apply(); } else if (e.keyCode === 27 && scope.state.account.open) { // escape -> close account view e.preventDefault(); scope.state.account.toggle(false); + scope.$apply(); } else if (e.keyCode === 27 && scope.state.contacts.open) { // escape -> close contacts view e.preventDefault(); scope.state.contacts.toggle(false); + scope.$apply(); } else if (e.keyCode === 27 && scope.state.nav.open) { // escape -> close nav view e.preventDefault(); scope.state.nav.toggle(false); + scope.$apply(); } - scope.$apply(); }); }; }); From 44cbb803f336797a6b5c6396853dc7ad49121697 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 20:08:28 +0200 Subject: [PATCH 07/21] [WO-332] Move spinner scss to component --- src/sass/all.scss | 1 + src/sass/components/_spinner.scss | 22 ++++++++++++++++++++++ src/sass/views/_mail-list.scss | 28 +++++----------------------- src/sass/views/_read.scss | 19 +------------------ 4 files changed, 29 insertions(+), 41 deletions(-) create mode 100644 src/sass/components/_spinner.scss diff --git a/src/sass/all.scss b/src/sass/all.scss index c05a6e2..15e19fc 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -22,6 +22,7 @@ @import "components/popover"; @import "components/input"; @import "components/mail-addresses"; +@import "components/spinner"; // Views @import "views/shared"; diff --git a/src/sass/components/_spinner.scss b/src/sass/components/_spinner.scss new file mode 100644 index 0000000..595f6da --- /dev/null +++ b/src/sass/components/_spinner.scss @@ -0,0 +1,22 @@ +.spinner { + vertical-align: middle; + display: inline-block; + margin-right: 0.2em; + height: 1em; + width: 1em; + animation: spinner-rotation .6s linear infinite; + border-left: 0.17em solid $color-grey-light; + border-right: 0.17em solid $color-grey-light; + border-bottom: 0.17em solid $color-grey-light; + border-top: 0.17em solid $color-grey; + border-radius: 100%; +} + +@keyframes spinner-rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} \ No newline at end of file diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss index 107f966..77b1ad4 100755 --- a/src/sass/views/_mail-list.scss +++ b/src/sass/views/_mail-list.scss @@ -63,32 +63,14 @@ } } + .spinner { + display:none; + } + &.syncing { .spinner { - top: 6.5px; - left: $padding-horizontal; - height: 13px; - width: 13px; - position: absolute; - animation: rotation .6s linear infinite; - border-left: 2px solid $color-grey-light; - border-right: 2px solid $color-grey-light; - border-bottom: 2px solid $color-grey-light; - border-top: 2px solid $color-grey; - border-radius: 100%; - } - .text { - padding-left: 1.5em; + display: inline-block; } } } -} - -@keyframes rotation { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); - } } \ No newline at end of file diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss index ed90a3d..7f41c1e 100644 --- a/src/sass/views/_read.scss +++ b/src/sass/views/_read.scss @@ -101,27 +101,10 @@ transform: translateY(-50%); vertical-align: middle; text-align: center; - - .spinner { - font-size: 2em; - margin-right: 0.2em; - vertical-align: middle; - - // todo: outsource component - display: inline-block; - height: 1em; - width: 1em; - animation: rotation .6s linear infinite; - border-left: 0.17em solid $color-grey-light; - border-right: 0.17em solid $color-grey-light; - border-bottom: 0.17em solid $color-grey-light; - border-top: 0.17em solid $color-grey; - border-radius: 100%; - } + font-size: 2em; strong { color: $color-grey-input; - font-size: 2em; vertical-align: middle; } } From 9ae46b2257e9ea468e97e073f27652fda5f84c4d Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Tue, 22 Apr 2014 20:58:20 +0200 Subject: [PATCH 08/21] cleanup markup, fix editor body height when plaintext --- src/tpl/read.html | 34 ++++++++++++++-------------------- src/tpl/write.html | 2 +- 2 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/tpl/read.html b/src/tpl/read.html index 32cc377..9b8a441 100644 --- a/src/tpl/read.html +++ b/src/tpl/read.html @@ -17,27 +17,21 @@ {{u.name || u.address}}

-
-

- - {{u.name || u.address}} -

-
+

+ + {{u.name || u.address}} +

-
-
- - - {{attachment.filename}} - -
-
-
-
-
+
+ + + {{attachment.filename}} + +
+
@@ -46,12 +40,12 @@

-
-
+
+
-
+
diff --git a/src/tpl/write.html b/src/tpl/write.html index 7beb025..678598f 100644 --- a/src/tpl/write.html +++ b/src/tpl/write.html @@ -50,7 +50,7 @@

-
+

-----BEGIN ENCRYPTED PREVIEW-----
{{ciphertextPreview}}
-----END ENCRYPTED PREVIEW-----

From 716febfe700a110eff4f8baba5fe0fc186b57f5d Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 11:15:13 +0200 Subject: [PATCH 09/21] Use scut sass mixins * vcenter spinner in read-view * vcenter lightbox --- src/sass/_variables.scss | 1 - src/sass/all.scss | 6 +- src/sass/components/_lightbox.scss | 7 +- src/sass/{ => lib}/_angular-csp.scss | 0 src/sass/lib/_scut.scss | 1485 ++++++++++++++++++++++++++ src/sass/views/_read.scss | 5 +- 6 files changed, 1497 insertions(+), 7 deletions(-) rename src/sass/{ => lib}/_angular-csp.scss (100%) create mode 100644 src/sass/lib/_scut.scss diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index df183cb..015e21a 100755 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -51,7 +51,6 @@ $lightbox-padding: 15px; $lightbox-max-width: 662px; $lightbox-width: 90%; $lightbox-min-height: 644px; -$lightbox-top: 7.5%; $btn-back-color: $color-blue; $btn-color: #fff; diff --git a/src/sass/all.scss b/src/sass/all.scss index 15e19fc..408a18d 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -3,12 +3,16 @@ @import "functions"; @import "grid"; +// Third party libs +@import "lib/angular-csp"; // use angular csp specific classes +@import "lib/scut"; + +// Bootstrap @import "normalize"; @import "variables"; // Modify this for custom colors, font-sizes, etc @import "fonts"; @import "responsive"; @import "scaffolding"; -@import "angular-csp"; // use angular csp specific classes // Components @import "components/buttons"; diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss index fb6f093..ea9bb29 100755 --- a/src/sass/components/_lightbox.scss +++ b/src/sass/components/_lightbox.scss @@ -9,12 +9,12 @@ backface-visibility: hidden; @include respond-to(desktop) { - top: $lightbox-top; margin: 0 auto; width: $lightbox-width; max-width: $lightbox-max-width; max-height: $lightbox-min-height; height: auto; + text-align: left; } .lightbox-body { @@ -68,6 +68,11 @@ opacity: 0; background: $color-grey-dark-alpha; transition: all 0.3s; + + @include respond-to(desktop) { + @include scut-vcenter-ib(".lightbox"); + text-align: center; + } } .lightbox-overlay.show { diff --git a/src/sass/_angular-csp.scss b/src/sass/lib/_angular-csp.scss similarity index 100% rename from src/sass/_angular-csp.scss rename to src/sass/lib/_angular-csp.scss diff --git a/src/sass/lib/_scut.scss b/src/sass/lib/_scut.scss new file mode 100644 index 0000000..bd00143 --- /dev/null +++ b/src/sass/lib/_scut.scss @@ -0,0 +1,1485 @@ +/* +* Scut, a collection of Sass utilities +* to ease and improve our implementations of common style-code patterns. +* v0.10.3 +* Docs at http://davidtheclark.github.io/scut +*/ + +@mixin scut-clearfix { + + &:after { + content: ""; + display: table; + clear: both; + } + +} + +%scut-clearfix { + @include scut-clearfix; +} +@mixin scut-list-unstyled( + $no-margin: true +) { + + list-style-type: none; + padding-left: 0; + + @if $no-margin { + margin-top: 0; + margin-bottom: 0; + } + +} + +%scut-list-unstyled { + @include scut-list-unstyled(); +} +// Depends on `list-unstyled` and `clearfix`. + +@mixin scut-list-floated ( + $space: false, + $dir: left, + $no-margin: true +) { + + @include scut-list-unstyled($no-margin); + @include scut-clearfix; + + & > li { + float: $dir; + } + + @if $space { + & > li + li { + margin-#{$dir}: $space; + } + } + +} + +%scut-list-floated { + @include scut-list-floated; +} + +@function scut-autoOrValue ($val) { + @if $val == a or $val == auto { + @return auto; + } + @else { + @return $val; + } +} + +@mixin scut-coords ( + $coordinates: n n n n +) { + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + @if $top != n { + top: scut-autoOrValue($top); + } + @if $right != n { + right: scut-autoOrValue($right); + } + @if $bottom != n { + bottom: scut-autoOrValue($bottom); + } + @if $left != n { + left: scut-autoOrValue($left); + } + +} +@function scut-strip-unit ( + $num +) { + + @return $num / ($num * 0 + 1); + +} +// Depends on `scut-strip-unit`. + +$scut-em-base: 16 !default; + +@function scut-em ( + $pixels, + $base: $scut-em-base +) { + + // $base could be in em or px (no unit = px). + // Adjust accordingly to create a $divisor that + // serves as context for $pixels. + $multiplier: if(unit($base) == em, 16, 1); + $divisor: scut-strip-unit($base) * $multiplier; + + $em-vals: (); + @each $val in $pixels { + $val-in-ems: (scut-strip-unit($val) / $divisor) * 1em; + $em-vals: append($em-vals, $val-in-ems); + } + + @if length($em-vals) == 1 { + // return a single value instead of a list, + // so it can be used in calculations + @return nth($em-vals, 1); + } + @else { + @return $em-vals; + } + +} +// Depends on `scut-strip-unit`. + +$scut-rem-base: 16 !default; + +@function scut-rem ( + $pixels +) { + + $rem-vals: (); + @each $val in $pixels { + $val-in-rems: scut-strip-unit($val) / $scut-rem-base * 1rem; + $rem-vals: append($rem-vals, $val-in-rems); + } + + @if length($rem-vals) == 1 { + // return a single value instead of a list, + // so it can be used in calculations + @return nth($rem-vals, 1); + } + @else { + @return $rem-vals; + } + +} +@mixin scut-border ( + $style, + $sides: n y +) { + + @if length($sides) == 2 { + @if nth($sides, 1) != n { + border-top: $style; + border-bottom: $style; + } + @if nth($sides, 2) != n { + border-left: $style; + border-right: $style; + } + } + + @else if length($sides) == 4 { + @if nth($sides, 1) != n { + border-top: $style; + } + @if nth($sides, 2) != n { + border-right: $style; + } + @if nth($sides, 3) != n { + border-bottom: $style; + } + @if nth($sides, 4) != n { + border-left: $style; + } + } + + @else { + @warn "Scut-border requires a $sides argument of 2 or 4 values." + } + +} +@mixin scut-circle ( + $size, + $color: inherit +) { + + border-radius: 50%; + display: inline-block; + + @if $color == inherit { + // If user wants to inherit the color, + // take advantage of the fact that border + // color defaults to the text color of the element. + border-width: $size / 2; + border-style: solid; + height: 0; + width: 0; + } + @else { + // Otherwise, just use background-color. + background-color: $color; + height: $size; + width: $size; + } + +} +@mixin scut-color-swap ( + $off, + $on, + $duration: 0, + $bg: false +) { + + $transition-properties: null; + $off-is-list: type-of($off) == list; + $on-is-list: type-of($on) == list; + + // If $off IS a list, + // assign color and background-color. + @if $off-is-list { + color: nth($off, 1); + background-color: nth($off, 2); + $transition-properties: background-color, color; + } + + // If $off IS NOT a list and $bg is TRUE, + // assign background-color. + @else if $bg and not $off-is-list { + background-color: $off; + $transition-properties: background-color; + } + + // If $off IS NOT a list and $bg is FALSE, + // assign color. + @else { + color: $off; + $transition-properties: color; + } + + // Only set-up transition if $duration != 0. + @if $duration != 0 { + transition-property: $transition-properties; + transition-duration: $duration; + } + + &:hover, + &:focus { + + // $on is treated the same as $off, above. + @if $on-is-list { + color: nth($on, 1); + background-color: nth($on, 2); + } + + @else if $bg and not $on-is-list { + background-color: $on; + } + + @else { + color: $on; + } + } + +} +@mixin scut-hd-bp ( + $ratio: 1.3 +) { + + @media (-o-min-device-pixel-ratio: #{$ratio}/1), + (-webkit-min-device-pixel-ratio: #{$ratio}), + (min-resolution: #{round(96 * $ratio)}dpi) { + @content; + } + +} +@mixin scut-hide-visually { + + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + +} + +%scut-hide-visually { + @include scut-hide-visually; +} +@mixin scut-image-replace { + + text-indent: 102%; + white-space: nowrap; + overflow: hidden; + +} + +%scut-image-replace { + @include scut-image-replace; +} +// Depends on scut-rem and scut-strip-unit + +@mixin scut-rem-fallback ( + $pixels, + $property: font-size +) { + + $px-vals: null; + @each $val in $pixels { + $val-in-px: scut-strip-unit($val) * 1px; + $px-vals: append($px-vals, $val-in-px); + } + $rem-vals: scut-rem($pixels); + + #{$property}: $px-vals; + #{$property}: $rem-vals; + +} +@mixin scut-reset-border-box { + // Make everything a border-box, because why not? + *, *:before, *:after { + -moz-box-sizing: border-box; + box-sizing: border-box; + } +} + +@mixin scut-reset-antialias { + // Antialias! + body { + -webkit-font-smoothing: antialiased; + } +} + +@mixin scut-reset-semanticize { + // Make headers and semantic, not presentational. + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: 1em; + font-weight: normal; + margin: 0; + } + b { + font-weight: normal; + } +} + +@mixin scut-reset-pointer { + // Clickable form elements should have a pointer. + label, + select, + option, + button { + cursor: pointer; + } +} + +@mixin scut-reset-form { + fieldset { + border: 0; + margin: 0; + padding: 0; + } + textarea { + resize: vertical; + } +} + +@mixin scut-reset-button { + // Reset default button styles, which are never used. + button, + input[type="button"], + input[type="submit"], + input[type="reset"] { + background: transparent; + border: 0; + color: inherit; + font: inherit; + margin: 0; + outline: none; + padding: 0; + width: auto; + -webkit-appearance: none; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + &::-moz-focus-inner { + padding: 0; + border: 0; + } + } +} + +@mixin scut-reset-paragraph { + // Some paragraph margins just get in the way. + p:first-of-type { + margin-top: 0; + } + p:last-of-type { + margin-bottom: 0; + } +} + +@mixin scut-reset-media { + // You want these elements fluid, probably. + img, + video { + max-width: 100%; + height: auto; + } +} + +@mixin scut-reset-figure { + // Remove default margins: + figure { + margin: 0; + } +} + +// Call them all, minus exclusions! +@mixin scut-reset ($exclude: false) { + @if not index($exclude, border-box) { + @include scut-reset-border-box; + } + @if not index($exclude, antialias) { + @include scut-reset-antialias; + } + @if not index($exclude, semanticize) { + @include scut-reset-semanticize; + } + @if not index($exclude, pointer) { + @include scut-reset-pointer; + } + @if not index($exclude, form) { + @include scut-reset-form; + } + @if not index($exclude, button) { + @include scut-reset-button; + } + @if not index($exclude, paragraph) { + @include scut-reset-paragraph; + } + @if not index($exclude, media) { + @include scut-reset-media; + } + @if not index($exclude, figure) { + @include scut-reset-figure; + } +} +@mixin scut-selected ( + $active: false +) { + + @if $active { + &:hover, + &:focus, + &:active { + @content; + } + } + @else { + &:hover, + &:focus { + @content; + } + } + +} +@mixin scut-triangle ( + $direction: right, + $size: 0.75em, + $color: inherit +) { + + display: inline-block; + height: 0; + width: 0; + // For improved appearance in some Webkit browsers + -webkit-transform: rotate(360deg); + + // Set up some variables + $width: null; + $height: null; + $border-widths: null; + + @if type-of($size) == list { + $width: nth($size, 1); + $height: nth($size, 2); + } + @else { + $width: $size; + $height: $size; + } + + @if ($direction == up) or ($direction == down) { + // For up and down, width gets two borders but height only one, + // so divide second border-width value by 2 + $border-widths: $height ($width / 2); + } + @else if ($direction == right) or ($direction == left) { + // For right and left, height gets two borders but width only one, + // so divide first border-width value by 2 + $border-widths: ($height / 2) $width; + } + @else { + // For right triangles (the rest), both sides get two borders, + // so divide both by 2 + $border-widths: ($height / 2) ($width / 2); + } + + border-width: $border-widths; + border-style: solid; + + + // STANDARD TRIANGLES + + @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + border-color: transparent; + @if $direction == up { + border-bottom-color: $color; + border-top-width: 0; + } + @else if $direction == right { + border-left-color: $color; + border-right-width: 0; + } + @else if $direction == down { + border-top-color: $color; + border-bottom-width: 0; + } + @else if $direction == left { + border-right-color: $color; + border-left-width: 0; + } + } + + + // CORNER TRIANGLES + + @else if ($direction == top-right) or ($direction == top-left) { + border-top-color: $color; + border-bottom-color: transparent; + @if $direction == top-right { + border-left-color: transparent; + border-right-color: $color; + } + @else if $direction == top-left { + border-left-color: $color; + border-right-color: transparent; + } + } + + @else if ($direction == bottom-right) or ($direction == bottom-left) { + border-top-color: transparent; + border-bottom-color: $color; + @if $direction == bottom-right { + border-left-color: transparent; + border-right-color: $color; + } + @else if $direction == bottom-left { + border-left-color: $color; + border-right-color: transparent; + } + } + +} + +%scut-triangle { + @include scut-triangle; +} +@mixin scut-center-absolutely ( + $dimensions +) { + + $width: nth($dimensions, 1); + $height: nth($dimensions, 2); + + position: absolute; + + @if $width != n { + width: $width; + left: 50%; + margin-left: (-$width / 2); + } + + @if $height != n { + height: $height; + top: 50%; + margin-top: (-$height / 2); + } + +} +@mixin scut-center-block ( + $max-width: false +) { + + margin-left: auto; + margin-right: auto; + @if $max-width { + max-width: $max-width; + } + +} + +%scut-center-block { + @include scut-center-block; +} + +@mixin scut-center-transform ( + $axis: false // or x or y +) { + + position: absolute; + + @if $axis != x { + top: 50%; + margin-top: auto; + margin-bottom: auto; + } + + @if $axis != y { + left: 50%; + margin-left: auto; + margin-right: auto; + } + + $translate-val: null; + + @if not $axis { + $translate-val: translate(-50%, -50%); + } + @else if $axis != x { + $translate-val: translateY(-50%); + } + @else if $axis != y { + $translate-val: translateX(-50%); + } + + -webkit-transform: $translate-val; + -ms-transform: $translate-val; + transform: $translate-val; +} + +%scut-center-transform { + @include scut-center-transform; +} + +%scut-center-transform-x { + @include scut-center-transform(x); +} + +%scut-center-transform-y { + @include scut-center-transform(y); +} + +@mixin scut-fill ( + $width-height: false +) { + + position: absolute; + left: 0; + top: 0; + @if $width-height { + width: 100%; + height: 100%; + } + @else { + right: 0; + bottom: 0; + } + +} + +%scut-fill { + @include scut-fill; +} +@mixin scut-list-custom ( + $content: "\2022", + $marker-width: 0.75em, + $pad: 0, + $no-margin: false +) { + + $content-val: null; + $counter: index($content, count); + @if $counter { + @if length($content) == 3 { + $content-val: counter(scutlistcounter, nth($content, 3))nth($content,2); + } + @else if length($content) == 2 { + $content-val: counter(scutlistcounter)nth($content,2); + } + @else { + $content-val: counter(scutlistcounter); + } + } + @else { + $content-val: $content; + } + + padding-left: $marker-width + $pad; + list-style-type: none; + + @if $no-margin { + margin-top: 0; + margin-bottom: 0; + } + + & > li { + position: relative; + @if $counter { + counter-increment: scutlistcounter; + } + &:before { + content: $content-val; + display: block; + position: absolute; + top: 0; + left: -$marker-width; + width: $marker-width; + @content; + } + } + +} +// Depends on `list-floated`, which depends in turn on `list-unstyled` and `clearfix`. + +@mixin scut-list-divided ( + $divider: "|", + $space: 0.5em, + $dir: left, + $height: false, + $no-margin: true +) { + + @include scut-list-floated($dir: $dir, $no-margin: $no-margin); + + $pseudo: if($dir == left, 'before', 'after'); + + // If an explicit height is passed, + // things are different: All
  • s + // need the pseudo-element (to force height), + // but the first's must be hidden. + + @if $height { + & > li { + height: $height; + } + & > li:#{$pseudo} { + height: $height; + content: $divider; + display: inline-block; + vertical-align: middle; + @content; + } + & > li:first-child:#{$pseudo} { + width: 0; + overflow: hidden; + } + } + + & > li + li:#{$pseudo} { + @if not $height { + content: $divider; + display: inline-block; + @content; + } + margin-left: $space; + margin-right: $space; + } + +} + +%scut-list-bar { + @include scut-list-divided; +} + +%scut-list-breadcrumb { + @include scut-list-divided("/"); +} +// Depends on `list-unstyled`. + +@mixin scut-list-inline ( + $space: false, + $no-margin: true +) { + + @include scut-list-unstyled($no-margin); + + & > li { + display: inline-block; + } + + @if $space { + & > li + li { + margin-left: $space; + } + } + +} + +%scut-list-inline { + @include scut-list-inline; +} +// Depends on `list-unstyled`. + +@mixin scut-list-punctuated ( + $divider: ", ", + $display: inline, + $no-margin: true +) { + + @include scut-list-unstyled($no-margin); + + & > li { + display: $display; + &:not(:last-child):after { + content: $divider; + } + } + +} + +%scut-list-comma { + @include scut-list-punctuated; +} +@mixin scut-margin ( + $margin +) { + + @if length($margin) == 1 and $margin != n { + margin-top: $margin; + margin-right: $margin; + margin-bottom: $margin; + margin-left: $margin; + } + + @if length($margin) == 2 { + $margin-y: nth($margin, 1); + $margin-x: nth($margin, 2); + @if $margin-y != n { + margin-top: $margin-y; + margin-bottom: $margin-y; + } + @if $margin-x != n { + margin-left: $margin-x; + margin-right: $margin-x; + } + } + + @if length($margin) == 3 { + $margin-y-top: nth($margin, 1); + $margin-x: nth($margin, 2); + $margin-y-bottom: nth($margin, 3); + @if $margin-y-top != n { + margin-top: $margin-y-top; + } + @if $margin-x != n { + margin-right: $margin-x; + margin-left: $margin-x; + } + @if $margin-y-bottom != n { + margin-bottom: $margin-y-bottom; + } + } + + @if length($margin) == 4 { + $margin-top: nth($margin, 1); + $margin-right: nth($margin, 2); + $margin-bottom: nth($margin, 3); + $margin-left: nth($margin, 4); + @if $margin-top != n { + margin-top: $margin-top; + } + @if $margin-right != n { + margin-right: $margin-right; + } + @if $margin-bottom != n { + margin-bottom: $margin-bottom; + } + @if $margin-left != n { + margin-left: $margin-left; + } + } + +} +@mixin scut-padding ( + $padding +) { + + @if length($padding) == 1 and $padding != n { + padding-top: $padding; + padding-right: $padding; + padding-bottom: $padding; + padding-left: $padding; + } + + @if length($padding) == 2 { + $padding-y: nth($padding, 1); + $padding-x: nth($padding, 2); + @if $padding-y != n { + padding-top: $padding-y; + padding-bottom: $padding-y; + } + @if $padding-x != n { + padding-left: $padding-x; + padding-right: $padding-x; + } + } + + @if length($padding) == 3 { + $padding-y-top: nth($padding, 1); + $padding-x: nth($padding, 2); + $padding-y-bottom: nth($padding, 3); + @if $padding-y-top != n { + padding-top: $padding-y-top; + } + @if $padding-x != n { + padding-right: $padding-x; + padding-left: $padding-x; + } + @if $padding-y-bottom != n { + padding-bottom: $padding-y-bottom; + } + } + + @if length($padding) == 4 { + $padding-top: nth($padding, 1); + $padding-right: nth($padding, 2); + $padding-bottom: nth($padding, 3); + $padding-left: nth($padding, 4); + @if $padding-top != n { + padding-top: $padding-top; + } + @if $padding-right != n { + padding-right: $padding-right; + } + @if $padding-bottom != n { + padding-bottom: $padding-bottom; + } + @if $padding-left != n { + padding-left: $padding-left; + } + } +} +// Depends on `positioning-coordinates`. + +@mixin scut-absolute ( + $coordinates: 0 n n 0 +) { + + position: absolute; + @include scut-coords($coordinates); + +} + +%scut-absolute { + @include scut-absolute; +} +// Depends on `positioning-coordinates`. + +@mixin scut-fixed ( + $coordinates: 0 n n 0 +) { + + position: fixed; + @include scut-coords($coordinates); + +} + +%scut-fixed { + @include scut-fixed; +} +// Depends on `positioning-coordinates`. + +@mixin scut-relative ( + $coordinates: n n n n +) { + + position: relative; + @include scut-coords($coordinates); + +} +@mixin scut-ratio-box ( + $ratio: 1/1 +) { + + overflow: hidden; + position: relative; + + // The container's height, as a percentage of the + // container's width, is set by assigning + // padding-top to a pseudo-element. + &:before { + content: ""; + display: block; + height: 0; + padding-top: (1 / $ratio) * 100%; + } + +} + +%scut-ratio-box { + @include scut-ratio-box; +} +@mixin scut-size( + $size +) { + + @if length($size) == 1 { + width: $size; + height: $size; + } + @else if length($size) == 2 { + width: nth($size, 1); + height: nth($size, 2); + } + +} +@mixin scut-sticky-footer-fixed ( + $height, + $wrapper: ".wrapper", + $footer: ".scut-sticky" +) { + + html, + body { + height: 100%; + margin: 0; + padding: 0; + } + + #{$wrapper} { + min-height: 100%; + margin-bottom: -$height; + &:after { + content: ""; + display: block; + } + } + + #{$wrapper}:after, + #{$footer} { + height: $height; + } + +} + +// deprecated +@mixin scut-sticky-footer ( + $height, + $wrapper: ".wrapper", + $footer: ".scut-sticky" +){ + @include scut-sticky-footer-fixed($height, $wrapper, $footer); +} +@mixin scut-sticky-footer-fluid ( + $wrapper: ".wrapper", + $footer: ".scut-sticky" +) { + + html, + body { + height: 100%; + margin: 0; + padding: 0; + } + + #{$wrapper} { + display: table; + height: 100%; + width: 100%; + } + + #{$footer} { + display: table-row; + height: 1px; + } + +} +@mixin scut-vcenter-ib ( + $inner: ".scut-inner" +) { + + // The inner element is vertically centered + // by middle-aligning it with an inline pseudo-element + // whose height is 100%. + + &:before { + content: ""; + height: 100%; + display: inline-block; + vertical-align: middle; + // A small negative right margin is set + // to account for the default + // word-spacing of inline-block. + margin-right: -0.25em; + } + + & > #{$inner} { + display: inline-block; + vertical-align: middle; + } + +} + +%scut-vcenter-ib { + @include scut-vcenter-ib; +} + +@mixin scut-vcenter-lh ( + $height +) { + + height: $height; + line-height: $height; + +} +@mixin scut-vcenter-td ( + $inner: ".scut-inner" +) { + + display: table; + + & > #{$inner} { + display: table-cell; + vertical-align: middle; + } + +} + + +%scut-vcenter-td { + @include scut-vcenter-td; +} +// Depends on scut-center-transform + +@mixin scut-vcenter-tt () { + @include scut-center-transform(y); +} + +%scut-vcenter-tt { + @include scut-vcenter-tt; +} +// space +$scut-space: "\0020"; +// non-breaking space +$scut-nbsp: "\00a0"; + +// quotation mark +$scut-quot: "\0022"; +// left single curly quote +$scut-lsquo: "\2018"; +// right single curly quote +$scut-rsquo: "\2019"; +// left double curly quote +$scut-ldquo: "\201C"; +// right double curly quote +$scut-rdquo: "\201D"; +// left single angle quote (guillemet) +$scut-lsaquo: "\2039"; +// right single angle quote (guillemet) +$scut-rsaquo: "\203A"; +// left double angle quote (guillemet) +$scut-laquo: "\00ab"; +// right double angle quote (guillemet) +$scut-raquo: "\00bb"; + +// em dash (mutton) +$scut-mdash: "\2014"; +// en dash (nut) +$scut-ndash: "\2013"; +// hyphen +$scut-hyphen: "\2010"; + +// ampersand +$scut-amp: "\0026"; +// greater than +$scut-gt: "\003e"; +// less than +$scut-lt: "\003c"; +// times +$scut-times: "\00D7"; +// big times +$scut-bigtimes: "\2715"; +// checkmark +$scut-checkmark: "\2713"; + +// section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectionis) +$scut-sect: "\00a7"; +// paragraph symbol (pilcrow) +$scut-para: "\00b6"; + +// middot (interpunct, interpoint) +$scut-middot: "\00b7"; +// o-slash (slashed o) +$scut-oslash: "\00f8"; +// bullet +$scut-bull: "\2022"; +// white bullet +$scut-whibull: "\25E6"; +// horizontal ellipsis +$scut-hellip: "\2026"; +// vertical ellipsis +$scut-vellip: "\22EE"; +// midline horizontal ellipsis +$scut-midhellip: "\22EF"; + +// up-pointing triangle +$scut-utri: "\25b2"; +// down-pointing triangle +$scut-dtri: "\25bc"; +// left-pointing triangle +$scut-ltri: "\25c0"; +// right-pointing triangle +$scut-rtri: "\25b6"; +// up-pointing small triangle +$scut-ustri: "\25b4"; +// down-pointing small triangle +$scut-dstri: "\25be"; +// left-pointing small triangle +$scut-lstri: "\25c2"; +// right-pointing small triangle +$scut-rstri: "\25b8"; +// diamond +$scut-diamond: "\25c6"; +// fisheye +$scut-fisheye: "\25c9"; +// bullseye +$scut-bullseye: "\25ce"; +// circle +$scut-circle: "\25cf"; +// white circle +$scut-whitecircle: "\25cb"; +// square +$scut-square: "\25a0"; +// white square +$scut-whitesquare: "\25a1"; +// small square +$scut-ssquare: "\25aa"; +// small white square +$scut-swhitesquare: "\25ab"; +@function main-src($formats, $file-path, $font-family) { + // Return the list of `src` values, in order, that + // a good `@font-face` will need, including only + // those formats specified in the list `$formats`. + $result: (); + @if index($formats, eot) { + $eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype'); + $result: append($result, $eot-val, comma); + } + @if index($formats, woff) { + $woff-val: url('#{$file-path}.woff') format('woff'); + $result: append($result, $woff-val, comma); + } + @if index($formats, ttf) { + $ttf-val: url('#{$file-path}.ttf') format('truetype'); + $result: append($result, $ttf-val, comma); + } + @if index($formats, svg) { + $svg-val: url('#{$file-path}.svg##{$font-family}') format('svg'); + $result: append($result, $svg-val, comma); + } + @return $result; +} + +@mixin scut-font-face ( + $font-family, + $file-path, + $weight: normal, + $style: normal, + $formats: eot woff ttf svg +) { + + @if index('italic' 'oblique', $weight) { + $style: $weight; + $weight: normal; + } + + @font-face { + font-family: $font-family; + font-weight: $weight; + font-style: $style; + + @if index($formats, eot) { + src: url('#{$file-path}.eot'); + } + src: main-src($formats, $file-path, $font-family); + } + +} +@mixin scut-hanging-indent ( + $indent: 1em +) { + + // padding-left creates the indent, + // while text-indent pulls the first line + // back to the edge. + + padding-left: $indent; + text-indent: -$indent; + +} + +%scut-hanging-indent { + @include scut-hanging-indent; +} +@mixin scut-indented-ps ( + $indent: 1.5em, + $no-first-indent: true +) { + + p { + margin: 0; + text-indent: $indent; + } + + @if $no-first-indent { + p:first-of-type { + text-indent: 0; + } + } + +} + +%scut-indented-ps { + @include scut-indented-ps; +} +@mixin scut-key-val ( + $divider: ":", + $pad: 0.25em, + $indent: 1em, + $spacing: 0, + $pad-left: 0 +) { + + & > dt { + clear: both; + float: left; + &:after { + content: $divider; + margin-right: $pad; + @if $pad-left != 0 { + margin-left: $pad-left; + } + } + } + + & > dd { + margin-left: $indent; + @if $spacing != 0 { + margin-bottom: $spacing; + } + } + +} + +%scut-key-val { + @include scut-key-val; +} +@mixin scut-link-bb ( + $color: inherit, + $style: solid, + $width: 1px +) { + + text-decoration: none; + + border-bottom-width: $width; + border-bottom-style: $style; + @if $color != inherit { + border-bottom-color: $color; + } + +} + +%scut-link-bb { + @include scut-link-bb; +} +@mixin scut-reverse-italics ( + $elements: false +) { + + $element-list: em, cite, i; + @each $el in $elements { + $element-list: append($element-list, unquote($el), comma) + } + + font-style: italic; + #{$element-list} { + font-style: normal; + } + +} + +%scut-reverse-italics { + @include scut-reverse-italics; +} +@mixin scut-side-lined ( + $height: 1px, + $space: 0.5em, + $color: inherit, + $style: solid, + $v-adjust: false, + $double: false +) { + + display: block; + overflow: hidden; + text-align: center; + + &:before, + &:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; + width: 50%; + + border-top-style: $style; + border-top-width: $height; + + @if $color != inherit { + border-top-color: $color; + } + + @if $v-adjust != false { + bottom: $v-adjust; + } + + @if $double != false { + height: $double; + border-bottom-style: $style; + border-bottom-width: $height; + @if $color != inherit { + border-bottom-color: $color; + } + } + } + + &:before { + right: $space; + margin-left: -50%; + } + &:after { + left: $space; + margin-right: -50%; + } + +} + +%scut-side-lined { + @include scut-side-lined; +} +@mixin scut-truncate { + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + +} + +%scut-truncate { + @include scut-truncate; +} \ No newline at end of file diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss index 7f41c1e..411334d 100644 --- a/src/sass/views/_read.scss +++ b/src/sass/views/_read.scss @@ -95,11 +95,8 @@ user-select: text; .working { - position: absolute; - top: 50%; + @include scut-vcenter-tt; width: 100%; - transform: translateY(-50%); - vertical-align: middle; text-align: center; font-size: 2em; From 6adc9da8c12bdd27c7a50caca28dac830fd6b67b Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 12:20:46 +0200 Subject: [PATCH 10/21] Cleanup before refactor with ngAnimate * Add ng-animate module in libs * Move error dialog init to app.run * Include error dialog template only once in index.html * Fix race condition between ng-repeat, ng-class using ng-animate --- src/chrome.html | 9 ++++++++- src/ios.html | 7 +++++++ src/js/app.js | 15 ++++++++++++-- src/js/controller/add-account.js | 8 +------- src/js/controller/login-existing.js | 8 +------- src/js/controller/login-initial.js | 8 +------- src/js/controller/login-new-device.js | 6 ------ src/js/controller/login.js | 8 +------- src/js/controller/navigation.js | 6 ------ src/js/util/error.js | 2 +- src/lib/angular/angular-animate.min.js | 27 ++++++++++++++++++++++++++ src/require-config.js | 5 +++++ src/sass/views/_dialog.scss | 1 - src/tpl/add-account.html | 5 ----- src/tpl/desktop.html | 3 --- src/tpl/login-existing.html | 5 ----- src/tpl/login-initial.html | 5 ----- src/tpl/login-new-device.html | 7 +------ src/tpl/login.html | 5 ----- src/tpl/read.html | 12 +++++++++--- 20 files changed, 75 insertions(+), 77 deletions(-) create mode 100755 src/lib/angular/angular-animate.min.js diff --git a/src/chrome.html b/src/chrome.html index 4fadb62..3c91d94 100644 --- a/src/chrome.html +++ b/src/chrome.html @@ -12,8 +12,15 @@ - + +
    + + +
    +
    +
    + diff --git a/src/ios.html b/src/ios.html index b1b708d..20fa363 100644 --- a/src/ios.html +++ b/src/ios.html @@ -20,6 +20,13 @@ +
    + + +
    +
    +
    + diff --git a/src/js/app.js b/src/js/app.js index 3669788..18f12f1 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -19,9 +19,11 @@ requirejs([ 'js/controller/write', 'js/controller/navigation', 'cryptoLib/util', + 'js/util/error', 'angularSanitize', 'angularRoute', - 'angularTouch' + 'angularTouch', + 'angularAnimate' ], function( angular, DialogCtrl, @@ -39,7 +41,8 @@ requirejs([ ReadCtrl, WriteCtrl, NavigationCtrl, - util + util, + errorUtil ) { 'use strict'; @@ -51,6 +54,7 @@ requirejs([ 'ngSanitize', 'ngRoute', 'ngTouch', + 'ngAnimate', 'navigation', 'mail-list', 'write', @@ -91,6 +95,13 @@ requirejs([ }); }); + app.run(function($rootScope) { + // global state... inherited to all child scopes + $rootScope.state = {}; + // attach global error handler + errorUtil.attachHandler($rootScope); + }); + // inject controllers from ng-included view templates app.controller('ReadCtrl', ReadCtrl); app.controller('WriteCtrl', WriteCtrl); diff --git a/src/js/controller/add-account.js b/src/js/controller/add-account.js index cbcf2c0..6c3c479 100644 --- a/src/js/controller/add-account.js +++ b/src/js/controller/add-account.js @@ -1,15 +1,9 @@ define(function(require) { 'use strict'; - var appController = require('js/app-controller'), - errorUtil = require('js/util/error'); + var appController = require('js/app-controller'); var AddAccountCtrl = function($scope, $location) { - // global state... inherited to all child scopes - $scope.$root.state = {}; - // attach global error handler - errorUtil.attachHandler($scope); - $scope.connectToGoogle = function() { appController._auth.getCredentials({}, function(err) { if (err) { diff --git a/src/js/controller/login-existing.js b/src/js/controller/login-existing.js index 9fd14b3..4fe0bd2 100644 --- a/src/js/controller/login-existing.js +++ b/src/js/controller/login-existing.js @@ -1,15 +1,9 @@ define(function(require) { 'use strict'; - var appController = require('js/app-controller'), - errorUtil = require('js/util/error'); + var appController = require('js/app-controller'); var LoginExistingCtrl = function($scope, $location) { - // global state... inherited to all child scopes - $scope.$root.state = {}; - // attach global error handler - errorUtil.attachHandler($scope); - var emailDao = appController._emailDao; $scope.buttonEnabled = true; diff --git a/src/js/controller/login-initial.js b/src/js/controller/login-initial.js index c557af0..c6588ff 100644 --- a/src/js/controller/login-initial.js +++ b/src/js/controller/login-initial.js @@ -1,18 +1,12 @@ define(function(require) { 'use strict'; - var appController = require('js/app-controller'), - errorUtil = require('js/util/error'); + var appController = require('js/app-controller'); var LoginInitialCtrl = function($scope, $location) { var emailDao = appController._emailDao, states, termsMsg = 'You must accept the Terms of Service to continue.'; - // global state... inherited to all child scopes - $scope.$root.state = {}; - // attach global error handler - errorUtil.attachHandler($scope); - states = { IDLE: 1, PROCESSING: 2, diff --git a/src/js/controller/login-new-device.js b/src/js/controller/login-new-device.js index 9125dc5..f3f274b 100644 --- a/src/js/controller/login-new-device.js +++ b/src/js/controller/login-new-device.js @@ -2,15 +2,9 @@ define(function(require) { 'use strict'; var angular = require('angular'), - errorUtil = require('js/util/error'), appController = require('js/app-controller'); var LoginExistingCtrl = function($scope, $location) { - // global state... inherited to all child scopes - $scope.$root.state = {}; - // attach global error handler - errorUtil.attachHandler($scope); - var emailDao = appController._emailDao, pgp = appController._crypto; diff --git a/src/js/controller/login.js b/src/js/controller/login.js index 39fd912..ac96b47 100644 --- a/src/js/controller/login.js +++ b/src/js/controller/login.js @@ -1,15 +1,9 @@ define(function(require) { 'use strict'; - var appController = require('js/app-controller'), - errorUtil = require('js/util/error'); + var appController = require('js/app-controller'); var LoginCtrl = function($scope, $location) { - // global state... inherited to all child scopes - $scope.$root.state = {}; - // attach global error handler - errorUtil.attachHandler($scope); - // check for app update appController.checkForUpdate(); diff --git a/src/js/controller/navigation.js b/src/js/controller/navigation.js index 2de2e5e..736e7d0 100644 --- a/src/js/controller/navigation.js +++ b/src/js/controller/navigation.js @@ -4,7 +4,6 @@ define(function(require) { var angular = require('angular'), str = require('js/app-config').string, appController = require('js/app-controller'), - errorUtil = require('js/util/error'), notification = require('js/util/notification'), _ = require('underscore'), emailDao, outboxBo; @@ -14,11 +13,6 @@ define(function(require) { // var NavigationCtrl = function($scope) { - // global state... inherited to all child scopes - $scope.$root.state = {}; - // attach global error handler - errorUtil.attachHandler($scope); - emailDao = appController._emailDao; outboxBo = appController._outboxBo; diff --git a/src/js/util/error.js b/src/js/util/error.js index 05749a6..ba9b8bd 100644 --- a/src/js/util/error.js +++ b/src/js/util/error.js @@ -4,7 +4,7 @@ define(function() { var er = {}; er.attachHandler = function(scope) { - scope.$root.onError = function(options) { + scope.onError = function(options) { if (!options) { scope.$apply(); return; diff --git a/src/lib/angular/angular-animate.min.js b/src/lib/angular/angular-animate.min.js new file mode 100755 index 0000000..4502865 --- /dev/null +++ b/src/lib/angular/angular-animate.min.js @@ -0,0 +1,27 @@ +/* + AngularJS v1.2.13 + (c) 2010-2014 Google, Inc. http://angularjs.org + License: MIT +*/ +(function(z,f,T){'use strict';f.module("ngAnimate",["ng"]).factory("$$animateReflow",["$window","$timeout","$document",function(f,h,d){var n=f.requestAnimationFrame||f.webkitRequestAnimationFrame||function(d){return h(d,10,!1)},w=f.cancelAnimationFrame||f.webkitCancelAnimationFrame||function(d){return h.cancel(d)};return function(d){var f=n(function(){d()});return function(){w(f)}}}]).factory("$$asyncQueueBuffer",["$timeout",function(f){var h,d=[];return function(n){f.cancel(h);d.push(n);h=f(function(){for(var f= +0;f= +u&&a>=s&&e()}var h=d(a);b=a.data(E);if(-1!=h.className.indexOf(c)&&b){var l="";D(c.split(" "),function(b,a){l+=(0 - -
    -
    -
    -
    diff --git a/src/tpl/desktop.html b/src/tpl/desktop.html index 2a659ec..9821fcb 100644 --- a/src/tpl/desktop.html +++ b/src/tpl/desktop.html @@ -33,7 +33,4 @@
    -
    -
    -
    \ No newline at end of file diff --git a/src/tpl/login-existing.html b/src/tpl/login-existing.html index 445c723..480e451 100644 --- a/src/tpl/login-existing.html +++ b/src/tpl/login-existing.html @@ -18,11 +18,6 @@
    • - -
    -
    -
    -
    diff --git a/src/tpl/login-initial.html b/src/tpl/login-initial.html index 08c6162..391ee9b 100644 --- a/src/tpl/login-initial.html +++ b/src/tpl/login-initial.html @@ -33,11 +33,6 @@
    - -
    -
    -
    -
    diff --git a/src/tpl/login-new-device.html b/src/tpl/login-new-device.html index f123a2b..bfeb0aa 100644 --- a/src/tpl/login-new-device.html +++ b/src/tpl/login-new-device.html @@ -5,7 +5,7 @@

    Import keyfile. To access your emails on this device, please import your existing key file.

    - +
    @@ -20,11 +20,6 @@
    - -
    -
    -
    -
    diff --git a/src/tpl/login.html b/src/tpl/login.html index dec01ee..094c581 100644 --- a/src/tpl/login.html +++ b/src/tpl/login.html @@ -8,9 +8,4 @@

    Login. Authenticating with the mail server...

    -
    - - -
    -
    \ No newline at end of file diff --git a/src/tpl/read.html b/src/tpl/read.html index 9b8a441..db2ad5b 100644 --- a/src/tpl/read.html +++ b/src/tpl/read.html @@ -11,15 +11,21 @@

    - {{u.name || u.address}} + + {{u.name || u.address}} +

    - {{u.name || u.address}} + + {{u.name || u.address}} +

    - {{u.name || u.address}} + + {{u.name || u.address}} +

    From c08ff4f287c69a065a5e326f6f1d5e0da3d16e7c Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 15:24:48 +0200 Subject: [PATCH 11/21] [WO-333] Fix lightbox outer scrollbar * Use ng-animate with display:none instead of visibility:hidden * Fix min-height in lightbox * Start refactoring lightbox opening code using scope.state.lightbox --- src/chrome.html | 2 +- src/js/controller/about.js | 3 +- src/js/controller/account.js | 3 +- src/js/controller/contacts.js | 4 +- src/js/controller/set-passphrase.js | 3 +- src/js/controller/write.js | 5 +-- src/sass/all.scss | 2 +- src/sass/components/_lightbox.scss | 62 +++++++++++++++++++---------- src/tpl/desktop.html | 24 ++++++----- 9 files changed, 63 insertions(+), 45 deletions(-) diff --git a/src/chrome.html b/src/chrome.html index 3c91d94..b0d886a 100644 --- a/src/chrome.html +++ b/src/chrome.html @@ -19,7 +19,7 @@
    -
    +
    diff --git a/src/js/controller/about.js b/src/js/controller/about.js index 7df3cfd..7e952a0 100644 --- a/src/js/controller/about.js +++ b/src/js/controller/about.js @@ -10,9 +10,8 @@ define(function(require) { var AboutCtrl = function($scope) { $scope.state.about = { - open: false, toggle: function(to) { - this.open = to; + $scope.state.lightbox = (to) ? 'about' : undefined; } }; diff --git a/src/js/controller/account.js b/src/js/controller/account.js index 5e0a5c5..3eceaaf 100644 --- a/src/js/controller/account.js +++ b/src/js/controller/account.js @@ -15,9 +15,8 @@ define(function(require) { pgp = appController._crypto; $scope.state.account = { - open: false, toggle: function(to) { - this.open = to; + $scope.state.lightbox = (to) ? 'account' : undefined; } }; diff --git a/src/js/controller/contacts.js b/src/js/controller/contacts.js index a49200a..db97fb6 100644 --- a/src/js/controller/contacts.js +++ b/src/js/controller/contacts.js @@ -15,9 +15,9 @@ define(function(require) { pgp = appController._crypto; $scope.state.contacts = { - open: false, toggle: function(to) { - this.open = to; + $scope.state.lightbox = (to) ? 'contacts' : undefined; + $scope.listKeys(); } }; diff --git a/src/js/controller/set-passphrase.js b/src/js/controller/set-passphrase.js index a280135..d1eb1b6 100644 --- a/src/js/controller/set-passphrase.js +++ b/src/js/controller/set-passphrase.js @@ -13,9 +13,8 @@ define(function(require) { pgp = appController._crypto; $scope.state.setPassphrase = { - open: false, toggle: function(to) { - this.open = to; + $scope.state.lightbox = (to) ? 'set-passphrase' : undefined; $scope.newPassphrase = undefined; $scope.oldPassphrase = undefined; diff --git a/src/js/controller/write.js b/src/js/controller/write.js index 11e9ed2..58cd807 100644 --- a/src/js/controller/write.js +++ b/src/js/controller/write.js @@ -25,9 +25,8 @@ define(function(require) { // $scope.state.writer = { - open: false, write: function(replyTo, replyAll, forward) { - this.open = true; + $scope.state.lightbox = 'write'; $scope.replyTo = replyTo; resetFields(); @@ -39,7 +38,7 @@ define(function(require) { $scope.verify($scope.to[0]); }, close: function() { - this.open = false; + $scope.state.lightbox = undefined; } }; diff --git a/src/sass/all.scss b/src/sass/all.scss index 408a18d..49a9811 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -40,4 +40,4 @@ @import "views/mail-list"; @import "views/read"; @import "views/write"; -@import "views/login"; +@import "views/login"; \ No newline at end of file diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss index ea9bb29..7dca482 100755 --- a/src/sass/components/_lightbox.scss +++ b/src/sass/components/_lightbox.scss @@ -5,14 +5,12 @@ width: 100%; height: 100%; z-index: 2000; - visibility: hidden; backface-visibility: hidden; @include respond-to(desktop) { margin: 0 auto; width: $lightbox-width; max-width: $lightbox-max-width; - max-height: $lightbox-min-height; height: auto; text-align: left; } @@ -22,6 +20,11 @@ padding: $lightbox-padding; background: #fff; backface-visibility: hidden; + + @include respond-to(desktop) { + max-height: $lightbox-min-height; + } + header { text-align: center; position: relative; @@ -53,39 +56,54 @@ } } -.lightbox-overlay.show .lightbox { - visibility: visible; -} - .lightbox-overlay { position: absolute; width: 100%; height: 100%; - visibility: hidden; + display: none; top: 0; left: 0; z-index: 1000; - opacity: 0; background: $color-grey-dark-alpha; - transition: all 0.3s; @include respond-to(desktop) { @include scut-vcenter-ib(".lightbox"); text-align: center; } -} -.lightbox-overlay.show { - opacity: 1; - visibility: visible; -} + &.show { + display: block; + } -// effect -.lightbox-effect .lightbox-body { - transform: scale(0.7); - transition: all 0.3s; -} - -.lightbox-overlay.show .lightbox-effect .lightbox-body { - transform: scale(1); + /* ngAnimate */ + &.show-add { + display: block; + opacity: 0; + transition: opacity 0.3s; + .lightbox-body { + transform: scale(0.7); + transition: transform 0.3s; + } + } + &.show-add-active { + opacity: 1; + .lightbox-body { + transform: scale(1); + } + } + &.show-remove { + display: block; + opacity: 1; + transition: opacity 0.3s; + .lightbox-body { + transform: scale(1); + transition: transform 0.3s; + } + } + &.show-remove-active { + opacity: 0; + .lightbox-body { + transform: scale(0.7); + } + } } \ No newline at end of file diff --git a/src/tpl/desktop.html b/src/tpl/desktop.html index 9821fcb..88ec5d9 100644 --- a/src/tpl/desktop.html +++ b/src/tpl/desktop.html @@ -19,18 +19,22 @@ -
    -
    +
    +
    -
    -
    + +
    +
    -
    -
    + +
    +
    -
    -
    + +
    +
    -
    -
    + +
    +
    \ No newline at end of file From edbac5a3793cc5b9c210c05ef9f61b3c0bc43e08 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 16:28:38 +0200 Subject: [PATCH 12/21] Seperate ng-repeat and ng-class in writer address headers for ng-animate --- src/sass/components/_mail-addresses.scss | 2 +- src/tpl/write.html | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/sass/components/_mail-addresses.scss b/src/sass/components/_mail-addresses.scss index 994a619..bf5b55e 100644 --- a/src/sass/components/_mail-addresses.scss +++ b/src/sass/components/_mail-addresses.scss @@ -6,7 +6,7 @@ .label { margin-bottom: 0.2em; - margin-right: 0.5em; + margin-right: 0.2em; } label { diff --git a/src/tpl/write.html b/src/tpl/write.html index 678598f..b887a81 100644 --- a/src/tpl/write.html +++ b/src/tpl/write.html @@ -13,15 +13,21 @@

    - + + +

    - + + +

    - + + +

    From af6f44177b2925cf96b395d40f6a69d8898d1789 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 16:29:26 +0200 Subject: [PATCH 13/21] Fix jumping send button in writer --- src/sass/components/_lightbox.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss index 7dca482..40656e8 100755 --- a/src/sass/components/_lightbox.scss +++ b/src/sass/components/_lightbox.scss @@ -16,6 +16,7 @@ } .lightbox-body { + position: relative; height: 100%; padding: $lightbox-padding; background: #fff; From 6bb1bd22390182d00bfd35f8681d12c8234bdcbd Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 16:30:29 +0200 Subject: [PATCH 14/21] Fix mail-list filtering and iScroll refresh together with ngAnimate --- src/js/controller/mail-list.js | 12 ++++++++---- src/sass/components/_mail-list.scss | 4 ++++ src/tpl/mail-list.html | 2 +- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/js/controller/mail-list.js b/src/js/controller/mail-list.js index 75fc9bc..6db465f 100644 --- a/src/js/controller/mail-list.js +++ b/src/js/controller/mail-list.js @@ -401,7 +401,8 @@ define(function(require) { // var ngModule = angular.module('mail-list', []); - ngModule.directive('ngIscroll', function() { + + ngModule.directive('ngIscroll', function($timeout) { return { link: function(scope, elm, attrs) { var model = attrs.ngIscroll, @@ -451,11 +452,14 @@ define(function(require) { myScroll.on('scrollEnd', scope.loadVisibleBodies); // refresh iScroll when model length changes - scope.$watch(model, function() { - myScroll.refresh(); + scope.$watchCollection(model, function() { + $timeout(function() { + myScroll.refresh(); + scope.$apply(); + }); // load the visible message bodies, when the list is re-initialized and when scrolling stopped scope.loadVisibleBodies(); - }, true); + }); } }; }); diff --git a/src/sass/components/_mail-list.scss b/src/sass/components/_mail-list.scss index 75514fe..7373bc6 100755 --- a/src/sass/components/_mail-list.scss +++ b/src/sass/components/_mail-list.scss @@ -19,6 +19,10 @@ cursor: pointer; transition: background-color $time-li-fade, color $time-li-fade; + &.ng-animate { + transition: none; + } + h3 { @include text-overflow; diff --git a/src/tpl/mail-list.html b/src/tpl/mail-list.html index 6c5d454..af34203 100644 --- a/src/tpl/mail-list.html +++ b/src/tpl/mail-list.html @@ -8,7 +8,7 @@
    -
    +

    • {{email.from[0].name || email.from[0].address}}

      From 23be9c823d0c54069ea6ebcb6529a85f46baac02 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 17:45:02 +0200 Subject: [PATCH 15/21] Global key shortcut to close lightbox --- src/js/controller/navigation.js | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/src/js/controller/navigation.js b/src/js/controller/navigation.js index 736e7d0..44510f1 100644 --- a/src/js/controller/navigation.js +++ b/src/js/controller/navigation.js @@ -143,13 +143,13 @@ define(function(require) { var modifier = e.ctrlKey || e.metaKey; - if (modifier && e.keyCode === 78 && scope.state.writer && !scope.state.writer.open) { + if (modifier && e.keyCode === 78 && scope.state.lightbox !== 'write') { // n -> new mail e.preventDefault(); scope.state.writer.write(); scope.$apply(); - } else if (modifier && e.keyCode === 70 && !scope.state.writer.open) { + } else if (modifier && e.keyCode === 70 && scope.state.lightbox !== 'write') { // f -> find e.preventDefault(); scope.state.mailList.searching = true; @@ -158,34 +158,22 @@ define(function(require) { }, 200); scope.$apply(); - } else if (modifier && e.keyCode === 82 && scope.state.writer && !scope.state.writer.open && scope.state.mailList.selected) { + } else if (modifier && e.keyCode === 82 && scope.state.lightbox !== 'write' && scope.state.mailList.selected) { // r -> reply e.preventDefault(); scope.state.writer.write(scope.state.mailList.selected); scope.$apply(); - } else if (modifier && e.keyCode === 83 && scope.state.writer && !scope.state.writer.open && scope.state.mailList.synchronize) { + } else if (modifier && e.keyCode === 83 && scope.state.lightbox !== 'write' && scope.state.mailList.synchronize) { // s -> sync folder e.preventDefault(); scope.state.mailList.synchronize(); scope.$apply(); - } else if (e.keyCode === 27 && scope.state.writer.open) { - // escape -> close writer + } else if (e.keyCode === 27 && scope.state.lightbox !== undefined) { + // escape -> close current lightbox e.preventDefault(); - scope.state.writer.close(); - scope.$apply(); - - } else if (e.keyCode === 27 && scope.state.account.open) { - // escape -> close account view - e.preventDefault(); - scope.state.account.toggle(false); - scope.$apply(); - - } else if (e.keyCode === 27 && scope.state.contacts.open) { - // escape -> close contacts view - e.preventDefault(); - scope.state.contacts.toggle(false); + scope.state.lightbox = undefined; scope.$apply(); } else if (e.keyCode === 27 && scope.state.nav.open) { From ba22ee46743bd9e85607c690bcbab32ac6059bc9 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 17:45:49 +0200 Subject: [PATCH 16/21] [WO-336] Fix floating fingerprint popup in contacts view --- src/sass/views/_contacts.scss | 15 +++++++++--- src/sass/views/_write.scss | 3 ++- src/tpl/contacts.html | 46 +++++++++++++++++++---------------- 3 files changed, 39 insertions(+), 25 deletions(-) diff --git a/src/sass/views/_contacts.scss b/src/sass/views/_contacts.scss index a4bd33b..98c8d05 100644 --- a/src/sass/views/_contacts.scss +++ b/src/sass/views/_contacts.scss @@ -15,9 +15,13 @@ } .key-list { - max-height: 400px; + position: relative; margin: 20px; - overflow-y: scroll; + + .key-list-scroll { + max-height: 400px; + overflow-y: scroll; + } table { th, td { @@ -37,6 +41,11 @@ outline: none; } } + + // pull popover upwards to keep popup inside lightbox + .popover { + margin-top: -20px; + } } - + } \ No newline at end of file diff --git a/src/sass/views/_write.scss b/src/sass/views/_write.scss index d5bbf16..32a615c 100644 --- a/src/sass/views/_write.scss +++ b/src/sass/views/_write.scss @@ -8,7 +8,8 @@ height: 100%; @include respond-to(desktop) { - height: 600px; + // this number depends on max-height set on .lightbox + height: 590px; // magic number } input { diff --git a/src/tpl/contacts.html b/src/tpl/contacts.html index 0e69e2b..aaf7781 100644 --- a/src/tpl/contacts.html +++ b/src/tpl/contacts.html @@ -16,30 +16,34 @@
    - - - - - - - - - - - - - - -
    Key IDEmailCreatedSize
    {{key._id.slice(8)}}{{key.userId}}{{key.created | date:'mediumDate'}}{{key.bitSize}} bit
    -
    +
    + + + + + + + + + + + + + + +
    Key IDEmailCreatedSize
    {{key._id.slice(8)}}{{key.userId}}{{key.created | date:'mediumDate'}}{{key.bitSize}} bit
    +
    + + +
    +
    Fingerprint
    +
    {{fingerprint}}
    +
    +
    - -
    -
    Fingerprint
    -
    {{fingerprint}}
    -
    + \ No newline at end of file From bb386299b9100966ef6261f589417ad55da07af8 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 19:40:46 +0200 Subject: [PATCH 17/21] [WO-334] Replace table for reply selection --- src/sass/views/_read.scss | 53 +++++++++++++++++++++------------------ src/tpl/read.html | 21 ++++------------ 2 files changed, 34 insertions(+), 40 deletions(-) diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss index 411334d..60a29c8 100644 --- a/src/sass/views/_read.scss +++ b/src/sass/views/_read.scss @@ -129,34 +129,39 @@ padding: 0; } - table { + ul { + list-style: none; + margin: 0; + } + + li { + border-bottom: 1px solid $color-grey-lighter; + &:last-child { + border-bottom: 0; + } + } + + button { + display: block; + background: none; + width: 100%; + border: 0; + outline: 0; + padding: 0.5em 1em 0.5em 0.3em; color: $color-blue; - user-select: none; + transition: background-color 0.3s; + text-align: left; - tr { - &:hover, - &:focus { - background-color: darken($color-white, 2%); - cursor: pointer; - } - - &.seperator { - border-bottom: 1px solid $color-grey-lighter; - } + &:before { + display: inline-block; + width: 2.5em; + text-align: center; + vertical-align: middle; } - - td { - padding: 7px 5px; - - &.left { - padding-left: 15px; - padding-top: 10px; - } - &.right { - padding-right: 15px; - } + &:hover, + &:focus { + background-color: darken($color-white, 2%); } - } } } \ No newline at end of file diff --git a/src/tpl/read.html b/src/tpl/read.html index db2ad5b..ced1afc 100644 --- a/src/tpl/read.html +++ b/src/tpl/read.html @@ -62,21 +62,10 @@
    -
    - - - - - - - - - - - - - -
    Reply
    Reply All
    Forward
    -
    +
      +
      • +
      • +
      • +
    From 2eff335680339dcba8320885a429cc2e0807a34f Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Thu, 24 Apr 2014 15:44:54 +0200 Subject: [PATCH 18/21] Use local () instead of () in certain cases for performance --- src/js/controller/mail-list.js | 4 +--- src/js/controller/write.js | 13 ++++++------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/js/controller/mail-list.js b/src/js/controller/mail-list.js index 6db465f..b637929 100644 --- a/src/js/controller/mail-list.js +++ b/src/js/controller/mail-list.js @@ -44,7 +44,7 @@ define(function(require) { } // display fetched body - $scope.$apply(); + $scope.$digest(); // automatically decrypt if it's the selected email if (email === $scope.state.mailList.selected) { @@ -209,7 +209,6 @@ define(function(require) { $timeout(function() { // display and select first selectFirstMessage(); - $scope.$apply(); }); $scope.synchronize(); @@ -455,7 +454,6 @@ define(function(require) { scope.$watchCollection(model, function() { $timeout(function() { myScroll.refresh(); - scope.$apply(); }); // load the visible message bodies, when the list is re-initialized and when scrolling stopped scope.loadVisibleBodies(); diff --git a/src/js/controller/write.js b/src/js/controller/write.js index 58cd807..055e225 100644 --- a/src/js/controller/write.js +++ b/src/js/controller/write.js @@ -174,7 +174,7 @@ define(function(require) { } $scope.checkSendStatus(); - $scope.$apply(); + $scope.$digest(); }); }; @@ -334,10 +334,9 @@ define(function(require) { link: function(scope, elm, attrs, ctrl) { // view -> model elm.on('keyup keydown', function() { - scope.$apply(function() { - // set model - ctrl.$setViewValue(elm[0].innerText); - }); + // set model + ctrl.$setViewValue(elm[0].innerText); + scope.$digest(); }); // model -> view @@ -481,7 +480,7 @@ define(function(require) { element.on('keydown', function(e) { var code = e.keyCode; - scope.$apply(); + scope.$digest(); if (code === 32 || code === 188 || code === 186) { // catch space, comma, semicolon @@ -523,7 +522,7 @@ define(function(require) { mimeType: file.type, content: new Uint8Array(e.target.result) }); - scope.$apply(); + scope.$digest(); }; reader.readAsArrayBuffer(file); } From 433cc58d0bc8e1ab228038cf85fe14c2c34ba863 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Thu, 24 Apr 2014 16:45:09 +0200 Subject: [PATCH 19/21] Fix tests for ui/css changes --- test/new-unit/account-ctrl-test.js | 2 +- test/new-unit/contacts-ctrl-test.js | 1 - test/new-unit/login-existing-ctrl-test.js | 9 ++++++--- test/new-unit/login-initial-ctrl-test.js | 6 +++++- test/new-unit/login-new-device-ctrl-test.js | 21 ++++++++++++++++++--- test/new-unit/navigation-ctrl-test.js | 4 +--- test/new-unit/write-ctrl-test.js | 11 +++++------ 7 files changed, 36 insertions(+), 18 deletions(-) diff --git a/test/new-unit/account-ctrl-test.js b/test/new-unit/account-ctrl-test.js index d31d021..f9b74f0 100644 --- a/test/new-unit/account-ctrl-test.js +++ b/test/new-unit/account-ctrl-test.js @@ -79,7 +79,7 @@ define(function(require) { })).yields(); scope.onError = function(err) { expect(err.title).to.equal('Success'); - expect(scope.state.account.open).to.be.false; + expect(scope.state.lightbox).to.equal(undefined); expect(keychainMock.getUserKeyPair.calledOnce).to.be.true; expect(dl.createDownload.calledOnce).to.be.true; dl.createDownload.restore(); diff --git a/test/new-unit/contacts-ctrl-test.js b/test/new-unit/contacts-ctrl-test.js index 2973581..b4989b3 100644 --- a/test/new-unit/contacts-ctrl-test.js +++ b/test/new-unit/contacts-ctrl-test.js @@ -40,7 +40,6 @@ define(function(require) { describe('scope variables', function() { it('should be set correctly', function() { expect(scope.fingerprint).to.equal('XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX'); - expect(scope.state.contacts.open).to.be.false; expect(scope.state.contacts.toggle).to.exist; }); }); diff --git a/test/new-unit/login-existing-ctrl-test.js b/test/new-unit/login-existing-ctrl-test.js index 29fea16..96542e1 100644 --- a/test/new-unit/login-existing-ctrl-test.js +++ b/test/new-unit/login-existing-ctrl-test.js @@ -97,10 +97,13 @@ define(function(require) { scope.passphrase = passphrase; keychainMock.getUserKeyPair.withArgs(emailAddress).yields(new Error('asd')); - scope.confirmPassphrase(); + scope.onError = function(err) { + expect(err.message).to.equal('asd'); + expect(keychainMock.getUserKeyPair.calledOnce).to.be.true; + done(); + }; - expect(keychainMock.getUserKeyPair.calledOnce).to.be.true; - done(); + scope.confirmPassphrase(); }); }); }); diff --git a/test/new-unit/login-initial-ctrl-test.js b/test/new-unit/login-initial-ctrl-test.js index a364f61..21a20ff 100644 --- a/test/new-unit/login-initial-ctrl-test.js +++ b/test/new-unit/login-initial-ctrl-test.js @@ -176,10 +176,14 @@ define(function(require) { expect(state).to.equal(1); expect(emailDaoMock.unlock.calledOnce).to.be.true; scope.setState.restore(); - done(); } }); + scope.onError = function(err) { + expect(err.message).to.equal('asd'); + done(); + }; + scope.confirmPassphrase(); }); }); diff --git a/test/new-unit/login-new-device-ctrl-test.js b/test/new-unit/login-new-device-ctrl-test.js index 81985dd..d9ce2ca 100644 --- a/test/new-unit/login-new-device-ctrl-test.js +++ b/test/new-unit/login-new-device-ctrl-test.js @@ -98,7 +98,7 @@ define(function(require) { expect(keychainMock.getUserKeyPair.calledOnce).to.be.true; }); - it('should not work when keypair upload fails', function() { + it('should not work when keypair upload fails', function(done) { scope.passphrase = passphrase; scope.key = { privateKeyArmored: 'b' @@ -113,6 +113,11 @@ define(function(require) { errMsg: 'yo mamma.' }); + scope.onError = function(err) { + expect(err.errMsg).to.equal('yo mamma.'); + done(); + }; + scope.confirmPassphrase(); expect(keychainMock.getUserKeyPair.calledOnce).to.be.true; @@ -120,7 +125,7 @@ define(function(require) { expect(keychainMock.putUserKeyPair.calledOnce).to.be.true; }); - it('should not work when unlock fails', function() { + it('should not work when unlock fails', function(done) { scope.passphrase = passphrase; scope.key = { privateKeyArmored: 'b' @@ -134,6 +139,11 @@ define(function(require) { errMsg: 'yo mamma.' }); + scope.onError = function(err) { + expect(err.errMsg).to.equal('yo mamma.'); + done(); + }; + scope.confirmPassphrase(); expect(scope.incorrect).to.be.true; @@ -141,13 +151,18 @@ define(function(require) { expect(emailDaoMock.unlock.calledOnce).to.be.true; }); - it('should not work when keypair retrieval', function() { + it('should not work when keypair retrieval', function(done) { scope.passphrase = passphrase; keychainMock.getUserKeyPair.withArgs(emailAddress).yields({ errMsg: 'yo mamma.' }); + scope.onError = function(err) { + expect(err.errMsg).to.equal('yo mamma.'); + done(); + }; + scope.confirmPassphrase(); expect(keychainMock.getUserKeyPair.calledOnce).to.be.true; diff --git a/test/new-unit/navigation-ctrl-test.js b/test/new-unit/navigation-ctrl-test.js index 6c6b1fd..010a25e 100644 --- a/test/new-unit/navigation-ctrl-test.js +++ b/test/new-unit/navigation-ctrl-test.js @@ -63,10 +63,8 @@ define(function(require) { describe('initial state', function() { it('should be well defined', function() { expect(scope.state).to.exist; - expect(scope.state.nav.open).to.be.false; + expect(scope.state.lightbox).to.be.undefined; expect(scope.account.folders).to.not.be.empty; - - expect(scope.onError).to.exist; expect(scope.openFolder).to.exist; }); }); diff --git a/test/new-unit/write-ctrl-test.js b/test/new-unit/write-ctrl-test.js index 3690de6..79d5d5a 100644 --- a/test/new-unit/write-ctrl-test.js +++ b/test/new-unit/write-ctrl-test.js @@ -55,7 +55,7 @@ define(function(require) { describe('scope variables', function() { it('should be set correctly', function() { expect(scope.state.writer).to.exist; - expect(scope.state.writer.open).to.be.false; + expect(scope.state.lightbox).to.be.undefined; expect(scope.state.writer.write).to.exist; expect(scope.state.writer.close).to.exist; expect(scope.verify).to.exist; @@ -68,11 +68,11 @@ define(function(require) { describe('close', function() { it('should close the writer', function() { - scope.state.writer.open = true; + scope.state.lightbox = 'write'; scope.state.writer.close(); - expect(scope.state.writer.open).to.be.false; + expect(scope.state.lightbox).to.be.undefined; }); }); @@ -200,7 +200,7 @@ define(function(require) { keychainMock.getReceiverPublicKey.yields(null, { userId: 'asdf@example.com' }); - scope.$apply = function() { + scope.$digest = function() { expect(recipient.key).to.deep.equal({ userId: 'asdf@example.com' }); @@ -311,8 +311,7 @@ define(function(require) { expect(outboxMock.put.calledOnce).to.be.true; expect(emailDaoMock.sync.calledOnce).to.be.true; - - expect(scope.state.writer.open).to.be.false; + expect(scope.state.lightbox).to.be.undefined; expect(scope.replyTo.answered).to.be.true; }); }); From 16fd3e8978f90e397d62826396b9f135dff107c6 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Thu, 24 Apr 2014 16:55:22 +0200 Subject: [PATCH 20/21] [WO-342] Fix focus-me directive for writer --- src/tpl/write.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tpl/write.html b/src/tpl/write.html index b887a81..747000b 100644 --- a/src/tpl/write.html +++ b/src/tpl/write.html @@ -14,7 +14,7 @@

    - +

    @@ -54,7 +54,7 @@

    -

    +

    -----BEGIN ENCRYPTED PREVIEW-----
    {{ciphertextPreview}}
    -----END ENCRYPTED PREVIEW-----

    From 35a7f30459024314e954f07fe932f1e54dccc8b8 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Thu, 24 Apr 2014 16:59:38 +0200 Subject: [PATCH 21/21] remove lightbox-effect class from ios.html --- src/ios.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ios.html b/src/ios.html index 20fa363..a14c5a4 100644 --- a/src/ios.html +++ b/src/ios.html @@ -25,7 +25,7 @@
    -
    +