scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-28 22:10:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Increase touchable size of checkboxes and extension status buttons.

Browse source
This commit is contained in:
Paul Kaplan 2019-06-10 11:06:46 -04:00
parent 24ab566b65
commit 6d59fb722f
3 changed files with 40 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
core/css.js
View file

@ -522,6 +522,11 @@ Blockly.Css.CONTENT = [
'opacity: 0;',
'}',
'.blocklyTouchTargetBackground {',
'fill: transparent;',
'cursor: pointer;',
'}',
'.blocklyFlyoutLabelText {',
'font-family: "Helvetica Neue", Helvetica, sans-serif;',
'font-size: 14pt;',
@ -1260,12 +1265,13 @@ Blockly.Css.CONTENT = [
'stroke: #c8c8c8;',
'}',
'.blocklyFlyoutCheckbox.checked {',
'.checked > .blocklyFlyoutCheckbox {',
'fill: ' + Blockly.Colours.motion.primary + ';',
'stroke: ' + Blockly.Colours.motion.tertiary + ';',
'}',
'.blocklyFlyoutCheckboxPath {',
'fill: transparent;',
'stroke: white;',
'stroke-width: 3;',
'stroke-linecap: round;',

19
core/flyout_extension_category_header.js
View file

@ -77,9 +77,10 @@ Blockly.FlyoutExtensionCategoryHeader.prototype.createDom = function() {
this.refreshStatus();
var statusButtonWidth = 25;
var marginX = 15;
var marginY = 10;
var statusButtonWidth = 30;
var marginX = 20;
var marginY = 5;
var touchPadding = 16;
var statusButtonX = this.workspace_.RTL ? (marginX - this.flyoutWidth_ + statusButtonWidth) :
(this.flyoutWidth_ - statusButtonWidth - marginX) / this.workspace_.scale;
@ -96,12 +97,22 @@ Blockly.FlyoutExtensionCategoryHeader.prototype.createDom = function() {
'y': marginY + 'px'
},
this.svgGroup_);
this.imageElementBackground_ = Blockly.utils.createSvgElement(
'rect',
{
'class': 'blocklyTouchTargetBackground',
'height': statusButtonWidth + 2 * touchPadding + 'px',
'width': statusButtonWidth + 2 * touchPadding + 'px',
'x': (statusButtonX - touchPadding) + 'px',
'y': (marginY - touchPadding) + 'px'
},
this.svgGroup_);
this.setImageSrc(this.imageSrc_);
}
this.callback_ = Blockly.statusButtonCallback.bind(this, this.extensionId);
this.mouseUpWrapper_ = Blockly.bindEventWithChecks_(this.imageElement_, 'mouseup',
this.mouseUpWrapper_ = Blockly.bindEventWithChecks_(this.imageElementBackground_, 'mouseup',
this, this.onMouseUp_);
return this.svgGroup_;
};

20
core/flyout_vertical.js
View file

@ -86,7 +86,14 @@ Blockly.VerticalFlyout.prototype.DEFAULT_WIDTH = 250;
* @type {number}
* @const
*/
Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE = 20;
Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE = 25;
/**
* Amount of touchable padding around reporter checkboxes.
* @type {number}
* @const
*/
Blockly.VerticalFlyout.prototype.CHECKBOX_TOUCH_PADDING = 12;
/**
* SVG path data for checkmark in checkbox.
@ -597,13 +604,14 @@ Blockly.VerticalFlyout.prototype.createCheckbox_ = function(block, cursorX,
var extraSpace = this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN;
var width = this.RTL ? this.getWidth() / this.workspace_.scale - extraSpace : cursorX;
var height = cursorY + blockHW.height / 2 - this.CHECKBOX_SIZE / 2;
var touchMargin = this.CHECKBOX_TOUCH_PADDING;
var checkboxGroup = Blockly.utils.createSvgElement('g',
{
'class': 'blocklyFlyoutCheckbox',
'transform': 'translate(' + width + ', ' + height + ')'
}, null);
Blockly.utils.createSvgElement('rect',
{
'class': 'blocklyFlyoutCheckbox',
'height': this.CHECKBOX_SIZE,
'width': this.CHECKBOX_SIZE,
'rx': this.CHECKBOX_CORNER_RADIUS,
@ -614,6 +622,14 @@ Blockly.VerticalFlyout.prototype.createCheckbox_ = function(block, cursorX,
'class': 'blocklyFlyoutCheckboxPath',
'd': this.CHECKMARK_PATH
}, checkboxGroup);
Blockly.utils.createSvgElement('rect',
{
'class': 'blocklyTouchTargetBackground',
'x': -touchMargin + 'px',
'y': -touchMargin + 'px',
'height': this.CHECKBOX_SIZE + 2 * touchMargin,
'width': this.CHECKBOX_SIZE + 2 * touchMargin,
}, checkboxGroup);
var checkboxObj = {svgRoot: checkboxGroup, clicked: checkboxState, block: block};
if (checkboxState) {