From e2dca5f136ecc95a85daf64106ee0643d1ceb8a7 Mon Sep 17 00:00:00 2001 From: stu Date: Wed, 8 Nov 2023 21:46:44 +0800 Subject: [PATCH 1/6] Start to implement active bg --- client_code/Tabs/__init__.py | 17 +++++++++++++++-- client_code/utils/_component_helpers.py | 10 +++++++--- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/client_code/Tabs/__init__.py b/client_code/Tabs/__init__.py index da800de8..654d579c 100644 --- a/client_code/Tabs/__init__.py +++ b/client_code/Tabs/__init__.py @@ -15,6 +15,7 @@ _get_color, _get_rgb, _html_injector, + _primary_color, _spacing_property, ) from ._anvil_designer import TabsTemplate @@ -65,8 +66,8 @@ text-overflow: ellipsis; white-space: nowrap; } -.tabs .tab a:focus,.tabs .tab a:focus.active { - background-color: rgb(var(--color), 0.2); +.tabs .tab a:focus,.tabs .tab a.active { + background-color: rgb(var(--active-bg)); outline: none } .tabs .tab a:hover,.tabs .tab a.active { @@ -87,6 +88,7 @@ "align": "left", "tab_titles": [], "active_tab_index": 0, + "active_background": f"{_get_rgb(_primary_color)},0.2", "spacing_above": "none", "spacing_below": "none", "foreground": "", @@ -140,6 +142,7 @@ def __init__(self, **properties): self._indicator = self._tabs_node.querySelector(".indicator") props = self._props = _defaults | properties + props["active_background"] = props["active_background"] or _primary_color # annoying font_size property if isinstance(props["font_size"], str) and props["font_size"].isdigit(): @@ -153,6 +156,7 @@ def __init__(self, **properties): "spacing_below": props["spacing_below"], "foreground": props["foreground"], "background": props["background"], + "active_background": props["active_background"], "role": props["role"], "visible": props["visible"], } @@ -235,6 +239,15 @@ def active_tab_index(self): def active_tab_index(self, index): self._set_indicator(index or 0) + @property + def active_background(self): + return self._props["active_background"] + + @active_background.setter + def active_background(self, value): + self._props["active_background"] = value + self._dom_node.style.setProperty("--active-bg", _get_rgb(value)) + @property def foreground(self): return self._props["foreground"] diff --git a/client_code/utils/_component_helpers.py b/client_code/utils/_component_helpers.py index b5e4f537..2c90b192 100644 --- a/client_code/utils/_component_helpers.py +++ b/client_code/utils/_component_helpers.py @@ -21,6 +21,8 @@ window.anvilExtras["injectedHtml"] = window.anvilExtras.get("injectedHtml", {}) _injectedHtml = window.anvilExtras["injectedHtml"] +_primary_color = None + class HTMLInjector: def _is_injected(self, text, type): @@ -107,14 +109,16 @@ def setter(self, value): return property(getter, setter, None, a_b) -_primary = _app.theme_colors.get("Primary 500", "#2196F3") +_primary_color = (window.document.querySelector("meta[name=theme-color]") or {}).get( + "content", "#2196F3" +) def _get_color(value): if not value: - return _primary + return _primary_color elif value.startswith("theme:"): - return _app.theme_colors.get(value.replace("theme:", ""), _primary) + return _app.theme_colors.get(value.replace("theme:", ""), _primary_color) else: return value From ea5ac7602330ede15221ae45e27e9f62e2f12864 Mon Sep 17 00:00:00 2001 From: stu Date: Wed, 8 Nov 2023 22:05:43 +0800 Subject: [PATCH 2/6] make active bg work --- client_code/Tabs/__init__.py | 13 ++++++++----- client_code/Tabs/form_template.yaml | 1 + 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/client_code/Tabs/__init__.py b/client_code/Tabs/__init__.py index 654d579c..8d5a16d8 100644 --- a/client_code/Tabs/__init__.py +++ b/client_code/Tabs/__init__.py @@ -66,14 +66,18 @@ text-overflow: ellipsis; white-space: nowrap; } -.tabs .tab a:focus,.tabs .tab a.active { - background-color: rgb(var(--active-bg)); +.tabs .tab a:focus,.tabs .tab a:focus.active { + --fallback-bg: var(--color),0.2; + background-color: rgb(var(--active-bg, var(--fallback-bg))); outline: none } .tabs .tab a:hover,.tabs .tab a.active { background-color: transparent; color: rgb(var(--color)); } +.tabs .tab a:hover,.tabs .tab a.active { + background-color: rgb(var(--active-bg)); +} .tabs .indicator { position: absolute; bottom: 0; @@ -88,7 +92,7 @@ "align": "left", "tab_titles": [], "active_tab_index": 0, - "active_background": f"{_get_rgb(_primary_color)},0.2", + "active_background": _primary_color, "spacing_above": "none", "spacing_below": "none", "foreground": "", @@ -142,7 +146,6 @@ def __init__(self, **properties): self._indicator = self._tabs_node.querySelector(".indicator") props = self._props = _defaults | properties - props["active_background"] = props["active_background"] or _primary_color # annoying font_size property if isinstance(props["font_size"], str) and props["font_size"].isdigit(): @@ -246,7 +249,7 @@ def active_background(self): @active_background.setter def active_background(self, value): self._props["active_background"] = value - self._dom_node.style.setProperty("--active-bg", _get_rgb(value)) + self._dom_node.style.setProperty("--active-bg", value and _get_rgb(value)) @property def foreground(self): diff --git a/client_code/Tabs/form_template.yaml b/client_code/Tabs/form_template.yaml index 38a95c8b..66a231c3 100644 --- a/client_code/Tabs/form_template.yaml +++ b/client_code/Tabs/form_template.yaml @@ -9,6 +9,7 @@ properties: important: true - {name: active_tab_index, type: number, default_value: 0, default_binding_prop: true, description: The current active tab, important: false} +- {name: active_background, type: color, default_value: '', important: true, group: appearance} - {name: role, type: string, default_value: null, description: This component works well with the card role. Place a card below or above the tabs component, group: appearance, important: true} - name: align From 54f82e307ad0d2cfd08b288fcc8a49a9a44eb7c9 Mon Sep 17 00:00:00 2001 From: stu Date: Wed, 8 Nov 2023 22:06:19 +0800 Subject: [PATCH 3/6] update docs --- docs/guides/components/tabs.rst | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/guides/components/tabs.rst b/docs/guides/components/tabs.rst index 278c2149..57c63b69 100644 --- a/docs/guides/components/tabs.rst +++ b/docs/guides/components/tabs.rst @@ -14,6 +14,10 @@ Properties Which tab should be active. +:active_tab_background: color + + the background of the active tab. + :foreground: color the color of the highlight and text. Defaults to ``"theme:Primary 500"`` From 6bd325cfc7a01db4617607e133856a48ff3652e3 Mon Sep 17 00:00:00 2001 From: stu Date: Wed, 8 Nov 2023 22:07:30 +0800 Subject: [PATCH 4/6] update change log --- CHANGELOG.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a1ae550c..b364d137 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,12 @@ +# Unreleased + +## Enhancements +- Tabs - adds active_background property + https://github.com/anvilistas/anvil-extras/issues/481 + # v2.5.2 25-Oct-2023 * storage - fix bug with deserializing - # v2.5.0 3-Oct-2023 ## New Features From 8b808644ebb52ca4aee0a89d4446662d6d0e4003 Mon Sep 17 00:00:00 2001 From: stu Date: Wed, 8 Nov 2023 22:09:02 +0800 Subject: [PATCH 5/6] remove debug color --- client_code/Tabs/__init__.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client_code/Tabs/__init__.py b/client_code/Tabs/__init__.py index 8d5a16d8..11a1ec23 100644 --- a/client_code/Tabs/__init__.py +++ b/client_code/Tabs/__init__.py @@ -15,7 +15,6 @@ _get_color, _get_rgb, _html_injector, - _primary_color, _spacing_property, ) from ._anvil_designer import TabsTemplate @@ -92,7 +91,7 @@ "align": "left", "tab_titles": [], "active_tab_index": 0, - "active_background": _primary_color, + "active_background": "", "spacing_above": "none", "spacing_below": "none", "foreground": "", From e3bf9fc0bd6be6beb07537b6f21f67bd20f71e66 Mon Sep 17 00:00:00 2001 From: stu Date: Wed, 8 Nov 2023 22:09:55 +0800 Subject: [PATCH 6/6] remove duplicate variable --- client_code/utils/_component_helpers.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/client_code/utils/_component_helpers.py b/client_code/utils/_component_helpers.py index 2c90b192..847fc06e 100644 --- a/client_code/utils/_component_helpers.py +++ b/client_code/utils/_component_helpers.py @@ -21,8 +21,6 @@ window.anvilExtras["injectedHtml"] = window.anvilExtras.get("injectedHtml", {}) _injectedHtml = window.anvilExtras["injectedHtml"] -_primary_color = None - class HTMLInjector: def _is_injected(self, text, type):