In translated_row, use gray flags for empty values and transparent flags for inactive value

Author: jtomaszewski

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

@@ -148,6 +148,8 @@ $ ->
     $td = $(this).closest('td')
     $('.field-translation', $td).hide()
     $(".locale-#{$locale}", $td).show()
+    $(this).parent().children('a.ui-translation-trigger').removeClass('active')
+    $(this).addClass('active')
     e.preventDefault()
 
   translations()

app/assets/stylesheets/active_admin/active_admin_globalize_flags.sass

@@ -40,6 +40,12 @@
 // Used to distantiate inline locale selector
 span.inline-locale-selector
   margin-right: 10px
+  > .ui-translation-trigger
+    opacity: .4
+    &.empty
+      filter: grayscale(100%)
+    &.active
+      opacity: 1
 
 .field-translation.hidden
   display: none

lib/active_admin/globalize/attributes_table_extension.rb

@@ -53,15 +53,15 @@ def translated_row(*args, &block)
           if options[:inline]
             ''.html_safe.tap do |value|
               # Add selectors for inline locale
-              value << inline_locale_selectors
+              value << inline_locale_selectors(field, options[:locale], &block)
               # Build translations spans
               value << field_translations(field, :span, options[:locale], &block)
             end
           else
             content_tag(:div, class: 'activeadmin-translations') do
               ''.html_safe.tap do |value|
                 # Render selectors as in translation ui
-                value << block_locale_selectors
+                value << block_locale_selectors(field, options[:locale], &block)
                 # Build translations divs for actual translations
                 value << field_translations(field, :div, options[:locale], &block)
               end
@@ -82,16 +82,14 @@ def translatable?(field)
       # @param [String] field field name to render
       # @param [Symbol] tag tag to enclose field translation
       # @param [Symbol] initial_locale locale to set as not hidden
-      def field_translations(field, tag, initial_locale)
+      def field_translations(field, tag, initial_locale, &block)
         available_translations.map do |translation|
           # Classes for translation span only first element is visible
           css_classes = ['field-translation', "locale-#{translation.locale}"]
           # Initially only element for selected locale is visible
           css_classes.push 'hidden' unless translation.locale == initial_locale.to_sym
           # Build content for cell or div using translation locale and given block
-          content = I18n.with_locale(translation.locale) do
-            block_given? ? yield(translation) : translation.send(field)
-          end
+          content = field_translation_value(translation, field, &block)
           # return element
           if tag == :span # inline element
             # attach class to span if inline
@@ -107,12 +105,15 @@ def field_translations(field, tag, initial_locale)
         end.join(' ').html_safe
       end
 
-      def block_locale_selectors
+      def block_locale_selectors(field, initial_locale, &block)
         content_tag(:ul, class: 'available-locales locale-selector') do
           available_translations.map(&:locale).map do |locale|
-            default = 'default' if locale == I18n.default_locale
-            content_tag(:li, class: 'translation-tab') do
+            css_classes = ['translation-tab']
+            css_classes << 'active' if translation.locale == initial_locale.to_sym
+            css_classes << 'empty' unless content.presence
+            content_tag(:li, class: css_classes) do
               I18n.with_locale(locale) do
+                default = 'default' if translation.locale == initial_locale.to_sym
                 content_tag(:a, I18n.t(:"active_admin.globalize.language.#{locale}"), href: ".locale-#{locale}", class: default)
               end
             end
@@ -121,11 +122,15 @@ def block_locale_selectors
       end
 
       # Return flag elements to show the given locale using javascript
-      def inline_locale_selectors
+      def inline_locale_selectors(field, initial_locale, &block)
         content_tag(:span, class: 'inline-locale-selector') do
           available_translations.map do |translation|
+            content = field_translation_value(translation, field, &block)
+            css_classes = ['ui-translation-trigger']
+            css_classes << 'active' if translation.locale == initial_locale.to_sym
+            css_classes << 'empty' unless content.presence
             # Build a link to show the given translation
-            link_to(flag_icon(translation.locale), '#', class: 'ui-translation-trigger', data: {locale: translation.locale})
+            link_to(flag_icon(translation.locale), '#', class: css_classes, data: {locale: translation.locale})
           end.join(' ').html_safe
         end
       end
@@ -134,6 +139,11 @@ def available_translations
         @record_translations ||= @collection.first.translations.order(:locale)
       end
 
+      def field_translation_value(translation, field)
+        I18n.with_locale(translation.locale) do
+          block_given? ? yield(translation) : translation.send(field)
+        end
+      end
     end
   end
 end