From 7810a5397d486508ecaa163ca4ada5f2e71caf3c Mon Sep 17 00:00:00 2001 From: Emma Dauterman Date: Tue, 16 Aug 2016 15:38:44 -0700 Subject: [PATCH] Blockly Factory: UI for Navigation Bar, Help Button, Exporter (#549) * 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 --- demos/blocklyfactory/app_controller.js | 16 +++++++-- demos/blocklyfactory/factory.css | 25 +++++++++++--- demos/blocklyfactory/index.html | 45 +++++++++++++++----------- 3 files changed, 60 insertions(+), 26 deletions(-) diff --git a/demos/blocklyfactory/app_controller.js b/demos/blocklyfactory/app_controller.js index 59ac2c47f..052007e28 100644 --- a/demos/blocklyfactory/app_controller.js +++ b/demos/blocklyfactory/app_controller.js @@ -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"); }); }; diff --git a/demos/blocklyfactory/factory.css b/demos/blocklyfactory/factory.css index d2a72bc64..bddc7cd33 100644 --- a/demos/blocklyfactory/factory.css +++ b/demos/blocklyfactory/factory.css @@ -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%; +} diff --git a/demos/blocklyfactory/index.html b/demos/blocklyfactory/index.html index ad93808f1..b24e899e8 100644 --- a/demos/blocklyfactory/index.html +++ b/demos/blocklyfactory/index.html @@ -33,29 +33,38 @@ -

Blockly > - Demos > Blockly Factory

- -
+

Blockly > + Demos > Blockly Factory + +

+
Block Factory
-
Workspace Factory
-
Exporter
+ +
-

Block Selector

-
+
+

Block Selector

Drag blocks into your workspace to select them for download.

+
+ +
+ All Stored + All Used + Remove All +
+
+ + +
+
-
- - - -
- -
+

Export Settings

@@ -99,9 +108,12 @@
+ +
+
@@ -157,9 +169,6 @@ -