diff options
author | 2020-04-22 13:44:26 +0530 | |
---|---|---|
committer | 2020-04-22 08:14:26 +0000 | |
commit | d15b045ff108fb7f9ba7c27f0c9442a6e159604a (patch) | |
tree | 15abd6649d98c1a339a7ae565b7927e518796910 | |
parent | docs: add mahadevans87 as a contributor (#622) (diff) | |
download | ferdium-app-d15b045ff108fb7f9ba7c27f0c9442a6e159604a.tar.gz ferdium-app-d15b045ff108fb7f9ba7c27f0c9442a6e159604a.tar.zst ferdium-app-d15b045ff108fb7f9ba7c27f0c9442a6e159604a.zip |
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 <feiko_joosten@hotmail.com>
Co-authored-by: Sampath Kumar Krishnan <sampathBlam@users.noreply.github.com>
14 files changed, 21 insertions, 5 deletions
diff --git a/src/assets/images/taskbar/win32/taskbar-alert.ico b/src/assets/images/taskbar/win32/taskbar-alert.ico index 5b349c2b6..d80333711 100644 --- a/src/assets/images/taskbar/win32/taskbar-alert.ico +++ b/src/assets/images/taskbar/win32/taskbar-alert.ico | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin-dark/tray-indirect-active.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin-dark/tray-indirect.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin-dark/tray-indirect@2x.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin/tray-indirect-active.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin/tray-indirect-active@2x.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin/tray-indirect.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/darwin/tray-indirect@2x.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/linux/tray-indirect.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/linux/tray-indirect@2x.png | |||
Binary files 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 --- /dev/null +++ b/src/assets/images/tray/win32/tray-indirect.ico | |||
Binary files 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'; | |||
6 | const FILE_EXTENSION = process.platform === 'win32' ? 'ico' : 'png'; | 6 | const FILE_EXTENSION = process.platform === 'win32' ? 'ico' : 'png'; |
7 | const INDICATOR_TRAY_PLAIN = 'tray'; | 7 | const INDICATOR_TRAY_PLAIN = 'tray'; |
8 | const INDICATOR_TRAY_UNREAD = 'tray-unread'; | 8 | const INDICATOR_TRAY_UNREAD = 'tray-unread'; |
9 | const INDICATOR_TRAY_INDIRECT = 'tray-indirect'; | ||
9 | 10 | ||
10 | export default class TrayIcon { | 11 | export default class TrayIcon { |
11 | trayIcon = null; | 12 | trayIcon = null; |
@@ -103,14 +104,23 @@ export default class TrayIcon { | |||
103 | this._refreshIcon(); | 104 | this._refreshIcon(); |
104 | } | 105 | } |
105 | 106 | ||
107 | _getAssetFromIndicator(indicator) { | ||
108 | if (indicator === '•') { | ||
109 | return INDICATOR_TRAY_INDIRECT; | ||
110 | } if (indicator !== 0) { | ||
111 | return INDICATOR_TRAY_UNREAD; | ||
112 | } | ||
113 | return INDICATOR_TRAY_PLAIN; | ||
114 | } | ||
115 | |||
106 | _refreshIcon() { | 116 | _refreshIcon() { |
107 | if (!this.trayIcon) return; | 117 | if (!this.trayIcon) return; |
108 | 118 | ||
109 | this.trayIcon.setImage(this._getAsset('tray', this.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN)); | 119 | this.trayIcon.setImage(this._getAsset('tray', this._getAssetFromIndicator(this.indicator))); |
110 | 120 | ||
111 | if (process.platform === 'darwin') { | 121 | if (process.platform === 'darwin') { |
112 | this.trayIcon.setPressedImage( | 122 | this.trayIcon.setPressedImage( |
113 | this._getAsset('tray', `${this.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN}-active`), | 123 | this._getAsset('tray', `${this._getAssetFromIndicator(this.indicator)}-active`), |
114 | ); | 124 | ); |
115 | } | 125 | } |
116 | } | 126 | } |
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 @@ | |||
52 | 52 | ||
53 | .tab-item__message-count { | 53 | .tab-item__message-count { |
54 | align-items: center; | 54 | align-items: center; |
55 | background: $theme-brand-danger; | 55 | background: #0088cc; |
56 | border-radius: 20px; | 56 | border-radius: 20px; |
57 | bottom: 8px; | 57 | bottom: 8px; |
58 | color: #FFF; | 58 | color: #FFF; |
@@ -65,7 +65,10 @@ | |||
65 | position: absolute; | 65 | position: absolute; |
66 | right: 8px; | 66 | right: 8px; |
67 | 67 | ||
68 | &.is-indirect { padding-top: 0; } | 68 | &.is-indirect { |
69 | padding-top: 0; | ||
70 | background: #0088cc; | ||
71 | } | ||
69 | &.hibernating { | 72 | &.hibernating { |
70 | padding-top: 0; | 73 | padding-top: 0; |
71 | background: $theme-gray; | 74 | background: $theme-gray; |
@@ -92,7 +95,10 @@ | |||
92 | right: 8px; | 95 | right: 8px; |
93 | width: 17px; | 96 | width: 17px; |
94 | 97 | ||
95 | &.is-indirect { padding-top: 0; } | 98 | &.is-indirect { |
99 | padding-top: 0; | ||
100 | background: #0088cc; | ||
101 | } | ||
96 | } | 102 | } |
97 | 103 | ||
98 | &.is-reordering { z-index: 99999; } | 104 | &.is-reordering { z-index: 99999; } |