Skip to content

Commit e7b85f2

Browse files
edgarmuelleredgarmueller
authored
Merge pull request eclipsesource#572 from eneufeld/jsonforms2
Add theming option to examples
2 parents 000df50 + f7c9513 commit e7b85f2

File tree

3 files changed

+132
-20
lines changed

3 files changed

+132
-20
lines changed

‎example/example.css‎

Lines changed: 94 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,59 @@
1+
:root {
2+
--jsf-main-bg-color: white;
3+
--jsf-modest-bg-color: #dddddd;
4+
--jsf-border-color: lightgray;
5+
--jsf-modest-bg-highlight-color: silver;
6+
--jsf-validation-color: red;
7+
--jsf-main-fg-color: black;
8+
background-color: var(--jsf-main-bg-color);
9+
color: var(--jsf-main-fg-color);
10+
}
11+
body {
12+
width: calc(100vw - 2em);
13+
height: calc(100vh - 2em);
14+
margin: 0;
15+
padding: 1em;
16+
}
17+
18+
body.dark {
19+
--jsf-main-bg-color: #222227;
20+
--jsf-modest-bg-color: #333333;
21+
--jsf-border-color: #444444;
22+
--jsf-modest-bg-highlight-color: #444444;
23+
--jsf-validation-color: darkred;
24+
--jsf-main-fg-color: #999999;
25+
background-color: var(--jsf-main-bg-color);
26+
color: var(--jsf-main-fg-color);
27+
}
28+
body.dark select {
29+
background-color: var(--jsf-main-bg-color);
30+
color: var(--jsf-main-fg-color);
31+
border-color: var(--jsf-border-color);
32+
}
33+
body.dark textarea {
34+
background-color: var(--jsf-main-bg-color);
35+
color: var(--jsf-main-fg-color);
36+
}
37+
body.dark button {
38+
background-color: var(--jsf-modest-bg-color);
39+
color: var(--jsf-main-fg-color);
40+
}
41+
body.labelFixed .control {
42+
flex-direction: row;
43+
}
44+
body.labelFixed .control > label {
45+
min-width: 10em;
46+
text-align: end;
47+
margin-right: 1em;
48+
}
49+
body.labelFixed .control > .input {
50+
flex: 1;
51+
}
52+
/* Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=375693 */
53+
/*body.labelFixed .control > fieldset {
54+
display: block;
55+
width: 100%;
56+
}*/
157
/* Common */
258
[hidden] {display: none;}
359
/* Controls */
@@ -7,7 +63,7 @@ input {
763
.jsf-label {
864
margin: 0.5em 1em;
965
font-weight: bold;
10-
border-bottom: 1px solid lightgray;
66+
border-bottom: 1px solid var(--jsf-border-color);
1167
}
1268
.control {
1369
display: flex;
@@ -20,18 +76,24 @@ input {
2076
margin-left: 0;
2177
margin-right: -0.25em;
2278
}
23-
.control > label {font-weight: bold;}
79+
.control > label {
80+
font-weight: bold;
81+
color: var(--jsf-main-fg-color);
82+
}
2483
.control > .validation:empty {margin-left: 0;}
25-
.control > .validation {color:red;}
84+
.control > .validation {color: var(--jsf-validation-color);}
2685
.control > .input {
2786
border-style: solid;
2887
border-width: thin;
2988
border-radius: 0.2em;
30-
border-color: lightgray;
89+
border-color: var(--jsf-border-color);
3190
padding: 0.2em;
91+
color: var(--jsf-main-fg-color);
92+
}
93+
.control > input.input {
3294
background-color: transparent;
3395
}
34-
.control.validation_error > .input {border-color: red;}
96+
.control.validation_error > .input {border-color: var(--jsf-validation-color);}
3597
.control[hidden] {
3698
display: none;
3799
}
@@ -47,6 +109,7 @@ input {
47109
.horizontal-layout {
48110
display: flex;
49111
flex-direction: row;
112+
align-items: center;
50113
}
51114
.horizontal-layout[hidden] {
52115
display: none;
@@ -56,7 +119,7 @@ input {
56119
display: flex;
57120
flex-direction: column;
58121
border-style: solid;
59-
border-color: lightgray;
122+
border-color: var(--jsf-border-color);
60123
border-width: thin;
61124
border-radius: 0.2em;
62125
}
@@ -66,6 +129,7 @@ input {
66129
.group-layout > legend {
67130
padding: 0 0.5em;
68131
font-weight: bold;
132+
color: var(--jsf-main-fg-color);
69133
}
70134
.jsf-categorization {
71135
display: flex;
@@ -77,7 +141,7 @@ input {
77141
.jsf-categorization > * {
78142
border-style: solid;
79143
border-width: thin;
80-
border-color: lightgray;
144+
border-color: var(--jsf-border-color);
81145
border-radius: 0.2em;
82146
}
83147
.jsf-categorization > *:first-child {
@@ -88,7 +152,11 @@ input {
88152
list-style-type: none;
89153
font-weight: normal;
90154
}
91-
.jsf-categorization > .jsf-categorization-master ul > li > span {cursor: pointer; display: block;}
155+
.jsf-categorization > .jsf-categorization-master ul > li > span {
156+
cursor: pointer;
157+
display: block;
158+
color: var(--jsf-main-fg-color);
159+
}
92160
.jsf-categorization > .jsf-categorization-master ul > li > span:hover {font-weight: bold;}
93161
.jsf-categorization > .jsf-categorization-master ul > li.jsf-category-group > span {cursor: default;}
94162
.jsf-categorization > .jsf-categorization-master ul > li.jsf-category-group > span:hover {font-weight: normal;}
@@ -105,7 +173,7 @@ input {
105173
.jsf-treeMasterDetail > .jsf-treeMasterDetail-content > * {
106174
border-style: solid;
107175
border-width: thin;
108-
border-color: lightgray;
176+
border-color: var(--jsf-border-color);
109177
border-radius: 0.2em;
110178
}
111179
.jsf-treeMasterDetail > .jsf-treeMasterDetail-content > *:first-child {
@@ -137,6 +205,8 @@ input {
137205
flex-basis: 1em;
138206
min-height: 1em;
139207
margin-right: 0.25em;
208+
background-repeat: no-repeat;
209+
background-position: center;
140210
}
141211
.jsf-treeMasterDetail-master li > div > .icon.folder {
142212
background-image: url('./icons/folder.png');
@@ -153,46 +223,49 @@ input {
153223
flex: 1;
154224
margin-right: 1em;
155225
min-height: 1em;
226+
color: var(--jsf-main-fg-color);
156227
}
157-
.jsf-treeMasterDetail-master li > div > .label:empty {
228+
/* TODO: Needed? */
229+
.jsf-treeMasterDetail-master li > div > .label > span:first-child:empty {
158230
background: #ffff00;
159231
min-height: 1em;
160232
}
161233
.jsf-treeMasterDetail-master li > div > .label:hover {
162234
font-weight: bold;
163235
cursor: pointer;
164-
background-color: gainsboro;
236+
background-color: var(--jsf-modest-bg-color);
165237
}
166238
.jsf-treeMasterDetail-master li > div > .label > .add, .jsf-treeMasterDetail-master li > div > .label > .remove {
167239
display: none;
168240
cursor: pointer;
169241
margin-left: 0.25em;
170242
min-width: 1em;
171-
min-height: 1.2em;
172243
font-weight: normal;
173-
background-color: lightgray;
174244
}
175245
.jsf-treeMasterDetail-master li > div > .label:hover > .add, .jsf-treeMasterDetail-master li > div > .label:hover > .remove {
176246
display: flex;
177247
justify-content: center;
178248
}
249+
.jsf-treeMasterDetail-master li > div > .label:hover > .add:hover, .jsf-treeMasterDetail-master li > div > .label:hover > .remove:hover {
250+
background-color: var(--jsf-modest-bg-highlight-color);
251+
}
179252
.jsf-treeMasterDetail-master li::before, .jsf-treeMasterDetail-master li::after, .jsf-treeMasterDetail-master ul::after {
180253
content: '';
181254
position: absolute;
182255
left:0.2em;
183256
}
184257
.jsf-treeMasterDetail-master li::before {
185-
border-top: 1px solid gray;
258+
border-top: 1px solid var(--jsf-border-color);
186259
top:0.5em;
187260
width: 1em;
188261
}
189262
.jsf-treeMasterDetail-master li::after {
190-
border-left: 1px solid gray;
263+
border-left: 1px solid var(--jsf-border-color);
191264
height:100%;
192265
top:-0.6em;
193266
}
194267
.jsf-treeMasterDetail-master ul::after {
195-
border-left: 1px solid gray;
268+
border-left: 1px solid var(--jsf-border-color);
196269
height: 0.6em;
197270
bottom: 0;
198271
}
@@ -217,9 +290,10 @@ jsonforms-tree > dialog > .content {
217290
}
218291
.array-layout {
219292
display: flex;
293+
flex:1;
220294
flex-direction: column;
221295
border-style: solid;
222-
border-color: lightgray;
296+
border-color: var(--jsf-border-color);
223297
border-width: thin;
224298
border-radius: 0.2em;
225299
}
@@ -232,9 +306,10 @@ jsonforms-tree > dialog > .content {
232306
}
233307
.array-layout > legend > label {
234308
margin-right: 1em;
309+
color: var(--jsf-main-fg-color);
235310
}
236311
.array-layout > .children > * {
237-
border-bottom: 1px solid lightgray;
312+
border-bottom: 1px solid var(--jsf-border-color);
238313
display: block;
239314
}
240315
.array-layout > .children > *:last-child {
@@ -255,7 +330,7 @@ jsonforms-tree > dialog > .content {
255330
margin: 0;
256331
}
257332
.array-table-layout table, .array-table-layout th, .array-table-layout td {
258-
border: 1px solid lightgray;
333+
border: 1px solid var(--jsf-border-color);
259334
border-collapse: collapse;
260335
}
261336
.array-table-layout th, .array-table-layout td {

‎example/example.ts‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export interface ExampleDescription {
1212
setupCallback?: (div: HTMLDivElement) => void;
1313
}
1414
let knownExamples: {[key: string]: ExampleDescription} = {};
15+
let knownStyles : {[key: string]: string} = {
16+
normal: 'Normal Label Top',
17+
dark: 'Dark label Top',
18+
labelFixed: 'Label left Fixed'
19+
};
1520
export const registerExamples = (examples: Array<ExampleDescription>): void => {
1621
examples.forEach(example => knownExamples[example.name] = example);
1722
};
@@ -39,9 +44,14 @@ const changeExample = (selectedExample: string) => {
3944

4045
body.appendChild(jsonForms);
4146
};
42-
window.onload = (ev) => {
47+
const crateExampleSelection = () => {
4348
const examplesDiv = document.getElementById(exampleDivId);
49+
const labelExample = document.createElement('label');
50+
labelExample.textContent = 'Example:';
51+
labelExample.htmlFor = 'example_select';
52+
examplesDiv.appendChild(labelExample);
4453
const select = document.createElement('select');
54+
select.id = 'example_select';
4555
Object.keys(knownExamples).forEach(key => {
4656
const example = knownExamples[key];
4757
const option = document.createElement('option');
@@ -52,4 +62,29 @@ window.onload = (ev) => {
5262
select.onchange = () => (changeExample(select.value));
5363
examplesDiv.appendChild(select);
5464
changeExample(select.value);
65+
}
66+
const changeStyle = (style: string) => {
67+
document.body.className = style;
68+
};
69+
const createStyleSelection = () => {
70+
const examplesDiv = document.getElementById('examples');
71+
const labelStyle = document.createElement('label');
72+
labelStyle.textContent = 'Style:';
73+
labelStyle.htmlFor = 'example_style';
74+
examplesDiv.appendChild(labelStyle);
75+
const select = document.createElement('select');
76+
select.id = 'example_style';
77+
Object.keys(knownStyles).forEach(key => {
78+
const style = knownStyles[key];
79+
const option = document.createElement('option');
80+
option.value = key;
81+
option.label = style;
82+
select.appendChild(option);
83+
});
84+
select.onchange = (ev: Event) => (changeStyle(select.value));
85+
examplesDiv.appendChild(select);
86+
}
87+
window.onload = (ev) => {
88+
crateExampleSelection();
89+
createStyleSelection();
5590
};

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"lodash": "^4.17.4"
3737
},
3838
"devDependencies": {
39+
"@types/gulp": "3.8.28",
3940
"ava": "^0.18.1",
4041
"awesome-typescript-loader": "^3.0.0-beta.18",
4142
"copy-webpack-plugin": "^4.0.1",
@@ -45,6 +46,7 @@
4546
"jsdom": "^9.11.0",
4647
"jsdom-global": "2.1.1",
4748
"lite-server": "^2.3.0",
49+
"ncp": "^2.0.0",
4850
"nyc": "^10.1.2",
4951
"source-map-loader": "^0.1.6",
5052
"tslint": "^4.4.2",

0 commit comments

Comments
 (0)