Skip to content
This repository was archived by the owner on Oct 21, 2025. It is now read-only.

Commit e11848e

Browse files
Kr0noxKr0nox
committed
adjust design
1 parent 6f6cd8b commit e11848e

File tree

8 files changed

+95
-93
lines changed

8 files changed

+95
-93
lines changed

‎src/common/commonStyling.css‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,23 @@ kbd {
6363

6464
/* drop-down icon */
6565
.accordion-button {
66-
/* space for the icon */
67-
padding-right: 2em;
68-
6966
/* Make the text unselectable. When rapidly clicking the accordion button,
7067
the text would be selected otherwise due to a double click. */
7168
-webkit-user-select: none;
7269
user-select: none;
7370
}
7471

75-
.accordion-button::after {
72+
.accordion-button.cevron-right {
73+
/* space for the icon */
74+
padding-right: 2em;
75+
}
76+
77+
.accordion-button.cevron-left {
78+
/* space for the icon */
79+
padding-left: 2em;
80+
}
81+
82+
.accordion-button.cevron-right::after {
7683
content: "";
7784
background-image: url("@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg");
7885
right: 1em;
@@ -95,3 +102,27 @@ kbd {
95102
/* flip arrow in y direction */
96103
transform: scaleY(-1);
97104
}
105+
106+
.accordion-state:checked ~ label .accordion-button::before {
107+
/* flip arrow in y direction */
108+
transform: scaleY(-1);
109+
}
110+
111+
.accordion-button.cevron-left::before {
112+
content: "";
113+
background-image: url("@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg");
114+
left: 1em;
115+
position: absolute;
116+
display: inline-block;
117+
118+
/* only filter=invert(1) if dark mode is enabled aka --dark-mode is set to 1 */
119+
filter: invert(var(--dark-mode));
120+
121+
width: 16px;
122+
height: 16px;
123+
background-size: 16px 16px;
124+
125+
vertical-align: text-top;
126+
transition: transform 500ms ease;
127+
transform: scaleY(1);
128+
}

‎src/common/helpUi.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export class HelpUI extends AbstractUIExtension {
2020
containerElement.innerHTML = `
2121
<input type="checkbox" id="accordion-state-help" class="accordion-state" hidden>
2222
<label id="help-ui-accordion-label" for="accordion-state-help">
23-
<div class="accordion-button">
23+
<div class="accordion-button cevron-right">
2424
Keyboard Shortcuts | Help
2525
</div>
2626
</label>

‎src/common/lightDarkSwitch.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1-
import { injectable } from "inversify";
1+
import { injectable, multiInject } from "inversify";
22
import "./lightDarkSwitch.css";
33
import { AbstractUIExtension } from "sprotty";
44

5+
export const SWITCHABLE = Symbol("Switchable");
6+
7+
export interface Switchable {
8+
switchTheme(useDark: boolean): void;
9+
}
10+
511
@injectable()
612
export class LightDarkSwitch extends AbstractUIExtension {
713
static readonly ID = "light-dark-switch";
814
static useDarkMode = false;
915

16+
constructor(@multiInject(SWITCHABLE) protected switchables: Switchable[]) {
17+
super();
18+
}
19+
1020
id(): string {
1121
return LightDarkSwitch.ID;
1222
}
@@ -41,5 +51,7 @@ export class LightDarkSwitch extends AbstractUIExtension {
4151
const value = useDark ? "dark" : "light";
4252
rootElement.setAttribute("data-theme", value);
4353
sprottyElement.setAttribute("data-theme", value);
54+
console.debug(this.switchables);
55+
this.switchables.forEach((s) => s.switchTheme(useDark));
4456
}
4557
}

‎src/features/constraintMenu/ConstraintMenu.ts‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ import { AutoCompleteTree } from "./AutoCompletion";
1818
import { TreeBuilder } from "./DslLanguage";
1919
import { LabelTypeRegistry } from "../labels/labelTypeRegistry";
2020
import { EditorModeController } from "../editorMode/editorModeController";
21+
import { Switchable } from "../../common/lightDarkSwitch";
2122

2223
@injectable()
23-
export class ConstraintMenu extends AbstractUIExtension {
24+
export class ConstraintMenu extends AbstractUIExtension implements Switchable {
2425
static readonly ID = "constraint-menu";
2526
private selectedConstraint: Constraint | undefined;
2627
private editorContainer: HTMLDivElement = document.createElement("div") as HTMLDivElement;
@@ -55,16 +56,22 @@ export class ConstraintMenu extends AbstractUIExtension {
5556
protected initializeContents(containerElement: HTMLElement): void {
5657
containerElement.classList.add("ui-float");
5758
containerElement.innerHTML = `
58-
<input type="checkbox" id="expand-state-constraint" hidden>
59+
<input type="checkbox" id="expand-state-constraint" class="accordion-state" hidden>
5960
<label id="constraint-menu-expand-label" for="expand-state-constraint">
60-
<div class="expand-button">
61+
<div class="accordion-button cevron-left" id="constraint-menu-expand-title">
6162
Constraints
6263
</div>
6364
</label>
6465
`;
65-
containerElement.appendChild(this.buildConstraintInputWrapper());
66-
containerElement.appendChild(this.buildConstraintListWrapper());
66+
const accordionContent = document.createElement("div");
67+
accordionContent.classList.add("accordion-content");
68+
const contentDiv = document.createElement("div");
69+
contentDiv.id = "constraint-menu-content";
70+
accordionContent.appendChild(contentDiv);
71+
contentDiv.appendChild(this.buildConstraintInputWrapper());
72+
contentDiv.appendChild(this.buildConstraintListWrapper());
6773
containerElement.appendChild(this.buildRunButton());
74+
containerElement.appendChild(accordionContent);
6875
}
6976

7077
private buildConstraintInputWrapper(): HTMLElement {
@@ -316,4 +323,8 @@ export class ConstraintMenu extends AbstractUIExtension {
316323

317324
e.layout({ height: cHeight, width: cWidth });
318325
}
326+
327+
switchTheme(useDark: boolean): void {
328+
this.editor?.updateOptions({ theme: useDark ? "vs-dark" : "vs" });
329+
}
319330
}

‎src/features/constraintMenu/constraintMenu.css‎

Lines changed: 23 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,25 @@ div.constraint-menu {
22
right: 20px;
33
bottom: 20px;
44
padding: 10px 10px;
5-
display: grid;
6-
grid-template-columns: auto 1fr;
7-
grid-template-rows: 1fr;
8-
grid-auto-rows: 0;
9-
overflow: visible;
10-
gap: 8px;
115
}
126

13-
div.constraint-menu:has(> input:checked) {
14-
grid-template-rows: 1fr 200px 1fr;
7+
#constraint-menu-expand-title {
8+
padding-right: 85px;
159
}
1610

17-
div.constraint-menu > * {
18-
grid-column-start: 1;
19-
grid-column-end: 2;
20-
grid-row-start: 1;
21-
grid-row-end: 2;
11+
#constraint-menu-content {
12+
display: grid;
13+
grid-template-columns: auto 1fr;
14+
grid-template-rows: auto 16px;
15+
gap: 10px;
16+
}
17+
18+
#run-button-container {
19+
position: absolute;
20+
right: 6px;
21+
bottom: 6px;
22+
width: 80px;
23+
z-index: 50;
2224
}
2325

2426
#run-button {
@@ -30,25 +32,8 @@ div.constraint-menu > * {
3032
text-align: center;
3133
text-decoration: none;
3234
display: inline-block;
33-
width: fit-content;
34-
}
35-
36-
#run-button-container {
37-
grid-column-start: 2;
38-
grid-column-end: 3;
39-
grid-row-start: 1;
40-
grid-row-end: 2;
41-
}
42-
43-
#expand-state-constraint:checked ~ #run-button-container {
44-
grid-column-start: 2;
45-
grid-column-end: 3;
46-
grid-row-start: 3;
47-
grid-row-end: 4;
48-
}
49-
50-
#expand-state-constraint:checked ~ #run-button-container > #run-button {
5135
width: 100%;
36+
cursor: pointer;
5237
}
5338

5439
#run-button::before {
@@ -63,63 +48,20 @@ div.constraint-menu > * {
6348
}
6449

6550
#constraint-menu-input {
66-
min-width: 300px;
67-
grid-row-start: 2;
68-
grid-row-end: 4;
51+
grid-row-start: 1;
52+
grid-row-end: 3;
6953
grid-column-start: 1;
70-
grid-column-end: 2;
71-
display: none;
72-
}
73-
74-
#expand-state-constraint:checked ~ #constraint-menu-input {
75-
display: block;
54+
min-width: 300px;
7655
}
7756

7857
#constraint-menu-list {
79-
grid-row-start: 2;
80-
grid-row-end: 3;
58+
grid-row-start: 1;
59+
grid-row-end: 2;
8160
grid-column-start: 2;
82-
grid-column-end: 3;
83-
display: none;
84-
}
85-
86-
#expand-state-constraint:checked ~ #constraint-menu-list {
87-
display: block;
8861
}
8962

9063
#constraint-menu-expand-label {
91-
padding-right: 2em;
92-
position: relative;
93-
display: flex;
94-
grid-column-start: 1;
95-
grid-column-end: 2;
96-
align-items: center;
97-
}
98-
99-
#expand-state-constraint:checked ~ #constraint-menu-expand-label {
100-
grid-column-end: 3;
101-
}
102-
103-
#constraint-menu-expand-label::after {
104-
content: "";
105-
background-image: url("@fortawesome/fontawesome-free/svgs/solid/chevron-up.svg");
106-
right: 0.5em;
107-
position: absolute;
108-
display: inline-block;
109-
110-
/* only filter=invert(1) if dark mode is enabled aka --dark-mode is set to 1 */
111-
filter: invert(var(--dark-mode));
112-
113-
width: 16px;
114-
height: 16px;
115-
background-size: 16px 16px;
116-
117-
transition: transform 500ms ease;
118-
transform: scaleY(1);
119-
}
120-
121-
#expand-state-constraint:checked ~ #constraint-menu-expand-label::after {
122-
transform: scaleY(-1);
64+
/*padding-right: 2em;*/
12365
}
12466

12567
.constrain-label input {
@@ -132,7 +74,7 @@ div.constraint-menu > * {
13274
}
13375

13476
.constrain-label.selected input {
135-
border: 1px solid var(--color-foreground);
77+
border: 2px solid var(--color-foreground);
13678
}
13779

13880
.constrain-label button {

‎src/features/constraintMenu/di.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { EDITOR_TYPES } from "../../utils";
33
import { ConstraintMenu } from "./ConstraintMenu";
44
import { TYPES } from "sprotty";
55
import { ConstraintRegistry } from "./constraintRegistry";
6+
import { SWITCHABLE } from "../../common/lightDarkSwitch";
67

78
// This module contains an UI extension that adds a tool palette to the editor.
89
// This tool palette allows the user to create new nodes and edges.
@@ -14,4 +15,5 @@ export const constraintMenuModule = new ContainerModule((bind) => {
1415
bind(ConstraintMenu).toSelf().inSingletonScope();
1516
bind(TYPES.IUIExtension).toService(ConstraintMenu);
1617
bind(EDITOR_TYPES.DefaultUIElement).toService(ConstraintMenu);
18+
bind(SWITCHABLE).toService(ConstraintMenu);
1719
});

‎src/features/labels/labelTypeEditor.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,7 @@ div.label-type-editor-ui {
6363
padding: 3px;
6464
margin: 4px;
6565
}
66+
67+
#accordion-state-label-title {
68+
padding-right: 5px;
69+
}

‎src/features/labels/labelTypeEditor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export class LabelTypeEditorUI extends AbstractUIExtension implements KeyListene
8080
containerElement.classList.add("ui-float");
8181
containerElement.innerHTML = `
8282
<label for="accordion-state-label-types">
83-
<div class="accordion-button">Label Types</div>
83+
<div class="accordion-button cevron-left" id="accordion-state-label-title">Label Types</div>
8484
</label>
8585
<div class="accordion-content">
8686
<div class="label-type-edit-ui-inner"></div>

0 commit comments

Comments
 (0)