diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index ea7f4ff21..7731bc87e 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -147,14 +147,14 @@ -
+
-
+

{{activeUser.identification}}

@@ -205,7 +205,7 @@
-
+
@@ -218,14 +218,14 @@

-
- - +
+ +
-
@@ -246,11 +246,6 @@
-

Contacts

diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox index 9b5595d11..ab9b39918 100644 --- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox +++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox @@ -7,7 +7,7 @@ > - +
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox index 9ee46b760..3e59af0cc 100644 --- a/UI/Templates/MailerUI/UIxMailMainFrame.wox +++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox @@ -265,8 +265,8 @@ - -
+ +
@@ -304,12 +304,11 @@
-
+
-

@@ -317,14 +316,14 @@

-
- - +
+ +
-
diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss index 51ae3427f..cb921edb0 100644 --- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss +++ b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss @@ -10,6 +10,10 @@ // avoid overspecifying // todo: create new classes and refactor templates markup // ---------------------------------------------------------------------------- +.vs-repeat-repeated-element { + width: 100%; +} + [id='messagesList'], [id='contactsList'] { border-top: 44px solid transparent; // padding for the header.subheader, diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss index cb4b13000..b82dfea6b 100644 --- a/UI/WebServerResources/scss/components/button/_button.scss +++ b/UI/WebServerResources/scss/components/button/_button.scss @@ -32,6 +32,9 @@ md-sidenav md-list button.md-button { md-sidenav .md-button [class ^= "md-icon"] { margin-right: 1em; } +md-sidenav .md-button.iconButton.sg-button-navicon [class ^= "md-icon"] { + margin: 0; +} /// /// iconButton @@ -80,7 +83,7 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing- [class ^= md-icon], [class *= md-icon-] { padding: $iconButton-icon-padding; - color: curentColor; + color: currentColor; font-size: $iconButton-icon-size; transition: $iconButton-transition; } @@ -92,13 +95,29 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing- border-radius: 50%; } } +md-toolbar .md-toolbar-tools:first-of-type .iconButton, +md-toolbar .md-toolbar-tools:first-child .iconButton, +md-toolbar .md-toolbar-tools.md-toolbar-tools-top .iconButton, +md-toolbar .md-toolbar-tools:not(.md-toolbar-tools-bottom) .iconButton { + margin-top: ($mg * -1); +} // First button must have it's icon align to margin/padding -md-content.md-padding > .iconButton:first-child { - margin-top: ($iconButton-padding * -1); - margin-left: ($iconButton-padding * -1); +md-toolbar .md-toolbar-tools .iconButton:first-child, +.sg-toolbar-group-last .iconButton:first-child { + margin-left: ($mg * -1); +} +md-content.md-padding, +md-card-content { + &> .iconButton:first-child { + margin-top: ($mg * -1); + margin-left: ($mg * -1); } - - +} +// Last button must have it's icon align to margin/padding +md-toolbar .md-toolbar-tools .iconButton:last-child, +.sg-toolbar-group-last .iconButton:last-child { + margin-right: ($mg * -1); +} // Icon-bars are for iconButtons, by default they're vertical and at the right // the modifier class is to reflect those values and leave place to other versions @@ -133,8 +152,8 @@ md-content.md-padding > .iconButton:first-child { } .sg-button-navicon { - top: ($mg * -1); - margin-left: ($mg * -1); + //top: ($mg * -1); + //margin-left: ($mg * -1); width: $touch-zone; height: $touch-zone; } diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss index f83303686..a82468552 100644 --- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss +++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss @@ -1,13 +1,33 @@ +$toolbar-tools-height: 100%; +$toolbar-height: $pitch; +$toolbar-medium-tall-height: 88px !default; +$toolbar-tall-height: ($toolbar-height * 2); +$toolbar-indent-margin: $pitch; +$toolbar-padding: $mg; @import 'extends'; +// According to specs, there's no case where toolbars have no padding +// We overule angular-material way of implenting this by defining padding toolbars +// instead of toolbar-tools to prevent padding addition +// INFO: because we make intensive use of border-box box sizing model, horizontal paddings +// must be declare in containers with sg-padded md-toolbar { - // todo: create variables scaled z-index + padding: $toolbar-padding 0; box-shadow: none; font-size: initial; } +.md-toolbar-tools { + padding: 0 initial; +} + +// angular-material is overspecifying so we are +.md-toolbar-tools[layout-align="start start"] { + align-items: flex-start; +} + .md-toolbar-tools.md-toolbar-tools-top { - padding-top: $mg; + align-items: flex-start; } .md-toolbar-tools.md-toolbar-tools-bottom { @@ -46,7 +66,8 @@ hgroup { &-2 { order: 2; } - &-3 { + &-3, + &-last { order: 3; } } diff --git a/UI/WebServerResources/scss/core/base_styles/_base_style.scss b/UI/WebServerResources/scss/core/base_styles/_base_style.scss index 1ae2ae039..53cc5b2a3 100644 --- a/UI/WebServerResources/scss/core/base_styles/_base_style.scss +++ b/UI/WebServerResources/scss/core/base_styles/_base_style.scss @@ -10,14 +10,23 @@ */ main { - background-color: sg-color($sogoPaper, 200); + background-color: $background-base-color; +} + +// Utility class to add padding on containers +// Because of the border-box sizing model, padding can affect width specialy +// in nested containers +.sg-padded { + padding-left: $mg; + padding-right: $mg; } .sg-logo { background-image: url("../img/sogo-full.svg"); background-size: contain; background-repeat: no-repeat; - margin: $bl 0 0 $mg; height: 7 * $bl; min-width: 18 * $bl; + //optical adjustement + transform: translateY(-10%); } diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss index 656c0b6d8..2f7bada40 100644 --- a/UI/WebServerResources/scss/core/variables.scss +++ b/UI/WebServerResources/scss/core/variables.scss @@ -13,6 +13,7 @@ $version: '3.alpha'; $primary-color: sg-color($sogoBlue, 300) !default; //$foreground-primary-color: rgba($foreground-base-color, 0.73) !default; $foreground-primary-color: rgba($primary-color, 0.87);//override +$background-base-color: sg-color($sogoPaper, 200); // Typography // ------------------------------ diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss index be159a7b7..ddff7bc78 100644 --- a/UI/WebServerResources/scss/views/_view.scss +++ b/UI/WebServerResources/scss/views/_view.scss @@ -50,6 +50,7 @@ $detailView-width: grid-step(8) !global; .view-detail { position: relative; z-index: $z-index-view; + background-color: $background-base-color; @include from(lg) { @include flex-col(lg, 8, 2, 1); margin: 0 auto $mg auto; @@ -61,7 +62,6 @@ $detailView-width: grid-step(8) !global; @include to(sm) { width: 100%; min-width: 100%; - background-color: sg-color($sogoPaper, 50); transform: translateX(-100%) scale(1); filter: opacity(1); transform-origin: 50% 50%;