From 0cf5d123747e18c05f0f49072c8d77e6d4f25394 Mon Sep 17 00:00:00 2001 From: Emma Dauterman Date: Thu, 25 Aug 2016 16:40:25 -0700 Subject: [PATCH] Blockly Factory: Resize Workspaces in Workspace Factory (#593) * Made workspace factory toolboxes take up height of screen, made workspce options properly scrollable, fixed being able to accidentally see Block factory some times, made Exporter and workspace factory scrollable if necessary * Nit alphabetize css rules * Fixed display none problems for Block factory, making it so that it can be hidden properly * Nit css style --- demos/blocklyfactory/app_controller.js | 46 ++++++++------- demos/blocklyfactory/factory.css | 77 +++++++++++++++++++++----- demos/blocklyfactory/index.html | 47 +++++++++------- 3 files changed, 117 insertions(+), 53 deletions(-) diff --git a/demos/blocklyfactory/app_controller.js b/demos/blocklyfactory/app_controller.js index 53eaa9857..082987d03 100644 --- a/demos/blocklyfactory/app_controller.js +++ b/demos/blocklyfactory/app_controller.js @@ -306,9 +306,11 @@ AppController.prototype.onTab = function() { this.selectedTab == AppController.WORKSPACE_FACTORY; if (this.selectedTab == AppController.EXPORTER) { - // Show container of exporter. - FactoryUtils.show('blockLibraryExporter'); + // Hide other tabs. FactoryUtils.hide('workspaceFactoryContent'); + FactoryUtils.hide('blockFactoryContent'); + // Show exporter tab. + FactoryUtils.show('blockLibraryExporter'); // Need accurate state in order to know which blocks are used in workspace // factory. @@ -325,13 +327,16 @@ AppController.prototype.onTab = function() { this.exporter.updatePreview(); } else if (this.selectedTab == AppController.BLOCK_FACTORY) { - // Hide container of exporter. + // Hide other tabs. FactoryUtils.hide('blockLibraryExporter'); FactoryUtils.hide('workspaceFactoryContent'); + // Show Block Factory. + FactoryUtils.show('blockFactoryContent'); } else if (this.selectedTab == AppController.WORKSPACE_FACTORY) { - // Hide container of exporter. + // Hide other tabs. FactoryUtils.hide('blockLibraryExporter'); + FactoryUtils.hide('blockFactoryContent'); // Show workspace factory container. FactoryUtils.show('workspaceFactoryContent'); // Update block library category. @@ -566,22 +571,25 @@ AppController.prototype.initializeBlocklyStorage = function() { * Handle resizing of elements. */ AppController.prototype.onresize = function(event) { - // Handle resizing of Block Factory elements. - var expandList = [ - document.getElementById('blockly'), - document.getElementById('blocklyMask'), - document.getElementById('preview'), - document.getElementById('languagePre'), - document.getElementById('languageTA'), - document.getElementById('generatorPre') - ]; - for (var i = 0, expand; expand = expandList[i]; i++) { - expand.style.width = (expand.parentNode.offsetWidth - 2) + 'px'; - expand.style.height = (expand.parentNode.offsetHeight - 2) + 'px'; + if (this.selectedTab == AppController.BLOCK_FACTORY) { + // Handle resizing of Block Factory elements. + var expandList = [ + document.getElementById('blocklyPreviewContainer'), + document.getElementById('blockly'), + document.getElementById('blocklyMask'), + document.getElementById('preview'), + document.getElementById('languagePre'), + document.getElementById('languageTA'), + document.getElementById('generatorPre'), + ]; + for (var i = 0, expand; expand = expandList[i]; i++) { + expand.style.width = (expand.parentNode.offsetWidth - 2) + 'px'; + expand.style.height = (expand.parentNode.offsetHeight - 2) + 'px'; + } + } else if (this.selectedTab == AppController.EXPORTER) { + // Handle resize of Exporter block options. + this.exporter.view.centerPreviewBlocks(); } - - // Handle resize of Exporter block options. - this.exporter.view.centerPreviewBlocks(); }; /** diff --git a/demos/blocklyfactory/factory.css b/demos/blocklyfactory/factory.css index 810b47411..5a6600eeb 100644 --- a/demos/blocklyfactory/factory.css +++ b/demos/blocklyfactory/factory.css @@ -27,7 +27,7 @@ body { background-color: #fff; font-family: sans-serif; margin: 0 5px; - overflow: hidden + overflow: hidden; } h1 { @@ -63,8 +63,13 @@ p { padding: 5px 0px; } +#factoryHeader { + display: table; + height: 10%; +} + #blockly { - position: fixed; + position: absolute; } #blocklyMask { @@ -133,8 +138,9 @@ button, .buttonStyle { } #blockFactoryContent { - height: 87%; + height: 85%; width: 100%; + overflow: hidden; } #blockFactoryPreview { @@ -170,15 +176,15 @@ button, .buttonStyle { } #blocklyWorkspaceContainer { - height: 95%; - padding: 2px; width: 50%; } #workspaceFactoryContent { clear: both; display: none; - height: 100%; + height: 90%; + overflow-x: hidden; + overflow-y: scroll; } /* Exporter */ @@ -186,7 +192,9 @@ button, .buttonStyle { #blockLibraryExporter { clear: both; display: none; - height: 100%; + height: 90%; + overflow-x: hidden; + overflow-y: scroll; } #exportSelector { @@ -369,17 +377,26 @@ td { width: 0; z-index: -1; } +#wfactoryHeader { + height: 29%; + padding: 0.5%; +} #workspaceTabs { background-color: #f8f8f8; border: 1px solid #ccc; display: table; + width: auto; } #toolbox_section { - height: 405px; + height: 85%; width: 60%; - position: relative; +} + +#previewHelp { + padding: 10px; + width: 98%; } #toolbox_blocks { @@ -388,34 +405,65 @@ td { } #preview_blocks { - height: 395px; + height: 80%; + padding: 10px; width: 100%; } #createDiv { + height: 79%; padding: 0.5%; width: 60%; } #previewDiv { border: 10px solid #eee; + height: 77%; margin-right: 0.5%; + padding-bottom: 10px; width: 35%; } #previewBorder { border: 5px solid #ddd; - padding: 2%; + height: 100%; + padding-right: 20px; } -#toolbox_div, #preload_div { +.test { + border: 1px solid black; +} + +#toolbox_div { + display: table; + height: auto; margin-right: 5%; + overflow: hidden; width: 35%; } -#workspace_options { - max-height: 250px; +#preload_div { + display: table; + height: 70%; + margin-right: 5%; + max-height: 500px; + overflow: hidden; overflow-y: scroll; + width: 35%; +} + +#shadowBlockDropdown { + height: 15%; +} + +#preloadHelp { + display: table-row; + height: 30%; +} + +#workspace_options { + display: table-row; + margin-top: 2%; } #disable_div { @@ -473,7 +521,6 @@ td { /* The container
- needed to position the dropdown content */ .dropdown { - position: relative; display: inline-block; } diff --git a/demos/blocklyfactory/index.html b/demos/blocklyfactory/index.html index 237c26323..641ec2e16 100644 --- a/demos/blocklyfactory/index.html +++ b/demos/blocklyfactory/index.html @@ -132,7 +132,8 @@
-

+

+

@@ -165,22 +166,25 @@ -

+

+
-

Edit

-

Drag blocks into the workspace to configure the toolbox in your custom workspace.

- +
+

Edit

+

Drag blocks into the workspace to configure the toolbox in your custom workspace.

+
+
Toolbox Workspace
-
+
-
+ @@ -258,8 +264,10 @@ @@ -267,7 +275,7 @@ - + - - + -
@@ -292,7 +300,7 @@
+
@@ -323,13 +331,13 @@
- + +
+
@@ -372,6 +380,7 @@