Skip to content

GitLab

A
ardublockly
Commit 06a6e7ef authored by carlosperate's avatar carlosperate
Browse files
Options

Add additional IDE action buttons with nice in/out effect.

parent 72911408
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 168 deletions
ardublockly/ardublockly.css
View file @ 06a6e7ef
......@@ -212,21 +212,21 @@ ul.side-nav li.side-menu-end {
background-color: #006468;
color: #ffffff;
-moz-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;
-webkit-transition: background-color 0.6s ease-in;
}
.ide_output_header_highlight {
background-color: #62AEB2;
color: #ffffff;
-moz-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;
-webkit-transition: background-color 0.6s ease-in;
}
.ide_output_header_error {
background-color: #E47128;
color: #ffffff;
-moz-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;
-webkit-transition: background-color 0.6s ease-in;
}
......@@ -294,23 +294,58 @@ ul.side-nav li.side-menu-end {
/*************/
/* Buttons */
/*************/
#button_run {
#ide_buttons_wrapper {
position: absolute;
right: 25px;
top: -20px;
height: 55px;
width: 160px;
z-index: 12;
}
#button_run {
position: absolute;
right: 0px;
top: 0px;
background-color: #E47128; /* Arduino orange */
}
#button_run:hover {
background-color: rgba(255, 204, 51, 1); /* Arduino yellow */
}
.run_loader {
position: absolute !important;
right: 25px !important;
top: -20px !important;
right: 0px !important;
top: 0px !important;
width: 56px !important;
height: 56px !important;
z-index: 5;
}
#button_verify {
position: absolute;
right: 72px;
top: 10px;
background-color: #00979C; /* Arduino teal */
visibility: hidden;
opacity: 0;
transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_verify:hover {
background-color: #62AEB2; /* Arduino teal light */
}
#button_open_ide {
position: absolute;
right: 126px;
top: 10px;
background-color: rgba(255, 204, 51, 1); /* Arduino yellow */
visibility: hidden;
opacity: 0;
transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_open_ide:hover {
background-color: rgba(255, 220, 110, 1); /* Lighter Arduino yellow */
}
#button_load_xml {
position: absolute;
right: 36px;
......@@ -318,6 +353,25 @@ ul.side-nav li.side-menu-end {
display: none;
}
/* These floating buttons needs to be at a higher z index than card when */
/* floating and lower when clicked. */
#button_run:hover,
#button_open_ide:hover,
#button_verify:hover,
#button_load_xml:hover {
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#button_run:active,
#button_open_ide:active,
#button_verify:active,
#button_load_xml:active {
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.button_toggle_toolbox_on {
position: absolute;
margin: 0 !important;
......@@ -346,6 +400,54 @@ ul.side-nav li.side-menu-end {
z-index: 5;
}
/*************************/
/* New spinner colours */
/*************************/
.spinner-orange {
border-color: #E47128;
}
.active .spinner-layer.spinner-orange {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-dark-teal {
border-color: #00878F;
}
.active .spinner-layer.spinner-dark-teal {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-yellow {
border-color: rgba(255, 204, 51, 1);
}
.active .spinner-layer.spinner-yellow {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-light-teal {
border-color: #62AEB2;
}
.active .spinner-layer.spinner-light-teal {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-purple {
border-color: #8e24aa;
}
.active .spinner-layer.spinner-purple {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
/************************/
/* Modals and content */
......@@ -403,79 +505,6 @@ ul.side-nav li.side-menu-end {
}
/*******************************/
/* Clean 50:50 same row divs */
/*******************************/
.two_halves_container {
width: 100%;
padding: 0;
margin: 0;
}
.two_halves_left {
padding: 0;
margin: 0;
border: none;
width: 49%;
float: right;
}
.two_halves_right {
padding: 0;
margin: 0;
border: none;
width: 50%;
float: right;
}
/*************************/
/* New spinner colours */
/*************************/
.spinner-orange {
border-color: #E47128;
}
.active .spinner-layer.spinner-orange {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-dark-teal {
border-color: #00878F;
}
.active .spinner-layer.spinner-dark-teal {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-yellow {
border-color: rgba(255, 204, 51, 1);
}
.active .spinner-layer.spinner-yellow {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-light-teal {
border-color: #62AEB2;
}
.active .spinner-layer.spinner-light-teal {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-purple {
border-color: #8e24aa;
}
.active .spinner-layer.spinner-purple {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
/*****************/
/* Sketch name */
/*****************/
......@@ -538,6 +567,7 @@ ul.side-nav li.side-menu-end {
margin-right: 1rem;
}
/* Colours for the new and deleted code highlighting */
.code_highlight_new {
background-color: rgba(255, 204, 51, 0.5); /* Arduino yellow 50% */
}
......@@ -545,6 +575,28 @@ ul.side-nav li.side-menu-end {
background-color: #FDBEBE;
}
/* Clean 50:50 same row divs */
.two_halves_container {
width: 100%;
padding: 0;
margin: 0;
}
.two_halves_left {
padding: 0;
margin: 0;
border: none;
width: 49%;
float: right;
}
.two_halves_right {
padding: 0;
margin: 0;
border: none;
width: 50%;
float: right;
}
/*****************************/
/* Overwriting Blockly CSS */
/*****************************/
......@@ -628,11 +680,11 @@ ul.side-nav li.side-menu-end {
stroke-width: 0px !important;
}
/* Edit select yellow colour to Arduino yellow, seems to be that colour already
/* 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;
}
.blocklySelected>.blocklyPath {
stroke: rgba(255, 204, 51, 1) !important;
}
......@@ -732,7 +784,7 @@ ul.side-nav li ul li ul li {
}
} */
/* Increase the size of Materialize Modal in small res */
/* Increase the size of Materialize Modal in small resolutions */
@media only screen and (max-width : 600px) {
.modal {
width: 80% !important;
......@@ -754,19 +806,6 @@ ul.side-nav li ul li ul li {
font-size: 2rem !important;
}
/* Button needs to be at a higher z index than */
/* card when floating and lower when clicked. */
#button_run:hover {
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#button_run:active {
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Circle clipper (loading animation) thickness */
.circle-clipper .circle {
border-width: 4px !important;
......
ardublockly/ardublockly.js
View file @ 06a6e7ef
......@@ -78,7 +78,12 @@ ArduinoMaterial.bindActionFunctions_ = function() {
ArduinoMaterial.loadServerXmlFile('examples/stepper_knob.xml')});
// Floating buttons
ArduinoMaterial.bindClick_('button_run', ArduinoMaterial.sendCode);
ArduinoMaterial.bindClick_('button_run',
ArduinoMaterial.sendCode);
ArduinoMaterial.bindClick_('button_verify',
ArduinoMaterial.functionNotImplemented);
ArduinoMaterial.bindClick_('button_open_ide',
ArduinoMaterial.functionNotImplemented);
ArduinoMaterial.bindClick_('button_load_xml',
ArduinoMaterial.XmlTextareaToBlocks);
ArduinoMaterial.bindClick_(
......
ardublockly/ardublockly_design.js
View file @ 06a6e7ef
......@@ -29,17 +29,17 @@ ArduinoMaterial.materializeJsInit = function() {
$(document).ready(function() {
// Navigation bar
$('.button-collapse').sideNav({
menuWidth: 240,
activationWidth: 70,
edge: 'left'});
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,
opacity: .5,
in_duration: 200,
out_duration: 250
dismissible: true,
opacity: .5,
in_duration: 200,
out_duration: 250
});
// Pop-up tool tips
$('.tooltipped').tooltip({'delay': 50});
......@@ -53,13 +53,23 @@ ArduinoMaterial.materializeJsInit = function() {
* @private
*/
ArduinoMaterial.bindDesignEventListeners_ = function() {
// Resize blockly workspace on window resize
window.addEventListener(
'resize', ArduinoMaterial.resizeBlocklyWorkspace, false);
// Display/hide the XML load button when the XML collapsible header is clicked
document.getElementById('xml_collapsible_header').addEventListener(
'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
// Toggle the content height on click to the IDE output collapsible header
document.getElementById('ide_output_collapsible_header').addEventListener(
'click', function() {
ArduinoMaterial.contentHeightToggle();
'click', function() {
ArduinoMaterial.contentHeightToggle();
});
// Display/hide the additional IDE buttons when mouse over/out of play button
$("#button_run").mouseenter(function () {
ArduinoMaterial.showExtraIdeButtons(true);
});
$("#ide_buttons_wrapper").mouseleave(function () {
ArduinoMaterial.showExtraIdeButtons(false);
});
};
......@@ -96,6 +106,39 @@ ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
}, 500);
};
/**
* Displays or hides the addition Arduino IDE action buttons.
* Hide/display effects done with CCS3 transitions on visibility and opacity.
* @param {!boolean} show Indicates if the extra buttons are to be shown.
*/
ArduinoMaterial.showExtraIdeButtons = function(show) {
var openIdeButton = document.getElementById('button_open_ide');
var verifyButton = document.getElementById('button_verify');
if (show) {
// prevent previously set time-out to hide buttons while trying to show them
clearTimeout(ArduinoMaterial.outHoldtimeoutHandle);
clearTimeout(ArduinoMaterial.hidetimeoutHandle);
verifyButton.style.visibility = 'visible';
verifyButton.style.opacity = '1';
ArduinoMaterial.showtimeoutHandle = setTimeout(function() {
openIdeButton.style.visibility = 'visible';
openIdeButton.style.opacity = '1';
}, 50);
} else {
// As the mouse out can be accidental, only hide them after a delay
ArduinoMaterial.outHoldtimeoutHandle = setTimeout(function() {
// Prevent show time-out to affect the hiding of the buttons
clearTimeout(ArduinoMaterial.showtimeoutHandle);
openIdeButton.style.visibility = 'hidden';
openIdeButton.style.opacity = '0';
ArduinoMaterial.hidetimeoutHandle = setTimeout(function() {
verifyButton.style.visibility = 'hidden';
verifyButton.style.opacity = '0';
}, 50);
}, 200);
}
};
/**
* Sets the class and content of the toolbox View and Hide button.
* @param {!boolean} toolboxVisible Indicates if the toolbox visibility.
......@@ -117,26 +160,6 @@ ArduinoMaterial.showToolboxButtonState = function(toolboxVisible) {
}
};
/**
* Resizes the container for Blockly.
*/
ArduinoMaterial.resizeBlocklyWorkspace = function() {
var contentBlocks = document.getElementById('content_blocks');
var wrapperPanelSize =
ArduinoMaterial.getBBox_(document.getElementById('blocks_panel'));
contentBlocks.style.top = wrapperPanelSize.y + 'px';
contentBlocks.style.left = wrapperPanelSize.x + 'px';
// Height and width need to be set, read back, then set again to
// compensate for scrollbars.
contentBlocks.style.height = wrapperPanelSize.height + 'px';
contentBlocks.style.height =
(2 * wrapperPanelSize.height - contentBlocks.offsetHeight) + 'px';
contentBlocks.style.width = wrapperPanelSize.width + 'px';
contentBlocks.style.width =
(2 * wrapperPanelSize.width - contentBlocks.offsetWidth) + 'px';
};
/**
* Resizes the toolbox button to toggle its visibility to the width of the
* toolbox.
......@@ -158,6 +181,26 @@ ArduinoMaterial.resizeToggleToolboxBotton = function() {
}
};
/**
* Resizes the container for Blockly.
*/
ArduinoMaterial.resizeBlocklyWorkspace = function() {
var contentBlocks = document.getElementById('content_blocks');
var wrapperPanelSize =
ArduinoMaterial.getBBox_(document.getElementById('blocks_panel'));
contentBlocks.style.top = wrapperPanelSize.y + 'px';
contentBlocks.style.left = wrapperPanelSize.x + 'px';
// Height and width need to be set, read back, then set again to
// compensate for scrollbars.
contentBlocks.style.height = wrapperPanelSize.height + 'px';
contentBlocks.style.height =
(2 * wrapperPanelSize.height - contentBlocks.offsetHeight) + 'px';
contentBlocks.style.width = wrapperPanelSize.width + 'px';
contentBlocks.style.width =
(2 * wrapperPanelSize.width - contentBlocks.offsetWidth) + 'px';
};
/**
* Sets the text for a "Materialize Modal" (like an android Dialog) to have
* alert-like HTML messages.
......@@ -186,13 +229,15 @@ ArduinoMaterial.materialAlert = function(title, body, confirm, callback) {
};
/**
* Populates the Arduino output data modal and opens it.
* @param {!element} bodyEl HTML to include into dialog content.
* Populates the Arduino IDE output content area and visually highlights it
* to call for the user attention.
* @param {!element} bodyEl HTML to include into IDE output content area.
*/
ArduinoMaterial.arduinoIdeOutput = function(bodyEl) {
$('#content_ide_output').text('');
$('#content_ide_output').append(bodyEl);
ArduinoMaterial.highlightIdeHeader();
var ideOuputContent = document.getElementById('content_ide_output');
ideOuputContent.innerHTML = '';
ideOuputContent.appendChild(bodyEl);
ArduinoMaterial.highlightIdeOutputHeader();
};
/**
......@@ -243,7 +288,7 @@ ArduinoMaterial.sketchNameSizeEffect = function() {
/**
* Creates a highlight animation to the Arduino IDE output header.
*/
ArduinoMaterial.highlightIdeHeader = function() {
ArduinoMaterial.highlightIdeOutputHeader = function() {
var header = document.getElementById('ide_output_collapsible_header');
var h = 'ide_output_header_highlight';
var n = 'ide_output_header_normal';
......
ardublockly/index.html
View file @ 06a6e7ef
......@@ -97,55 +97,60 @@
</li>
</ul>
</li>
<li class="no-padding side-menu-end">&nbsp;</li>
<li class="no-padding side-menu-end">&nbsp;</li>
</ul>
<!-- Content -->
<div class="container">
<div class="row">
<div class="col s12 m12 l8" style="position:relative">
<!-- Toolbox visibility button -->
<a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
<a id="button_run" class="waves-effect waves-light waves-circle btn-floating btn-large arduino_orange z-depth-1-half"><i class="mdi-av-play-arrow"></i></a>
<!-- Begging of loader circle -->
<div id="button_run_spinner" class="preloader-wrapper active run_loader" style="display:none">
<div class="spinner-layer spinner-orange">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
<!-- Arduino IDE action buttons -->
<div id="ide_buttons_wrapper">
<a id="button_open_ide" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half"><i class="mdi-action-open-in-browser"></i></a>
<a id="button_verify" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half"><i class="mdi-navigation-check"></i></a>
<a id="button_run" class="waves-effect waves-light waves-circle btn-floating btn-large arduino_orange z-depth-1-half"><i class="mdi-av-play-arrow"></i></a>
<div id="button_run_spinner" class="preloader-wrapper active run_loader" style="display:none">
<div class="spinner-layer spinner-orange">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div class="spinner-layer spinner-dark-teal">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
<div class="spinner-layer spinner-dark-teal">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div class="spinner-layer spinner-light-teal">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
<div class="spinner-layer spinner-light-teal">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<!-- End of loader circle -->
<!-- Blockly Panel -->
<div class="card-panel white" style="padding: 0">
<div id="blocks_panel" class="content blocks_panel_large">
<div id="content_blocks" class="content z-depth-1"></div>
......
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