Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FIX] Sidebar and badges #1125

Merged
merged 17 commits into from
Mar 14, 2019
Merged

[FIX] Sidebar and badges #1125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7f973b9
Split landing and sidebar code
tassoevan Feb 27, 2019
8fce015
Update primary-background-color
tassoevan Feb 27, 2019
34dbe5f
Isolate sidebar styles
tassoevan Feb 27, 2019
3682ba3
Extract events from sidebar and webview modules
tassoevan Feb 27, 2019
11e91cd
Expose all sidebar events
tassoevan Feb 27, 2019
cdecea3
Remove sidebar visibility preference from sidebar module
tassoevan Feb 28, 2019
b6a6fd6
Split state handling and rendering in sidebar module
tassoevan Feb 28, 2019
7194180
Update sidebar styles
tassoevan Mar 1, 2019
491d8b4
Fix sidebar style preload
tassoevan Mar 1, 2019
ff52a84
Add small fixes to sidebar
tassoevan Mar 1, 2019
f4560da
Show landing page on remove server
tassoevan Mar 1, 2019
44eee94
Fix stylelint errors
tassoevan Mar 6, 2019
0247087
Make stylelint ignore webview tag
tassoevan Mar 6, 2019
1a4fb6c
Merge branch 'develop' into fix/sidebar
tassoevan Mar 7, 2019
f6ad6dc
Add smooth transitions for webviews
tassoevan Mar 7, 2019
596c284
Merge branch 'develop' into fix/sidebar
tassoevan Mar 14, 2019
76c72b9
Add padding to sidebar
tassoevan Mar 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
"selector-pseudo-element-colon-notation": "double",
"selector-pseudo-element-no-unknown": true,
"selector-type-case": "lower",
"selector-type-no-unknown": true,
"selector-type-no-unknown": [true, { "ignoreTypes": ["webview"] }],
"shorthand-property-no-redundant-values": true,
"string-no-newline": true,
"unit-case": "lower",
Expand Down
29 changes: 16 additions & 13 deletions src/background/dock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,20 @@ import { getMainWindow } from './mainWindow';
import { getTrayIconImage, getAppIconImage } from './icon';


const getBadgeText = ({ badge: { title, count } }) => {
if (title === '•') {
const getBadgeText = ({ badge }) => {
if (badge === '•') {
return '•';
} else if (count > 0) {
return String(count);
}

if (Number.isInteger(badge)) {
return String(badge);
}

return '';
};

let state = {
badge: {
title: '',
count: 0,
},
badge: null,
hasTrayIcon: false,
};

Expand All @@ -28,22 +29,24 @@ const destroy = () => {

const update = async(previousState) => {
const mainWindow = await getMainWindow();
const badgeText = getBadgeText(state);

if (process.platform === 'darwin') {
app.dock.setBadge(badgeText || '');
if (state.badge.count > 0 && previousState.badge.count === 0) {
app.dock.setBadge(getBadgeText(state));
const count = Number.isInteger(state.badge) ? state.badge : 0;
const previousCount = Number.isInteger(previousState.badge) ? state.badge : 0;
if (count > 0 && previousCount === 0) {
app.dock.bounce();
}
}

if (process.platform === 'linux' || process.platform === 'win32') {
const image = state.hasTrayIcon ? getAppIconImage() : getTrayIconImage(state.badge);
const image = state.hasTrayIcon ? getAppIconImage() : getTrayIconImage({ badge: state.badge });
mainWindow.setIcon(image);
}

if (!mainWindow.isFocused()) {
mainWindow.flashFrame(state.badge.count > 0);
const count = Number.isInteger(state.badge) ? state.badge : 0;
mainWindow.flashFrame(count > 0);
}

instance.emit('update');
Expand Down
24 changes: 13 additions & 11 deletions src/background/icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,17 @@ function getTrayIconSet({ platform, dark }) {
return platform;
}

function getTrayIconName({ title, count, platform }) {
function getTrayIconName({ badge, platform }) {
if (platform === 'darwin') {
return (title || count) ? 'notification' : 'default';
return badge ? 'notification' : 'default';
}

if (title === '•') {
if (badge === '•') {
return 'notification-dot';
} else if (count > 0) {
return count > 9 ? 'notification-plus-9' : `notification-${ String(count) }`;
}

if (Number.isInteger(badge)) {
return badge > 9 ? 'notification-plus-9' : `notification-${ String(badge) }`;
}

return 'default';
Expand All @@ -35,7 +37,7 @@ export function getAppIconPath() {
return 'public/images/icon.png';
}

export function getTrayIconPath({ title, count, platform, dark } = {}) {
export function getTrayIconPath({ badge, platform, dark } = {}) {
if (typeof platform === 'undefined') {
platform = process.platform;
}
Expand All @@ -44,7 +46,7 @@ export function getTrayIconPath({ title, count, platform, dark } = {}) {
dark = systemPreferences.isDarkMode();
}

const params = { title, count, platform, dark };
const params = { badge, platform, dark };
const iconset = getTrayIconSet(params);
const name = getTrayIconName(params);
const extension = getTrayIconExtension(params);
Expand All @@ -55,15 +57,15 @@ export function getAppIconImage() {
return nativeImage.createFromPath(`${ __dirname }/${ getAppIconPath() }`);
}

export function getTrayIconImage({ title, count, platform, dark } = {}) {
return nativeImage.createFromPath(`${ __dirname }/${ getTrayIconPath({ title, count, platform, dark }) }`);
export function getTrayIconImage({ badge, platform, dark } = {}) {
return nativeImage.createFromPath(`${ __dirname }/${ getTrayIconPath({ badge, platform, dark }) }`);
}

export function getIconImage({ badge: { title, count } }) {
export function getIconImage({ badge }) {
const iconsetsPath = `${ __dirname }/public/images/tray`;
const { platform } = process;
const dark = systemPreferences.isDarkMode();
const params = { title, count, platform, dark };
const params = { badge, platform, dark };
const iconset = getTrayIconSet(params);
const name = getTrayIconName(params);
const extension = getTrayIconExtension(params);
Expand Down
88 changes: 44 additions & 44 deletions src/background/icon.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,65 +15,65 @@ describe('icon', () => {
it('darwin', () => {

expect(getTrayIconPath({ platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/default.png');
expect(getTrayIconPath({ title: '•', platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 1, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 2, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 3, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 4, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 5, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 6, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 7, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 8, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 9, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ count: 10, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: '•', platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 1, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 2, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 3, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 4, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 5, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 6, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 7, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 8, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 9, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
expect(getTrayIconPath({ badge: 10, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
});

it('darwin-dark', () => {

expect(getTrayIconPath({ platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/default.png');
expect(getTrayIconPath({ title: '•', platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 1, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 2, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 3, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 4, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 5, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 6, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 7, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 8, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 9, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ count: 10, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: '•', platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 1, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 2, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 3, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 4, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 5, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 6, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 7, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 8, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 9, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
expect(getTrayIconPath({ badge: 10, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
});

it('linux', () => {

expect(getTrayIconPath({ platform: 'linux' })).to.be.equals('public/images/tray/linux/default.png');
expect(getTrayIconPath({ title: '•', platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-dot.png');
expect(getTrayIconPath({ count: 1, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-1.png');
expect(getTrayIconPath({ count: 2, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-2.png');
expect(getTrayIconPath({ count: 3, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-3.png');
expect(getTrayIconPath({ count: 4, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-4.png');
expect(getTrayIconPath({ count: 5, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-5.png');
expect(getTrayIconPath({ count: 6, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-6.png');
expect(getTrayIconPath({ count: 7, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-7.png');
expect(getTrayIconPath({ count: 8, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-8.png');
expect(getTrayIconPath({ count: 9, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-9.png');
expect(getTrayIconPath({ count: 10, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-plus-9.png');
expect(getTrayIconPath({ badge: '•', platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-dot.png');
expect(getTrayIconPath({ badge: 1, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-1.png');
expect(getTrayIconPath({ badge: 2, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-2.png');
expect(getTrayIconPath({ badge: 3, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-3.png');
expect(getTrayIconPath({ badge: 4, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-4.png');
expect(getTrayIconPath({ badge: 5, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-5.png');
expect(getTrayIconPath({ badge: 6, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-6.png');
expect(getTrayIconPath({ badge: 7, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-7.png');
expect(getTrayIconPath({ badge: 8, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-8.png');
expect(getTrayIconPath({ badge: 9, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-9.png');
expect(getTrayIconPath({ badge: 10, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-plus-9.png');
});

it('win32', () => {

expect(getTrayIconPath({ platform: 'win32' })).to.be.equals('public/images/tray/win32/default.ico');
expect(getTrayIconPath({ title: '•', platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-dot.ico');
expect(getTrayIconPath({ count: 1, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-1.ico');
expect(getTrayIconPath({ count: 2, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-2.ico');
expect(getTrayIconPath({ count: 3, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-3.ico');
expect(getTrayIconPath({ count: 4, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-4.ico');
expect(getTrayIconPath({ count: 5, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-5.ico');
expect(getTrayIconPath({ count: 6, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-6.ico');
expect(getTrayIconPath({ count: 7, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-7.ico');
expect(getTrayIconPath({ count: 8, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-8.ico');
expect(getTrayIconPath({ count: 9, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-9.ico');
expect(getTrayIconPath({ count: 10, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-plus-9.ico');
expect(getTrayIconPath({ badge: '•', platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-dot.ico');
expect(getTrayIconPath({ badge: 1, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-1.ico');
expect(getTrayIconPath({ badge: 2, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-2.ico');
expect(getTrayIconPath({ badge: 3, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-3.ico');
expect(getTrayIconPath({ badge: 4, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-4.ico');
expect(getTrayIconPath({ badge: 5, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-5.ico');
expect(getTrayIconPath({ badge: 6, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-6.ico');
expect(getTrayIconPath({ badge: 7, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-7.ico');
expect(getTrayIconPath({ badge: 8, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-8.ico');
expect(getTrayIconPath({ badge: 9, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-9.ico');
expect(getTrayIconPath({ badge: 10, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-plus-9.ico');
});
});
});
Expand Down
19 changes: 8 additions & 11 deletions src/background/tray.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ import i18n from '../i18n';
import { getTrayIconImage } from './icon';


const getIconTitle = ({ badge: { title, count } }) => ((count > 0) ? title : '');
const getIconTitle = ({ badge }) => (Number.isInteger(badge) ? String(badge) : '');

const getIconTooltip = ({ badge: { title, count } }) => {
const getIconTooltip = ({ badge }) => {
const appName = app.getName();

if (title === '•') {
if (badge === '•') {
return i18n.__('tray.tooltip.unreadMessage', { appName });
}

if (count > 0) {
return i18n.__('tray.tooltip.unreadMention', { appName, count });
if (Number.isInteger(badge)) {
return i18n.__('tray.tooltip.unreadMention', { appName, count: badge });
}

return i18n.__('tray.tooltip.noUnreadMessage', { appName });
Expand All @@ -34,10 +34,7 @@ const createContextMenuTemplate = ({ isMainWindowVisible }, events) => ([
let trayIcon = null;

let state = {
badge: {
title: '',
count: 0,
},
badge: null,
isMainWindowVisible: true,
showIcon: true,
};
Expand All @@ -47,7 +44,7 @@ const instance = new (class Tray extends EventEmitter {});
let darwinThemeSubscriberId = null;

const createIcon = () => {
const image = getTrayIconImage(state.badge);
const image = getTrayIconImage({ badge: state.badge });

if (trayIcon) {
trayIcon.setImage(image);
Expand All @@ -58,7 +55,7 @@ const createIcon = () => {

if (process.platform === 'darwin') {
darwinThemeSubscriberId = systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
trayIcon.setImage(getTrayIconImage(state.badge));
trayIcon.setImage(getTrayIconImage({ badge: state.badge }));
});
}

Expand Down
43 changes: 33 additions & 10 deletions src/preload/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,49 @@
import { ipcRenderer } from 'electron';


const requestSidebarColor = function pollSidebarColor() {
function getStylesFromSidebar(sidebar) {
const { color, background } = window.getComputedStyle(sidebar);
const sidebarItem = sidebar.querySelector('.sidebar-item');
const itemColor = sidebarItem && window.getComputedStyle(sidebarItem).color;
ipcRenderer.sendToHost('sidebar-style', { color: itemColor || color, background });
}

function getStylesFromPage(fullpage) {
const { color, background } = window.getComputedStyle(fullpage);
ipcRenderer.sendToHost('sidebar-style', { color, background });
}

function createStylesObserver(element, getStylesFrom) {
const observer = new MutationObserver(() => {
getStylesFrom(element);
});

observer.observe(element, { attributes: true });
getStylesFrom(element);

return observer;
}

let observer;

function requestSidebarStyle() {
const sidebar = document.querySelector('.sidebar');
if (sidebar) {
const { color, background } = window.getComputedStyle(sidebar);
const sidebarItem = sidebar.querySelector('.sidebar-item');
const itemColor = sidebarItem && window.getComputedStyle(sidebarItem).color;
ipcRenderer.sendToHost('sidebar-background', { color: itemColor || color, background });
observer && observer.disconnect();
observer = createStylesObserver(sidebar, getStylesFromSidebar);
return;
}

const fullpage = document.querySelector('.full-page');
if (fullpage) {
const { color, background } = window.getComputedStyle(fullpage);
ipcRenderer.sendToHost('sidebar-background', { color, background });
observer = createStylesObserver(fullpage, getStylesFromPage);
setTimeout(requestSidebarStyle, 1000);
return;
}

requestAnimationFrame(pollSidebarColor);
};
requestAnimationFrame(requestSidebarStyle);
}

export default () => {
ipcRenderer.on('request-sidebar-color', requestSidebarColor);
window.addEventListener('load', requestSidebarStyle);
};
Loading