cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5362 from AntonKhorev/color-mode-preference-map

Browse source 
Map color mode preference
This commit is contained in:
Andy Allan 2024-12-11 16:53:15 +00:00 • committed by GitHub
commit 83043d6f1c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 151 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/assets/stylesheets/common.scss
View file

@ -505,11 +505,6 @@ body.small-nav {
} }
@include color-mode(dark) { @include color-mode(dark) {
.leaflet-tile-container .leaflet-tile,
.mapkey-table-entry td:first-child > * {
filter: brightness(.8);
}
.leaflet-container .leaflet-control-attribution a { .leaflet-container .leaflet-control-attribution a {
color: var(--bs-link-color); color: var(--bs-link-color);
} }
@ -519,6 +514,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 */ /* Rules for attribution text under the main map shown on printouts */
.donate-attr { color: darken($green, 10%) !important; } .donate-attr { color: darken($green, 10%) !important; }

1
app/assets/stylesheets/parameters.scss
View file

@ -20,4 +20,3 @@ $table-border-factor: .1;
$list-group-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075); $list-group-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075);
$enable-negative-margins: true; $enable-negative-margins: true;
$color-mode-type: media-query;

3
app/assets/stylesheets/screen-auto-ltr.scss Normal file
View file

@ -0,0 +1,3 @@
@use "common" with (
$color-mode-type: media-query
);

3
app/assets/stylesheets/screen-auto-rtl.rtlcss.scss Normal file
View file

@ -0,0 +1,3 @@
@use "common" with (
$color-mode-type: media-query
);

1
app/assets/stylesheets/screen-ltr.scss
View file

@ -1 +0,0 @@
@import "common";

3
app/assets/stylesheets/screen-manual-ltr.scss Normal file
View file

@ -0,0 +1,3 @@
@use "common" with (
$color-mode-type: data
);

3
app/assets/stylesheets/screen-manual-rtl.rtlcss.scss Normal file
View file

@ -0,0 +1,3 @@
@use "common" with (
$color-mode-type: data
);

1
app/assets/stylesheets/screen-rtl.rtlcss.scss
View file

@ -1 +0,0 @@
@import "common";

10
app/controllers/application_controller.rb
View file

@ -279,7 +279,15 @@ class ApplicationController < ActionController::Base
end end
end end
helper_method :preferred_editor def preferred_color_scheme(subject)
if current_user
current_user.preferences.find_by(:k => "#{subject}.color_scheme")&.v || "auto"
else
"auto"
end
end
helper_method :preferred_editor, :preferred_color_scheme
def update_totp def update_totp
if Settings.key?(:totp_key) if Settings.key?(:totp_key)

15
app/controllers/preferences_controller.rb
View file

@ -21,7 +21,20 @@ class PreferencesController < ApplicationController
else else
params[:user][:preferred_editor] params[:user][:preferred_editor]
end 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 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. # Use a partial so that it is rendered during the next page load in the correct language.
flash[:notice] = { :partial => "preferences/update_success_flash" } flash[:notice] = { :partial => "preferences/update_success_flash" }
redirect_to preferences_path redirect_to preferences_path

6
app/views/layouts/_head.html.erb
View file

@ -5,7 +5,11 @@
<%= javascript_include_tag "turbo", :type => "module" %> <%= javascript_include_tag "turbo", :type => "module" %>
<%= javascript_include_tag "application" %> <%= javascript_include_tag "application" %>
<%= javascript_include_tag "i18n/#{I18n.locale}" %> <%= javascript_include_tag "i18n/#{I18n.locale}" %>
<%= stylesheet_link_tag "screen-#{dir}", :media => "screen" %> <% if preferred_color_scheme(:site) == "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 "print-#{dir}", :media => "print" %>
<%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %> <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>
<%= render :partial => "layouts/meta" %> <%= render :partial => "layouts/meta" %>

11
app/views/layouts/site.html.erb
View file

@ -1,11 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<%= I18n.locale %>" dir="<%= dir %>"> <%= 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/head" %>
<body class="<%= body_class %>"> <%= 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/header" %>
<%= render :partial => "layouts/content" %> <%= render :partial => "layouts/content" %>
<% if defined?(Settings.matomo) -%> <% if defined?(Settings.matomo) -%>
<noscript><p><img src="<%= request.protocol %><%= Settings.matomo["location"] %>/matomo.php?idsite=<%= Settings.matomo["site"] %>" class="matomo" alt="" /></p></noscript> <noscript><p><img src="<%= request.protocol %><%= Settings.matomo["location"] %>/matomo.php?idsite=<%= Settings.matomo["site"] %>" class="matomo" alt="" /></p></noscript>
<% end -%> <% end -%>
</body> <% end %>
</html> <% end %>

16
app/views/preferences/edit.html.erb
View file

@ -7,6 +7,22 @@
<%= f.text_field :languages %> <%= f.text_field :languages %>
<div class="mb-3">
<%= 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_color_scheme(:site)),
:class => "form-select" %>
</div>
<div class="mb-3">
<%= 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" %>
</div>
<%= f.primary t(".save") %> <%= f.primary t(".save") %>
<%= link_to t(".cancel"), preferences_path, :class => "btn btn-link" %> <%= link_to t(".cancel"), preferences_path, :class => "btn btn-link" %>
<% end %> <% end %>

9
app/views/preferences/show.html.erb
View file

@ -19,7 +19,16 @@
<li><%= locale %></li> <li><%= locale %></li>
<% end %> <% end %>
</ul> </ul>
</dd>
<dt class="col-sm-4"><%= t ".preferred_site_color_scheme" %></dt>
<dd class="col-sm-8">
<%= t ".site_color_schemes.#{preferred_color_scheme(:site)}" %>
</dd>
<dt class="col-sm-4"><%= t ".preferred_map_color_scheme" %></dt>
<dd class="col-sm-8">
<%= t ".map_color_schemes.#{preferred_color_scheme(:map)}" %>
</dd> </dd>
</dl> </dl>

10
config/locales/en.yml
View file

@ -1810,6 +1810,16 @@ en:
title: My Preferences title: My Preferences
preferred_editor: Preferred Editor preferred_editor: Preferred Editor
preferred_languages: Preferred Languages preferred_languages: Preferred Languages
preferred_site_color_scheme: Preferred Website Color Scheme
site_color_schemes:
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_preferences: Edit Preferences
edit: edit:
title: Edit Preferences title: Edit Preferences

52
test/controllers/preferences_controller_test.rb
View file

@ -22,6 +22,8 @@ class PreferencesControllerTest < ActionDispatch::IntegrationTest
def test_update_preferred_editor def test_update_preferred_editor
user = create(:user, :languages => []) 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) session_for(user)
# Changing to a invalid editor should fail # Changing to a invalid editor should fail
@ -32,6 +34,8 @@ class PreferencesControllerTest < ActionDispatch::IntegrationTest
assert_select ".alert-success", false assert_select ".alert-success", false
assert_select ".alert-danger", true assert_select ".alert-danger", true
assert_select "form > div > select#user_preferred_editor > option[selected]", false 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 # Changing to a valid editor should work
user.preferred_editor = "id" user.preferred_editor = "id"
@ -41,6 +45,8 @@ class PreferencesControllerTest < ActionDispatch::IntegrationTest
assert_template :show assert_template :show
assert_select ".alert-success", /^Preferences updated/ assert_select ".alert-success", /^Preferences updated/
assert_select "dd", "iD (in-browser editor)" 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 # Changing to the default editor should work
user.preferred_editor = "default" user.preferred_editor = "default"
@ -50,5 +56,51 @@ class PreferencesControllerTest < ActionDispatch::IntegrationTest
assert_template :show assert_template :show
assert_select ".alert-success", /^Preferences updated/ assert_select ".alert-success", /^Preferences updated/
assert_select "dd", "Default (currently iD)" 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
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
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
end end