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

turn most modals into inline modals

Browse source
This commit is contained in:
hippoz 2023-10-01 18:22:30 +03:00
parent b1a4622151
commit 745e10b6bb
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
24 changed files with 364 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/ChannelTopBar.svelte
View file

@ -30,7 +30,7 @@
<span class="unread-indicator">{$totalUnreadsStore}</span>
{/if}
<span class="material-icons-outlined" class:tag-icon-has-sidebar-button="{ !$showSidebar }" class:has-unreads="{ $totalUnreadsStore > 0 }">tag</span>
<span class="text-small top-bar-heading accent" on:click="{ () => overlayStore.push(OverlayType.EditChannel, {channel}) }">{ channel.name }</span>
<span class="text-small top-bar-heading accent" on:click|stopPropagation="{ ({ pageX, pageY }) => overlayStore.pushAbsolute(OverlayType.EditChannel, pageX, pageY, {channel}) }">{ channel.name }</span>
<div class="right-buttons">
<button class="icon-button" on:click="{ () => showPresenceSidebar.set(!showPresenceSidebar.value) }" aria-label="Toggle user list">
<span class="material-icons-outlined">people</span>

16
frontend/src/components/ChipBar.svelte
View file

@ -9,14 +9,14 @@
onSelect(selectedOptionId);
}
const optionClick = (option) => {
const optionClick = (option, event) => {
if (option) {
if (doHighlight) {
selectedOptionId = option.id;
}
onSelect(selectedOptionId);
if (option.handle) {
option.handle();
option.handle(event);
}
}
};
@ -45,6 +45,12 @@
font-weight: 500;
}
.smaller button {
font-size: 0.85em;
background-color: transparent;
border: 1px solid var(--background-color-3);
}
button:hover {
background-color: var(--background-color-3);
}
@ -65,17 +71,13 @@
.has-text .material-icons-outlined {
margin-right: var(--space-xxs);
}
.smaller button {
font-size: 0.85em;
}
</style>
<div class:smaller={smaller}>
{#each options as option (option.id)}
{#if !option.hidden}
<button class="button" class:selected={ selectedOptionId === option.id } class:has-text={!!option.text} on:click={ optionClick(option) }>
<button class="button" class:selected={ selectedOptionId === option.id } class:has-text={!!option.text} on:click|stopPropagation="{ e => optionClick(option, e) }">
{#if option.icon}
<span class="material-icons-outlined">{ option.icon }</span>
{/if}

54
frontend/src/components/EditableText.svelte Normal file
View file

@ -0,0 +1,54 @@
<script>
export let value = "";
export let fieldName = "Text";
export let onSave = (_) => {};
export let disabled = false;
let showEditButton = false;
let currentValue = value;
$: showEditButton = (value !== currentValue);
</script>
<style>
input {
display: block;
font-size: var(--h4);
line-height: inherit;
background-color: transparent;
border-radius: var(--radius-xs);
color: currentColor;
padding: var(--space-xxs);
outline: none;
border: none;
flex: 1;
min-width: 20ch;
}
input:focus-visible {
outline: 1px solid var(--background-color-3);
}
div {
display: flex;
align-items: center;
width: 100%;
}
.icon-button {
margin-left: var(--space-xxs);
}
</style>
<div>
<input bind:value={ currentValue } type="text" name="{ fieldName }" disabled={ disabled }>
{#if !disabled && showEditButton}
<button class="icon-button material-icons-outlined" on:click="{ () => onSave(currentValue) }" aria-label="Save">
edit
</button>
<button class="icon-button material-icons-outlined" on:click="{ () => currentValue = value }" aria-label="Reset">
refresh
</button>
{/if}
</div>

29
frontend/src/components/FetchedUserView.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { getGrantFor } from "../permissions";
import { methods, remoteCall, responseOk } from "../request";
import UserView from "./UserView.svelte";
export let userId;
export let capabilityType = 0;
export let capabilityResource = null;
export let showBadges = true;
let grant = 0;
let userInfoPromise = remoteCall(methods.getUser, userId).then(response => {
if (!responseOk(response)) {
throw new Error("Failed to get user info");
}
grant = capabilityType && capabilityResource ? getGrantFor(response.data, capabilityType, capabilityResource) : 0;
return response.data;
});
</script>
{#await userInfoPromise}
<span class="text-fg-3 text-bold text-small">Loading...</span>
{:then user}
<UserView size="28" {user} {grant} {showBadges} />
{:catch}
<span class="text-fg-3 text-bold text-small">Failed to load user info</span>
{/await}

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

@ -23,6 +23,10 @@
min-width: 248px;
max-width: 248px;
}
.sidebar-button {
color: var(--foreground-color-2);
}
</style>
<div class="sidebar-container" class:presence-sidebar-limited="{ !$smallViewport }" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">

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

@ -91,7 +91,7 @@
{/if}
</button>
{/each}
<button class="button" on:click={() => overlayStore.push(OverlayType.AddCommunity)}>
<button class="button" on:click|stopPropagation={({ pageX, pageY }) => overlayStore.pushAbsolute(OverlayType.AddCommunity, pageX, pageY)}>
<span class="material-icons-outlined">add</span>
</button>
<button class="button" on:click={() => overlayStore.push(OverlayType.Settings)}>
@ -109,11 +109,9 @@
{#if $unreadStore.get(channel.id)}
<div class="unread-indicator">{ $unreadStore.get(channel.id) }</div>
{/if}
{#if $userInfoStore && (channel.owner_id === $userInfoStore.id || $userInfoStore.is_superuser)}
<button class="icon-button" on:click|stopPropagation="{ () => overlayStore.push(OverlayType.EditChannel, { channel }) }" aria-label="Edit Channel">
<span class="material-icons-outlined">more_vert</span>
</button>
{/if}
<button class="icon-button" on:click|stopPropagation="{ ({ pageX, pageY }) => overlayStore.pushAbsolute(OverlayType.EditChannel, pageX, pageY, { channel }) }" aria-label="Edit Channel">
<span class="material-icons-outlined">more_vert</span>
</button>
</div>
</button>
{/each}

13
frontend/src/components/SidebarCommunity.svelte
View file

@ -1,4 +1,5 @@
<script>
import { CapabilityType, getGrantFor } from "../permissions";
import { avatarUrl } from "../storage";
import { OverlayType, overlayStore, userInfoStore } from "../stores";
import ChipBar from "./ChipBar.svelte";
@ -17,18 +18,18 @@
},
{
id: "EDIT_COMMUNITY",
icon: "edit",
hidden: !(!isUser && communityLike && $userInfoStore && communityLike.owner_id === $userInfoStore.id),
handle() {
overlayStore.push(OverlayType.EditCommunity, { community: communityLike });
icon: "more_vert",
hidden: isUser || !communityLike,
handle({ pageX, pageY }) {
overlayStore.pushAbsolute(OverlayType.EditCommunity, pageX, pageY, { community: communityLike });
}
},
{
id: "NEW_CHANNEL",
icon: "add",
hidden: (!$userInfoStore || !$userInfoStore.permissions.create_channel),
handle() {
overlayStore.push(OverlayType.CreateChannel, { community: isUser ? { id: -1 } : communityLike });
handle({ pageX, pageY }) {
overlayStore.pushAbsolute(OverlayType.CreateChannel, pageX, pageY, { community: isUser ? { id: -1 } : communityLike });
}
}
];

20
frontend/src/components/UserView.svelte
View file

@ -1,16 +1,20 @@
<script>
import { CapabilityGrant } from "../permissions";
import { avatarUrl } from "../storage";
export let user = null;
export let size = 32;
export let showBadges = true;
export let grant = CapabilityGrant.None;
</script>
<style>
div {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--h6);
font-weight: 600;
}
img {
@ -30,9 +34,19 @@
<div>
{#if user && user.avatar}
<img src={avatarUrl(user.avatar, size)} alt=" ">
<img src={avatarUrl(user.avatar, size)} width={size} height={size} alt=" ">
{:else}
<span class="material-icons-outlined circled-icon">alternate_email</span>
<span class="material-icons-outlined circled-icon" style="width: {size}px; height: {size}px;">alternate_email</span>
{/if}
<span class="username">{ user ? user.username : "" }</span>
{#if showBadges}
{#if user.is_superuser}
<span class="user-badge secondary">Superuser</span>
{/if}
{#if grant === CapabilityGrant.ResourceOwner}
<span class="user-badge secondary">Owner</span>
{:else if grant === CapabilityGrant.ResourceManager}
<span class="user-badge secondary">Manager</span>
{/if}
{/if}
</div>

4
frontend/src/components/overlays/AddCommunity.svelte
View file

@ -7,6 +7,7 @@
let createButtonEnabled = true;
let response;
export let close = () => {};
export let place = null;
const create = async () => {
createButtonEnabled = false;
@ -17,7 +18,7 @@
};
</script>
<Modal {close} enter={create}>
<Modal {place} {close} enter={create} showCloseButton={false}>
<span class="h4" slot="header">Create Community</span>
<svelte:fragment slot="content">
@ -30,7 +31,6 @@
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
<button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !createButtonEnabled }">Create</button>
</svelte:fragment>
</Modal>

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

@ -38,7 +38,7 @@
}
</style>
<Modal opaque close={loginInstead} {outroEnd} enter={create}>
<Modal opaque {outroEnd} enter={create} showCloseButton={false}>
<span class="h4" slot="header">Create an Account</span>
<svelte:fragment slot="content">

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

@ -8,6 +8,7 @@
let response;
export let close = () => {};
export let community = null;
export let place = null;
const create = async () => {
createButtonEnabled = false;
@ -18,12 +19,14 @@
};
</script>
<Modal {close} enter={create}>
<Modal {place} {close} enter={create} showCloseButton={false}>
<svelte:fragment slot="header">
<span class="h4">Create Channel</span>
{#if community.id !== -1}
<span class="text-fg-3 text-small">in <span class="text-fg-2">{ community.name }</span></span>
{/if}
<div>
<span class="h4">Create Channel</span>
{#if community.id !== -1}
<span class="text-fg-3 text-small">in <span class="text-fg-2">{ community.name }</span></span>
{/if}
</div>
</svelte:fragment>
<svelte:fragment slot="content">
@ -36,7 +39,6 @@
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
<button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !createButtonEnabled }">Create</button>
</svelte:fragment>
</Modal>

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

@ -1,22 +1,26 @@
<script>
import { overlayStore } from "../../stores";
import { getMessageFromResponse, methods, remoteSignal, responseOk } from "../../request";
import { overlayStore, userInfoStore } from "../../stores";
import { getGrantFor, CapabilityType } from "../../permissions";
import { getMessageFromResponse, methods, remoteCall, remoteSignal, responseOk } from "../../request";
import Modal from "./Modal.svelte";
import RpcErrorDisplay from "../rpc/RpcErrorDisplay.svelte";
import EditableText from "../EditableText.svelte";
import FetchedUserView from "../FetchedUserView.svelte";
export let channel;
export let place = null;
let channelName = channel.name;
let buttonsEnabled = true;
let response;
$: grant = getGrantFor($userInfoStore, CapabilityType.ManageChannel, channel);
export let close = () => {};
const save = async () => {
const save = async (newName) => {
buttonsEnabled = false;
response = await remoteSignal(methods.updateChannelName, channel.id, channelName);
response = await remoteSignal(methods.updateChannelName, channel.id, newName);
buttonsEnabled = true;
if (responseOk(response)) {
close();
channel.name = newName;
}
};
const deleteChannel = async () => {
@ -30,26 +34,26 @@
</script>
<style>
.delete-button {
color: var(--red-2);
.created-by {
margin-bottom: var(--space-md);
}
</style>
<Modal {close} enter={save}>
<span class="h4" slot="header">Edit Channel</span>
<Modal {close} {place} enter={save} showCloseButton={false}>
<svelte:fragment slot="header">
<EditableText slot="header" value="{ channel.name }" disabled={ !buttonsEnabled || !grant } onSave={ save }></EditableText>
</svelte:fragment>
<svelte:fragment slot="content">
<RpcErrorDisplay response={response} />
<RpcErrorDisplay validationIndex={1} response={response} />
<label class="input-label">
<span>Channel Name</span>
<input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
</label>
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
<button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }" disabled="{ !buttonsEnabled }">Delete</button>
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
</svelte:fragment>
<div class="created-by">
<FetchedUserView userId={ channel.owner_id } capabilityType={ CapabilityType.ManageChannel } capabilityResource={ channel } />
</div>
{#if grant}
<button class="hyperlink-button button-danger" on:click="{ deleteChannel }" disabled="{ !buttonsEnabled }">Delete</button>
{/if}
</svelte:fragment>
</Modal>

44
frontend/src/components/overlays/EditCommunity.svelte
View file

@ -1,22 +1,26 @@
<script>
import { overlayStore } from "../../stores";
import { getMessageFromResponse, methods, remoteSignal, responseOk } from "../../request";
import { overlayStore, userInfoStore } from "../../stores";
import { getGrantFor, CapabilityType } from "../../permissions";
import { getMessageFromResponse, methods, remoteCall, remoteSignal, responseOk } from "../../request";
import Modal from "./Modal.svelte";
import RpcErrorDisplay from "../rpc/RpcErrorDisplay.svelte";
import EditableText from "../EditableText.svelte";
import FetchedUserView from "../FetchedUserView.svelte";
export let community;
export let place = null;
let communityName = community.name;
let buttonsEnabled = true;
let response;
$: grant = getGrantFor($userInfoStore, CapabilityType.ManageCommunity, community);
export let close = () => {};
const save = async () => {
const save = async (newName) => {
buttonsEnabled = false;
response = await remoteSignal(methods.updateCommunityName, community.id, communityName);
response = await remoteSignal(methods.updateCommunityName, community.id, newName);
buttonsEnabled = true;
if (responseOk(response)) {
close();
community.name = newName;
}
};
const deleteCommunity = async () => {
@ -30,26 +34,26 @@
</script>
<style>
.delete-button {
color: var(--red-2);
.created-by {
margin-bottom: var(--space-md);
}
</style>
<Modal {close} enter={save}>
<span class="h4" slot="header">Edit Community</span>
<Modal {close} {place} enter={save} showCloseButton={false}>
<svelte:fragment slot="header">
<EditableText slot="header" value="{ community.name }" disabled={ !buttonsEnabled || !grant } onSave={ save }></EditableText>
</svelte:fragment>
<svelte:fragment slot="content">
<RpcErrorDisplay response={response} />
<RpcErrorDisplay validationIndex={1} response={response} />
<label class="input-label">
<span>Community Name</span>
<input class="input full-width" minlength="1" maxlength="32" bind:value={ communityName } />
</label>
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
<button class="button modal-secondary-action delete-button" on:click="{ deleteCommunity }" disabled="{ !buttonsEnabled }">Delete</button>
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
</svelte:fragment>
<div class="created-by">
<FetchedUserView userId={ community.owner_id } capabilityType={ CapabilityType.ManageCommunity } capabilityResource={ community } />
</div>
{#if grant}
<button class="hyperlink-button button-danger" on:click="{ deleteCommunity }" disabled="{ !buttonsEnabled }">Delete</button>
{/if}
</svelte:fragment>
</Modal>

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

@ -47,7 +47,6 @@
</svelte:fragment>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
<button class="button modal-secondary-action delete-button" on:click="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
</svelte:fragment>

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

@ -39,7 +39,7 @@
}
</style>
<Modal opaque close={createAccountInstead} {outroEnd} enter={login}>
<Modal opaque {outroEnd} enter={login} showCloseButton={false}>
<span class="h4" slot="header">Welcome back!</span>
<svelte:fragment slot="content">

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

@ -1,14 +1,19 @@
<script>
import { onMount } from "svelte";
import { maybeModalFade, maybeModalFadeIf, maybeModalScale } from "../../animations";
import { OverlayType, overlayStore } from "../../stores";
export let close = () => {};
export let enter = () => {};
export let outroEnd = () => {};
export let className = "";
export let opaque = false;
export let place = null;
export let showCloseButton = true;
let modal;
let blur = false;
$: backdropStyle = !!place ? `top: ${place.y || 0}px; left: ${place.x || 0}px;` : "";
const onKeydown = ({ code }) => {
if (code === "Enter") {
@ -31,14 +36,25 @@
});
</script>
<style>
.close-modal {
margin-left: auto;
}
</style>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div class="modal-backdrop" class:modal-backdrop-opaque={opaque} class:blur={blur} transition:maybeModalFadeIf="{{ _condition: !opaque }}" on:click="{ close }" on:keydown="{ onKeydown }" on:introend={backdropIntroEnd} on:outrostart={backdropOutroStart}>
<div bind:this={modal} role="alertdialog" tabindex="-1" aria-modal="true" class={className + " modal"} transition:maybeModalScale on:click|stopPropagation on:outroend={outroEnd}>
<div class="modal-backdrop" style="{backdropStyle}" class:positioned={!!place} class:modal-backdrop-opaque={opaque} class:blur={blur} transition:maybeModalFadeIf="{{ _condition: !opaque }}" on:click="{ close }" on:keydown="{ onKeydown }" on:introend={backdropIntroEnd} on:outrostart={backdropOutroStart}>
<div bind:this={modal} class:positioned={!!place} role="alertdialog" tabindex="-1" aria-modal="true" class={className + " modal"} transition:maybeModalScale on:click|stopPropagation on:outroend={outroEnd}>
{#if $$slots.header}
<div class="modal-header">
<slot name="header" />
{#if showCloseButton}
<button class="icon-button material-icons-outlined close-modal" on:click="{ close }" aria-label="Close">
close
</button>
{/if}
</div>
{/if}

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

@ -1,5 +1,5 @@
<script>
import { overlayStore } from "../../stores";
import { overlayStore, smallViewport } from "../../stores";
import EditChannel from "./EditChannel.svelte";
import CreateChannel from "./CreateChannel.svelte";
@ -29,5 +29,5 @@
</script>
{#each $overlayStore as overlay (overlay.id)}
<svelte:component this={ OverlayComponent[overlay.type] } {...overlay.props} />
<svelte:component this={ OverlayComponent[overlay.type] } {...overlay.props} place={ $smallViewport ? undefined : overlay.props.place } />
{/each}

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

@ -30,7 +30,6 @@
</label>
<svelte:fragment slot="footer">
<button class="button modal-secondary-action" on:click="{ closePrompt }">Cancel</button>
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Submit</button>
</svelte:fragment>
</Modal>

49
frontend/src/permissions.js Normal file
View file

@ -0,0 +1,49 @@
export const CapabilityGrant = {
None: 0,
ResourceOwner: 1,
ResourceManager: 2,
GlobalSuperuser: 3
};
export const CapabilityType = {
None: 0,
ManageChannel: 1,
ManageCommunity: 2,
ManageMessage: 3
};
export function getGrantFor(user, capability, resource) {
let resourceOwnerId = -1;
switch (capability) {
case CapabilityType.ManageChannel: {
resourceOwnerId = resource.owner_id;
break;
}
case CapabilityType.ManageCommunity: {
resourceOwnerId = resource.owner_id;
break;
}
case CapabilityType.ManageMessage: {
resourceOwnerId = resource.author_id;
break;
}
default: {
return CapabilityGrant.None;
}
}
if (user && user.id === resourceOwnerId) {
return CapabilityGrant.ResourceOwner;
}
if (user && user.is_superuser) {
return CapabilityGrant.GlobalSuperuser;
}
return CapabilityGrant.None;
}

1
frontend/src/request.js
View file

@ -10,6 +10,7 @@ export const methods = {
getUserSelf: withCacheable(method(102, true)),
promoteUserSelf: method(103, true),
putUserAvatar: method(104, true),
getUser: withCacheable(method(105, true)),
createChannel: method(200, true),
updateChannelName: method(201, true),
deleteChannel: method(202, true),

22
frontend/src/responsive.js
View file

@ -1,5 +1,5 @@
import { getItem } from "./storage";
import { showSidebar, smallViewport, theme, usesKeyboardNavigation } from "./stores";
import { showSidebar, smallViewport, theme, usesKeyboardNavigation, overlayStore } from "./stores";
function initViewportSizeHandler() {
const root = document.querySelector(':root');
@ -33,22 +33,30 @@ function updateTheme(themeName) {
classes.add(`theme--${themeName}`);
}
function initKeyboardNavigationDetection() {
export function initResponsiveHandlers() {
// Keyboard navigation detection
document.addEventListener("keydown", ({ key }) => {
if (key === "Tab") {
usesKeyboardNavigation.set(true);
}
});
document.addEventListener("click", e => {
const keyboardClickHandler = (e) => {
// screenX and screenY are 0 when a user presses enter for navigation
usesKeyboardNavigation.set(!e.screenX && !e.screenY);
});
}
};
const overlayClickHandler = () => {
overlayStore.closeAllAbsolute();
};
document.addEventListener("click", e => {
keyboardClickHandler(e);
overlayClickHandler();
});
export function initResponsiveHandlers() {
initViewportSizeHandler();
initKeyboardNavigationDetection();
const mediaQuery = window.matchMedia('(min-width: 768px)');

24
frontend/src/stores.js
View file

@ -1,5 +1,6 @@
import gateway, { GatewayEventType, GatewayPayloadType, GatewayPresenceStatus } from "./gateway";
import logger from "./logging";
import { CapabilityType, getGrantFor } from "./permissions";
import { getMessageFromResponse, methods, remoteCall, remoteSignal, responseOk } from "./request";
import { getItem, setItem } from "./storage";
@ -236,7 +237,7 @@ class MessageStore extends Store {
if (userInfoStore.value && message.content.includes("@" + userInfoStore.value.username)) {
message._mentions = true;
}
if (userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)) {
if (getGrantFor(userInfoStore.value, CapabilityType.ManageMessage, message)) {
message._editable = true;
}
if (previous && (message._createdAtDate.getTime() - previous._createdAtDate.getTime()) <= 100 * 1000 && message.author_id === previous.author_id && message._effectiveAuthor === previous._effectiveAuthor && message._viaBadge === previous._viaBadge) {
@ -409,10 +410,31 @@ class OverlayStore extends Store {
super([], "OverlayStore");
}
closeAllAbsolute() {
const toRemove = [];
for (let i = 0; i < this.value.length; i++) {
const e = this.value[i];
if (e.props && e.props.place) {
toRemove.push(e.id);
}
}
toRemove.forEach(id => this.popId(id));
}
isOverlayPresent() {
return !!this.value.length;
}
pushAbsolute(type, x=0, y=0, props={}) {
this.closeAllAbsolute();
return this.push(type, {
...props,
place: {
x, y
}
});
}
push(type, props={}) {
const id = Math.floor(Math.random() * 9999999);

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

@ -178,6 +178,15 @@ body {
backdrop-filter: blur(1.5px);
}
.modal-backdrop.positioned {
display: block;
width: fit-content;
height: fit-content;
background-color: transparent;
backdrop-filter: unset;
contain: content;
}
.modal-backdrop-opaque {
background-color: var(--background-color-1);
backdrop-filter: unset;
@ -193,6 +202,8 @@ body {
}
.modal-header {
display: flex;
align-items: center;
font-weight: 650;
padding: var(--space-md);
}
@ -210,6 +221,21 @@ body {
border-bottom-left-radius: var(--radius-lg);
}
.modal.positioned {
background-color: hsla(0, 0%, 8%, 85%);
backdrop-filter: blur(1.5px);
width: 325px;
}
.theme--light .modal.positioned {
background-color: var(--background-color-0);
}
.modal.positioned .modal-footer {
background-color: transparent;
padding-top: var(--space-xxs);
}
.modal-primary-action {
float: right;
}
@ -272,6 +298,21 @@ body {
/* button */
.hyperlink-button {
color: var(--foreground-color-1);
background: none;
border: none;
font: inherit;
user-select: none;
font-weight: 650;
cursor: pointer;
font-size: var(--h6);
}
.hyperlink-button:hover {
color: var(--foreground-color-0);
}
.button {
color: var(--foreground-color-1);
background: none;
@ -283,7 +324,7 @@ body {
border-radius: 9999px;
font: inherit;
user-select: none;
font-weight: 550;
font-weight: 600;
}
.button:hover {
@ -292,34 +333,25 @@ body {
.button-accent {
color: var(--colored-element-text-color);
background-color: var(--purple-2);
}
.button-accent:hover {
background-color: var(--purple-1);
}
.button-accent:disabled {
.button-accent:hover {
background-color: var(--purple-2);
}
.button-red {
color: var(--colored-element-text-color);
background-color: var(--red-2);
}
.button-red:hover {
background-color: var(--red-1);
}
.button-red:disabled {
background-color: var(--red-2);
.button-accent:disabled {
background-color: var(--purple-1);
}
.button-danger {
color: var(--red-2);
}
.button-danger:hover {
color: var(--red-1);
}
/* icon buttons */
.icon-button {
@ -531,7 +563,11 @@ body {
border-radius: 9999px;
font-size: x-small;
margin-left: var(--space-sm);
cursor: pointer;
}
.user-badge.secondary {
background-color: var(--background-color-1);
border: 1px solid var(--background-color-2);
}
/* util */

18
src/rpc/apis/users.ts
View file

@ -2,7 +2,7 @@ import { errors } from "../../errors";
import { query } from "../../database";
import { compare, hash } from "bcrypt";
import { getPublicUserObject, loginAttempt } from "../../auth";
import { RPCContext, bufferSlice, method, methodButWarningDoesNotAuthenticate, string, usernameRegex, withRegexp } from "./../rpc";
import { RPCContext, bufferSlice, method, methodButWarningDoesNotAuthenticate, string, uint, usernameRegex, withRegexp } from "./../rpc";
import sharp from "sharp";
import { randomBytes } from "crypto";
import { unlink } from "fs/promises";
@ -165,3 +165,19 @@ method(
return filenames;
}
);
method(
"getUser",
[uint("id", "ID of the user to get")],
async (_: User, id: number) => {
const getUserResult = await query("SELECT * FROM users WHERE id = $1", [id]);
if (!getUserResult) {
return errors.GOT_NO_DATABASE_DATA;
}
if (getUserResult.rowCount < 1) {
return errors.NOT_FOUND;
}
return getPublicUserObject(getUserResult.rows[0]);
}
);