From 3611c4021dff18b4189eaa4f5a7b1e95e677dae7 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Thu, 27 Aug 2015 13:37:47 -0400 Subject: [PATCH] Improve view detail (messages, cards) --- UI/Contacts/English.lproj/Localizable.strings | 3 ++ UI/MailerUI/English.lproj/Localizable.strings | 3 ++ .../ContactsUI/UIxContactFoldersView.wox | 8 +++-- .../MailerUI/UIxMailFolderTemplate.wox | 8 +++-- .../js/Contacts/CardController.js | 7 ++-- .../scss/views/MailerUI.scss | 5 +++ UI/WebServerResources/scss/views/_view.scss | 35 +++++++++++++------ 7 files changed, 52 insertions(+), 17 deletions(-) diff --git a/UI/Contacts/English.lproj/Localizable.strings b/UI/Contacts/English.lproj/Localizable.strings index 7cace8968..daa2cd0d5 100644 --- a/UI/Contacts/English.lproj/Localizable.strings +++ b/UI/Contacts/English.lproj/Localizable.strings @@ -46,6 +46,9 @@ /* Number of selected contacts in list */ "selected" = "selected"; +/* Empty right pane */ +"No contact selected" = "No contact selected"; + /* Tooltips */ "Create a new address book card" = "Create a new address book card"; diff --git a/UI/MailerUI/English.lproj/Localizable.strings b/UI/MailerUI/English.lproj/Localizable.strings index 2cdbbddce..75e17db04 100644 --- a/UI/MailerUI/English.lproj/Localizable.strings +++ b/UI/MailerUI/English.lproj/Localizable.strings @@ -65,6 +65,9 @@ "Account: " = "Account: "; "Shared Account: " = "Shared Account: "; +/* Empty right pane */ +"No message selected" = "No message selected"; + /* acls */ "Access rights to" = "Access rights to"; "For user" = "For user"; diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index fcb487491..148bee81b 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -375,9 +375,13 @@ -
+ ui-view="card"> + + + + diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index 2dc80b576..dc462a16c 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -58,8 +58,12 @@ -
+ ui-view="message"> + + + + diff --git a/UI/WebServerResources/js/Contacts/CardController.js b/UI/WebServerResources/js/Contacts/CardController.js index 4f2f711b3..b14b91f35 100644 --- a/UI/WebServerResources/js/Contacts/CardController.js +++ b/UI/WebServerResources/js/Contacts/CardController.js @@ -88,9 +88,10 @@ } } function close() { - vm.card = null; - delete AddressBook.selectedFolder.selectedCard; - $state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id }); + $state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id }).then(function() { + vm.card = null; + delete AddressBook.selectedFolder.selectedCard; + }); } function reset() { vm.card.$reset(); diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss index 44ae3ad63..26c194bbd 100644 --- a/UI/WebServerResources/scss/views/MailerUI.scss +++ b/UI/WebServerResources/scss/views/MailerUI.scss @@ -27,6 +27,11 @@ flex: 1 1 auto; align-items: stretch; justify-content: flex-start; + overflow: hidden; + [class|="sg-md-display"] { + overflow: hidden; + text-overflow: ellipsis; + } } .msg-body { diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss index f15762614..31389a900 100644 --- a/UI/WebServerResources/scss/views/_view.scss +++ b/UI/WebServerResources/scss/views/_view.scss @@ -53,7 +53,6 @@ $detailView-width: grid-step(8) !global; .view-detail { z-index: $z-index-view; overflow-x: hidden; - background-color: transparent; @include at(md) { @include flex-col(md, 9); margin: 0; @@ -69,6 +68,7 @@ $detailView-width: grid-step(8) !global; @include from(md) { .viewer { position: absolute; + top: 0; left: 0; right: 0; max-width: 100%; @@ -94,30 +94,45 @@ $detailView-width: grid-step(8) !global; } } - // On small screens, the view slides from the right and takes all screen place + // On small screens, the view slides from the right and takes all screen place. + // Expected Display Steps: + // 1. The class sg-close is used when there's no selection + // 2. An list item is selected (ui-router state changes): + // a. sg-close is removed from view-detail + // b. view-detail (transparent) slides over view-list + // c. viewer is inserted into the DOM and slides inside view-detail + // 3. An list item is closed (ui-router state changes): + // a. viewer slides out of view-detail and is removed from the DOM + // b. view-detail (transparent) slides outside view-list + // c. sg-close is added to view-detail @include to(sm) { + display: block; + background-color: transparent !important; position: absolute; - width: 100%; - min-width: 100%; top: $toolbar-tall-height; bottom: 0; left: 0; right: 0; - transition: all 0.5s $swift-ease-in-out-timing-function; + transform: translateX(0); + transition: $swift-ease-in-out; &.sg-close { transform: translateX(100%); } - &.ng-leave { - &.ng-leave-active { - transform: translateX(100%); - } + &.ng-leave.ng-leave-active { + transform: translateX(100%); } &.ng-enter { - transition: all 0.5s $swift-ease-in-out-timing-function; transform: translateX(100%); &.ng-enter-active { transform: translateX(0); } } + .viewer { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } } }