Skip to content

GitLab

A
ardublockly
Commit b96a5bda authored by carlosperate's avatar carlosperate
Browse files
Options

Add sketch name text field and improve edit layout for desktop app: 

There is a text input at the top navigational bar to add the sketch name (no action yet taken)
The electron desktop app html layout improved (full width and no sidebar menu).
Move slightly the load XML code floating button for better positioning.
Code to open the "not connected to server" modal to its own function.
Move all design initialisation code into a single function all for general init.
parent 99d9d809
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 52 deletions
ardublockly/ardublockly.css
View file @ b96a5bda
......@@ -159,8 +159,8 @@ ul.side-nav li.logo:hover {
#button_load_xml {
position: absolute;
right: 30px;
bottom: 20px;
right: 36px;
bottom: 36px;
display: none;
}
......@@ -337,6 +337,24 @@ ul.side-nav li.logo:hover {
margin-right: 1rem;
}
/* Sketch name text input */
.sketch_name_wrapper {
display: inline-block;
padding-left: 5px;
}
.sketch_name {
width: auto !important;
max-width: 350px;
line-height: 64px;
height: 3rem !important;
font-size: 1.5rem !important;
border-bottom: 1px solid #EEE !important;
}
.sketch_name_icon {
display: inline !important;
font-size: 1.2rem !important;
float: right;
}
/*****************************/
/* Overwriting Blockly CSS */
......@@ -427,17 +445,19 @@ ul.side-nav li.logo:hover {
/*********************************/
/* Modify container to have a larger width in all resolutions */
.container {
max-width: 1650px !important;
width: 100% !important;
width: 90%;
max-width: initial !important;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media only screen and (min-width : 601px) {
.container {
width: 95% !important;
width: 95%;
}
}
@media only screen and (min-width : 993px) {
.container {
width: 90% !important;
width: 90%;
}
}
......@@ -494,12 +514,12 @@ ul.side-nav li ul li{
margin-right: 16px;
}
/* button-collapse with show-on-large does not work in IE */
/* button-collapse with show-on-large does not work in IE
@media only screen and (min-width : 993px) {
.button-collapse {
display: block !important;
display: block;
}
}
} */
/* Increase the size of Materialize Modal in small res */
@media only screen and (max-width : 600px) {
......
ardublockly/ardublockly.js
View file @ b96a5bda
......@@ -21,17 +21,23 @@ window.addEventListener('load', function load(event) {
ArduinoMaterial.injectBlockly(
document.getElementById('content_blocks'), 'ardublockly_toolbox.xml');
ArduinoMaterial.materializeJsInit();
ArduinoMaterial.bindActionFunctions_();
ArduinoMaterial.designJsInit();
ArduinoMaterial.bindDesignEventListeners_();
ArduinoMaterial.bindActionFunctions_();
ArduinoMaterial.bindBlocklyEventListeners_();
ArduinoMaterial.resizeToggleToolboxBotton();
// Check if not running locally (including developer's local network IP)
if (document.location.hostname != 'localhost' &&
document.location.hostname != '192.168.0.7') {
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
}
// Check if running on the Desktop app
if (navigator.userAgent.toLowerCase().indexOf('ardublockly') > -1) {
// It is, so remove container padding and side menu button
ArduinoMaterial.containerFullWidth();
ArduinoMaterial.hideSideMenuButton();
}
});
......@@ -129,7 +135,7 @@ ArduinoMaterial.loadServerXmlFile = function(xmlFile) {
};
var callbackConnectionError = function() {
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
};
ArduinoMaterial.loadXmlBlockFile(
......@@ -184,13 +190,30 @@ ArduinoMaterial.saveXmlFile = function() {
saveAs(blob, 'ardublockly.xml');
};
/**
* Opens the modal that displays the "not connected to server" message.
*/
ArduinoMaterial.openNotConnectedModal = function() {
$('#not_running_dialog').openModal({
dismissible: true,
opacity: .5,
in_duration: 200,
out_duration: 250
});
};
/**
* Prepares and opens the settings modal.
*/
ArduinoMaterial.openSettings = function() {
ArduinoMaterial.populateSettings();
$('#settings_dialog').openModal();
}
$('#settings_dialog').openModal({
dismissible: true,
opacity: .5,
in_duration: 200,
out_duration: 250
});
};
/**
* Retrieves the Settings from ArduServerCompiler and populates the form data
......@@ -220,7 +243,7 @@ ArduinoMaterial.setCompilerLocationHtml = function(newEl) {
}
} else {
// If the element is Null, then Ardublockly server is not running
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
}
};
......@@ -237,7 +260,7 @@ ArduinoMaterial.setSketchLocationHtml = function(newEl) {
}
} else {
// If the element is Null, then Ardublockly server is not running
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
}
};
......@@ -262,7 +285,7 @@ ArduinoMaterial.setArduinoBoardsHtml = function(newEl) {
}
} else {
// If the element is Null, then Ardublockly server is not running
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
}
};
......@@ -298,7 +321,7 @@ ArduinoMaterial.setSerialPortsHtml = function(newEl) {
}
} else {
// If the element is Null, then Ardublockly server is not running
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
}
};
......@@ -334,7 +357,7 @@ ArduinoMaterial.setIdeHtml = function(newEl) {
}
} else {
// If the element is Null, then Ardublockly server is not running
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
}
};
......@@ -371,7 +394,7 @@ ArduinoMaterial.sendCodeReturn = function(dataBack) {
ArduinoMaterial.arduinoIdeModal(dataBack);
} else {
// If the element is Null, then Ardublockly server is not running
$('#not_running_dialog').openModal();
ArduinoMaterial.openNotConnectedModal();
}
};
......
ardublockly/ardublockly_design.js
View file @ b96a5bda
......@@ -12,6 +12,16 @@
*/
var ArduinoMaterial = ArduinoMaterial || {};
/**
* Initialises all the design related JavaScript.
*/
ArduinoMaterial.designJsInit = function() {
ArduinoMaterial.materializeJsInit();
ArduinoMaterial.resizeToggleToolboxBotton();
ArduinoMaterial.sketchNameSizeEffect();
};
/**
* Initialises the js/jQuery required for the materialize framework.
*/
......@@ -28,8 +38,8 @@ ArduinoMaterial.materializeJsInit = function() {
$('.modal-trigger').leanModal({
dismissible: true,
opacity: .5,
in_duration: 300,
out_duration: 200
in_duration: 200,
out_duration: 250
});
// Pop-up tool tips
$('.tooltipped').tooltip({'delay': 50});
......@@ -39,7 +49,8 @@ ArduinoMaterial.materializeJsInit = function() {
};
/**
* Resizes the container for Blockly and forces a re-render of the SVG.
* Sets the spinner around the play button ON or OFF.
* @param {!boolean} active True turns ON the spinner, false OFF.
*/
ArduinoMaterial.runButtonSpinner = function(active) {
var spinner = document.getElementById('button_run_spinner');
......@@ -55,10 +66,10 @@ ArduinoMaterial.runButtonSpinner = function(active) {
};
/**
* Displays or hides the 'load textarea xml' button.
* Displays or hides the 'load textarea xml' button based on the state of the
* collapsible 'xml_collapsible_body'.
*/
ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
//var xmlButton = document.getElementById('button_load_xml');
var xmlButtonBody = document.getElementById('xml_collapsible_body');
// Waiting to check status due to the animation delay
setTimeout(function() {
......@@ -71,13 +82,13 @@ ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
};
/**
* Sets the class and content of the toolbox On and Off button.
* Sets the class and content of the toolbox View and Hide button.
* @param {!boolean} toolboxVisible Indicates if the toolbox visibility.
*/
ArduinoMaterial.showToolboxButtonState = function(toolboxVisible) {
var toolboxButton = document.getElementById('button_toggle_toolbox');
var toolboxButtonIcon = document.getElementById('button_toggle_toolbox_icon');
// Element conatins several classes, use replace to maintain the rest
// Element contains several classes, use replace to maintain the rest
if (toolboxVisible == true) {
toolboxButton.className = toolboxButton.className.replace(
'button_toggle_toolbox_on', 'button_toggle_toolbox_off');
......@@ -170,6 +181,35 @@ ArduinoMaterial.arduinoIdeModal = function(bodyEl) {
window.location.hash = '';
};
/**
* Hides the side menu button.
*/
ArduinoMaterial.hideSideMenuButton = function() {
var sideMenuButton = document.getElementById('button-collapse');
sideMenuButton.style.display = 'none';
};
/**
* Sets all the elements using the container class to have a width of 100%.
*/
ArduinoMaterial.containerFullWidth = function() {
var containers = $('.container');
for (var i = 0; i < containers.length; i++) {
containers[i].style.width = '100%';
}
};
/**
* Initialises the sketch name input text javascript to dynamically adjust its
* width to the width of its contents.
*/
ArduinoMaterial.sketchNameSizeEffect = function() {
var resizeInput = function() {
$(this).attr('size', $(this).val().length);
};
$('#sketch_name').keyup(resizeInput).each(resizeInput);
};
/**
* Compute the absolute coordinates and dimensions of an HTML element.
* @param {!Element} element Element to match.
......
ardublockly/index.html
View file @ b96a5bda
......@@ -6,16 +6,14 @@
<link rel="icon" href="img/favicon.ico">
<meta name="theme-color" content="#00878F">
<title>Ardublockly</title>
<!-- jQuery -->
<script src="js_libs/jquery-2.1.3.min.js"></script>
<!--Materialize -->
<!-- Materialize CSS -->
<link href="materialize/materialize.css" rel="stylesheet" media="screen,projection">
<script src="materialize/materialize.js"></script>
<!-- FileSaver -->
<script src="js_libs/FileSaver.min.js"></script>
<!-- Prettify -->
<!-- Prettify CSS -->
<link rel="stylesheet" href="../blockly/demos/prettify.css">
<script src="../blockly/demos/prettify.js"></script>
<!-- Ardublockly CSS -->
<link href="ardublockly.css" rel="stylesheet" media="screen,projection">
<!-- Ardublockly - For now uncompressed files -->
<!--script src="../blockly/blockly_compressed.js"></script-->
<script src="../blockly/blockly_uncompressed.js"></script>
......@@ -52,22 +50,21 @@
<script src="../blockly/generators/arduino/time.js"></script>
<script src="../blockly/generators/arduino/variables.js"></script>
<script src="../blockly/msg/js/en.js"></script>
<!-- Arduino Server Compiler -->
<script src="../ardublocklyserver/js/ArduServerCompiler.js"></script>
<!-- Arduino Material design app -->
<link href="ardublockly.css" rel="stylesheet" media="screen,projection">
<script src="ardublockly_design.js"></script>
<script src="ardublockly_blockly.js"></script>
<script src="ardublockly.js"></script>
</head>
<body>
<!-- Horizonal Navigation bar -->
<nav class="nav-fixed arduino_teal">
<div class="nav-wrapper container">
<a class="button-collapse" href="#" data-activates="slide-out"><i class="mdi-navigation-menu"></i></a>
<a id="logo-container" href="#" class="brand-logo">Ardublockly</a>
<a class="button-collapse" href="#" data-activates="slide-out" id="button-collapse"><i class="mdi-navigation-menu"></i>
<a id="logo-container" class="brand-logo">
Ardublockly:
<!-- Sketch name editable text field -->
<span class="sketch_name_wrapper">
<i class="mdi-image-edit sketch_name_icon"></i>
<input id="sketch_name" class="sketch_name" type="text" value="Sketch Name">
</span>
</a>
<!-- Horizontal Navbar links only shown on large resolutions -->
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#" id="button_load">Open<i class="mdi-file-file-upload left"></i></a></li>
......@@ -175,7 +172,7 @@
</div>
</div>
<!-- Settings: Displayed as a "Materialize Modal" (dialog) -->
<!-- Settings: Displayed as a Materialize Modal (android dialog) -->
<div id="settings_dialog" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Settings</h4>
......@@ -255,5 +252,19 @@
</div>
</div>
<!-- jQuery and Materialize JS -->
<script src="js_libs/jquery-2.1.3.min.js"></script>
<script src="materialize/materialize.js"></script>
<!-- FileSaver JS -->
<script src="js_libs/FileSaver.min.js"></script>
<!-- Prettify JS -->
<script src="../blockly/demos/prettify.js"></script>
<!-- Arduino Server Compiler Ajax JS -->
<script src="../ardublocklyserver/js/ArduServerCompiler.js"></script>
<!-- Ardublockly app -->
<link href="ardublockly.css" rel="stylesheet" media="screen,projection">
<script src="ardublockly_design.js"></script>
<script src="ardublockly_blockly.js"></script>
<script src="ardublockly.js"></script>
</body>
</html>
\ No newline at end of file
</html>
ardublockly/materialize/materialize.css
View file @ b96a5bda
......@@ -5253,9 +5253,9 @@ nav {
nav .nav-wrapper i {
display: block;
font-size: 2rem; }
@media only screen and (min-width : 993px) {
/* @media only screen and (min-width : 993px) {
nav a.button-collapse {
display: none; } }
display: none; } }*/
nav .button-collapse {
float: left;
position: relative;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment