Skip to content

Commit

Permalink
Remove topbar animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@apqx
apqx committed Nov 9, 2024
1 parent db115f4 commit cb79c34
Show file tree
Hide file tree
Showing 13 changed files with 113 additions and 107 deletions.
2 changes: 1 addition & 1 deletion _includes/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button" id="topbar_btn_menu">
<i class="material-symbols-rounded-fill mdc-icon-button__icon">menu</i>
</button>
<!-- <span class="mdc-top-app-bar__title">{{ page.title }}</span> -->
<!-- <span class="mdc-top-app-bar__title">{{ page.topbar-title }}</span> -->
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<button class="mdc-top-app-bar__action-item mdc-icon-button" aria-label="Theme" id="topbar_btn_theme"
Expand Down
2 changes: 1 addition & 1 deletion npm/dist/blog-404-v2.0.0.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion npm/dist/blog-index-v2.0.0.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion npm/dist/blog-index-v2.0.0.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion npm/dist/blog-post-v2.0.0.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion npm/dist/blog-scaffold-v2.0.0.css
View file

Large diffs are not rendered by default.

28 changes: 14 additions & 14 deletions npm/dist/blog-scaffold-v2.0.0.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions npm/src/component/react/IndexList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ export class IndexList extends BasePostPaginateShow<BasePostPaginateShowProps> {
{this.state.posts.map((item, index) =>
// 隐藏部分post
// 有时候jekyll生成的path和paginate生成的path不一样，导致item重新加载
!item.pin && !item.hide && <IndexItem key={item.path}
title={item.title} author={item.author} date={item.date} path={item.path} pin={item.pin}
!item.hide && <IndexItem key={item.path}
title={item.title} author={item.author} date={item.date} path={item.path} pin={false}
last={index == this.state.posts.length - 1} />
)}
{(this.state.loading || this.state.loadHint != null) &&
Expand Down
2 changes: 2 additions & 0 deletions npm/src/component/text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ h2 {
h2::before {
content: "# ";
font-size: 0.9em;
color: var(--mdc-theme-on-surface-secondary);
}

h2.h2-mini {
Expand All @@ -50,6 +51,7 @@ h3 {
h3::before {
content: "## ";
font-size: 0.9em;
color: var(--mdc-theme-on-surface-secondary);
}

p {
Expand Down
61 changes: 30 additions & 31 deletions npm/src/component/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,23 @@ $center-card-max-width: 880px;

$ripple-gap-percent: 25%;

// 主色，top-bar背景色
// blur是待透明度的相同颜色
// shadow是阴影颜色
$top-bar: (
bg-light: #c77d70,
bg-blur-light: rgba(163, 37, 12, 0.6),
bg-light: #c57b6b,
bg-blur-light: rgba(172, 66, 44, 0.7),
bg-shadow-light: #a46053,
ink-light: #f5f5f5,
ink-link-light: #ffe0b2,
bg-dark: #9f5d50,
bg-blur-dark: rgba(255, 145, 122, 0.6),
bg-dark: #995a4d,
bg-blur-dark: rgba(214, 124, 105, 0.7),
bg-shadow-dark: #a46053,
ink-dark: #f5f5f5,
ink-link-dark: #ffe0b2,
);
$surface: (
light: #ffffff,
dark: #111111,
);

// 黑配色
// $top-bar: (
Expand All @@ -44,39 +46,36 @@ $top-bar: (
// bg-shadow-light: #a46053,
// ink-light: #f5f5f5,
// ink-link-light: #d29d79,
// bg-dark: #101010,
// bg-blur-dark: rgba(19, 19, 19, 0.7),
// bg-dark: #111111,
// bg-blur-dark: rgba(19, 19, 19, 0.8),
// bg-shadow-dark: #a46053,
// ink-dark: #dcdcdc,
// ink-link-dark: #dea896,
// );

// 黑白配色
$top-bar: (
bg-light: #fdfdfd,
bg-blur-light: rgba(255, 255, 255, 0.7),
bg-shadow-light: #a46053,
ink-light: #333333,
ink-link-light: #80290d,
bg-dark: #101010,
bg-blur-dark: rgba(19, 19, 19, 0.7),
bg-shadow-dark: #a46053,
ink-dark: #dcdcdc,
ink-link-dark: #dea896,
);

$footer-link-color: #ffe0b2;

$surface: (
light: #fdfdfd,
dark: #101010,
);
// $top-bar: (
// bg-light: #fefefe,
// bg-blur-light: rgba(255, 255, 255, 0.8),
// bg-shadow-light: #a46053,
// ink-light: #333333,
// ink-link-light: #80290d,
// bg-dark: #111111,
// bg-blur-dark: rgba(19, 19, 19, 0.8),
// bg-shadow-dark: #a46053,
// ink-dark: #dcdcdc,
// ink-link-dark: #dea896,
// );
// $surface: (
// light: #fefefe,
// dark: #111111,
// );

$background: (
light: color.adjust(map.get($surface, "light"), $lightness: -2.5%),
light-mini-screen: color.adjust(map.get($surface, "light"), $lightness: -2.5%),
dark: color.adjust(map.get($surface, "dark"), $lightness: -2.5%),
dark-mini-screen: color.adjust(map.get($surface, "dark"), $lightness: -2.5%),
light: color.adjust(map.get($surface, "light"), $lightness: -2%),
light-mini-screen: color.adjust(map.get($surface, "light"), $lightness: -2%),
dark: color.adjust(map.get($surface, "dark"), $lightness: -2%),
dark-mini-screen: color.adjust(map.get($surface, "dark"), $lightness: -2%),
);

$text-title: (
Expand Down
35 changes: 13 additions & 22 deletions npm/src/component/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,44 +23,35 @@ export function initTheme() {
});
}

// 黑配色
// const metaThemeColor = {
// light: null,
// lightMobile: null,
// dark: "#101010",
// darkMobile: "#101010"
// }

// const metaThemeColor = {
// light: null,
// lightMobile: "#884e4c",
// dark: "#101010",
// darkMobile: "#101010"
// }
// 黑白配色
const metaThemeColor = {
light: "#fdfdfd",
lightMobile: "#fdfdfd",
dark: "#101010",
darkMobile: "#101010"
light: "#ffffff",
lightMobile: "#ffffff",
lightChrome: "#ffffff",
dark: "#111111",
darkMobile: "#111111",
darkChrome: "#111111",
}

const topbarBlur = {
default: true,
mobile: false,
mobile: true,
}

function checkMetaThemeColor(dark: boolean, show: boolean) {
// 黑配色
if (show) {
if (dark) {
if (isMobileOrTablet()) {
if (isChrome()) {
setMetaThemeColor(metaThemeColor.darkChrome)
} else if (isMobileOrTablet()) {
setMetaThemeColor(metaThemeColor.darkMobile)
} else {
setMetaThemeColor(metaThemeColor.dark)
}
} else {
if (isMobileOrTablet()) {
if (isChrome()) {
setMetaThemeColor(metaThemeColor.lightChrome)
} else if (isMobileOrTablet()) {
setMetaThemeColor(metaThemeColor.lightMobile)
} else {
setMetaThemeColor(metaThemeColor.light)
Expand Down
38 changes: 28 additions & 10 deletions npm/src/component/topbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@use "@material/icon-button/mdc-icon-button";
@use "@material/ripple";
@use "sass:map";
@use "sass:color";

body {
--top-bar-slid-translateY : calc(0px - var(--top-bar-height) - 10px)
Expand All @@ -17,14 +18,17 @@ body {
@include top-app-bar.fill-color(var(--mdc-theme-primary));
// 阴影
@include elevation.elevation(map.get(blogTheme.$top-bar-elevation, "elevation"), map.get(blogTheme.$top-bar-elevation, "shadow-light"), 0);
// i {
// color: var(--mdc-theme-on-surface);
// }
* {
color: var(--mdc-theme-on-primary);
}
// border-bottom: 1px solid color.adjust(map.get(blogTheme.$top-bar, "bg-light"), $lightness: - 3%);
position: absolute;
}

.dark .mdc-top-app-bar {
// 阴影
@include elevation.elevation(map.get(blogTheme.$top-bar-elevation, "elevation"), map.get(blogTheme.$top-bar-elevation, "shadow-dark"), 0);
// border-bottom: 1px solid color.adjust(map.get(blogTheme.$top-bar, "bg-dark"), $lightness: + 3%);
}

.top-app-bar--blur {
Expand All @@ -37,20 +41,34 @@ body {
.mdc-top-app-bar__navigation-icon.mdc-icon-button {
@include ripple.surface;
@include ripple.radius-unbounded(100%);
@include ripple.states-base-color(white);
@include ripple.states-opacities((hover: .0, focus: .0, press: .1));
@include ripple.states-base-color(color.adjust(map.get(blogTheme.$top-bar, "bg-light"), $lightness: + blogTheme.$ripple-gap-percent));
@include ripple.states-opacities((hover: .0, focus: .0, press: .15));
}

.dark .mdc-top-app-bar__action-item.mdc-icon-button,
.dark .mdc-top-app-bar__navigation-icon.mdc-icon-button {
@include ripple.states-base-color(color.adjust(map.get(blogTheme.$top-bar, "bg-dark"), $lightness: + blogTheme.$ripple-gap-percent));
@include ripple.states-opacities((hover: .0, focus: .0, press: .15));
}

.mdc-top-app-bar__row {
height: var(--top-bar-height);
}

// 默认固定，需要时监测滚动启动隐藏、展示动画
// 动态获取topbar高度，设置滚动值
// 添加此类以禁用mdc的滚动隐藏/显示逻辑
.mdc-top-app-bar--fixed {
transform: translateY(0px);
opacity: 1;
transition: all 0.4s ease;
// 默认固定，需要时监测滚动启动隐藏、展示动画
// transform: translateY(0px);
// opacity: 1;
// transition: all 0.4s ease;

// 固定显示在Viewport顶部
position: fixed;
}

// 不固定在顶部
.mdc-top-app-bar--fixed.mdc-top-app-bar--no-sticky {
position: absolute;
}

// 执行中的CSS动画可以被新动画打断，会从当前状态开始过渡，而非从原始状态
Expand Down
40 changes: 18 additions & 22 deletions npm/src/component/topbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,31 +49,27 @@ export function initTopbar() {

export function setFixedTopbar(on: boolean) {
consoleDebug("setFixedTopbar " + on)
if (on) {
toggleShowTopbar(true)
window.removeEventListener("scroll", scrollListener)
window.removeEventListener("animationend", animationDoneListener)
// window.removeEventListener("animationcancel", animationDoneListener)
toggleClassWithEnable(topAppBarE, "top-app-bar--moving-down", false)
toggleClassWithEnable(topAppBarE, "top-app-bar--down", false)
toggleClassWithEnable(topAppBarE, "top-app-bar--moving-up", false)
toggleClassWithEnable(topAppBarE, "top-app-bar--up", false)
} else {
// 非固定topbar监听滚动
// 多次添加同一个监听器是无效的
window.addEventListener("scroll", scrollListener)
window.addEventListener("animationend", animationDoneListener)
// window.addEventListener("animationcancel", animationDoneListener)
}
// 只有桌面浏览器才设置毛玻璃，和theme-color的判断条件一致，毛玻璃和theme-color难以搭配，索性不搭
// if (isMobileOrTablet()) {
// // 移动设备会设置theme-color，不启用毛玻璃
// 监听滚动，平滑隐藏/显示
// if (on) {
// toggleShowTopbar(true)
// window.removeEventListener("scroll", scrollListener)
// window.removeEventListener("animationend", animationDoneListener)
// toggleClassWithEnable(topAppBarE, "top-app-bar--moving-down", false)
// toggleClassWithEnable(topAppBarE, "top-app-bar--down", false)
// toggleClassWithEnable(topAppBarE, "top-app-bar--moving-up", false)
// toggleClassWithEnable(topAppBarE, "top-app-bar--up", false)
// } else {
// // 桌面设备不设置theme-color，启用毛玻璃
// toggleTopbarGlass(on)
// // 非固定topbar监听滚动
// // 多次添加同一个监听器是无效的
// window.addEventListener("scroll", scrollListener)
// window.addEventListener("animationend", animationDoneListener)
// }

// toggleTopbarGlass(true)
if (on) {
toggleClassWithEnable(topAppBarE, "mdc-top-app-bar--no-sticky", false)
} else {
toggleClassWithEnable(topAppBarE, "mdc-top-app-bar--no-sticky", true)
}
}

export function toggleTopbarGlass(on: boolean) {
Expand Down

0 comments on commit cb79c34

Please sign in to comment.