From 5bcec351ef865ca000fabcc329bfde1842adfa9c Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Wed, 9 May 2018 19:06:14 +0200
Subject: [PATCH] Improves admin content translatable ui

---
 app/assets/javascripts/globalize.js.coffee    |  8 ++--
 app/helpers/globalize_helper.rb               |  2 +-
 .../_form.html.erb                            |  4 +-
 .../_globalize_locales.html.erb               | 40 +++++++++++--------
 spec/features/translations_spec.rb            |  8 ++--
 5 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/globalize.js.coffee b/app/assets/javascripts/globalize.js.coffee
index e53383ceb..0de799318 100644
--- a/app/assets/javascripts/globalize.js.coffee
+++ b/app/assets/javascripts/globalize.js.coffee
@@ -14,12 +14,12 @@ App.Globalize =
         $(this).show()
       else
         $(this).hide()
-      $('.delete-language').hide()
+      $('.js-delete-language').hide()
       $('#delete-' + locale).show()
 
   highlight_locale: (element) ->
-    $('.js-globalize-locale-link').removeClass('highlight');
-    element.addClass('highlight');
+    $('.js-globalize-locale-link').removeClass('is-active');
+    element.addClass('is-active');
 
   remove_language: (locale) ->
     $(".js-globalize-attribute[data-locale=" + locale + "]").val('').hide()
@@ -39,7 +39,7 @@ App.Globalize =
       App.Globalize.display_translations(locale)
       App.Globalize.highlight_locale($(this))
 
-    $('.delete-language').on 'click', ->
+    $('.js-delete-language').on 'click', ->
       locale = $(this).data("locale")
       $(this).hide()
       App.Globalize.remove_language(locale)
diff --git a/app/helpers/globalize_helper.rb b/app/helpers/globalize_helper.rb
index 97dfeab66..b64c1ff09 100644
--- a/app/helpers/globalize_helper.rb
+++ b/app/helpers/globalize_helper.rb
@@ -19,7 +19,7 @@ module GlobalizeHelper
   end
 
   def highlight_current?(locale)
-    same_locale?(I18n.locale, locale) ? 'highlight' : ''
+    same_locale?(I18n.locale, locale) ? 'is-active' : ''
   end
 
   def show_delete?(locale)
diff --git a/app/views/admin/budget_investment_milestones/_form.html.erb b/app/views/admin/budget_investment_milestones/_form.html.erb
index d63942cc9..6643c7317 100644
--- a/app/views/admin/budget_investment_milestones/_form.html.erb
+++ b/app/views/admin/budget_investment_milestones/_form.html.erb
@@ -1,6 +1,4 @@
-<div>
-  <%= render "globalize_locales" %>
-</div>
+<%= render "globalize_locales" %>
 
 <%= form_for [:admin, @investment.budget, @investment, @milestone] do |f| %>
 
diff --git a/app/views/admin/budget_investment_milestones/_globalize_locales.html.erb b/app/views/admin/budget_investment_milestones/_globalize_locales.html.erb
index 11bf985dc..b4b789ad2 100644
--- a/app/views/admin/budget_investment_milestones/_globalize_locales.html.erb
+++ b/app/views/admin/budget_investment_milestones/_globalize_locales.html.erb
@@ -1,19 +1,27 @@
 <% I18n.available_locales.each do |locale| %>
-  <span>
-    <%= link_to name_for_locale(locale), "#",
-                style: css_to_display_translation?(@milestone, locale),
-                class: "js-globalize-locale-link #{highlight_current?(locale)}",
-                data: { locale: neutral_locale(locale) },
-                remote: true %>
-    <%= link_to t("admin.milestones.form.remove_language"), "#",
-                id: "delete-#{neutral_locale(locale)}",
-                style: show_delete?(locale),
-                class: 'float-right delete-language',
-                data: { locale: neutral_locale(locale) } %>
-  </span>
+  <%= link_to t("admin.milestones.form.remove_language"), "#",
+              id: "delete-#{neutral_locale(locale)}",
+              style: show_delete?(locale),
+              class: 'float-right delete js-delete-language',
+              data: { locale: neutral_locale(locale) } %>
+
 <% end %>
 
-<%= select_tag :translation_locale,
-               options_for_locale_select,
-               prompt: t("admin.milestones.form.add_language"),
-               class: "js-globalize-locale" %>
+<ul class="tabs" data-tabs id="globalize_locale">
+  <% I18n.available_locales.each do |locale| %>
+    <li class="tabs-title">
+      <%= link_to name_for_locale(locale), "#",
+                  style: css_to_display_translation?(@milestone, locale),
+                  class: "js-globalize-locale-link #{highlight_current?(locale)}",
+                  data: { locale: neutral_locale(locale) },
+                  remote: true %>
+    </li>
+  <% end %>
+</ul>
+
+<div class="small-12 medium-6">
+  <%= select_tag :translation_locale,
+                 options_for_locale_select,
+                 prompt: t("admin.milestones.form.add_language"),
+                 class: "js-globalize-locale" %>
+</div>
diff --git a/spec/features/translations_spec.rb b/spec/features/translations_spec.rb
index 55dcec4d1..4ff482ee4 100644
--- a/spec/features/translations_spec.rb
+++ b/spec/features/translations_spec.rb
@@ -76,21 +76,21 @@ feature "Translations" do
       scenario "Highlight current locale", :js do
         visit @edit_milestone_url
 
-        expect(find("span .js-globalize-locale-link.highlight")).to have_content "English"
+        expect(find("a.js-globalize-locale-link.is-active")).to have_content "English"
 
         select('Español', from: 'locale-switcher')
 
-        expect(find("span .js-globalize-locale-link.highlight")).to have_content "Español"
+        expect(find("a.js-globalize-locale-link.is-active")).to have_content "Español"
       end
 
       scenario "Highlight selected locale", :js do
         visit @edit_milestone_url
 
-        expect(find("span .js-globalize-locale-link.highlight")).to have_content "English"
+        expect(find("a.js-globalize-locale-link.is-active")).to have_content "English"
 
         click_link "Español"
 
-        expect(find("span .js-globalize-locale-link.highlight")).to have_content "Español"
+        expect(find("a.js-globalize-locale-link.is-active")).to have_content "Español"
       end
 
       scenario "Show selected locale form", :js do