mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-26 07:22:10 -05:00
Merge session icons together.
This commit is contained in:
Paul
parent
f0fccac355
commit
594980fdac
2 changed files with 86 additions and 69 deletions
|
|
@ -12,6 +12,10 @@ export default function Masks() {
|
||||||
<rect x="0" y="0" width="32" height="32" fill="white" />
|
<rect x="0" y="0" width="32" height="32" fill="white" />
|
||||||
<circle cx="27" cy="27" r="7" fill={"black"} />
|
<circle cx="27" cy="27" r="7" fill={"black"} />
|
||||||
</mask>
|
</mask>
|
||||||
|
<mask id="session">
|
||||||
|
<rect x="0" y="0" width="32" height="32" fill="white" />
|
||||||
|
<circle cx="26" cy="30" r="12" fill={"black"} />
|
||||||
|
</mask>
|
||||||
<mask id="overlap">
|
<mask id="overlap">
|
||||||
<rect x="0" y="0" width="32" height="32" fill="white" />
|
<rect x="0" y="0" width="32" height="32" fill="white" />
|
||||||
<circle cx="32" cy="16" r="18" fill={"black"} />
|
<circle cx="32" cy="16" r="18" fill={"black"} />
|
||||||
|
|
|
||||||
|
|
@ -66,15 +66,15 @@ export function Sessions() {
|
||||||
const name = session.friendly_name;
|
const name = session.friendly_name;
|
||||||
switch (true) {
|
switch (true) {
|
||||||
case /firefox/i.test(name):
|
case /firefox/i.test(name):
|
||||||
return <Firefoxbrowser />;
|
return <Firefoxbrowser size={32} />;
|
||||||
case /chrome/i.test(name):
|
case /chrome/i.test(name):
|
||||||
return <Googlechrome />;
|
return <Googlechrome size={32} />;
|
||||||
case /safari/i.test(name):
|
case /safari/i.test(name):
|
||||||
return <Safari />;
|
return <Safari size={32} />;
|
||||||
case /edge/i.test(name):
|
case /edge/i.test(name):
|
||||||
return <Microsoftedge />;
|
return <Microsoftedge size={32} />;
|
||||||
default:
|
default:
|
||||||
return <HelpCircle />;
|
return <HelpCircle size={32} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -82,15 +82,15 @@ export function Sessions() {
|
||||||
const name = session.friendly_name;
|
const name = session.friendly_name;
|
||||||
switch (true) {
|
switch (true) {
|
||||||
case /linux/i.test(name):
|
case /linux/i.test(name):
|
||||||
return <Linux />;
|
return <Linux size={14} />;
|
||||||
case /android/i.test(name):
|
case /android/i.test(name):
|
||||||
return <Android />;
|
return <Android size={14} />;
|
||||||
case /mac.*os/i.test(name):
|
case /mac.*os/i.test(name):
|
||||||
return <Macos />;
|
return <Macos size={14} />;
|
||||||
case /ios/i.test(name):
|
case /ios/i.test(name):
|
||||||
return <Ios />;
|
return <Ios size={14} />;
|
||||||
case /windows/i.test(name):
|
case /windows/i.test(name):
|
||||||
return <Windows />;
|
return <Windows size={14} />;
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
@ -117,67 +117,80 @@ export function Sessions() {
|
||||||
<h3>
|
<h3>
|
||||||
<Text id="app.settings.pages.sessions.active_sessions" />
|
<Text id="app.settings.pages.sessions.active_sessions" />
|
||||||
</h3>
|
</h3>
|
||||||
{render.map((session) => (
|
{render.map((session) => {
|
||||||
<div
|
const systemIcon = getSystemIcon(session);
|
||||||
className={styles.entry}
|
return (
|
||||||
data-active={session.id === deviceId}
|
<div
|
||||||
data-deleting={attemptingDelete.indexOf(session.id) > -1}>
|
className={styles.entry}
|
||||||
{deviceId === session.id && (
|
data-active={session.id === deviceId}
|
||||||
<span className={styles.label}>
|
data-deleting={attemptingDelete.indexOf(session.id) > -1}>
|
||||||
<Text id="app.settings.pages.sessions.this_device" />{" "}
|
{deviceId === session.id && (
|
||||||
</span>
|
<span className={styles.label}>
|
||||||
)}
|
<Text id="app.settings.pages.sessions.this_device" />{" "}
|
||||||
<div className={styles.session}>
|
</span>
|
||||||
<div className={styles.detail}>
|
|
||||||
<div className={styles.icon}>
|
|
||||||
{getIcon(session)}
|
|
||||||
<div>{getSystemIcon(session)}</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.info}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className={styles.name}
|
|
||||||
value={session.friendly_name}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<span className={styles.time}>
|
|
||||||
<Text
|
|
||||||
id="app.settings.pages.sessions.created"
|
|
||||||
fields={{
|
|
||||||
time_ago: dayjs(
|
|
||||||
session.timestamp,
|
|
||||||
).fromNow(),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{deviceId !== session.id && (
|
|
||||||
<Button
|
|
||||||
onClick={async () => {
|
|
||||||
setDelete([
|
|
||||||
...attemptingDelete,
|
|
||||||
session.id,
|
|
||||||
]);
|
|
||||||
await client.req(
|
|
||||||
"DELETE",
|
|
||||||
`/auth/sessions/${session.id}` as "/auth/sessions",
|
|
||||||
);
|
|
||||||
setSessions(
|
|
||||||
sessions?.filter(
|
|
||||||
(x) => x.id !== session.id,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
disabled={
|
|
||||||
attemptingDelete.indexOf(session.id) > -1
|
|
||||||
}>
|
|
||||||
<Text id="app.settings.pages.logOut" />
|
|
||||||
</Button>
|
|
||||||
)}
|
)}
|
||||||
|
<div className={styles.session}>
|
||||||
|
<div className={styles.detail}>
|
||||||
|
<svg width={42} height={42}
|
||||||
|
viewBox="0 0 32 32">
|
||||||
|
<foreignObject
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
mask={systemIcon ? "url(#session)": undefined}>
|
||||||
|
{getIcon(session)}
|
||||||
|
</foreignObject>
|
||||||
|
<foreignObject x="18" y="18" width="14" height="14">
|
||||||
|
{ systemIcon }
|
||||||
|
</foreignObject>
|
||||||
|
</svg>
|
||||||
|
<div className={styles.info}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className={styles.name}
|
||||||
|
value={session.friendly_name}
|
||||||
|
autocomplete="off"
|
||||||
|
style={{ pointerEvents: 'none' }} />
|
||||||
|
<span className={styles.time}>
|
||||||
|
<Text
|
||||||
|
id="app.settings.pages.sessions.created"
|
||||||
|
fields={{
|
||||||
|
time_ago: dayjs(
|
||||||
|
session.timestamp,
|
||||||
|
).fromNow(),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{deviceId !== session.id && (
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
setDelete([
|
||||||
|
...attemptingDelete,
|
||||||
|
session.id,
|
||||||
|
]);
|
||||||
|
await client.req(
|
||||||
|
"DELETE",
|
||||||
|
`/auth/sessions/${session.id}` as "/auth/sessions",
|
||||||
|
);
|
||||||
|
setSessions(
|
||||||
|
sessions?.filter(
|
||||||
|
(x) => x.id !== session.id,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
disabled={
|
||||||
|
attemptingDelete.indexOf(session.id) > -1
|
||||||
|
}>
|
||||||
|
<Text id="app.settings.pages.logOut" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
))}
|
})}
|
||||||
<Button error>
|
<Button error>
|
||||||
<Text id="app.settings.pages.sessions.logout" />
|
<Text id="app.settings.pages.sessions.logout" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue