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 3782f29..0000000 Binary files a/img/searchloupe-white@2x.png and /dev/null differ diff --git a/package.json b/package.json index a475bee..b2c2fd4 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "mailspring": "*" }, "styleSheets": [ - "compose-button", "compose", "controls", "email-frame", diff --git a/styles/compose-button.less b/styles/compose-button.less deleted file mode 100644 index 22a1d40..0000000 --- a/styles/compose-button.less +++ /dev/null @@ -1,23 +0,0 @@ -@import "ui-variables"; - -.sheet-toolbar { - .btn.btn-toolbar.item-compose { - position: fixed; - z-index: 999; - background: @compose-button-color!important; - bottom: 22px; - height: 52px; - display: block; - right: 12px; - border-radius: @compose-button-radius!important; - padding: 19px; - padding-top: 15px; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28) !important; - img.content-mask { - transition: transform 400ms ease-in; - } - &:hover { - box-shadow: 0 0 8px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.28) !important; - } - } -} diff --git a/styles/sheet-toolbar.less b/styles/sheet-toolbar.less index 2311150..a7b6506 100644 --- a/styles/sheet-toolbar.less +++ b/styles/sheet-toolbar.less @@ -6,6 +6,8 @@ div:not(.layout-mode-popout) { border: none; height: @header-bar-height; max-height: @header-bar-height; + + // Generic toolbar properties. .sheet-toolbar-container { background: @toolbar-bg; > 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; }