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
No known key found for this signature in database
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; flex-direction: column;
background-color: var(--background-color-1); background-color: var(--background-color-1);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-md);
} }
.modal-header { .modal-header {
margin-bottom: var(--space-md); font-weight: bold;
text-align: center; padding: var(--space-md);
}
.modal-content {
padding: var(--space-md);
padding-top: 0;
} }
.modal-footer { .modal-footer {
margin-top: auto; 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 { .modal-primary-action {
@ -191,14 +198,18 @@ body {
.modal { .modal {
width: 100%; width: 100%;
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
}
.modal, .modal-footer {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.modal-backdrop { .modal-backdrop {
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
backdrop-filter: unset; backdrop-filter: unset;
} }
.modal-backdrop-opaque { .modal-backdrop-opaque {
display: block; display: block;
} }

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

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

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

@ -58,17 +58,19 @@
<span class="h4">Create an Account</span> <span class="h4">Create an Account</span>
</div> </div>
<label class="input-label"> <div class="modal-content">
Username <label class="input-label">
<input class="input full-width" minlength="1" maxlength="32" bind:value={ username } /> Username
</label> <input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
</label>
<div class="separator" /> <div class="separator" />
<label class="input-label"> <label class="input-label">
Password Password
<input class="input full-width" minlength="8" type="password" bind:value={ password } /> <input class="input full-width" minlength="8" type="password" bind:value={ password } />
</label> </label>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ loginInstead }">Log in instead</button> <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> <span class="h4">Create Channel</span>
</div> </div>
<label class="input-label"> <div class="modal-content">
Channel Name <label class="input-label">
<input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } /> Channel Name
</label> <input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
</label>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button> <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> <span class="h4">Edit Channel</span>
</div> </div>
<label class="input-label"> <div class="modal-content">
Channel Name <label class="input-label">
<input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } /> Channel Name
</label> <input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
</label>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button> <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> <span class="h4">Edit Message</span>
</div> </div>
<label class="input-label"> <div class="modal-content">
Content <label class="input-label">
<input class="input full-width" minlength="1" bind:value={ messageContent } /> Content
</label> <input class="input full-width" minlength="1" bind:value={ messageContent } />
</label>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button> <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> <span class="h4">Welcome back!</span>
</div> </div>
<label class="input-label"> <div class="modal-content">
Username <label class="input-label">
<input class="input full-width" minlength="1" maxlength="32" bind:value={ username } /> Username
</label> <input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
</label>
<div class="separator" /> <div class="separator" />
<label class="input-label"> <label class="input-label">
Password Password
<input class="input full-width" minlength="8" type="password" bind:value={ password } /> <input class="input full-width" minlength="8" type="password" bind:value={ password } />
</label> </label>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ createAccountInstead }">Create an account instead</button> <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> <span class="h4">{ heading }</span>
</div> </div>
<label class="input-label"> <div class="modal-content">
{ valueName } <label class="input-label">
<input class="input full-width" bind:value={ userInput } /> { valueName }
</label> <input class="input full-width" bind:value={ userInput } />
</label>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ closePrompt }">Cancel</button> <button class="button modal-secondary-action" on:click="{ closePrompt }">Cancel</button>

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

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

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

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