diff options
Diffstat (limited to 'packages')
3 files changed, 123 insertions, 6 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx index 1d0b4128a..128450553 100644 --- a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx @@ -1,12 +1,74 @@ import { VNode, h } from "preact"; +import { LangSelector } from "../../components/menu/LangSelector.js"; +import { useLang, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { InputToggle } from "../../components/form/InputToggle.js"; +import { Settings, useSettings } from "../../hooks/useSettings.js"; +import { FormErrors, FormProvider } from "../../components/form/FormProvider.js"; +import { useState } from "preact/hooks"; + +function getBrowserLang(): string | undefined { + if (typeof window === "undefined") return undefined; + if (window.navigator.languages) return window.navigator.languages[0]; + if (window.navigator.language) return window.navigator.language; + return undefined; +} export function Settings(): VNode { + const { i18n } = useTranslationContext() + const borwserLang = getBrowserLang() + const { update } = useLang() + + const [value, updateValue] = useSettings() + const errors: FormErrors<Settings> = { + } + + function valueHandler(s: (d: Partial<Settings>) => Partial<Settings>): void { + const next = s(value) + updateValue("advanceOrderMode", next.advanceOrderMode ?? false) + } + return <div> <section class="section is-main-section"> <div class="columns"> <div class="column" /> <div class="column is-four-fifths"> - settings view + <div class="field is-horizontal"> + <div class="field-label is-normal"> + <label class="label" style={{ width: 200 }}> + <i18n.Translate>Language</i18n.Translate> + <span class="icon has-tooltip-right" data-tooltip={"Force language setting instance of taking the browser"}> + <i class="mdi mdi-information" /> + </span> + </label> + </div> + <div class="field has-addons"> + <LangSelector /> + + {borwserLang !== undefined && <button + data-tooltip={i18n.str`generate random secret key`} + class="button is-info mr-3" + onClick={(e) => { + update(borwserLang.substring(0, 2)) + }} + > + <i18n.Translate>Set default</i18n.Translate> + </button>} + </div> + </div> + <FormProvider<Settings> + name="settings" + errors={errors} + object={value} + valueHandler={valueHandler} + > + <InputToggle<Settings> + label={i18n.str`Advance order creation`} + tooltip={i18n.str`Shows more options in the order creation form`} + name="advanceOrderMode" + /> + </FormProvider> + + </div> <div class="column" /> </div> diff --git a/packages/merchant-backoffice-ui/src/scss/main.scss b/packages/merchant-backoffice-ui/src/scss/main.scss index ad698eb26..c4be8aa73 100644 --- a/packages/merchant-backoffice-ui/src/scss/main.scss +++ b/packages/merchant-backoffice-ui/src/scss/main.scss @@ -52,6 +52,8 @@ $tooltip-color: red; @import "../../node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css"; @import "../../node_modules/bulma-timeline/dist/css/bulma-timeline.min.css"; +@import "toggle"; + .notification { background-color: transparent; } @@ -82,7 +84,7 @@ $tooltip-color: red; pointer-events: none; } -.toast > .message { +.toast>.message { white-space: pre-wrap; opacity: 80%; } @@ -92,6 +94,7 @@ div { position: relative; pointer-events: none; opacity: 0.5; + &:after { // @include loader; position: absolute; @@ -104,7 +107,7 @@ div { } } -input[type="checkbox"]:indeterminate + .check { +input[type="checkbox"]:indeterminate+.check { background: red !important; } @@ -125,6 +128,7 @@ input[type="checkbox"]:indeterminate + .check { tr:hover .right-sticky { background-color: hsl(0, 0%, 80%); } + .table.is-striped tbody tr:nth-child(even):hover .right-sticky { background-color: hsl(0, 0%, 95%); } @@ -181,11 +185,11 @@ div[data-tooltip]::before { position: absolute; } -.modal-card-body > p { +.modal-card-body>p { padding: 1em; } -.modal-card-body > p.warning { +.modal-card-body>p.warning { background-color: #fffbdd; border: solid 1px #f2e9bf; -} +}
\ No newline at end of file diff --git a/packages/merchant-backoffice-ui/src/scss/toggle.scss b/packages/merchant-backoffice-ui/src/scss/toggle.scss new file mode 100644 index 000000000..24636da2f --- /dev/null +++ b/packages/merchant-backoffice-ui/src/scss/toggle.scss @@ -0,0 +1,51 @@ +$green: #56c080; + +.toggle { + cursor: pointer; + display: inline-block; +} +.toggle-switch { + display: inline-block; + background: #ccc; + border-radius: 16px; + width: 58px; + height: 32px; + position: relative; + vertical-align: middle; + transition: background 0.25s; + &:before, + &:after { + content: ""; + } + &:before { + display: block; + background: linear-gradient(to bottom, #fff 0%, #eee 100%); + border-radius: 50%; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); + width: 24px; + height: 24px; + position: absolute; + top: 4px; + left: 4px; + transition: left 0.25s; + } + .toggle:hover &:before { + background: linear-gradient(to bottom, #fff 0%, #fff 100%); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); + } + .toggle-checkbox:checked + & { + background: $green; + &:before { + left: 30px; + } + } +} +.toggle-checkbox { + position: absolute; + visibility: hidden; +} +.toggle-label { + margin-left: 5px; + position: relative; + top: 2px; +} |