diff --git a/UI/Contacts/English.lproj/Localizable.strings b/UI/Contacts/English.lproj/Localizable.strings index 4c1ccdf4b..7047f4a89 100644 --- a/UI/Contacts/English.lproj/Localizable.strings +++ b/UI/Contacts/English.lproj/Localizable.strings @@ -228,3 +228,6 @@ "Synchronization" = "Synchronization"; "Synchronize" = "Synchronize"; "Sucessfully subscribed to address book" = "Sucessfully subscribed to address book"; + +/* Aria label for scope of search on contacts */ +"Search scope" = "Search scope"; \ No newline at end of file diff --git a/UI/MailerUI/English.lproj/Localizable.strings b/UI/MailerUI/English.lproj/Localizable.strings index 8b026d4f4..68770a262 100644 --- a/UI/MailerUI/English.lproj/Localizable.strings +++ b/UI/MailerUI/English.lproj/Localizable.strings @@ -345,4 +345,7 @@ "More search options" = "More search options"; "Your email has been saved" = "Your email has been saved"; "Your email has been sent" = "Your email has been sent"; -"Folder compacted" = "Folder compacted"; \ No newline at end of file +"Folder compacted" = "Folder compacted"; + +/* Aria label for scope of search on messages */ +"Search scope" = "Search scope"; \ No newline at end of file diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index d71571cd4..53d92ff7f 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -27,10 +27,12 @@ md-component-id="left" md-is-locked-open="isGtMedium" ng-class="{ 'sg-close': leftIsClose }"> - +
- +
- +
- + @@ -293,7 +297,7 @@
- + @@ -381,7 +385,8 @@ - + -
-
- +
+
+
+
+
{{currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)}}
+
+
+
+
+ + + +
-
-
-
-
-
-
{{currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)}}
-
-
-
@@ -434,13 +440,16 @@
-
- -
+
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index 0aa3f8033..d3a874bde 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -6,7 +6,7 @@
-
@@ -133,7 +133,7 @@
- + @@ -258,7 +258,8 @@ - + -
+
-
-
- -
+
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox index a7e13990a..cd7291c2b 100644 --- a/UI/Templates/MailerUI/UIxMailMainFrame.wox +++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox @@ -34,10 +34,12 @@ md-component-id="left" md-is-locked-open="isGtMedium" ng-class="{ 'sg-close': leftIsClose }"> - +
- +
- -
+
@@ -199,7 +203,7 @@ -
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox index 8073d7d98..2c920ac0e 100644 --- a/UI/Templates/SchedulerUI/UIxCalMainView.wox +++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox @@ -36,10 +36,12 @@ md-component-id="left" md-is-locked-open="isGtMedium" ng-class="{ 'sg-close': leftIsClose }"> - +
- +
- +
- +
{{list.filterpopup() | loc}} - + -
-
-
+ ng-class="[event.getClassName('fg'), { 'sg-avatar-selected' : event.selected }]" + ng-click="list.toggleComponentSelection($event, event)"> +
', /* Background color */ - ' .bg-folder{{ cssCtrl.ngModel.id }},', - ' .bg-folder{{ cssCtrl.ngModel.id }} label {', + ' .bg-folder{{ cssCtrl.ngModel.id }} {', ' background-color: {{ cssCtrl.ngModel.color }} !important;', ' color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;', ' }', diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss index 0d0908552..93b96e7d5 100644 --- a/UI/WebServerResources/scss/components/list/list.scss +++ b/UI/WebServerResources/scss/components/list/list.scss @@ -17,7 +17,27 @@ $sg-avatar-width: 40px; // Circle diamter of color chips $sg-color-chip-width: 16px; + +/*------------------------------------*\ + MD-LIST-ITEM +\*------------------------------------*/ + md-list-item { + + // Gain some space with secondary action button; + // Impact: list with checkbox in sidevav of Calendar module + &.md-with-secondary ._md-list-item-inner { + padding-right: $bl; + } + + // Fix for md-menu visibility when set as a secondary action in a list item + &._md-button-wrap > div.md-button:first-child > .md-button:first-child { + z-index: $z-index-sidenav - 2; + } + ._md-secondary-container { + z-index: $z-index-sidenav - 1; + } + ._md-list-item-inner { overflow: hidden; @@ -45,6 +65,11 @@ md-list-item { } } + +/*------------------------------------*\ + MD-SIDENAV +\*------------------------------------*/ + .md-sidenav-left { md-list { padding: 0; @@ -98,6 +123,7 @@ md-list-item { .md-tile-right { padding-right: $item-padding-right; } + // The right tile for a list item (avatar container) // ---------------------------------------------------------------------------- @@ -124,17 +150,9 @@ div.md-tile-left { min-width: $sg-md-grid-pitch + $baseline-grid; } -.sg-section-list { - md-list-item { - &._md-button-wrap { - > .md-button:first-child { - ._md-list-item-inner { - // Expect the container to include a sg-tile-icons - padding-right: 0px; - } - } - } - } +.sg-section-list md-list-item._md-button-wrap > .md-button:first-child ._md-list-item-inner { + // Expect the container to include a sg-tile-icons (Mailer module) + padding-right: 0px; } .sg { @@ -180,8 +198,8 @@ div.md-tile-left { &-tile-icons { display: flex; flex-direction: column; - align-items: center; - justify-content: start; + align-items: flex-end; + justify-content: center; width: (2 * $mg); height: (2 + $sg-font-size-1) * 4; // (vertical padding + icon size) * max number of icons } @@ -203,6 +221,8 @@ div.md-tile-left { font-size: $sg-font-size-1; //color: $colorGray; margin: 1px 2px; + min-height: $sg-font-size-1; + min-width: $sg-font-size-1; } } @@ -265,10 +285,29 @@ sg-avatar-image md-icon.material-icons { content: "\e80b"; // public } } -.sg-avatar-selected { + + +/*------------------------------------*\ + SELECTABLE AVATARS +\*------------------------------------*/ + +.sg-list-selectable .sg-avatar-selectable, +.sg-avatar-selectable:hover { + font-family: 'Material Icons'; + font-size: $sg-avatar-width; + height: 100%; &:before { color: inherit; - content: "\e5ca"; // check + content: "\e835"; // check box outline + font-size: $icon-size; + margin: 0 ($sg-avatar-width - $icon-size)/2; + } + &.sg-avatar-selected:before { + content: "\e834"; // check box + } + + > * { + display: none; } } //.md-tile-left-accepted:before { diff --git a/UI/WebServerResources/scss/components/sticky/sticky.scss b/UI/WebServerResources/scss/components/sticky/sticky.scss index 33b266beb..d476e65e2 100644 --- a/UI/WebServerResources/scss/components/sticky/sticky.scss +++ b/UI/WebServerResources/scss/components/sticky/sticky.scss @@ -1 +1,8 @@ -@import "extends"; \ No newline at end of file +@import "extends"; + +._md-sticky-clone { + // Increase the z-index of sticky subheaders so it always appear above + // seconday buttons of list items. + // See z-index changes in custom list.scss. + z-index: $z-index-sidenav; +} \ 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 c600a86d1..904698ee9 100644 --- a/UI/WebServerResources/scss/components/subheader/subheader.scss +++ b/UI/WebServerResources/scss/components/subheader/subheader.scss @@ -1,10 +1,17 @@ /// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- @import 'extends'; +$sg-subheader-padding-top-bottom: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2); +$sg-subheader-padding-left-right: $baseline-grid; + + .sg-md-subheader { &--icon-button ._md-subheader-inner { + line-height: $sg-avatar-width + ($sg-subheader-padding-top-bottom)*2; padding: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2) $baseline-grid; + padding: $sg-subheader-padding-top-bottom $sg-subheader-padding-left-right; padding-left: $subheader-padding; + padding-right: 0; } &--fixed { position: fixed; diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss index 6ff4b55f0..a95a0b312 100644 --- a/UI/WebServerResources/scss/core/variables.scss +++ b/UI/WebServerResources/scss/core/variables.scss @@ -155,7 +155,7 @@ $z-index-bottom-sheet: 70 !default; $z-index-scroll-mask: 65 !default; $z-index-sidenav: 60 !default; $z-index-backdrop: 50 !default; -$z-index-fab: 20 !default; +$z-index-fab: 60 !default; $z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome $z-index-toolbar: 10 !default; $z-index-view: 9; diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss index a68e0d286..91cc36f49 100644 --- a/UI/WebServerResources/scss/views/SchedulerUI.scss +++ b/UI/WebServerResources/scss/views/SchedulerUI.scss @@ -31,13 +31,9 @@ $quarter_height: 10px; } // The color chip is smaller; adjust the "selected" icon accordingly - .sg-avatar-selected { - &:before { - margin-left: -($bl); - } - &.md-avatar:first-child { - margin-right: 0; - } + .sg-list-selectable .sg-avatar-selectable:before, + .sg-avatar-selectable:hover:before { + margin: 0 (($sg-color-chip-width + 2*$bl) - $icon-size)/2; } } diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss index a40330732..466f15da0 100644 --- a/UI/WebServerResources/scss/views/_view.scss +++ b/UI/WebServerResources/scss/views/_view.scss @@ -57,14 +57,16 @@ $listView-width: grid-step(6) !global; // the left side of the list item. .md-with-secondary { ._md-list-item-inner { + order: 2; padding-left: $baseline-grid; } ._md-secondary-container { - order: -1; // move secondary container to the left + order: 1; // move secondary container to the left } .md-secondary { margin: 0; padding: 0; + text-align: left; } }