From f8ac569f5f4d32c56716a723f48842fdc6a799a2 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Tue, 10 Sep 2024 13:24:02 +0200 Subject: [PATCH 1/7] remove unnecessary variables from the list --- lib/open_project/custom_styles/design.rb | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/lib/open_project/custom_styles/design.rb b/lib/open_project/custom_styles/design.rb index 2da19415007f..28f2dc955670 100644 --- a/lib/open_project/custom_styles/design.rb +++ b/lib/open_project/custom_styles/design.rb @@ -72,16 +72,9 @@ def customizable_variables accent-color header-bg-color header-item-bg-hover-color - header-item-font-color - header-item-font-hover-color - header-border-bottom-color main-menu-bg-color main-menu-bg-selected-background - main-menu-bg-hover-background - main-menu-font-color - main-menu-selected-font-color - main-menu-hover-font-color - main-menu-border-color ) + main-menu-bg-hover-background) end end end From 75549a45deea42b0bd38ee047034b5720bcc0651 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Wed, 11 Sep 2024 16:49:57 +0200 Subject: [PATCH 2/7] create a helper for updating design variables --- app/helpers/colors_helper.rb | 23 +++++++++ app/services/design/update_design_service.rb | 52 ++++++++++++++++++++ lib/open_project/custom_styles/design.rb | 9 +++- 3 files changed, 83 insertions(+), 1 deletion(-) diff --git a/app/helpers/colors_helper.rb b/app/helpers/colors_helper.rb index ac61eaa323ff..79839642e2ab 100644 --- a/app/helpers/colors_helper.rb +++ b/app/helpers/colors_helper.rb @@ -175,5 +175,28 @@ def highlighted_foreground_light "color: hsla(var(--color-h), calc(var(--color-s) * 1%), calc((var(--color-l) - (var(--color-l) * 0.22)) * 1%), 1) !important;" end end + + def get_contrast_color(hex) + # Convert hex to RGB + binding.pry + color = ColorConversion::Color.new(hex) + rgb = color.rgb + + # Calculate luminance + luminance = calculate_luminance(rgb[:r], rgb[:g], rgb[:b]) + + # Return black or white depending on luminance + luminance > 0.5 ? '#333333' : '#FFFFFF' + end + + def calculate_luminance(r, g, b) + # Normalize RGB values to the range [0, 1] + r_norm = r / 255.0 + g_norm = g / 255.0 + b_norm = b / 255.0 + + # Calculate luminance using the formula + 0.2126 * r_norm + 0.7152 * g_norm + 0.0722 * b_norm + end # rubocop:enable Layout/LineLength end diff --git a/app/services/design/update_design_service.rb b/app/services/design/update_design_service.rb index 96d29589e02a..cd9015ea51bc 100644 --- a/app/services/design/update_design_service.rb +++ b/app/services/design/update_design_service.rb @@ -62,8 +62,18 @@ def set_colors DesignColor.delete_all end + params[:colors].each do |param_variable, param_hexcode| + # design_font_color = DesignColor.find_by(variable: "main-menu-font-color") + # contrast_color = get_contrast_color('#eeeeee') + # + # design_font_color.hexcode = contrast_color + # design_font_color.save + + set_font_color(param_variable, param_hexcode); if design_color = DesignColor.find_by(variable: param_variable) + + if param_hexcode.blank? design_color.destroy elsif design_color.hexcode != param_hexcode @@ -85,5 +95,47 @@ def set_theme def custom_style @custom_style ||= CustomStyle.current || CustomStyle.create! end + + def set_font_color(color_variable, color_hexcode) + if color_variable === "header-bg-color" + create_update_color("header-item-font-color", color_hexcode) + elsif color_variable === "header-item-bg-hover-color" + create_update_color("header-item-font-hover-color", color_hexcode) + elsif color_variable === "main-menu-bg-color" + create_update_color("main-menu-font-color", color_hexcode) + elsif color_variable === "main-menu-bg-selected-background" + create_update_color("main-menu-selected-font-color", color_hexcode) + elsif color_variable === "main-menu-bg-hover-background" + create_update_color("main-menu-hover-font-color", color_hexcode) + end + end + def create_update_color(color_variable, color_hexcode) + design_font_color = DesignColor.find_by(variable: color_variable) + contrast_color = get_contrast_color(color_hexcode) + + design_font_color.hexcode = contrast_color + design_font_color.save + end + def get_contrast_color(hex) + # Convert hex to RGB + color = ColorConversion::Color.new(hex) + rgb = color.rgb + + # Calculate luminance + luminance = calculate_luminance(rgb[:r], rgb[:g], rgb[:b]) + + # Return black or white depending on luminance + luminance > 0.5 ? '#333333' : '#FFFFFF' + end + + def calculate_luminance(r, g, b) + # Normalize RGB values to the range [0, 1] + r_norm = r / 255.0 + g_norm = g / 255.0 + b_norm = b / 255.0 + + # Calculate luminance using the formula + 0.2126 * r_norm + 0.7152 * g_norm + 0.0722 * b_norm + end end end diff --git a/lib/open_project/custom_styles/design.rb b/lib/open_project/custom_styles/design.rb index 28f2dc955670..baeac3fbc110 100644 --- a/lib/open_project/custom_styles/design.rb +++ b/lib/open_project/custom_styles/design.rb @@ -72,9 +72,16 @@ def customizable_variables accent-color header-bg-color header-item-bg-hover-color + header-item-font-color + header-item-font-hover-color + header-border-bottom-color main-menu-bg-color main-menu-bg-selected-background - main-menu-bg-hover-background) + main-menu-bg-hover-background + main-menu-font-color + main-menu-selected-font-color + main-menu-hover-font-color + main-menu-border-color) end end end From e3deae373a34206179cacdd5a67cadd9ad213144 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 19 Sep 2024 10:28:25 +0200 Subject: [PATCH 3/7] undo changes in update design service --- app/services/design/update_design_service.rb | 52 -------------------- lib/open_project/custom_styles/design.rb | 5 -- 2 files changed, 57 deletions(-) diff --git a/app/services/design/update_design_service.rb b/app/services/design/update_design_service.rb index cd9015ea51bc..96d29589e02a 100644 --- a/app/services/design/update_design_service.rb +++ b/app/services/design/update_design_service.rb @@ -62,18 +62,8 @@ def set_colors DesignColor.delete_all end - params[:colors].each do |param_variable, param_hexcode| - # design_font_color = DesignColor.find_by(variable: "main-menu-font-color") - # contrast_color = get_contrast_color('#eeeeee') - # - # design_font_color.hexcode = contrast_color - # design_font_color.save - - set_font_color(param_variable, param_hexcode); if design_color = DesignColor.find_by(variable: param_variable) - - if param_hexcode.blank? design_color.destroy elsif design_color.hexcode != param_hexcode @@ -95,47 +85,5 @@ def set_theme def custom_style @custom_style ||= CustomStyle.current || CustomStyle.create! end - - def set_font_color(color_variable, color_hexcode) - if color_variable === "header-bg-color" - create_update_color("header-item-font-color", color_hexcode) - elsif color_variable === "header-item-bg-hover-color" - create_update_color("header-item-font-hover-color", color_hexcode) - elsif color_variable === "main-menu-bg-color" - create_update_color("main-menu-font-color", color_hexcode) - elsif color_variable === "main-menu-bg-selected-background" - create_update_color("main-menu-selected-font-color", color_hexcode) - elsif color_variable === "main-menu-bg-hover-background" - create_update_color("main-menu-hover-font-color", color_hexcode) - end - end - def create_update_color(color_variable, color_hexcode) - design_font_color = DesignColor.find_by(variable: color_variable) - contrast_color = get_contrast_color(color_hexcode) - - design_font_color.hexcode = contrast_color - design_font_color.save - end - def get_contrast_color(hex) - # Convert hex to RGB - color = ColorConversion::Color.new(hex) - rgb = color.rgb - - # Calculate luminance - luminance = calculate_luminance(rgb[:r], rgb[:g], rgb[:b]) - - # Return black or white depending on luminance - luminance > 0.5 ? '#333333' : '#FFFFFF' - end - - def calculate_luminance(r, g, b) - # Normalize RGB values to the range [0, 1] - r_norm = r / 255.0 - g_norm = g / 255.0 - b_norm = b / 255.0 - - # Calculate luminance using the formula - 0.2126 * r_norm + 0.7152 * g_norm + 0.0722 * b_norm - end end end diff --git a/lib/open_project/custom_styles/design.rb b/lib/open_project/custom_styles/design.rb index baeac3fbc110..f55ae6a37d6a 100644 --- a/lib/open_project/custom_styles/design.rb +++ b/lib/open_project/custom_styles/design.rb @@ -72,15 +72,10 @@ def customizable_variables accent-color header-bg-color header-item-bg-hover-color - header-item-font-color - header-item-font-hover-color header-border-bottom-color main-menu-bg-color main-menu-bg-selected-background main-menu-bg-hover-background - main-menu-font-color - main-menu-selected-font-color - main-menu-hover-font-color main-menu-border-color) end end From 95bfdef8409d9e86bb6013285094441ea8277920 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 19 Sep 2024 10:29:06 +0200 Subject: [PATCH 4/7] set font colors based on the bg color in inline_css file --- app/views/custom_styles/_inline_css.erb | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app/views/custom_styles/_inline_css.erb b/app/views/custom_styles/_inline_css.erb index 56902b4a08eb..c281254e4eaf 100644 --- a/app/views/custom_styles/_inline_css.erb +++ b/app/views/custom_styles/_inline_css.erb @@ -34,6 +34,21 @@ See COPYRIGHT and LICENSE files for more details. <% if design_color.variable == "header-border-bottom-color" %> --header-border-bottom-width: 1px; <% end %> + <% if design_color.variable == "header-bg-color" %> + --header-item-font-color: <%= design_color.contrasting_font_color %>; + <% end %> + <% if design_color.variable == "header-item-bg-hover-color" %> + --header-item-font-hover-color: <%= design_color.contrasting_font_color %>; + <% end %> + <% if design_color.variable == "main-menu-bg-color" %> + --main-menu-font-color: <%= design_color.contrasting_font_color %>; + <% end %> + <% if design_color.variable == "main-menu-bg-selected-background" %> + --main-menu-selected-font-color: <%= design_color.contrasting_font_color %>; + <% end %> + <% if design_color.variable == "main-menu-bg-hover-background" %> + --main-menu-hover-font-color: <%= design_color.contrasting_font_color %>; + <% end %> <% if design_color.variable == "main-menu-border-color" %> --main-menu-border-width: 1px; <% end %> From 631059bd3e4ac7522cecf78e5e77f3d5a1f9ad33 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 19 Sep 2024 11:03:34 +0200 Subject: [PATCH 5/7] change default values of font color for selected and hovered menu item --- .../src/global_styles/openproject/_variable_defaults.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/global_styles/openproject/_variable_defaults.scss b/frontend/src/global_styles/openproject/_variable_defaults.scss index 57f165baedbe..46b564f25da3 100644 --- a/frontend/src/global_styles/openproject/_variable_defaults.scss +++ b/frontend/src/global_styles/openproject/_variable_defaults.scss @@ -86,9 +86,9 @@ --main-menu-bg-selected-background: #175A8E; --main-menu-bg-hover-background: #124E7C; --main-menu-font-color: #FFFFFF; - --main-menu-hover-font-color: var(--main-menu-font-color); + --main-menu-hover-font-color: #FFFFFF; --main-menu-resizer-color: var(--main-menu-border-color); - --main-menu-selected-font-color: var(--main-menu-font-color); + --main-menu-selected-font-color: #FFFFFF; --main-menu-font-size: 14px; --main-menu-fieldset-header-color: #B0B2B3; --main-menu-hover-border-color: transparent; From 00e52fd3119b6b030478a559255e52710dbcbe1f Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 19 Sep 2024 12:29:01 +0200 Subject: [PATCH 6/7] undo changes in colors helper --- app/helpers/colors_helper.rb | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/app/helpers/colors_helper.rb b/app/helpers/colors_helper.rb index 79839642e2ab..ac61eaa323ff 100644 --- a/app/helpers/colors_helper.rb +++ b/app/helpers/colors_helper.rb @@ -175,28 +175,5 @@ def highlighted_foreground_light "color: hsla(var(--color-h), calc(var(--color-s) * 1%), calc((var(--color-l) - (var(--color-l) * 0.22)) * 1%), 1) !important;" end end - - def get_contrast_color(hex) - # Convert hex to RGB - binding.pry - color = ColorConversion::Color.new(hex) - rgb = color.rgb - - # Calculate luminance - luminance = calculate_luminance(rgb[:r], rgb[:g], rgb[:b]) - - # Return black or white depending on luminance - luminance > 0.5 ? '#333333' : '#FFFFFF' - end - - def calculate_luminance(r, g, b) - # Normalize RGB values to the range [0, 1] - r_norm = r / 255.0 - g_norm = g / 255.0 - b_norm = b / 255.0 - - # Calculate luminance using the formula - 0.2126 * r_norm + 0.7152 * g_norm + 0.0722 * b_norm - end # rubocop:enable Layout/LineLength end From 785b2478682ded0d5ddef06497d5c4deff860fb5 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 19 Sep 2024 16:38:21 +0200 Subject: [PATCH 7/7] remove border colour variables and calculate them based on the background --- app/views/custom_styles/_inline_css.erb | 14 ++++++++------ lib/open_project/custom_styles/design.rb | 4 +--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/views/custom_styles/_inline_css.erb b/app/views/custom_styles/_inline_css.erb index c281254e4eaf..fe6b3ddd015f 100644 --- a/app/views/custom_styles/_inline_css.erb +++ b/app/views/custom_styles/_inline_css.erb @@ -31,17 +31,22 @@ See COPYRIGHT and LICENSE files for more details. :root { <% DesignColor.overwritten.each do |design_color| %> --<%= design_color.variable %>: <%= design_color.hexcode %>; - <% if design_color.variable == "header-border-bottom-color" %> - --header-border-bottom-width: 1px; - <% end %> <% if design_color.variable == "header-bg-color" %> --header-item-font-color: <%= design_color.contrasting_font_color %>; + <% if design_color.bright? %> + --header-border-bottom-width: 1px; + --header-border-bottom-color: #d0d7de; + <% end %> <% end %> <% if design_color.variable == "header-item-bg-hover-color" %> --header-item-font-hover-color: <%= design_color.contrasting_font_color %>; <% end %> <% if design_color.variable == "main-menu-bg-color" %> --main-menu-font-color: <%= design_color.contrasting_font_color %>; + <% if design_color.bright? %> + --main-menu-border-width: 1px; + --main-menu-border-color: #d0d7de; + <% end %> <% end %> <% if design_color.variable == "main-menu-bg-selected-background" %> --main-menu-selected-font-color: <%= design_color.contrasting_font_color %>; @@ -49,9 +54,6 @@ See COPYRIGHT and LICENSE files for more details. <% if design_color.variable == "main-menu-bg-hover-background" %> --main-menu-hover-font-color: <%= design_color.contrasting_font_color %>; <% end %> - <% if design_color.variable == "main-menu-border-color" %> - --main-menu-border-width: 1px; - <% end %> <% if design_color.variable == "primary-button-color" %> --primary-button-color--major1: <%= design_color.darken 0.18 %>; --primary-button-color--minor1: <%= design_color.lighten 0.8 %>; diff --git a/lib/open_project/custom_styles/design.rb b/lib/open_project/custom_styles/design.rb index f55ae6a37d6a..28f2dc955670 100644 --- a/lib/open_project/custom_styles/design.rb +++ b/lib/open_project/custom_styles/design.rb @@ -72,11 +72,9 @@ def customizable_variables accent-color header-bg-color header-item-bg-hover-color - header-border-bottom-color main-menu-bg-color main-menu-bg-selected-background - main-menu-bg-hover-background - main-menu-border-color) + main-menu-bg-hover-background) end end end