Skip to content
This repository has been archived by the owner on Jun 27, 2019. It is now read-only.

Commit

Permalink
Change CSS and HTML to its new Layout
Browse files Browse the repository at this point in the history 
Signed-off-by: Bruno Bottazzini <bruno.bottazzini@intel.com>
  • Loading branch information
Bruno Bottazzini committed Apr 15, 2016
1 parent acaa521 commit 289eccf
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 38 deletions.
79 changes: 61 additions & 18 deletions client/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@
overflow-x: hidden;
background-color: #2d3237;
width: 350px;


}
.file-viewer {
overflow: auto;
Expand All @@ -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%;
Expand All @@ -41,6 +43,11 @@
background-color:#540E0d;
}

.body {
font-family: clearsans-light;
background-color: #2D3237;
}

thead, tbody {
display:block;
}
Expand All @@ -51,7 +58,6 @@ tbody {
overflow-x: hidden;
}
#top-menu{
position: fixed;
left:0px;
right:0px;
height: 40px;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -156,6 +165,7 @@ font-family: clearSans;
margin-top: 0px;
color:#8c9196;
margin-right: 0px;
background-color: #2D3237 !important;
}
.inputControls{
height: 40px;
Expand All @@ -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;
Expand All @@ -188,14 +217,27 @@ button {
margin-top: -40px;
margin-right: 15px;
}

.blueLabel{
color:#33b7e9;
text-transform: capitalize;
height: 30px;
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 {
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion client/js/combobox/jquery-ui-custom-combobox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
40 changes: 21 additions & 19 deletions server/views/index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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');
}
Expand All @@ -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>

Expand Down Expand Up @@ -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%;">
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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}}
Expand Down Expand Up @@ -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 !-->
Expand All @@ -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 !-->
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 289eccf

Please sign in to comment.