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

fixed button design and minor display error

Browse source
This commit is contained in:
yhallowiegeht 2019-01-15 08:37:25 +01:00
parent 46a822a6d0
commit 1a9103d34d
3 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/assets/blockly.html
View file

@ -13,14 +13,14 @@
<link rel="stylesheet" href="blockly/ardublockly/ardublockly.css" media="screen,projection">
<style>
body {
padding: 2px;
padding: 0px;
}
.hidden {
display: none;
display: none!important;
}
.blocks_panel_large, .blocks_panel_small, #content_blocks, .content_xml_large, .content_xml_small {
height: 94vh; /* Standard */
height: 98.8vh; /* Standard */
}
</style>
@ -127,14 +127,9 @@
</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" style="top: 50px"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
<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>
<!-- Arduino IDE action buttons -->
<div id="ide_buttons_wrapper" class="hidden">
<div id="buttons_offline">
@ -217,13 +212,6 @@
</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">
@ -379,11 +367,15 @@
data: code,
}, event.origin)
break;
case 'toggleView':
document.getElementById('blocklyview').classList.toggle('hidden');
document.querySelector('.blocklyToolboxDiv').classList.toggle('hidden');
document.getElementById('codeview').classList.toggle('hidden');
break;
default:
console.warn(`postMessage type ${event.data} not implemented`)
}
});
});
</script>
</body>

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

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

3
src/pages/Blockly/blockly.ts
View file

@ -31,4 +31,7 @@ export class BlocklyPage implements OnInit{
launchOtaWizard () {
this.blocklyFrame.nativeElement.contentWindow.postMessage('getSketch', '*')
}
toggleView () {
this.blocklyFrame.nativeElement.contentWindow.postMessage('toggleView', '*')
}
}