Skip to content

Commit 992bc53

Browse files
bajrangCoderbajrangCoder
committed
improve the font manager
1 parent 2f14ce0 commit 992bc53

File tree

2 files changed

+183
-66
lines changed

2 files changed

+183
-66
lines changed

‎src/pages/fontManager/fontManager.js‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function fontManager() {
2222
const $search = <span attr-action="search" className="icon search"></span>;
2323
const $addFont = <span attr-action="add-font" className="icon add"></span>;
2424
const list = Ref();
25+
$page.classList.add("font-manager-page");
2526

2627
actionStack.push({
2728
id: "fontManager",
@@ -36,7 +37,7 @@ export default function fontManager() {
3637
actionStack.remove("fontManager");
3738
};
3839

39-
$page.body = <div ref={list} className="main list"></div>;
40+
$page.body = <div ref={list} className="main list font-manager-list"></div>;
4041

4142
$page.querySelector("header").append($search, $addFont);
4243

@@ -287,33 +288,49 @@ export default function fontManager() {
287288
function FontItem({ name, isCurrent, onSelect, onDelete }) {
288289
const defaultFonts = ["Fira Code", "Roboto Mono", "MesloLGS NF Regular"];
289290
const isDefault = defaultFonts.includes(name);
291+
const subtitle = isCurrent
292+
? "Current editor font"
293+
: isDefault
294+
? "Built-in font"
295+
: "Custom font";
290296

291297
const $item = (
292298
<div
293299
tabIndex={1}
294-
className={`list-item ${isCurrent ? "current-font" : ""}`}
300+
className={`list-item has-subtitle ${isCurrent ? "current-font" : ""}`}
295301
data-key={name}
296302
data-action="select-font"
297303
>
298304
<span className="icon text_format"></span>
299305
<div className="container">
300306
<div className="text">{name}</div>
307+
<small className="value">{subtitle}</small>
301308
</div>
302-
<span
303-
className={`icon delete ${isDefault ? "disabled" : ""}`}
304-
data-action="delete"
305-
title={isDefault ? "Cannot delete default font" : "Delete font"}
306-
></span>
309+
{isCurrent || !isDefault
310+
? <div className="setting-tail">
311+
{isCurrent
312+
? <span className="font-manager-current">Current</span>
313+
: null}
314+
{!isDefault
315+
? <span
316+
className="icon delete font-manager-action"
317+
data-action="delete"
318+
title="Delete font"
319+
></span>
320+
: null}
321+
</div>
322+
: null}
307323
</div>
308324
);
309325

310326
$item.onclick = (e) => {
311-
const action = e.target.dataset.action;
327+
const $target = e.target;
328+
const action = $target.dataset.action;
312329
if (action === "delete" && !isDefault) {
313330
e.stopPropagation();
314331
onDelete();
315332
} else if (
316-
!e.target.classList.contains("icon") ||
333+
!$target.classList.contains("font-manager-action") ||
317334
action === "select-font"
318335
) {
319336
onSelect();

‎src/pages/fontManager/style.scss‎

Lines changed: 157 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,163 @@
1-
.main.list .list-item.current-font {
2-
background: var(--active-color-5, rgba(51, 153, 255, 0.1)) !important;
3-
border-left: 3px solid var(--active-color) !important;
1+
wc-page.font-manager-page {
2+
background: var(--secondary-color);
43

5-
.text {
6-
font-weight: 600 !important;
7-
}
4+
.font-manager-list {
5+
display: flex;
6+
flex-direction: column;
7+
width: 100%;
8+
max-width: 48rem;
9+
margin: 0 auto;
10+
padding: 0.5rem 0 5.5rem;
11+
box-sizing: border-box;
12+
background: var(--secondary-color);
13+
}
814

9-
.icon:first-child {
10-
color: var(--active-color) !important;
11-
}
12-
}
15+
.font-manager-list > .list-item {
16+
display: flex;
17+
width: 100%;
18+
min-height: 4.1rem;
19+
margin: 0;
20+
padding: 0.75rem 1rem;
21+
box-sizing: border-box;
22+
align-items: center;
23+
gap: 0.85rem;
24+
background: transparent;
25+
cursor: pointer;
26+
transition: background-color 140ms ease;
27+
text-decoration: none;
28+
29+
&:not(:last-of-type) {
30+
border-bottom: 1px solid var(--border-color);
31+
border-bottom: 1px solid color-mix(in srgb, var(--border-color), transparent 20%);
32+
}
33+
34+
&:focus,
35+
&:active {
36+
background: color-mix(
37+
in srgb,
38+
var(--secondary-color),
39+
var(--popup-text-color) 4%
40+
);
41+
}
42+
43+
> .icon:first-child {
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
width: 1.4rem;
48+
min-width: 1.4rem;
49+
height: 1.4rem;
50+
font-size: 1.15rem;
51+
color: color-mix(in srgb, var(--secondary-text-color), transparent 18%);
52+
}
53+
54+
> .container {
55+
flex: 1;
56+
display: flex;
57+
flex-direction: column;
58+
min-width: 0;
59+
overflow: visible;
60+
gap: 0.24rem;
61+
padding-right: 0.6rem;
62+
63+
> .text {
64+
display: flex;
65+
align-items: center;
66+
min-width: 0;
67+
font-size: 1rem;
68+
line-height: 1.2;
69+
font-weight: 600;
70+
color: var(--popup-text-color);
71+
}
72+
73+
> .value {
74+
display: block;
75+
font-size: 0.82rem;
76+
line-height: 1.35;
77+
color: color-mix(in srgb, var(--secondary-text-color), transparent 30%);
78+
text-transform: none;
79+
white-space: normal;
80+
overflow: visible;
81+
overflow-wrap: anywhere;
82+
opacity: 1;
83+
}
84+
}
85+
86+
> .setting-tail {
87+
display: flex;
88+
align-items: center;
89+
justify-content: flex-end;
90+
flex-shrink: 0;
91+
min-height: 1.65rem;
92+
gap: 0.65rem;
93+
margin-left: 0.9rem;
94+
align-self: center;
95+
}
96+
}
97+
98+
.font-manager-list > .list-item.current-font {
99+
background: color-mix(in srgb, var(--secondary-color), var(--active-color) 8%);
100+
}
13101

14-
.font-manager {
15-
.list-item {
16-
.container {
17-
flex: 1;
18-
}
19-
20-
.icon {
21-
22-
&.visibility,
23-
&.delete {
24-
opacity: 0.6;
25-
transition: opacity 0.2s ease;
26-
cursor: pointer;
27-
28-
&:hover {
29-
opacity: 1;
30-
}
31-
}
32-
33-
&.delete {
34-
&:hover:not(.disabled) {
35-
color: var(--error-text-color);
36-
}
37-
38-
&.disabled {
39-
opacity: 0.3;
40-
cursor: not-allowed;
41-
42-
&:hover {
43-
opacity: 0.3;
44-
}
45-
}
46-
}
47-
}
48-
}
102+
.font-manager-list > .list-item.current-font:focus,
103+
.font-manager-list > .list-item.current-font:active {
104+
background: color-mix(in srgb, var(--secondary-color), var(--active-color) 12%);
105+
}
106+
107+
.font-manager-list > .list-item.current-font > .icon:first-child {
108+
color: color-mix(in srgb, var(--active-color), transparent 10%);
109+
}
110+
111+
.font-manager-list > .list-item.current-font > .container > .text {
112+
font-weight: 700;
113+
}
114+
115+
@media screen and (min-width: 768px) {
116+
.font-manager-list {
117+
padding-left: 0.5rem;
118+
padding-right: 0.5rem;
119+
}
120+
}
121+
122+
.font-manager-current {
123+
display: inline-flex;
124+
align-items: center;
125+
font-size: 0.82rem;
126+
font-weight: 600;
127+
line-height: 1.2;
128+
color: color-mix(in srgb, var(--active-color), transparent 14%);
129+
}
130+
131+
.font-manager-action {
132+
display: inline-flex;
133+
align-items: center;
134+
justify-content: center;
135+
width: 1.2rem;
136+
min-width: 1.2rem;
137+
height: 1.2rem;
138+
font-size: 1.1rem;
139+
line-height: 1;
140+
color: color-mix(in srgb, var(--secondary-text-color), transparent 28%);
141+
cursor: pointer;
142+
transition: color 140ms ease;
143+
144+
&:hover,
145+
&:active {
146+
color: var(--error-text-color);
147+
}
148+
}
49149
}
50150

51151
.prompt.box {
52-
.font-css-editor {
53-
&.input {
54-
border-bottom: 1px solid var(--border-color);
55-
min-height: 120px;
56-
margin-top: 5px;
57-
58-
&:focus {
59-
border-bottom-color: var(--active-color);
60-
}
61-
}
62-
}
63-
}
152+
.font-css-editor {
153+
&.input {
154+
border-bottom: 1px solid var(--border-color);
155+
min-height: 120px;
156+
margin-top: 5px;
157+
158+
&:focus {
159+
border-bottom-color: var(--active-color);
160+
}
161+
}
162+
}
163+
}

0 commit comments

Comments
 (0)