From 5b46075d9a123f5ea3bec374dc833822f87a7d94 Mon Sep 17 00:00:00 2001 From: f 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 27ae32b5..733c70aa 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 7a94f232..5a9e5f1c 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 f71b8c7c..0e47ffed 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 795f4c9f..a1f25b00 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 b54f4be9..c6386958 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 594c206c..4348a2d6 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 a483ff2b..a0c91d0d 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'