From 5b46075d9a123f5ea3bec374dc833822f87a7d94 Mon Sep 17 00:00:00 2001
From: f <f@kefir.red>
Date: Mon, 16 Apr 2018 14:20:45 -0300
Subject: [PATCH] saltar de secciones con un dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

recomendación de la clinica de ux de iff
---
 app/assets/javascripts/application.js   |  1 +
 app/assets/javascripts/help.js          |  1 +
 app/assets/stylesheets/application.scss |  4 ++++
 app/views/i18n/_form.haml               | 26 +++++++++----------------
 app/views/i18n/_recursive.haml          |  2 ++
 config/locales/en.yml                   |  2 ++
 config/locales/es.yml                   |  2 ++
 7 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 27ae32b..733c70a 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -18,6 +18,7 @@
 //= require bootstrap/util
 //= require bootstrap/alert
 //= require bootstrap/tooltip
+//= require bootstrap/dropdown
 //= require bootstrap-markdown/js/bootstrap-markdown
 //= require markdown-it/dist/markdown-it
 //= require select2/dist/js/select2
diff --git a/app/assets/javascripts/help.js b/app/assets/javascripts/help.js
index 7a94f23..5a9e5f1 100644
--- a/app/assets/javascripts/help.js
+++ b/app/assets/javascripts/help.js
@@ -1,4 +1,5 @@
 $(document).on('turbolinks:load', function() {
   $('.alert').alert();
   $('[data-toggle="tooltip"]').tooltip({ placement: 'auto' });
+  $('.dropdown-toggle').dropdown();
 });
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index f71b8c7..0e47ffe 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -97,3 +97,7 @@ textarea.post-content {
   background-color: transparent;
   border: none;
 }
+
+.inline {
+  display: inline;
+}
diff --git a/app/views/i18n/_form.haml b/app/views/i18n/_form.haml
index 795f4c9..a1f25b0 100644
--- a/app/views/i18n/_form.haml
+++ b/app/views/i18n/_form.haml
@@ -26,28 +26,20 @@
     = render 'layouts/help', help: t('help.i18n.index')
 
 
-.row
-  .col-2
-    %ul.list-group
-      - @site.data.dig(@lang_from).each_pair do |section, content|
-        %li.list-group-item.align-items-center.justify-content-between.d-flex
-          -# https://github.com/turbolinks/turbolinks/issues/75
-          %a{href: "##{section}",
-            title: t('help.i18n.toc'),
-            data: { turbolinks: 'false', toggle: 'tooltip' }}= t("help.i18n.#{section}")
-          -# %span.badge.badge-secondary.badge-pill{data: { toggle: 'tooltip' },
-            title: t('help.i18n.count') }
-            - if content.is_a? String
-              = 1
-            - elsif content.is_a? Array
-              = content.count
-            - elsif content.is_a? Hash
-              = content.map(&:count).inject(&:+)
+#top.row
   .col
 
     = form_tag site_i18n_path(@site), method: :post, class: 'form' do
       = hidden_field 'i18n', 'lang_to', value: @lang_to
       .form-group
+        .dropdown.inline
+          %button.btn.btn-info.dropdown-toggle{type: 'button',
+            data: { toggle: 'dropdown' },
+            aria: { haspopup: 'true', expanded: 'false' }}
+            = t('i18n.jump')
+          .dropdown-menu{aria: { labelledby: t('i18n.jump') }}
+            - @site.data.dig(@lang_from).each_pair do |section, content|
+              %a.dropdown-item{href: "##{section}"}= t("help.i18n.#{section}")
         = submit_tag t('i18n.save'), class: 'btn btn-success'
 
       = render 'i18n/recursive', data: @site.data.dig(@lang_from), superkeys: []
diff --git a/app/views/i18n/_recursive.haml b/app/views/i18n/_recursive.haml
index b54f4be..c638695 100644
--- a/app/views/i18n/_recursive.haml
+++ b/app/views/i18n/_recursive.haml
@@ -4,6 +4,8 @@
   - unless keys.first == previous_key
     %h2{id: keys.first}
       = t("help.i18n.#{keys.first}")
+    %small
+      %a.float-md-right{href: '#top'}= t('help.i18n.top')
   - if value.is_a? String
     = render 'i18n/text_field', keys: keys, value: value
   - elsif value.is_a? Hash
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 594c206..4348a2d 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -9,6 +9,7 @@ en:
     site.  When you enter a new section, you will see the previous ones
     and also have a path for where you\'re standing."
     i18n:
+      top: 'Back to top'
       index: "Here you can edit your site's texts that don't belong to a
       post, like its description, sections, buttons... If you change
       languages up there in the title to be the same, you can edit them.
@@ -118,6 +119,7 @@ en:
     save: 'Save'
     change: 'Change'
     translate: 'Translate'
+    jump: 'Jump to section'
     translating:
       from: 'Translating from'
       to: 'into'
diff --git a/config/locales/es.yml b/config/locales/es.yml
index a483ff2..a0c91d0 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -9,6 +9,7 @@ es:
     Cuando ingreses a una sección, podrás volver a las secciones
     anteriores y además tener una ruta de donde estás parada.'
     i18n:
+      top: 'Volver al principio'
       index: 'Aquí puedes editar todos los textos del sitio que no se
       corresponden con artículos, como la descripción, secciones, textos
       de botones... Si cambias los idiomas arriba para que coincidan,
@@ -120,6 +121,7 @@ es:
     translate_into: '.  Traducir a'
     change: 'Cambiar'
     translate: 'Traducir'
+    jump: 'Ir a la sección'
     translating:
       from: 'Traduciendo desde'
       to: 'a'