From 2ca74ab3ef47143cb42403f207e438eacda08dc5 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 17:51:50 +0300 Subject: [PATCH 1/9] Add auto/manual color scheme stylesheets depending on user preferences --- app/assets/stylesheets/parameters.scss | 1 - app/assets/stylesheets/screen-auto-ltr.scss | 3 +++ app/assets/stylesheets/screen-auto-rtl.rtlcss.scss | 3 +++ app/assets/stylesheets/screen-ltr.scss | 1 - app/assets/stylesheets/screen-manual-ltr.scss | 3 +++ app/assets/stylesheets/screen-manual-rtl.rtlcss.scss | 3 +++ app/assets/stylesheets/screen-rtl.rtlcss.scss | 1 - app/controllers/application_controller.rb | 10 +++++++++- app/views/layouts/_head.html.erb | 6 +++++- app/views/layouts/site.html.erb | 4 ++-- 10 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 app/assets/stylesheets/screen-auto-ltr.scss create mode 100644 app/assets/stylesheets/screen-auto-rtl.rtlcss.scss delete mode 100644 app/assets/stylesheets/screen-ltr.scss create mode 100644 app/assets/stylesheets/screen-manual-ltr.scss create mode 100644 app/assets/stylesheets/screen-manual-rtl.rtlcss.scss delete mode 100644 app/assets/stylesheets/screen-rtl.rtlcss.scss diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss index 28bf569016..07549d69bb 100644 --- a/app/assets/stylesheets/parameters.scss +++ b/app/assets/stylesheets/parameters.scss @@ -20,4 +20,3 @@ $table-border-factor: .1; $list-group-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075); $enable-negative-margins: true; -$color-mode-type: media-query; diff --git a/app/assets/stylesheets/screen-auto-ltr.scss b/app/assets/stylesheets/screen-auto-ltr.scss new file mode 100644 index 0000000000..89e31599ae --- /dev/null +++ b/app/assets/stylesheets/screen-auto-ltr.scss @@ -0,0 +1,3 @@ +@use "common" with ( + $color-mode-type: media-query +); diff --git a/app/assets/stylesheets/screen-auto-rtl.rtlcss.scss b/app/assets/stylesheets/screen-auto-rtl.rtlcss.scss new file mode 100644 index 0000000000..89e31599ae --- /dev/null +++ b/app/assets/stylesheets/screen-auto-rtl.rtlcss.scss @@ -0,0 +1,3 @@ +@use "common" with ( + $color-mode-type: media-query +); diff --git a/app/assets/stylesheets/screen-ltr.scss b/app/assets/stylesheets/screen-ltr.scss deleted file mode 100644 index c525060af5..0000000000 --- a/app/assets/stylesheets/screen-ltr.scss +++ /dev/null @@ -1 +0,0 @@ -@import "common"; diff --git a/app/assets/stylesheets/screen-manual-ltr.scss b/app/assets/stylesheets/screen-manual-ltr.scss new file mode 100644 index 0000000000..00f65f79ac --- /dev/null +++ b/app/assets/stylesheets/screen-manual-ltr.scss @@ -0,0 +1,3 @@ +@use "common" with ( + $color-mode-type: data +); diff --git a/app/assets/stylesheets/screen-manual-rtl.rtlcss.scss b/app/assets/stylesheets/screen-manual-rtl.rtlcss.scss new file mode 100644 index 0000000000..00f65f79ac --- /dev/null +++ b/app/assets/stylesheets/screen-manual-rtl.rtlcss.scss @@ -0,0 +1,3 @@ +@use "common" with ( + $color-mode-type: data +); diff --git a/app/assets/stylesheets/screen-rtl.rtlcss.scss b/app/assets/stylesheets/screen-rtl.rtlcss.scss deleted file mode 100644 index c525060af5..0000000000 --- a/app/assets/stylesheets/screen-rtl.rtlcss.scss +++ /dev/null @@ -1 +0,0 @@ -@import "common"; diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 7ce804ced0..56d9a6763e 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -281,7 +281,15 @@ def preferred_editor end end - helper_method :preferred_editor + def preferred_site_color_scheme + if current_user + current_user.preferences.find_by(:k => "site.color_scheme")&.v || "auto" + else + "auto" + end + end + + helper_method :preferred_editor, :preferred_site_color_scheme def update_totp if Settings.key?(:totp_key) diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb index 3c691612ab..8cab522236 100644 --- a/app/views/layouts/_head.html.erb +++ b/app/views/layouts/_head.html.erb @@ -5,7 +5,11 @@ <%= javascript_include_tag "turbo", :type => "module" %> <%= javascript_include_tag "application" %> <%= javascript_include_tag "i18n/#{I18n.locale}" %> - <%= stylesheet_link_tag "screen-#{dir}", :media => "screen" %> + <% if preferred_site_color_scheme == "auto" %> + <%= stylesheet_link_tag "screen-auto-#{dir}", :media => "screen" %> + <% else %> + <%= stylesheet_link_tag "screen-manual-#{dir}", :media => "screen" %> + <% end %> <%= stylesheet_link_tag "print-#{dir}", :media => "print" %> <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %> <%= render :partial => "layouts/meta" %> diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb index 7c921658d4..dd573d476b 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -1,5 +1,5 @@ - +<%= tag.html :lang => I18n.locale, :dir => dir, :data => { :bs_theme => (preferred_site_color_scheme if preferred_site_color_scheme != "auto") } do %> <%= render :partial => "layouts/head" %> <%= render :partial => "layouts/header" %> @@ -8,4 +8,4 @@ <% end -%> - +<% end %> From d0b8278c4a9e35c527db097baf8b05516753dc76 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 17:59:17 +0300 Subject: [PATCH 2/9] Show site color scheme on user preferences page --- app/views/preferences/show.html.erb | 4 ++++ config/locales/en.yml | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/app/views/preferences/show.html.erb b/app/views/preferences/show.html.erb index 7a63d0be8d..4b772fba90 100644 --- a/app/views/preferences/show.html.erb +++ b/app/views/preferences/show.html.erb @@ -19,7 +19,11 @@
  • <%= locale %>
    • <% end %> + +
    <%= t ".preferred_site_color_scheme" %>
    +
    + <%= t ".site_color_schemes.#{preferred_site_color_scheme}" %>
    diff --git a/config/locales/en.yml b/config/locales/en.yml index 2a92fbb63c..fb4f234304 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1807,6 +1807,11 @@ en: title: My Preferences preferred_editor: Preferred Editor preferred_languages: Preferred Languages + preferred_site_color_scheme: Preferred Website Color Scheme + site_color_schemes: + auto: Auto + light: Light + dark: Dark edit_preferences: Edit Preferences edit: title: Edit Preferences From bad03267c13c82dbe33a64410fbf0fc9356f4fbf Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 18:09:15 +0300 Subject: [PATCH 3/9] Add site color scheme select to preferences form --- app/views/preferences/edit.html.erb | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/views/preferences/edit.html.erb b/app/views/preferences/edit.html.erb index 07d89fbb5b..34cb72046d 100644 --- a/app/views/preferences/edit.html.erb +++ b/app/views/preferences/edit.html.erb @@ -7,6 +7,14 @@ <%= f.text_field :languages %> +
    + <%= label_tag "site_color_scheme", t("preferences.show.preferred_site_color_scheme"), :class => "form-label" %> + <%= select_tag "site_color_scheme", + options_for_select(%w[auto light dark].map { |scheme| [t("preferences.show.site_color_schemes.#{scheme}"), scheme] }, + preferred_site_color_scheme), + :class => "form-select" %> +
    + <%= f.primary t(".save") %> <%= link_to t(".cancel"), preferences_path, :class => "btn btn-link" %> <% end %> From 045af66d438a7fa3567cb4a10ea2f6a255e742c8 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 18:13:03 +0300 Subject: [PATCH 4/9] Store selected site color scheme --- app/controllers/preferences_controller.rb | 10 ++++++- .../preferences_controller_test.rb | 26 +++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/app/controllers/preferences_controller.rb b/app/controllers/preferences_controller.rb index dcf0d8b64e..f002d5d395 100644 --- a/app/controllers/preferences_controller.rb +++ b/app/controllers/preferences_controller.rb @@ -21,7 +21,15 @@ def update else params[:user][:preferred_editor] end - if current_user.save + + success = current_user.save + + if params[:site_color_scheme] + site_color_scheme_preference = current_user.preferences.find_or_create_by(:k => "site.color_scheme") + success &= site_color_scheme_preference.update(:v => params[:site_color_scheme]) + end + + if success # Use a partial so that it is rendered during the next page load in the correct language. flash[:notice] = { :partial => "preferences/update_success_flash" } redirect_to preferences_path diff --git a/test/controllers/preferences_controller_test.rb b/test/controllers/preferences_controller_test.rb index 81760fe5de..d442e2cd2b 100644 --- a/test/controllers/preferences_controller_test.rb +++ b/test/controllers/preferences_controller_test.rb @@ -22,6 +22,7 @@ def test_routes def test_update_preferred_editor user = create(:user, :languages => []) + user.preferences.create(:k => "site.color_scheme", :v => "light") session_for(user) # Changing to a invalid editor should fail @@ -32,6 +33,7 @@ def test_update_preferred_editor assert_select ".alert-success", false assert_select ".alert-danger", true assert_select "form > div > select#user_preferred_editor > option[selected]", false + assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v # Changing to a valid editor should work user.preferred_editor = "id" @@ -41,6 +43,7 @@ def test_update_preferred_editor assert_template :show assert_select ".alert-success", /^Preferences updated/ assert_select "dd", "iD (in-browser editor)" + assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v # Changing to the default editor should work user.preferred_editor = "default" @@ -50,5 +53,28 @@ def test_update_preferred_editor assert_template :show assert_select ".alert-success", /^Preferences updated/ assert_select "dd", "Default (currently iD)" + assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v + end + + def test_update_preferred_site_color_scheme + user = create(:user, :languages => []) + session_for(user) + assert_nil user.preferences.find_by(:k => "site.color_scheme") + + # Changing when previously not defined + put preferences_path, :params => { :user => user.attributes, :site_color_scheme => "light" } + assert_redirected_to preferences_path + follow_redirect! + assert_template :show + assert_select ".alert-success", /^Preferences updated/ + assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v + + # Changing when previously defined + put preferences_path, :params => { :user => user.attributes, :site_color_scheme => "auto" } + assert_redirected_to preferences_path + follow_redirect! + assert_template :show + assert_select ".alert-success", /^Preferences updated/ + assert_equal "auto", user.preferences.find_by(:k => "site.color_scheme")&.v end end From 3d79f9fd88ab2784b292c8eafc46070472b2a4c9 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sun, 1 Dec 2024 03:04:09 +0300 Subject: [PATCH 5/9] Make a generic preferred color scheme method --- app/controllers/application_controller.rb | 6 +++--- app/views/layouts/_head.html.erb | 2 +- app/views/layouts/site.html.erb | 4 +++- app/views/preferences/edit.html.erb | 2 +- app/views/preferences/show.html.erb | 2 +- 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 56d9a6763e..5bfec4ab62 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -281,15 +281,15 @@ def preferred_editor end end - def preferred_site_color_scheme + def preferred_color_scheme(subject) if current_user - current_user.preferences.find_by(:k => "site.color_scheme")&.v || "auto" + current_user.preferences.find_by(:k => "#{subject}.color_scheme")&.v || "auto" else "auto" end end - helper_method :preferred_editor, :preferred_site_color_scheme + helper_method :preferred_editor, :preferred_color_scheme def update_totp if Settings.key?(:totp_key) diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb index 8cab522236..bab19c2171 100644 --- a/app/views/layouts/_head.html.erb +++ b/app/views/layouts/_head.html.erb @@ -5,7 +5,7 @@ <%= javascript_include_tag "turbo", :type => "module" %> <%= javascript_include_tag "application" %> <%= javascript_include_tag "i18n/#{I18n.locale}" %> - <% if preferred_site_color_scheme == "auto" %> + <% if preferred_color_scheme(:site) == "auto" %> <%= stylesheet_link_tag "screen-auto-#{dir}", :media => "screen" %> <% else %> <%= stylesheet_link_tag "screen-manual-#{dir}", :media => "screen" %> diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb index dd573d476b..6898b6f0bb 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -1,5 +1,7 @@ -<%= tag.html :lang => I18n.locale, :dir => dir, :data => { :bs_theme => (preferred_site_color_scheme if preferred_site_color_scheme != "auto") } do %> +<%= tag.html :lang => I18n.locale, + :dir => dir, + :data => { :bs_theme => (preferred_color_scheme(:site) if preferred_color_scheme(:site) != "auto") } do %> <%= render :partial => "layouts/head" %> <%= render :partial => "layouts/header" %> diff --git a/app/views/preferences/edit.html.erb b/app/views/preferences/edit.html.erb index 34cb72046d..2c3cd4ba0d 100644 --- a/app/views/preferences/edit.html.erb +++ b/app/views/preferences/edit.html.erb @@ -11,7 +11,7 @@ <%= label_tag "site_color_scheme", t("preferences.show.preferred_site_color_scheme"), :class => "form-label" %> <%= select_tag "site_color_scheme", options_for_select(%w[auto light dark].map { |scheme| [t("preferences.show.site_color_schemes.#{scheme}"), scheme] }, - preferred_site_color_scheme), + preferred_color_scheme(:site)), :class => "form-select" %> diff --git a/app/views/preferences/show.html.erb b/app/views/preferences/show.html.erb index 4b772fba90..7681638ed9 100644 --- a/app/views/preferences/show.html.erb +++ b/app/views/preferences/show.html.erb @@ -23,7 +23,7 @@
    <%= t ".preferred_site_color_scheme" %>
    - <%= t ".site_color_schemes.#{preferred_site_color_scheme}" %> + <%= t ".site_color_schemes.#{preferred_color_scheme(:site)}" %>
    From 141a2164239d4602c7ef937262376e5876607d9a Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sun, 1 Dec 2024 03:54:36 +0300 Subject: [PATCH 6/9] Set map color scheme depending on user preferences --- app/assets/stylesheets/common.scss | 22 +++++++++++++++++----- app/views/layouts/site.html.erb | 5 +++-- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 4bedf42b6a..d39535417e 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -502,11 +502,6 @@ body.small-nav { } @include color-mode(dark) { - .leaflet-tile-container .leaflet-tile, - .mapkey-table-entry td:first-child > * { - filter: brightness(.8); - } - .leaflet-container .leaflet-control-attribution a { color: var(--bs-link-color); } @@ -516,6 +511,23 @@ body.small-nav { } } +@mixin dark-map-color-scheme { + .leaflet-tile-container .leaflet-tile, + .mapkey-table-entry td:first-child > * { + filter: brightness(.8); + } +} + +body[data-map-theme="dark"] { + @include dark-map-color-scheme; +} + +@include color-mode(dark) { + body:not([data-map-theme]) { + @include dark-map-color-scheme; + } +} + /* Rules for attribution text under the main map shown on printouts */ .donate-attr { color: darken($green, 10%) !important; } diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb index 6898b6f0bb..f02f024a57 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -3,11 +3,12 @@ :dir => dir, :data => { :bs_theme => (preferred_color_scheme(:site) if preferred_color_scheme(:site) != "auto") } do %> <%= render :partial => "layouts/head" %> - + <%= tag.body :class => body_class, + :data => { :map_theme => (preferred_color_scheme(:map) if preferred_color_scheme(:map) != "auto") } do %> <%= render :partial => "layouts/header" %> <%= render :partial => "layouts/content" %> <% if defined?(Settings.matomo) -%> <% end -%> - + <% end %> <% end %> From a35f360d5eb96fc553afaf17818a3ace0665a03d Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sun, 1 Dec 2024 04:00:25 +0300 Subject: [PATCH 7/9] Show map color scheme on user preferences page --- app/views/preferences/show.html.erb | 5 +++++ config/locales/en.yml | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/app/views/preferences/show.html.erb b/app/views/preferences/show.html.erb index 7681638ed9..9bf83cbf1f 100644 --- a/app/views/preferences/show.html.erb +++ b/app/views/preferences/show.html.erb @@ -25,6 +25,11 @@
    <%= t ".site_color_schemes.#{preferred_color_scheme(:site)}" %>
    + +
    <%= t ".preferred_map_color_scheme" %>
    +
    + <%= t ".map_color_schemes.#{preferred_color_scheme(:map)}" %> +
    diff --git a/config/locales/en.yml b/config/locales/en.yml index fb4f234304..770e8e40ac 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1812,6 +1812,11 @@ en: auto: Auto light: Light dark: Dark + preferred_map_color_scheme: Preferred Map Color Scheme + map_color_schemes: + auto: Auto + light: Light + dark: Dark edit_preferences: Edit Preferences edit: title: Edit Preferences From 444a691578d26d64dbc0507509c562afaedca6e3 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sun, 1 Dec 2024 04:02:51 +0300 Subject: [PATCH 8/9] Add map color scheme select to preferences form --- app/views/preferences/edit.html.erb | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/views/preferences/edit.html.erb b/app/views/preferences/edit.html.erb index 2c3cd4ba0d..aaf07e927e 100644 --- a/app/views/preferences/edit.html.erb +++ b/app/views/preferences/edit.html.erb @@ -15,6 +15,14 @@ :class => "form-select" %>
    +
    + <%= label_tag "map_color_scheme", t("preferences.show.preferred_map_color_scheme"), :class => "form-label" %> + <%= select_tag "map_color_scheme", + options_for_select(%w[auto light dark].map { |scheme| [t("preferences.show.map_color_schemes.#{scheme}"), scheme] }, + preferred_color_scheme(:map)), + :class => "form-select" %> +
    + <%= f.primary t(".save") %> <%= link_to t(".cancel"), preferences_path, :class => "btn btn-link" %> <% end %> From 9f341430493cdaafb6ea9ce6ac29fc6af291d57c Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sun, 1 Dec 2024 04:18:56 +0300 Subject: [PATCH 9/9] Store selected map color scheme --- app/controllers/preferences_controller.rb | 5 ++++ .../preferences_controller_test.rb | 26 +++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/app/controllers/preferences_controller.rb b/app/controllers/preferences_controller.rb index f002d5d395..1d96766ef2 100644 --- a/app/controllers/preferences_controller.rb +++ b/app/controllers/preferences_controller.rb @@ -29,6 +29,11 @@ def update success &= site_color_scheme_preference.update(:v => params[:site_color_scheme]) end + if params[:map_color_scheme] + map_color_scheme_preference = current_user.preferences.find_or_create_by(:k => "map.color_scheme") + success &= map_color_scheme_preference.update(:v => params[:map_color_scheme]) + end + if success # Use a partial so that it is rendered during the next page load in the correct language. flash[:notice] = { :partial => "preferences/update_success_flash" } diff --git a/test/controllers/preferences_controller_test.rb b/test/controllers/preferences_controller_test.rb index d442e2cd2b..1cd07b7d9f 100644 --- a/test/controllers/preferences_controller_test.rb +++ b/test/controllers/preferences_controller_test.rb @@ -23,6 +23,7 @@ def test_routes def test_update_preferred_editor user = create(:user, :languages => []) user.preferences.create(:k => "site.color_scheme", :v => "light") + user.preferences.create(:k => "map.color_scheme", :v => "light") session_for(user) # Changing to a invalid editor should fail @@ -34,6 +35,7 @@ def test_update_preferred_editor assert_select ".alert-danger", true assert_select "form > div > select#user_preferred_editor > option[selected]", false assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v + assert_equal "light", user.preferences.find_by(:k => "map.color_scheme")&.v # Changing to a valid editor should work user.preferred_editor = "id" @@ -44,6 +46,7 @@ def test_update_preferred_editor assert_select ".alert-success", /^Preferences updated/ assert_select "dd", "iD (in-browser editor)" assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v + assert_equal "light", user.preferences.find_by(:k => "map.color_scheme")&.v # Changing to the default editor should work user.preferred_editor = "default" @@ -54,6 +57,7 @@ def test_update_preferred_editor assert_select ".alert-success", /^Preferences updated/ assert_select "dd", "Default (currently iD)" assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v + assert_equal "light", user.preferences.find_by(:k => "map.color_scheme")&.v end def test_update_preferred_site_color_scheme @@ -77,4 +81,26 @@ def test_update_preferred_site_color_scheme assert_select ".alert-success", /^Preferences updated/ assert_equal "auto", user.preferences.find_by(:k => "site.color_scheme")&.v end + + def test_update_preferred_map_color_scheme + user = create(:user, :languages => []) + session_for(user) + assert_nil user.preferences.find_by(:k => "map.color_scheme") + + # Changing when previously not defined + put preferences_path, :params => { :user => user.attributes, :map_color_scheme => "light" } + assert_redirected_to preferences_path + follow_redirect! + assert_template :show + assert_select ".alert-success", /^Preferences updated/ + assert_equal "light", user.preferences.find_by(:k => "map.color_scheme")&.v + + # Changing when previously defined + put preferences_path, :params => { :user => user.attributes, :map_color_scheme => "auto" } + assert_redirected_to preferences_path + follow_redirect! + assert_template :show + assert_select ".alert-success", /^Preferences updated/ + assert_equal "auto", user.preferences.find_by(:k => "map.color_scheme")&.v + end end