Improves admin content translatable ui

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');
+    $('.js-globalize-locale-link').removeClass('is-active');
-    element.addClass('highlight');
+    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)

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)

app/views/admin/budget_investment_milestones/_form.html.erb

@@ -1,6 +1,4 @@
-<div>
 <%= render "globalize_locales" %>
-</div>
 
 <%= form_for [:admin, @investment.budget, @investment, @milestone] do |f| %>
 

app/views/admin/budget_investment_milestones/_globalize_locales.html.erb

@@ -1,19 +1,27 @@
 <% I18n.available_locales.each do |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 %>
+
+<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 %>
-    <%= link_to t("admin.milestones.form.remove_language"), "#",
+    </li>
-                id: "delete-#{neutral_locale(locale)}",
-                style: show_delete?(locale),
-                class: 'float-right delete-language',
-                data: { locale: neutral_locale(locale) } %>
-  </span>
   <% 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>

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