Improve server identity avatar preview

- server identity avatar preview now displays your current avatar, but desaturated and grayscale when no avatar is set

resolves #218
This commit is contained in:
brecert 2021-09-11 11:38:58 -04:00
parent a4138b52b0
commit 33d79beae6
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
3 changed files with 40 additions and 34 deletions

View file

@ -12,6 +12,7 @@ import Overline from "../../../components/ui/Overline";
import { FileUploader } from "../../revoltjs/FileUploads"; import { FileUploader } from "../../revoltjs/FileUploads";
import { useClient } from "../../revoltjs/RevoltClient"; import { useClient } from "../../revoltjs/RevoltClient";
import styled, { css } from "styled-components";
interface Props { interface Props {
server: Server; server: Server;
@ -58,16 +59,15 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
maxFileSize={4_000_000} maxFileSize={4_000_000}
onUpload={(avatar) => member.edit({ avatar })} onUpload={(avatar) => member.edit({ avatar })}
remove={() => member.edit({ remove: "Avatar" })} remove={() => member.edit({ remove: "Avatar" })}
defaultPreview={client.generateFileURL( defaultPreview={client.user?.generateAvatarURL({
member.avatar ?? undefined, max_side: 256,
{ max_side: 256 }, }, false)}
true,
)}
previewURL={client.generateFileURL( previewURL={client.generateFileURL(
member.avatar ?? undefined, member.avatar ?? undefined,
{ max_side: 256 }, { max_side: 256 },
true, true,
)} )}
desaturateDefault
/> />
</div> </div>
<div> <div>

View file

@ -42,6 +42,10 @@
filter: brightness(0.8); filter: brightness(0.8);
} }
&.desaturate {
filter: brightness(0.7) sepia(50%) grayscale(90%);
}
.edit { .edit {
opacity: 0; opacity: 0;
width: 100%; width: 100%;

View file

@ -16,35 +16,37 @@ import { useIntermediate } from "../intermediate/Intermediate";
import { AppContext } from "./RevoltClient"; import { AppContext } from "./RevoltClient";
import { takeError } from "./util"; import { takeError } from "./util";
type Props = { type BehaviourType =
maxFileSize: number;
remove: () => Promise<void>;
fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
} & (
| { behaviour: "ask"; onChange: (file: File) => void } | { behaviour: "ask"; onChange: (file: File) => void }
| { behaviour: "upload"; onUpload: (id: string) => Promise<void> } | { behaviour: "upload"; onUpload: (id: string) => Promise<void> }
| { | {
behaviour: "multi"; behaviour: "multi";
onChange: (files: File[]) => void; onChange: (files: File[]) => void;
append?: (files: File[]) => void; append?: (files: File[]) => void;
} }
) &
( type StyleType =
| { | {
style: "icon" | "banner"; style: "icon" | "banner";
defaultPreview?: string; width?: number;
previewURL?: string; height?: number;
width?: number; previewURL?: string;
height?: number; defaultPreview?: string;
} desaturateDefault?: boolean
| { }
style: "attachment"; | {
attached: boolean; style: "attachment";
uploading: boolean; attached: boolean;
cancel: () => void; uploading: boolean;
size?: number; cancel: () => void;
} size?: number;
); }
type Props = BehaviourType & StyleType & {
fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
maxFileSize: number;
remove: () => Promise<void>;
}
export async function uploadFile( export async function uploadFile(
autumnURL: string, autumnURL: string,
@ -224,14 +226,14 @@ export function FileUploader(props: Props) {
})} })}
data-uploading={uploading}> data-uploading={uploading}>
<div <div
className={styles.image} className={classNames(styles.image, props.desaturateDefault && previewURL == null && styles.desaturate)}
style={{ style={{
backgroundImage: backgroundImage:
style === "icon" style === "icon"
? `url('${previewURL ?? defaultPreview}')` ? `url('${previewURL ?? defaultPreview}')`
: previewURL : previewURL
? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')` ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
: "black", : "black",
width, width,
height, height,
}} }}