From e7b7e9cefed4419a89d2d4d0205912c214ed2645 Mon Sep 17 00:00:00 2001 From: iRouge Date: Tue, 3 Feb 2015 21:22:12 -0500 Subject: [PATCH] Adjust z-indexes and box-shadows --- .../MailerUI/UIxMailFolderTemplate.wox | 4 ++-- UI/Templates/MailerUI/UIxMailMainFrame.wox | 2 +- UI/WebServerResources/scss/_shame.scss | 12 +++++++++++ .../autoScrollList/autoScrollList.scss | 1 + .../scss/components/list/list.scss | 20 ++++++++++++++++--- .../scss/components/subheader/subheader.scss | 16 +++++++++++++++ .../scss/components/toolbar/_extends.scss | 6 +++++- .../scss/components/toolbar/toolbar.scss | 6 +++++- UI/WebServerResources/scss/styles.scss | 1 + 9 files changed, 60 insertions(+), 8 deletions(-) diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index 15cbd466e..52130e9af 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -2,13 +2,13 @@ - + -
+

Unread Messages

diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox index a2e6e2263..ce7f12a94 100644 --- a/UI/Templates/MailerUI/UIxMailMainFrame.wox +++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox @@ -263,7 +263,7 @@ - +

{{activeUser.identification}} diff --git a/UI/WebServerResources/scss/_shame.scss b/UI/WebServerResources/scss/_shame.scss index 79b03fed8..b56d78c89 100644 --- a/UI/WebServerResources/scss/_shame.scss +++ b/UI/WebServerResources/scss/_shame.scss @@ -13,3 +13,15 @@ // 4. Try and clean shame.css up when you have some down time. // Even better, get a tech-debt story in which you can dedicate actual sprint time to it. // + +// 1. Component : autoScrollList +// 2. Suddently, the date span of the first list item of the messagae-list do not +// justify to the extreme right of his container (flex-box) +// After more than an hour spent analysing trying to find differences with other +// list element. I still can't find any. +// 3. I decide to apply a minimal width to the left element until I found a culprit. + +.sg-tile-content .sg-md-subhead-multi, +.sg-tile-content .sg-md-subhead-solo { + min-width: 50%; +} \ 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 600741afc..d22a58218 100644 --- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss +++ b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss @@ -12,6 +12,7 @@ [id='messagesList'] { border-top: 44px solid transparent; // padding for the header.subheader, border-bottom: 2px solid transparent; //close to a hack + z-index: 10; md-item-content { padding: $layout-gutter-width; diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss index c1da56e37..3255ca48c 100644 --- a/UI/WebServerResources/scss/components/list/list.scss +++ b/UI/WebServerResources/scss/components/list/list.scss @@ -8,7 +8,6 @@ .sg { &-tile-content { @extend .md-tile-content; - margin-left: $layout-gutter-width; // dirty fix for vs-repeat damages .name { margin: $list-h3-margin; font-weight: $list-h3-font-weight; @@ -37,7 +36,22 @@ } // The right tile for a list item (avatar container) // ---------------------------------------------------------------------------- -.md-tile-left { + +.md-tile-left, +.md-tile-right { border-radius: 100%; - min-height: 56px; + padding: $layout-gutter-width; + width: $sg-md-grid-pitch + $baseline-grid; + height: $sg-md-grid-pitch + $baseline-grid; + background-clip: content-box; + margin-left: -$layout-gutter-width; } +.md-tile-right { + margin-right: -$layout-gutter-width; +} +.md-tile-left:before { + content: "\f251"; + font-family: 'Material Design Iconic Font'; + font-size: 40px; + color: rgba(0, 0, 0, 0.26); +} \ No newline at end of file diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss index 42f20f41c..98b9891f9 100644 --- a/UI/WebServerResources/scss/components/subheader/subheader.scss +++ b/UI/WebServerResources/scss/components/subheader/subheader.scss @@ -12,4 +12,20 @@ [id = "messagesList"] .sg-md-subheader { width: 390px; // todo : convert this in grid-pitch transform: translateY(-100%); // Compensate the container top-margin +} +.sg-md-subheader { + font-size: $sg-font-size-2; + font-weight: $sg-font-medium; +} +.sg-md-subheader > * { + font-size: inherit; + font-weight: inherit; +} +.sg-md-subheader.sg-avatar { + &-left { + padding-left: $sg-md-grid-pitch + $baseline-grid; + } + &-right { + padding-left: $baseline-grid * 2; + } } \ No newline at end of file diff --git a/UI/WebServerResources/scss/components/toolbar/_extends.scss b/UI/WebServerResources/scss/components/toolbar/_extends.scss index 614b8193d..6f35a12ee 100644 --- a/UI/WebServerResources/scss/components/toolbar/_extends.scss +++ b/UI/WebServerResources/scss/components/toolbar/_extends.scss @@ -1,2 +1,6 @@ /*! toolbar/_extends.scss - */ -@import '../../../angular-material/src/components/toolbar/toolbar.scss'; \ No newline at end of file +@import '../../../angular-material/src/components/toolbar/toolbar.scss'; + +[id='messagesList'] { + @extend .md-whiteframe-z2; +} \ No newline at end of file diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss index 48c4ab4ca..fcffac71d 100644 --- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss +++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss @@ -1 +1,5 @@ -@import 'extends'; \ No newline at end of file +@import 'extends'; + +.md-toolbar { + z-index: 20; +} \ No newline at end of file diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss index 54f5f2392..531537301 100755 --- a/UI/WebServerResources/scss/styles.scss +++ b/UI/WebServerResources/scss/styles.scss @@ -57,6 +57,7 @@ @import 'components/button/button'; @import 'components/backdrop/backdrop.scss'; @import 'components/subheader/subheader.scss'; +@import 'components/whiteframe/whiteframe.scss'; // core styles - need to be after components till settings are correctly implemented