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

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

@ -15,8 +15,11 @@
<ion-content> <ion-content>
<!-- Real floating action button, fixed. It will not scroll with the 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> <button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
</ion-fab> </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> <iframe #blocklyFrame scrolling="no" src='assets/blockly.html'></iframe>
</ion-content> </ion-content>

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

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