new UI

CHANGELOG.txt

@@ -1,16 +1,20 @@
-v0.7.1, 2020-06-24
-- add button switchable readnonly option in Ace Editor
-- fix last translation
-- WIP flat design + white everywhere for contrats enhancement
+v0.7.4, 2020-09-12
+- change UI to simplify use, everything is under 'setup' icon top right
+- no more board select in dropdown list, but merged with board modal information
+
+v0.7.3, 2020-07-06
+- change prompt to custom-dialog from Blockly, Electron compatible
+- bug fix on all reset button
+- bug fix on all new/open/save
+- bug fix on fullscreen button
 
 v0.7.2, 2020-07-03
 - update blockly core to v3.20200625.1
 - add comment on workspace
 - add serial board communication category
-- add shield X-NUCLEO-IKS01A3 T� & humidity function
+- add shield X-NUCLEO-IKS01A3 T� & humidity function
 
-v0.7.3, 2020-07-06
-- change prompt to custom-dialog from Blockly, Electron compatible
-- bug fix on all reset button
-- bug fix on all new/open/save
-- bug fix on fullscreen button
+v0.7.1, 2020-06-24
+- add button switchable readnonly option in Ace Editor
+- fix last translation
+- WIP flat design + white everywhere for contrats enhancement

S4E/css/S4E.css

@@ -26,14 +26,14 @@
     padding:2px;
     line-height:0;
     vertical-align: middle;
-    background: #00ABDF;
+    background: #03234b;
     color: #FFFFFF;
     font-size: 1.5em;
     width: 32px;
 }
 .iconButtons:hover{
     background: #FFFFFF;
-    color: #000000;
+    color: #03234b;
     cursor : pointer;
     transition: 0.5s ease;
 }
@@ -98,6 +98,7 @@
     cursor: help;
 }
 #copyCodeButton{
+    visibility: hidden;
     position: absolute;
     top: 85px;
     right: 5px;

S4E/js/boards.js

@@ -29,7 +29,8 @@ Code.setBoard = function () {
 };
 
 function changeBoard() {
-    var boardMenu = document.getElementById('boardMenu');
+    // var boardMenu = document.getElementById('boardMenu');
+    var boardMenu = document.getElementById('boardDescriptionSelector');
     var newBoard = encodeURIComponent(boardMenu.options[boardMenu.selectedIndex].value);
     var search = window.location.search;
     if (search.length <= 1) {

css/UI.css

@@ -30,6 +30,28 @@ html[dir=rtl] {
     font-size: x-large;
     font-weight: bold;
 }
+
+#globalTable {
+    width: 100%;
+    height: 100%;
+}
+#optionsTop {
+    height: 30px;
+}
+#optionsTopTitle {
+    width: 268px;
+    white-space: nowrap;
+}
+#optionsTopInteractiveHelp {
+    width: 100%;
+}
+#functionsIcons {
+    height: 30px;
+}
+#globalWorkspace {
+    width: 100%;
+    height: 100%;
+}
 /* ace editor */
 .ace_content{
     left: 0px !important;
@@ -173,7 +195,6 @@ td.tabMiddle {
     color: #fff;
 }
 
-
 /* Content blocks */
 .content_wrapper {
     height: 100%;
@@ -221,7 +242,7 @@ td.tabMiddle {
     background-color: #03234B;
 }
 #content_code {
-    width: 50px;
+    width: 40px;
     height: 100%;
     min-width: 5px;
 }
@@ -277,6 +298,7 @@ td.tabMiddle {
     height: 100%;
     z-index: 100;
     background-color: rgba(0,0,0,0.5); /*dim the background*/
+    display: none;
 }
 .modal.show {
     /* Firefox */

css/lateral-panel.css

@@ -13,10 +13,21 @@
     display: grid;
     align-items: center;
     text-align: center;
-    color: #03234B;
+    /* color: #03234B; */
+    color: #FFFFFF;
+}
+#CLI_title {
+    display:flex;
+    text-align: center;
 }
-#lateral-panel-setup,
-#lateral-panel-CLI {
+#installBoardsInput,
+#searchlLibInput,
+#installLibInput {
+    width: 250px;
+    font-size:20px;
+}
+
+#lateral-panel-setup {
     z-index: 9999;
     position: fixed;
     top: 0;
@@ -25,8 +36,7 @@
     min-height: 100vh;
     transform: translateX(-100%);
 }
-#lateral-panel-setup-input,
-#lateral-panel-CLI-input {
+#lateral-panel-setup-input {
     position: absolute;
     right: -999em;
 }
@@ -48,17 +58,8 @@
     height: 28px;
     cursor: pointer;
     font-size: 1.5em;
+    color: #03234B;
 }
-#lateral-panel-CLI-label {
-    z-index: 1;
-    top: 34px;
-    right: 100%;
-    width: 28px;
-    height: 28px;
-    cursor: pointer;
-    font-size: 1.5em;
-}
-#lateral-panel-CLI-label,
 #lateral-panel-CLI-bloc,
 #lateral-panel-setup-label,
 #lateral-panel-setup-bloc {
@@ -67,19 +68,53 @@
     box-shadow: -0.5em 0 .4em rgba(0, 0, 0, 0.3);
     transition: all .5s;
 }
-#lateral-panel-setup-input:checked ~ #lateral-panel-setup-label,
-#lateral-panel-CLI-input:checked ~ #lateral-panel-CLI-label {
+#lateral-panel-setup-input:checked ~ #lateral-panel-setup-label {
     right: 200%;
 }   
-#lateral-panel-setup-input:checked ~ #lateral-panel-setup-bloc,
-#lateral-panel-CLI-input:checked ~ #lateral-panel-CLI-bloc {
+#lateral-panel-setup-input:checked ~ #lateral-panel-setup-bloc {
     transform: translateX(-100%);
 }
-#lateral-panel-setup-label:before,
-#lateral-panel-CLI-label:before {
+#lateral-panel-setup-label:before {
     position: absolute;
     top: 50%;
     right: 50%;
     transition: all .5s;
     transform: translate(50%, -50%) rotate(45deg);
+}
+/**
+ * accordion effect inside setup panel
+ */
+.accordion {
+  background-color: #03234b;
+  color: #FFFFFF;
+  cursor: pointer;
+  padding: 8px;
+  width: 100%;
+  text-align: left;
+  border: none;
+  outline: none;
+  transition: 0.4s;
+	vertical-align: middle;
+    font-size: x-large;
+    font-weight: bold;
+}
+.accordion:after {
+  content: "\02795"; /* Unicode character for "plus" sign (+) */
+  font-size: x-large;
+  color: #FFFFFF;
+  float: right;
+  margin-left: 5px;
+}
+.accordion:hover {
+  background-color: #FFFFFF;
+  color: #03234b;
+}
+
+/* Style the accordion panel. Note: hidden by default */
+.panel {
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
 }