From 289eccf71c5479e81ef7649073be12600ac50f61 Mon Sep 17 00:00:00 2001
From: Bruno Bottazzini <bruno.bottazzini@intel.com>
Date: Thu, 14 Apr 2016 11:13:32 -0300
Subject: [PATCH] Change CSS and HTML to its new Layout

Signed-off-by: Bruno Bottazzini <bruno.bottazzini@intel.com>
---
 client/css/app.css                            | 79 ++++++++++++++-----
 .../js/combobox/jquery-ui-custom-combobox.js  |  2 +-
 server/views/index.html                       | 40 +++++-----
 3 files changed, 83 insertions(+), 38 deletions(-)

diff --git a/client/css/app.css b/client/css/app.css
index 5472882..cd78570 100644
--- a/client/css/app.css
+++ b/client/css/app.css
@@ -11,8 +11,6 @@
   overflow-x: hidden;
   background-color: #2d3237;
   width: 350px;
-
-
 }
 .file-viewer {
   overflow: auto;
@@ -30,6 +28,10 @@
   background-image: url('../imgs/file.png') !important;
   background-position: 0 !important;
 }
+.container {
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
 #fbp_editor {
 	width: 100%;
 	height: 80%;
@@ -41,6 +43,11 @@
   background-color:#540E0d;
 }
 
+.body {
+  font-family: clearsans-light;
+  background-color: #2D3237;
+}
+
 thead, tbody {
   display:block;
 }
@@ -51,7 +58,6 @@ tbody {
     overflow-x: hidden;
 }
 #top-menu{
-  position: fixed;
   left:0px;
   right:0px;
   height: 40px;
@@ -60,6 +66,10 @@ tbody {
   box-sizing: border-box;
   padding-left: 35px;
 }
+.top-menu-font{
+    font-family: clearsans-light;
+    font-size: 14px;
+}
 .menu-item{
   display: inline-block;
   margin-right: 31px;
@@ -82,16 +92,15 @@ tbody {
   border-top: 4px solid #33b7e9;
 }
 .tabcontents{
-    margin-top: 50px;
-    background-color: #F0F0F0;
+    background-color: #2D3237;
 }
 @font-face{
-	font-family:clearSans;
+	font-family: clearsans-light;
 	src:url(../fonts/ClearSans-Thin.ttf);
 	font-weight:thin;
 }
 .page-title{
-font-family: clearSans;
+font-family: clearsans-light;
   height: 105px;
   color:#8c9196;
   font-size: 4em;
@@ -108,7 +117,7 @@ font-family: clearSans;
 }
 .subtitle{
   margin-right: 210px;
-  color:33b7e9;
+  color:#33b7e9;
   text-transform:uppercase;
   font-size: 0.9em;
   font-weight: bold;
@@ -156,6 +165,7 @@ font-family: clearSans;
     margin-top: 0px;
     color:#8c9196;
     margin-right: 0px;
+    background-color: #2D3237 !important;
 }
 .inputControls{
     height: 40px;
@@ -166,13 +176,32 @@ font-family: clearSans;
     padding-left: 10px;
     border-radius: 20px;
 }
+/* Overwrite jquery ui class*/
+.ui-autocomplete-input, .ui-corner-right {
+    background: none !important;
+    background-color: #262a2e !important;
+    border: none !important;
+    height: 32px !important;
+    margin-top: -5px !important;
+    color: #AFB2B6 !important;
+    width: 328px;
+}
+.ui-widget {
+    font-family: clearsans !important;
+    font-size: 14px !important;
+}
+.ui-autocomplete-input {
+    font-family:"font-family: clearsans-light" !important;
+    font-size: 14px !important;
+ }
 button {
     background: transparent;
     border: 0;
 }
-
-#sj{
-    margin-top: 50px;
+#tree{
+    position: absolute;
+    top: 178px;
+    bottom: 0;
 }
 #cb{
     background-color: #2d3237;
@@ -188,7 +217,6 @@ button {
     margin-top: -40px;
     margin-right: 15px;
 }
-
 .blueLabel{
 	color:#33b7e9;
 	text-transform: capitalize;
@@ -196,6 +224,20 @@ button {
 	box-sizing: border-box;
 	display: inline-block;
 	font-weight: bold;
+	font-family: clearsans-bold;
+}
+.ace-monokai {
+    background-color: #1C2024 !important;
+}
+.ace_gutter {
+    background: none !important;
+    color: #4C5155 !important;
+    background-color: #202429 !important;
+    width: 40px;
+}
+.col-md-4, .tree-browser, .ng-isolate-scopem, .in {
+    font-family: clearsans-light;
+    background-color: #202429 !important;
 }
 
 .bluelabel span {
@@ -228,14 +270,15 @@ iframe{
 .ui-button-icon-only {
     width: 2.2em;
     height: 24px;
-    margin-bottom: 3px;
+    margin-bottom: -6px;
 }
-
-.ui-widget {
-    font-family: clear-sans !important;
-    font-size: 14px !important;
+.status-bar {
+    height: 24px;
+    margin-left: -10px;
+    font-family: clearsans-bold;
+    color: #4A4D51;
+    background-color: #1C2024;
 }
-
 .button_run_off {
     background:url(../imgs/button_run_off.png);
     background-repeat: no-repeat;
diff --git a/client/js/combobox/jquery-ui-custom-combobox.js b/client/js/combobox/jquery-ui-custom-combobox.js
index 51b2264..a8c3c37 100644
--- a/client/js/combobox/jquery-ui-custom-combobox.js
+++ b/client/js/combobox/jquery-ui-custom-combobox.js
@@ -23,7 +23,7 @@
           .appendTo(this.wrapper)
           .val(value)
           .attr("title", "")
-          .attr("placeholder", "Configuration file")
+          .attr("placeholder", "")
           .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
           .autocomplete({
             delay: 0,
diff --git a/server/views/index.html b/server/views/index.html
index 13c4305..c19afb2 100644
--- a/server/views/index.html
+++ b/server/views/index.html
@@ -1,4 +1,4 @@
-<html ng-app="soletta-devapp" ng-init="loadingStatus='true'">
+<html ng-app="soletta-devapp" ng-init="loadingStatus='true'" style="background-color: #202429;">
     <head class="header">
         <meta charset="utf-8">
         <title>Soletta Development Application</title>
@@ -80,14 +80,11 @@
                     $(event.target).removeClass('menu-item-hover');
                 })
 
-                //dynamically setting the size of the code browser and viewer
-                defineCodeBrowserHeight();
-
                 //dynamically resizes the height of the components
                 function defineCodeBrowserHeight(){
                     var availableHeight = window.innerHeight- bottomMargin;
                     $('#cb-content').css('height',availableHeight+'px');
-                    $('#tree').css('height',availableHeight+'px');
+                    $('#tree').css('height',availableHeight+23+'px');
                     $('#fbp_editor').css('height',(availableHeight/2)+'px');
                     $('#svgFrame').css('height',(availableHeight/2)+'px');
                 }
@@ -100,6 +97,8 @@
                 $('#configComboBox').combobox();
                 $('#configComboBox').append('<option value="none">none</option>');
 
+                //dynamically setting the size of the code browser and viewer
+                defineCodeBrowserHeight();
             });
         </script>
 
@@ -136,7 +135,7 @@
                 <!-- -------------------------------------------------------------- !-->
                 <div ng-controller="editor as ctrl" id="cb">
                     <!-- TOP OF THE PAGE !-->
-                    <div class="container" style="width: 100%; height: 56px;">
+                    <div class="container" style="width: 100%; height: 56px; background-color: #2D3237 !important;">
 
                     <!--TOP MENU !-->
                     <div class="menuStyle" style="margin-right: -7px; width: 100%;">
@@ -145,7 +144,7 @@
                             <button ng-click="$mdOpenMenu()">
                             File
                             </button>
-                            <md-menu-content style="font-family: clearsans-light">
+                            <md-menu-content class="top-menu-font">
                                 <md-menu-item>
                                     <md-button ng-click="ctrl.menuAction('file.projectnew', $event)">
                                         New Project
@@ -169,7 +168,7 @@
                                  </md-menu-item>
                                  <md-menu-item>
                                     <md-button ng-click="ctrl.menuAction('file.remove', $event)">
-                                        Remove File
+                                        Remove
                                     </md-button>
                                  </md-menu-item>
                                  <md-menu-divider></md-menu-divider>
@@ -184,7 +183,7 @@
                             <button ng-click="$mdOpenMenu()">
                                 Edit
                             </button>
-                            <md-menu-content style="font-family: clearsans-light">
+                            <md-menu-content class="top-menu-font">
                                 <md-menu-item>
                                     <md-button ng-click="ctrl.menuAction('edit.undo', $event)">
                                         Undo
@@ -218,7 +217,7 @@
                             <button ng-click="$mdOpenMenu()">
                                 View
                             </button>
-                            <md-menu-content style="font-family: clearsans-light">
+                            <md-menu-content class="top-menu-font">
                                 <md-menu-item>
                                     <md-button ng-click="ctrl.menuAction('view.code', $event)">
                                         {{showhideCode}}
@@ -259,19 +258,21 @@
                     </div>
 
                     <div  class="running_table" ng-class="{'enable_div': runJournal == true, 'disable_div': runJournal == false}" style="float:right">
-                        <select id="configComboBox" style="background-color:0xFF0000" class="inputControls">
+                        <span style="font-size: 13px; font-family: clearsans-bold; color: #616568; margin-right: 16px;" >CONFIGURATION</span>
+                        <select id="configComboBox" class="inputControls">
                             <option value="" ></option>
                         </select>
                     </div>
-                    <div style="float:right"><span style="margin-right:10px;"><u>Status:</u> {{ServiceStatus}}</span></div>
                 </div>
 
                 <!-- SHOW NODE SOURCE CODE !-->
                 <!--Main container of all code browser content !-->
-                <div id="cb-content" class="row show-source" style="width: 100%; height: 100%; background-color:#2d3237">
+                <div id="cb-content" class="row show-source" style="width: 100%; height: 100%; background-color:#202429">
                     <!--Tree view !-->
-                    <div collapse="!libChecked" context-menu id="tree" class="col-md-4 tree-browser" data-target="menu-1" ng-class="{ 'highlight': highlight, 'expanded' : expanded }" style="float: left;" ng-attr-style="{{codeChecked || svgChecked && 'width: 350px;' || 'width: 100%;' }}">
-                        <js-tree id="jstree" ui-tree="rootTree" tree-events="select_node:nodeSelected;ready:readyCB" tree-ajax="/api/tree"></js-tree>
+                    <div id="wrap">
+                        <div collapse="!libChecked" context-menu id="tree" class="col-md-4 tree-browser" data-target="menu-1" ng-class="{ 'highlight': highlight, 'expanded' : expanded }" style="height: 100%;" ng-attr-style="{{codeChecked || svgChecked && 'width: 350px;' || 'width: 100%;' }}">
+                            <js-tree id="jstree" ui-tree="rootTree" tree-events="select_node:nodeSelected;ready:readyCB" tree-ajax="/api/tree"></js-tree>
+                        </div>
                     </div>
 
                     <!-- DROP DOWN MENU !-->
@@ -284,13 +285,14 @@
                         </ul>
                     </div>
                     <!-- Contains the code viewer and the svg viewer !-->
-                    <div ng-attr-style="{{libChecked && 'margin-left: 360px;' || 'margin-left: 0px;' }}" style="background-color:#262a2e;">
+                    <div ng-attr-style="{{libChecked && 'margin-left: 360px;' || 'margin-left: 0px;' }}" style="background-color:#262a2e; width: 102%;">
                         <div id="codeCheck" collapse="!codeChecked">
                             <div ui-ace="{onChange: editorChanged}" ng-attr-style="{{codeChecked && !svgChecked && 'height: 100%;' || 'height: 50%;'}}" style="width: 100%; float: left;" id="fbp_editor"></div>
                         </div>
-                        <div  id="svgCheck" collapse="!svgChecked" style="overflow-y: scroll; height: 100%; background-color:#262a2e;">
+                        <div  id="svgCheck" collapse="!svgChecked" style="overflow-y: scroll; height: 100%; background-color:#202429;">
                             <div id="svgFrame" style="width:100%;" ng-attr-style="{{svgChecked && !codeChecked && 'height: 100%; width:100%;' || 'height: 50%; width:100%;'}}"></div>
                         </div>
+                        <div class="status-bar" ng-attr-style="{{libChecked && 'margin-left: -10px;' || 'margin-left: 15px;' }}"><span>{{ServiceStatus}}</span></div>
                     </div>
                 </div>
             </div> <!--close tabcontents !-->
@@ -338,8 +340,8 @@
             <!-- -------------------------------------------------------------- !-->
             <!-- CHEAT SHEET !-->
             <!-- -------------------------------------------------------------- !-->
-            <div ng-controller="cheatSheetController" id="sc" class="cheat_sheet" style="height:93vh;" >
-                <iframe style="width:100%; height:100%;" ng-src="{{cheatSheetUrl}}"></iframe>
+            <div ng-controller="cheatSheetController" id="sc" class="cheat_sheet" style="height:90%;" >
+                <iframe style="width:100%; height:90%;" ng-src="{{cheatSheetUrl}}"></iframe>
             </div>
         </div><!--close tabs!-->
     </body>