From 52559087b32e86acb6b0fa2e4a9716459c932d6c Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Fri, 7 Aug 2015 11:17:09 -0400 Subject: [PATCH] (css) Merge autoScrollList.scss with list.scss --- .../ContactsUI/UIxContactFoldersView.wox | 2 +- .../MailerUI/UIxMailFolderTemplate.wox | 2 +- UI/Templates/SchedulerUI/UIxCalMainView.wox | 18 +-- .../autoScrollList/autoScrollList.scss | 100 ------------- .../scss/components/list/list.scss | 139 ++++++++++++++++-- UI/WebServerResources/scss/styles.scss | 1 - 6 files changed, 134 insertions(+), 128 deletions(-) delete mode 100644 UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index a8baa4fac..815464881 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -386,7 +386,7 @@ --> - +
- +
- - + - +

{{event.c_title}}

{{event.c_location}}

{{event.formatted_startdate}} - + repeat alarm - +

@@ -559,11 +559,11 @@ - - + - +

{{task.c_title}}

@@ -575,7 +575,7 @@

- +

diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss deleted file mode 100644 index 9c4f2390c..000000000 --- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss +++ /dev/null @@ -1,100 +0,0 @@ -/// autoScrollList.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- -@import 'extends'; - -[id='messagesList'], -[id='contactsList'] { - border-top: 44px solid transparent; // padding for the header.subheader, - border-bottom: 2px solid transparent; // close to a hack - - 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); - cursor: pointer; - } - &:active { - color: sg-color($sogoBlue, 800); - } - &:focus, - &.sg-active { - background-color: sg-color($sogoBlue, 100); - } - } -} - -.sg { - &-tile-content { - align-items: baseline; - flex-direction: row; - flex-wrap: wrap; - flex: 1; - 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-avatar { - @extend .md-tile-left-card; - margin-right: 0; - margin-left: 0; -} -.sg-list-avatar { - @extend .md-tile-left-list; - margin-right: 0; - margin-left: 0; -} -.sg-selected-avatar { - @extend .md-tile-left-selected; - margin-right: 0; - margin-left: 0; -} -.sg-accepted { - @extend .md-tile-left-accepted; - margin-right: 0; - margin-left: 0; -} -.sg-declined { - @extend .md-tile-left-declined; - margin-right: 0; - margin-left: 0; -} -.sg-delegated { - @extend .md-tile-left-delegated; - margin-right: 0; - margin-left: 0; -} -.sg-needs-action { - @extend .md-tile-left-needs-action; - margin-right: 0; - margin-left: 0; -} -.sg-tentative { - @extend .md-tile-left-tentative; - margin-right: 0; - margin-left: 0; -} \ No newline at end of file diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss index 141f3a5aa..b3386ff9b 100644 --- a/UI/WebServerResources/scss/components/list/list.scss +++ b/UI/WebServerResources/scss/components/list/list.scss @@ -25,11 +25,11 @@ md-list-item { } // Add some padding to the first icon in a list item -.md-list-item-inner { - > i:first-child { - margin-left: $mg; - } -} +//.md-list-item-inner { +// > i:first-child { +// margin-left: $mg; +// } +//} // The right tile for a list item. // ---------------------------------------------------------------------------- @@ -55,18 +55,85 @@ md-list-item { div.md-tile-left { min-width: $sg-md-grid-pitch + $baseline-grid; } -.sg-tile-icons { - md-icon { - font-size: $sg-font-size-1; - color: $colorGray; - margin: 2px; + +// Specific lists with a single subheader (sg-md-subheader--fixed) at the top +[id='messagesList'], +[id='contactsList'] { + border-top: 44px solid transparent; // padding for the header.subheader until md-subheader is fixed +} + +.sg-section-list { + 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); + cursor: pointer; + } + &:active { + color: sg-color($sogoBlue, 800); + } + &:focus, + &.sg-active { + background-color: sg-color($sogoBlue, 100); + } + .md-list-item-inner { + .md-secondary { + // Expect the container to include a sg-tile-icons + right: 0px; + } + } + } +} + +.sg { + &-tile-content { + align-items: baseline; + flex-direction: row; + flex-wrap: wrap; + flex: 1; + 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; + } + } + // Small tile of vertically-aligned icons + &-tile-icons { + md-icon { + font-size: $sg-font-size-1; + color: $colorGray; + margin: 2px; + } + display: flex; + flex-direction: column; + align-items: center; + justify-content: start; + width: (2 * $mg); + height:(7 * $line); } - display: flex; - flex-direction: column; - align-items: center; - justify-content: start; - width: (2 * $mg); - height:(7 * $line); } .sg-avatars { margin: ($mg / 2) 0 0 ($mg / 2); @@ -123,3 +190,43 @@ div.md-tile-left { background-color: rgba(255, 255, 0, 0.3) !important; content: "\e7fd"; // person } +.sg-avatar { + @extend .md-tile-left-card; + margin-right: 0; + margin-left: 0; +} +.sg-list-avatar { + @extend .md-tile-left-list; + margin-right: 0; + margin-left: 0; +} +.sg-selected-avatar { + @extend .md-tile-left-selected; + margin-right: 0; + margin-left: 0; +} +.sg-accepted { + @extend .md-tile-left-accepted; + margin-right: 0; + margin-left: 0; +} +.sg-declined { + @extend .md-tile-left-declined; + margin-right: 0; + margin-left: 0; +} +.sg-delegated { + @extend .md-tile-left-delegated; + margin-right: 0; + margin-left: 0; +} +.sg-needs-action { + @extend .md-tile-left-needs-action; + margin-right: 0; + margin-left: 0; +} +.sg-tentative { + @extend .md-tile-left-tentative; + margin-right: 0; + margin-left: 0; +} \ No newline at end of file diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss index 744fb4a23..f146e9303 100755 --- a/UI/WebServerResources/scss/styles.scss +++ b/UI/WebServerResources/scss/styles.scss @@ -26,7 +26,6 @@ // Original angular-material components // ------------------------------------------------------------------------------ @import 'components/autocomplete/autocomplete'; -@import 'components/autoScrollList/autoScrollList'; @import 'components/backdrop/backdrop'; @import 'components/bottomSheet/bottomSheet'; @import 'components/button/button';