aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/merchant-backoffice-ui/src/paths/settings/index.tsx64
-rw-r--r--packages/merchant-backoffice-ui/src/scss/main.scss14
-rw-r--r--packages/merchant-backoffice-ui/src/scss/toggle.scss51
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 />
+ &nbsp;
+ {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;
+}