From 570295f96ec48c45a962f56452e1038d1e948a8a Mon Sep 17 00:00:00 2001 From: Daniel Jimenez Date: Tue, 14 May 2019 13:29:46 +1200 Subject: [PATCH] Updated menu item icons with font-awesome equivalent, made search bar always 100%. --- icons/archive-solid.svg | 4 + icons/bars-solid.svg | 4 + icons/clock-solid.svg | 4 + icons/cog-solid.svg | 4 + icons/edit-solid.svg | 4 + icons/envelope-open-solid.svg | 4 + icons/envelope-solid.svg | 4 + icons/exclamation-circle-solid.svg | 4 + icons/folder-solid.svg | 4 + icons/search-solid.svg | 4 + icons/share-square-solid.svg | 4 + icons/star-regular.svg | 4 + icons/star-solid.svg | 4 + icons/times-circle-solid.svg | 4 + icons/trash-solid.svg | 4 + icons/users-solid.svg | 4 + icons/wave-square-solid.svg | 4 + img/searchloupe-white@2x.png | Bin 16072 -> 0 bytes package.json | 1 - styles/compose-button.less | 23 ---- styles/sheet-toolbar.less | 178 ++++++++++++++++++++++++++++- 21 files changed, 242 insertions(+), 28 deletions(-) create mode 100644 icons/archive-solid.svg create mode 100644 icons/bars-solid.svg create mode 100644 icons/clock-solid.svg create mode 100644 icons/cog-solid.svg create mode 100644 icons/edit-solid.svg create mode 100644 icons/envelope-open-solid.svg create mode 100644 icons/envelope-solid.svg create mode 100644 icons/exclamation-circle-solid.svg create mode 100644 icons/folder-solid.svg create mode 100644 icons/search-solid.svg create mode 100644 icons/share-square-solid.svg create mode 100644 icons/star-regular.svg create mode 100644 icons/star-solid.svg create mode 100644 icons/times-circle-solid.svg create mode 100644 icons/trash-solid.svg create mode 100644 icons/users-solid.svg create mode 100644 icons/wave-square-solid.svg delete mode 100644 img/searchloupe-white@2x.png delete mode 100644 styles/compose-button.less diff --git a/icons/archive-solid.svg b/icons/archive-solid.svg new file mode 100644 index 0000000..ad900ab --- /dev/null +++ b/icons/archive-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/bars-solid.svg b/icons/bars-solid.svg new file mode 100644 index 0000000..0136e21 --- /dev/null +++ b/icons/bars-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/clock-solid.svg b/icons/clock-solid.svg new file mode 100644 index 0000000..9fb6797 --- /dev/null +++ b/icons/clock-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/cog-solid.svg b/icons/cog-solid.svg new file mode 100644 index 0000000..9cb964e --- /dev/null +++ b/icons/cog-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/edit-solid.svg b/icons/edit-solid.svg new file mode 100644 index 0000000..f35a8d3 --- /dev/null +++ b/icons/edit-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/envelope-open-solid.svg b/icons/envelope-open-solid.svg new file mode 100644 index 0000000..8e376b9 --- /dev/null +++ b/icons/envelope-open-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/envelope-solid.svg b/icons/envelope-solid.svg new file mode 100644 index 0000000..dc59703 --- /dev/null +++ b/icons/envelope-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/exclamation-circle-solid.svg b/icons/exclamation-circle-solid.svg new file mode 100644 index 0000000..a43095f --- /dev/null +++ b/icons/exclamation-circle-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/folder-solid.svg b/icons/folder-solid.svg new file mode 100644 index 0000000..9cbd59e --- /dev/null +++ b/icons/folder-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/search-solid.svg b/icons/search-solid.svg new file mode 100644 index 0000000..873dedd --- /dev/null +++ b/icons/search-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/share-square-solid.svg b/icons/share-square-solid.svg new file mode 100644 index 0000000..9af0c3f --- /dev/null +++ b/icons/share-square-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/star-regular.svg b/icons/star-regular.svg new file mode 100644 index 0000000..2a98d4d --- /dev/null +++ b/icons/star-regular.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/star-solid.svg b/icons/star-solid.svg new file mode 100644 index 0000000..530ce55 --- /dev/null +++ b/icons/star-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/times-circle-solid.svg b/icons/times-circle-solid.svg new file mode 100644 index 0000000..efecb04 --- /dev/null +++ b/icons/times-circle-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/trash-solid.svg b/icons/trash-solid.svg new file mode 100644 index 0000000..0c4d360 --- /dev/null +++ b/icons/trash-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/users-solid.svg b/icons/users-solid.svg new file mode 100644 index 0000000..4a0a236 --- /dev/null +++ b/icons/users-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/icons/wave-square-solid.svg b/icons/wave-square-solid.svg new file mode 100644 index 0000000..8867184 --- /dev/null +++ b/icons/wave-square-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/img/searchloupe-white@2x.png b/img/searchloupe-white@2x.png deleted file mode 100644 index 3782f2919ee6fa3a1a3750279ee83b300429d14e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16072 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 Wc1*kMn`-4*^WqtE*w*~2m;MW&Na= div { @@ -25,32 +27,200 @@ div:not(.layout-mode-popout) { div.item-container { padding-right: 2em; } + + // Activity/compose button toolbar properties. + .toolbar-RootSidebar { + // Over-ride previously set image properties. + img { + zoom: 1 !important; + -webkit-mask-image: none !important; + -webkit-mask-repeat: none !important; + mask-image: none !important; + mask-repeat: none !important; + object-position: 0 !important; + background: none !important; + + // New properties to be set for the images. + height: 18px; + background-size: auto !important; + } + .toolbar-activity { + img { + margin-top: 11px; + content: url("mailspring://agapanthus/icons/wave-square-solid.svg"); + } + } + + // Compose button properties. + .btn.btn-toolbar.item-compose { + position: fixed; + z-index: 999; + background: @compose-button-color!important; + bottom: 22px; + height: 52px; + display: block; + right: 20px; + border-radius: @compose-button-radius!important; + padding: 19px; + padding-top: 13px; + padding-right: 17px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28) !important; + img { + width: 15px; + content: url("mailspring://agapanthus/icons/edit-solid.svg"); + } + &:hover { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.14), + 0 8px 16px rgba(0, 0, 0, 0.28) !important; + } + } + } + + // Main search bar properties. .toolbar-ThreadList { padding-top: 0px !important; .thread-search-bar { background: @inbox-lighter; + color: white; height: 34px !important; line-height: 34px !important; box-shadow: none !important; border-radius: 2px !important; + padding: 0 10px; + width: 100% !important; .suggestions { top: 34px !important; } .layer-text { - color: @white; + color: white; + padding-left: 10px; } .layer-tokens { display: none; } - img.search-accessory.search { - content: url("mailspring://agapanthus/img/searchloupe-white@2x.png"); + img { + width: 17px; + height: 17px; background-size: auto; } + + img.search-accessory.search { + content: url("mailspring://agapanthus/icons/search-solid.svg"); + } + + img.search-accessory.clear { + content: url("mailspring://agapanthus/icons/times-circle-solid.svg"); + } + } + } + + // Top right hand side menu bar. + .toolbar-MessageList, + .toolbar-MessageListSidebar { + .btn.btn-toolbar { + padding: 0 10px !important; + } + + // Over-ride previously set image properties. + img { + zoom: 1 !important; + -webkit-mask-image: none !important; + -webkit-mask-repeat: none !important; + mask-image: none !important; + mask-repeat: none !important; + object-position: 0 !important; + background: none !important; + + // New properties to be set for the images. + height: 18px; + background-size: auto !important; + } + + // Upper right corner cog. + .toolbar-menu-control { + img { + content: url("mailspring://agapanthus/icons/cog-solid.svg"); + } + } + + // Upper right corner users. + .mode-toggle { + img { + content: url("mailspring://agapanthus/icons/users-solid.svg"); + } + } + + .message-toolbar-items { + .thread-sharing-button { + img { + content: url("mailspring://agapanthus/icons/share-square-solid.svg"); + } + } + + .snooze-button { + img { + content: url("mailspring://agapanthus/icons/clock-solid.svg"); + } + } + + .btn-category-picker { + img { + content: url("mailspring://agapanthus/icons/folder-solid.svg"); + } + } + + .btn[title="Mark as Read"] { + img { + content: url("mailspring://agapanthus/icons/envelope-solid.svg"); + } + } + + .btn[title="Mark as Unread"] { + img { + content: url("mailspring://agapanthus/icons/envelope-open-solid.svg"); + } + } + + .btn[title="Star"] { + img { + content: url("mailspring://agapanthus/icons/star-regular.svg"); + } + } + + .btn[title="Unstar"] { + img { + content: url("mailspring://agapanthus/icons/star-solid.svg"); + } + } + + .btn[title="Move to Trash"] { + img { + content: url("mailspring://agapanthus/icons/trash-solid.svg"); + } + } + + .btn[title="Mark as Spam"] { + img { + content: url("mailspring://agapanthus/icons/exclamation-circle-solid.svg"); + } + } + + .btn[title="Not Spam"] { + img { + content: url("mailspring://agapanthus/icons/exclamation-circle-solid.svg"); + } + } + + .btn[title="Archive"] { + img { + content: url("mailspring://agapanthus/icons/archive-solid.svg"); + } + } } } } @@ -66,5 +236,5 @@ div:not(.layout-mode-popout) { } .window-title { - color: @white; + color: white; }