mirror of
https://github.com/scratchfoundation/scratch-blocks.git
synced 2025-08-28 22:10:31 -04:00
Tweaks to Scratch-style toolbox styling (#669)
* Minor style tweaks to toolbox * Category ordering to match Blockly XML
This commit is contained in:
Tim Mickel
GitHub
parent
2402ca4563
commit
1a3ec368e6
4 changed files with 99 additions and 42 deletions
|
|
@ -77,8 +77,10 @@ Blockly.Colours = {
|
|||
},
|
||||
"text": "#575E75",
|
||||
"workspace": "#F5F8FF",
|
||||
"toolbox": "#DDDDDD",
|
||||
"toolboxText": "#000000",
|
||||
"toolboxHover": "#4C97FF",
|
||||
"toolboxSelected": "#e9eef2",
|
||||
"toolboxText": "#575E75",
|
||||
"toolbox": "#FFFFFF",
|
||||
"flyout": "#DDDDDD",
|
||||
"scrollbar": "#CCCCCC",
|
||||
"scrollbarHover": '#BBBBBB',
|
||||
|
|
|
|||
44
core/css.js
44
core/css.js
|
|
@ -997,27 +997,59 @@ Blockly.Css.CONTENT = [
|
|||
'}',
|
||||
|
||||
'.blocklyFlyoutCheckbox {',
|
||||
'fill: red',
|
||||
'fill: red;',
|
||||
'}',
|
||||
|
||||
'.blocklyFlyoutCheckbox.checked {',
|
||||
'fill: blue',
|
||||
'fill: blue;',
|
||||
'}',
|
||||
|
||||
'.scratchCategoryMenu {',
|
||||
'width:250px',
|
||||
'width: 250px;',
|
||||
'background: $colour_toolbox;',
|
||||
'color: $colour_toolboxText;',
|
||||
'font-size: .9em;',
|
||||
'user-select: none;',
|
||||
'-webkit-user-select: none;',
|
||||
'-moz-user-select: none;',
|
||||
'-ms-user-select: none;',
|
||||
'}',
|
||||
|
||||
'.scratchCategoryRow {',
|
||||
'width:50%',
|
||||
'width: 50%;',
|
||||
'}',
|
||||
|
||||
'.scratchCategoryMenuItem {',
|
||||
'width:50%',
|
||||
'padding: 4px;',
|
||||
'width: 50%;',
|
||||
'cursor: pointer;',
|
||||
'}',
|
||||
|
||||
'.scratchCategoryMenuItem.categorySelected {',
|
||||
'background: $colour_toolboxSelected;',
|
||||
'border-radius: 16px;',
|
||||
'}',
|
||||
|
||||
'.scratchCategoryItemBubbleLTR {',
|
||||
'width: 14px;',
|
||||
'height: 14px;',
|
||||
'border: 1px solid;',
|
||||
'border-radius: 8px;',
|
||||
'float: left;',
|
||||
'margin-right: 8px;',
|
||||
'}',
|
||||
|
||||
'.scratchCategoryItemBubbleRTL {',
|
||||
'width: 14px;',
|
||||
'height: 14px;',
|
||||
'border: 1px solid;',
|
||||
'border-radius: 8px;',
|
||||
'float: right;',
|
||||
'margin-left: 8px;',
|
||||
'}',
|
||||
|
||||
'.scratchCategoryMenuItem:hover {',
|
||||
'color: orange !important;',
|
||||
'color: $colour_toolboxHover !important;',
|
||||
'}',
|
||||
''
|
||||
];
|
||||
|
|
|
|||
|
|
@ -287,8 +287,12 @@ Blockly.Toolbox.prototype.getSelectedItem = function() {
|
|||
|
||||
Blockly.Toolbox.prototype.setSelectedItem = function(item) {
|
||||
// item is a category
|
||||
if (this.selectedItem_) {
|
||||
this.selectedItem_.setSelected(false);
|
||||
}
|
||||
this.selectedItem_ = item;
|
||||
if (this.selectedItem_ != null) {
|
||||
this.selectedItem_.setSelected(true);
|
||||
this.flyout_.show(item.getContents());
|
||||
}
|
||||
};
|
||||
|
|
@ -337,23 +341,26 @@ Blockly.Toolbox.CategoryMenu.prototype.populate = function(domTree) {
|
|||
|
||||
// TODO: Clean up/make sure things are clean.
|
||||
// TODO: Track last element, maybe.
|
||||
var categories = [];
|
||||
// Find actual categories from the DOM tree.
|
||||
for (var i = 0, child; child = domTree.childNodes[i]; i++) {
|
||||
if (!child.tagName) {
|
||||
// skip it
|
||||
if (!child.tagName || child.tagName.toUpperCase() != 'CATEGORY') {
|
||||
continue;
|
||||
}
|
||||
switch (child.tagName.toUpperCase()) {
|
||||
case 'CATEGORY':
|
||||
if (!(this.categories_.length % 2)) {
|
||||
var row = goog.dom.createDom('tr', 'scratchCategoryMenuRow');
|
||||
this.table.appendChild(row);
|
||||
}
|
||||
this.categories_.push(new Blockly.Toolbox.Category(this, row,
|
||||
child));
|
||||
break;
|
||||
case 'SEP':
|
||||
// TODO: deal with separators.
|
||||
break;
|
||||
categories.push(child);
|
||||
}
|
||||
// Create categories one row at a time.
|
||||
// Note that this involves skipping around by `columnSeparator` in the DOM tree.
|
||||
var columnSeparator = Math.ceil(categories.length / 2);
|
||||
for (var i = 0; i < columnSeparator; i += 1) {
|
||||
child = categories[i];
|
||||
var row = goog.dom.createDom('tr', 'scratchCategoryMenuRow');
|
||||
this.table.appendChild(row);
|
||||
this.categories_.push(new Blockly.Toolbox.Category(this, row,
|
||||
child));
|
||||
if (categories[i + columnSeparator]) {
|
||||
this.categories_.push(new Blockly.Toolbox.Category(this, row,
|
||||
categories[i + columnSeparator]));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -395,17 +402,26 @@ Blockly.Toolbox.Category.prototype.dispose = function() {
|
|||
};
|
||||
|
||||
Blockly.Toolbox.Category.prototype.createDom = function() {
|
||||
var toolbox = this.parent_.parent_;
|
||||
this.item_ = goog.dom.createDom('td',
|
||||
{'class': 'scratchCategoryMenuItem',
|
||||
'style': 'background-color:' + this.colour_
|
||||
},
|
||||
{'class': 'scratchCategoryMenuItem'},
|
||||
this.name_);
|
||||
this.bubble_ = goog.dom.createDom('div', {
|
||||
'class': (toolbox.RTL) ? 'scratchCategoryItemBubbleRTL' : 'scratchCategoryItemBubbleLTR'});
|
||||
this.bubble_.style.backgroundColor = this.colour_;
|
||||
this.bubble_.style.borderColor = this.secondaryColour_;
|
||||
this.item_.appendChild(this.bubble_);
|
||||
this.parentHtml_.appendChild(this.item_);
|
||||
Blockly.bindEvent_(this.item_, 'mousedown', toolbox,
|
||||
toolbox.setSelectedItemFactory(this));
|
||||
};
|
||||
|
||||
// this.parent_.parent_ should be the toolbox. Don't leave this line in this
|
||||
// state. (TODO)
|
||||
Blockly.bindEvent_(this.item_, 'mousedown', this.parent_.parent_,
|
||||
this.parent_.parent_.setSelectedItemFactory(this));
|
||||
Blockly.Toolbox.Category.prototype.setSelected = function(selected) {
|
||||
if (selected) {
|
||||
this.item_.className = 'scratchCategoryMenuItem categorySelected';
|
||||
} else {
|
||||
this.item_.className = 'scratchCategoryMenuItem';
|
||||
}
|
||||
};
|
||||
|
||||
Blockly.Toolbox.Category.prototype.parseContents_ = function(domTree) {
|
||||
|
|
@ -433,19 +449,26 @@ Blockly.Toolbox.Category.prototype.getContents = function() {
|
|||
|
||||
/**
|
||||
* Set the colour of the category's background from a DOM node.
|
||||
* @param {Node} node DOM node with "colour" attribute. Colour is a hex string
|
||||
* or hue on a colour wheel (0-360).
|
||||
* @param {Node} node DOM node with "colour" and "secondaryColour" attribute.
|
||||
* Colours are a hex string or hue on a colour wheel (0-360).
|
||||
*/
|
||||
Blockly.Toolbox.Category.prototype.setColour = function(node) {
|
||||
var colour = node.getAttribute('colour');
|
||||
var secondaryColour = node.getAttribute('secondaryColour');
|
||||
if (goog.isString(colour)) {
|
||||
if (colour.match(/^#[0-9a-fA-F]{6}$/)) {
|
||||
this.colour_ = colour;
|
||||
} else {
|
||||
this.colour_ = Blockly.hueToRgb(colour);
|
||||
}
|
||||
if (secondaryColour.match(/^#[0-9a-fA-F]{6}$/)) {
|
||||
this.secondaryColour_ = secondaryColour;
|
||||
} else {
|
||||
this.secondaryColour_ = Blockly.hueToRgb(secondaryColour);
|
||||
}
|
||||
this.hasColours_ = true;
|
||||
} else {
|
||||
this.colour_ = '#000000';
|
||||
this.secondaryColour_ = '#000000';
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -388,7 +388,7 @@
|
|||
<div id="blocklyDiv"></div>
|
||||
<!-- Toolbox -->
|
||||
<xml id="toolbox-categories" style="display: none">
|
||||
<category name="Motion" colour="#4C97FF">
|
||||
<category name="Motion" colour="#4C97FF" secondaryColour="#3373CC">
|
||||
<block type="motion_movesteps">
|
||||
<value name="STEPS">
|
||||
<shadow type="math_number">
|
||||
|
|
@ -496,7 +496,7 @@
|
|||
<block type="motion_yposition"></block>
|
||||
<block type="motion_direction"></block>
|
||||
</category>
|
||||
<category name="Looks" colour="#9966FF">
|
||||
<category name="Looks" colour="#9966FF" secondaryColour="#774DCB">
|
||||
<block type="looks_sayforsecs">
|
||||
<value name="MESSAGE">
|
||||
<shadow type="text">
|
||||
|
|
@ -602,7 +602,7 @@
|
|||
<block type="looks_backdropname"></block>
|
||||
<block type="looks_size"></block>
|
||||
</category>
|
||||
<category name="Sound" colour="#D65CD6">
|
||||
<category name="Sound" colour="#D65CD6" secondaryColour="#BD42BD">
|
||||
<block type="sound_play">
|
||||
<value name="SOUND_MENU">
|
||||
<shadow type="sound_sounds_option"></shadow>
|
||||
|
|
@ -683,7 +683,7 @@
|
|||
</block>
|
||||
<block type="sound_tempo"></block>
|
||||
</category>
|
||||
<category name="Pen" colour="#00B295">
|
||||
<category name="Pen" colour="#00B295" secondaryColour="#0B8E69">
|
||||
<block type="pen_clear"></block>
|
||||
<block type="pen_stamp"></block>
|
||||
<block type="pen_pendown"></block>
|
||||
|
|
@ -737,9 +737,9 @@
|
|||
</value>
|
||||
</block>
|
||||
</category>
|
||||
<category name="Data" colour="#FF8C1A" custom="VARIABLE">
|
||||
<category name="Data" colour="#FF8C1A" secondaryColour="#DB6E00" custom="VARIABLE">
|
||||
</category>
|
||||
<category name="Lists" colour="#FF8C1A">
|
||||
<category name="Lists" colour="#FF8C1A" secondaryColour="#DB6E00">
|
||||
<block type="data_listcontents"></block>
|
||||
<block type="data_addtolist">
|
||||
<value name="ITEM">
|
||||
|
|
@ -797,7 +797,7 @@
|
|||
<block type="data_showlist"></block>
|
||||
<block type="data_hidelist"></block>
|
||||
</category>
|
||||
<category name="Events" colour="#FFD500">
|
||||
<category name="Events" colour="#FFD500" secondaryColour="#CC9900">
|
||||
<block type="event_whenflagclicked"></block>
|
||||
<block type="event_whenkeypressed">
|
||||
</block>
|
||||
|
|
@ -824,7 +824,7 @@
|
|||
</value>
|
||||
</block>
|
||||
</category>
|
||||
<category name="Control" colour="#FFAB19">
|
||||
<category name="Control" colour="#FFAB19" secondaryColour="#CF8B17">
|
||||
<block type="control_wait">
|
||||
<value name="DURATION">
|
||||
<shadow type="math_positive_number">
|
||||
|
|
@ -853,7 +853,7 @@
|
|||
</block>
|
||||
<block type="control_delete_this_clone"></block>
|
||||
</category>
|
||||
<category name="Sensing" colour="#4CBFE6">
|
||||
<category name="Sensing" colour="#4CBFE6" secondaryColour="#2E8EB8">
|
||||
<block type="sensing_touchingobject">
|
||||
<value name="TOUCHINGOBJECTMENU">
|
||||
<shadow type="sensing_touchingobjectmenu"></shadow>
|
||||
|
|
@ -932,7 +932,7 @@
|
|||
<block type="sensing_dayssince2000"></block>
|
||||
<block type="sensing_username"></block>
|
||||
</category>
|
||||
<category name="Operators" colour="#40BF4A">
|
||||
<category name="Operators" colour="#40BF4A" secondaryColour="#389438">
|
||||
<block type="operator_add">
|
||||
<value name="NUM1">
|
||||
<shadow type="math_number">
|
||||
|
|
@ -1093,7 +1093,7 @@
|
|||
</value>
|
||||
</block>
|
||||
</category>
|
||||
<category name="More Blocks" colour="#FF6680" custom="PROCEDURE"></category>
|
||||
<category name="More Blocks" colour="#FF6680" secondaryColour="#FF3355" custom="PROCEDURE"></category>
|
||||
</xml>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue