Skip to content

Bugfix/horizontal toolbox #1044

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Bugfix/horizontal toolbox #1044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae1e972
modifications for horizontal layout
Diamg Aug 9, 2017
cef25c7
added jibo category
Diamg Aug 10, 2017
b1d1c49
horizontal layout fixed
Diamg Aug 10, 2017
165b876
scroll fix
Diamg Aug 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions core/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1098,6 +1098,16 @@ Blockly.Css.CONTENT = [
'-moz-user-select: none;',
'-ms-user-select: none;',
'}',
'.scratchCategoryMenuH {',
'background: $colour_toolbox;',
'color: $colour_toolboxText;',
'font-size: .9em;',
'user-select: none;',
'white-space: nowrap;',
'-webkit-user-select: none;',
'-moz-user-select: none;',
'-ms-user-select: none;',
'}',

'.scratchCategoryRow {',
'width: 50%;',
Expand All @@ -1108,11 +1118,21 @@ Blockly.Css.CONTENT = [
'width: 50%;',
'cursor: pointer;',
'}',
'.scratchCategoryMenuItemH {',
'padding: 4px;',
/*'width: 50%;',*/
'display: inline-block;',
'cursor: pointer;',
'}',

'.scratchCategoryMenuItem.categorySelected {',
'background: $colour_toolboxSelected;',
'border-radius: 16px;',
'}',
'.scratchCategoryMenuItemH.categorySelected {',
'background: $colour_toolboxSelected;',
'border-radius: 16px;',
'}',

'.scratchCategoryItemBubbleLTR {',
'width: 14px;',
Expand Down
4 changes: 2 additions & 2 deletions core/flyout_base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,10 +557,10 @@ Blockly.Flyout.prototype.clearOldBlocks_ = function() {
*/
Blockly.Flyout.prototype.addBlockListeners_ = function(root, block, rect) {
if (this.autoClose) {
this.listeners_.push(Blockly.bindEventWithChecks_(root, 'mousedown', null,
/* this.listeners_.push(Blockly.bindEventWithChecks_(root, 'mousedown', null,
this.createBlockFunc_(block)));
this.listeners_.push(Blockly.bindEventWithChecks_(rect, 'mousedown', null,
this.createBlockFunc_(block)));
this.createBlockFunc_(block)));*/
} else {
this.listeners_.push(Blockly.bindEventWithChecks_(root, 'mousedown', null,
this.blockMouseDown_(block)));
Expand Down
74 changes: 57 additions & 17 deletions core/toolbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ Blockly.Toolbox.prototype.init = function() {

this.createFlyout_();
this.categoryMenu_ = new Blockly.Toolbox.CategoryMenu(this, this.HtmlDiv);
this.populate_(workspace.options.languageTree);
this.populate_(workspace.options);
this.position();
};

Expand Down Expand Up @@ -211,13 +211,18 @@ Blockly.Toolbox.prototype.position = function() {
var svgSize = Blockly.svgSize(svg);
if (this.horizontalLayout_) {
treeDiv.style.left = '0';
treeDiv.style.height = 'auto';
treeDiv.style.width = svgSize.width + 'px';
//treeDiv.style.height = 'auto';
//treeDiv.style.width = svgSize.width + 'px';
this.height = treeDiv.offsetHeight;
if (this.toolboxPosition == Blockly.TOOLBOX_AT_TOP) { // Top
treeDiv.style.top = '0';
treeDiv.style.width = '100%';
//treeDiv.style.height = '10px';
} else { // Bottom
console.log('bottomm positioning')
treeDiv.style.bottom = '0';
treeDiv.style.width = '100%';
//treeDiv.style.height = '30px';
}
} else {
if (this.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) { // Right
Expand Down Expand Up @@ -375,7 +380,12 @@ Blockly.Toolbox.CategoryMenu.prototype.createDom = function() {
<table class="scratchCategoryMenu">
</table>
*/
this.table = goog.dom.createDom('table', 'scratchCategoryMenu');
var toolbox = this.parent_;
if (toolbox.horizontalLayout_) {
this.table = goog.dom.createDom('table', 'scratchCategoryMenuH');
} else {
this.table = goog.dom.createDom('table', 'scratchCategoryMenu');
}
this.parentHtml_.appendChild(this.table);
};

Expand All @@ -384,7 +394,8 @@ Blockly.Toolbox.CategoryMenu.prototype.createDom = function() {
* {Blockly.Toolbox.Category} for every category tag in the toolbox xml.
* @param {Node} domTree DOM tree of blocks, or null.
*/
Blockly.Toolbox.CategoryMenu.prototype.populate = function(domTree) {
Blockly.Toolbox.CategoryMenu.prototype.populate = function(options) {
var domTree = options.languageTree;
if (!domTree) {
return;
}
Expand All @@ -402,18 +413,32 @@ Blockly.Toolbox.CategoryMenu.prototype.populate = function(domTree) {
}
// 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];
if (options.horizontalLayout) {
var columnSeparator = categories.length;
var row = goog.dom.createDom('tr', 'scratchCategoryMenuRow');
this.table.appendChild(row);
if (child) {
this.categories_.push(new Blockly.Toolbox.Category(this, row,
child));
for (var i = 0; i < columnSeparator; i += 1) {
child = categories[i];

if (child) {
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]));
} else {
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);
if (child) {
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]));
}
}
}
this.height_ = this.table.offsetHeight;
Expand Down Expand Up @@ -474,9 +499,15 @@ Blockly.Toolbox.Category.prototype.dispose = function() {
*/
Blockly.Toolbox.Category.prototype.createDom = function() {
var toolbox = this.parent_.parent_;
this.item_ = goog.dom.createDom('td',
if (toolbox.horizontalLayout_) {
this.item_ = goog.dom.createDom('td',
{'class': 'scratchCategoryMenuItemH'},
this.name_);
} else {
this.item_ = goog.dom.createDom('td',
{'class': 'scratchCategoryMenuItem'},
this.name_);
}
this.bubble_ = goog.dom.createDom('div', {
'class': (toolbox.RTL) ? 'scratchCategoryItemBubbleRTL' :
'scratchCategoryItemBubbleLTR'});
Expand All @@ -493,10 +524,19 @@ Blockly.Toolbox.Category.prototype.createDom = function() {
* @param {boolean} selected Whether this category is selected.
*/
Blockly.Toolbox.Category.prototype.setSelected = function(selected) {
var toolbox = this.parent_.parent_;
if (selected) {
this.item_.className = 'scratchCategoryMenuItem categorySelected';
if (toolbox.horizontalLayout_) {
this.item_.className = 'scratchCategoryMenuItemH categorySelected';
}else{
this.item_.className = 'scratchCategoryMenuItem categorySelected';
}
} else {
this.item_.className = 'scratchCategoryMenuItem';
if (toolbox.horizontalLayout_) {
this.item_.className = 'scratchCategoryMenuItemH';
}else{
this.item_.className = 'scratchCategoryMenuItem';
}
}
};

Expand Down
2 changes: 1 addition & 1 deletion msg/json/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"@metadata": {
"author": "Ellen Spertus <ellen.spertus@gmail.com>",
"lastupdated": "2017-06-22 11:21:38.108160",
"lastupdated": "2017-08-09 08:43:06.746989",
"locale": "en",
"messagedocumentation" : "qqq"
},
Expand Down