Full window mode can show also tabs, menus and filetree

slapos/runner/static/css/styles.css

@@ -589,7 +589,6 @@ label.header {
     font-weight: normal;
 }
 select {
-  -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@@ -793,7 +792,8 @@ padding:10px; font-size:14px; color:#03406A}
     color: #333;
 }
 
-.fullScreen .fullScreen-editor{
+.fullScreen{
+  background: #fff;
   height: auto!important;
   width: auto!important;
   border: 0;
@@ -803,7 +803,26 @@ padding:10px; font-size:14px; color:#03406A}
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 10000;
+  z-index: 140;
+}
+.fullScreen-editor{
+  height: auto!important;
+  width: auto!important;
+  position: fixed !important;
+  top: 35px;
+  bottom: 0;
+  left: 244px;
+  right: 0;
+}
+
+.fullScreen-tree{
+  height: auto!important;
+  width: 238px;
+  position: fixed !important;
+  top: 37px;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .fullScreen {

slapos/runner/static/js/scripts/softwareFolder.js

@@ -181,13 +181,6 @@ $(document).ready(function () {
 
     //Add new tabItem
     function addTab (path, selected) {
-      var numberTab = $("#tabControl div.item").length;
-      if ( numberTab >= getMaxTab() ) {
-        $("#error").Popup("Sorry! We cannot add more item, please close unused tab",
-            {type: 'info', duration: 5000});
-        return "";
-      }
-      var title = path.replace(/^.*(\\|\/|\:)/, '');
       var hash =  path.hashCode() + '';
       if (editorlist.hasOwnProperty(hash)) {
         //this file already exist in editor. Select file and exit!
@@ -200,6 +193,13 @@ $(document).ready(function () {
         });
         return "";
       }
+      var title = path.replace(/^.*(\\|\/|\:)/, '');
+      var numberTab = $("#tabControl div.item").length;
+      if ( numberTab >= getMaxTab() ) {
+        $("#error").Popup("Sorry! We cannot add more item, please close unused tab",
+            {type: 'info', duration: 5000});
+        return "";
+      }
       var width = resizeTabItems(true);
       var tab  = '<div class="item" rel="' + hash
                 + '"><span style="width: '+ width +'px" '
@@ -858,19 +858,25 @@ $(document).ready(function () {
     });
 
     $("#expand").click( function () {
-      if ( !$("#expand span").hasClass('e_expanded') ) {
+      var leftWith = $('#fileTree').width() + 6;
+      if ( $("#details_box").css("display") !== 'none' ) {
         $("#details_box").hide();
         $("#code").css("width", "100%");
-        $("#expand span").addClass('e_expanded');
+        if ( $("body").hasClass("fullScreen") ) {
+          $(".main_content").css('left', '0');
+        }
       }
       else {
-        $("#expand span").removeClass('e_expanded');
+        if ( $("body").hasClass("fullScreen") ) {
+          $(".main_content").css('left', leftWith + 'px');
+        }
         $("#details_box").show();
         $("#code").css("width", editorWidth);
       }
       if ($("#tabControl div.item").length !== 0) {
         getCurrentEditor().resize();
       }
+      $("#option").click();
       return false;
     });
 
@@ -943,13 +949,23 @@ $(document).ready(function () {
     });
 
     $("#fullscreen").click(function(){
+      var hash = getActiveToken();
+      $("#fullscreen span").toggleClass("e_expanded");
+      $("body").toggleClass("fullScreen");
+      $("#software_folder").toggleClass("fullScreen");
+      $(".main_content").toggleClass("fullScreen-editor");
+      $('#fileTree').toggleClass("fullScreen-tree");
+      $('#fileTreeFull').toggleClass("fullScreen-tree");
+      $(".main_content").css('left', '');
+      if ( $("#details_box").css("display") === 'none' ) {
+        $(".main_content").css('left', '0');
+      }
       if ($("#tabControl div.item").length === 0) {
         return false;
       }
-      var hash = getActiveToken();
-      $("body").toggleClass("fullScreen");
-      $("#tabContent pre.active[rel='"+ hash + "']").toggleClass("fullScreen-editor");
+      resizeTabItems ();
       editorlist[hash].editor.resize();
+      return false;
     });
 
 });

slapos/runner/templates/softwareFolder.html

@@ -45,10 +45,10 @@
   <div class='box_header'>
     <ul>
       <li id="switch"><span class="swith_btn" title="Switch between differents file source">This project</span></li>
-      <li id="save"><span class="save_btn" title="Save current file. Hint: Use Ctrl+S">&nbsp;</span></li>
-      <li id="expand"><span class="expand_editor" title="Expand or reduce Editor. hint: Ctrl+E for full window">&nbsp;</span></li>
       <li id="filelist"><span class="flist_btn" title="Favourites files list" rel='tooltip'>&nbsp;</span></li>
-      <li id="option"><span class="fmenu_btn" title='Show more option' rel='tooltip'>Menu</span></li>
+      <li id="fullscreen"><span class="expand_editor" title="Show Editor in Full window. Hint: Use Ctrl+E">&nbsp;</span></li>
+      <li id="save"><span class="save_btn" title="Save current file. Hint: Use Ctrl+S">&nbsp;</span></li>
+      <li id="option"><span class="fmenu_btn" title='Show more options' rel='tooltip'>Menu</span></li>
     </ul>
     <div id="tabControl"></div>
     <div class="clear"></div>
@@ -76,8 +76,8 @@
   <ul class="inline">
     <li><a id='getmd5' href="#">Get or Update md5sum</a></li>
     <li><a id='addflist' href="#">Add to favourites</a></li>
-    <li><a id='fullscreen' title="Show Editor in Full window. Hint: Use Ctrl+E" href="#">
-      Full window &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Ctrl+E]</a>
+    <li><a id='expand' title="Show or Hide file tree view area." href="#">
+      Show or Hide FileTree</a>
     </li>
     <li><a id='find' href="#">Find in file &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Ctrl+F]</a></li>
     <li><a id='replace' href="#">Replace in file &nbsp;&nbsp;[Ctrl+H]</a></li>