Skip to content

Commit 4b74d5c

Browse files
gonfunkogonfunko
authored
fix: resolve various UI issues (#117)
* chore: format checkable_continuous_flyout.js * fix: adjust flyout layout constants * fix: align block connection highlights with Scratch * fix: fix various CSS issues
1 parent 2a543f5 commit 4b74d5c

File tree

4 files changed

+157
-62
lines changed

4 files changed

+157
-62
lines changed

‎core/css.js

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
* See the License for the specific language governing permissions and
1818
* limitations under the License.
1919
*/
20-
import * as Blockly from 'blockly/core';
20+
import * as Blockly from "blockly/core";
2121

2222
const styles = `
2323
.blocklySvg {
@@ -411,18 +411,19 @@ const styles = `
411411
cursor: pointer;
412412
}
413413
414-
.zelos-renderer.scratch-theme .blocklyFlyoutLabelText {
414+
.scratch-renderer.zelos-theme .blocklyFlyoutLabelText {
415415
font-family: "Helvetica Neue", Helvetica, sans-serif;
416416
font-size: 14pt;
417417
fill: #575E75;
418418
font-weight: bold;
419419
}
420420
421-
.zelos-renderer.scratch-theme .blocklyText {
421+
.scratch-renderer.zelos-theme .blocklyText,
422+
.scratch-renderer.zelos-theme .blocklyHtmlInput {
422423
font-weight: 500;
423424
}
424425
425-
.zelos-renderer.scratch-theme .blocklyFlyoutButton .blocklyText {
426+
.scratch-renderer.zelos-theme .blocklyFlyoutButton .blocklyText {
426427
fill: var(--colour-textFieldText);
427428
}
428429
@@ -850,7 +851,7 @@ const styles = `
850851
cursor: url("<<<PATH>>>/handdelete.cur"), auto;
851852
}
852853
853-
.blocklyTreeSelected {
854+
.blocklyToolboxSelected {
854855
background-color: var(--colour-toolboxSelected);
855856
}
856857
@@ -1319,7 +1320,7 @@ const styles = `
13191320
transform: rotate(-180deg);
13201321
}
13211322
1322-
.zelos-renderer.scratch-theme .blocklyComment .blocklyTextarea {
1323+
.scratch-renderer.zelos-theme .blocklyComment .blocklyTextarea {
13231324
border: none;
13241325
--commentFillColour: #fef49c;
13251326
font-size: 12pt;
@@ -1328,10 +1329,28 @@ const styles = `
13281329
color: #575e75;
13291330
}
13301331
1331-
.zelos-renderer.scratch-theme .blocklyCommentText.blocklyText {
1332+
.scratch-renderer.zelos-theme .blocklyCommentText.blocklyText {
13321333
font-weight: 400;
13331334
}
13341335
1336+
.blocklyToolboxCategory {
1337+
height: auto;
1338+
line-height: auto;
1339+
margin-bottom: 0;
1340+
padding: 0.375rem 0px;
1341+
cursor: pointer;
1342+
}
1343+
.blocklyToolboxCategory:hover {
1344+
color: #4c97ff;
1345+
}
1346+
.blocklyDropDownDiv .blocklyMenuItem {
1347+
color: #fff;
1348+
font-weight: bold;
1349+
}
1350+
.blocklyToolboxSelected .blocklyTreeLabel {
1351+
color: var(--colour-toolboxText);
1352+
}
1353+
13351354
.blocklyDeleteIcon {
13361355
display: block;
13371356
width: 32px;

‎src/checkable_continuous_flyout.js

Lines changed: 111 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as Blockly from 'blockly';
2-
import {ContinuousFlyout} from '@blockly/continuous-toolbox';
1+
import * as Blockly from "blockly";
2+
import { ContinuousFlyout } from "@blockly/continuous-toolbox";
33

44
export class CheckableContinuousFlyout extends ContinuousFlyout {
55
/**
@@ -22,12 +22,18 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
2222
* @const
2323
*/
2424
static CHECKMARK_PATH =
25-
'M' + CheckableContinuousFlyout.CHECKBOX_SIZE / 4 +
26-
' ' + CheckableContinuousFlyout.CHECKBOX_SIZE / 2 +
27-
'L' + 5 * CheckableContinuousFlyout.CHECKBOX_SIZE / 12 +
28-
' ' + 2 * CheckableContinuousFlyout.CHECKBOX_SIZE / 3 +
29-
'L' + 3 * CheckableContinuousFlyout.CHECKBOX_SIZE / 4 +
30-
' ' + CheckableContinuousFlyout.CHECKBOX_SIZE / 3;
25+
"M" +
26+
CheckableContinuousFlyout.CHECKBOX_SIZE / 4 +
27+
" " +
28+
CheckableContinuousFlyout.CHECKBOX_SIZE / 2 +
29+
"L" +
30+
(5 * CheckableContinuousFlyout.CHECKBOX_SIZE) / 12 +
31+
" " +
32+
(2 * CheckableContinuousFlyout.CHECKBOX_SIZE) / 3 +
33+
"L" +
34+
(3 * CheckableContinuousFlyout.CHECKBOX_SIZE) / 4 +
35+
" " +
36+
CheckableContinuousFlyout.CHECKBOX_SIZE / 3;
3137

3238
/**
3339
* Size of the checkbox corner radius
@@ -48,15 +54,14 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
4854
* @const
4955
*/
5056
static CHECKBOX_SPACE_X =
51-
CheckableContinuousFlyout.CHECKBOX_SIZE +
52-
2 * CheckableContinuousFlyout.CHECKBOX_MARGIN;
53-
57+
CheckableContinuousFlyout.CHECKBOX_SIZE +
58+
2 * CheckableContinuousFlyout.CHECKBOX_MARGIN;
5459

5560
constructor(workspaceOptions) {
5661
super(workspaceOptions);
57-
this.tabWidth_ = 0;
58-
this.MARGIN = 10;
59-
this.GAP_Y = 8;
62+
this.tabWidth_ = -2;
63+
this.MARGIN = 12;
64+
this.GAP_Y = 12;
6065
CheckableContinuousFlyout.CHECKBOX_MARGIN = this.MARGIN;
6166

6267
/**
@@ -69,6 +74,13 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
6974
this.checkboxes_ = new Map();
7075
}
7176

77+
initFlyoutButton_(button, x, y) {
78+
if (button.isLabel()) {
79+
button.height = 40;
80+
}
81+
super.initFlyoutButton_(button, x, y);
82+
}
83+
7284
show(flyoutDef) {
7385
this.clearOldCheckboxes();
7486
super.show(flyoutDef);
@@ -95,16 +107,30 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
95107
if (block.checkboxInFlyout) {
96108
const coordinates = block.getRelativeToSurfaceXY();
97109
const checkbox = this.createCheckbox_(
98-
block, coordinates.x, coordinates.y, block.getHeightWidth());
110+
block,
111+
coordinates.x,
112+
coordinates.y,
113+
block.getHeightWidth()
114+
);
99115
let moveX = coordinates.x;
100116
if (this.RTL) {
101-
moveX -= (CheckableContinuousFlyout.CHECKBOX_SIZE + CheckableContinuousFlyout.CHECKBOX_MARGIN);
117+
moveX -=
118+
CheckableContinuousFlyout.CHECKBOX_SIZE +
119+
CheckableContinuousFlyout.CHECKBOX_MARGIN;
102120
} else {
103-
moveX += CheckableContinuousFlyout.CHECKBOX_SIZE + CheckableContinuousFlyout.CHECKBOX_MARGIN;
121+
moveX +=
122+
CheckableContinuousFlyout.CHECKBOX_SIZE +
123+
CheckableContinuousFlyout.CHECKBOX_MARGIN;
104124
}
105125
block.moveBy(moveX, 0);
106-
this.listeners.push(Blockly.browserEvents.bind(checkbox.svgRoot,
107-
'mousedown', null, this.checkboxClicked_(checkbox)));
126+
this.listeners.push(
127+
Blockly.browserEvents.bind(
128+
checkbox.svgRoot,
129+
"mousedown",
130+
null,
131+
this.checkboxClicked_(checkbox)
132+
)
133+
);
108134
}
109135
super.addBlockListeners_(root, block, rect);
110136
}
@@ -118,7 +144,7 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
118144
* @private
119145
*/
120146
checkboxClicked_(checkboxObj) {
121-
return function(e) {
147+
return function (e) {
122148
this.setCheckboxState(checkboxObj.block.id, !checkboxObj.clicked);
123149
// This event has been handled. No need to bubble up to the document.
124150
e.stopPropagation();
@@ -138,40 +164,63 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
138164
createCheckbox_(block, cursorX, cursorY, blockHW) {
139165
var checkboxState = this.getCheckboxState(block.id);
140166
var svgRoot = block.getSvgRoot();
141-
var extraSpace = CheckableContinuousFlyout.CHECKBOX_SIZE + CheckableContinuousFlyout.CHECKBOX_MARGIN;
142-
var xOffset = this.RTL ? this.getWidth() / this.workspace_.scale - extraSpace : cursorX;
143-
var yOffset = cursorY + blockHW.height / 2 - CheckableContinuousFlyout.CHECKBOX_SIZE / 2;
167+
var extraSpace =
168+
CheckableContinuousFlyout.CHECKBOX_SIZE +
169+
CheckableContinuousFlyout.CHECKBOX_MARGIN;
170+
var xOffset = this.RTL
171+
? this.getWidth() / this.workspace_.scale - extraSpace
172+
: cursorX;
173+
var yOffset =
174+
cursorY +
175+
blockHW.height / 2 -
176+
CheckableContinuousFlyout.CHECKBOX_SIZE / 2;
144177
var touchMargin = CheckableContinuousFlyout.CHECKBOX_TOUCH_PADDING;
145-
var checkboxGroup = Blockly.utils.dom.createSvgElement('g',
146-
{
147-
'transform': `translate(${xOffset}, ${yOffset})`,
148-
'fill': 'transparent',
149-
}, null);
150-
Blockly.utils.dom.createSvgElement('rect',
151-
{
152-
'class': 'blocklyFlyoutCheckbox',
153-
'height': CheckableContinuousFlyout.CHECKBOX_SIZE,
154-
'width': CheckableContinuousFlyout.CHECKBOX_SIZE,
155-
'rx': CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS,
156-
'ry': CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS
157-
}, checkboxGroup);
158-
Blockly.utils.dom.createSvgElement('path',
159-
{
160-
'class': 'blocklyFlyoutCheckboxPath',
161-
'd': CheckableContinuousFlyout.CHECKMARK_PATH
162-
}, checkboxGroup);
163-
Blockly.utils.dom.createSvgElement('rect',
164-
{
165-
'class': 'blocklyTouchTargetBackground',
166-
'x': -touchMargin + 'px',
167-
'y': -touchMargin + 'px',
168-
'height': CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
169-
'width': CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
170-
}, checkboxGroup);
171-
var checkboxObj = {svgRoot: checkboxGroup, clicked: checkboxState, block: block};
178+
var checkboxGroup = Blockly.utils.dom.createSvgElement(
179+
"g",
180+
{
181+
transform: `translate(${xOffset}, ${yOffset})`,
182+
fill: "transparent",
183+
},
184+
null
185+
);
186+
Blockly.utils.dom.createSvgElement(
187+
"rect",
188+
{
189+
class: "blocklyFlyoutCheckbox",
190+
height: CheckableContinuousFlyout.CHECKBOX_SIZE,
191+
width: CheckableContinuousFlyout.CHECKBOX_SIZE,
192+
rx: CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS,
193+
ry: CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS,
194+
},
195+
checkboxGroup
196+
);
197+
Blockly.utils.dom.createSvgElement(
198+
"path",
199+
{
200+
class: "blocklyFlyoutCheckboxPath",
201+
d: CheckableContinuousFlyout.CHECKMARK_PATH,
202+
},
203+
checkboxGroup
204+
);
205+
Blockly.utils.dom.createSvgElement(
206+
"rect",
207+
{
208+
class: "blocklyTouchTargetBackground",
209+
x: -touchMargin + "px",
210+
y: -touchMargin + "px",
211+
height: CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
212+
width: CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
213+
},
214+
checkboxGroup
215+
);
216+
var checkboxObj = {
217+
svgRoot: checkboxGroup,
218+
clicked: checkboxState,
219+
block: block,
220+
};
172221

173222
if (checkboxState) {
174-
Blockly.utils.dom.addClass((checkboxObj.svgRoot), 'checked');
223+
Blockly.utils.dom.addClass(checkboxObj.svgRoot, "checked");
175224
}
176225

177226
this.workspace_.getCanvas().insertBefore(checkboxGroup, svgRoot);
@@ -195,13 +244,20 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
195244
checkboxObj.clicked = value;
196245

197246
if (checkboxObj.clicked) {
198-
Blockly.utils.dom.addClass(checkboxObj.svgRoot, 'checked');
247+
Blockly.utils.dom.addClass(checkboxObj.svgRoot, "checked");
199248
} else {
200-
Blockly.utils.dom.removeClass(checkboxObj.svgRoot, 'checked');
249+
Blockly.utils.dom.removeClass(checkboxObj.svgRoot, "checked");
201250
}
202251

203-
Blockly.Events.fire(new Blockly.Events.BlockChange(
204-
checkboxObj.block, 'checkbox', null, oldValue, value));
252+
Blockly.Events.fire(
253+
new Blockly.Events.BlockChange(
254+
checkboxObj.block,
255+
"checkbox",
256+
null,
257+
oldValue,
258+
value
259+
)
260+
);
205261
}
206262

207263
/**

‎src/renderer/constants.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* @license
3+
* Copyright 2024 Google LLC
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
import * as Blockly from "blockly/core";
8+
9+
export class ConstantProvider extends Blockly.zelos.ConstantProvider {
10+
REPLACEMENT_GLOW_COLOUR = "#ffffff";
11+
}

‎src/renderer/renderer.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import * as Blockly from "blockly/core";
88
import { Drawer } from "./drawer.js";
99
import { RenderInfo } from "./render_info.js";
10+
import { ConstantProvider } from "./constants.js";
1011

1112
export class ScratchRenderer extends Blockly.zelos.Renderer {
1213
makeDrawer_(block, info) {
@@ -16,6 +17,14 @@ export class ScratchRenderer extends Blockly.zelos.Renderer {
1617
makeRenderInfo_(block) {
1718
return new RenderInfo(this, block);
1819
}
20+
21+
makeConstants_() {
22+
return new ConstantProvider();
23+
}
24+
25+
shouldHighlightConnection(connection) {
26+
return false;
27+
}
1928
}
2029

2130
Blockly.blockRendering.register("scratch", ScratchRenderer);

0 commit comments

Comments
 (0)