Skip to content

Commit 1645129

Browse files
gonfunkogonfunko
authored
fix: load CSS and fix up UI appearance (#33)
* fix: load CSS and fix up UI appearance * fix: fix size of flyout section header labels
1 parent ea68b1c commit 1645129

File tree

3 files changed

+1223
-1300
lines changed

3 files changed

+1223
-1300
lines changed

‎core/colours.js

Lines changed: 123 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -17,109 +17,114 @@
1717
* See the License for the specific language governing permissions and
1818
* limitations under the License.
1919
*/
20+
import * as Blockly from 'blockly/core';
21+
22+
const cssColours = {
23+
// SVG colours: these must be specificed in #RRGGBB style
24+
// To add an opacity, this must be specified as a separate property (for SVG fill-opacity)
25+
"motion": {
26+
"primary": "#4C97FF",
27+
"secondary": "#4280D7",
28+
"tertiary": "#3373CC",
29+
"quaternary": "#3373CC"
30+
},
31+
"looks": {
32+
"primary": "#9966FF",
33+
"secondary": "#855CD6",
34+
"tertiary": "#774DCB",
35+
"quaternary": "#774DCB"
36+
},
37+
"sounds": {
38+
"primary": "#CF63CF",
39+
"secondary": "#C94FC9",
40+
"tertiary": "#BD42BD",
41+
"quaternary": "#BD42BD"
42+
},
43+
"control": {
44+
"primary": "#FFAB19",
45+
"secondary": "#EC9C13",
46+
"tertiary": "#CF8B17",
47+
"quaternary": "#CF8B17"
48+
},
49+
"event": {
50+
"primary": "#FFBF00",
51+
"secondary": "#E6AC00",
52+
"tertiary": "#CC9900",
53+
"quaternary": "#CC9900"
54+
},
55+
"sensing": {
56+
"primary": "#5CB1D6",
57+
"secondary": "#47A8D1",
58+
"tertiary": "#2E8EB8",
59+
"quaternary": "#2E8EB8"
60+
},
61+
"pen": {
62+
"primary": "#0fBD8C",
63+
"secondary": "#0DA57A",
64+
"tertiary": "#0B8E69",
65+
"quaternary": "#0B8E69"
66+
},
67+
"operators": {
68+
"primary": "#59C059",
69+
"secondary": "#46B946",
70+
"tertiary": "#389438",
71+
"quaternary": "#389438"
72+
},
73+
"data": {
74+
"primary": "#FF8C1A",
75+
"secondary": "#FF8000",
76+
"tertiary": "#DB6E00",
77+
"quaternary": "#DB6E00"
78+
},
79+
// This is not a new category, but rather for differentiation
80+
// between lists and scalar variables.
81+
"data_lists": {
82+
"primary": "#FF661A",
83+
"secondary": "#FF5500",
84+
"tertiary": "#E64D00",
85+
"quaternary": "#E64D00"
86+
},
87+
"more": {
88+
"primary": "#FF6680",
89+
"secondary": "#FF4D6A",
90+
"tertiary": "#FF3355",
91+
"quaternary": "#FF3355"
92+
},
93+
"text": "#FFFFFF",
94+
"workspace": "#F9F9F9",
95+
"toolboxHover": "#4C97FF",
96+
"toolboxSelected": "#e9eef2",
97+
"toolboxText": "#575E75",
98+
"toolbox": "#FFFFFF",
99+
"flyout": "#F9F9F9",
100+
"scrollbar": "#CECDCE",
101+
"scrollbarHover": '#CECDCE',
102+
"textField": "#FFFFFF",
103+
"textFieldText": "#575E75",
104+
"insertionMarker": "#000000",
105+
"insertionMarkerOpacity": 0.2,
106+
"dragShadowOpacity": 0.3,
107+
"stackGlow": "#FFF200",
108+
"stackGlowSize": 4,
109+
"stackGlowOpacity": 1,
110+
"replacementGlow": "#FFFFFF",
111+
"replacementGlowSize": 2,
112+
"replacementGlowOpacity": 1,
113+
"colourPickerStroke": "#FFFFFF",
114+
// CSS colours: support RGBA
115+
"fieldShadow": "rgba(0,0,0,0.1)",
116+
"dropDownShadow": "rgba(0, 0, 0, .3)",
117+
"numPadBackground": "#547AB2",
118+
"numPadBorder": "#435F91",
119+
"numPadActiveBackground": "#435F91",
120+
"numPadText": "white", // Do not use hex here, it cannot be inlined with data-uri SVG
121+
"valueReportBackground": "#FFFFFF",
122+
"valueReportBorder": "#AAAAAA",
123+
"menuHover": "rgba(0, 0, 0, 0.2)",
124+
};
20125

21126
const Colours = {
22-
// SVG colours: these must be specificed in #RRGGBB style
23-
// To add an opacity, this must be specified as a separate property (for SVG fill-opacity)
24-
"motion": {
25-
"primary": "#4C97FF",
26-
"secondary": "#4280D7",
27-
"tertiary": "#3373CC",
28-
"quaternary": "#3373CC"
29-
},
30-
"looks": {
31-
"primary": "#9966FF",
32-
"secondary": "#855CD6",
33-
"tertiary": "#774DCB",
34-
"quaternary": "#774DCB"
35-
},
36-
"sounds": {
37-
"primary": "#CF63CF",
38-
"secondary": "#C94FC9",
39-
"tertiary": "#BD42BD",
40-
"quaternary": "#BD42BD"
41-
},
42-
"control": {
43-
"primary": "#FFAB19",
44-
"secondary": "#EC9C13",
45-
"tertiary": "#CF8B17",
46-
"quaternary": "#CF8B17"
47-
},
48-
"event": {
49-
"primary": "#FFBF00",
50-
"secondary": "#E6AC00",
51-
"tertiary": "#CC9900",
52-
"quaternary": "#CC9900"
53-
},
54-
"sensing": {
55-
"primary": "#5CB1D6",
56-
"secondary": "#47A8D1",
57-
"tertiary": "#2E8EB8",
58-
"quaternary": "#2E8EB8"
59-
},
60-
"pen": {
61-
"primary": "#0fBD8C",
62-
"secondary": "#0DA57A",
63-
"tertiary": "#0B8E69",
64-
"quaternary": "#0B8E69"
65-
},
66-
"operators": {
67-
"primary": "#59C059",
68-
"secondary": "#46B946",
69-
"tertiary": "#389438",
70-
"quaternary": "#389438"
71-
},
72-
"data": {
73-
"primary": "#FF8C1A",
74-
"secondary": "#FF8000",
75-
"tertiary": "#DB6E00",
76-
"quaternary": "#DB6E00"
77-
},
78-
// This is not a new category, but rather for differentiation
79-
// between lists and scalar variables.
80-
"data_lists": {
81-
"primary": "#FF661A",
82-
"secondary": "#FF5500",
83-
"tertiary": "#E64D00",
84-
"quaternary": "#E64D00"
85-
},
86-
"more": {
87-
"primary": "#FF6680",
88-
"secondary": "#FF4D6A",
89-
"tertiary": "#FF3355",
90-
"quaternary": "#FF3355"
91-
},
92-
"text": "#FFFFFF",
93-
"workspace": "#F9F9F9",
94-
"toolboxHover": "#4C97FF",
95-
"toolboxSelected": "#e9eef2",
96-
"toolboxText": "#575E75",
97-
"toolbox": "#FFFFFF",
98-
"flyout": "#F9F9F9",
99-
"scrollbar": "#CECDCE",
100-
"scrollbarHover": '#CECDCE',
101-
"textField": "#FFFFFF",
102-
"textFieldText": "#575E75",
103-
"insertionMarker": "#000000",
104-
"insertionMarkerOpacity": 0.2,
105-
"dragShadowOpacity": 0.3,
106-
"stackGlow": "#FFF200",
107-
"stackGlowSize": 4,
108-
"stackGlowOpacity": 1,
109-
"replacementGlow": "#FFFFFF",
110-
"replacementGlowSize": 2,
111-
"replacementGlowOpacity": 1,
112-
"colourPickerStroke": "#FFFFFF",
113-
// CSS colours: support RGBA
114-
"fieldShadow": "rgba(0,0,0,0.1)",
115-
"dropDownShadow": "rgba(0, 0, 0, .3)",
116-
"numPadBackground": "#547AB2",
117-
"numPadBorder": "#435F91",
118-
"numPadActiveBackground": "#435F91",
119-
"numPadText": "white", // Do not use hex here, it cannot be inlined with data-uri SVG
120-
"valueReportBackground": "#FFFFFF",
121-
"valueReportBorder": "#AAAAAA",
122-
"menuHover": "rgba(0, 0, 0, 0.2)",
127+
...cssColours,
123128
overrideColours: function(colours) {
124129
// Colour overrides provided by the injection
125130
if (colours) {
@@ -148,4 +153,21 @@ const Colours = {
148153
}
149154
};
150155

156+
function varify(coloursObj, prefix = '--colour') {
157+
return Object.keys(coloursObj).map(key => {
158+
const colour = coloursObj[key];
159+
if (typeof colour === 'string') {
160+
return `${prefix}-${key}: ${colour};`;
161+
} else {
162+
return varify(colour, `${prefix}-${key}`);
163+
}
164+
}).join('\n');
165+
}
166+
167+
const cssVariables = `:root {
168+
${varify(cssColours)}
169+
}`;
170+
171+
Blockly.Css.register(cssVariables);
172+
151173
export {Colours};

0 commit comments

Comments
 (0)