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

@@ -121,7 +121,7 @@ jQuery(document).on('click', 'a.font_button', function (e) {
         case 'decr': new_incr = -2; break;
         case 'default': new_incr = 0; break;
     }
-    jQuery('textarea[name="data"]') .each(function(id, ta) {
+    jQuery('textarea[name="data"]').each(function(id, ta) {
         editor = jQuery(ta).data('editor');
         set_font(editor, new_incr);
     });
@@ -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">
@@ -189,40 +186,51 @@ jQuery(document).on('click', 'a.font_button', function (e) {
 </div>
 </div>
 <div id="editor_area" class="row-fluid">
-  <div id="files">
-    <ul class="nav nav-list span2 well" 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$'},
-        {'name':'views', 'reg':'[\w/\-]+(\.\w+)+$'},
-        {'name':'modules', 'reg':'.*\.py$'},
-        {'name':'private', 'reg': '[^\.#].*'}]}}
-    {{auto_complete_list=[]}}
-    {{for dir in dirs:}}
-    <li class="nav-header component" onclick="collapse('{{="%s_files" % dir['name']}}');">{{=dir['name']}}</li>
-    <li id="{{="%s_files" % dir['name']}}">
-        <ul class="nav nav-list small-font">
-        {{for f in listfiles(app, dir['name'], regexp=dir['reg'] ):}}
-        {{id="%s__" % dir['name'] + f.replace('.','__')}}
-        {{current_file = request.args(len(request.args) - 1)}}
-        <li class="{{#='active' if current_file==f else ''}}" style="overflow:hidden">
-        {{a_tag=editfile(dir['name'], f, dict(id=id))}}
-        {{=a_tag}}
-        {{auto_complete_list.append({'value':f, 'tokens':f.split('/'), 'a_tag':a_tag})}}
-        </li>
-        {{pass}}
-        </ul>
-    </li>
-    {{pass}}
-    </ul>
+    <div id="files">
+        <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$'},
+                {'name':'views', 'reg':'[\w/\-]+(\.\w+)+$'},
+                {'name':'modules', 'reg':'.*\.py$'},
+                {'name':'private', 'reg': '[^\.#].*'}]}}
+            {{auto_complete_list=[]}}
+            {{for dir in dirs:}}
+            <li class="nav-header component" onclick="collapse('{{="%s_files" % dir['name']}}');">{{=dir['name']}}</li>
+            <li id="{{="%s_files" % dir['name']}}">
+                <ul class="nav nav-list small-font">
+                {{for f in listfiles(app, dir['name'], regexp=dir['reg'] ):}}
+                {{id="%s__" % dir['name'] + f.replace('.','__')}}
+                {{current_file = request.args(len(request.args) - 1)}}
+                <li class="{{#='active' if current_file==f else ''}}" style="overflow:hidden">
+                {{a_tag=editfile(dir['name'], f, dict(id=id))}}
+                {{=a_tag}}
+                {{auto_complete_list.append({'value':f, 'tokens':f.split('/'), 'a_tag':a_tag})}}
+                </li>
+                {{pass}}
+            </ul>
+            </li>
+            {{pass}}
+            </ul>
+        </div>
     </div>
-    <div class="span10" id="edit_placeholder">
+    <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>