DEV: Experimenting with using built in core color palettes for the color picking component (#71)

This PR is the beginning of converting the color picker to use built in core color palettes. The `color_schemes` defined in `about.json` are created in core when the theme is imported, and we then show all user-selectable color palettes in this sidebar footer menu. An important caveat here is that all of the Horizon themes must be changed to `user_selectable` otherwise they will not show up in the color palette selector in the sidebar. When choosing a color palette that also has a corresponding dark color palette, *both* light mode and dark mode are correctly saved with the color palette(s) chosen, using the color palette cookie we already have in core. Anon users can also set a palette, which will be saved in a cookie. --------- Co-authored-by: Sérgio Saquetim <saquetim@discourse.org> Co-authored-by: Martin Brennan <martin@discourse.org> Co-authored-by: Osama Sayegh <asooomaasoooma90@gmail.com>
2025-03-30 22:28:28 -05:00
parent 0473f90cd9
commit b4e451e64b
14 changed files with 506 additions and 251 deletions
@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class UserColorPaletteSelector < PageObjects::Components::Base
+      def sidebar_footer_button_css
+        ".sidebar-footer-actions .user-color-palette-selector"
+      end
+
+      def palette_menu
+        PageObjects::Components::DMenu.new(find(sidebar_footer_button_css))
+      end
+
+      def open_palette_menu
+        palette_menu.expand
+      end
+
+      def has_no_palette_menu?
+        has_no_css?(".user-color-palette-selector-content")
+      end
+
+      def click_palette_menu_item(palette_name)
+        find(
+          ".user-color-palette-menu__content .user-color-palette-menu__item[data-color-palette='#{palette_name}']",
+        ).click
+      end
+
+      def has_selected_palette?(palette)
+        has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
+      end
+
+      def has_tertiary_color?(palette)
+        computed_color_hex =
+          page.evaluate_script(
+            "getComputedStyle(document.documentElement).getPropertyValue('--tertiary')",
+          )
+        computed_color_hex == "#" + palette.colors.find { |color| color.name == "tertiary" }.hex
+      end
+
+      def has_computed_color?(color)
+        computed_background_color =
+          page.evaluate_script(
+            "getComputedStyle(document.querySelector(\"li.sidebar-section-link-wrapper[data-list-item-name='everything'] .active\")).backgroundColor",
+          )
+        computed_background_color == color
+      end
+    end
+  end
+end