Refactored skin editor

code/Skin/$Skin.skin

@@ -14,7 +14,8 @@
 
 <% #edit %>
 <form class='uk-form' method="post" action="<% response.action %>">
-   <h1 class='uk-margin-right' style='float: left;'><% response.title %></h1>
+   <div class='uk-margin-top uk-margin-left'>
+      <h1 class='uk-margin-large-right' style='float: left;'><% response.title %></h1>
       <span style='line-height: 42px;'>
          <% if <% skin.name %> is '' then
             <% skin.select prototype suffix=<% skin.input name class='uk-width-1-4' %> %>
@@ -29,6 +30,7 @@
          </button>
          <a href="" class='cancel uk-button uk-button-link'><% gettext Cancel %></a>
       </span>
+   </div>
    <div style='clear: both;'>
       <% response.message prefix="<div class='uk-alert' data-uk-alert>" suffix=</div> %>
       <% skin.textarea source %>
@@ -45,25 +47,29 @@ $(function() {
       mode = 'application/x-helma-skin';
    }
    var editor = CodeMirror.fromTextArea($('#source').get(0), {
+      autofocus: true,
+      enterMode: 'keep',
+      indentUnit: 3,
+      indentWithTabs: false,
       lineNumbers: true,
       matchBrackets: true,
       mode: mode,
-      indentUnit: 2,
+      tabMode: 'shift',
-      indentWithTabs: false,
+      viewportMargin: Infinity
-      enterMode: 'keep',
-      tabMode: 'shift'
    });
 });
 </script>
 
 <% #compare %>
 <form>
+   <div class='uk-margin-top uk-margin-left'>
       <h1 class='uk-margin-large-right' style='float: left;'><% response.title %></h1>
       <span style='line-height: 42px;'>
          <% skin.link edit <% gettext Edit %> class='uk-button uk-button-primary' style='color: #fff;' %>
          <% skin.link reset <% gettext Reset %> class='uk-button' %>
          <a href='' class='cancel uk-button uk-button-link'><% gettext Cancel %></a>
       </span>
+   </div>
    <div style='clear: both;'>
       <% response.message prefix="<div class='uk-alert' data-uk-alert>" suffix=</div> %>
       <table class="diff">

code/Skin/Skin.js

@@ -114,8 +114,10 @@ Skin.prototype.getPermission = function(action) {
   switch (action) {
     case '.':
     case 'main':
-    case 'edit':
     return true;
+
+    case 'edit':
+    return res.handlers.layout.getPermission('main');
   }
   return this.isPersistent() && res.handlers.skins.getPermission('main');
 }

code/Skins/$Skins.skin

@@ -5,22 +5,19 @@
       <meta charset='utf-8'>
       <title><% response.title %></title>
       <link rel="stylesheet" type="text/css" title="CSS Stylesheet" href="<% site.href main.css %>" />
-      <link rel='stylesheet' href='<% root.static codemirror.css %>'>
+      <link rel='stylesheet' type='text/css' href='<% root.static ../../styles/main.min.css %>'>
-      <link rel='stylesheet' type='text/css' href='<% root.static uikit-2.11.0/css/uikit.almost-flat.css %>'>
 
       <style type="text/css">
          body {
-            margin: 10px;
+            margin: 0;
             padding: 0;
          }
          .cm-helma-macro {
             color: #000;
          }
-         .CodeMirror-scroll {
+         .CodeMirror {
             height: auto;
-            min-height: 500px;
+            border-top: 1px solid #eee;
-            background: #fff;
-            border: 1px solid #eee;
          }
          /* classes for skin diff */
          .diff {
@@ -51,23 +48,10 @@
          }
       </style>
 
-      <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.min.js'></script>
       <script type='text/javascript' src='<% site.href main.js %>'></script>
-      <script type='text/javascript' src='<% root.static uikit-2.11.0/js/uikit.js %>'></script>
-
-      <script type='text/javascript' src='<% root.static codemirror-custom.min.js %>'></script>
-      <!-- Individual includes for testing purposes
-      <link rel='stylesheet' href='<% root.static codemirror2/mode/helma/skin.css %>'>
-      <script type='text/javascript' src='<% root.static codemirror2/lib/codemirror.js %>'></script>
-      <script type='text/javascript' src='<% root.static codemirror2/mode/javascript/javascript.js %>'></script>
-      <script type='text/javascript' src='<% root.static codemirror2/mode/css/css.js %>'></script>
-      <script type='text/javascript' src='<% root.static codemirror2/mode/xml/xml.js %>'></script>
-      <script type='text/javascript' src='<% root.static codemirror2/mode/htmlmixed/htmlmixed.js %>'></script>
-      <script type='text/javascript' src='<% root.static codemirror2/mode/helma/skin.js %>'></script>
-      -->
    </head>
    <body>
-      <span style='float: right;'><% image /smallchaos.gif | link <% layout.skins.href %> %></span>
+      <span style='float: right; margin: 10px;'><% image /smallchaos.gif | link <% layout.skins.href %> %></span>
       <% response.body %>
    </body>
 </html>