From 84a72ce8cc9f6f250bec6fdaa2fc5d1eafff15bd Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sun, 13 Feb 2022 00:27:46 +0100 Subject: [PATCH] Translate general and colors theme settings sections --- app/views/settings/_theme.haml | 48 +++++++++------------------------- config/locales/views.en.yml | 23 ++++++++++++++++ 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml index 4f81e1dc..42ca07d0 100644 --- a/app/views/settings/_theme.haml +++ b/app/views/settings/_theme.haml @@ -10,9 +10,8 @@ = bootstrap_form_for(current_user.theme || Theme.new, url: { action: "update_theme" }, html: { id: "update_theme" }, method: :patch) do |f| .card .card-body - %h2 General - %p - Here you'll find general page values that are basically visible all across the page. + %h2= t(".general.heading") + %p= t(".general.body") .row .col-sm-6 = f.text_field :background_color, class: 'color', data: { default: 0xF0EDF4 } @@ -20,86 +19,63 @@ = f.text_field :body_text, class: 'color', data: { default: 0x000000 } .card .card-body - %h2 Colors - %p - Colors you can find used on the site. The names of the colors usually describe the context. - The "text" colors for all styles represent the color that text on top of these colors has. + %h2= t(".colors.heading") + %p= t(".colors.body") - %ul - %li - %b Primary: - The primary/brand color of the site, used for navigation, links, etc. - %li - %b Danger: - Color used for errors or critical actions like deleting something. - %li - %b Warning: - Color used for warnings if something non-critical has happened. - %li - %b Info: - Color used for informational popups or messages. - %li - %b Success: - Color used for messages if something went through successfully. .row .col-sm-6 = f.text_field :primary_color, class: 'color', data: { default: 0x5E35B1 } .col-sm-6 = f.text_field :primary_text, class: 'color', data: { default: 0xFFFFFF } .col-sm-12 - .alert.alert-primary - A simple primary alert—check it out! + .alert.alert-primary= t(".colors.alert.example", type: t(".colors.alert.type.primary")) .row .col-sm-6 = f.text_field :danger_color, class: 'color', data: { default: 0xDC3545 } .col-sm-6 = f.text_field :danger_text, class: 'color', data: { default: 0xFFFFFF } .col-sm-12 - .alert.alert-danger - A simple danger alert—check it out! + .alert.alert-danger= t(".colors.alert.example", type: t(".colors.alert.type.danger")) .row .col-sm-6 = f.text_field :warning_color, class: 'color', data: { default: 0xFFC107 } .col-sm-6 = f.text_field :warning_text, class: 'color', data: { default: 0x292929 } .col-sm-12 - .alert.alert-warning - A simple warning alert—check it out! + .alert.alert-warning= t(".colors.alert.example", type: t(".colors.alert.type.warning")) .row .col-sm-6 = f.text_field :info_color, class: 'color', data: { default: 0x17A2B8 } .col-sm-6 = f.text_field :info_text, class: 'color', data: { default: 0xFFFFFF } .col-sm-12 - .alert.alert-info - A simple info alert—check it out! + .alert.alert-info= t(".colors.alert.example", type: t(".colors.alert.type.info")) .row .col-sm-6 = f.text_field :success_color, class: 'color', data: { default: 0x28A745 } .col-sm-6 = f.text_field :success_text, class: 'color', data: { default: 0xFFFFFF } .col-sm-12 - .alert.alert-success - A simple success alert—check it out! + .alert.alert-success= t(".colors.alert.example", type: t(".colors.alert.type.success")) .row .col-sm-6 = f.text_field :dark_color, class: 'color', data: { default: 0x343A40 } .col-sm-6 = f.text_field :dark_text, class: 'color', data: { default: 0xFFFFFF } .col-sm-12 - %a.btn.btn-dark.mb-3{ href: '#' } A dark button + %a.btn.btn-dark.mb-3{ href: '#' }= t(".colors.button.example", type: t(".colors.button.type.dark")) .row .col-sm-6 = f.text_field :light_color, class: 'color', data: { default: 0xF8F9FA } .col-sm-6 = f.text_field :light_text, class: 'color', data: { default: 0xFFFFFF } .col-sm-12 - %a.btn.btn-light.mb-3{ href: '#' } A light button + %a.btn.btn-light.mb-3{ href: '#' }= t(".colors.button.example", type: t(".colors.button.type.light")) .row .col-sm-6 = f.text_field :muted_text, class: 'color', data: { default: 0x6C757D } .col-sm-6 - %p.pt-4.text-muted Some muted text + %p.pt-4.text-muted= t(".colors.text.example") .card .card-body %h2 Forms and Inputs diff --git a/config/locales/views.en.yml b/config/locales/views.en.yml index d54c499b..e2628291 100644 --- a/config/locales/views.en.yml +++ b/config/locales/views.en.yml @@ -60,6 +60,29 @@ en: descriptions on their general use on the site!

And with that: Happy Theming! delete: "Delete Theme" + general: + heading: "General" + body: "Here you'll find general page values that are basically visible all across the page." + colors: + heading: "Colors" + body: | + Colors you can find used on the site. The names of the colors usually describe the context. + The "text" colors for all styles represent the color that text on top of these colors has. + alert: + example: "A simple %{type} alert — check it out!" + type: + danger: "danger" + info: "info" + primary: "primary" + success: "success" + warning: "warning" + button: + example: "A %{type} button" + type: + dark: "dark" + light: "light" + text: + example: "Some muted text" user: edit: title: "Profile Settings"