Skip to content

Commit 4986fa0

Browse files
silverwindsilverwind
committed
Merge and tweak markup editor expander CSS
1 parent f63822f commit 4986fa0

File tree

5 files changed

+107
-97
lines changed

5 files changed

+107
-97
lines changed

‎web_src/css/editor/combomarkdowneditor.css‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -100,67 +100,3 @@
100100
border-bottom: 1px solid var(--color-secondary);
101101
padding-bottom: 1rem;
102102
}
103-
104-
text-expander {
105-
display: block;
106-
position: relative;
107-
}
108-
109-
text-expander .suggestions {
110-
position: absolute;
111-
min-width: 180px;
112-
padding: 0;
113-
margin-top: 24px;
114-
list-style: none;
115-
background: var(--color-box-body);
116-
border-radius: var(--border-radius);
117-
border: 1px solid var(--color-secondary);
118-
box-shadow: 0 .5rem 1rem var(--color-shadow);
119-
z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */
120-
}
121-
122-
text-expander .suggestions li {
123-
display: flex;
124-
align-items: center;
125-
cursor: pointer;
126-
padding: 4px 8px;
127-
font-weight: var(--font-weight-medium);
128-
}
129-
130-
text-expander .suggestions li + li {
131-
border-top: 1px solid var(--color-secondary-alpha-40);
132-
}
133-
134-
text-expander .suggestions li:first-child {
135-
border-radius: var(--border-radius) var(--border-radius) 0 0;
136-
}
137-
138-
text-expander .suggestions li:last-child {
139-
border-radius: 0 0 var(--border-radius) var(--border-radius);
140-
}
141-
142-
text-expander .suggestions li:only-child {
143-
border-radius: var(--border-radius);
144-
}
145-
146-
text-expander .suggestions li:hover {
147-
background: var(--color-hover);
148-
}
149-
150-
text-expander .suggestions .fullname {
151-
font-weight: var(--font-weight-normal);
152-
margin-left: 4px;
153-
color: var(--color-text-light-1);
154-
}
155-
156-
text-expander .suggestions li[aria-selected="true"],
157-
text-expander .suggestions li[aria-selected="true"] span {
158-
background: var(--color-primary);
159-
color: var(--color-primary-contrast);
160-
}
161-
162-
text-expander .suggestions img {
163-
width: 24px;
164-
height: 24px;
165-
margin-right: 8px;
166-
}

‎web_src/css/features/expander.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
text-expander .suggestions,
2+
.tribute-container {
3+
position: absolute;
4+
max-height: min(300px, 95vh);
5+
max-width: min(500px, 95vw);
6+
overflow-x: hidden;
7+
overflow-y: auto;
8+
overflow-wrap: anywhere;
9+
background: var(--color-menu);
10+
box-shadow: 0 6px 18px var(--color-shadow);
11+
border-radius: var(--border-radius);
12+
border: 1px solid var(--color-secondary);
13+
z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */
14+
}
15+
16+
text-expander {
17+
display: block;
18+
position: relative;
19+
}
20+
21+
text-expander .suggestions {
22+
padding: 0;
23+
margin-top: 24px;
24+
list-style: none;
25+
}
26+
27+
text-expander .suggestions li,
28+
.tribute-item {
29+
display: flex;
30+
align-items: center;
31+
cursor: pointer;
32+
gap: 4px;
33+
font-weight: var(--font-weight-medium);
34+
}
35+
36+
text-expander .suggestions li,
37+
.tribute-container li {
38+
padding: 3px 6px;
39+
}
40+
41+
text-expander .suggestions li + li {
42+
border-top: 1px solid var(--color-secondary);
43+
}
44+
45+
text-expander .suggestions li:first-child {
46+
border-radius: var(--border-radius) var(--border-radius) 0 0;
47+
}
48+
49+
text-expander .suggestions li:last-child {
50+
border-radius: 0 0 var(--border-radius) var(--border-radius);
51+
}
52+
53+
text-expander .suggestions li:only-child {
54+
border-radius: var(--border-radius);
55+
}
56+
57+
text-expander .suggestions .name,
58+
.tribute-container li .name {
59+
white-space: nowrap;
60+
}
61+
62+
text-expander .suggestions .fullname,
63+
.tribute-container li .fullname {
64+
font-weight: var(--font-weight-normal);
65+
color: var(--color-text-light-1);
66+
}
67+
68+
text-expander .suggestions li:hover,
69+
text-expander .suggestions li[aria-selected="true"],
70+
text-expander .suggestions li[aria-selected="true"] *,
71+
.tribute-container li.highlight,
72+
.tribute-container li.highlight * {
73+
background: var(--color-primary);
74+
color: var(--color-primary-contrast);
75+
}
76+
77+
text-expander .suggestions img,
78+
.tribute-item img {
79+
width: 24px;
80+
height: 24px;
81+
}
82+
83+
.tribute-container {
84+
display: block;
85+
z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */
86+
}
87+
88+
.tribute-container ul {
89+
margin: 0;
90+
padding: 0;
91+
list-style: none;
92+
}
93+
94+
.tribute-container li + li {
95+
border-top: 1px solid var(--color-secondary);
96+
}
97+
98+
.tribute-container li span,
99+
.tribute-container .menu-highlighted {
100+
font-weight: var(--font-weight-semibold);
101+
}
102+
103+
.tribute-container li.no-match {
104+
cursor: default;
105+
}

‎web_src/css/features/tribute.css‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎web_src/css/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
@import "./features/imagediff.css";
4040
@import "./features/codeeditor.css";
4141
@import "./features/projects.css";
42-
@import "./features/tribute.css";
42+
@import "./features/expander.css";
4343
@import "./features/cropper.css";
4444
@import "./features/console.css";
4545

‎web_src/js/features/comp/TextExpander.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export function initTextExpander(expander: TextExpanderElement) {
9797
li.append(img);
9898

9999
const nameSpan = document.createElement('span');
100+
nameSpan.classList.add('name');
100101
nameSpan.textContent = name;
101102
li.append(nameSpan);
102103

0 commit comments

Comments
 (0)