Skip to content

Commit 43e2bf6

Browse files
atyrodeatyrode
authored
refactor: use BEM naming convention for stylesheets (#32)
* refactor: move every stylesheet as sibling of their counterpart * refactor: switch ActionButton to BEM * refactor: switch ActionButtonGrid to BEM * refactor: remove backward compatibility styles from ActionButtonGrid * refactor: switch Dashboard to BEM * refactor: switch StateIndicator to BEM * refactor: switch Editor to BEM * refactor: switch HtmlEditor to BEM * refactor: switch MainMenu to BEM
1 parent 2016cd0 commit 43e2bf6

36 files changed

+581
-966
lines changed

src/frontend/src/styles/index.scss renamed to src/frontend/index.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
@import './fonts.scss';
2-
@import './HtmlEditor.scss';
3-
@import './Editor.scss';
4-
@import './AuthDialog.scss';
5-
@import './FeedbackButton.scss';
6-
@import './DiscordButton.scss';
7-
@import './MainMenuLabel.scss';
8-
@import './CustomEmbeddableRenderer.scss';
1+
@font-face {
2+
font-family: 'Roboto';
3+
src: url('/assets/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype-variations');
4+
font-weight: 100 900;
5+
font-stretch: 75% 100%;
6+
font-style: normal;
7+
font-display: swap;
8+
}
99

1010
/* Override Excalidraw styles */
1111

‎src/frontend/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
99
import { queryClient } from './src/api/queryClient';
1010

1111
import "@atyrode/excalidraw/index.css";
12-
import "./src/styles/index.scss";
12+
import "./index.scss";
1313

1414
import type * as TExcalidraw from "@atyrode/excalidraw";
1515

src/frontend/src/styles/CustomEmbeddableRenderer.scss renamed to src/frontend/src/CustomEmbeddableRenderer.scss

File renamed without changes.

‎src/frontend/src/CustomEmbeddableRenderer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
Editor,
1010
} from './pad';
1111
import { ActionButton } from './pad/buttons';
12+
import "./CustomEmbeddableRenderer.scss";
1213

1314
export const renderCustomEmbeddable = (
1415
element: NonDeleted<ExcalidrawEmbeddableElement>,

‎src/frontend/src/pad/buttons/ActionButton.scss‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
.action-button {
2+
&__wrapper {
3+
width: 100%;
4+
height: 100%;
5+
display: flex;
6+
flex-direction: column;
7+
background-color: #00000000;
8+
font-family: Arial, sans-serif;
9+
box-sizing: border-box;
10+
transition: all 0.3s ease-in-out;
11+
12+
/* Default state (non-compact) - show all elements */
13+
&--compact-0 .action-button {
14+
&__icon,
15+
&__text,
16+
&__action-text,
17+
&__settings-icon {
18+
display: flex;
19+
}
20+
}
21+
22+
/* Hide settings icon */
23+
&--compact-1 .action-button {
24+
&__icon,
25+
&__text,
26+
&__action-text {
27+
display: flex;
28+
}
29+
}
30+
31+
/* Hide action icon */
32+
&--compact-2 .action-button {
33+
&__text,
34+
&__action-text {
35+
display: flex;
36+
}
37+
}
38+
39+
/* Switch from action-text to action-icon */
40+
&--compact-3 .action-button {
41+
&__text,
42+
&__action-icon {
43+
display: flex;
44+
}
45+
}
46+
47+
/* Show action-text again, hide action-icon and change layout to vertical */
48+
&--compact-4 .action-button {
49+
&__text,
50+
&__action-text {
51+
display: flex;
52+
}
53+
54+
&__content {
55+
flex-direction: column;
56+
}
57+
}
58+
59+
/* Only action-icon is shown */
60+
&--compact-5 .action-button {
61+
&__action-icon {
62+
display: flex;
63+
}
64+
65+
&__action-icon-svg {
66+
/* Make the plus icon (embed action) slightly larger to compensate for optical illusion */
67+
&[data-action-type="embed"] {
68+
transform: scale(1.25);
69+
}
70+
}
71+
}
72+
73+
/* Unified rule for single-element modes (4 and 5) */
74+
&--compact-4 .action-button,
75+
&--compact-5 .action-button {
76+
&__content {
77+
justify-content: center;
78+
}
79+
}
80+
81+
/* Target type modifiers */
82+
&--vscode {
83+
.action-tabs__item--selected {
84+
&::before {
85+
background-color: #6a7aff !important; /* Brighter blue for VSCode indicator */
86+
}
87+
}
88+
}
89+
90+
&--cursor {
91+
.action-tabs__item--selected {
92+
&::before {
93+
background-color: #dc143c !important; /* Crimson for Cursor indicator */
94+
}
95+
}
96+
}
97+
98+
&--terminal {
99+
.action-tabs__item--selected {
100+
&::before {
101+
background-color: #4caf50 !important; /* Green for Terminal indicator */
102+
}
103+
}
104+
}
105+
}
106+
107+
&__main {
108+
width: 100%;
109+
height: 100%;
110+
border-radius: 10px;
111+
}
112+
113+
&__container {
114+
width: 100%;
115+
height: 100%;
116+
padding: 12px 15px;
117+
background-color: transparent;
118+
color: white;
119+
border: none;
120+
border-radius: 10px;
121+
position: relative;
122+
overflow: hidden;
123+
font-size: 16px;
124+
font-weight: 500;
125+
cursor: pointer;
126+
transition: all 0.3s ease;
127+
128+
&::after {
129+
content: '';
130+
position: absolute;
131+
top: 0;
132+
left: 0;
133+
right: 0;
134+
bottom: 0;
135+
background-color: rgba(255, 255, 255, 0);
136+
transition: background-color 0.3s ease;
137+
pointer-events: none;
138+
border-radius: 10px;
139+
}
140+
141+
&:hover::after {
142+
background-color: rgba(255, 255, 255, 0.1);
143+
}
144+
145+
&:active::after {
146+
background-color: rgba(255, 255, 255, 0.05);
147+
}
148+
149+
&--disabled {
150+
cursor: not-allowed;
151+
opacity: 0.5;
152+
}
153+
}
154+
155+
&__content {
156+
width: 100%;
157+
display: flex;
158+
justify-content: space-between;
159+
align-items: center;
160+
}
161+
162+
&__left {
163+
display: flex;
164+
align-items: center;
165+
justify-content: flex-start;
166+
}
167+
168+
&__right {
169+
display: flex;
170+
align-items: center;
171+
justify-content: flex-end;
172+
}
173+
174+
&__icon {
175+
margin-right: 8px;
176+
display: none; /* Hidden by default */
177+
align-items: center;
178+
flex-shrink: 1;
179+
180+
img.action-button__icon-svg {
181+
width: 100%;
182+
height: 100%;
183+
filter: invert(100%);
184+
}
185+
}
186+
187+
&__text {
188+
font-weight: 500;
189+
white-space: nowrap;
190+
overflow: hidden;
191+
text-overflow: ellipsis;
192+
flex-shrink: 0; /* Prevent text from shrinking */
193+
display: none; /* Hidden by default */
194+
}
195+
196+
&__action-text {
197+
color: rgba(255, 255, 255, 0.6);
198+
font-size: 14px;
199+
white-space: nowrap;
200+
overflow: hidden;
201+
text-overflow: ellipsis;
202+
flex-shrink: 0; /* Prevent text from shrinking */
203+
display: none; /* Hidden by default */
204+
}
205+
206+
&__action-icon {
207+
display: none; /* Hidden by default, shown in compact modes 3 and 4 */
208+
align-items: center;
209+
margin-right: 0px;
210+
211+
img.action-button__action-icon-svg {
212+
width: 100%;
213+
height: 100%;
214+
filter: invert(70%);
215+
transition: all 0.2s ease;
216+
217+
/* Make the plus icon (embed action) slightly larger to compensate for optical illusion */
218+
&[data-action-type="embed"] {
219+
transform: scale(1.15);
220+
}
221+
}
222+
}
223+
224+
&__settings-icon {
225+
display: none; /* Hidden by default */
226+
align-items: center;
227+
cursor: pointer;
228+
padding: 2px;
229+
border-radius: 4px;
230+
transition: all 0.2s ease;
231+
flex-shrink: 1; /* Allow settings icon to shrink */
232+
margin-left: 8px;
233+
234+
img.action-button__settings-icon-svg {
235+
width: 18px;
236+
height: 18px;
237+
filter: invert(70%);
238+
transition: all 0.2s ease;
239+
}
240+
}
241+
}
242+
243+
.action-tabs {
244+
&__container {
245+
background-color: #32373c;
246+
padding: 22px;
247+
display: flex;
248+
flex-direction: column;
249+
gap: 10px;
250+
transition: background-color 0.3s ease;
251+
box-sizing: border-box;
252+
}
253+
254+
&__row {
255+
display: flex;
256+
width: 100%;
257+
border-radius: 6px;
258+
overflow: hidden;
259+
260+
&--target .action-tabs__item {
261+
background-color: #4a4a54;
262+
263+
&--selected {
264+
background-color: #202225;
265+
}
266+
}
267+
268+
&--editor .action-tabs__item {
269+
background-color: #4a4a54;
270+
271+
&--selected {
272+
background-color: #202225;
273+
}
274+
}
275+
276+
&--action .action-tabs__item {
277+
background-color: #4a4a54;
278+
279+
&--selected {
280+
background-color: #202225;
281+
}
282+
}
283+
}
284+
285+
&__item {
286+
flex: 1;
287+
padding: 10px 12px;
288+
text-align: center;
289+
background-color: #3a3a44;
290+
color: white;
291+
cursor: pointer;
292+
transition: all 0.2s ease;
293+
user-select: none;
294+
position: relative;
295+
overflow: hidden;
296+
297+
&::after {
298+
content: '';
299+
position: absolute;
300+
top: 0;
301+
left: 0;
302+
right: 0;
303+
bottom: 0;
304+
background-color: rgba(255, 255, 255, 0);
305+
transition: background-color 0.3s ease;
306+
pointer-events: none;
307+
}
308+
309+
&:hover::after {
310+
background-color: rgba(255, 255, 255, 0.1);
311+
}
312+
313+
&--selected {
314+
background-color: #4a4a54;
315+
position: relative;
316+
317+
&::before {
318+
content: '';
319+
position: absolute;
320+
bottom: 0;
321+
left: 0;
322+
width: 100%;
323+
height: 3px;
324+
background-color: #6a6aff;
325+
}
326+
}
327+
}
328+
}

0 commit comments

Comments
 (0)