Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive translation interface #3579

Conversation

Senen
Copy link
Member

@Senen Senen commented Jun 3, 2019

References

Related Issues: #3130

Objectives

Provide users a responsive interface to manage translations.

New interface uses two native select elements to allow the user to choose a language from existing ones, and the other selector is to add new languages. User can remove languages through a "DEstroy language" link, same as previous interface.

This new interface is responsive and could be nicely shown at mobile devices and translatable fields are highlighted with a blue background to easily distinguish them from fields that are not.

Also a new option manage_languages to block adding and removing languages was added to cover special cases where we cannot allow the user to remove or to add new languages. An example of a place with this special needs is the proposals retire form.

This new interface was applied to following admin pages:

  • app/views/admin/budget_groups/_form.html.erb
  • app/views/admin/widget/cards/_form.html.erb
  • app/views/admin/budget_headings/_form.html.erb
  • app/views/admin/budget_investments/edit.html.erb
  • app/views/admin/banners/_form.html.erb
  • app/views/admin/admin_notifications/_form.html.erb
  • app/views/admin/budget_phases/_form.html.erb
  • app/views/admin/budgets/_form.html.erb
  • app/views/admin/site_customization/pages/_form.html.erb
  • app/views/admin/milestones/_form.html.erb
  • app/views/admin/legislation/draft_versions/_form.html.erb
  • app/views/admin/legislation/processes/_form.html.erb
  • app/views/admin/legislation/milestones/_summary_form.html.erb
  • app/views/admin/legislation/homepages/_form.html.erb
  • app/views/admin/legislation/questions/_form.html.erb
  • app/views/admin/progress_bars/_form.html.erb
  • app/views/admin/poll/polls/_form.html.erb
  • app/views/admin/poll/active_polls/_form.html.erb
  • app/views/admin/poll/questions/answers/_form.html.erb
  • app/views/admin/poll/questions/_form.html.erb

This new interface was also applied to following public pages:

  • app/views/debates/_form.html.erb
  • app/views/budgets/investments/_form.html.erb
  • app/views/proposals/_form.html.erb
  • app/views/proposals/retire_form.html.erb

Visual changes

Before

Interface with tabs. Mobile version
Tabbed-interface

Interface with tabs. Desktop version
Tabbed-interface-desktop

After

Responsive interface
responsive-translation-interface

Highlighted translatable fields
Highlighted form fields

Proposal form with translation interface enabled. Desktop Version
Proposal-new-translation-interface-desktop

Proposal form with translation interface enabled. Mobile Version
Proposal-new-translation-interface-mobile

Language managment blocked: Proposal retire form with translation interface enabled. Mobile Version
Proposal-retire-form

Notes

None

app/assets/javascripts/globalize.js.coffee Outdated Show resolved Hide resolved
app/assets/javascripts/globalize.js.coffee Outdated Show resolved Hide resolved
app/assets/javascripts/globalize.js.coffee Outdated Show resolved Hide resolved
app/views/admin/legislation/questions/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/legislation/questions/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/legislation/processes/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/legislation/draft_versions/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/legislation/draft_versions/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/legislation/draft_versions/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/legislation/draft_versions/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/budget_phases/_form.html.erb Outdated Show resolved Hide resolved
app/views/admin/admin_notifications/_form.html.erb Outdated Show resolved Hide resolved
@Senen Senen force-pushed the translations-new-interface branch 2 times, most recently from 44d34f4 to 669eb4f Compare June 6, 2019 15:27
@Senen Senen force-pushed the translations-new-interface branch 2 times, most recently from c9ec0d6 to 9cb88fc Compare June 7, 2019 15:33
@Senen Senen changed the title [WIP] Responsive translation interface Responsive translation interface Jun 12, 2019
@javierm javierm force-pushed the translations branch 3 times, most recently from 8515533 to 43c5a69 Compare June 12, 2019 14:56
@taitus taitus force-pushed the translations-new-interface branch from 823dc5b to a6fc116 Compare June 12, 2019 19:50
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
lib/remote_available_locales.rb Outdated Show resolved Hide resolved
Senen and others added 5 commits July 1, 2019 14:49
As we are going to call this partial from any application view it will
have more sense to place it at `app/views/shared`.
Co-Authored-By: alessandro <agileontheweb@gmail.com>
Only when translations interface is enabled.

Co-Authored-By: alessandro <agileontheweb@gmail.com>
taitus and others added 23 commits July 1, 2019 14:49
Add new js method to recover selected language to disable correctly default language fields.
We understand languages management as the ability to add new languages
or remove existing ones. When no option is passed it will allow language
manipulation by default.

There are 3 special places where we want block languages management:
- admin legislation processes homepage
- admin legislation processes milestones summary
- proposals retired form

Co-Authored-By: Sebastia <sebastia.roig@gmail.com>
After extract translation interface partials from admin
folder translations should be placed in general.yml file
inside shared context.
This file was used at previous version of translation
interface.
@Senen Senen force-pushed the translations-new-interface branch from 706cd2a to b0004a6 Compare July 1, 2019 13:29
@Senen Senen force-pushed the translations-new-interface branch from b0004a6 to 12d20b4 Compare July 1, 2019 14:40
@voodoorai2000 voodoorai2000 merged commit 14c1bbb into consuldemocracy:translations Jul 5, 2019
smarques pushed a commit to venetochevogliamo/consul that referenced this pull request Apr 29, 2020
…new-interface

Responsive translation interface
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants