From 3caaea8b26dbe9a4913a0ca41b8db42910b8bf7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Sun, 13 Jun 2021 19:30:05 +0200 Subject: [PATCH] styling rest of page --- src/common/core/Validator/Validator.ts | 12 +- .../app-dropdown/AppDropdownElement.ts | 69 ++++--- src/components/app-form/AppFormElement.ts | 25 ++- src/components/app-link/AppLinkElement.ts | 9 +- src/components/app-menu/AppMenuElement.ts | 1 - .../app-pagination/AppPaginationElement.ts | 3 +- .../input-field/InputFieldElement.ts | 9 +- src/pages/home-page/HomePageElement.ts | 10 - .../TransactionCreateElement.ts | 1 - .../wallet-create/WalletCreateElement.ts | 1 - src/pages/wallet-list/WalletListElement.ts | 9 +- src/pages/wallet-page/WalletPageElement.ts | 6 +- src/styles/app-dropdown/app-dropdown.scss | 179 +++++++++--------- src/styles/app-form/app-form.scss | 50 +++-- src/styles/app-pagination/app-pagination.scss | 10 + src/styles/input-field/input-field.scss | 11 +- src/styles/layout/index.scss | 3 +- src/styles/layout/initial-layout.scss | 5 + src/styles/main.scss | 1 + src/styles/modal/modal.scss | 75 +++++--- src/styles/page/page.scss | 8 +- src/styles/wallet-header/wallet-header.scss | 11 ++ src/styles/wallet-list/index.scss | 1 + src/styles/wallet-list/wallet-list.scss | 9 + 24 files changed, 318 insertions(+), 200 deletions(-) create mode 100644 src/styles/layout/initial-layout.scss create mode 100644 src/styles/wallet-list/index.scss create mode 100644 src/styles/wallet-list/wallet-list.scss diff --git a/src/common/core/Validator/Validator.ts b/src/common/core/Validator/Validator.ts index 45e5acd..381f503 100644 --- a/src/common/core/Validator/Validator.ts +++ b/src/common/core/Validator/Validator.ts @@ -12,7 +12,7 @@ class Validator { } get name() { - return this.input?.name; + return this.input?.label ? this.input?.label : this.input?.name; } get error() { @@ -69,13 +69,17 @@ class Validator { } } if (!valid) { - const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString())); - this.error = ruleArray ? validRule?.[1]?.replaceAll('{- name}', firstUpper(this.name?.toString())) : error; + const error = ruleArray + ? validRule?.[1]?.replaceAll('{- name}', firstUpper(this.name?.toString())) + : validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString())); + if (error) { + this.error = error; + } } return valid; }); const _return = validArr?.includes(false); - if (_return) { + if (!_return) { this.error = null; } this.valid = !_return; diff --git a/src/components/app-dropdown/AppDropdownElement.ts b/src/components/app-dropdown/AppDropdownElement.ts index d8b5430..c560526 100644 --- a/src/components/app-dropdown/AppDropdownElement.ts +++ b/src/components/app-dropdown/AppDropdownElement.ts @@ -143,6 +143,10 @@ class AppDropdownElement extends BaseComponentElement { setOpen = (isOpen) => { this.isOpen = isOpen; + if (!isOpen) { + this.validate(); + this.update(); + } }; openDropdown = (e?) => { @@ -152,6 +156,7 @@ class AppDropdownElement extends BaseComponentElement { closeDropdown = (e?) => { if (e?.target?.closest('app-dropdown')?.randId == this.randId) return; + if (!this.isOpen) return; this.setOpen(false); }; @@ -166,8 +171,8 @@ class AppDropdownElement extends BaseComponentElement { itemSelected = (e) => { const value = (e.target as HTMLSpanElement).getAttribute('data-value'); - this.setOpen(false); this.setValue(value); + this.setOpen(false); this.appForm?.inputChange(e); }; @@ -179,6 +184,20 @@ class AppDropdownElement extends BaseComponentElement { render = () => { const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this; + const renderMessage = (label: string) => { + if (label) { + return html``; + } + return html``; + }; + + const renderError = (error: string) => { + if (error) { + return html`
${error}
`; + } + return html``; + }; + const renderItem = (item) => { return html`
  • -