diff --git a/res/run_cca.sh b/res/run_cca.sh index 1469131..a9608ab 100755 --- a/res/run_cca.sh +++ b/res/run_cca.sh @@ -6,4 +6,4 @@ cd .. cd release/cca/Whiteout #cca run ios -cca run android \ No newline at end of file +cca run android --device \ No newline at end of file diff --git a/src/js/controller/mail-list.js b/src/js/controller/mail-list.js index 8afdb87..0e677b9 100644 --- a/src/js/controller/mail-list.js +++ b/src/js/controller/mail-list.js @@ -275,6 +275,29 @@ define(function(require) { var ngModule = angular.module('mail-list', []); + ngModule.directive('woTouch', function($parse) { + return function(scope, elm, attrs) { + var handler = $parse(attrs.woTouch); + + elm.on('touchstart', function() { + elm.addClass('active'); + }); + elm.on('touchleave touchcancel touchmove', function() { + elm.removeClass('active'); + }); + + elm.on('touchend click', function(event) { + event.preventDefault(); + elm.removeClass('active'); + scope.$apply(function() { + handler(scope, { + $event: event + }); + }); + }); + }; + }); + ngModule.directive('listScroll', function() { return { link: function(scope, elm, attrs) { diff --git a/src/sass/components/_buttons.scss b/src/sass/components/_buttons.scss index 13051dd..6ca7e68 100755 --- a/src/sass/components/_buttons.scss +++ b/src/sass/components/_buttons.scss @@ -31,8 +31,8 @@ &.active { background-image: none; box-shadow: none; - top: 1px; - right: -1px; + top: 2px; + right: -2px; } &.disabled, @@ -104,12 +104,14 @@ font-size: $font-size-base; font-family: $font-family-icons; line-height: 1; - height: 2em; - width: 2em; + height: 2.5em; + width: 2.5em; text-align: center; -webkit-font-smoothing: antialiased; - transition: color 0.3s; - transform: translate3d(0,0,0); // to prevent flickering + @include respond-to(desktop) { + transition: color 0.3s; + transform: translate3d(0,0,0); // to prevent flickering + } outline: none; &.disabled, @@ -124,8 +126,8 @@ &:active, &.active { outline: 0; - top: 1px; - left: 1px; + top: 2px; + right: -2px; } &:after { @@ -141,15 +143,19 @@ padding: 2px; z-index: -1; background: $btn-icon-color; - transition: transform 0.3s, opacity 0.4s; - transform: scale(1.2); + @include respond-to(desktop) { + transition: transform 0.3s, opacity 0.4s; + transform: scale(1.2); + } opacity: 0; } - &:hover { - color: $color-white; - &:after { - transform: scale(0.8); - opacity: 1; + @include respond-to(desktop) { + &:hover { + color: $color-white; + &:after { + transform: scale(0.8); + opacity: 1; + } } } } diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss index 97adb19..33d8ec8 100755 --- a/src/sass/components/_lightbox.scss +++ b/src/sass/components/_lightbox.scss @@ -5,7 +5,9 @@ width: 100%; height: 100%; z-index: 2000; - backface-visibility: hidden; + @include respond-to(desktop) { + backface-visibility: hidden; + } @include respond-to(desktop) { margin: 0 auto; @@ -37,10 +39,15 @@ display: block; border: none; background: none; - padding: 0; + padding: 0 0 0 40px; margin: 0; color: $color-grey-dark; outline: none; + + &.active { + top: 2px; + right: -2px; + } } h2 { margin: 0; @@ -81,10 +88,14 @@ &.show-add { display: block; opacity: 0; - transition: opacity 0.3s; + @include respond-to(desktop) { + transition: opacity 0.3s; + } .lightbox-body { transform: scale(0.7); - transition: transform 0.3s; + @include respond-to(desktop) { + transition: transform 0.3s; + } } } &.show-add-active { @@ -96,10 +107,14 @@ &.show-remove { display: block; opacity: 1; - transition: opacity 0.3s; + @include respond-to(desktop) { + transition: opacity 0.3s; + } .lightbox-body { transform: scale(1); - transition: transform 0.3s; + @include respond-to(desktop) { + transition: transform 0.3s; + } } } &.show-remove-active { diff --git a/src/sass/components/_mail-list.scss b/src/sass/components/_mail-list.scss index e4a1916..78520d2 100755 --- a/src/sass/components/_mail-list.scss +++ b/src/sass/components/_mail-list.scss @@ -12,7 +12,7 @@ padding: $padding-vertical $padding-horizontal; background: $color-white; cursor: pointer; - transition: background-color $time-li-fade, color $time-li-fade; + //transition: background-color $time-li-fade, color $time-li-fade; margin-top: 11px; &:before { @@ -120,8 +120,9 @@ overflow: hidden; } + &.active, &:hover { - background-color: mix($color-white, $color-blue, 90%); + background-color: mix($color-white, $color-blue, 85%); } &.mail-list-active, diff --git a/src/sass/components/_nav.scss b/src/sass/components/_nav.scss index b3f3ea5..611a876 100755 --- a/src/sass/components/_nav.scss +++ b/src/sass/components/_nav.scss @@ -12,14 +12,18 @@ left: 0; z-index: 99; height: 100%; - transition: transform $time-nav-animation; + @include respond-to(desktop) { + transition: transform $time-nav-animation; + } } .nav-menu-open .nav-pusher::after { width: 100%; height: 100%; opacity: 1; - transition: opacity $time-nav-animation; + @include respond-to(desktop) { + transition: opacity $time-nav-animation; + } } .nav-pusher::after { @@ -31,7 +35,9 @@ background: rgba(0,0,0,0.2); content: ''; opacity: 0; - transition: opacity $time-nav-animation, width 0.1s $time-nav-animation, height 0.1s $time-nav-animation; + @include respond-to(desktop) { + transition: opacity $time-nav-animation, width 0.1s $time-nav-animation, height 0.1s $time-nav-animation; + } } .nav-menu { @@ -45,7 +51,9 @@ height: 100%; background: $color-blue; background-image: linear-gradient(to right ,$color-blue 98%, darken($color-blue, 1%) 100%); - transition: all $time-nav-animation; + @include respond-to(desktop) { + transition: all $time-nav-animation; + } border-right: 1px solid $color-grey-light; } @@ -65,7 +73,9 @@ .nav-effect.nav-menu-open .nav-effect.nav-menu { visibility: visible; - transition: transform $time-nav-animation; + @include respond-to(desktop) { + transition: transform $time-nav-animation; + } transform: translate3d(0, 0, 0); } diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss index d913fa3..e73f810 100755 --- a/src/sass/views/_mail-list.scss +++ b/src/sass/views/_mail-list.scss @@ -12,6 +12,10 @@ flex-shrink: 0; cursor: pointer; padding: $padding-vertical $padding-horizontal; + @include respond-to(mobile) { + padding: ($padding-vertical + 5px) $padding-horizontal; + } + &:before { color: $color-blue; font-size: $font-size-bigger; @@ -27,12 +31,33 @@ vertical-align: middle; text-shadow: 0px 1px 1px $color-grey-lighter; } - button { - float: right; - margin-top: -0.05em; // for perfect vertical alignment with headline - @include respond-to(desktop) { - display: none; + &.active { + background-color: darken($color-white, 10%); + } + } + + .compose { + position: absolute; + top: $padding-vertical; + right: $padding-horizontal; + margin-top: -0.05em; // for perfect vertical alignment with headline + padding-left: 40px; + + &.active { + top: $padding-vertical + 2px; + right: $padding-horizontal - 2px; + } + + @include respond-to(desktop) { + display: none; + } + + button { + &:active, + &.active { + top: 0; + right: 0; } } } @@ -60,6 +85,7 @@ flex-grow: 1; padding: 0 ($padding-horizontal - $scrollbar-width) 0 $padding-horizontal; overflow-y: scroll; + transform: translatez(0); } footer { diff --git a/src/sass/views/_navigation.scss b/src/sass/views/_navigation.scss index 753df15..3aa961f 100755 --- a/src/sass/views/_navigation.scss +++ b/src/sass/views/_navigation.scss @@ -65,8 +65,8 @@ vertical-align: middle; text-shadow: none; } - &:hover, &:focus { - background-color: mix($color-blue, $color-white, 80%); + &.active, &:hover, &:focus { + background-color: mix($color-blue, $color-white, 70%); } } } diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss index 3e06c1b..5ee37f2 100644 --- a/src/sass/views/_read.scss +++ b/src/sass/views/_read.scss @@ -24,6 +24,10 @@ display: none; } } + + &.active { + background-color: darken($color-white, 10%); + } } .date { @@ -46,7 +50,6 @@ .controls { float: right; - margin: 0 15px 10px; button { margin-left: 7px; @@ -137,6 +140,7 @@ line-height: 1.5em; overflow-y: scroll; user-select: text; + transform: translatez(0); .line { cursor: text; diff --git a/src/tpl/about.html b/src/tpl/about.html index caf7399..0b459cd 100644 --- a/src/tpl/about.html +++ b/src/tpl/about.html @@ -1,6 +1,6 @@
- +
diff --git a/src/tpl/account.html b/src/tpl/account.html index b535022..ca2d7ae 100644 --- a/src/tpl/account.html +++ b/src/tpl/account.html @@ -1,7 +1,7 @@

Account

- +
@@ -29,8 +29,8 @@
- - + +
diff --git a/src/tpl/add-account.html b/src/tpl/add-account.html index 534a131..572a897 100644 --- a/src/tpl/add-account.html +++ b/src/tpl/add-account.html @@ -3,7 +3,7 @@

Select email account

    -
  • +
  • Google Mail
  • diff --git a/src/tpl/contacts.html b/src/tpl/contacts.html index 4d0eb5c..bc46620 100644 --- a/src/tpl/contacts.html +++ b/src/tpl/contacts.html @@ -1,7 +1,7 @@

    Contacts

    - +
    @@ -31,7 +31,7 @@ {{key.userId}} {{key.created | date:'mediumDate'}} {{key.bitSize}} bit - +
    diff --git a/src/tpl/dialog.html b/src/tpl/dialog.html index ae98177..c381f86 100644 --- a/src/tpl/dialog.html +++ b/src/tpl/dialog.html @@ -1,14 +1,14 @@

    {{state.dialog.title}}

    - +

    {{state.dialog.message}}

    - - + +
    \ No newline at end of file diff --git a/src/tpl/login-existing.html b/src/tpl/login-existing.html index 9860d0e..3b4f1cf 100644 --- a/src/tpl/login-existing.html +++ b/src/tpl/login-existing.html @@ -13,7 +13,7 @@
    Forgot your passphrase?
    - +
diff --git a/src/tpl/login-initial.html b/src/tpl/login-initial.html index b21ec53..1e20114 100644 --- a/src/tpl/login-initial.html +++ b/src/tpl/login-initial.html @@ -6,7 +6,7 @@
-

Generate PGP key. You can set a passphrase to protect your key on disk. This must be entered everytime you start the app. For no passphrase just press continue.

Alternatively you can also import an existing PGP key.

+

Generate PGP key. You can set a passphrase to protect your key on disk. This must be entered everytime you start the app. For no passphrase just press continue.

Alternatively you can also import an existing PGP key.


@@ -21,7 +21,7 @@
- +
diff --git a/src/tpl/login-new-device.html b/src/tpl/login-new-device.html index 04ea3c4..8c2717f 100644 --- a/src/tpl/login-new-device.html +++ b/src/tpl/login-new-device.html @@ -16,7 +16,7 @@
Lost your keyfile or passphrase? -
+
diff --git a/src/tpl/login-privatekey-download.html b/src/tpl/login-privatekey-download.html index c543347..e481f1a 100644 --- a/src/tpl/login-privatekey-download.html +++ b/src/tpl/login-privatekey-download.html @@ -23,7 +23,7 @@
- +
diff --git a/src/tpl/mail-list.html b/src/tpl/mail-list.html index 6c1be69..a313de5 100644 --- a/src/tpl/mail-list.html +++ b/src/tpl/mail-list.html @@ -1,17 +1,22 @@
-
+

{{state.nav.currentFolder.type}}

-
+
+ +
+
    -
  • +

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

    diff --git a/src/tpl/navigation.html b/src/tpl/navigation.html index 637474c..d83d54a 100644 --- a/src/tpl/navigation.html +++ b/src/tpl/navigation.html @@ -5,7 +5,7 @@