opensensemap/blockly-app
1
0
Fork 0
mirror of https://github.com/sensebox/blockly-app synced 2025-04-19 16:07:33 +02:00
Code Issues Releases Wiki Activity

toggle code/blockly view button

Browse source
This commit is contained in:
yhallowiegeht 2019-01-13 14:59:23 +01:00
parent 4eab444b36
commit 46a822a6d0
2 changed files with 91 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
src/assets/blockly.html
View file

@ -13,14 +13,14 @@
<link rel="stylesheet" href="blockly/ardublockly/ardublockly.css" media="screen,projection">
<style>
body {
padding: 0px;
padding: 2px;
}
.hidden {
display: none;
}
.blocks_panel_large, .blocks_panel_small, #content_blocks, .content_xml_large, .content_xml_small {
height: 98vh; /* Standard */
height: 94vh; /* Standard */
}
</style>
@ -127,90 +127,103 @@
</ul>
<!-- Content -->
<div>
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" onclick="toggleView()" checked>switch Blockly View/CodeView
</label>
</div>
<div id="blocklyview">
<!-- Toolbox visibility button -->
<a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off hidden" style="display: none"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
<!-- Arduino IDE action buttons -->
<div id="ide_buttons_wrapper" class="hidden">
<div id="buttons_offline">
<a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
<a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
<a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
</div>
<a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off" style="top: 50px"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
<!-- Arduino IDE action buttons -->
<div id="ide_buttons_wrapper" class="hidden">
<div id="buttons_offline">
<a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
<a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
<a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
</div>
<div id="buttons_online" class="hidden">
<a id="button_copy_clipboard" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_blue" data-clipboard-action="copy" data-clipboard-target="#content_arduino" data-position="left" data-delay="750" data-tooltip="In Zwischenablage kopieren"><i id="button_copy_clipboard_icon" class="mdi-action-assignment"></i></a>
<a id="button_compile_sketch" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange" data-position="left" data-delay="750" data-tooltip="Sketch kompilieren"><i id="button_compile_sketch_icon" class="mdi-action-assignment-turned-in"></i></a>
</div>
<div id="buttons_online" class="hidden">
<a id="button_copy_clipboard" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_blue" data-clipboard-action="copy" data-clipboard-target="#content_arduino" data-position="left" data-delay="750" data-tooltip="In Zwischenablage kopieren"><i id="button_copy_clipboard_icon" class="mdi-action-assignment"></i></a>
<a id="button_compile_sketch" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange" data-position="left" data-delay="750" data-tooltip="Sketch kompilieren"><i id="button_compile_sketch_icon" class="mdi-action-assignment-turned-in"></i></a>
</div>
<div id="button_ide_large_spinner" class="preloader-wrapper active ide_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 id="button_ide_large_spinner" class="preloader-wrapper active ide_loader hidden">
<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>
<!-- 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>
</div>
</div>
</div>
<div id="codeview" class="hidden">
<ul class="collapsible z-depth-1" data-collapsible="accordion">
<li>
<div class="collapsible-header active">
<span class="collapsible_logo">{ }</span>
<span class="translatable_arduinoSourceCode">Arduino Source Code</span>
</div>
<div class="collapsible-body">
<pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
</div>
</li>
<li>
<div class="collapsible-header" id="xml_collapsible_header">
<span class="collapsible_logo">&#60; &#62;</span>
<span class="translatable_blocksXml">Blocks XML</span>
</div>
<div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
<a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
<textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
</div>
</li>
</ul>
</div>
<!-- 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>
</div>
</div>
<div class="hidden">
<ul class="collapsible z-depth-1" data-collapsible="accordion">
<li>
<div class="collapsible-header active">
<span class="collapsible_logo">{ }</span>
<span class="translatable_arduinoSourceCode">Arduino Source Code</span>
</div>
<div class="collapsible-body">
<pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
</div>
</li>
<li>
<div class="collapsible-header" id="xml_collapsible_header">
<span class="collapsible_logo">&#60; &#62;</span>
<span class="translatable_blocksXml">Blocks XML</span>
</div>
<div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
<a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
<textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
</div>
</li>
</ul>
</div>
<script>
function toggleView() {
document.getElementById('button_toggle_toolbox_icon').click();
document.getElementById('blocklyview').classList.toggle('hidden');
document.getElementById('codeview').classList.toggle('hidden');
}
</script>
<!-- IDE Output content -->
<div class="ide_output_wrapper hidden">
@ -229,7 +242,7 @@
<!-- Settings: Displayed as a Materialize Modal -->
<div id="settings_dialog" class="modal modal-fixed-footer hidden">
<div class="modal-content hidden">
<div class="modal-content">
<h4><span class="translatable_settings">Settings</span></h4>
<div class="modal_section online">
<label><span class="translatable_compilerLocation">Compiler Location</span>:</label>

2
src/pages/Blockly/blockly.html
View file

@ -15,7 +15,7 @@
<ion-content>
<!-- Real floating action button, fixed. It will not scroll with the content -->
<ion-fab top right edge>
<ion-fab top right edge style="top:-5px">
<button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
</ion-fab>
<iframe #blocklyFrame scrolling="no" src='assets/blockly.html'></iframe>