Skip to content

GitLab

A
ardublockly
Commit 11d797fb authored by carlosperate's avatar carlosperate
Browse files
Options

Prepared layout for larger toolbox: 

The toolbox toggle visibility button layout changed, the end result is the same, but now the scroll bar will only encapsulate the toolbox categories area (before it took the entire workspace height and the categories where scrolling behind the toggle button).
The spacing between categories tweaked, now the height per category is 36px and it will admit two more categories before the scrollbar appears.
Workspace minimum heigh tweaked together with IDE output height. Now the resize effect can take place in vertical resolutions from 800px (used to be 850px).
parent dffad542
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 74 deletions
ardublockly/ardublockly.css
View file @ 11d797fb
......@@ -126,9 +126,6 @@ ul.side-nav li.side-menu-end {
#blocks_panel {
padding: 0px;
position: relative !important;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important;
min-height: 480px;
}
.blocks_panel_large {
......@@ -138,15 +135,19 @@ ul.side-nav li.side-menu-end {
height: calc(100vh - 190px); /* Standard */
}
.blocks_panel_small {
height: -moz-calc(100vh - 390px); /* Firefox */
height: -webkit-calc(100vh - 390px); /* WebKit */
height: -o-calc(100vh - 390px); /* Opera */
height: calc(100vh - 390px); /* Standard */
height: -moz-calc(100vh - 350px); /* Firefox */
height: -webkit-calc(100vh - 350px); /* WebKit */
height: -o-calc(100vh - 350px); /* Opera */
height: calc(100vh - 350px); /* Standard */
}
#content_blocks {
margin: 0;
padding: 0;
min-height: 480px;
height: -moz-calc(100vh - 190px); /* Firefox */
height: -webkit-calc(100vh - 190px); /* WebKit */
height: -o-calc(100vh - 190px); /* Opera */
height: calc(100vh - 190px); /* Standard */
}
#content_xml {
......@@ -155,6 +156,7 @@ ul.side-nav li.side-menu-end {
border: none;
padding: 0px 5px;
font-family: monospace;
font-size: smaller;
overflow: scroll;
font-style: 0.2em !important;
min-height: 384px;
......@@ -166,10 +168,10 @@ ul.side-nav li.side-menu-end {
height: calc(100vh - 286px); /* Standard */
}
.content_xml_small {
height: -moz-calc(100vh - 486px); /* Firefox */
height: -webkit-calc(100vh - 486px); /* WebKit */
height: -o-calc(100vh - 486px); /* Opera */
height: calc(100vh - 486px); /* Standard */
height: -moz-calc(100vh - 446px); /* Firefox */
height: -webkit-calc(100vh - 446px); /* WebKit */
height: -o-calc(100vh - 446px); /* Opera */
height: calc(100vh - 446px); /* Standard */
}
/* The materialize framework changes height of the div to show or hide */
......@@ -196,10 +198,10 @@ ul.side-nav li.side-menu-end {
height: calc(100vh - 280px); /* Standard */
}
.content_arduino_small {
height: -moz-calc(100vh - 480px); /* Firefox */
height: -webkit-calc(100vh - 480px); /* WebKit */
height: -o-calc(100vh - 480px); /* Opera */
height: calc(100vh - 480px); /* Standard */
height: -moz-calc(100vh - 440px); /* Firefox */
height: -webkit-calc(100vh - 440px); /* WebKit */
height: -o-calc(100vh - 440px); /* Opera */
height: calc(100vh - 440px); /* Standard */
}
/****************/
......@@ -247,10 +249,10 @@ ul.side-nav li.side-menu-end {
border: none;
padding: 0px 5px;
font-family: monospace;
overflow: scroll;
overflow: auto;
font-style: 0.2em !important;
min-height: 200px;
max-height: 200px;
min-height: 160px;
max-height: 160px;
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
......@@ -366,6 +368,9 @@ ul.side-nav li.side-menu-end {
bottom: 36px;
display: none;
}
#button_load_xml .mdi-action-extension {
font-size: 2.1rem !important;
}
/* These floating buttons needs to be at a higher z index than card when */
/* floating and lower when clicked. */
......@@ -390,10 +395,11 @@ ul.side-nav li.side-menu-end {
.button_toggle_toolbox_on {
position: absolute;
margin: 0 !important;
padding: 0px !important;
padding: 0 !important;
left: 12px;
top: 9px;
top: 8px;
text-align: center;
font-size: 1.5rem !important;
z-index: 5;
border-color: #e0e0e0 !important;
border-width: 1px !important;
......@@ -414,8 +420,9 @@ ul.side-nav li.side-menu-end {
margin: 0 !important;
padding: 0px !important;
left: 12px;
top: 9px;
top: 8px;
text-align: center;
font-size: 1.5rem !important;
z-index: 5;
}
......@@ -634,18 +641,15 @@ ul.side-nav li.side-menu-end {
/* Entire Blockly area, Toolbox dranw on top */
.blocklySvg {
border-width: 0 !important;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important;
}
/* Toolbox */
.blocklyToolboxDiv {
border-color: #e0e0e0 !important;
border-width: 0px 1px 0px 0px !important;
-webkit-border-radius: 4px 0px 0px 4px !important;
-moz-border-radius: 4px 0px 0px 4px !important;
border-radius: 4px 0px 0px 4px !important;
-webkit-border-radius: 0px 4px 4px 0px !important;
-moz-border-radius: 4px 4px 0px 0px !important;
border-radius: 0px 4px 4px 0px !important;
border: none !important;
margin: 0px !important;
padding: 0px 0px 0px 0px !important;
......@@ -658,21 +662,21 @@ ul.side-nav li.side-menu-end {
.blocklyTreeRoot {
background: none !important;
border: none !important;
margin: 33px 0px 0px 0px !important;
padding: 5px 1px !important;
/* Vertical centre
position: relative;
top: 50%;
transform: translateY(-50%);*/
margin: 36px 0px 0px 0px !important;
padding: 0px 1px !important;
height: -moz-calc(100% - 37px); /* Firefox */
height: -webkit-calc(100% - 37px); /* WebKit */
height: -o-calc(100% - 37px); /* Opera */
height: calc(100% - 37px); /* Standard */
overflow-x: hidden;
overflow-y: auto;
}
.blocklyTreeRow {
background: none !important;
border: none !important;
margin: 0px 0px !important;
padding: 8px 16px 8px 0px !important;
padding: 7px 16px 7px 0px !important;
box-sizing: content-box !important;
/* line-height: 0.5rem !important;
vertical-align: middle !important;*/
}
.blocklyTreeSelected {
background-color: #E47128 !important; /* arduino orange */
......@@ -703,17 +707,14 @@ ul.side-nav li.side-menu-end {
}
.blocklyScrollbarBackground {
stroke-width: 0px !important;
fill: none !important;
}
/* Edit select yellow colour to Arduino yellow. */
/* Edited out because it seems to be that colour already.
.blocklyHighlightedConnectionPath {
stroke: rgba(255, 204, 51, 1) !important;
}
/* Edit select colour to Arduino yellow. (Edited out as already this colour)
.blocklyHighlightedConnectionPath,
.blocklySelected>.blocklyPath {
stroke: rgba(255, 204, 51, 1) !important;
}
*/
} */
/*********************************/
/* Overwriting Materialize CSS */
......@@ -817,22 +818,6 @@ ul.side-nav li ul li ul li {
}
}
/* Need larger icons in buttons */
.mdi-action-visibility {
font-size: 1.5rem !important;
}
.mdi-action-visibility-off {
font-size: 1.5rem !important;
}
#button_ide_large .mdi-av-play-arrow,
#button_ide_large .mdi-navigation-check,
#button_ide_large .mdi-action-open-in-browser {
}
#button_load_xml .mdi-action-extension {
font-size: 2rem !important;
}
/* Why the hell does button large has a predefined background colour !! */
.btn-large:hover {
background-color: inherit;
......
ardublockly/ardublockly_design.js
View file @ 11d797fb
......@@ -27,10 +27,8 @@ Ardublockly.materializeJsInit = function() {
menuWidth: 240,
activationWidth: 70,
edge: 'left'});
// Drop down menus
$('.dropdown-button').dropdown({hover: false});
// Overlay content panels using modals (android dialogs)
$('.modal-trigger').leanModal({
dismissible: true,
......@@ -38,10 +36,8 @@ Ardublockly.materializeJsInit = function() {
in_duration: 200,
out_duration: 250
});
// Pop-up tool tips
$('.tooltipped').tooltip({'delay': 50});
// Select menus
$('select').material_select();
};
......@@ -51,17 +47,14 @@ Ardublockly.bindDesignEventListeners = function() {
// Resize blockly workspace on window resize
window.addEventListener(
'resize', Ardublockly.resizeBlocklyWorkspace, false);
// Display/hide the XML load button when the XML collapsible header is clicked
document.getElementById('xml_collapsible_header').addEventListener(
'click', Ardublockly.buttonLoadXmlCodeDisplay);
// Toggle the content height on click to the IDE output collapsible header
document.getElementById('ide_output_collapsible_header').addEventListener(
'click', function() {
Ardublockly.contentHeightToggle();
});
// Display/hide the additional IDE buttons when mouse over/out of play button
$('#button_ide_large').mouseenter(function() {
Ardublockly.showExtraIdeButtons(true);
......@@ -192,6 +185,7 @@ Ardublockly.largeIdeButtonSpinner = function(active) {
*/
Ardublockly.displayToolbox = function(show) {
var toolbox = $('.blocklyToolboxDiv');
var toolboxTree = $('.blocklyTreeRoot');
var button = document.getElementById('button_toggle_toolbox');
var buttonIcon = document.getElementById('button_toggle_toolbox_icon');
......@@ -202,13 +196,13 @@ Ardublockly.displayToolbox = function(show) {
jQuery('<div/>', {
id: 'toolboxButtonScreen',
css: {
position: 'fixed',
top: elLocation.top,
left: elLocation.left,
height: $('#button_toggle_toolbox').height(),
width: $('#button_toggle_toolbox').width(),
cursor: 'pointer',
zIndex: 12
position: 'fixed',
top: elLocation.top,
left: elLocation.left,
height: $('#button_toggle_toolbox').height(),
width: $('#button_toggle_toolbox').width(),
cursor: 'pointer',
zIndex: 12
},
}).appendTo('body');
......@@ -223,10 +217,12 @@ Ardublockly.displayToolbox = function(show) {
toolbox.animate(
{height: document.getElementById('content_blocks').style.height}, 300,
function() {
toolboxTree.css("overflow-y", "auto");
Blockly.fireUiEvent(window, 'resize');
$('#toolboxButtonScreen').remove();
});
} else {
toolboxTree.css("overflow-y", "hidden");
buttonIcon.className = buttonIcon.className.replace(visOff, visOn);
toolbox.animate({height: 38}, 300, function() {
button.className = button.className.replace(classOff, classOn);
......@@ -421,7 +417,7 @@ Ardublockly.contentHeightToggle = function() {
// Apart from checking if the output is visible, do not bother to shrink in
// small screens as the minimum height of the content will kick in and cause
// the content to be behind the IDE output data anyway.
if (outputHeader.className.match('active') && $(window).height() > 850) {
if (outputHeader.className.match('active') && $(window).height() > 800) {
blocks.className = 'content height_transition blocks_panel_small';
arduino.className = 'content height_transition content_arduino_small';
xml.className = 'content height_transition content_xml_small';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment