CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-14 04:17:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Blockly Factory: UI for Navigation Bar, Help Button, Exporter (#549)

Browse Source 
* Did cherry-picking for style changes with different resolution, no workspace factory style yet

* Nit changes

* Moving style out of index.html to factory.css

* Nit ordering in factory.css
This commit is contained in:
Emma Dauterman
2016-08-16 15:38:44 -07:00
committed by picklesrus
parent ba375412b8
commit 7810a5397d
3 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demos/blocklyfactory/app_controller.js
View File

@@ -305,17 +305,27 @@ AppController.prototype.styleTabs_ = function() {
AppController.prototype.assignExporterClickHandlers = function() {
var self = this;
// Export blocks when the user submits the export settings.
document.getElementById('exporterSubmitButton').addEventListener('click',
document.getElementById('button_setBlocks').addEventListener('click',
function() {
document.getElementById('dropdownDiv_setBlocks').classList.toggle("show");
});
document.getElementById('dropdown_addAllUsed').addEventListener('click',
function() {
self.exporter.export();
document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
});
document.getElementById('clearSelectedButton').addEventListener('click',
document.getElementById('dropdown_clearSelected').addEventListener('click',
function() {
self.exporter.clearSelectedBlocks();
document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
});
document.getElementById('addAllFromLibButton').addEventListener('click',
document.getElementById('dropdown_addAllFromLib').addEventListener('click',
function() {
self.exporter.addAllBlocksToWorkspace();
document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
});
};

25
demos/blocklyfactory/factory.css
View File

@@ -124,6 +124,10 @@ button, .buttonStyle {
display: none;
}
#helpButton {
float: right;
}
#blockFactoryContent {
height: 87%;
}
@@ -161,8 +165,6 @@ button, .buttonStyle {
width: 50%;
}
/* Workspace Factory */
#workspaceFactoryContent {
clear: both;
display: none;
@@ -178,6 +180,7 @@ button, .buttonStyle {
}
#exportSelector {
display: inline-block;
float: left;
height: 75%;
width: 30%;
@@ -185,9 +188,9 @@ button, .buttonStyle {
#exportSettings {
float: left;
padding: 16px;
width: 30%;
overflow: hidden;
padding-left: 16px;
width: 30%;
}
#exporterHiddenWorkspace {
@@ -208,10 +211,22 @@ button, .buttonStyle {
padding: 5px 19px;
}
.tab:hover:not(.tabon){
background-color: #e8e8e8;
}
.tab.tabon {
background-color: #ddd;
background-color: #ccc;
}
.tab.taboff {
cursor: pointer;
}
#tabContainer {
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
display: table;
width: 100%;
}

45
demos/blocklyfactory/index.html
View File

@@ -33,29 +33,38 @@
</script>
</head>
<body>
<h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
<a href="../index.html">Demos</a> &gt; Blockly Factory</h1>
<div id="tabContainer">
<h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
<a href="../index.html">Demos</a> &gt; Blockly Factory
<button id="helpButton" title="View documentation in new window.">
<span>Help</span>
</button>
</h1>
<div id="tabContainer">
<div id="blockFactory_tab" class="tab tabon"> Block Factory</div>
<div class="tabGap"></div>
<div id="workspaceFactory_tab" class="tab taboff"> Workspace Factory</div>
<div class="tabGap"></div>
<div id="blocklibraryExporter_tab" class="tab taboff"> Exporter</div>
</div>
<!-- Exporter tab -->
<div id="blockLibraryExporter">
<h3> Block Selector </h3>
<div id="helperTextDiv">
<div id="exportSelector">
<h3> Block Selector </h3>
<p id="helperText"> Drag blocks into your workspace to select them for download.</p>
<div class='dropdown'>
<button id="button_setBlocks">Select</button>
<div id="dropdownDiv_setBlocks" class="dropdown-content">
<a id='dropdown_addAllFromLib'>All Stored</a>
<a id='dropdown_addAllUsed'>All Used</a>
<a id='dropdown_clearSelected'>Remove All</a>
</div>
</div>
<!-- Inject exportSelectorWorkspace into this div -->
<div id="selectorWorkspace"></div>
</div>
<div id="exporterButtons">
<button id="clearSelectedButton"> Clear Blocks </button>
<button id="addAllFromLibButton"> Add All Stored Blocks </button>
<button id="addAllUsedButton"> Add All Used Blocks </button>
</div>
<!-- Inject exportSelectorWorkspace into this div -->
<div id="exportSelector"></div>
<!-- Users may customize export settings through this form -->
<div id="exportSettings">
<h3> Export Settings </h3>
@@ -99,9 +108,12 @@
</div>
</div>
<!-- Workspace Factory tab -->
<div id="workspaceFactoryContent">
</div>
<!-- Blockly Factory Tab -->
<table id="blockFactoryContent">
<tr>
<td width="50%" height="5%">
@@ -157,9 +169,6 @@
<button id="localSaveButton" title="Save block library xml to a local file.">
<span>Download Block Library</span>
</button>
<button id="helpButton" title="View documentation in new window.">
<span>Help</span>
</button>
</td>
</tr>
</table>