clean up modals and remove deprecated UserInfo overlay

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

View file

@ -37,9 +37,6 @@
{#each $presenceStore as entry (entry.user.id)} {#each $presenceStore as entry (entry.user.id)}
<button class="sidebar-button"> <button class="sidebar-button">
<UserView size={28} user={entry.user}></UserView> <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> </button>
{/each} {/each}
{#if $smallViewport} {#if $smallViewport}

View file

@ -60,7 +60,7 @@
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="footer"> <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> <button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !buttonsEnabled }">Create</button>
</svelte:fragment> </svelte:fragment>
</Modal> </Modal>

View file

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

View file

@ -61,7 +61,7 @@
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="footer"> <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> <button class="button button-accent modal-primary-action" on:click="{ login }" disabled="{ !buttonsEnabled }">Log In</button>
</svelte:fragment> </svelte:fragment>
</Modal> </Modal>

View file

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

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>

View file

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

View file

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