IRememberYou: Fix Styles
This commit is contained in:
thororen1234
parent
c63e7a17d4
commit
5404305e0a
2 changed files with 152 additions and 86 deletions
|
|
@ -4,12 +4,12 @@
|
|||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import "styles.css?managed";
|
||||
import "./styles.css";
|
||||
|
||||
import { DataStore } from "@api/index";
|
||||
import { addMessagePreSendListener, removeMessagePreSendListener } from "@api/MessageEvents";
|
||||
import { classNameFactory } from "@api/Styles";
|
||||
import { BaseText } from "@components/BaseText";
|
||||
import { Heart } from "@components/Heart";
|
||||
import { Paragraph } from "@components/Paragraph";
|
||||
import { EquicordDevs } from "@utils/constants";
|
||||
import { openUserProfile } from "@utils/discord";
|
||||
|
|
@ -37,6 +37,8 @@ interface GroupData {
|
|||
name: string;
|
||||
}
|
||||
|
||||
const cl = classNameFactory("vc-i-remember-you-");
|
||||
|
||||
class Data {
|
||||
declare usersCollection: Record<string, GroupData>;
|
||||
declare _storageAutoSaveProtocol_interval;
|
||||
|
|
@ -214,10 +216,10 @@ class DataUI {
|
|||
|
||||
|
||||
return <aside key={key} >
|
||||
<div className={"vc-i-remember-you-user-header-container"}>
|
||||
<div className={cl("header-container")}>
|
||||
<BaseText>{key.toUpperCase()}</BaseText>
|
||||
<div className={"vc-i-remember-you-user-header-btns"}>
|
||||
<Flex style={{ gap: "calc(0.5em + 0.5vw) 0.2em", flexDirection: "column" }}>
|
||||
<div className={cl("header-btns")}>
|
||||
<Flex>
|
||||
{usersElements}
|
||||
</Flex>
|
||||
</div>
|
||||
|
|
@ -227,11 +229,12 @@ class DataUI {
|
|||
|
||||
renderUserAvatar(user: IStorageUser) {
|
||||
return <Clickable onClick={() => openUserProfile(user.id)}>
|
||||
<span style={{ cursor: "pointer" }} >
|
||||
<span className={cl("user-avatar")}>
|
||||
<Avatar src={user.iconURL} size="SIZE_24" />
|
||||
</span>
|
||||
</Clickable>;
|
||||
}
|
||||
|
||||
userTooltipText(user: IStorageUser) {
|
||||
const { updatedAt } = user.extra || {};
|
||||
const updatedAtContent = updatedAt ? new Intl.DateTimeFormat().format(updatedAt) : null;
|
||||
|
|
@ -241,66 +244,79 @@ class DataUI {
|
|||
renderUserRow(user: IStorageUser, allowExtra: { owner?: boolean; } = {}) {
|
||||
allowExtra = Object.assign({ owner: true }, allowExtra);
|
||||
|
||||
return <Flex key={user.id} style={{ margin: 0, width: "100%", flexWrap: "wrap", alignItems: "center" }}>
|
||||
<span style={{ width: "24em" }}>
|
||||
<Flex style={{ gap: "0.5em", alignItems: "center", margin: 0, wordBreak: "break-word" }}>
|
||||
{this.renderUserAvatar(user)}
|
||||
<Tooltip text={this.userTooltipText(user)}>
|
||||
{props =>
|
||||
<Paragraph {...props}>{user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}</Paragraph>
|
||||
}
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</span>
|
||||
return (
|
||||
<Flex key={user.id} className={cl("user-row")}>
|
||||
<span className={cl("user")}>
|
||||
<Flex>
|
||||
{this.renderUserAvatar(user)}
|
||||
<Tooltip text={this.userTooltipText(user)}>
|
||||
{props =>
|
||||
<Paragraph {...props} className={cl("user-username")}>
|
||||
{user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}
|
||||
</Paragraph>
|
||||
}
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</span>
|
||||
|
||||
<span style={{ height: "min-content" }}><Paragraph style={{ opacity: 0.75 }}>{user.id}</Paragraph></span>
|
||||
</Flex>;
|
||||
<span className={cl("user-id")}>
|
||||
<Paragraph>
|
||||
{user.id}
|
||||
</Paragraph>
|
||||
</span>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
renderButtonsFooter(usersCollection: Data["usersCollection"]) {
|
||||
return <footer>
|
||||
<Flex style={{ gap: "1.5em", marginTop: "2em" }}>
|
||||
return (
|
||||
<footer className={cl("buttons")}>
|
||||
<Flex>
|
||||
|
||||
<Clickable onClick={() => Modal.openModal(props => <Modal.ModalRoot size={Modal.ModalSize.LARGE} fullscreenOnMobile={true} {...props}>
|
||||
<Modal.ModalHeader separator={false}>
|
||||
<BaseText
|
||||
size="lg"
|
||||
weight="semibold"
|
||||
color="header-primary"
|
||||
tag="h1"
|
||||
style={{ flexGrow: 1 }}
|
||||
>
|
||||
Editor
|
||||
</BaseText>
|
||||
<Modal.ModalCloseButton onClick={props.onClose} />
|
||||
</Modal.ModalHeader>
|
||||
<Modal.ModalContent>
|
||||
<Flex style={{ paddingBlock: "0.5em", gap: "0.75em" }}>
|
||||
<Button label="Validate and save" >Validate and save</Button>
|
||||
<Button label="Cancel" color={Button.Colors.TRANSPARENT}>Cancel</Button>
|
||||
</Flex>
|
||||
<TextArea value={JSON.stringify(usersCollection, null, "\t")} onChange={() => { }} rows={20} />
|
||||
</Modal.ModalContent>
|
||||
</Modal.ModalRoot>)}>
|
||||
<Paragraph style={{ cursor: "pointer" }}>Open editor</Paragraph>
|
||||
</Clickable>
|
||||
<Clickable onClick={() => Modal.openModal(props => <Modal.ModalRoot size={Modal.ModalSize.LARGE} fullscreenOnMobile={true} {...props}>
|
||||
<Modal.ModalHeader separator={false}>
|
||||
<BaseText
|
||||
size="lg"
|
||||
weight="semibold"
|
||||
color="header-primary"
|
||||
tag="h1"
|
||||
className={cl("buttons-editor")}
|
||||
>
|
||||
Editor
|
||||
</BaseText>
|
||||
<Modal.ModalCloseButton onClick={props.onClose} />
|
||||
</Modal.ModalHeader>
|
||||
<Modal.ModalContent>
|
||||
<Flex className={cl("buttons-save")}>
|
||||
<Button label="Validate and save" >Validate and save</Button>
|
||||
<Button label="Cancel" color={Button.Colors.TRANSPARENT}>Cancel</Button>
|
||||
</Flex>
|
||||
<TextArea value={JSON.stringify(usersCollection, null, "\t")} onChange={() => { }} rows={20} />
|
||||
</Modal.ModalContent>
|
||||
</Modal.ModalRoot>)}>
|
||||
<BaseText className={cl("buttons-editor-open")}>Open editor</BaseText>
|
||||
</Clickable>
|
||||
|
||||
<Clickable onClick={
|
||||
async () => {
|
||||
const confirmed = confirm("Sure?");
|
||||
if (!confirmed) {
|
||||
return;
|
||||
<Clickable onClick={
|
||||
async () => {
|
||||
const confirmed = confirm("Sure?");
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { plugin } = this;
|
||||
const data = plugin.dataManager as Data;
|
||||
data.usersCollection = {};
|
||||
await data.updateStorage();
|
||||
}
|
||||
|
||||
const { plugin } = this;
|
||||
const data = plugin.dataManager as Data;
|
||||
data.usersCollection = {};
|
||||
await data.updateStorage();
|
||||
}
|
||||
}><BaseText style={{ cursor: "pointer" }}>Reset storage</BaseText>
|
||||
</Clickable>
|
||||
</Flex>
|
||||
</footer >;
|
||||
}>
|
||||
<BaseText className={cl("buttons-reset")}>
|
||||
Reset storage
|
||||
</BaseText>
|
||||
</Clickable>
|
||||
</Flex>
|
||||
</footer >
|
||||
);
|
||||
}
|
||||
|
||||
renderSearchElement(usersCollection: Data["usersCollection"]) {
|
||||
|
|
@ -311,38 +327,33 @@ class DataUI {
|
|||
|
||||
const list = [...map.values()];
|
||||
|
||||
return <section style={{ paddingBlock: "1em" }}>
|
||||
<TextInput placeholder="Filter by tag, username" name="Filter" onChange={value => setState(value)} />
|
||||
{current &&
|
||||
<Flex style={{ flexDirection: "column", gap: "0.5em", paddingTop: "1em" }}>
|
||||
{list.filter(user => user.tag.includes(current) || user.username.includes(current))
|
||||
.map(user => this.renderUserRow(
|
||||
user,
|
||||
{ owner: false }
|
||||
))
|
||||
}
|
||||
</Flex>
|
||||
}
|
||||
</section>;
|
||||
return (
|
||||
<section className={cl("search")}>
|
||||
<TextInput placeholder="Filter by tag, username" name="Filter" onChange={value => setState(value)} />
|
||||
{current &&
|
||||
<Flex className={cl("search-user")}>
|
||||
{list.filter(user => user.tag.includes(current) || user.username.includes(current))
|
||||
.map(user => this.renderUserRow(
|
||||
user,
|
||||
{ owner: false }
|
||||
))
|
||||
}
|
||||
</Flex>
|
||||
}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
toElement(usersCollection: Data["usersCollection"]) {
|
||||
return (
|
||||
/*
|
||||
> ![Important]
|
||||
> Let me know a more promising color, instead of #ffffff
|
||||
*/
|
||||
<main style={{ color: "#ffffff", paddingBottom: "4em" }}>
|
||||
<main className={cl("header")}>
|
||||
<BaseText size="lg" weight="bold" tag="h1">
|
||||
{"IRememberYou"}{" "}
|
||||
<Heart />
|
||||
{"IRememberYou"}
|
||||
</BaseText>
|
||||
|
||||
|
||||
{this.renderSectionDescription()}
|
||||
<br />
|
||||
{this.renderSearchElement(usersCollection)}
|
||||
<Flex style={{ gap: "1.5em", flexDirection: "column" }}>
|
||||
<Flex className={cl("rows")}>
|
||||
{this.renderUsersCollectionAsRows(usersCollection)}
|
||||
</Flex>
|
||||
{this.renderButtonsFooter(usersCollection)}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,66 @@
|
|||
.vc-i-remember-you-user-header-container {
|
||||
.vc-i-remember-you-header-container {
|
||||
display: contents;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-user-header-btns {
|
||||
display: none;
|
||||
.vc-i-remember-you-header-btns {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-header {
|
||||
color: var(--text-default);
|
||||
}
|
||||
|
||||
.vc-i-remember-you-rows {
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-search {
|
||||
padding-block: 10px;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-search-user {
|
||||
flex-direction: column;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-user-avatar {
|
||||
cursor: pointer;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-user-row {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-user-id {
|
||||
height: min-content;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-user {
|
||||
width: 500px;
|
||||
gap: 250px;
|
||||
align-items: center;
|
||||
overflow-wrap: break-word;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-user-username {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-buttons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.vc-i-remember-you-buttons-reset {
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue