mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 05:09:03 +00:00
cherry cola adjustments + tab button hover fixes + closing tabs shouldn't create weird broken things anymore
This commit is contained in:
parent
f25e9f7f98
commit
cf4d8e63ee
GPG Key ID:
C7A48B7846AA706D
@ -1,14 +1,15 @@
|
||||
/*
|
||||
* cherry cola
|
||||
* (c) 2020 Alexa Baldon (https://github.com/runargs)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
|
||||
:root {
|
||||
--cola-main: #180915;
|
||||
--cola-sec: #1d0919;
|
||||
--cola-tet: #492341;
|
||||
--cola-info: #9b6890;
|
||||
--cola-accent: #bf799b;
|
||||
--cola-gray: #8a8a8a;
|
||||
--cola-brown: #755241;
|
||||
@ -24,11 +25,11 @@
|
||||
--theme_dark--main: var(--cola-main);
|
||||
--theme_dark--sidebar: var(--cola-sec);
|
||||
--theme_dark--overlay: var(--cola-sec);
|
||||
--theme_dark--dragarea: var(--cola-tet);
|
||||
--theme_dark--dragarea: #210a1c;
|
||||
--theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px,
|
||||
rgba(20, 0, 16, 0.2) 0px 2px 4px;
|
||||
rgba(20, 0, 16, 0.2) 0px 2px 4px;
|
||||
--theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px,
|
||||
rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
|
||||
rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
|
||||
|
||||
/* Scrollbar */
|
||||
--theme_dark--scrollbar: var(--cola-sec);
|
||||
@ -59,8 +60,8 @@
|
||||
|
||||
/* Default text colors */
|
||||
--theme_dark--text: #ffffff;
|
||||
--theme_dark--text_ui: var(--cola-gray);
|
||||
--theme_dark--text_ui_info: var(--cola-gray);
|
||||
--theme_dark--text_ui: var(--cola-info);
|
||||
--theme_dark--text_ui_info: var(--cola-info);
|
||||
|
||||
/* Text color options */
|
||||
--theme_dark--text_gray: var(--cola-gray);
|
||||
@ -140,12 +141,10 @@
|
||||
--theme_dark--code_number: var(--theme_dark--text_purple);
|
||||
--theme_dark--code_string: var(--theme_dark--text_orange);
|
||||
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
|
||||
|
||||
}
|
||||
|
||||
/* Quotations as serif */
|
||||
.notion-dark-theme
|
||||
.notion-quote-block{
|
||||
.notion-dark-theme .notion-quote-block {
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
background-color: var(--cola-sec);
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,19 +83,19 @@ module.exports = (store) => {
|
||||
|
||||
(async () => {
|
||||
for (let btn of buttons.insert) {
|
||||
buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
|
||||
buttons.element.innerHTML += `<button class="window-button btn-${btn}">${await buttons.icons[
|
||||
btn
|
||||
]()}</button>`;
|
||||
}
|
||||
for (let btn of buttons.insert) {
|
||||
buttons.element.querySelector(`.window-button#btn-${btn}`).onclick =
|
||||
buttons.element.querySelector(`.window-button.btn-${btn}`).onclick =
|
||||
buttons.actions[btn];
|
||||
}
|
||||
if (store().frameless && !store().tiling_mode && !is_mac) {
|
||||
window.addEventListener('resize', (event) => {
|
||||
Promise.resolve(buttons.icons.maximize()).then((icon) => {
|
||||
icon = icon.toString();
|
||||
const el = buttons.element.querySelector('#btn-maximize');
|
||||
const el = buttons.element.querySelector('.btn-maximize');
|
||||
if (el.innerHTML != icon) el.innerHTML = icon;
|
||||
});
|
||||
});
|
||||
|
||||
@ -37,9 +37,7 @@
|
||||
background: var(--theme--interactive_hover);
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
|
||||
}
|
||||
.window-button#btn-close:hover {
|
||||
.window-button.btn-close:hover {
|
||||
background: var(--theme--button_close);
|
||||
}
|
||||
.window-button#btn-close:hover svg line {
|
||||
stroke: var(--theme--button_close-fill);
|
||||
color: var(--theme--button_close-fill);
|
||||
}
|
||||
|
||||
@ -95,7 +95,7 @@ body,
|
||||
color: var(--theme--text);
|
||||
-webkit-app-region: no-drag;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
#titlebar .window-buttons-area {
|
||||
margin: 0.5em 0.55em 0.5em auto;
|
||||
@ -132,6 +132,7 @@ body,
|
||||
}
|
||||
#tabs .tab:not(.new) span:not(.close) {
|
||||
width: 8.5em;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -166,9 +167,15 @@ body,
|
||||
opacity: 1;
|
||||
}
|
||||
#tabs .tab .close:hover,
|
||||
#tabs .tab.new span:hover {
|
||||
#tabs .tab.new span:hover,
|
||||
#titlebar .window-button:hover {
|
||||
border-radius: 4px;
|
||||
background: var(--theme--table-border);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
|
||||
}
|
||||
#titlebar .window-button.btn-close:hover {
|
||||
background: var(--theme--button_close);
|
||||
color: var(--theme--button_close-fill);
|
||||
}
|
||||
#tabs .tab.dragged-over {
|
||||
box-shadow: inset 4px 0 0 0 var(--theme--selected);
|
||||
|
||||
@ -223,7 +223,7 @@ module.exports = (store, __exports) => {
|
||||
const list = new Map(this.state.tabs);
|
||||
while (this.state.tabs.get(id) && this.state.tabs.get(id).open) id++;
|
||||
list.delete(id);
|
||||
this.openTab(id, { state: list, load: url || true });
|
||||
return this.openTab(id, { state: list, load: url || true });
|
||||
}
|
||||
openTab(
|
||||
id,
|
||||
@ -237,64 +237,80 @@ module.exports = (store, __exports) => {
|
||||
load: false,
|
||||
}
|
||||
) {
|
||||
if (!id && id !== 0) {
|
||||
if (state.get(this.views.current.id).open) return;
|
||||
const currentIndex = [...state].findIndex(
|
||||
([id, { title, open }]) => id === this.views.current.id
|
||||
);
|
||||
id = (
|
||||
[...state].find(
|
||||
return new Promise((res, rej) => {
|
||||
if (!id && id !== 0) {
|
||||
if (state.get(this.views.current.id).open) return res(true);
|
||||
const currentIndex = [...state].findIndex(
|
||||
([id, { title, open }]) => id === this.views.current.id
|
||||
);
|
||||
id = ([...state].find(
|
||||
([id, { title, open }], tabIndex) =>
|
||||
open && tabIndex > currentIndex
|
||||
) || [...state].find(([id, { title, open }]) => open)
|
||||
).title;
|
||||
}
|
||||
const current_src = this.views.current.$el().src;
|
||||
this.views.current.id = id;
|
||||
this.setState(
|
||||
{
|
||||
tabs: state.set(id, {
|
||||
title: state.get(id) ? state.get(id).title : 'notion.so',
|
||||
open: true,
|
||||
}),
|
||||
slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
|
||||
slideOut: slideOut,
|
||||
},
|
||||
async () => {
|
||||
this.focusTab();
|
||||
if (load) {
|
||||
await new Promise((res, rej) => {
|
||||
let attempt;
|
||||
attempt = setInterval(() => {
|
||||
if (!document.body.contains(this.views.html[id])) return;
|
||||
clearInterval(attempt);
|
||||
res();
|
||||
}, 50);
|
||||
});
|
||||
this.views.html[id].style.opacity = '0';
|
||||
let unhide;
|
||||
unhide = () => {
|
||||
this.views.html[id].style.opacity = '';
|
||||
this.views.html[id].removeEventListener(
|
||||
'did-stop-loading',
|
||||
unhide
|
||||
);
|
||||
};
|
||||
this.views.html[id].addEventListener('did-stop-loading', unhide);
|
||||
this.views.html[id].loadURL(
|
||||
typeof load === 'string'
|
||||
? load
|
||||
: store().default_page
|
||||
? idToNotionURL(store().default_page)
|
||||
: current_src
|
||||
);
|
||||
// this.views.html[id].getWebContents().openDevTools();
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.setState({ slideIn: new Set(), slideOut: new Set() });
|
||||
}, 150);
|
||||
) || [...state].find(([id, { title, open }]) => open))[0];
|
||||
}
|
||||
);
|
||||
const current_src = this.views.current.$el().src;
|
||||
this.views.current.id = id;
|
||||
this.setState(
|
||||
{
|
||||
tabs: state.set(id, {
|
||||
title: state.get(id) ? state.get(id).title : 'notion.so',
|
||||
open: true,
|
||||
}),
|
||||
slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
|
||||
slideOut: slideOut,
|
||||
},
|
||||
async () => {
|
||||
this.focusTab();
|
||||
new Promise((resolve, reject) => {
|
||||
let attempt,
|
||||
clear = () => {
|
||||
clearInterval(attempt);
|
||||
return true;
|
||||
};
|
||||
attempt = setInterval(() => {
|
||||
if (this.views.current.id !== id) return clear() && reject();
|
||||
if (document.body.contains(this.views.html[id]))
|
||||
return clear() && resolve();
|
||||
}, 50);
|
||||
})
|
||||
.then(() => {
|
||||
if (load) {
|
||||
this.views.html[id].style.opacity = '0';
|
||||
let unhide;
|
||||
unhide = () => {
|
||||
this.views.html[id].style.opacity = '';
|
||||
this.views.html[id].removeEventListener(
|
||||
'did-stop-loading',
|
||||
unhide
|
||||
);
|
||||
};
|
||||
this.views.html[id].addEventListener(
|
||||
'did-stop-loading',
|
||||
unhide
|
||||
);
|
||||
this.views.html[id].loadURL(
|
||||
typeof load === 'string'
|
||||
? load
|
||||
: store().default_page
|
||||
? idToNotionURL(store().default_page)
|
||||
: current_src
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// nothing
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.setState(
|
||||
{ slideIn: new Set(), slideOut: new Set() },
|
||||
() => res(true)
|
||||
);
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
closeTab(id) {
|
||||
if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
|
||||
@ -302,7 +318,7 @@ module.exports = (store, __exports) => {
|
||||
list.set(id, { ...list.get(id), open: false });
|
||||
if (![...list].filter(([id, { title, open }]) => open).length)
|
||||
return electron.remote.getCurrentWindow().close();
|
||||
this.openTab(
|
||||
return this.openTab(
|
||||
this.views.current.id === id ? null : this.views.current.id,
|
||||
{ state: list, slideOut: this.state.slideOut.add(id) }
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user