From f0cf4e3f2e2b9c08c15ee7b27ef5ea1036e57d08 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Tue, 15 May 2018 13:39:02 +0200 Subject: [PATCH] Elastic: Toolbar variations --- skins/elastic/styles/layout.less | 5 + skins/elastic/styles/widgets/buttons.less | 18 +-- skins/elastic/styles/widgets/common.less | 1 + skins/elastic/styles/widgets/toolbar.less | 58 +++++--- skins/elastic/templates/addressbook.html | 9 +- skins/elastic/templates/includes/layout.html | 1 + .../elastic/templates/includes/mail-menu.html | 2 + skins/elastic/templates/mail.html | 20 +-- skins/elastic/ui.js | 133 +++++++++++++----- 9 files changed, 168 insertions(+), 79 deletions(-) diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less index 4ac8e6635..2ac055c58 100644 --- a/skins/elastic/styles/layout.less +++ b/skins/elastic/styles/layout.less @@ -136,6 +136,7 @@ body > #layout { margin: 0 -20rem; } + a.toolbar-list-button, a.toolbar-menu-button { order: 99; // always the last button } @@ -216,6 +217,10 @@ html.iframe { } } } + + a.toolbar-list-button { + display: none; + } } @media screen and (max-width: @screen-width-xs) { diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less index bd7cea4e9..bb5d7e990 100644 --- a/skins/elastic/styles/widgets/buttons.less +++ b/skins/elastic/styles/widgets/buttons.less @@ -36,11 +36,11 @@ button.btn { &:before { &:extend(.font-icon-class); } - &.toolbar-menu-button:before { - content: @fa-var-ellipsis-v; - } + &.sidebar-menu:before, + &.toolbar-menu-button:before, &.toolbar-list-button:before { - content: @fa-var-cog; + content: @fa-var-ellipsis-v; + width: 1em; } &.menu-button:before { content: @fa-var-bars; @@ -50,6 +50,9 @@ button.btn { &.back-list-button:before { content: @fa-var-chevron-left; } + &.refresh:before { + content: @fa-var-sync; + } &.generate:before, &.yes:before, &.submit:before, @@ -116,9 +119,6 @@ button.btn { &.help:before { .font-icon-regular(@fa-var-life-ring); } - &.toggleselect:before { - .font-icon-regular(@fa-var-check-square); - } &.folders:before { content: @fa-var-folder-open; } @@ -126,10 +126,12 @@ button.btn { &.settings:before { content: @fa-var-wrench; } - &.properties:before { content: @fa-var-info-circle; } + &.select:before { + .font-icon-regular(@fa-var-check-circle); + } } a.btn, diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less index 4374c8f90..043ec9d1a 100644 --- a/skins/elastic/styles/widgets/common.less +++ b/skins/elastic/styles/widgets/common.less @@ -272,6 +272,7 @@ fieldset.image-attachment { .quota-widget { width: 100%; + max-width: 15em; padding: .5rem 1rem; display: flex; align-items: center; diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index 5b40a7eb5..c734206be 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -113,23 +113,23 @@ &.encrypt:before { content: @fa-var-lock; } - &.firstpage:before { - content: @fa-var-fast-backward; - } &.prev:before { content: @fa-var-arrow-left; } &.next:before { content: @fa-var-arrow-right; } + &.firstpage:before { + content: @fa-var-angle-double-left; + } &.prevpage:before { - content: @fa-var-backward; + content: @fa-var-angle-left; } &.nextpage:before { - content: @fa-var-forward; + content: @fa-var-angle-right; } &.lastpage:before { - content: @fa-var-fast-forward; + content: @fa-var-angle-double-right; } &.send:before { content: @fa-var-paper-plane; @@ -157,7 +157,7 @@ content: @fa-var-comment; } &.select:before { - .font-icon-regular(@fa-var-check-square); + .font-icon-regular(@fa-var-check-circle); } &.threads:before { content: @fa-var-comments; @@ -239,16 +239,11 @@ a.button { flex-grow: 1; - font-size: 80%; min-width: 2rem !important; height: @layout-footer-small-height; &:before { - line-height: 1.5 !important; - } - - &.toggleselect { - flex-grow: unset !important; + line-height: 1.25; } } @@ -517,6 +512,15 @@ a.export.all:before { content: @fa-var-download; } + a.select:before { + content: @fa-var-check-circle; + } + a.threads:before { + content: @fa-var-comments; + } + a.selection:before { + content: @fa-var-mouse-pointer; + } a.select.all:before { .font-icon-regular(@fa-var-check-square); } @@ -639,10 +643,6 @@ html.ie11 .toolbar .dropbutton a.dropdown:before { } @media screen and (min-width: (@screen-width-small + 1px)) { - ul.toolbar { - flex: 1; - } - .toolbar { a.button { &:not(.disabled):focus, @@ -728,6 +728,30 @@ html.ie11 .toolbar .dropbutton a.dropdown:before { } } +a.button.icon.toolbar-button { + order: 8; + + @media screen and (min-width: (@screen-width-large + 1px)) { + height: @layout-header-height; + line-height: 1.5; + padding: .5rem; + + &:before { + float: none; + height: 1.75rem; + line-height: 1.75; + width: auto; + } + + span.inner { + display: inline; + font-weight: normal; + font-size: 90%; + } + } +} + + /*** Searchbar and searchoptions widgets ***/ .searchbar { diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html index d26b69176..b14aa51e1 100644 --- a/skins/elastic/templates/addressbook.html +++ b/skins/elastic/templates/addressbook.html @@ -8,18 +8,14 @@
+

- @@ -113,6 +109,7 @@