online editor: shortcuts in a separated frame and style review

applications/admin/static/css/web2py-codemirror.css

@@ -54,3 +54,13 @@
     overflow: inherit;
     border-top: 1px solid #ddd;
 }
+
+#editor_main {
+    margin-top:40px;
+    margin-bottom:40px;
+}
+
+#editform {
+    margin-bottom: 0px;
+}
+

applications/admin/views/default/edit.html

@@ -1,3 +1,4 @@
+{{main_id='editor_main'}}
 {{extend 'layout.html'}}
 {{
 dirs=[{'name':'models', 'reg':'.*\.py$'},
@@ -30,7 +31,7 @@ def file_create_form(location, anchor=None, helptext=""):
 <!-- begin "edit" block -->
 {{
   def shortcut(combo, description):
-    return XML('<li><span class="teletype-text">%s</span><span>%s</span></li>' % (combo, description))
+    return XML('<li class="span5"><span class="teletype-text">%s</span><span>%s</span></li>' % (combo, description))
   def listfiles(app, dir, regexp='.*\.py$'):
       files = sorted(
          listdir(apath('%(app)s/%(dir)s/' % {'app':app, 'dir':dir}, r=request), regexp))
@@ -264,15 +265,17 @@ $(document).on('click', 'a.font_button', function (e) {
     <div id="window_todo" class="tab-pane container-fluid">
         {{=LOAD('default', 'todolist.load', vars={'app':app}, ajax=True, timeout=60000, times="infinity")}}
     </div>
+    <div id="window_shortcuts" class="tab-pane container-fluid">
+        {{include 'default/editor_shortcuts.html'}}
+    </div>
     </section>
 </div>
 {{block footer}}
 <div id="" class="navbar navbar-inverse navbar-fixed-bottom">
 <div class="navbar-inner">
 <ul id="windows_hooks" class="nav">
-  <li class="">
-    <a href="#window_todo">TODO</a>
-  </li>
+    <li class=""><a href="#window_todo">TODO</a></li>
+    <li class=""><a href="#window_shortcuts">Shortcuts</a></li>
 </ul>
 </div>
 </div>

applications/admin/views/default/edit_js.html

@@ -21,21 +21,23 @@
 {{if view_link:}}
     {{=button(view_link, T('try view'))}}
 {{pass}}
-<p class="formfield">
-{{if functions:}}
-    <span style="text-align:left;" class="exposed">
-    {{=B(T('exposes:'))}} {{=XML(', '.join([A(f,_target="_blank", _href=URL(a=app,c=controller,f=f)).xml() for f in functions]))}}
-    </span>
-{{if editviewlinks:}}<br/>
-    {{=B(T('edit views:'))}}
-    {{=XML(', '.join([v.xml() for v in editviewlinks]))}}
+{{if functions or edit_controller:}}
+    <p class="formfield">
+    {{if functions:}}
+        <span style="text-align:left;" class="exposed">
+        {{=B(T('exposes:'))}} {{=XML(', '.join([A(f,_target="_blank", _href=URL(a=app,c=controller,f=f)).xml() for f in functions]))}}
+        </span>
+        {{if editviewlinks:}}<br/>
+            {{=B(T('edit views:'))}}
+            {{=XML(', '.join([v.xml() for v in editviewlinks]))}}
+        {{pass}}
+    {{pass}}
+    {{if edit_controller:}}
+        {{=B(T('edit controller:'))}}
+        {{=A(request.args[2]+'.py', _class="editor_filelink", _target="_blank", _href=edit_controller)}}
+    {{pass}}
+    </p>
 {{pass}}
-{{pass}}
-{{if edit_controller:}}
-    {{=B(T('edit controller:'))}}
-    {{=A(request.args[2]+'.py', _class="editor_filelink", _target="_blank", _href=edit_controller)}}
-{{pass}}
-</p>
 </div>
 
     <textarea style=" height:100%; direction:ltr;" id="textarea_{{=id}}" class="input-block-level" name="data" >{{=data}}</textarea>
@@ -152,29 +154,3 @@
     </div>
     <br/>
   </form>
-
-<div class="row-fluid">
-    <div class="help alert alert-block alert-info">
-    {{if filetype=='html':}}
-        <h3>{{=T('Key bindings for ZenCoding Plugin')}}</h3>
-    {{else:}}
-        <h3>{{=T("Key bindings")}}</h3>
-    {{pass}}
-        <ul class="keybindings unstyled">
-            {{=shortcut('Ctrl+S', T('Save via Ajax'))}}
-            {{=shortcut('Ctrl+F11', T('Toggle Fullscreen'))}}
-			{{=shortcut('Shift+Esc', T('Exit Fullscreen'))}}
-            {{=shortcut('Ctrl-F / Cmd-F', T('Start searching'))}}
-            {{=shortcut('Ctrl-G / Cmd-G', T('Find Next'))}}
-            {{=shortcut('Shift-Ctrl-G / Shift-Cmd-G', T('Find Previous'))}}
-            {{=shortcut('Shift-Ctrl-F / Cmd-Option-F', T('Replace'))}}
-            {{=shortcut('Shift-Ctrl-R / Shift-Cmd-Option-F', T('Replace All'))}}
-            {{=shortcut('Ctrl-/ ', T('Toggle comment'))}}
-        {{if filetype=='html':}}
-            {{=shortcut('Tab', T('Expand Abbreviation'))}}
-        {{elif filetype=='python':}}
-            {{=shortcut('Ctrl-Space', T('Autocomplete Python Code'))}}
-        {{pass}}
-        </ul>
-    </div>
-</div>

applications/admin/views/default/editor_shortcuts.html

@@ -0,0 +1,18 @@
+<div>
+    <h4>{{=T("Keyboard shortcuts")}}</h4>
+        <ul class="keybindings unstyled">
+        <li></li>
+            {{=shortcut('Ctrl+S', T('Save via Ajax'))}}
+            {{=shortcut('Ctrl+F11', T('Toggle Fullscreen'))}}
+			{{=shortcut('Shift+Esc', T('Exit Fullscreen'))}}
+            {{=shortcut('Ctrl-F / Cmd-F', T('Start searching'))}}
+            {{=shortcut('Ctrl-G / Cmd-G', T('Find Next'))}}
+            {{=shortcut('Shift-Ctrl-G / Shift-Cmd-G', T('Find Previous'))}}
+            {{=shortcut('Shift-Ctrl-F / Cmd-Option-F', T('Replace'))}}
+            {{=shortcut('Shift-Ctrl-R / Shift-Cmd-Option-F', T('Replace All'))}}
+            {{=shortcut('Ctrl-/ ', T('Toggle comment'))}}
+            {{=shortcut('Tab', T('Expand Abbreviation (html files only)'))}}
+            {{=shortcut('Ctrl-Space', T('Autocomplete Python Code'))}}
+        </ul>
+    </div>
+</div>

applications/admin/views/layout.html

@@ -44,7 +44,7 @@
 
         <!-- MAIN
         =========== -->
-            <div id="main" class="container-fluid">
+            <div id="{{=globals().get('main_id', 'main')}}" class="container-fluid">
                 <div id="main_inner" class="row-fluid">
                     <div class="span12">
                         <div class="flash alert">{{=response.flash or ''}}</div>