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

Blockly Factory: Resize Workspaces in Workspace Factory (#593)

Browse Source 
* 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
This commit is contained in:
Emma Dauterman
2016-08-25 16:40:25 -07:00
committed by picklesrus
parent 8e838256ce
commit 0cf5d12374
3 changed files with 117 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
demos/blocklyfactory/app_controller.js
View File

@@ -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();
};
/**

77
demos/blocklyfactory/factory.css
View File

@@ -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 <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

47
demos/blocklyfactory/index.html
View File

@@ -132,7 +132,8 @@
<!-- Workspace Factory tab -->
<div id="workspaceFactoryContent">
<p>
<div id="factoryHeader">
<p>
<div class="dropdown">
<button id="button_importBlocks">Import Custom Blocks</button>
<div id="dropdownDiv_importBlocks" class="dropdown-content">
@@ -165,22 +166,25 @@
<button id="button_clear">Clear</button>
</p>
</p>
</div>
<section id="createDiv">
<h3>Edit</h3>
<p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p>
<table id='workspaceTabs' style="width:auto">
<div id="createHeader">
<h3>Edit</h3>
<p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p>
</div>
<table id='workspaceTabs' style="width:auto; height:auto">
<td id="tab_toolbox" class="tabon">Toolbox</td>
<td id="tab_preload" class="taboff">Workspace</td>
</table>
<section id="toolbox_section">
<div id="toolbox_blocks" class="content"></div>
<div id="toolbox_blocks"></div>
<div id='disable_div'></div>
</section>
<aside id="toolbox_div">
<p id="categoryHeader">Your categories will appear here</p>
<table id="categoryTable" style="width:auto">
<table id="categoryTable" style="width:auto; height:auto">
</table>
<p>&nbsp;</p>
@@ -209,7 +213,7 @@
</aside>
<div class='dropdown'>
<div id="shadowBlockDropdown" class='dropdown'>
<button id="button_editShadow">Edit Block</button>
<div id="dropdownDiv_editShadowAdd" class="dropdown-content">
<a id='dropdown_addShadow'>Add Shadow</a>
@@ -220,9 +224,11 @@
</div>
<aside id='preload_div' style='display:none'>
<p>Configure the <a href="https://developers.google.com/blockly/guides/get-started/web">options</a> for your Blockly inject call.</p>
<button class="small" id="button_standardOptions">Reset Options</button>
<form id="workspace_options">
<div id="preloadHelp">
<p>Configure the <a href="https://developers.google.com/blockly/guides/get-started/web">options</a> for your Blockly inject call.</p>
<button class="small" id="button_standardOptions">Reset Options</button>
</div>
<div id="workspace_options">
<input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks<br>
<input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks<br>
<input type="checkbox" id="option_css_checkbox" class="optionsInput">Use Blockly CSS<br>
@@ -250,7 +256,7 @@
Min Scale <input type="text" id="zoomOption_minScale_text" class="optionsInput" value="0.3"><br>
Scale Speed <input type="text" id="zoomOption_scaleSpeed_text" class="optionsInput" value="1.2"><br>
</div>
</form>
</div>
</aside>
@@ -258,8 +264,10 @@
<aside id="previewDiv">
<div id="previewBorder">
<h3>Preview</h3>
<p>This is what your custom workspace will look like.</p>
<div id="previewHelp">
<h3>Preview</h3>
<p>This is what your custom workspace will look like.</p>
</div>
<div id="preview_blocks" class="content"></div>
</div>
</aside>
@@ -267,7 +275,7 @@
<!-- Blockly Factory Tab -->
<table id="blockFactoryContent">
<tr>
<tr width="100%" height="10%">
<td width="50%" height="5%">
<table>
<tr id="blockLibrary">
@@ -292,7 +300,7 @@
</tr>
</table>
</td>
<td>
<td height="5%">
<table id="blockFactoryPreview">
<tr>
<td id="previewContainer">
@@ -323,13 +331,13 @@
</table>
</td>
</tr>
<tr>
<tr height="80%">
<td id="blocklyWorkspaceContainer">
<div id="blockly"></div>
<div id="blocklyMask"></div>
</td>
<td width="50%" height="95%">
<table>
<td width="50%">
<table id="blocklyPreviewContainer">
<tr>
<td height="30%">
<div id="preview"></div>
@@ -372,6 +380,7 @@
</tr>
</table>
</td>
</tr>
</table>
<xml id="blockfactory_toolbox" class="toolbox">