diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index 51d28cf34..34370fb77 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -375,9 +375,9 @@ -
- -
+
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox index b25833d2a..99a65ce30 100644 --- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox +++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox @@ -5,6 +5,7 @@ xmlns:const="http://www.skyrix.com/od/constant" xmlns:label="OGo:label" > +
@@ -29,7 +30,7 @@
+ ng-click="editor.close()"> close - + diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index c7d6a2fcf..2dc80b576 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -58,7 +58,8 @@
-
+
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox index b7b31f715..d857ccff5 100644 --- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox @@ -85,7 +85,7 @@
+ ng-click="viewer.close()"> close diff --git a/UI/WebServerResources/js/Contacts/CardController.js b/UI/WebServerResources/js/Contacts/CardController.js index b228f326a..4f2f711b3 100644 --- a/UI/WebServerResources/js/Contacts/CardController.js +++ b/UI/WebServerResources/js/Contacts/CardController.js @@ -29,6 +29,7 @@ vm.addMember = addMember; vm.userFilter = userFilter; vm.save = save; + vm.close = close; vm.reset = reset; vm.cancel = cancel; vm.confirmDelete = confirmDelete; @@ -86,6 +87,11 @@ }); } } + function close() { + vm.card = null; + delete AddressBook.selectedFolder.selectedCard; + $state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id }); + } function reset() { vm.card.$reset(); } diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js index 2df7a208e..22c9e223e 100644 --- a/UI/WebServerResources/js/Mailer/MessageController.js +++ b/UI/WebServerResources/js/Mailer/MessageController.js @@ -17,6 +17,7 @@ vm.service = Message; vm.tags = { searchText: '', selected: '' }; vm.doDelete = doDelete; + vm.close = close; vm.reply = reply; vm.replyAll = replyAll; vm.forward = forward; @@ -69,6 +70,13 @@ }); } + function close() { + $state.go('mail.account.mailbox', { accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path) }).then(function() { + vm.message = null; + delete stateMailbox.selectedMessage; + }); + } + function reply($event) { var message = vm.message.$reply(); showMailEditor($event, message); diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss index f4d54e5d4..f15762614 100644 --- a/UI/WebServerResources/scss/views/_view.scss +++ b/UI/WebServerResources/scss/views/_view.scss @@ -64,91 +64,60 @@ $detailView-width: grid-step(8) !global; margin: 0; } + + // No animation on medium to large screens @include from(md) { .viewer { position: absolute; left: 0; right: 0; max-width: 100%; - transform: translate3d(0, 0, 0); - transition: all 0.5s $swift-ease-in-out-timing-function; - &.ng-enter { - transform: translate(-105%, 0); - &.ng-enter-active { - transform: translate(0%, 0%); - transition-delay: 0.5s; - } - } - - &.ng-leave { - transition-delay: 0; - transition-duration: 0.1s; - transform: translate(0, 0); - - &.ng-leave-active { - transition-delay: 0.1s; - transition-duration: 0.4s; - transform: translate(-105%, 100%); - - } - } +// transform: translate3d(0, 0, 0); +// transition: all 0.5s $swift-ease-in-out-timing-function; +// &.ng-enter { +// transform: translate(-105%, 0); +// &.ng-enter-active { +// transform: translate(0, 0); +// transition-delay: 0.5s; +// } +// } +// &.ng-leave { +// transition-delay: 0; +// transition-duration: 0.1s; +// transform: translate(0, 0); +// &.ng-leave-active { +// transition-delay: 0.1s; +// transition-duration: 0.4s; +// transform: translate(-105%, 100%); +// } +// } } } + // On small screens, the view slides from the right and takes all screen place @include to(sm) { position: absolute; width: 100%; min-width: 100%; - // caution: limited support in Android (<=4.4), full-support in v. 37 - height: calc(100vh - #{$toolbar-tall-height}); - transform: translateX(-100%) scale(1); - transform-origin: 50% 50%; + top: $toolbar-tall-height; + bottom: 0; + left: 0; + right: 0; transition: all 0.5s $swift-ease-in-out-timing-function; -// .view-detail.sg-close hides the background &.sg-close { - transition-delay: 0.1s; - transition-duration: 0.4s; - transform: translateX(-100%) scale(0); - // .viewer is the card itself - .viewer { - &.ng-leave, - &.ng-enter, - &.ng-leave.ng-leave-active { - transform: translateY(0) scale(0); - } - // ui-sref might add ng-animate class early - &.ng-enter.ng-enter-active { - transform: translateY(0) scale(0); - } + transform: translateX(100%); + } + &.ng-leave { + &.ng-leave-active { + transform: translateX(100%); } } - // .viewer is the card itself - .viewer { - &.ng-leave, - &.ng-leave.ng-leave-active { - transform: translateY(100%) scale(0); - } - - &.ng-enter { - transition: all 0.5s $swift-ease-in-out-timing-function; - transform: translateY(100%) scale(0); - } - &.ng-enter.ng-enter-active { - transform: translateY(0) scale(1); - } - } - - &.ng-leave, - &.ng-leave.ng-leave-active { - transform: translateX(-100%) scale(0); - } - &.ng-enter { transition: all 0.5s $swift-ease-in-out-timing-function; - transform: translateX(-100%) scale(0); - } - &.ng-enter.ng-enter-active { - transform: translateX(-100%) scale(1); + transform: translateX(100%); + &.ng-enter-active { + transform: translateX(0); + } } } }