Skip to content

Commit

Permalink
Favor semantic html, extract component, add localization
Browse files Browse the repository at this point in the history
  • Loading branch information
mattwr18 committed Sep 18, 2023
1 parent 2a294c6 commit 3720025
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 83 deletions.
1 change: 1 addition & 0 deletions app/components/checkbox/checkbox.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
value='1'
<%= checked ? 'checked' : '' %>
<%= required ? 'required' : '' %>
<%= attrs %>
/>
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.OnboardingChannelsCheckboxes {
border: 0;
}

.OnboardingChannelsCheckboxes-legend {
display: block;
font-weight: 600;
font-size: var(--font-size);
}

.OnboardingChannelsCheckboxes-helpText {
font-size: var(--font-size-s);
color: var(--color-text-light);
}

.OnboardingChannelsCheckboxes-list {
list-style: none;
display: flex;
justify-content: space-between;
}

.OnboardingChannelsCheckboxes-listItem {
display: flex;
align-items: center;
}

.OnboardingChannelsCheckboxes-listItem > .Checkbox {
margin-right: var(--spacing-unit-xs);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<fieldset <%= attrs %>>
<legend class="OnboardingChannelsCheckboxes-legend">
<%= t '.legend' %>
</legend>
<p class="OnboardingChannelsCheckboxes-helpText">
<%= t '.help_text' %>
</p>
<ul class="OnboardingChannelsCheckboxes-list">
<% Setting.channels.each do |key, value| %>
<li class="OnboardingChannelsCheckboxes-listItem">
<%= c 'checkbox', id: "setting[channels][#{key}]", checked: value %>
<label for=<%= "setting[channels][#{key}]" %>><%= key.to_s.camelize %>
</li>
<% end %>
</ul>
</fieldset>
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# frozen_string_literal: true

module OnboardingChannelsCheckboxes
class OnboardingChannelsCheckboxes < ApplicationComponent; end
end
10 changes: 10 additions & 0 deletions app/components/settings_form/settings_form.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.SettingsForm {
padding-left: var(--limit-max-inner-width);
padding-right: var(--limit-max-inner-width);
margin: var(--spacing-unit) 0;
}

.SettingsForm .Section {
padding-left: 0;
padding-right: 0;
}
139 changes: 60 additions & 79 deletions app/components/settings_form/settings_form.html.erb
Original file line number Diff line number Diff line change
@@ -1,95 +1,76 @@
<%= c 'form', model: Setting.new, multipart: true do %>
<%= c 'stack', space: :xlarge do %>
<%= c 'form', model: Setting.new, multipart: true, **attrs do %>
<%= c 'section' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.project_settings') } %>
<%= c('settings_field', type: :input, attr: :project_name) %>
<% end %>

<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.project_settings') } %>
<%= c('settings_field', type: :input, attr: :project_name) %>
<%= c 'section' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.onboarding') } %>
<%= c('settings_field', type: :image_input, attr: :onboarding_logo) %>
<%= c('settings_field', type: :input, attr: :onboarding_byline) %>
<%= c('settings_field', type: :image_input, attr: :onboarding_hero) %>
<%= c('settings_field', type: :input, attr: :onboarding_title) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_page) %>
<% if current_user.admin? %>
<%= c 'onboarding_channels_checkboxes' %>
<%= c('settings_field', type: :url_input, attr: :onboarding_data_protection_link) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_data_processing_consent_additional_info) %>
<%= c('settings_field', type: :url_input, attr: :onboarding_imprint_link) %>
<% end %>
<% end %>

<% if current_user.admin? %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.onboarding') } %>
<%= c('settings_field', type: :image_input, attr: :onboarding_logo) %>
<%= c('settings_field', type: :input, attr: :onboarding_byline) %>
<%= c('settings_field', type: :image_input, attr: :onboarding_hero) %>
<%= c('settings_field', type: :input, attr: :onboarding_title) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_page) %>
<%= c 'section', styles: [:noHorizontalPadding] do %>
<%= c 'heading', styles: [:beta] do %>
Channels
<% end %>
<%= c 'flex' do %>
<% Setting.channels.each do |key, value| %>
<%= c('field',
object: Setting.new,
attr: :channels,
styles: [:leftAligned],
label: key.to_s.camelize
) do |field| %>
<%= c 'checkbox', id: "setting[channels][#{key}]", checked: value %>
<% end %>
<% end %>
<% end %>
<% end %>
<% if current_user.admin? %>
<%= c('settings_field', type: :url_input, attr: :onboarding_data_protection_link) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_data_processing_consent_additional_info) %>
<%= c('settings_field', type: :url_input, attr: :onboarding_imprint_link) %>
<% end %>
<% end %>

<% if current_user.admin? %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t 'setting.form.groups.onboarding_additional_consent' } %>

<%= c('field',
object: Setting.new,
attr: :onboarding_ask_for_additional_consent,
styles: [:horizontal, :leftAligned],
) do |field| %>
<%= c 'checkbox', **field.input_defaults, checked: Setting.onboarding_ask_for_additional_consent %>
<% end %>
<%= c('heading', tag: :h2) { t 'setting.form.groups.onboarding_additional_consent' } %>

<%= c('settings_field', type: :input, attr: :onboarding_additional_consent_heading) %>
<%= c('settings_field', type: :input, attr: :onboarding_additional_consent_text) %>
<%= c('field',
object: Setting.new,
attr: :onboarding_ask_for_additional_consent,
styles: [:horizontal, :leftAligned],
) do |field| %>
<%= c 'checkbox', **field.input_defaults, checked: Setting.onboarding_ask_for_additional_consent %>
<% end %>
<% end %>

<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.onboarding_success') } %>
<%= c('settings_field', type: :input, attr: :onboarding_success_heading) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_success_text) %>
<%= c('settings_field', type: :input, attr: :onboarding_additional_consent_heading) %>
<%= c('settings_field', type: :input, attr: :onboarding_additional_consent_text) %>
<% end %>
<% end %>

<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.onboarding_unauthorized') } %>
<%= c('settings_field', type: :input, attr: :onboarding_unauthorized_heading) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_unauthorized_text) %>
<% end %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.onboarding_success') } %>
<%= c('settings_field', type: :input, attr: :onboarding_success_heading) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_success_text) %>
<% end %>

<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.signal') } %>
<%= c('settings_field', type: :textarea, attr: :signal_unknown_content_message) %>
<% end %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.onboarding_unauthorized') } %>
<%= c('settings_field', type: :input, attr: :onboarding_unauthorized_heading) %>
<%= c('settings_field', type: :textarea, attr: :onboarding_unauthorized_text) %>
<% end %>

<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.telegram') } %>
<%= c('settings_field', type: :textarea, attr: :telegram_unknown_content_message) %>
<%= c('settings_field', type: :textarea, attr: :telegram_contributor_not_found_message) %>
<% end %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.signal') } %>
<%= c('settings_field', type: :textarea, attr: :signal_unknown_content_message) %>
<% end %>

<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.threema') } %>
<%= c('settings_field', type: :textarea, attr: :threema_unknown_content_message) %>
<% end %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.telegram') } %>
<%= c('settings_field', type: :textarea, attr: :telegram_unknown_content_message) %>
<%= c('settings_field', type: :textarea, attr: :telegram_contributor_not_found_message) %>
<% end %>

<% if current_user.admin? %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.all') } %>
<%= c('settings_field', type: :image_input, attr: :channel_image) %>
<%= c('settings_field', type: :textarea, attr: :about) %>
<% end %>
<% end %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.threema') } %>
<%= c('settings_field', type: :textarea, attr: :threema_unknown_content_message) %>
<% end %>

<%= c 'submit_button', label: t('save') %>
<% if current_user.admin? %>
<%= c 'stack' do %>
<%= c('heading', tag: :h2) { t('setting.form.groups.all') } %>
<%= c('settings_field', type: :image_input, attr: :channel_image) %>
<%= c('settings_field', type: :textarea, attr: :about) %>
<% end %>
<% end %>

<%= c 'submit_button', label: t('save') %>
<% end %>
4 changes: 1 addition & 3 deletions app/views/settings/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,5 @@
<p><%= t('settings.subheading')%></p>
<% end %>

<%= c 'section' do %>
<%= c 'settings_form', current_user: current_user %>
<% end %>
<%= c 'settings_form', current_user: current_user %>
<% end %>
4 changes: 3 additions & 1 deletion config/locales/de.yml
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,9 @@ de:
empty_state:
no_contributors: Du hast noch keine Mitglieder, verschick du Einladungslinks.
filter_active: Keine Mitglieder mit diesen Filtern gefunden

onboarding_channels_checkboxes:
legend: Aktive Onboarding-Channel
help_text: Achtung, hier deaktivieren sie Kanäle. Teilnehmerinnen können sich nur noch auf aktiven Kanälen anmelden.

mailer:
unsubscribe:
Expand Down

0 comments on commit 3720025

Please sign in to comment.