Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

82 modal animation #84

Merged
merged 4 commits into from
Nov 21, 2023
Merged

82 modal animation #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
beea61c
fix: add animation to modal
davidecarpini Nov 21, 2023
8440e79
fix: icons and animations
davidecarpini Nov 21, 2023
0393476
Merge branch 'main' into 82-modal-animation
davidecarpini Nov 21, 2023
d470537
test: add vi tests
davidecarpini Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/dapp-kit-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</head>
<body>
<vwk-connect-button-with-modal
mode="DARK"
mode="LIGHT"
></vwk-connect-button-with-modal>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/dapp-kit-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"scripts": {
"build": "tsup",
"clean": "rm -rf dist .turbo",
"dev": "parcel --no-cache index.html",
"dev": "rm -rf ../../.parcel-cache; parcel --no-cache index.html",
"format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
"lint": "tsc --noEmit && eslint src --ext .js,.jsx,.ts,.tsx",
"purge": "yarn clean && rm -rf node_modules",
Expand Down
9 changes: 9 additions & 0 deletions packages/dapp-kit-ui/src/assets/icons/check.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { html } from 'lit';

export const CheckSvg = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3496ff">
<path
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
/>
</svg>
`;
17 changes: 13 additions & 4 deletions packages/dapp-kit-ui/src/assets/icons/copy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
import { html, svg } from 'lit';

export const CopySvg = svg`
<path
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
<path d="M17.5 14H19C20.1046 14 21 13.1046 21 12V5C21 3.89543 20.1046 3 19 3H12C10.8954 3 10 3.89543 10 5V6.5M5 10H12C13.1046 10 14 10.8954 14 12V19C14 20.1046 13.1046 21 12 21H5C3.89543 21 3 20.1046 3 19V12C3 10.8954 3.89543 10 5 10Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
`;

export const LightCopySvg = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#777777">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="#777777"
fill="#00000000"
>
${CopySvg}
</svg>
`;
export const DarkCopySvg = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#999999">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="#999999"
fill="#00000000"
>
${CopySvg}
</svg>
`;
1 change: 1 addition & 0 deletions packages/dapp-kit-ui/src/assets/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './close';
export * from './chevron-left';
export * from './copy';
export * from './check';
53 changes: 48 additions & 5 deletions packages/dapp-kit-ui/src/components/base/vwk-base-modal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { TemplateResult } from 'lit';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { css, html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { Breakpoint, Colors } from '../../../constants';
import type { Theme, ThemeMode } from '../../../constants/theme';

Expand All @@ -17,11 +17,23 @@ export class Modal extends LitElement {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 1;
transition: opacity 0.3s;
}
.modal-container.hidden {
opacity: 0;
pointer-events: none;
}

.modal {
position: absolute;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: height 0.2s, opacity 0.3s;
overflow: hidden;
opacity: 1;
}
.modal-container.hidden .modal {
opacity: 0;
}

.modal.LIGHT {
Expand Down Expand Up @@ -55,6 +67,30 @@ export class Modal extends LitElement {
}
}
`;

changeHeightOnResize = (): void => {
if (!this.modalSubContainer) {
return;
}
this.modalHeight = this.modalSubContainer.clientHeight;
new ResizeObserver(() => {
this.modalHeight = this.modalSubContainer?.clientHeight ?? 0;
}).observe(this.modalSubContainer);
};

override connectedCallback(): void {
super.connectedCallback();
addEventListener('load', this.changeHeightOnResize);
}
override disconnectedCallback(): void {
super.disconnectedCallback();
window.removeEventListener('load', this.changeHeightOnResize);
}

@query('.modal-sub-container')
modalSubContainer?: Element;
@property()
modalHeight?: number;
@property({ type: Boolean })
open = false;
@property()
Expand All @@ -70,14 +106,21 @@ export class Modal extends LitElement {
};

override render(): TemplateResult {
if (!this.open) return html``;
return html`
<div class="modal-container" @click=${this.onClose}>
<div
class="modal-container ${!this.open ? 'hidden' : ''}"
@click=${this.onClose}
>
<div
class="modal ${this.mode} ${this.theme}"
@click=${this.stopPropagation}
style="height: ${this.modalHeight
? `${this.modalHeight}px`
: 'auto'}"
>
<slot></slot>
<div class="modal-sub-container">
<slot></slot>
</div>
</div>
</div>
`;
Expand Down
6 changes: 5 additions & 1 deletion packages/dapp-kit-ui/src/components/vwk-connect-button/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,17 @@ export class ConnectButton extends LitElement {
opacity: 0.9;
}

button:active {
opacity: 0.8;
}

button.LIGHT {
background-color: ${Colors.LightGrey};
color: ${Colors.Dark};
}

button.DARK {
background-color: ${Colors.Dark};
background-color: ${Colors.DarkGrey};
color: ${Colors.LightGrey};
}
`;
Expand Down
25 changes: 13 additions & 12 deletions packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
LightChevronLeftSvg,
LightCloseSvg,
} from '../../assets';
import { dispatchCustomEvent, subscribeToCustomEvent } from '../../utils';
import { subscribeToCustomEvent } from '../../utils';
import { DAppKit } from '../../client';
import type { Theme, ThemeMode } from '../../constants/theme';

Expand All @@ -19,7 +19,6 @@ export class ConnectModal extends LitElement {
static override styles = css`
.modal-container {
padding: 20px;
transition: width 5s, height 4s;
}

.modal-header {
Expand All @@ -32,7 +31,6 @@ export class ConnectModal extends LitElement {

.modal-body {
flex-direction: column;
transition: width 2s, height 4s;
}

.modal-footer {
Expand Down Expand Up @@ -126,6 +124,18 @@ export class ConnectModal extends LitElement {
@property({ type: Function })
onClose: () => void = () => nothing;

private onBack = (): void => {
this.walletConnectQRcode = undefined;
};

private handleClose = (): void => {
// this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal
setTimeout(() => {
this.onBack();
}, 500);
this.onClose();
};

override render(): TemplateResult {
return html`
<vwk-fonts></vwk-fonts>
Expand Down Expand Up @@ -180,15 +190,6 @@ export class ConnectModal extends LitElement {
</vwk-base-modal>
`;
}

private onBack = (): void => {
dispatchCustomEvent('vwk-close-wc-modal', undefined);
};

private handleClose = (): void => {
this.onBack();
this.onClose();
};
}

declare global {
Expand Down
4 changes: 4 additions & 0 deletions packages/dapp-kit-ui/src/components/vwk-source-card/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ export class SourceCard extends LitElement {
}

.card:hover {
opacity: 0.9;
}

.card:active {
opacity: 0.8;
}

Expand Down
72 changes: 61 additions & 11 deletions packages/dapp-kit-ui/src/components/vwk-wallet-connect-qrcode/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ import type { TemplateResult } from 'lit';
import { css, html, LitElement, nothing, svg } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { Colors } from '../../constants';
import { DarkCopySvg, LightCopySvg, WalletConnectLogo } from '../../assets';
import {
CheckSvg,
DarkCopySvg,
LightCopySvg,
WalletConnectLogo,
} from '../../assets';
import { QrCodeUtil } from '../../utils';
import type { Theme, ThemeMode } from '../../constants/theme';

Expand All @@ -17,11 +22,11 @@ export class WalletConnectQrCode extends LitElement {
}

.qrcode-container {
margin: 20px auto 30px auto;
margin: 20px auto 20px auto;
background-color: ${Colors.White};
width: 280px;
padding: 10px;
border: 1px solid ${Colors.LightGrey};
border: 1px solid ${Colors.Grey};
border-radius: 20px;
display: flex;
justify-content: center;
Expand All @@ -35,6 +40,40 @@ export class WalletConnectQrCode extends LitElement {
object-fit: contain;
}

.separator {
display: flex;
align-items: center;
padding-bottom: 20px;
}

.line {
display: flex;
flex-grow: 1;
height: 1px;
}

.line.LIGHT {
background-color: ${Colors.Grey};
}

.line.DARK {
background-color: ${Colors.Grey};
}

.or {
font-family: 'Inter', sans-serif;
font-size: 14px;
padding: 0 12px;
}

.or.LIGHT {
color: ${Colors.Grey};
}

.or.DARK {
color: ${Colors.Grey};
}

button {
cursor: pointer;
display: flex;
Expand All @@ -52,7 +91,7 @@ export class WalletConnectQrCode extends LitElement {
}

button:active {
opacity: 0.7;
opacity: 0.8;
}

button.LIGHT {
Expand All @@ -66,8 +105,8 @@ export class WalletConnectQrCode extends LitElement {
}

.icon {
width: 16px;
height: 16px;
width: 20px;
height: 20px;
margin-right: 10px;
}
`;
Expand All @@ -78,24 +117,31 @@ export class WalletConnectQrCode extends LitElement {
theme: Theme = 'DEFAULT';
@property()
walletConnectQRcode?: string = undefined;
@property()
showCopiedIcon = false;

override render(): TemplateResult | typeof nothing {
let copyIcon = this.mode === 'LIGHT' ? LightCopySvg : DarkCopySvg;
if (this.showCopiedIcon) {
copyIcon = CheckSvg;
}
return this.walletConnectQRcode
? html`
<div class="qrcode-body">
<div class="qrcode-container">
${this.svgWCQrCode(this.walletConnectQRcode)}
<img src=${WalletConnectLogo} />
</div>
<div class="separator">
<div class="line ${this.mode} ${this.theme}"></div>
<div class="or ${this.mode} ${this.theme}">or</div>
<div class="line ${this.mode} ${this.theme}"></div>
</div>
<button
class="${this.mode} ${this.theme}"
@click=${this.onCopy}
>
<div class="icon">
${this.mode === 'LIGHT'
? LightCopySvg
: DarkCopySvg}
</div>
<div class="icon">${copyIcon}</div>
Copy to Clipboard
</button>
</div>
Expand All @@ -105,6 +151,10 @@ export class WalletConnectQrCode extends LitElement {

private onCopy = async (): Promise<void> => {
await navigator.clipboard.writeText(this.walletConnectQRcode || '');
this.showCopiedIcon = true;
setTimeout(() => {
this.showCopiedIcon = false;
}, 3000);
};

private svgWCQrCode(uri: string): TemplateResult {
Expand Down
Loading