Changes the look and feel of the formcode field to be more like other…

… fields

HISTORY.rst

@@ -1,6 +1,12 @@
 Changelog
 ---------
 
+- Changes the look and feel of the formcode field to be more like other fields.
+  [href]
+
+- Various accessibility improvements.
+  [href]
+
 - Fixes the upload widget in forms having an unintended design.
   [href]
 

onegov/town/assets/js/code_editor.js

@@ -1,12 +1,9 @@
-$(function () {
-    $('textarea[data-editor]').each(function () {
+$(function() {
+    $('textarea[data-editor]').each(function() {
         var textarea = $(this);
 
         var mode = textarea.data('editor');
         var readonly = textarea.is('[readonly]');
-
-        var height = textarea.height();
-        var width = textarea.width();
         textarea.css('display', 'none');
 
         var outside = $('<div class="code-editor-wrapper">');
@@ -18,23 +15,37 @@ $(function () {
         outside.insertBefore(textarea);
 
         var editor = ace.edit(inside[0]);
+        editor.setOptions({
+            minLines: 10,
+            maxLines: 50
+        });
         editor.setHighlightActiveLine(false);
         editor.setDisplayIndentGuides(true);
         editor.setFontSize('12px');
-        editor.renderer.setPadding(0);
+        editor.renderer.setPadding(10);
         editor.renderer.setShowGutter(false);
+        editor.renderer.setScrollMargin(10, 10, 10, 10);
         editor.getSession().setValue(textarea.val());
         editor.getSession().setMode("ace/mode/" + mode);
         editor.setTheme("ace/theme/tomorrow");
 
+        editor.on("focus", function() {
+            inside.toggleClass('focused', true);
+            outside.toggleClass('focused', true);
+        });
+        editor.on("blur", function() {
+            inside.toggleClass('focused', false);
+            outside.toggleClass('focused', false);
+        });
+
         var highlighted_line = null;
 
         if (textarea.data('highlight-line')) {
             var Range = ace.require('ace/range').Range;
             var line = textarea.data('highlight-line');
 
             highlighted_line = editor.getSession().addMarker(
-                new Range(line-1, 0, line-1, 100000), "ace-syntax-error", "fullLine", false
+                new Range(line - 1, 0, line - 1, 100000), "ace-syntax-error", "fullLine", false
             );
         }
 
@@ -43,7 +54,7 @@ $(function () {
             inside.addClass('read-only');
             editor.setReadOnly(true);
             editor.setDisplayIndentGuides(false);
-            editor.renderer.$cursorLayer.element.style.opacity=0;
+            editor.renderer.$cursorLayer.element.style.opacity = 0;
             editor.getSession().setMode("ace/mode/text");
         }
 

onegov/town/theme/styles/town.scss

@@ -312,28 +312,30 @@ form {
         work right with custom styling (it'll look like it's working, but
         all the cursor measurements are off and the editing is werid).
     */
-    $code-editor-height: 600px;
 
     .code-editor-wrapper {
         @include form-element;
-        height: $code-editor-height;
+        height: auto;
         margin-bottom: 1em;
+        padding: 0;
+
+        // focused is a class because the wrapper doesn't get ':focus'
+        &.focused {
+            border-color: $input-focus-border-color;
+        }
     }
 
     .error .code-editor-wrapper {
         margin-bottom: 0;
+        padding: 0;
     }
 
-    .read-only {
-        background-color: $input-disabled-bg;
-        color: $steel;
-        cursor: $input-disabled-cursor;
-    }
-
-    .code-editor,
-    .ace_scroller,
-    .ace_content {
-        height: $code-editor-height - 15px;
+    .code-editor {
+        &.read-only {
+            background-color: $input-disabled-bg;
+            color: $steel;
+            cursor: $input-disabled-cursor;    
+        }
     }
 
     .ace_content {