commit 997bba54049f163b5a94e99aa7bed1f526334dbb parent 61f845b3dcd71b74a802b5e791ec1ea0d3c03c87 Author: Sebastian <sebasjm@gmail.com> Date: Thu, 24 Jun 2021 11:22:47 -0300 small changes move tooltips to the right for the form fields move pickers into a folder some designs changes in product search form Diffstat:
19 files changed, 27 insertions(+), 22 deletions(-)
diff --git a/packages/frontend/src/components/form/Input.tsx b/packages/frontend/src/components/form/Input.tsx @@ -44,7 +44,7 @@ export function Input<T>({ name, readonly, placeholder, tooltip, label, expand, <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/InputArray.tsx b/packages/frontend/src/components/form/InputArray.tsx @@ -47,7 +47,7 @@ export function InputArray<T>({ name, readonly, placeholder, tooltip, label, hel <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/InputDate.tsx b/packages/frontend/src/components/form/InputDate.tsx @@ -22,7 +22,7 @@ import { format } from "date-fns"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Translate, useTranslator } from "../../i18n"; -import { DatePicker } from "./DatePicker"; +import { DatePicker } from "../picker/DatePicker"; import { InputProps, useField } from "./useField"; export interface Props<T> extends InputProps<T> { @@ -53,7 +53,7 @@ export function InputDate<T>({ name, readonly, label, placeholder, help, tooltip <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/InputDuration.tsx b/packages/frontend/src/components/form/InputDuration.tsx @@ -23,7 +23,7 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Translate, useTranslator } from "../../i18n"; import { SimpleModal } from "../modal"; -import { DurationPicker } from "./DurationPicker"; +import { DurationPicker } from "../picker/DurationPicker"; import { InputProps, useField } from "./useField"; export interface Props<T> extends InputProps<T> { diff --git a/packages/frontend/src/components/form/InputGroup.tsx b/packages/frontend/src/components/form/InputGroup.tsx @@ -39,7 +39,7 @@ export function InputGroup<T>({ name, label, children, tooltip, alternative, ini <header class="card-header"> <p class="card-header-title"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} {group?.hasError && <span class="icon has-text-danger" data-tooltip={tooltip}> diff --git a/packages/frontend/src/components/form/InputImage.tsx b/packages/frontend/src/components/form/InputImage.tsx @@ -18,7 +18,7 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { ComponentChildren, h } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; import { useRef, useState } from "preact/hooks"; import emptyImage from "../../assets/empty.png"; import { Translate } from "../../i18n"; @@ -31,7 +31,7 @@ export interface Props<T> extends InputProps<T> { children?: ComponentChildren; } -export function InputImage<T>({ name, readonly, placeholder, tooltip, label, help, children, expand }: Props<keyof T>) { +export function InputImage<T>({ name, readonly, placeholder, tooltip, label, help, children, expand }: Props<keyof T>): VNode { const { error, value, onChange } = useField<T>(name); const image = useRef<HTMLInputElement>(null) @@ -42,7 +42,7 @@ export function InputImage<T>({ name, readonly, placeholder, tooltip, label, hel <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/InputSearchProduct.tsx b/packages/frontend/src/components/form/InputSearchProduct.tsx @@ -60,7 +60,7 @@ export function InputSearchProduct({ selected, onChange, products }: Props): VNo <p class="media-meta"><Translate>Product id</Translate>: <b>{selected.id}</b></p> <p><Translate>Description</Translate>: {selected.description}</p> <div class="buttons is-right mt-5"> - <button class="button" onClick={() => onChange(undefined)}>clear</button> + <button class="button is-info" onClick={() => onChange(undefined)}>clear</button> </div> </div> </div> @@ -71,9 +71,9 @@ export function InputSearchProduct({ selected, onChange, products }: Props): VNo <InputWithAddon<ProductSearch> name="name" - label={i18n`Name`} - tooltip={i18n`search products using description or id`} - addonBefore={<span class="icon" ><i class="mdi mdi-magnify" /></span>} + label={i18n`Product`} + tooltip={i18n`search products by it's description or id`} + addonAfter={<span class="icon" ><i class="mdi mdi-magnify" /></span>} > <div> <ProductList diff --git a/packages/frontend/src/components/form/InputSecured.tsx b/packages/frontend/src/components/form/InputSecured.tsx @@ -48,7 +48,7 @@ export function InputSecured<T>({ name, readonly, placeholder, tooltip, label, h <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/InputSelector.tsx b/packages/frontend/src/components/form/InputSelector.tsx @@ -39,7 +39,7 @@ export function InputSelector<T>({ name, readonly, expand, placeholder, tooltip, <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/InputStock.tsx b/packages/frontend/src/components/form/InputStock.tsx @@ -51,7 +51,7 @@ interface StockDelta { } -export function InputStock<T>({ name, readonly, placeholder, tooltip, label, help, alreadyExist }: Props<keyof T>) { +export function InputStock<T>({ name, tooltip, label, alreadyExist }: Props<keyof T>) { const { error, value, onChange } = useField<T>(name); const [errors, setErrors] = useState<FormErrors<Entity>>({}) @@ -79,7 +79,7 @@ export function InputStock<T>({ name, readonly, placeholder, tooltip, label, hel <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/InputWithAddon.tsx b/packages/frontend/src/components/form/InputWithAddon.tsx @@ -43,7 +43,7 @@ export function InputWithAddon<T>({ name, readonly, addonBefore, children, expan <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/TextField.tsx b/packages/frontend/src/components/form/TextField.tsx @@ -34,7 +34,7 @@ export function TextField<T>({ name, tooltip, label, expand, help, children, sid <div class="field-label is-normal"> <label class="label"> {label} - {tooltip && <span class="icon" data-tooltip={tooltip}> + {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> <i class="mdi mdi-information" /> </span>} </label> diff --git a/packages/frontend/src/components/form/DatePicker.tsx b/packages/frontend/src/components/picker/DatePicker.tsx diff --git a/packages/frontend/src/components/form/DurationPicker.scss b/packages/frontend/src/components/picker/DurationPicker.scss diff --git a/packages/frontend/src/components/form/DurationPicker.stories.tsx b/packages/frontend/src/components/picker/DurationPicker.stories.tsx diff --git a/packages/frontend/src/components/form/DurationPicker.tsx b/packages/frontend/src/components/picker/DurationPicker.tsx diff --git a/packages/frontend/src/components/product/InventoryProductForm.tsx b/packages/frontend/src/components/product/InventoryProductForm.tsx @@ -79,14 +79,14 @@ export function InventoryProductForm({ currentProducts, onAddProduct, inventory return <FormProvider<Form> errors={errors} object={state} valueHandler={setState}> <InputSearchProduct selected={state.product} onChange={(p) => setState(v => ({ ...v, product: p }))} products={inventory} /> { state.product && <div class="columns mt-5"> - <div class="column is-four-fifths"> + <div class="column is-two-thirds"> {!productWithInfiniteStock && <InputNumber<Form> name="quantity" label={i18n`Quantity`} tooltip={i18n`how many products will be added`} /> } </div> <div class="column"> <div class="buttons is-right"> - <button class="button is-success" onClick={submit}><Translate>Add</Translate></button> + <button class="button is-success" onClick={submit}><Translate>Add from inventory</Translate></button> </div> </div> </div> } diff --git a/packages/frontend/src/components/product/NonInventoryProductForm.tsx b/packages/frontend/src/components/product/NonInventoryProductForm.tsx @@ -64,7 +64,7 @@ export function NonInventoryProductFrom({ productToEdit, onAddProduct }: Props): return <Fragment> <div class="buttons"> - <button class="button is-success" onClick={() => setShowCreateProduct(true)} ><Translate>add custom product</Translate></button> + <button class="button is-success" data-tooltip={i18n`describe and add a product that is not in the inventory list`} onClick={() => setShowCreateProduct(true)} ><Translate>Add custom product</Translate></button> </div> {showCreateProduct && <div class="modal is-active"> <div class="modal-background " onClick={() => setShowCreateProduct(false)} /> diff --git a/packages/frontend/src/scss/main.scss b/packages/frontend/src/scss/main.scss @@ -175,3 +175,7 @@ input:read-only { span[data-tooltip] { border-bottom: none; } + +div[data-tooltip]::before { + position: absolute; +} +\ No newline at end of file