cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-28 18:00:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add editing role name / colour.

Browse source 
Animate avatars on message hover.
Switch to 24-hour time format by default.
This commit is contained in:
Paul 2021-07-14 13:25:40 +01:00
parent 6f6020c474
commit 7374591458
9 changed files with 122 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 3931bf87e94264d92556a2f3ee96c6051be75b02
Subproject commit 9f72b064aad85293f332c3f7ce3f4fe5965def37

2
package.json
View file

@ -94,7 +94,7 @@
"react-router-dom": "^5.2.0",
"react-scroll": "^1.8.2",
"redux": "^4.1.0",
"revolt.js": "4.3.3-alpha.14",
"revolt.js": "4.3.3-alpha.15",
"rimraf": "^3.0.2",
"sass": "^1.35.1",
"shade-blend-color": "^1.0.0",

10
src/components/common/messaging/Message.tsx
View file

@ -1,6 +1,6 @@
import { attachContextMenu } from "preact-context-menu";
import { memo } from "preact/compat";
import { useContext } from "preact/hooks";
import { useContext, useState } from "preact/hooks";
import { QueuedMessage } from "../../../redux/reducers/queue";
@ -64,6 +64,9 @@ function Message({
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author });
// ! FIXME: animate on hover
const [animate, setAnimate] = useState(false);
return (
<div id={message._id}>
{message.replies?.map((message_id, index) => (
@ -88,7 +91,9 @@ function Message({
queued,
})
: undefined
}>
}
onMouseEnter={() => setAnimate(true)}
onMouseLeave={() => setAnimate(false)}>
<MessageInfo>
{head ? (
<UserIcon
@ -96,6 +101,7 @@ function Message({
size={36}
onContextMenu={userContext}
onClick={openProfile}
animate={animate}
/>
) : (
<MessageDetail message={message} position="left" />

5
src/context/Locale.tsx
View file

@ -150,7 +150,10 @@ function Locale({ children, locale }: Props) {
const dayjs = obj.dayjs;
const defaults = dayjs.defaults;
const twelvehour = defaults?.twelvehour === "yes" || true;
const twelvehour = defaults?.twelvehour
? defaults.twelvehour === "yes"
: false;
const separator: string = defaults?.date_separator ?? "/";
const date: "traditional" | "simplified" | "ISO8601" =
defaults?.date_format ?? "traditional";

2
src/context/intermediate/popovers/UserProfile.tsx
View file

@ -141,7 +141,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
`linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
}}>
<div className={styles.profile}>
<UserIcon size={80} target={user} status />
<UserIcon size={80} target={user} status animate />
<div className={styles.details}>
<Localizer>
<span

45
src/pages/settings/Settings.module.scss
View file

@ -1,24 +1,41 @@
@keyframes open {
0% {transform: scale(1.2);};
100% {transform: scale(1);};
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes close {
0% {transform: scale(1); opacity: 1;};
100% {transform: scale(1.2); opacity: 0;};
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
@keyframes opacity {
0% {opacity: 0;};
20% {opacity: .5;}
50% {opacity: 1;}
0% {
opacity: 0;
}
20% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.settings[data-mobile="true"] {
flex-direction: column;
background: var(--primary-header);
.sidebar, .content {
.sidebar,
.content {
background: var(--primary-background);
}
@ -36,7 +53,6 @@
.version {
place-items: center;
}
}
@ -52,8 +68,7 @@
width: 100%;
height: 100%;
position: fixed;
animation: open .18s ease-out,
opacity .18s;
animation: open 0.18s ease-out, opacity 0.18s;
}
.settings {
@ -177,8 +192,8 @@
position: relative;
color: var(--foreground);
width: 40px;
opacity: .5;
font-size: .75em;
opacity: 0.5;
font-size: 0.75em;
}
.closeButton {
@ -208,6 +223,10 @@
display: inline;
}
}
section {
margin-bottom: 1em;
}
}
.loader {

10
src/pages/settings/server/Panes.module.scss
View file

@ -39,7 +39,8 @@
flex-direction: row;
background: var(--secondary-background);
code, span {
code,
span {
flex: 1;
}
@ -95,10 +96,6 @@
flex-grow: 1;
padding: 0 8px;
overflow-y: scroll;
section {
margin-bottom: 1em;
}
}
.title {
@ -107,7 +104,8 @@
margin-bottom: 1em;
align-items: center;
h1, h2 {
h1,
h2 {
margin: 0;
min-width: 0;
flex-grow: 1;

74
src/pages/settings/server/Roles.tsx
View file

@ -15,6 +15,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import IconButton from "../../../components/ui/IconButton";
import InputBox from "../../../components/ui/InputBox";
import Overline from "../../../components/ui/Overline";
@ -40,21 +41,46 @@ export function Roles({ server }: Props) {
return null;
}
const v = (id: string) =>
I32ToU32(
function getPermissions(id: string) {
return I32ToU32(
id === "default"
? server.default_permissions
: roles[id].permissions,
);
const [perm, setPerm] = useState(v(role));
useEffect(() => setPerm(v(role)), [role, roles[role]?.permissions]);
}
const { name: roleName, colour: roleColour } = roles[role] ?? {};
const [perm, setPerm] = useState(getPermissions(role));
const [name, setName] = useState(roleName);
const [colour, setColour] = useState(roleColour);
useEffect(
() => setPerm(getPermissions(role)),
[role, roles[role]?.permissions],
);
useEffect(() => setName(roleName), [role, roleName]);
useEffect(() => setColour(roleColour), [role, roleColour]);
const modified =
!isEqual(perm, getPermissions(role)) ||
!isEqual(name, roleName) ||
!isEqual(colour, roleColour);
const save = () => {
if (!isEqual(perm, getPermissions(role))) {
client.servers.setPermissions(server._id, role, {
server: perm[0],
channel: perm[1],
});
}
if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) {
client.servers.editRole(server._id, role, { name, colour });
}
};
const modified = !isEqual(perm, v(role));
const save = () =>
client.servers.setPermissions(server._id, role, {
server: perm[0],
channel: perm[1],
});
const deleteRole = () => {
setRole("default");
client.servers.deleteRole(server._id, role);
@ -92,7 +118,8 @@ export function Roles({ server }: Props) {
return (
<ButtonItem
active={role === id}
onClick={() => setRole(id)}>
onClick={() => setRole(id)}
style={{ color: roles[id].colour }}>
{roles[id].name}
</ButtonItem>
);
@ -111,6 +138,31 @@ export function Roles({ server }: Props) {
Save
</Button>
</div>
{role !== "default" && (
<>
<section>
<Overline type="subtle">Role Name</Overline>
<p>
<InputBox
value={name}
onChange={(e) =>
setName(e.currentTarget.value)
}
contrast
/>
</p>
</section>
<section>
<Overline type="subtle">Role Colour</Overline>
<p>
<ColourSwatches
value={colour ?? "gray"}
onChange={(value) => setColour(value)}
/>
</p>
</section>
</>
)}
<section>
<Overline type="subtle">
<Text id="app.settings.permissions.server" />

8
yarn.lock
View file

@ -3563,10 +3563,10 @@ reusify@^1.0.4:
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
revolt.js@4.3.3-alpha.14:
version "4.3.3-alpha.14"
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.14.tgz#f4912ee25725de6e43ba1d4fd8ab84c711678271"
integrity sha512-4p3DhEu+GUKZxczCPXR2JM04fzGlFfZdwHYjgkgU48NgPXgzxQrSv4x0FjpyIIv3xNpuO59z35mYRMLxAnBXsQ==
revolt.js@4.3.3-alpha.15:
version "4.3.3-alpha.15"
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.15.tgz#e511ad500a20f658b15b7bad0fdb9e2a5465d1b1"
integrity sha512-24hIQEO+FIRIAQXITBH2qVvWH6LA1MeJW2/3lj6cqBgJz7lnb3ZNIXZBu5sHbUEJpIDtJiHcOEeaeh3sE2RwxA==
dependencies:
"@insertish/mutable" "1.1.0"
axios "^0.19.2"