From 5c1709ba7e66871aa8ac3d387a3a8df51ee67b61 Mon Sep 17 00:00:00 2001 From: Philipp Fischbeck Date: Sun, 8 Feb 2015 17:30:06 +0100 Subject: [PATCH] Improve translation creation form by using codemirror --- Gemfile | 1 + Gemfile.lock | 3 ++ app/assets/javascripts/application.js | 7 ++++ app/assets/javascripts/translations.js.coffee | 17 ++++++++++ app/assets/stylesheets/application.css.scss | 1 + app/assets/stylesheets/translations.css.scss | 32 +++++++++++++++++++ app/views/translations/_form.html.erb | 18 +++++++++-- app/views/translations/new.html.erb | 2 -- config/locales/views/translations/de.yml | 4 +++ 9 files changed, 80 insertions(+), 5 deletions(-) diff --git a/Gemfile b/Gemfile index 2e4c575..b0c92a1 100644 --- a/Gemfile +++ b/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' diff --git a/Gemfile.lock b/Gemfile.lock index 538d4f0..b6b94f5 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 6ef234e..0c0aec8 100644 --- a/app/assets/javascripts/application.js +++ b/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 . diff --git a/app/assets/javascripts/translations.js.coffee b/app/assets/javascripts/translations.js.coffee index 24f83d1..387cc75 100644 --- a/app/assets/javascripts/translations.js.coffee +++ b/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()) \ No newline at end of file diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 184c979..eb4e8dc 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -12,6 +12,7 @@ * *= require_tree . *= require devise_bootstrap_views + *= require codemirror *= require_self */ diff --git a/app/assets/stylesheets/translations.css.scss b/app/assets/stylesheets/translations.css.scss index 5ede2fe..b3837d1 100644 --- a/app/assets/stylesheets/translations.css.scss +++ b/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; } \ No newline at end of file diff --git a/app/views/translations/_form.html.erb b/app/views/translations/_form.html.erb index ec5165d..1e9228b 100644 --- a/app/views/translations/_form.html.erb +++ b/app/views/translations/_form.html.erb @@ -1,5 +1,17 @@ <%= form_for [@problem, @translation], layout: :basic do |f| %> - <%= f.text_field :title %> - <%= f.text_area :content %> - <%= f.submit %> + <%= f.text_field :title %> + <%= nav id: 'translationNav' do %> + <%= link_to t('.source_code'), '#source', data: {toggle: 'tab'} %> + <%= link_to t('.preview'), '#preview', data: {toggle: 'tab'} %> + <% end %> +
+
+ <%= f.text_area :content, placeholder: t('.translation_source_explanation') %> +
+ <%= panel class: 'tab-pane', id: 'preview' do %> +
+
+ <% end %> +
+ <%= f.submit %> <% end %> diff --git a/app/views/translations/new.html.erb b/app/views/translations/new.html.erb index 0b93735..c5f0585 100644 --- a/app/views/translations/new.html.erb +++ b/app/views/translations/new.html.erb @@ -1,5 +1,3 @@

<%= t '.new_translation', id: @problem.id %>

<%= render 'form' %> - -<%= link_to t('.back'), :back, class: 'btn btn-default' %> diff --git a/config/locales/views/translations/de.yml b/config/locales/views/translations/de.yml index 4e10690..40befab 100644 --- a/config/locales/views/translations/de.yml +++ b/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}