mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-26 07:22:10 -05:00
Merge pull request #223 from brecert/identity-fix
Improve server identity avatar preview
This commit is contained in:
commit
60c3a5ba11
3 changed files with 40 additions and 34 deletions
|
@ -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>
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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,
|
||||||
}}
|
}}
|
||||||
|
|
Loading…
Reference in a new issue