hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

major design improvements for modals

Browse source
This commit is contained in:
hippoz 2022-12-01 17:47:12 +02:00
parent 402807995c
commit 1e02b29465
Signed by: hippoz
GPG key ID: 7C52899193467641
10 changed files with 100 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/public/global.css
View file

@ -166,17 +166,24 @@ body {
flex-direction: column;
background-color: var(--background-color-1);
border-radius: var(--radius-lg);
padding: var(--space-md);
}
.modal-header {
margin-bottom: var(--space-md);
text-align: center;
font-weight: bold;
padding: var(--space-md);
}
.modal-content {
padding: var(--space-md);
padding-top: 0;
}
.modal-footer {
margin-top: auto;
padding-top: var(--space-lg);
padding: var(--space-md);
background-color: var(--background-color-0);
border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
.modal-primary-action {
@ -191,14 +198,18 @@ body {
.modal {
width: 100%;
border-radius: var(--radius-xl);
}
.modal, .modal-footer {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.modal-backdrop {
align-items: flex-end;
justify-content: center;
backdrop-filter: unset;
}
.modal-backdrop-opaque {
display: block;
}

4
frontend/src/components/Sidebar.svelte
View file

@ -66,10 +66,6 @@
}
.sidebar-channel-buttons {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-shrink: 0;
margin-left: auto;
}

24
frontend/src/components/overlays/CreateAccount.svelte
View file

@ -58,17 +58,19 @@
<span class="h4">Create an Account</span>
</div>
<label class="input-label">
Username
<input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
</label>
<div class="separator" />
<label class="input-label">
Password
<input class="input full-width" minlength="8" type="password" bind:value={ password } />
</label>
<div class="modal-content">
<label class="input-label">
Username
<input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
</label>
<div class="separator" />
<label class="input-label">
Password
<input class="input full-width" minlength="8" type="password" bind:value={ password } />
</label>
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ loginInstead }">Log in instead</button>

10
frontend/src/components/overlays/CreateChannel.svelte
View file

@ -38,10 +38,12 @@
<span class="h4">Create Channel</span>
</div>
<label class="input-label">
Channel Name
<input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
</label>
<div class="modal-content">
<label class="input-label">
Channel Name
<input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
</label>
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>

10
frontend/src/components/overlays/EditChannel.svelte
View file

@ -52,10 +52,12 @@
<span class="h4">Edit Channel</span>
</div>
<label class="input-label">
Channel Name
<input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
</label>
<div class="modal-content">
<label class="input-label">
Channel Name
<input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
</label>
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>

10
frontend/src/components/overlays/EditMessage.svelte
View file

@ -52,10 +52,12 @@
<span class="h4">Edit Message</span>
</div>
<label class="input-label">
Content
<input class="input full-width" minlength="1" bind:value={ messageContent } />
</label>
<div class="modal-content">
<label class="input-label">
Content
<input class="input full-width" minlength="1" bind:value={ messageContent } />
</label>
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>

20
frontend/src/components/overlays/Login.svelte
View file

@ -62,17 +62,19 @@
<span class="h4">Welcome back!</span>
</div>
<label class="input-label">
Username
<input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
</label>
<div class="modal-content">
<label class="input-label">
Username
<input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
</label>
<div class="separator" />
<div class="separator" />
<label class="input-label">
Password
<input class="input full-width" minlength="8" type="password" bind:value={ password } />
</label>
<label class="input-label">
Password
<input class="input full-width" minlength="8" type="password" bind:value={ password } />
</label>
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ createAccountInstead }">Create an account instead</button>

10
frontend/src/components/overlays/Prompt.svelte
View file

@ -39,10 +39,12 @@
<span class="h4">{ heading }</span>
</div>
<label class="input-label">
{ valueName }
<input class="input full-width" bind:value={ userInput } />
</label>
<div class="modal-content">
<label class="input-label">
{ valueName }
<input class="input full-width" bind:value={ userInput } />
</label>
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ closePrompt }">Cancel</button>

64
frontend/src/components/overlays/Settings.svelte
View file

@ -66,6 +66,12 @@
align-items: center;
justify-content: left;
padding: var(--space-md);
border-radius: var(--radius-lg);
border: 1px solid var(--background-color-2);
}
.selection-option {
border: 1px solid var(--background-color-2);
}
.selection-option.selected {
@ -74,13 +80,13 @@
.horizontal-selections {
display: grid;
gap: var(--space-md);
gap: var(--space-sm);
grid-template-columns: repeat(2, 1fr);
}
.large-settings {
min-width: 540px;
min-height: 420px;
padding-bottom: var(--space-xs);
}
.account-buttons {
@ -90,33 +96,35 @@
<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
<div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalScale on:click|stopPropagation>
<span class="input-label" on:click={ doDeveloper }>Account</span>
<div class="settings-card full-width">
<span class="material-icons-outlined">alternate_email</span>
<span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>
<div class="account-buttons">
<button class="button button-red" on:click="{ doLogout }">Log Out</button>
<div class="modal-header">
<span class="h4">Settings</span>
</div>
<div class="modal-content">
<span class="input-label" on:click={ doDeveloper }>Account</span>
<div class="settings-card full-width">
<span class="material-icons-outlined">alternate_email</span>
<span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>
<div class="account-buttons">
<button class="button button-red" on:click="{ doLogout }">Log Out</button>
</div>
</div>
<div class="separator" />
<span class="input-label">Theme</span>
<div class="horizontal-selections">
<button class="button selection-option full-width selected" class:selected="{ $theme === "dark" }" on:click="{ () => theme.set('dark') }">Dark</button>
<button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
</div>
<div class="separator" />
<span class="input-label">Animations</span>
<div class="horizontal-selections">
<button class="button selection-option full-width" class:selected="{ $doAnimations === true }" on:click="{ () => doAnimations.set(true) }">Enabled</button>
<button class="button selection-option full-width selected" class:selected="{ $doAnimations === false }" on:click="{ () => doAnimations.set(false) }">Disabled</button>
</div>
</div>
<div class="separator" />
<span class="input-label">Theme</span>
<div class="horizontal-selections">
<button class="button selection-option full-width selected" class:selected="{ $theme === "dark" }" on:click="{ () => theme.set('dark') }">Dark</button>
<button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
</div>
<div class="separator" />
<span class="input-label">Animations</span>
<div class="horizontal-selections">
<button class="button selection-option full-width selected" class:selected="{ $doAnimations === false }" on:click="{ () => doAnimations.set(false) }">Disabled</button>
<button class="button selection-option full-width" class:selected="{ $doAnimations === true }" on:click="{ () => doAnimations.set(true) }">Enabled</button>
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Close</button>
</div>
</div>
</div>

2
frontend/src/components/overlays/UserInfo.svelte
View file

@ -27,7 +27,7 @@
<span class="h4">{ presenceEntry.user.username }</span>
</div>
<div>
<div class="modal-content">
{#if presenceEntry.bridgesTo}
<div class="user-info-row">
<span class="material-icons-outlined">cloud_sync</span>