Skip to content

Commit d9d35f9

Browse files
authored
refactor: Move shortcut dialog CSS registration into unified location. (#664)
1 parent 0ef663e commit d9d35f9

File tree

2 files changed

+142
-145
lines changed

2 files changed

+142
-145
lines changed

src/index.ts

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,148 @@ export class KeyboardNavigation {
315315
.blocklyMenuItemContent .blocklyShortcutContainer .blocklyShortcut {
316316
color: #ccc;
317317
}
318+
`);
319+
320+
// Register classes used by the shortcuts modal
321+
Blockly.Css.register(`
322+
:root {
323+
--divider-border-color: #eee;
324+
--key-border-color: #ccc;
325+
--shortcut-modal-border-color: #9aa0a6;
326+
}
327+
328+
.shortcut-modal {
329+
border: 1px solid var(--shortcut-modal-border-color);
330+
border-radius: 12px;
331+
box-shadow: 6px 6px 32px rgba(0,0,0,.5);
332+
flex-direction: column;
333+
gap: 12px;
334+
margin: auto;
335+
max-height: 82vh;
336+
max-width: calc(100% - 10em);
337+
padding: 24px 12px 24px 32px;
338+
position: relative;
339+
z-index: 99;
340+
}
341+
342+
.shortcut-modal[open] {
343+
display: flex;
344+
}
345+
346+
.shortcut-modal .close-modal {
347+
border: 0;
348+
background: transparent;
349+
float: inline-end;
350+
margin: 0 0 0 0;
351+
position: absolute;
352+
top: 16px;
353+
right: 24px;
354+
}
355+
356+
.shortcut-modal h1 {
357+
font-weight: 600;
358+
font-size: 1.2em;
359+
}
360+
361+
.shortcut-modal:before {
362+
background: radial-gradient(rgba(244, 244, 244, 0.43), rgba(75, 75, 75, 0.51));
363+
align-items: center;
364+
display: block;
365+
font-family: Roboto;
366+
height: 100%;
367+
justify-content: center;
368+
left: 0;
369+
position: absolute;
370+
top: 0;
371+
width: 100%;
372+
}
373+
374+
.shortcut-tables {
375+
display: grid;
376+
align-items: start;
377+
grid-template-columns: 1fr;
378+
row-gap: 1em;
379+
column-gap: 2em;
380+
}
381+
382+
@media (min-width: 950px) {
383+
.shortcut-tables {
384+
grid-template-columns: 1fr 1fr
385+
}
386+
}
387+
388+
@media (min-width: 1360px) {
389+
.shortcut-tables {
390+
grid-template-columns: 1fr 1fr 1fr
391+
}
392+
}
393+
394+
.shortcut-table {
395+
border-collapse: collapse;
396+
font-family: Roboto;
397+
font-size: .9em;
398+
}
399+
400+
.shortcut-table th {
401+
padding-inline-end: 0.5em;
402+
text-align: left;
403+
text-wrap: nowrap;
404+
vertical-align: baseline;
405+
}
406+
407+
.shortcut-table td:first-child {
408+
text-wrap: auto;
409+
width: 40%;
410+
}
411+
412+
.shortcut-table tr:has(+ .category) {
413+
--divider-border-color: transparent;
414+
margin-end: 1em;
415+
}
416+
417+
.shortcut-table tr:not(.category, :last-child) {
418+
border-bottom: 1px solid var(--divider-border-color);
419+
}
420+
421+
.shortcut-table td {
422+
padding: 0.2em 1em 0.3em 0;
423+
text-wrap: nowrap;
424+
}
425+
426+
.shortcut-table h2 {
427+
border-bottom: 1px solid #999;
428+
font-size: 1em;
429+
padding-block-end: 0.5em;
430+
}
431+
432+
.shortcut-table .key {
433+
border: 1px solid var(--key-border-color);
434+
border-radius: 8px;
435+
display: inline-block;
436+
margin: 0 4px;
437+
min-width: 2em;
438+
padding: .3em .5em;
439+
text-align: center;
440+
}
441+
442+
.shortcut-table .separator {
443+
color: gray;
444+
display: inline-block;
445+
padding: 0 0.5em;
446+
}
447+
448+
.shortcut-container {
449+
font-size: 0.95em;
450+
overflow: auto;
451+
padding: 0.5em;
452+
}
453+
454+
.shortcut-combo {
455+
display: inline-block;
456+
padding: 0.25em 0;
457+
text-wrap: nowrap;
458+
}
459+
318460
`);
319461
}
320462
}

src/shortcut_dialog.ts

Lines changed: 0 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -185,148 +185,3 @@ export class ShortcutDialog {
185185
);
186186
}
187187
}
188-
189-
/**
190-
* Register classes used by the shortcuts modal
191-
* Alt: plugin exports a register() function that updates the registry
192-
*/
193-
Blockly.Css.register(`
194-
:root {
195-
--divider-border-color: #eee;
196-
--key-border-color: #ccc;
197-
--shortcut-modal-border-color: #9aa0a6;
198-
}
199-
200-
.shortcut-modal {
201-
border: 1px solid var(--shortcut-modal-border-color);
202-
border-radius: 12px;
203-
box-shadow: 6px 6px 32px rgba(0,0,0,.5);
204-
flex-direction: column;
205-
gap: 12px;
206-
margin: auto;
207-
max-height: 82vh;
208-
max-width: calc(100% - 10em);
209-
padding: 24px 12px 24px 32px;
210-
position: relative;
211-
z-index: 99;
212-
}
213-
214-
.shortcut-modal[open] {
215-
display: flex;
216-
}
217-
218-
.shortcut-modal .close-modal {
219-
border: 0;
220-
background: transparent;
221-
float: inline-end;
222-
margin: 0 0 0 0;
223-
position: absolute;
224-
top: 16px;
225-
right: 24px;
226-
}
227-
228-
.shortcut-modal h1 {
229-
font-weight: 600;
230-
font-size: 1.2em;
231-
}
232-
233-
.shortcut-modal:before {
234-
background: radial-gradient(rgba(244, 244, 244, 0.43), rgba(75, 75, 75, 0.51));
235-
align-items: center;
236-
display: block;
237-
font-family: Roboto;
238-
height: 100%;
239-
justify-content: center;
240-
left: 0;
241-
position: absolute;
242-
top: 0;
243-
width: 100%;
244-
}
245-
246-
.shortcut-tables {
247-
display: grid;
248-
align-items: start;
249-
grid-template-columns: 1fr;
250-
row-gap: 1em;
251-
column-gap: 2em;
252-
}
253-
254-
@media (min-width: 950px) {
255-
.shortcut-tables {
256-
grid-template-columns: 1fr 1fr
257-
}
258-
}
259-
260-
@media (min-width: 1360px) {
261-
.shortcut-tables {
262-
grid-template-columns: 1fr 1fr 1fr
263-
}
264-
}
265-
266-
.shortcut-table {
267-
border-collapse: collapse;
268-
font-family: Roboto;
269-
font-size: .9em;
270-
}
271-
272-
.shortcut-table th {
273-
padding-inline-end: 0.5em;
274-
text-align: left;
275-
text-wrap: nowrap;
276-
vertical-align: baseline;
277-
}
278-
279-
.shortcut-table td:first-child {
280-
text-wrap: auto;
281-
width: 40%;
282-
}
283-
284-
.shortcut-table tr:has(+ .category) {
285-
--divider-border-color: transparent;
286-
margin-end: 1em;
287-
}
288-
289-
.shortcut-table tr:not(.category, :last-child) {
290-
border-bottom: 1px solid var(--divider-border-color);
291-
}
292-
293-
.shortcut-table td {
294-
padding: 0.2em 1em 0.3em 0;
295-
text-wrap: nowrap;
296-
}
297-
298-
.shortcut-table h2 {
299-
border-bottom: 1px solid #999;
300-
font-size: 1em;
301-
padding-block-end: 0.5em;
302-
}
303-
304-
.shortcut-table .key {
305-
border: 1px solid var(--key-border-color);
306-
border-radius: 8px;
307-
display: inline-block;
308-
margin: 0 4px;
309-
min-width: 2em;
310-
padding: .3em .5em;
311-
text-align: center;
312-
}
313-
314-
.shortcut-table .separator {
315-
color: gray;
316-
display: inline-block;
317-
padding: 0 0.5em;
318-
}
319-
320-
.shortcut-container {
321-
font-size: 0.95em;
322-
overflow: auto;
323-
padding: 0.5em;
324-
}
325-
326-
.shortcut-combo {
327-
display: inline-block;
328-
padding: 0.25em 0;
329-
text-wrap: nowrap;
330-
}
331-
332-
`);

0 commit comments

Comments
 (0)