Merge branch 'main' into refactor/export-locales

app/controllers/user_controller.rb

@@ -156,14 +156,14 @@ class UserController < ApplicationController
       current_user.theme.user_id = current_user.id
 
       if current_user.theme.save
-        flash[:success] = 'Theme saved.'
+        flash[:success] = t(".success")
       else
-        flash[:error] = 'Theme saving failed. ' + current_user.theme.errors.messages.flatten.join(' ')
+        flash[:error] = t(".error", errors: current_user.theme.errors.messages.flatten.join(" "))
       end
     elsif current_user.theme.update(update_attributes)
-      flash[:success] = 'Theme saved.'
+      flash[:success] = t(".success")
     else
-      flash[:error] = 'Theme saving failed. ' + current_user.theme.errors.messages.flatten.join(' ')
+      flash[:error] = t(".error", errors: current_user.theme.errors.messages.flatten.join(" "))
     end
     redirect_to edit_user_theme_path
   end

app/views/settings/_account.haml

@@ -19,6 +19,6 @@
       %hr/
     %p
       = t(".delete.heading")
-      = button_to t(".delete.action"), "/settings/account", data: { confirm: t(".delete.confirm") }, method: :delete, class: "btn btn-danger btn-xs"
+      = button_to t(".delete.action"), "/settings/account", data: { confirm: t("voc.confirm") }, method: :delete, class: "btn btn-danger btn-xs"
 
 .visible-xs= render "shared/links"

app/views/settings/_theme.haml

@@ -1,135 +1,105 @@
 .card
   .card-body
-    %h1 Theming
+    %h1= t(".heading")
-    %p.lead Welcome to the Theme Editor!
+    %p.lead= t(".lead")
-    %p
+    = t(".body_html")
-      Here you'll be able to modify your Retrospring experience by adjusting all available colors.
-      To further help you with adjusting needs, there are a few example elements using the specified colors, and sections will include
-      descriptions on their general use on the site!
-
-    %p
-      And with that:
-      %b Happy Theming!
 
     - if current_user.theme
       .pull-right
-        = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: 'Are you sure?' }, tabindex: -1, method: :delete, class: 'btn btn-danger'
+        = button_to t(".delete"), delete_user_theme_path, data: { confirm: t("voc.confirm") }, tabindex: -1, method: :delete, class: "btn btn-danger"
-= bootstrap_form_for(current_user.theme || Theme.new, url: { action: 'update_theme' }, html: { id: 'update_theme' }, method: :patch) do |f|
+= 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
+      %h2= t(".general.heading")
-      %p
+      %p= t(".general.body")
-        Here you'll find general page values that are basically visible all across the page.
-      .row
-        .col-sm-6
-          = f.text_field :background_color, class: 'color', data: { default: 0xF0EDF4 }
-        .col-sm-6
-          = 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.
 
-      %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 }
+          = f.text_field :background_color, class: "color", data: { default: 0xF0EDF4 }
         .col-sm-6
-          = f.text_field :primary_text, class: 'color', data: { default: 0xFFFFFF }
+          = f.text_field :body_text, class: "color", data: { default: 0x000000 }
-        .col-sm-12
-          .alert.alert-primary
-            A simple primary alert—check it out!
-      .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!
-      .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!
-      .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!
-      .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!
-      .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
-      .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
-      .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
   .card
     .card-body
-      %h2 Forms and Inputs
+      %h2= t(".colors.heading")
-      %p
+      %p= t(".colors.body")
-        Styles for form inputs, like textfields.
+
       .row
         .col-sm-6
-          = f.text_field :input_color, class: 'color', data: { default: 0xFFFFFF }
+          = f.text_field :primary_color, class: "color", data: { default: 0x5E35B1 }
         .col-sm-6
-          = f.text_field :input_text, class: 'color', data: { default: 0x000000 }
+          = f.text_field :primary_text, class: "color", data: { default: 0xFFFFFF }
+        .col-sm-12
+          .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= 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= 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= 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= 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: "#" }= 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: "#" }= 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= t(".colors.text.example")
   .card
     .card-body
-      %h2 Raised Content
+      %h2= t(".forms.heading")
-      %p
+      %p= t(".forms.body")
-        Raised content basically describes all the different boxes and panels you can see across the site.
+
       .row
         .col-sm-6
-          = f.text_field :raised_background, class: 'color', data: { default: 0xFFFFFF }
+          = f.text_field :input_color, class: "color", data: { default: 0xFFFFFF }
         .col-sm-6
-          = f.text_field :raised_accent, class: 'color', data: { default: 0xF7F7F7 }
+          = f.text_field :input_text, class: "color", data: { default: 0x000000 }
+  .card
+    .card-body
+      %h2= t(".raised.heading")
+      %p= t(".raised.body")
+
+      .row
+        .col-sm-6
+          = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF }
+        .col-sm-6
+          = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7 }
     .card-footer
-      %p Some text on top of a accented area on a raised element!
+      %p= t(".raised.accent.example")
   .card
     .card-body
       .pull-left
-        = f.submit t('views.actions.save'), class: 'btn btn-primary'
+        = f.primary

app/views/user/edit_theme.haml

@@ -1,4 +1,4 @@
-= render 'settings/theme'
+= render "settings/theme"
 
-- provide(:title, generate_title('Theme Settings'))
+- provide(:title, generate_title(t(".title")))
-- parent_layout 'user/settings'
+- parent_layout "user/settings"

config/locales/activerecord.en.yml

@@ -19,6 +19,28 @@ en:
         website: "Website"
       service:
         post_tag: "Tag"
+      theme:
+        background_color: "Background color"
+        body_text: "Body text color"
+        dark_color: "Dark color"
+        dark_text: "Dark text color"
+        danger_color: "Danger color"
+        danger_text: "Danger text color"
+        info_color: "Info color"
+        info_text: "Info text color"
+        input_color: "Input color"
+        input_text: "Input text color"
+        light_color: "Light color"
+        light_text: "Light text color"
+        muted_text: "Muted text color"
+        primary_color: "Primary color"
+        primary_text: "Primary text color"
+        raised_accent: "Raised accent color"
+        raised_background: "Raised background color"
+        success_color: "Success color"
+        success_text: "Success text color"
+        warning_color: "Warning color"
+        warning_text: "Warning text color"
       user:
         current_password: "Current password"
         email: "Email"
@@ -37,6 +59,12 @@ en:
         motivation_header: "Shown in the header of the question box on your profile. Motivate users to ask you questions!"
       services/twitter:
         post_tag: "Automatically append a tag to your shared answers. A # symbol is not automatically prepended."
+      theme:
+        danger_color: "Color used for errors or critical actions like deleting something."
+        info_color: "Color used for informational popups or messages."
+        primary_color: "The primary/brand color of the site, used for navigation, links, etc."
+        success_color: "Color used for messages if something went through successfully."
+        warning_color: "Color used for warnings if something non-critical has happened."
   helpers:
     submit:
       user:
@@ -45,3 +73,6 @@ en:
         update: :voc.save
       profile:
         update: :voc.save
+      theme:
+        create: :voc.save
+        update: :voc.save

config/locales/controllers.en.yml

@@ -36,3 +36,6 @@ en:
     update_profile:
       success: :user.update.success
       error: :user.update.error
+    update_theme:
+      success: "Theme saved successfully."
+      error: "Theme saving failed. %{errors}"

config/locales/views.en.yml

@@ -38,7 +38,6 @@ en:
         password: "Leave this blank if you don't want to change it"
       delete:
         action: "Delete my account"
-        confirm: "Are you sure?"
         heading: "Unsatisfied?"
     export:
       heading: "Export your data"
@@ -64,8 +63,50 @@ en:
       connect: "Connect to %{service}"
       disconnect: "Disconnect"
       confirm: "Really disconnect service %{service}?"
+    theme:
+      heading: "Theming"
+      lead: "Welcome to the Theme Editor!"
+      body_html: |
+        <p>Here you'll be able to modify your Retrospring experience by adjusting all available colors.
+        To further help you with adjusting needs, there are a few example elements using the specified colors, and sections will include
+        descriptions on their general use on the site!</p>
+        <p>And with that: <b>Happy Theming!</b>
+      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"
+      forms:
+        heading: "Forms and Inputs"
+        body: "Styles for form inputs, like text fields."
+      raised:
+        heading: "Raised Content"
+        body: "Raised content basically describes all the different boxes and panels you can see across the site."
+        accent:
+          example: "Some text on top of a accented area on a raised element!"
   user:
     edit:
       title: "Profile Settings"
+    edit_theme:
+      title: "Theme Settings"
     export:
       title: "Export"

config/locales/voc.en.yml

@@ -2,10 +2,11 @@ en:
   voc:
     cancel: "Cancel"
     close: "Close"
+    confirm: "Are you sure?"
     delete: "Delete"
     edit: "Edit"
     login: "Sign in"
     save: "Save changes"
     register: "Sign up"
     terms: "Terms of Service"
-    update: "Update"
+    update: "Update"