cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge session icons together.

Browse source
This commit is contained in:
Paul 2021-07-08 14:07:25 +01:00
parent f0fccac355
commit 594980fdac
2 changed files with 86 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/ui/Masks.tsx
View file

@ -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"} />

45
src/pages/settings/panes/Sessions.tsx
View file

@ -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,7 +117,9 @@ 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) => {
const systemIcon = getSystemIcon(session);
return (
<div <div
className={styles.entry} className={styles.entry}
data-active={session.id === deviceId} data-active={session.id === deviceId}
@ -129,17 +131,27 @@ export function Sessions() {
)} )}
<div className={styles.session}> <div className={styles.session}>
<div className={styles.detail}> <div className={styles.detail}>
<div className={styles.icon}> <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)} {getIcon(session)}
<div>{getSystemIcon(session)}</div> </foreignObject>
</div> <foreignObject x="18" y="18" width="14" height="14">
{ systemIcon }
</foreignObject>
</svg>
<div className={styles.info}> <div className={styles.info}>
<input <input
type="text" type="text"
className={styles.name} className={styles.name}
value={session.friendly_name} value={session.friendly_name}
autocomplete="off" autocomplete="off"
/> style={{ pointerEvents: 'none' }} />
<span className={styles.time}> <span className={styles.time}>
<Text <Text
id="app.settings.pages.sessions.created" id="app.settings.pages.sessions.created"
@ -177,7 +189,8 @@ export function Sessions() {
)} )}
</div> </div>
</div> </div>
))} )
})}
<Button error> <Button error>
<Text id="app.settings.pages.sessions.logout" /> <Text id="app.settings.pages.sessions.logout" />
</Button> </Button>