FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-11-11 07:41:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling rest of page

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-13 19:30:05 +02:00
parent 7596c832d7
commit 3caaea8b26
24 changed files with 318 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/app-dropdown/AppDropdownElement.ts
View File

@@ -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`<label app-action="click:app-dropdown#openDropdown">${label}${this.required ? ' (*)' : ''}</label>`;
}
return html``;
};
const renderError = (error: string) => {
if (error) {
return html`<div class="input-error"><span>${error}</span></div>`;
}
return html``;
};
const renderItem = (item) => {
return html` <li
class="dropdown-custom-listitem ${selectedItem?.[valuekey] == item[valuekey] ? '--selected' : ''}"
@@ -194,32 +213,30 @@ class AppDropdownElement extends BaseComponentElement {
};
return html`
<div>
<label>
${label ? html`<div>${label}</div>` : html``}
<div class="dropdown-custom">
<div class="dropdown-custom-top${isOpen ? ' --open' : ''}" app-action="click:app-dropdown#toggleDropdown">
<span class="dropdown-custom-fieldname">${selectedItem ? selectedItem[displaykey] : 'Select'}</span>
</div>
${isOpen
? html`
<div class="dropdown-custom-open" data-target="app-dropdown.dropdowncontainer">
<input
class="dropdown-custom-search"
type="text"
value="${searchPhrase || ''}"
app-action="input:app-dropdown#phraseChange"
autofocus
/>
<ul class="dropdown-custom-list">
${renderItems(items)}
</ul>
</div>
`
: html``}
<div class="app-dropdown">
${renderMessage(this.label)} ${renderError(this.error)}
<div class="dropdown-custom">
<div class="dropdown-custom-top${isOpen ? ' --open' : ''}" app-action="click:app-dropdown#toggleDropdown">
<span class="dropdown-custom-fieldname">${selectedItem ? selectedItem[displaykey] : 'Select'}</span>
</div>
${error ? html` <div class="h5 text-red">${errorMessage}</div>` : html``}
</label>
${isOpen
? html`
<div class="dropdown-custom-open" data-target="app-dropdown.dropdowncontainer">
<input
class="dropdown-custom-search"
type="text"
value="${searchPhrase || ''}"
id="${this.randId}"
app-action="input:app-dropdown#phraseChange"
autofocus
/>
<ul class="dropdown-custom-list">
${renderItems(items)}
</ul>
</div>
`
: html``}
</div>
</div>
`;
};

25
src/components/app-form/AppFormElement.ts
View File

@@ -115,9 +115,11 @@ class AppFormElement extends BaseComponentElement {
render = (): TemplateResult => {
const renderSubmit = (valid: boolean) => {
if (!valid) {
return html` <button type="submit" disabled>Submit</button> `;
return html`
<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>Submit</button>
`;
}
return html` <button type="submit">Submit</button> `;
return html` <button class="btn btn-squared btn-primary --submit" type="submit">Submit</button> `;
};
const renderError = (error: string) => {
if (error) {
@@ -127,15 +129,24 @@ class AppFormElement extends BaseComponentElement {
};
const renderCancel = (hasCancel: boolean) => {
if (hasCancel) {
return html`<button type="button" app-action="click:app-form#goBack">Cancel</button>`;
return html`<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
Cancel
</button>`;
}
return html``;
};
return html`<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
<slot data-target="app-form.innerSlot"></slot>
${renderError(this.error)}${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}
</form>`;
return html`
<div class="app-form">
<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
<slot data-target="app-form.innerSlot"></slot>
${renderError(this.error)}
<div class="form-buttons">
<div class="button-content">${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}</div>
</div>
</form>
</div>
`;
};
}

9
src/components/app-link/AppLinkElement.ts
View File

@@ -52,9 +52,14 @@ class AppLinkElement extends BaseComponentElement {
render = (): TemplateResult => {
return html`${this.disabled
? html`<a class="btn btn-link btn-disabled" data-target="app-link.main" style="color:grey">${this.title}</a>`
? html`<a
class="btn btn-link btn-disabled${this.className ? ` ${this.className}` : ''}"
data-target="app-link.main"
style="color:grey"
>${this.title}</a
>`
: html`<a
class="btn btn-link"
class="btn btn-link${this.className ? ` ${this.className}` : ''}"
data-target="app-link.main"
app-action="click:app-link#goTo"
href="${this.to}"

1
src/components/app-menu/AppMenuElement.ts
View File

@@ -75,7 +75,6 @@ class AppMenuElement extends BaseComponentElement {
this.appMain.closeModal();
} else {
this.appMain.createModal('wallet-create');
this.appMain.pushToast(null, 'Da');
}
};

3
src/components/app-pagination/AppPaginationElement.ts
View File

@@ -96,7 +96,6 @@ class AppPaginationElement extends BaseComponentElement {
render = (): TemplateResult => {
const { rpp, totalItems, page, items } = this;
console.log(items);
const renderItem = this.customRenderItem
? this.customRenderItem
@@ -139,7 +138,9 @@ class AppPaginationElement extends BaseComponentElement {
const pageRange = Math.ceil(totalItems / rpp);
return html`
<div class="paginate">
<span class="--total">${totalItems} Total Items</span>
<div class="--footer">
<span class="--pages">Page ${page} of ${pageRange}</span>
<button
class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
app-action="click:app-pagination#pageBack"

9
src/components/input-field/InputFieldElement.ts
View File

@@ -79,9 +79,9 @@ class InputFieldElement extends BaseComponentElement {
return html``;
};
const renderError = (displayError: boolean, error: string) => {
if (displayError) {
return html`<span>${error}</span>`;
const renderError = (error: string) => {
if (error) {
return html`<div class="input-error"><span>${error}</span></div>`;
}
return html``;
};
@@ -90,6 +90,7 @@ class InputFieldElement extends BaseComponentElement {
return html` <input
type="${this.type}"
data-target="input-field.inp"
id="${this.randId}"
app-action="
input:input-field#inputChange
blur:input-field#validateDisplay
@@ -98,7 +99,7 @@ class InputFieldElement extends BaseComponentElement {
};
return html`<div class="input-main" data-target="input-field.main">
${renderMessage(this.label)} ${renderInput(this.type)} ${renderError(this.displayError, this.error)}
${renderMessage(this.label)}${renderError(this.error)} ${renderInput(this.type)}
</div>`;
};
}