Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-09-01 19:49:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: make splash screen & app window follow theme

Browse Source
This commit is contained in:
thecodrr
2021-08-02 20:44:56 +05:00
parent ee7b389acd
commit 362745f31c
10 changed files with 122 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/desktop/electron.js
View File

@@ -4,6 +4,7 @@ const os = require("os");
const { isDevelopment } = require("./utils");
const { registerProtocol, URL } = require("./protocol");
const { configureAutoUpdater } = require("./autoupdate");
const { getTheme, getBackgroundColor } = require("./theme");
require("./ipc/index.js");
try {
require("electron-reloader")(module);
@@ -13,6 +14,7 @@ let mainWindow;
async function createWindow() {
mainWindow = new BrowserWindow({
backgroundColor: getBackgroundColor(),
autoHideMenuBar: true,
icon: path.join(
__dirname,

12
apps/web/desktop/ipc/actions/changeAppTheme.js Normal file
View File

@@ -0,0 +1,12 @@
const { setTheme, getBackgroundColor } = require("../../theme");
module.exports = {
type: "changeAppTheme",
action: async (args) => {
console.log("args", args);
if (!global.win) return;
const { theme } = args;
await setTheme(theme);
global.win.setBackgroundColor(getBackgroundColor());
},
};

1
apps/web/desktop/package.json
View File

@@ -8,6 +8,7 @@
"homepage": "https://notesnook.com/",
"repository": "https://github.com/streetwriters/notesnook",
"dependencies": {
"electron-data-storage": "^1.0.7",
"electron-serve": "^1.1.0",
"electron-updater": "^4.3.8",
"node-fetch": "^2.6.1"

17
apps/web/desktop/theme.js Normal file
View File

@@ -0,0 +1,17 @@
const storage = require("electron-data-storage").default;
function getTheme() {
return storage.getSync("theme") || "light";
}
function setTheme(theme) {
return storage.set("theme", theme);
}
function getBackgroundColor() {
const theme = getTheme();
console.log("THEME", theme);
return theme === "dark" ? "#0f0f0f" : "#fff";
}
module.exports = { getTheme, setTheme, getBackgroundColor };

5
apps/web/desktop/yarn.lock
View File

@@ -803,6 +803,11 @@ electron-builder@^22.11.7:
update-notifier "^5.1.0"
yargs "^17.0.1"
electron-data-storage@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/electron-data-storage/-/electron-data-storage-1.0.7.tgz#983322d44f9af0bb6f5c9cb66eccc291e14ff486"
integrity sha512-dTT1l2DlEk2DqUVgOpaftJLMjRt0AkOGHR9tA2VUUFfs6ORRL+O0JJR93zjQngZCA9U9g/N0VBbsINdZDiVQGg==
electron-is-dev@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/electron-is-dev/-/electron-is-dev-1.2.0.tgz#2e5cea0a1b3ccf1c86f577cee77363ef55deb05e"

60
apps/web/public/index.html
View File

@@ -69,11 +69,34 @@
<meta name="twitter:card" content="summary_large_image" />
<title>Notesnook - Your private note taking space</title>
<script>
const theme = JSON.parse(
window.localStorage.getItem("theme") || '"light"'
);
const root = document.querySelector("html");
root.setAttribute("data-theme", theme);
</script>
<style>
html[data-theme="dark"] {
--bg: #1b1b1b;
--fg: #fff;
--three-bars-bg: #494949;
--gradient-stop-color: #111111;
--n-letter-color: #e1e1e1;
}
html[data-theme="light"] {
--bg: #fff;
--three-bars-bg: #bebebe;
--gradient-stop-color: #fff9f9;
--n-letter-color: #000;
}
#splash svg {
transform: scale(1);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
@@ -87,15 +110,6 @@
transform: scale(0.95);
}
}
code.key {
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.1em 0.5em;
margin: 0 0.2em;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
background-color: #f7f7f7;
}
</style>
<link rel="stylesheet" href="/fonts.css" />
</head>
@@ -107,7 +121,7 @@
<div
id="splash"
style="
background-color: #f0f0f0;
background-color: var(--bg);
height: 100%;
width: 100%;
position: absolute;
@@ -134,7 +148,11 @@
/>
<linearGradient id="a">
<stop offset="0" />
<stop offset="1" stop-color="#fff9f9" stop-opacity="0" />
<stop
offset="1"
stop-color="var(--gradient-stop-color)"
stop-opacity="0"
/>
</linearGradient>
<linearGradient
id="c"
@@ -155,33 +173,25 @@
stroke-width="1.2"
d="M160 205V-35m0 240L18 249m142-44l154 41"
/>
<path d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
<path
fill="var(--n-letter-color)"
d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"
/>
<rect
width="86.1"
height="12.6"
x="185"
y="97"
fill="#bebebe"
fill="var(--three-bars-bg)"
ry="2.3"
transform="skewY(15) scale(.9669 1)"
/>
<path
fill="#bebebe"
fill="var(--three-bars-bg)"
d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
/>
</g>
</svg>
<p align="center" style="font-size: 14px; margin-top: 25px">
Taking too long?
<br />
<span
>Reload the app by pressing <code class="key">Shift</code> +
<code class="key">F5</code></span
>
<br />
<br />
<em>If it still takes too long, please reload your browser.</em>
</p>
</div>
<div id="dialogContainer"></div>
<!--

162
apps/web/src/assets/logo-dark.svg
View File

@@ -1,144 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 339 339"
version="1.1"
id="svg36"
sodipodi:docname="logo-dark.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata
id="metadata40">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#1f1f1f"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="980"
id="namedview38"
showgrid="false"
inkscape:zoom="1.3923304"
inkscape:cx="181.58784"
inkscape:cy="157.12775"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g34" />
<defs
id="defs2" />
<defs
id="defs16">
<linearGradient
id="b">
<stop
offset="0"
stop-color="#fff"
id="stop4" />
<stop
offset="1"
stop-opacity="0"
id="stop6"
style="stop-color:#1f1f1f;stop-opacity:0" />
</linearGradient>
<linearGradient
id="c"
x1="193.9"
x2="198.7"
y1="166.8"
y2="223.3"
gradientTransform="rotate(5 4448 -4204) scale(2.93671)"
gradientUnits="userSpaceOnUse"
xlink:href="#a" />
<linearGradient
id="a">
<stop
offset="0"
stop-color="#fff"
id="stop10" />
<stop
offset="1"
stop-opacity="0"
id="stop12"
style="stop-color:#1f1f1f;stop-opacity:0" />
</linearGradient>
<linearGradient
id="d"
x1="167.8"
x2="281.9"
y1="76.9"
y2="63.2"
gradientTransform="scale(1.50082) rotate(5 310 -1366)"
gradientUnits="userSpaceOnUse"
xlink:href="#b" />
</defs>
<g
transform="translate(0 42)"
id="g34">
<path
fill="url(#c)"
d="M160 205l154 42-141 44-155-42z"
id="path18" />
<path
fill="url(#d)"
d="M160-35v240l154 42 1-253z"
id="path20" />
<g
fill="none"
stroke-width="1.2"
id="g24">
<path
d="M160 205V-35M160 205L18 249M160 205l154 41"
id="path22" />
</g>
<g
style="line-height:1.25;-inkscape-font-specification:'Noto Sans'"
id="g28">
<path
fill="#b3b3b3"
stroke-width=".7"
d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"
aria-label="N"
font-family="Atkinson Hyperlegible"
font-size="136.5"
font-weight="700"
letter-spacing="0"
style="-inkscape-font-specification:'Atkinson Hyperlegible Bold';fill:#eeeeee;fill-opacity:1"
word-spacing="0"
id="path26" />
</g>
<rect
width="86.1"
height="12.6"
x="185"
y="97"
fill="#1a1a1a"
ry="2.3"
transform="skewY(15) scale(.9669 1)"
id="rect30" />
<path
fill="#1a1a1a"
d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zM181 122l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
id="path32" />
</g>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 339 339">
<defs />
<defs>
<linearGradient id="b" x1="193.9" x2="198.7" y1="166.8" y2="223.3" gradientTransform="rotate(5 4448 -4204) scale(2.93671)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
<linearGradient id="a">
<stop offset="0" />
<stop offset="1" stop-color="#111111" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1="167.8" x2="270.6" y1="76.9" y2="64.2" gradientTransform="rotate(5 465 -2050) scale(1.50082)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
</defs>
<g transform="translate(0 42)">
<path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
<path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
<path fill="none" stroke-width="1.2" d="M160 205V-35m0 240L18 249m142-44l154 41" />
<path fill="#e1e1e1" d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
<rect width="86.1" height="12.6" x="185" y="97" fill="#494949" ry="2.3" transform="skewY(15) scale(.9669 1)" />
<path fill="#494949" d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

74
apps/web/src/assets/logo.svg
View File

@@ -1,56 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 339 339"
>
<defs />
<defs>
<linearGradient
id="b"
x1="193.9"
x2="198.7"
y1="166.8"
y2="223.3"
gradientTransform="rotate(5 4448 -4204) scale(2.93671)"
gradientUnits="userSpaceOnUse"
xlink:href="#a"
/>
<linearGradient id="a">
<stop offset="0" />
<stop offset="1" stop-color="#fff9f9" stop-opacity="0" />
</linearGradient>
<linearGradient
id="c"
x1="167.8"
x2="270.6"
y1="76.9"
y2="64.2"
gradientTransform="rotate(5 465 -2050) scale(1.50082)"
gradientUnits="userSpaceOnUse"
xlink:href="#a"
/>
</defs>
<g transform="translate(0 42)">
<path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
<path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
<path
fill="none"
stroke-width="1.2"
d="M160 205V-35m0 240L18 249m142-44l154 41"
/>
<path d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
<rect
width="86.1"
height="12.6"
x="185"
y="97"
fill="#bebebe"
ry="2.3"
transform="skewY(15) scale(.9669 1)"
/>
<path
fill="#bebebe"
d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
/>
</g>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 339 339">
<defs />
<defs>
<linearGradient id="b" x1="193.9" x2="198.7" y1="166.8" y2="223.3" gradientTransform="rotate(5 4448 -4204) scale(2.93671)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
<linearGradient id="a">
<stop offset="0" />
<stop offset="1" stop-color="#fff9f9" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1="167.8" x2="270.6" y1="76.9" y2="64.2" gradientTransform="rotate(5 465 -2050) scale(1.50082)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
</defs>
<g transform="translate(0 42)">
<path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
<path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
<path fill="none" stroke-width="1.2" d="M160 205V-35m0 240L18 249m142-44l154 41" />
<path d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
<rect width="86.1" height="12.6" x="185" y="97" fill="#bebebe" ry="2.3" transform="skewY(15) scale(.9669 1)" />
<path fill="#bebebe" d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

5
apps/web/src/commands/change-app-theme.js Normal file
View File

@@ -0,0 +1,5 @@
import { invokeCommand } from "./index";
export default function changeAppTheme(theme) {
invokeCommand("changeAppTheme", { theme });
}

7
apps/web/src/stores/theme-store.js
View File

@@ -2,13 +2,20 @@ import createStore from "../common/store";
import BaseStore from "./index";
import Config from "../utils/config";
import { getDefaultAccentColor } from "../theme/accents";
import changeAppTheme from "../commands/change-app-theme";
class ThemeStore extends BaseStore {
theme = Config.get("theme", "light");
accent = Config.get("accent", getDefaultAccentColor());
followSystemTheme = Config.get("followSystemTheme", false);
constructor(set, get) {
super(set, get);
changeAppTheme(Config.get("theme", "light"));
}
setTheme = (theme) => {
changeAppTheme(theme);
this.set((state) => (state.theme = theme));
Config.set("theme", theme);
};