Skip to content

Commit d608473

Browse files
apqxapqx
committed
Optimize style of search dialog
1 parent 9620fad commit d608473

31 files changed

+117
-62
lines changed

‎_includes/index-posts.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<li class="index-li index-li--pin">
66
<a class="index-a mdc-card index-card" href="{{ post.url }}">
77
<section>
8-
<h1 class="index-title one-line">{{ post.title }}</h1>
8+
<h1 class="index-title">{{ post.title }}</h1>
99
<span class="index-author">{% if post.moreDate != null %}{{ post.moreDate }}{% endif %} {{ post.author }}</span>
1010
<span class="index-date">{{ post.date | date: "%Y年%m月%d日" }}</span>
1111
<i class="material-symbols-rounded-thin index-pin-icon">keep</i>
@@ -24,7 +24,7 @@ <h1 class="index-title one-line">{{ post.title }}</h1>
2424
<li class="index-li">
2525
<a class="index-a mdc-card index-card" href="{{ post.url }}">
2626
<section>
27-
<h1 class="index-title one-line">{{ post.title }}</h1>
27+
<h1 class="index-title">{{ post.title }}</h1>
2828
<span class="index-author">{% if post.moreDate != null %}{{ post.moreDate }}{% endif %} {{ post.author }}</span>
2929
<span class="index-date">{{ post.date | date: "%Y年%m月%d日" }}</span>
3030
</section>

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+1-1
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

+1-1
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

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm/src/component/animation/HeightAnimationContainer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export class HeightAnimationContainer {
106106
duration = _duration
107107
consoleDebug("HeightAnimationContainer use given duration + " + duration + "s")
108108
} else {
109-
duration = animationSize * 0.2 / 500
109+
duration = animationSize / 600
110110
consoleDebug("HeightAnimationContainer child total height = " + height + ", lastHeight = " + lastHeight +
111111
", animationSize = " + animationSize + ", duration = " + duration + "s")
112112
if (duration < 0.1) {

‎npm/src/component/button.scss

+29-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
@use "theme" as blogTheme;
22
@use "@material/button";
33
@use "@material/button/mdc-button";
4+
@use "@material/icon-button";
5+
@use "@material/icon-button/mdc-icon-button";
46
@use "@material/ripple";
57
@use "sass:map";
8+
@use "sass:color";
69

710
// 解决Safari的Ripple动画无圆角
811
.mdc-button,
@@ -15,10 +18,12 @@
1518
@include button.container-fill-color(var(--button-bg));
1619
@include button.ink-color(var(--button-ink));
1720

21+
overflow: hidden;
1822
@include ripple.surface;
1923
// 如果为bounded则宽度可能有问题，导致横向溢出，滚动🤔
24+
// 设置其surface的overflow为hidden
2025
// Dialog的surface的尺寸异常导致滚动，已设置设置其overflow为clip
21-
@include ripple.radius-unbounded(100%);
26+
@include ripple.radius-bounded;
2227
@include ripple.states-base-color(map.get(blogTheme.$button-ripple, "light"));
2328
@include ripple.states-opacities((hover: .0, focus: .0, press: .1));
2429
}
@@ -31,3 +36,26 @@
3136
.mdc-button.btn-round {
3237
border-radius: calc(var(--mdc-typography-body1-font-size) + 0.3rem);
3338
}
39+
40+
@mixin icon-button-ripple {
41+
overflow: hidden;
42+
@include ripple.surface;
43+
@include ripple.radius-bounded;
44+
@include ripple.states-base-color(color.adjust(map.get(blogTheme.$surface, "light"), $lightness: - blogTheme.$ripple-gap-percent));
45+
@include ripple.states-opacities((hover: .0, focus: .0, press: .15));
46+
}
47+
48+
@mixin icon-button-dark-ripple {
49+
@include ripple.states-base-color(color.adjust(map.get(blogTheme.$surface, "dark"), $lightness: + blogTheme.$ripple-gap-percent));
50+
@include ripple.states-opacities((hover: .0, focus: .0, press: .15));
51+
}
52+
53+
.mdc-icon-button {
54+
// border-radius: 20%;
55+
color: var(--mdc-theme-on-surface);
56+
@include icon-button-ripple;
57+
}
58+
59+
.dark .mdc-icon-button {
60+
@include icon-button-dark-ripple;
61+
}

‎npm/src/component/dialog/AboutMeDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class AboutMeDialog extends BasicDialog<BasicDialogProps, any> {
2727
dialogContent(): JSX.Element {
2828
consoleDebug("AboutMeDialog render")
2929
return (
30-
<div className="center">
30+
<div className="items-center">
3131
<picture>
3232
<source srcSet="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/me_emoji.webp"
3333
type="image/webp" />
@@ -43,7 +43,7 @@ class AboutMeDialog extends BasicDialog<BasicDialogProps, any> {
4343
<Button text="Git" onClick={null} className="btn-tag" />
4444
</section>
4545
<p className="about-me-description">九五后，旅居杭州，<a
46-
href={this.getKunQvLink()}>昆虫</a>，野生散养攻城狮，“十分”“业余”摄影Fans。联系我可以通过<a href="mailto:[email protected]">电子邮件</a>，如果有必要也可以用<a
46+
href={this.getKunQvLink()}>昆虫</a>，野生散养攻城狮，“十分”“业余”摄影Fans。联系我可以通过电子邮件，如果有必要也可以用<a
4747
href="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/wechat.jpg">微信</a>。</p>
4848
<ul className="mdc-deprecated-list mdc-deprecated-list--one-line dialog-link-list" id="about-me-dialog_link_list">
4949
<LinkItem link="https://github.com/apqx" title="GitHub" first={true} last={false} />

‎npm/src/component/dialog/BasicDialog.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,8 @@
112112
@include ripple.surface;
113113
// 如果为bounded则宽度可能有问题，导致横向溢出，滚动🤔
114114
// Dialog的surface的尺寸异常导致滚动，已设置设置其overflow为clip
115-
@include ripple.radius-bounded(100%);
115+
overflow: hidden;
116+
@include ripple.radius-bounded;
116117
@include ripple.states-base-color(map.get(blogTheme.$dialog-action-btn-ripple, "light"));
117118
@include ripple.states-opacities((hover: .0, focus: .0, press: .1));
118119
}

‎npm/src/component/dialog/CommonAlertDialog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class CommonAlertDialog extends BasicDialog<Props, any> {
1717
dialogContent(): JSX.Element {
1818
return (
1919
<div>
20-
<p className="common-alert-dialog_title center">{this.props.title}</p>
20+
<p className="common-alert-dialog_title items-center">{this.props.title}</p>
2121
<p className="common-alert-dialog_content"
2222
dangerouslySetInnerHTML={createHtmlContent(this.props.contentHTML)}/>
2323
</div>

‎npm/src/component/dialog/PreferenceDialog.scss

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
#preference-dialog__top-container {
77
margin-top: 0.5rem;
8+
text-align: center;
89
}
910

1011
#preference-dialog__toggle-container {

‎npm/src/component/dialog/PreferenceDialog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export class PreferenceDialog extends BasicDialog<BasicDialogProps, DialogConten
9494
consoleDebug("PreferenceDialogContent render")
9595
return (
9696
<>
97-
<div className="center" id="preference-dialog__top-container">
97+
<div id="preference-dialog__top-container">
9898
<picture>
9999
<source srcSet="https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/emojis/noto-animated-emoji/mouth-none/512.webp"
100100
type="image/webp" />

‎npm/src/component/dialog/SearchDialog.scss

+23-17
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
@use "../tag.scss";
33
@use "../react/LoadingHint.scss";
44
@use "../react/Button.scss";
5-
@use "@material/button";
6-
@use '@material/button/mdc-button';
7-
@use "@material/ripple";
85
@use "@material/typography";
96
@use "@material/textfield";
107
@use "@material/textfield/mdc-text-field";
@@ -24,31 +21,40 @@
2421
}
2522

2623
.mdc-text-field {
27-
@include textfield.ink-color(var(--mdc-theme-text-primary-on-background));
28-
@include textfield.caret-color(var(--mdc-theme-text-primary-on-background));
24+
@include textfield.ink-color(var(--mdc-theme-on-surface));
25+
@include textfield.caret-color(var(--mdc-theme-on-surface));
2926
@include textfield.placeholder-color(var(--mdc-theme-text-secondary-on-background));
3027
@include textfield.label-color(var(--mdc-theme-text-secondary-on-background));
3128
@include textfield.outline-color(var(--divider-color));
3229
@include textfield.hover-outline-color(var(--divider-color));
3330
@include textfield.focused-outline-color(var(--divider-color));
34-
}
3531

36-
input {
37-
-webkit-tap-highlight-color: transparent;
32+
display: flex;
33+
align-items: center;
34+
padding: 0 0 0 1rem;
35+
margin-left: auto;
36+
margin-right: auto;
3837
}
3938

40-
.mdc-button.btn-search {
41-
@include button.ink-color(var(--chip-ink));
42-
@include button.container-fill-color(var(--chip-bg));
43-
min-width: fit-content;
44-
padding-left: 0.8rem;
45-
padding-right: 0.8rem;
39+
#btn-search {
40+
height: 100%;
41+
width: 4.5rem;
42+
margin: 0;
43+
padding: 0;
44+
border-radius: 0 var(--mdc-shape-small) var(--mdc-shape-small) 0;
45+
// border-left: 1px solid var(--divider-color);
46+
overflow: hidden;
4647

47-
@include tag.btnChipRipple();
48+
i {
49+
margin-top: auto;
50+
margin-bottom: auto;
51+
line-height: 2;
52+
color: var(--mdc-theme-text-secondary-on-background);
53+
}
4854
}
4955

50-
.dark .mdc-button.btn-search {
51-
@include tag.btnChipRippleDark();
56+
input {
57+
-webkit-tap-highlight-color: transparent;
5258
}
5359

5460
.search-result-item-type {

‎npm/src/component/dialog/SearchDialog.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export class SearchDialog extends BasicDialog<BasicDialogProps, SearchDialogStat
9595

9696
dialogContent(): JSX.Element {
9797
return (
98-
<div className="center">
98+
<div className="items-center">
9999
<label className="mdc-text-field mdc-text-field--outlined" id="search-dialog_label">
100100
<span className="mdc-notched-outline">
101101
<span className="mdc-notched-outline__leading"></span>
@@ -107,10 +107,9 @@ export class SearchDialog extends BasicDialog<BasicDialogProps, SearchDialogStat
107107
<input type="search" className="mdc-text-field__input" aria-labelledby="search-label"
108108
name="search-dialog_input" tabIndex={-1} onChange={this.onInputChange} />
109109
<button id="btn-search" type="button"
110-
className="mdc-button btn-search btn-round center"
110+
className="mdc-icon-button"
111111
tabIndex={-1} onClick={this.onClickSearch}>
112112
<i className="material-symbols-rounded-thin mdc-button__icon" aria-hidden="true">search</i>
113-
<span className="mdc-button__label">SEARCH</span>
114113
</button>
115114
</label>
116115

‎npm/src/component/dialog/ShortLinkJumpDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ export class ShortLinkDialog extends BasicDialog<DialogContentProps, DialogConte
3434

3535
dialogContent(): JSX.Element {
3636
return (
37-
<div className="center">
37+
<div className="items-center">
3838
<picture>
3939
<source srcSet="https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/emojis/noto-animated-emoji/peacock/512.webp"
4040
type="image/webp" />
4141
<img width="164px" height="164px" className="inline-for-center" alt=""
4242
src="https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/emojis/noto-animated-emoji/peacock/512.gif" />
4343
</picture>
4444
<p id="short-link-jump-dialog_title">{this.state.title}</p>
45-
<p id="short-link-jump-dialog_link" className="center">
45+
<p id="short-link-jump-dialog_link" className="items-center">
4646
<a className="clickable-empty-link" onClick={this.state.onClickLink}>{this.state.content}</a>
4747
</p>
4848

‎npm/src/component/drawer.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@
3030
@include elevation.elevation(map.get(blogTheme.$drawer-elevation, "elevation"), map.get(blogTheme.$drawer-elevation, "shadow-dark"), 0);
3131
}
3232

33+
.mdc-drawer-scroll-lock {
34+
overflow: hidden;
35+
}
36+
3337
.mdc-drawer--modal + .mdc-drawer-scrim {
3438
z-index: 2;
3539
background-color: var(--drawer-scrim-bg);
@@ -70,7 +74,7 @@
7074
.nav-list {
7175
.mdc-deprecated-list-item {
7276
@include ripple.surface;
73-
@include ripple.radius-bounded(100%);
77+
@include ripple.radius-bounded;
7478
@include ripple.states-base-color(map.get(blogTheme.$drawer-nav-ripple, "light"));
7579
@include ripple.states-opacities((hover: .1, focus: .1, press: .1));
7680
}

‎npm/src/component/drawer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ export function initDrawer() {
5353
drawerList.selectedIndex = currentPageIndex
5454
drawerE.addEventListener("MDCDrawer:opened", () => {
5555
// Drawer弹出时禁止body滚动
56-
toggleClassWithEnable(document.body, "mdc-dialog-scroll-lock", true)
56+
toggleClassWithEnable(document.body, "mdc-drawer-scroll-lock", true)
5757
currentSelectedAE.focus()
5858
currentSelectedAE.blur()
5959
});
6060
drawerE.addEventListener("MDCDrawer:closed", () => {
61-
toggleClassWithEnable(document.body, "mdc-dialog-scroll-lock", false)
61+
toggleClassWithEnable(document.body, "mdc-drawer-scroll-lock", false)
6262
// 恢复选中
6363
// drawerList.selectedIndex = currentPageIndex
6464
});

‎npm/src/component/list.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
// hover与press的透明度在点击的时候是叠加的，所以可以一致
2727
.mdc-deprecated-list-item {
2828
@include ripple.surface;
29-
@include ripple.radius-bounded(100%);
29+
@include ripple.radius-bounded;
3030
@include ripple.states-base-color(map.get(blogTheme.$surface-block-ripple, "light"));
3131
@include ripple.states-opacities((hover: .08, focus: .08, press: .08));
3232
padding: 0.5rem 1rem;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ class IndexItem extends React.Component<IndexItemProps, any> {
102102
<li className="index-li">
103103
<a className="index-a mdc-card index-card" href={this.props.path}>
104104
<section>
105-
<h1 className="index-title one-line">{this.props.title}</h1>
105+
<h1 className="index-title">{this.props.title}</h1>
106106
<span className="index-author">{this.props.author}</span>
107107
<span className="index-date">{this.props.date}</span>
108108
{this.props.pin &&

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class LoadingHint extends React.Component<Props, any> {
1616
}
1717
render() {
1818
return (
19-
<div className="loading-hint-wrapper center">
19+
<div className="loading-hint-wrapper items-center">
2020
{this.props.loading && <ProgressCircular loading={true} />}
2121
{(!this.props.loading && this.props.loadHint != null) &&
2222
<Button text={this.props.loadHint} onClick={this.props.onClickHint} className="loading-hint-btn" />

‎npm/src/component/tag.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
@mixin btnChipRipple {
1010
@include ripple.surface;
11-
@include ripple.radius-unbounded(100%);
11+
@include ripple.radius-bounded;
1212
@include ripple.states-base-color(map.get(blogTheme.$chip-ripple, "light"));
1313
@include ripple.states-opacities((hover: .0, focus: .0, press: .1));
1414
}
@@ -27,7 +27,7 @@
2727
font-weight: 300;
2828
margin-top: 0.2rem;
2929
margin-bottom: 0.2rem;
30-
@include button.height(2rem);
30+
@include button.height(2.2rem);
3131
border-radius: calc(var(--mdc-typography-body1-font-size) - 0.1rem);
3232

3333
@include btnChipRipple();

‎npm/src/component/text.scss

+2
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,8 @@ a {
138138
text-decoration: underline;
139139
// 下划线与文字的间距
140140
text-underline-offset: 0.25rem;
141+
// 下划线粗细
142+
text-decoration-thickness: 1px;
141143
// 去除移动版Chrome点击时默认的蓝色背景
142144
-webkit-tap-highlight-color: transparent;
143145
color: unset;

‎npm/src/component/theme.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,10 @@ $text-content-secondary: (
7474
);
7575

7676
$blockquote-border: (
77-
light: #f6c9c9,
78-
dark: #824d4d,
79-
// light: color.adjust(map.get($surface, "light"), $lightness: -10%),
80-
// dark: color.adjust(map.get($surface, "dark"), $lightness: +10%),
77+
// light: #f6c9c9,
78+
// dark: #824d4d,
79+
light: color.adjust(map.get($surface, "light"), $lightness: -10%),
80+
dark: color.adjust(map.get($surface, "dark"), $lightness: +10%),
8181
);
8282

8383
$drawer-nav-ripple: (
@@ -97,7 +97,7 @@ $fab-ink: (
9797

9898
$scrim: (
9999
color: rgba(0, 0, 0, 0.05),
100-
backdrop-blur: 10px,
100+
backdrop-blur: 5px,
101101
);
102102

103103
$top-bar-elevation: (

‎npm/src/component/topbar.scss

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "theme" as blogTheme;
2+
@use "button" as button;
23
@use "@material/elevation";
34
@use "@material/elevation/mdc-elevation";
45
@use "@material/top-app-bar";
@@ -39,16 +40,12 @@ body {
3940

4041
.mdc-top-app-bar__action-item.mdc-icon-button,
4142
.mdc-top-app-bar__navigation-icon.mdc-icon-button {
42-
@include ripple.surface;
43-
@include ripple.radius-unbounded(100%);
44-
@include ripple.states-base-color(color.adjust(map.get(blogTheme.$top-bar, "bg-light"), $lightness: - blogTheme.$ripple-gap-percent));
45-
@include ripple.states-opacities((hover: .0, focus: .0, press: .15));
43+
@include button.icon-button-ripple;
4644
}
4745

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

5451
.mdc-top-app-bar__title {

‎npm/src/page/index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ body {
5757
@mixin cardRipple {
5858
overflow: hidden;
5959
@include ripple.surface;
60-
@include ripple.radius-bounded(100%);
60+
@include ripple.radius-bounded;
6161
@include ripple.states-base-color(color.adjust(map.get(blogTheme.$surface, "light"), $lightness: - blogTheme.$ripple-gap-percent));
6262
@include ripple.states-opacities((hover: .0, focus: .0, press: .2));
6363
}

0 commit comments

Comments
 (0)