[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] 01/02: small changes
|
From: |
gnunet |
|
Subject: |
[taler-merchant-backoffice] 01/02: small changes |
|
Date: |
Thu, 24 Jun 2021 16:24:10 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository merchant-backoffice.
commit 997bba54049f163b5a94e99aa7bed1f526334dbb
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Jun 24 11:22:47 2021 -0300
small changes
move tooltips to the right for the form fields
move pickers into a folder
some designs changes in product search form
---
packages/frontend/src/components/form/Input.tsx | 2 +-
packages/frontend/src/components/form/InputArray.tsx | 2 +-
packages/frontend/src/components/form/InputDate.tsx | 4 ++--
packages/frontend/src/components/form/InputDuration.tsx | 2 +-
packages/frontend/src/components/form/InputGroup.tsx | 2 +-
packages/frontend/src/components/form/InputImage.tsx | 6 +++---
packages/frontend/src/components/form/InputSearchProduct.tsx | 8 ++++----
packages/frontend/src/components/form/InputSecured.tsx | 2 +-
packages/frontend/src/components/form/InputSelector.tsx | 2 +-
packages/frontend/src/components/form/InputStock.tsx | 4 ++--
packages/frontend/src/components/form/InputWithAddon.tsx | 2 +-
packages/frontend/src/components/form/TextField.tsx | 2 +-
packages/frontend/src/components/{form => picker}/DatePicker.tsx | 0
.../frontend/src/components/{form => picker}/DurationPicker.scss | 0
.../src/components/{form => picker}/DurationPicker.stories.tsx | 0
.../frontend/src/components/{form => picker}/DurationPicker.tsx | 0
packages/frontend/src/components/product/InventoryProductForm.tsx | 4 ++--
.../frontend/src/components/product/NonInventoryProductForm.tsx | 2 +-
packages/frontend/src/scss/main.scss | 4 ++++
19 files changed, 26 insertions(+), 22 deletions(-)
diff --git a/packages/frontend/src/components/form/Input.tsx
b/packages/frontend/src/components/form/Input.tsx
index f7e0b5c..9a9691e 100644
--- 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
index 13800c7..211d995 100644
--- 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
index 614e44a..75f955f 100644
--- 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
index 76e9022..258858b 100644
--- 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
index 146b977..a4252f0 100644
--- 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
index 2f598b3..55a6b66 100644
--- 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
index f9f8f68..51f84fd 100644
--- 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
index 7f871c7..c9b0f43 100644
--- 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
index d787495..3e155d2 100644
--- 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
index a9200cd..158f441 100644
--- 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
index d2905df..a16ebc2 100644
--- 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
index 50ea26a..2579a27 100644
--- 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
similarity index 100%
rename from packages/frontend/src/components/form/DatePicker.tsx
rename to 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
similarity index 100%
rename from packages/frontend/src/components/form/DurationPicker.scss
rename to 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
similarity index 100%
rename from packages/frontend/src/components/form/DurationPicker.stories.tsx
rename to 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
similarity index 100%
rename from packages/frontend/src/components/form/DurationPicker.tsx
rename to 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
index 6f05f26..8f05c97 100644
--- 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
index 3ba4764..8bb1489 100644
--- 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
index 100cadc..d59a1db 100644
--- 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
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.