From d15b045ff108fb7f9ba7c27f0c9442a6e159604a Mon Sep 17 00:00:00 2001 From: Mahadevan Sreenivasan Date: Wed, 22 Apr 2020 13:44:26 +0530 Subject: Differentiate badge icon/color for indirect notifications (#590) * feat: Differentiate between indirect and direct notifications - Windows - Replace the icon used for showing indirect notifications in the taskbar to a blue(#0088cc) color (like slack, google chat etd) - All Platforms - Replace the red color used for indirect notifications in tabbed view for a service to #0088cc (Blue) color * Indirect notification icons in tray and tabs Co-authored-by: Feiko Joosten Co-authored-by: Sampath Kumar Krishnan --- src/assets/images/taskbar/win32/taskbar-alert.ico | Bin 32038 -> 32038 bytes .../tray/darwin-dark/tray-indirect-active.png | Bin 0 -> 884 bytes .../tray/darwin-dark/tray-indirect-active@2x.png | Bin 0 -> 1802 bytes .../images/tray/darwin-dark/tray-indirect.png | Bin 0 -> 884 bytes .../images/tray/darwin-dark/tray-indirect@2x.png | Bin 0 -> 1802 bytes .../images/tray/darwin/tray-indirect-active.png | Bin 0 -> 884 bytes .../images/tray/darwin/tray-indirect-active@2x.png | Bin 0 -> 1802 bytes src/assets/images/tray/darwin/tray-indirect.png | Bin 0 -> 859 bytes src/assets/images/tray/darwin/tray-indirect@2x.png | Bin 0 -> 1675 bytes src/assets/images/tray/linux/tray-indirect.png | Bin 0 -> 2845 bytes src/assets/images/tray/linux/tray-indirect@2x.png | Bin 0 -> 5274 bytes src/assets/images/tray/win32/tray-indirect.ico | Bin 0 -> 41109 bytes src/lib/Tray.js | 14 ++++++++++++-- src/styles/tabs.scss | 12 +++++++++--- 14 files changed, 21 insertions(+), 5 deletions(-) create mode 100644 src/assets/images/tray/darwin-dark/tray-indirect-active.png create mode 100644 src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png create mode 100644 src/assets/images/tray/darwin-dark/tray-indirect.png create mode 100644 src/assets/images/tray/darwin-dark/tray-indirect@2x.png create mode 100644 src/assets/images/tray/darwin/tray-indirect-active.png create mode 100644 src/assets/images/tray/darwin/tray-indirect-active@2x.png create mode 100644 src/assets/images/tray/darwin/tray-indirect.png create mode 100644 src/assets/images/tray/darwin/tray-indirect@2x.png create mode 100644 src/assets/images/tray/linux/tray-indirect.png create mode 100644 src/assets/images/tray/linux/tray-indirect@2x.png create mode 100644 src/assets/images/tray/win32/tray-indirect.ico (limited to 'src') diff --git a/src/assets/images/taskbar/win32/taskbar-alert.ico b/src/assets/images/taskbar/win32/taskbar-alert.ico index 5b349c2b6..d80333711 100644 Binary files a/src/assets/images/taskbar/win32/taskbar-alert.ico and b/src/assets/images/taskbar/win32/taskbar-alert.ico differ diff --git a/src/assets/images/tray/darwin-dark/tray-indirect-active.png b/src/assets/images/tray/darwin-dark/tray-indirect-active.png new file mode 100644 index 000000000..b0f68c1ea Binary files /dev/null and b/src/assets/images/tray/darwin-dark/tray-indirect-active.png differ diff --git a/src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png b/src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png new file mode 100644 index 000000000..c863fd144 Binary files /dev/null and b/src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png differ diff --git a/src/assets/images/tray/darwin-dark/tray-indirect.png b/src/assets/images/tray/darwin-dark/tray-indirect.png new file mode 100644 index 000000000..b0f68c1ea Binary files /dev/null and b/src/assets/images/tray/darwin-dark/tray-indirect.png differ diff --git a/src/assets/images/tray/darwin-dark/tray-indirect@2x.png b/src/assets/images/tray/darwin-dark/tray-indirect@2x.png new file mode 100644 index 000000000..c863fd144 Binary files /dev/null and b/src/assets/images/tray/darwin-dark/tray-indirect@2x.png differ diff --git a/src/assets/images/tray/darwin/tray-indirect-active.png b/src/assets/images/tray/darwin/tray-indirect-active.png new file mode 100644 index 000000000..b0f68c1ea Binary files /dev/null and b/src/assets/images/tray/darwin/tray-indirect-active.png differ diff --git a/src/assets/images/tray/darwin/tray-indirect-active@2x.png b/src/assets/images/tray/darwin/tray-indirect-active@2x.png new file mode 100644 index 000000000..c863fd144 Binary files /dev/null and b/src/assets/images/tray/darwin/tray-indirect-active@2x.png differ diff --git a/src/assets/images/tray/darwin/tray-indirect.png b/src/assets/images/tray/darwin/tray-indirect.png new file mode 100644 index 000000000..d7667600b Binary files /dev/null and b/src/assets/images/tray/darwin/tray-indirect.png differ diff --git a/src/assets/images/tray/darwin/tray-indirect@2x.png b/src/assets/images/tray/darwin/tray-indirect@2x.png new file mode 100644 index 000000000..bc5910bc7 Binary files /dev/null and b/src/assets/images/tray/darwin/tray-indirect@2x.png differ diff --git a/src/assets/images/tray/linux/tray-indirect.png b/src/assets/images/tray/linux/tray-indirect.png new file mode 100644 index 000000000..9f5c357eb Binary files /dev/null and b/src/assets/images/tray/linux/tray-indirect.png differ diff --git a/src/assets/images/tray/linux/tray-indirect@2x.png b/src/assets/images/tray/linux/tray-indirect@2x.png new file mode 100644 index 000000000..495c7e1cc Binary files /dev/null and b/src/assets/images/tray/linux/tray-indirect@2x.png differ diff --git a/src/assets/images/tray/win32/tray-indirect.ico b/src/assets/images/tray/win32/tray-indirect.ico new file mode 100644 index 000000000..bc48a4eef Binary files /dev/null and b/src/assets/images/tray/win32/tray-indirect.ico differ diff --git a/src/lib/Tray.js b/src/lib/Tray.js index 3700cca27..8928c97bc 100644 --- a/src/lib/Tray.js +++ b/src/lib/Tray.js @@ -6,6 +6,7 @@ import path from 'path'; const FILE_EXTENSION = process.platform === 'win32' ? 'ico' : 'png'; const INDICATOR_TRAY_PLAIN = 'tray'; const INDICATOR_TRAY_UNREAD = 'tray-unread'; +const INDICATOR_TRAY_INDIRECT = 'tray-indirect'; export default class TrayIcon { trayIcon = null; @@ -103,14 +104,23 @@ export default class TrayIcon { this._refreshIcon(); } + _getAssetFromIndicator(indicator) { + if (indicator === '•') { + return INDICATOR_TRAY_INDIRECT; + } if (indicator !== 0) { + return INDICATOR_TRAY_UNREAD; + } + return INDICATOR_TRAY_PLAIN; + } + _refreshIcon() { if (!this.trayIcon) return; - this.trayIcon.setImage(this._getAsset('tray', this.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN)); + this.trayIcon.setImage(this._getAsset('tray', this._getAssetFromIndicator(this.indicator))); if (process.platform === 'darwin') { this.trayIcon.setPressedImage( - this._getAsset('tray', `${this.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN}-active`), + this._getAsset('tray', `${this._getAssetFromIndicator(this.indicator)}-active`), ); } } diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 5bd0555d2..65ca97a54 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -52,7 +52,7 @@ .tab-item__message-count { align-items: center; - background: $theme-brand-danger; + background: #0088cc; border-radius: 20px; bottom: 8px; color: #FFF; @@ -65,7 +65,10 @@ position: absolute; right: 8px; - &.is-indirect { padding-top: 0; } + &.is-indirect { + padding-top: 0; + background: #0088cc; + } &.hibernating { padding-top: 0; background: $theme-gray; @@ -92,7 +95,10 @@ right: 8px; width: 17px; - &.is-indirect { padding-top: 0; } + &.is-indirect { + padding-top: 0; + background: #0088cc; + } } &.is-reordering { z-index: 99999; } -- cgit v1.2.3-70-g09d2