Better translation UI

Gemfile.lock

@@ -22,7 +22,7 @@ PATH
   specs:
     activeadmin-globalize (1.0.0)
       activeadmin
-      globalize (~> 4.0.0)
+      globalize (>= 3.0.4)
 
 GEM
   remote: https://rubygems.org/
@@ -77,7 +77,7 @@ GEM
     execjs (2.0.2)
     formtastic (2.3.0.rc2)
       actionpack (>= 3.0)
-    globalize (4.0.0)
+    globalize (4.0.1)
       activemodel (>= 4.0.0, < 5)
       activerecord (>= 4.0.0, < 5)
     has_scope (0.6.0.rc)

activeadmin-globalize.gemspec

@@ -16,6 +16,6 @@ Gem::Specification.new do |s|
   s.files = Dir["{app,config,db,lib}/**/*"] + ["MIT-LICENSE", "README.md"]
 
   s.add_dependency "activeadmin"
-  s.add_dependency "globalize", '~> 4.0.0'
+  s.add_dependency "globalize", '>= 3.0.4'
 end
 

app/assets/javascripts/active_admin/active_admin_globalize.js.coffee

@@ -2,28 +2,131 @@ $ ->
 
   translations = ->
 
+    # Hides or shows the + button and the remove button.
+    updateLocaleButtonsStatus = ($dom) ->
+      $localeList = $dom.find('.add-locale ul li:not(.hidden)')
+      if $localeList.length == 0
+        $dom.find('.add-locale').hide()
+      else
+        $dom.find('.add-locale').show()
+
+
+    # Hides or shows the locale tab and its corresponding element in the add menu.
+    toggleTab = ($tab, active) ->
+      $addButton = $tab.parents('ul').find('.add-locale li:has(a[href="' + $tab.attr('href') + '"])')
+      if active
+        $tab.addClass('hidden').show().removeClass('hidden')
+        $addButton.hide().addClass('hidden')
+      else
+        $tab.addClass('hidden').hide().addClass('hidden')
+        $addButton.show().removeClass('hidden')
+
     $(".activeadmin-translations > ul").each ->
       $dom = $(this)
       if !$dom.data("ready")
         $dom.data("ready", true)
         $tabs = $("li > a", this)
         $contents = $(this).siblings("fieldset")
 
-        $tabs.click ->
+        $tabs.click (e) ->
           $tab = $(this)
           $tabs.not($tab).removeClass("active")
           $tab.addClass("active")
           $contents.hide()
           $contents.filter($tab.attr("href")).show()
-          false
+          e.preventDefault()
 
         $tabs.eq(0).click()
 
+        # Collect tha available locales.
+        availableLocales = []
+        $tabs.not('.default').each ->
+          availableLocales.push($('<li></li>').append($(this).clone().removeClass('active')))
+
+        # Create a new tab as the root of the drop down menu.
+        $addLocaleButton = $('<li class="add-locale"><a href="#">+</a></li>')
+        $addLocaleButton.append($('<ul></ul>').append(availableLocales))
+
+        # Handle locale addition
+        $addLocaleButton.find('ul a').click (e) ->
+          href = $(this).attr('href')
+          $tab = $tabs.filter('[href="' + href + '"]')
+          toggleTab($tab, true)
+          $tab.click()
+          updateLocaleButtonsStatus($dom)
+          e.preventDefault()
+
+        # Remove a locale from the tab.
+        $removeButton = $('<span class="remove">x</span>').click (e) ->
+          e.stopImmediatePropagation()
+          e.preventDefault()
+          $tab = $(this).parent()
+          toggleTab($tab, false)
+          if $tab.hasClass('active')
+            $tabs.not('.hidden').eq(0).click()
+
+          updateLocaleButtonsStatus($dom)
+
+        # Add the remove button to every tab.
+        $tabs.not('.default').append($removeButton)
+
+        # Add the new button at the end of the locale list.
+        $dom.append($addLocaleButton)
+
         $tabs.each ->
           $tab = $(@)
           $content = $contents.filter($tab.attr("href"))
           containsErrors = $content.find(".input.error").length > 0
           $tab.toggleClass("error", containsErrors)
+          # Find those tabs that are in use.
+          hide = true
+          # We will not hide the tabs that have any error.
+          if $tab.hasClass('error') || $tab.hasClass('default')
+            hide = false
+          else
+            # Check whether the input fields are empty or not.
+            $content.find('[name]').not('[type="hidden"]').each ->
+              if $(this).val()
+                # We will not hide the tab because it has some data.
+                hide = false
+                return false
+
+          if hide
+            toggleTab($tab, false)
+          else
+            toggleTab($tab, true)
+
+        # Remove the fields of hidden locales before form submission.
+        $form = $dom.parents('form')
+        if !$form.data('ready')
+          $form.data('ready')
+          $form.submit ->
+            # Get all translations (the nested ones too).
+            $('.activeadmin-translations > ul').each ->
+              # Get the corresponding fieldsets.
+              $fieldsets = $(this).siblings('fieldset')
+              $("li:not(.add-locale) > a", this).each ->
+                # Remove them if the locale is hidden.
+                if $(this).hasClass('hidden')
+                  # check if it's an existing translation otherwise remove it
+                  $currentFieldset = $("fieldset#{$(this).attr('href')}")
+                  $translationId = $('input[id$=_id]', $currentFieldset)
+                  if $translationId.val()
+                    # mark it for database removal appending a _destroy element
+                    $destroy = $('<input/>').attr(
+                      type: 'hidden',
+                      name: $translationId.attr('name').replace('[id]', '[_destroy]'),
+                      id: $translationId.attr('id').replace('_id', '_destroy'),
+                      value: '1'
+                    )
+                    $destroy.appendTo($currentFieldset)
+                  else
+                    # remove the fieldset from dom so it won't be submitted
+                    $fieldsets.filter($(this).attr('href')).remove()
+
+        #Initially update the buttons' status
+        updateLocaleButtonsStatus($dom)
+        $tabs.filter('.default').click()
 
   # this is to handle elements created with has_many
   $("a").bind "click", ->

app/assets/stylesheets/active_admin/active_admin_globalize.css.sass

@@ -21,6 +21,7 @@
           padding: 8px 15px
           padding-bottom: 8px + 4px
           margin-bottom: 0
+          position: relative
 
           &.error
             color: #932419
@@ -34,6 +35,72 @@
             text-shadow: 0 1px 0 white
             color: #666 !important
 
+          &> span
+            font-size: 0.75em
+            font-weight: bold
+            position: absolute
+            top: 2px
+            right: 4px
+            display: none
+
+            &:hover
+              +text-shadow(red, 1px, 1px, 2px)
+
+          &:hover
+            span
+              display: block
+
+            span.hidden
+              display: none
+
+      &> li.add-locale
+        font-weight: bold
+        position: relative
+        z-index: 100
+
+        &> ul
+          display: none
+          font-size: 17px
+          font-weight: normal
+          padding: 0
+          +border-bottom-radius(4px)
+          position: absolute
+          +shadow(3px, 3px, 5px, #aaa)
+          background: #f4f4f4
+          z-index: 100
+
+          &> li
+            font-size: 17px
+            padding: 8px 15px
+            padding-bottom: 8px + 4px
+            margin-bottom: 0
+
+            &:hover
+              background: #ddd
+              background: -webkit-linear-gradient(left, $secondary-gradient-stop, #f4f4f4)
+              background: -moz-linear-gradient(left, $secondary-gradient-stop, #f4f4f4)
+              background: linear-gradient(left, $secondary-gradient-stop, #f4f4f4)
+
+            &> a
+              text-decoration: none
+              color: #666
+
+          &> li:first-child
+            border-top-right-radius: 4px
+
+        &:hover
+          background: #f4f4f4
+          +inset-shadow(0, 4px, 4px, #ddd)
+          +border-top-radius(4px)
+          margin-bottom: 0
+          +gradient($secondary-gradient-stop, #f4f4f4)
+          text-shadow: 0 1px 0 white
+          color: #666 !important
+
+          &> ul
+            display: block
+
+
     &> fieldset.inputs
       margin-bottom: 0
 

lib/active_admin/globalize/engine.rb

@@ -1,7 +1,7 @@
 module ActiveAdmin
   module Globalize
     class Engine < ::Rails::Engine
-      initializer "Active Admin precompile hook", group: :assets do |app|
+      initializer "Active Admin precompile hook", group: :all do |app|
         app.config.assets.precompile += [
           "active_admin/active_admin_globalize.css",
           "active_admin/active_admin_globalize.js"

lib/active_admin/globalize/form_builder_extension.rb

@@ -10,9 +10,10 @@ def translated_inputs(name = "Translations", options = {}, &block)
         form_buffers.last << template.content_tag(:div, class: "activeadmin-translations") do
           template.content_tag(:ul, class: "available-locales") do
             (auto_sort ? I18n.available_locales.sort : I18n.available_locales).map do |locale|
+              default = 'default' if locale == I18n.default_locale
               template.content_tag(:li) do
                 I18n.with_locale(switch_locale ? locale : I18n.locale) do
-                  template.content_tag(:a, I18n.t(:"active_admin.globalize.language.#{locale}"), href:".locale-#{locale}")
+                  template.content_tag(:a, I18n.t(:"active_admin.globalize.language.#{locale}"), href:".locale-#{locale}", :class => default)
                 end
               end
             end.join.html_safe

lib/active_admin/globalize/index_table_for_extension.rb

@@ -10,6 +10,13 @@ def translation_status
           end.join(" ").html_safe
         end
       end
+      def translation_status_flags
+        column I18n.t("active_admin.globalize.translations") do |obj|
+          obj.translated_locales.map do |l|
+            image_tag '%s.gif' % [ l.to_s ]
+          end.join(" ").html_safe
+        end
+      end
     end
   end
 end