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,7 +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,20 +82,18 @@ 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
-            css_classes.push(:empty) if content.blank?
+            css_classes.push('empty') if content.blank?
             content_tag(tag, content.presence || 'Empty', class: css_classes)
           else
             # block content
@@ -107,25 +105,32 @@ 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
-              I18n.with_locale(locale) do
-                content_tag(:a, I18n.t(:"active_admin.globalize.language.#{locale}"), href: ".locale-#{locale}", class: default)
+          available_translations.map do |translation|
+            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(translation.locale) do
+                default = 'default' if translation.locale == initial_locale.to_sym
+                content_tag(:a, I18n.t(:"active_admin.globalize.language.#{translation.locale}"), href: ".locale-#{translation.locale}", class: default)
               end
             end
           end.join.html_safe
         end
       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

spec/features/article_composing_spec.rb

@@ -61,7 +61,16 @@
       within first_table_row do
         page.should have_css 'th', text: 'TITLE'
         page.should have_css 'span.field-translation', text: article.title
+
+        flag_link(:hu).find(:xpath, '..').should have_css '.empty:not(.active)'
+        flag_link(:it).find(:xpath, '..').should have_css ':not(.empty):not(.active)'
+
+        flag_link(:hu).click # change shown translation
+        flag_link(:hu).find(:xpath, '..').should have_css '.empty.active'
+
         flag_link(:it).click # change shown translation
+        flag_link(:it).find(:xpath, '..').should have_css ':not(.empty).active'
+
         page.should have_css 'span.field-translation', text: article.translation_for(:it).title
       end
 
@@ -101,4 +110,4 @@
 
   end
 
-end
+end

spec/models/article_spec.rb

@@ -12,14 +12,22 @@
     let(:article) { create(:localized_article) }
     subject { article }
 
-    it { should have(2).translations }
+    it { should have(3).translations }
 
     it 'should have italian translation' do
       I18n.with_locale :it do
         article.title.should == 'Italian title'
+        article.body.should == 'Italian Body'
+      end
+    end
+
+    it 'should have hungarian translation' do
+      I18n.with_locale :hu do
+        article.title.should == 'Article title'
+        article.body.should == 'Hungarian Body'
       end
     end
 
   end
 
-end
+end

spec/support/factories/articles.rb

@@ -9,6 +9,7 @@
 
       after :create do |a|
         I18n.with_locale(:it) { a.update_attributes! title: 'Italian title', body: 'Italian Body' }
+        I18n.with_locale(:hu) { a.update_attributes! body: 'Hungarian Body' }
       end
 
     end