Merge pull request #140 from carpaIdea/master

files toggle in admin, maybe as Massimo would want it

applications/admin/static/css/bootstrap_essentials.css

@@ -327,6 +327,89 @@ font-style: italic;
 color: #ccc;
 }
 
+/*=============================================================
+EDIT PAGE SLIDING FILES MENU
+==============================================================*/
+@media (max-width: 979px) {
+    body.edit div#header {position:relative; z-index: 1030 !important;}
+}
+
+#editor_area, #edit_placeholder {
+    margin: 0;
+    padding: 0;
+}
+
+#editor_area {
+    position: relative;
+    box-sizing: border-box;
+}
+
+#files {
+    width: auto;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 1029;
+    border-right: 3px solid #000;
+    /* animation (it doesn't work in IE<10) */
+    -moz-transition: all 0.4s;
+    -webkit-transition: all 0.4s;
+    -o-transition: all 0.4s;
+    transition: all 0.4s;
+}
+
+#files:hover, #files:focus {
+    left: 0px !important;
+}
+
+#files, .files-toggle {
+    background: #1b1b1b;
+    opacity: 0.98;
+}
+
+.files-toggle {
+    width: 18px;
+    height: 86px;
+    border-radius: 0px 4px 4px 0px;
+    color: #999;
+    position: absolute;
+    top: 60px;
+    right: -18px;
+    cursor: default;
+}
+
+.arrow {
+    display: block;
+    position: absolute;
+    top: 8px;
+    width: 18px;
+    height: 70px;
+    background: url(../images/files_toggle.png) no-repeat;
+}
+
+.files-menu {
+    height: 100%;
+    overflow: auto;
+}
+
+#filelist {
+    position: relative;
+    top: 60px;
+    padding-bottom: 60px;
+}
+
+#filelist li {
+    padding-right: 8px;
+    width: 100%;
+}
+
+#filelist li>a {
+    text-shadow: none;
+}
+
 /*=============================================================
  MEDIA QUERIES
 ==============================================================*/

applications/admin/views/default/edit.html

@@ -163,9 +163,6 @@ jQuery(document).on('click', 'a.font_button', function (e) {
 
 <div class='row-fluid'>
 <div class="right controls btn-toolbar pull-right">
-<div class="btn-group">
-  <a class="button btn" onclick="jQuery('#files').toggle(); return false" href="#">Files toggle</a>
-</div>
 <div class="dropdown btn-group pull-left">
     <a class="dropdown-toggle button btn" data-target="themes" data-toggle="dropdown" href="#" >Theme: <span id="themeName" style="color: #E8953C">Web2py</span> <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu" id="themes">
@@ -190,7 +187,9 @@ jQuery(document).on('click', 'a.font_button', function (e) {
 </div>
 <div id="editor_area" class="row-fluid">
     <div id="files">
-    <ul class="nav nav-list span2 well" rel="pagebookmark" id="filelist">
+        <div class="files-toggle"><span class="arrow"></span></div>
+        <div class="files-menu">
+            <ul class="nav nav-list" rel="pagebookmark" id="filelist">
             <li><input type="text" placeholder="{{=T('Rapid Search')}}" class="input-block-level typeahead-tw search-query"></li>
             {{dirs=[{'name':'models', 'reg':'.*\.py$'},
                 {'name':'controllers', 'reg':'.*\.py$'},
@@ -216,13 +215,22 @@ jQuery(document).on('click', 'a.font_button', function (e) {
             {{pass}}
             </ul>
         </div>
-    <div class="span10" id="edit_placeholder">
+    </div>
+    <div class="span12" id="edit_placeholder">
         <ul class="nav nav-tabs " id="filesTab">
         </ul>
         <div id="myTabContent" class="tab-content">
         </div>
     </div>
 </div>
+<script>
+jQuery(document).ready(function() {
+    var filesMenu = jQuery('#files');
+    var ow = filesMenu.outerWidth();
+    filesMenu.width(ow);
+    setTimeout( function(){jQuery('#files').css('left', '-'+ow+'px');}, 1000);
+});
+</script>
 <!-- Typeahead scripts here so the page load faster -->
 <script src="{{=URL('static/js', 'typeahead.min.js')}}"></script>
 <script src="{{=URL('static/js', 'hogan-2.0.0.js')}}"></script>