From 45afd23710c84112e0b30a72afddfe6b7fb3e434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Tur=C3=B3ci?= <64769322+mturoci@users.noreply.github.com> Date: Fri, 6 Oct 2023 13:23:44 +0200 Subject: [PATCH] chore: Use maximum available space in ui.inline instead of hardcoded constant. #1974 (#2152) --- py/examples/background_progress.py | 2 +- py/examples/form_visibility.py | 2 +- ui/src/form.tsx | 23 ++++++++++------------- ui/src/header.tsx | 12 ++++++++---- website/widgets/form/inline.md | 7 ++++++- 5 files changed, 26 insertions(+), 20 deletions(-) diff --git a/py/examples/background_progress.py b/py/examples/background_progress.py index f4afb75bcf..dd9fc07a23 100644 --- a/py/examples/background_progress.py +++ b/py/examples/background_progress.py @@ -44,7 +44,7 @@ async def serve(q: Q): # Unimportant, draw initial UI. if not q.client.initialized: q.page['form'] = ui.form_card(box='1 1 3 2', items=[ - ui.inline([ + ui.buttons([ ui.button(name='start_job', label='Start job'), ui.button(name='cancel', label='Cancel') ]), diff --git a/py/examples/form_visibility.py b/py/examples/form_visibility.py index 02a592a666..ab36ecb51e 100644 --- a/py/examples/form_visibility.py +++ b/py/examples/form_visibility.py @@ -12,7 +12,7 @@ async def serve(q: Q): ui.text_l(name='text_l', content='Second text'), ui.text_m(name='text_m', content='Third text'), ui.text_s(name='text_s', content='Fourth text'), - ui.inline([ + ui.buttons([ ui.button(name='left1', label='Left1'), ui.button(name='left2', label='Left2'), ui.button(name='left3', label='Left3'), diff --git a/ui/src/form.tsx b/ui/src/form.tsx index e4d3dfb0bf..734b195fbb 100644 --- a/ui/src/form.tsx +++ b/ui/src/form.tsx @@ -238,26 +238,22 @@ type XComponentsProps = { inset?: B height?: S direction?: 'row' | 'column' + isInline?: B } -const - needsDefaultWidth = new Set(['date_picker', 'dropdown', 'slider', 'range_slider', 'table', 'visualization', 'vega_visualization']), - getComponentWidth = (componentKey: S, isInline: B) => isInline && needsDefaultWidth.has(componentKey) ? '400px' : 'auto' - export const - XComponents = ({ items, justify, align, inset, height, direction = 'column' }: XComponentsProps) => { + XComponents = ({ items, justify, align, inset, height, direction = 'column', isInline = false }: XComponentsProps) => { const components = items.map((m: any, i) => { const // All form items are wrapped by their component name (first and only prop of "m"). [componentKey] = Object.keys(m), - isInline = !!(justify || align), - { name, visible = true, width = getComponentWidth(componentKey, isInline), height } = m[componentKey], + { name, visible = true, width = 'auto', height } = m[componentKey], visibleStyles: React.CSSProperties = visible ? {} : { display: 'none' }, // TODO: Ugly, maybe use ui.inline's 'align' prop instead? - alignSelf = componentKey === 'links' ? 'flex-start' : undefined - - if (m[componentKey].width !== width) m[componentKey].width = width + alignSelf = componentKey === 'links' ? 'flex-start' : undefined, + // Components within inline, with no explicit width, and no explicit alignment in main direction should grow to fill the available space. + shouldParentGrow = isInline && width === 'auto' && !justify return (
@@ -286,11 +282,12 @@ export const XInline = ({ model: m }: { model: Inline }) => ( ) diff --git a/ui/src/header.tsx b/ui/src/header.tsx index eec70ee975..5eea8924c6 100644 --- a/ui/src/header.tsx +++ b/ui/src/header.tsx @@ -16,13 +16,13 @@ import * as Fluent from '@fluentui/react' import { B, Box, box, Model, S } from 'h2o-wave' import React from 'react' import { stylesheet } from 'typestyle' -import { Component, XInline } from './form' +import { Component, XComponents } from './form' import { CardEffect, cards, getEffectClass, toCardEffect } from './layout' import { NavGroup, XNav } from './nav' +import { Z_INDEX } from './parts/styleConstants' import { centerMixin, clas, cssVar, important, padding, px } from './theme' import { Command } from './toolbar' import { bond } from './ui' -import { Z_INDEX } from './parts/styleConstants' const css = stylesheet({ card: { @@ -141,8 +141,12 @@ export const View = bond(({ name, state, changed }: Model{subtitle}} - {secondary_items &&
} - {items &&
} + {secondary_items &&
} + {items && ( +
+ +
+ )} {nav && } ) diff --git a/website/widgets/form/inline.md b/website/widgets/form/inline.md index 41004ad5c2..5081378fc0 100644 --- a/website/widgets/form/inline.md +++ b/website/widgets/form/inline.md @@ -21,6 +21,8 @@ q.page['form'] = ui.form_card( ) ``` +All components will try to take all the available space by default. This behavior can be controlled by specifying `width` and `height` component properties explicitly. + Check the full API at [ui.inline](/docs/api/ui#inline). ## Horizontal alignment (`justify`) @@ -71,7 +73,7 @@ It's also possible to specify `1` to fill the remaining card space. Useful for d ```py q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[ ui.inline( - items=[ui.text('I am in the perfect center!')], + items=[ui.text('I am in the perfect center!')], justify='center', align='center', height='1' @@ -93,6 +95,7 @@ q.page['example'] = ui.form_card(box='1 1 -1 3', items=[ items=[ ui.inline( direction='column', + align='center', items=[ ui.text_l(content='Sub title 1'), ui.text(content='Lorem ipsum dolor sit amet'), @@ -100,6 +103,7 @@ q.page['example'] = ui.form_card(box='1 1 -1 3', items=[ ), ui.inline( direction='column', + align='center', items=[ ui.text_l(content='Sub title 2'), ui.text(content='Lorem ipsum dolor sit amet'), @@ -107,6 +111,7 @@ q.page['example'] = ui.form_card(box='1 1 -1 3', items=[ ), ui.inline( direction='column', + align='center', items=[ ui.text_l(content='Sub title 3'), ui.text(content='Lorem ipsum dolor sit amet'),