diff --git a/testgen/ui/assets/style.css b/testgen/ui/assets/style.css index 1a1d86f..184a8c6 100644 --- a/testgen/ui/assets/style.css +++ b/testgen/ui/assets/style.css @@ -74,7 +74,7 @@ div[data-testid="stVerticalBlock"] { gap: 0.5rem; } -div[data-testid="collapsedControl"] { +div[data-testid="stSidebarCollapsedControl"] { top: 0.5rem; } /* */ @@ -166,22 +166,22 @@ button[title="Show password text"] { background-color: var(--dk-card-background); } -[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] { +div[data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] { width: 100%; flex-direction: row; } -[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"], -[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"] > div[data-testid] { +div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"], +div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"] > div[data-testid] { width: auto !important; max-height: 40px; } -[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-start) [data-testid="stVerticalBlock"] { +div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-start) [data-testid="stVerticalBlock"] { justify-content: flex-start; } -[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-end) [data-testid="stVerticalBlock"] { +div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-end) [data-testid="stVerticalBlock"] { justify-content: flex-end; } diff --git a/testgen/ui/components/frontend/js/components/button.js b/testgen/ui/components/frontend/js/components/button.js index a5ce8e8..a19d960 100644 --- a/testgen/ui/components/frontend/js/components/button.js +++ b/testgen/ui/components/frontend/js/components/button.js @@ -7,6 +7,7 @@ * @property {(string|null)} tooltip * @property {(string|null)} tooltipPosition * @property {(Function|null)} onclick + * @property {(bool)} disabled * @property {string?} style */ import { enforceElementWidth } from '../utils.js'; @@ -45,6 +46,7 @@ const Button = (/** @type Properties */ props) => { class: `tg-button tg-${props.type.val}-button ${props.type.val !== 'icon' && isIconOnly ? 'tg-icon-button' : ''}`, style: props.style?.val, onclick: onClickHandler, + disabled: !!props.disabled?.val, }, span({class: 'tg-button-focus-state-indicator'}, ''), props.icon ? i({class: 'material-symbols-rounded'}, props.icon) : undefined, @@ -118,6 +120,15 @@ button.tg-button:has(span) { padding: 8px 16px; } +button.tg-button:not(.tg-icon-button):has(span):has(i) { + padding-left: 8px; +} + +button.tg-button[disabled] { + color: var(--disabled-text-color); + cursor: not-allowed; +} + button.tg-button.tg-icon-button > i { font-size: 18px; } @@ -126,7 +137,7 @@ button.tg-button > i:has(+ span) { margin-right: 8px; } -button.tg-button:hover .tg-button-focus-state-indicator::before { +button.tg-button:hover:not([disabled]) .tg-button-focus-state-indicator::before { opacity: var(--button-hover-state-opacity); } `); diff --git a/testgen/ui/components/frontend/js/components/link.js b/testgen/ui/components/frontend/js/components/link.js index 17463d4..86e35cb 100644 --- a/testgen/ui/components/frontend/js/components/link.js +++ b/testgen/ui/components/frontend/js/components/link.js @@ -10,8 +10,10 @@ * @property {string?} right_icon * @property {number?} right_icon_size * @property {number?} height + * @property {number?} width * @property {string?} style */ +import { enforceElementWidth } from '../utils.js'; import van from '../van.min.js'; import { Streamlit } from '../streamlit.js'; @@ -19,6 +21,9 @@ const { a, div, i, span } = van.tags; const Link = (/** @type Properties */ props) => { Streamlit.setFrameHeight(props.height?.val || 24); + if (props.width?.val) { + enforceElementWidth(window.frameElement, props.width.val); + } if (!window.testgen.loadedStylesheets.link) { document.adoptedStyleSheets.push(stylesheet); diff --git a/testgen/ui/components/widgets/button.py b/testgen/ui/components/widgets/button.py index a78bc0d..4b0a2d0 100644 --- a/testgen/ui/components/widgets/button.py +++ b/testgen/ui/components/widgets/button.py @@ -13,6 +13,7 @@ def button( tooltip: str | None = None, tooltip_position: TooltipPosition = "left", on_click: typing.Callable[..., None] | None = None, + disabled: bool = False, style: str | None = None, key: str | None = None, ) -> typing.Any: @@ -25,7 +26,7 @@ def button( :param on_click: click handler for this button """ - props = {"type": type_} + props = {"type": type_, "disabled": disabled} if type_ != "icon": if not label: raise ValueError(f"A label is required for {type_} buttons") diff --git a/testgen/ui/components/widgets/link.py b/testgen/ui/components/widgets/link.py index 14511a8..7230edb 100644 --- a/testgen/ui/components/widgets/link.py +++ b/testgen/ui/components/widgets/link.py @@ -13,6 +13,7 @@ def link( right_icon: str | None = None, right_icon_size: float = 20.0, height: float | None = 21.0, + width: float | None = None, style: str | None = None, key: str = "testgen:link", ) -> None: @@ -32,6 +33,9 @@ def link( if style: props.update({"style": style}) + if width: + props.update({"width": width}) + clicked = component(id_="link", key=key, props=props) if clicked: Router().navigate(to=href, with_args=params)