Improve translation creation form by using codemirror

Gemfile

@@ -41,6 +41,7 @@ gem 'mathjax-rails'
 gem 'devise', '~> 3.4.1'
 gem 'devise-bootstrap-views'
 
+gem 'codemirror-rails'
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 

Gemfile.lock

@@ -48,6 +48,8 @@ GEM
     bootstrap-sass (3.3.1.0)
       sass (~> 3.2)
     builder (3.2.2)
+    codemirror-rails (4.8)
+      railties (>= 3.0, < 5)
     coffee-rails (4.1.0)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0, < 5.0)
@@ -190,6 +192,7 @@ DEPENDENCIES
   autoprefixer-rails
   bh (~> 1.2)
   bootstrap-sass (~> 3.3.1)
+  codemirror-rails
   coffee-rails (~> 4.1.0)
   coveralls (~> 0.7.2)
   devise (~> 3.4.1)

app/assets/javascripts/application.js

@@ -14,4 +14,11 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require bootstrap-sprockets
+//= require codemirror
+//= require codemirror/addons/display/placeholder
+//= require codemirror/modes/xml
+//= require codemirror/modes/css
+//= require codemirror/modes/javascript
+//= require codemirror/modes/htmlmixed
+//= require translations
 //= require_tree .

app/assets/javascripts/translations.js.coffee

@@ -1,3 +1,20 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
+
+cm = null
+
+loadCodeMirror = ->
+  $('#translationNav li:first').addClass('active')
+  $("textarea").each ->
+    cm = CodeMirror.fromTextArea($(this).get(0), {
+      lineNumbers: false,
+      lineWrapping: true,
+      mode: "text/html"
+    })
+
+$(document).ready loadCodeMirror
+$(document).on "page:load", loadCodeMirror
+
+$(document).on "click", '#translationNav a[href="#preview"]', ->
+  $('#preview .problem-content').html(cm.getValue())

app/assets/stylesheets/application.css.scss

@@ -12,6 +12,7 @@
  *
  *= require_tree .
  *= require devise_bootstrap_views
+ *= require codemirror
  *= require_self
  */
 

app/assets/stylesheets/translations.css.scss

@@ -1,3 +1,35 @@
 // Place all the styles related to the Translations controller here.
 // They will automatically be included in application.css.scss.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.CodeMirror {
+  /* Bootstrap Settings */
+  box-sizing: border-box;
+  margin: 0;
+  font: inherit;
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background: #fff none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  /* Code Mirror Settings */
+  font-family: monospace;
+  position: relative;
+  overflow: hidden;
+}
+
+.CodeMirror-focused {
+  /* Bootstrap Settings */
+  border-color: #66afe9;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.CodeMirror-empty pre.CodeMirror-placeholder { color: #999; }

app/views/translations/_form.html.erb

@@ -1,5 +1,17 @@
 <%= form_for [@problem, @translation], layout: :basic do |f| %>
-    <%= f.text_field :title %>
+  <%= f.text_field :title %>
-    <%= f.text_area :content %>
+  <%= nav id: 'translationNav' do %>
-    <%= f.submit %>
+    <%= link_to t('.source_code'), '#source', data: {toggle: 'tab'} %>
+    <%= link_to t('.preview'), '#preview', data: {toggle: 'tab'} %>
+  <% end %>
+  <div class="tab-content">
+    <div class="tab-pane active" id="source">
+      <%= f.text_area :content, placeholder: t('.translation_source_explanation') %>
+    </div>
+    <%= panel class: 'tab-pane', id: 'preview' do %>
+      <div class="panel-body problem-content">
+      </div>
+    <% end %>
+  </div>
+  <%= f.submit %>
 <% end %>

app/views/translations/new.html.erb

@@ -1,5 +1,3 @@
 <h1><%= t '.new_translation', id: @problem.id %></h1>
 
 <%= render 'form' %>
-
-<%= link_to t('.back'), :back, class: 'btn btn-default' %>

config/locales/views/translations/de.yml

@@ -2,6 +2,10 @@
 
 de:
   translations:
+    form:
+      preview: Vorschau
+      source_code: Quelltext
+      translation_source_explanation: Hier kommt der HTML-Quelltext der Übersetzung hin.
     new:
       back: Zurück
       new_translation: Neue Übersetzung für Problem %{id}