From 499e66ffe950cd6b0dcce6446ebbdf5e38d5fc03 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Fri, 8 May 2015 12:06:52 -0400 Subject: [PATCH] (css) Improve contacts and messages lists --- .../ContactsUI/UIxContactFoldersView.wox | 35 +++++---- .../MailerUI/UIxMailFolderTemplate.wox | 49 ++++++------- .../js/Contacts/AddressBookController.js | 4 + .../js/Mailer/MailboxController.js | 7 +- UI/WebServerResources/scss/_shame.scss | 2 +- .../autoScrollList/autoScrollList.scss | 73 +++++++------------ .../scss/components/button/button.scss | 9 ++- .../scss/components/list/list.scss | 4 +- .../scss/core/typography.scss | 12 --- .../scss/views/MailerUI.scss | 10 +++ 10 files changed, 94 insertions(+), 111 deletions(-) diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index e58a8ce30..448c1dc83 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -293,24 +293,23 @@ --> - -
-
- - -
-
- -
-
-
-
{{currentCard.$preferredEmail(currentFolder.$query)}}
-
+ + + +
+ +
+
+
+
{{currentCard.$preferredEmail(currentFolder.$query)}}
 diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index 5587ca2fd..2858fb0f1 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -15,34 +15,29 @@ - -
- - -
-
- -
- {{currentMessage.subject}} -
- -
{{currentMessage.$shortAddress('from')}}
- - -
-
- - - - -
- + ng-class="{unread: !currentMessage.isread}" + ng-click="selectMessage(currentMessage)" + ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})" + ui-sref-active="sg-active"> + + +
+ +
{{currentMessage.$shortAddress('from')}}
+
{{currentMessage.subject}}
+ +
+
+ + + + +
diff --git a/UI/WebServerResources/js/Contacts/AddressBookController.js b/UI/WebServerResources/js/Contacts/AddressBookController.js index 6d06b07c8..b5a538305 100644 --- a/UI/WebServerResources/js/Contacts/AddressBookController.js +++ b/UI/WebServerResources/js/Contacts/AddressBookController.js @@ -13,6 +13,10 @@ $rootScope.currentFolder = stateAddressbook; $rootScope.card = null; + $scope.selectCard = function(card) { + $state.go('app.addressbook.card.view', {addressbookId: stateAddressbook.id, cardId: card.id}); + }; + $scope.newComponent = function(ev) { $mdDialog.show({ parent: angular.element(document.body), diff --git a/UI/WebServerResources/js/Mailer/MailboxController.js b/UI/WebServerResources/js/Mailer/MailboxController.js index 9e9f2bbcd..9056e8891 100644 --- a/UI/WebServerResources/js/Mailer/MailboxController.js +++ b/UI/WebServerResources/js/Mailer/MailboxController.js @@ -6,11 +6,14 @@ /** * @ngInject */ - MailboxController.$inject = ['$scope', '$rootScope', '$stateParams', 'stateAccount', 'stateMailbox', '$timeout', 'sgFocus', 'Dialog', 'Account', 'Mailbox']; - function MailboxController($scope, $rootScope, $stateParams, stateAccount, stateMailbox, $timeout, focus, Dialog, Account, Mailbox) { + MailboxController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'stateAccount', 'stateMailbox', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox']; + function MailboxController($scope, $rootScope, $state, $stateParams, stateAccount, stateMailbox, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) { $scope.account = stateAccount; $rootScope.mailbox = stateMailbox; $rootScope.currentFolder = stateMailbox; + $scope.selectMessage = function(message) { + $state.go('mail.account.mailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path), messageId: message.uid}); + }; } angular diff --git a/UI/WebServerResources/scss/_shame.scss b/UI/WebServerResources/scss/_shame.scss index 04133c6e7..bdc43b8ff 100644 --- a/UI/WebServerResources/scss/_shame.scss +++ b/UI/WebServerResources/scss/_shame.scss @@ -23,5 +23,5 @@ .sg-tile-content .sg-md-subhead-multi, .sg-tile-content .sg-md-subhead-solo { - min-width: 65%; + //min-width: 65%; } \ No newline at end of file diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss index ddb43a7cb..95770fe7d 100644 --- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss +++ b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss @@ -18,12 +18,9 @@ position: absolute; } - // In use in MAILER messages list but re-usable - // -------------------------------------------- - md-item-content { - padding: 0 0 0 $mg; - margin: $mg 0; - transition: all 0.20s $swift-ease-in-timing-function 0.12s; + md-list-item { + transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function, + color 0.12s linear; &:hover { background-color: sg-color($sogoPaper, 300); color: sg-color($sogoBlue, 800); @@ -33,62 +30,44 @@ color: sg-color($sogoBlue, 800); } &:focus, - &._selected { + &.sg-active { background-color: sg-color($sogoBlue, 100); } } - .sg-md-subhead-solo { - margin: 0; - } } .sg { &-tile-content { - //@extend .md-tile-content; content of : + align-items: baseline; + flex-direction: row; + flex-wrap: wrap; flex: 1; - padding: $baseline-grid * 2; - text-overflow: ellipsis; - - .name, - .contact-email { - font-weight: $sg-font-light; - margin-top: 0; - margin-bottom: 0; - } - .subject, - .contact-name { - font-weight: $sg-font-medium; - // dirty fix for vs-repeat damages - max-width: 75%; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } + justify-content: space-between; p { margin: $list-p-margin; font-size: sg-size(body); } .msg-date { + float: right; font-size: sg-size(body); + font-weight: $sg-font-light; + line-height: $sg-line-height-2; + margin-left: 1em; + } + .#{$md}-subhead-multi, + .#{$md}-subhead-solo, + .#{$md}-body-multi { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .#{$md}-subhead-multi { + @extend .#{$md}-body-1; + font-size: initial; + } + .#{$md}-body-multi { + @extend .#{$md}-caption; } - } -} - -.sg-tile-content { - padding: 0 0 0 $layout-gutter-width; - .sg-md-subhead-multi, - .sg-md-subhead-solo { - margin: 0; - } - .sg-md-body-multi { - margin: 0; - } - a { - display: flex; - flex-direction: row; - align-items: baseline; - justify-content: space-between; - flex-wrap: wrap; } } .sg-avatar { diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss index 984ec3996..e25c9ae98 100644 --- a/UI/WebServerResources/scss/components/button/button.scss +++ b/UI/WebServerResources/scss/components/button/button.scss @@ -8,8 +8,8 @@ // Buttons for the sidenav folder tree // ------------------------------------ -sg-folder-tree .md-button, -md-sidenav md-list .md-button { +md-sidenav md-list .md-button, +.view-list md-list .md-button { // dirty fix to squash the theme style background-color: transparent !important; padding: 0 $mg; @@ -20,6 +20,11 @@ md-sidenav md-list .md-button { -webkit-font-smoothing: auto; } +.view-list md-list .md-button { + // Gain some space in lists + padding: 0; +} + .md-sidenav-left .md-button [class^="md-icon"] { //margin-right: 1em; } diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss index 73013cf5b..3c7117e1a 100644 --- a/UI/WebServerResources/scss/components/list/list.scss +++ b/UI/WebServerResources/scss/components/list/list.scss @@ -34,7 +34,7 @@ md-list { } .sg-inline-list-icon-label { - text-transform: uppercase; + text-transform: uppercase; } } @@ -59,8 +59,8 @@ md-list { padding: $layout-gutter-width; width: $sg-md-grid-pitch + $baseline-grid; height: $sg-md-grid-pitch + $baseline-grid; + line-height: $sg-md-grid-pitch + $baseline-grid; background-clip: content-box; - margin-left: -$layout-gutter-width; } .md-tile-right { margin-right: -$layout-gutter-width; diff --git a/UI/WebServerResources/scss/core/typography.scss b/UI/WebServerResources/scss/core/typography.scss index 15af8d8c8..d5c80be1d 100644 --- a/UI/WebServerResources/scss/core/typography.scss +++ b/UI/WebServerResources/scss/core/typography.scss @@ -386,10 +386,6 @@ html p { line-height: $sg-line-height-2; font-weight: $sg-font-regular; } -/// @alias .body-1 -.#{$md}-body-multi { - @extend .#{$md}-body-1; -} .#{$md}-body-2 { $lineHeight : $sg-line-height-2 + $sg-md-typo-baseline; font-size: $sg-font-size-2; @@ -398,10 +394,6 @@ html p { margin-top: ($lineHeight * -1); margin-bottom: $lineHeight; } -/// @alias .body-2 -.#{$md}-body-solo { - @extend .#{$md}-body-2; -} .#{$md}-subhead-1 { $lineHeight : $sg-line-height-3; font-size: $sg-font-size-3; @@ -410,10 +402,6 @@ html p { margin-top: ($lineHeight * -1); margin-bottom: $lineHeight; } -/// @alias .subhead-1 -.#{$md}-subhead-multi { - @extend .#{$md}-subhead-1; -} .#{$md}-subhead-2 { $lineHeight : $sg-line-height-3 + $sg-md-typo-baseline; font-size: $sg-font-size-3; diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss index 007a2b9ba..71811e718 100644 --- a/UI/WebServerResources/scss/views/MailerUI.scss +++ b/UI/WebServerResources/scss/views/MailerUI.scss @@ -11,6 +11,16 @@ transform: translateY(-100%); // Compensate the container top-margin } +.unread { + .#{$md}-subhead-multi, + .#{$md}-body-multi { + font-weight: $sg-font-medium; + } + .msg-date { + color: sg-color($sogoBlue, 600); + } +} + .msg-header-content { display: flex; flex-direction: column;