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

clean up modals and remove deprecated UserInfo overlay

Browse source
This commit is contained in:
hippoz 2023-10-01 18:37:29 +03:00
parent 745e10b6bb
commit 3740d764a7
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
8 changed files with 18 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/PresenceSidebar.svelte
View file

@ -37,9 +37,6 @@
{#each $presenceStore as entry (entry.user.id)}
<button class="sidebar-button">
<UserView size={28} user={entry.user}></UserView>
{#if entry.bridgesTo || entry.privacy || entry.terms}
<button class="user-badge" on:click={ () => overlayStore.push(OverlayType.UserInfo, { presenceEntry: entry }) }>SERVICE</button>
{/if}
</button>
{/each}
{#if $smallViewport}

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

@ -60,7 +60,7 @@
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ loginInstead }" disabled="{ !buttonsEnabled }">Log in instead</button>
<button class="hyperlink-button padded" on:click="{ loginInstead }" disabled="{ !buttonsEnabled }">Log in instead</button>
<button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !buttonsEnabled }">Create</button>
</svelte:fragment>
</Modal>

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

@ -28,12 +28,6 @@
};
</script>
<style>
.delete-button {
color: var(--red-2);
}
</style>
<Modal {close} enter={save}>
<span class="h4" slot="header">Edit Message</span>
@ -47,7 +41,7 @@
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action delete-button" on:click="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
<button class="hyperlink-button padded button-danger" on:click="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
</svelte:fragment>
</Modal>

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

@ -61,7 +61,7 @@
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ createAccountInstead }" disabled="{ !buttonsEnabled }">Create an account instead</button>
<button class="hyperlink-button padded" on:click="{ createAccountInstead }" disabled="{ !buttonsEnabled }">Create an account instead</button>
<button class="button button-accent modal-primary-action" on:click="{ login }" disabled="{ !buttonsEnabled }">Log In</button>
</svelte:fragment>
</Modal>

6
frontend/src/components/overlays/OverlayProvider.svelte
View file

@ -9,7 +9,6 @@
import EditMessage from "./EditMessage.svelte";
import Settings from "./Settings.svelte";
import Prompt from "./Prompt.svelte";
import UserInfo from "./UserInfo.svelte";
import AddCommunity from "./AddCommunity.svelte";
import EditCommunity from "./EditCommunity.svelte";
@ -22,9 +21,8 @@
5: EditMessage,
6: Settings,
7: Prompt,
8: UserInfo,
9: AddCommunity,
10: EditCommunity,
8: AddCommunity,
9: EditCommunity,
};
</script>

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

@ -1,61 +0,0 @@
<script>
import { maybeModalFade, maybeModalScale } from "../../animations";
export let presenceEntry;
export let close = () => {};
</script>
<style>
.user-info-modal {
max-width: 560px;
}
.user-info-row {
display: flex;
align-items: flex-start;
margin-bottom: var(--space-sm);
}
.user-info-row .material-icons-outlined {
margin-right: var(--space-xs);
}
</style>
<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
<div class="modal user-info-modal" transition:maybeModalScale on:click|stopPropagation>
<div class="modal-header">
<span class="h4">{ presenceEntry.user.username }</span>
</div>
<div class="modal-content">
{#if presenceEntry.bridgesTo}
<div class="user-info-row">
<span class="material-icons-outlined">cloud_sync</span>
<span>This application may send messages and metadata to <b>{presenceEntry.bridgesTo}</b></span>
</div>
{/if}
{#if presenceEntry.privacy}
<div class="user-info-row">
<span class="material-icons-outlined">policy</span>
<span>Data accessible by this application is processed in accordance with their Privacy Policy: <b>{ presenceEntry.privacy }</b></span>
</div>
{/if}
{#if presenceEntry.terms}
<div class="user-info-row">
<span class="material-icons-outlined">gavel</span>
<span>The Terms of Service of this application can be found at: <b>{ presenceEntry.terms }</b></span>
</div>
{/if}
{#if presenceEntry.bridgesTo || presenceEntry.privacy || presenceEntry.terms}
<div class="user-info-row">
<span class="material-icons-outlined">shield</span>
<span>You may be able to opt out of the above</span>
</div>
{/if}
</div>
<div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
</div>
</div>
</div>

5
frontend/src/stores.js
View file

@ -401,9 +401,8 @@ export const OverlayType = {
EditMessage: 5,
Settings: 6,
Prompt: 7,
UserInfo: 8,
AddCommunity: 9,
EditCommunity: 10
AddCommunity: 8,
EditCommunity: 9
};
class OverlayStore extends Store {
constructor() {

18
frontend/src/styles/global.css
View file

@ -214,9 +214,12 @@ body {
}
.modal-footer {
display: flex;
align-items: center;
margin-top: auto;
padding: var(--space-norm);
background-color: var(--background-color-1);
padding-top: var(--space-xs);
background-color: transparent;
border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
@ -232,22 +235,17 @@ body {
}
.modal.positioned .modal-footer {
background-color: transparent;
padding-top: var(--space-xxs);
}
.modal-primary-action {
float: right;
margin-left: auto;
}
.modal-secondary-action {
float: left;
}
.modal-backdrop-opaque .modal .modal-footer {
background-color: var(--background-color-3);
}
@media screen and (max-width: 768px) {
.modal {
width: 100%;
@ -309,6 +307,12 @@ body {
font-size: var(--h6);
}
.hyperlink-button.padded {
padding: 0.85em;
padding-top: 0.65em;
padding-bottom: 0.65em;
}
.hyperlink-button:hover {
color: var(--foreground-color-0);
}