Skip to content

Commit 74e0b08

Browse files
apqxapqx
committed
Add Snackbar component and integrate theme toggle notifications
1 parent ae11a61 commit 74e0b08

File tree

13 files changed

+192
-43
lines changed

13 files changed

+192
-43
lines changed

‎_includes/aside.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,5 @@
5151
</div>
5252
</aside>
5353
<div class="mdc-drawer-scrim"></div>
54-
<div id="dialog_container"></div>
54+
<div id="dialog_container"></div>
55+
<div id="snackbar_container"></div>

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
topbar-title: ʕ•ᴥ•ʔ
66
description: 旅居杭州的九五后昆虫，野生散养攻城狮，“十分”“业余”摄影Fans。
77
share-description: 昆虫，野生散养攻城狮，“十分”“业余”摄影Fans。
8-
preloadImageJpg: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/index_original_thumb.jpg
8+
preloadImageJpg: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/index_hangzhou_thumb.jpg
99
---
1010

1111
<section class="mdc-card index-top-card drawer-trigger card-fade-in">
12-
<img src="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/index_original_thumb.jpg"
12+
<img src="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/index_hangzhou_thumb.jpg"
1313
class="index-top-cover image-height-animation" alt="杭州" />
1414
<div class="index-top-card-container">
1515
<p class="index-top-card-text font-handwritten-index font-no-change">久在樊笼里，复得返自然</p>

‎npm/dist/blog-post-v2.0.0.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm/dist/blog-scaffold-v2.0.0.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm/dist/blog-scaffold-v2.0.0.js

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm/package-lock.json

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@material/linear-progress": "^14.0.0",
2121
"@material/list": "^14.0.0",
2222
"@material/ripple": "^14.0.0",
23+
"@material/snackbar": "^14.0.0",
2324
"@material/switch": "^14.0.0",
2425
"@material/textfield": "^14.0.0",
2526
"@material/theme": "^14.0.0",

‎npm/src/component/react/Snackbar.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@use "../theme" as blogTheme;
2+
@use "@material/snackbar";
3+
@use "@material/snackbar/mdc-snackbar";
4+
5+
.mdc-snackbar {
6+
@include snackbar.elevation(0);
7+
margin-top: 0rem;
8+
margin-bottom: 0rem;
9+
bottom: 1.3rem;
10+
}
11+
12+
.mdc-snackbar__surface {
13+
// 位置与fab中心对齐
14+
padding-left: 0;
15+
padding-right: 0;
16+
min-width: 0;
17+
18+
background-color: var(--mdc-theme-secondary);
19+
backdrop-filter: blur(10px);
20+
-webkit-backdrop-filter: blur(10px);
21+
}
22+
23+
.mdc-snackbar__label {
24+
font-family: blogTheme.$text-font-xlwk;
25+
color: var(--mdc-theme-on-surface);
26+
padding-left: 1rem;
27+
padding-right: 1rem;
28+
}
29+
30+
@media(min-width: blogTheme.$screen-middle-min-width) {
31+
.mdc-snackbar {
32+
bottom: 1.8rem;
33+
}
34+
}

‎npm/src/component/react/Snackbar.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import "./Snackbar.scss";
2+
import React from "react";
3+
import ReactDOM from "react-dom";
4+
import { MDCSnackbar } from '@material/snackbar';
5+
import { createRoot, Root } from "react-dom/client";
6+
import { consoleError } from "../../util/log";
7+
8+
interface props {
9+
text: string
10+
}
11+
12+
export class Snackbar extends React.Component<props, any> {
13+
snackbar: MDCSnackbar | null = null
14+
15+
componentDidMount(): void {
16+
const rootE = ReactDOM.findDOMNode(this) as Element
17+
this.snackbar = new MDCSnackbar(rootE)
18+
// 自动关闭时间
19+
// this.snackbar.timeoutMs = -1
20+
this.snackbar.open()
21+
}
22+
23+
componentDidUpdate(prevProps: Readonly<props>, prevState: Readonly<any>, snapshot?: any): void {
24+
this.snackbar?.open();
25+
}
26+
27+
render() {
28+
return (
29+
<aside className="mdc-snackbar">
30+
<div className="mdc-snackbar__surface" role="status" aria-relevant="additions">
31+
<div className="mdc-snackbar__label" aria-atomic="false">
32+
<span>{this.props.text}</span>
33+
</div>
34+
</div>
35+
</aside>
36+
)
37+
}
38+
}
39+
40+
var root: Root | null = null
41+
42+
export function showSnackbar(_text: string) {
43+
// 如果此时html还未加载完成，确实可能出现为null的情况
44+
if (document.readyState === "loading") return
45+
if (root == null) {
46+
const snackbarContainerE = document.querySelector("#snackbar_container")
47+
if (snackbarContainerE == null) {
48+
consoleError("Snackbar container not found")
49+
return
50+
}
51+
root = createRoot(snackbarContainerE)
52+
}
53+
root.render(
54+
<Snackbar text={_text} />
55+
)
56+
}

‎npm/src/component/theme.ts

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { isChrome, isMobileOrTablet, isSafari, toggleClassWithEnable } from "../util/tools";
22
import { consoleDebug } from "../util/log";
3-
import { localRepository } from "../repository/LocalRepository";
3+
import { LocalRepository, localRepository } from "../repository/LocalRepository";
44
import { iconToggleTheme, toggleTopbarGlass } from "./topbar";
5+
import { showSnackbar } from "./react/Snackbar";
56

67
export const darkClass = "dark"
78

@@ -100,16 +101,38 @@ export function setMetaThemeColor(color: string | null) {
100101
* 切换主题
101102
*/
102103
export function toggleTheme(saveUserSetting: boolean) {
103-
const bodyE = document.body
104-
const currentDark = bodyE.classList.contains(darkClass)
105-
if (currentDark) {
106-
showThemeDark(false)
107-
if (saveUserSetting)
108-
saveTheme(localRepository!!.VALUE_THEME_LIGHT)
109-
} else {
110-
showThemeDark(true)
111-
if (saveUserSetting)
112-
saveTheme(localRepository!!.VALUE_THEME_DARK)
104+
const themeArray = [localRepository!!.VALUE_THEME_AUTO, localRepository!!.VALUE_THEME_DARK, localRepository!!.VALUE_THEME_LIGHT]
105+
const currentTheme = localRepository!!.getTheme() ?? localRepository!!.VALUE_THEME_AUTO
106+
const currentThemeIndex = themeArray.indexOf(currentTheme)
107+
const nextThemeIndex = (currentThemeIndex + 1) % themeArray.length
108+
const nextTheme = themeArray[nextThemeIndex]
109+
consoleDebug("Toggle theme, current = " + currentTheme + ", next = " + nextTheme)
110+
111+
switch (nextTheme) {
112+
case localRepository!!.VALUE_THEME_AUTO: {
113+
applySystemTheme()
114+
showSnackbar("主题跟随系统")
115+
break
116+
}
117+
case localRepository!!.VALUE_THEME_DARK: {
118+
showThemeDark(true)
119+
showSnackbar("已切换到暗色主题")
120+
break
121+
}
122+
case localRepository!!.VALUE_THEME_LIGHT: {
123+
showThemeDark(false)
124+
showSnackbar("已切换到亮色主题")
125+
break
126+
}
127+
default: {
128+
// 默认使用系统主题
129+
applySystemTheme()
130+
showSnackbar("主题跟随系统")
131+
break
132+
}
133+
}
134+
if (saveUserSetting) {
135+
saveTheme(nextTheme)
113136
}
114137
}
115138

@@ -135,15 +158,11 @@ export function saveTheme(theme: string) {
135158
}
136159

137160
export function checkUserTheme() {
161+
// 默认情况下 savedTheme 为 null
138162
const savedTheme = localRepository!!.getTheme()
139163
switch (savedTheme) {
140164
case localRepository!!.VALUE_THEME_AUTO: {
141-
const sysDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
142-
if (sysDarkTheme) {
143-
showThemeDark(true)
144-
} else {
145-
showThemeDark(false)
146-
}
165+
applySystemTheme();
147166
break
148167
}
149168
case localRepository!!.VALUE_THEME_DARK: {
@@ -155,9 +174,20 @@ export function checkUserTheme() {
155174
break
156175
}
157176
default: {
158-
// 默认设置为亮色主题
159-
showThemeDark(false);
177+
// 默认使用系统主题
178+
applySystemTheme();
179+
saveTheme(localRepository!!.VALUE_THEME_AUTO);
160180
break
161181
}
162182
}
163183
}
184+
185+
function applySystemTheme() {
186+
const sysDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
187+
if (sysDarkTheme) {
188+
showThemeDark(true);
189+
} else {
190+
showThemeDark(false);
191+
}
192+
}
193+

0 commit comments

Comments
 (0)