From 9899e2acea4894c8e6b424aa8719d84df8658b21 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 7 Sep 2023 11:32:35 +0200 Subject: [PATCH] border radius fix + scroll lock adjustment --- .../wui-loading-thumbnail.stories.ts | 7 ++-- .../scaffold/src/modal/w3m-modal/index.ts | 8 ++++- .../src/utils/w3m-connecting-widget/index.ts | 12 +++++-- packages/ui/src/assets/svg/all-wallets.ts | 32 +++---------------- .../components/wui-loading-thumbnail/index.ts | 26 +++++++++++++-- .../wui-loading-thumbnail/styles.ts | 2 -- .../src/composites/wui-wallet-image/index.ts | 6 +++- .../src/composites/wui-wallet-image/styles.ts | 10 +++++- packages/ui/src/utils/ThemeUtil.ts | 12 +++++++ 9 files changed, 77 insertions(+), 38 deletions(-) diff --git a/apps/gallery/stories/components/wui-loading-thumbnail.stories.ts b/apps/gallery/stories/components/wui-loading-thumbnail.stories.ts index f61dbf05db..0cc0173c82 100644 --- a/apps/gallery/stories/components/wui-loading-thumbnail.stories.ts +++ b/apps/gallery/stories/components/wui-loading-thumbnail.stories.ts @@ -6,9 +6,12 @@ import { html } from 'lit' type Component = Meta export default { - title: 'Components/wui-loading-thumbnail' + title: 'Components/wui-loading-thumbnail', + args: { + radius: 36 + } } as Component export const Default: Component = { - render: () => html` ` + render: args => html` ` } diff --git a/packages/scaffold/src/modal/w3m-modal/index.ts b/packages/scaffold/src/modal/w3m-modal/index.ts index 8e66d9ff17..65cec76765 100644 --- a/packages/scaffold/src/modal/w3m-modal/index.ts +++ b/packages/scaffold/src/modal/w3m-modal/index.ts @@ -80,6 +80,12 @@ export class W3mModal extends LitElement { } private onScrollLock() { + const { body } = document + const { innerHeight: viewportHeight } = window + const scrollHeight = body?.scrollHeight + + const scrollbarGutter = scrollHeight > viewportHeight ? 'scrollbar-gutter: stable;' : '' + const styleTag = document.createElement('style') styleTag.dataset['w3m'] = SCROLL_LOCK styleTag.textContent = ` @@ -87,7 +93,7 @@ export class W3mModal extends LitElement { touch-action: none; overflow: hidden; overscroll-behavior: contain; - scrollbar-gutter: stable; + ${scrollbarGutter} } ` document.head.appendChild(styleTag) diff --git a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts index 3bffbbf04a..620a39f614 100644 --- a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts +++ b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts @@ -3,7 +3,8 @@ import { ConnectionController, CoreHelperUtil, RouterController, - SnackController + SnackController, + ThemeController } from '@web3modal/core' import type { IconType } from '@web3modal/ui' import { LitElement, html } from 'lit' @@ -116,7 +117,7 @@ export class W3mConnectingWidget extends LitElement { - ${this.error ? null : html``} + ${this.error ? null : this.loaderTemplate()} ` + } + // -- Protected ----------------------------------------- // protected onCopyUri() { try { diff --git a/packages/ui/src/assets/svg/all-wallets.ts b/packages/ui/src/assets/svg/all-wallets.ts index 61299fec88..e32b164165 100644 --- a/packages/ui/src/assets/svg/all-wallets.ts +++ b/packages/ui/src/assets/svg/all-wallets.ts @@ -1,30 +1,8 @@ import { svg } from 'lit' -export const allWalletsSvg = svg` - - - - - - - - - - - - +export const allWalletsSvg = svg` + ` diff --git a/packages/ui/src/components/wui-loading-thumbnail/index.ts b/packages/ui/src/components/wui-loading-thumbnail/index.ts index 7d42a15420..d6de3c1500 100644 --- a/packages/ui/src/components/wui-loading-thumbnail/index.ts +++ b/packages/ui/src/components/wui-loading-thumbnail/index.ts @@ -1,5 +1,5 @@ import { html, LitElement } from 'lit' -import { customElement } from 'lit/decorators.js' +import { customElement, property } from 'lit/decorators.js' import { resetStyles } from '../../utils/ThemeUtil.js' import styles from './styles.js' @@ -7,11 +7,33 @@ import styles from './styles.js' export class WuiLoadingThumbnail extends LitElement { public static override styles = [resetStyles, styles] + // -- State & Properties -------------------------------- // + @property({ type: Number }) public radius = 36 + // -- Render -------------------------------------------- // public override render() { + return this.svgLoaderTemplate() + } + + private svgLoaderTemplate() { + const radius = this.radius > 50 ? 50 : this.radius + const standardValue = 36 + const radiusFactor = standardValue - radius + const dashArrayStart = 116 + radiusFactor + const dashArrayEnd = 245 + radiusFactor + const dashOffset = 360 + radiusFactor * 1.75 + return html` - + ` } diff --git a/packages/ui/src/components/wui-loading-thumbnail/styles.ts b/packages/ui/src/components/wui-loading-thumbnail/styles.ts index b291225f27..98d1ab1053 100644 --- a/packages/ui/src/components/wui-loading-thumbnail/styles.ts +++ b/packages/ui/src/components/wui-loading-thumbnail/styles.ts @@ -17,8 +17,6 @@ export default css` fill: none; stroke: var(--wui-color-accent-100); stroke-width: 4px; - stroke-dasharray: 116, 245; - stroke-dashoffset: 360; stroke-linecap: round; animation: dash 1s linear infinite; } diff --git a/packages/ui/src/composites/wui-wallet-image/index.ts b/packages/ui/src/composites/wui-wallet-image/index.ts index 9607e184be..6ec8b6275f 100644 --- a/packages/ui/src/composites/wui-wallet-image/index.ts +++ b/packages/ui/src/composites/wui-wallet-image/index.ts @@ -34,6 +34,10 @@ export class WuiWalletImage extends LitElement { --local-size: var(--wui-wallet-image-size-${this.size}); ` + if (this.walletIcon) { + this.dataset['walletIcon'] = this.walletIcon + } + return html` ${this.templateVisual()}` } @@ -43,7 +47,7 @@ export class WuiWalletImage extends LitElement { return html`` } else if (this.walletIcon) { return html`