demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

put share button under menu

Browse source
This commit is contained in:
Robin Appelman 2024-11-30 23:30:44 +01:00
commit 9c82b445a3
2 changed files with 53 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

59
script/viewer/Analyse/AnalyseMenu.tsx
View file

@ -5,44 +5,45 @@ export interface AnalyseMenuProps {
isShared: boolean; isShared: boolean;
clients: number, clients: number,
inShared: boolean, inShared: boolean,
open: boolean,
} }
export function AnalyseMenu(props: AnalyseMenuProps) { export function AnalyseMenu(props: AnalyseMenuProps) {
const loc = () => window.location.toString().replace(/\#.*/, '') + '#' + props.sessionName; const loc = () => window.location.toString().replace(/\#.*/, '') + '#' + props.sessionName;
const shareText = () => (props.isShared) ?
return (<div class="analyse-menu">
<Show when={props.inShared}>
<div class="share shared">
You're spectating a session controlled by someone else
</div>
</Show>
<Show when={!props.inShared}>
<details>
<summary title="Menu">☰</summary>
<ul class="menu">
<li>
<button class="share-session" title="Start a shared session" disabled={props.isShared}
onClick={() => {
props.onShare()
}}>
<Show when={!props.isShared}>
Start a shared session
</Show>
<Show when={props.isShared}>
<input class="share-text" value={loc()} readOnly={true} <input class="share-text" value={loc()} readOnly={true}
title="Use this link to join the current session" title="Use this link to join the current session"
style={{width: `${(loc().length * 8)}px`}} style={{width: `${(loc().length * 8)}px`}}
onFocus={(event) => { onFocus={(event) => {
(event.target as HTMLInputElement).select() (event.target as HTMLInputElement).select()
}}/> : <span class="share-text">Start a shared session</span>;
const clientCount = () => (props.isShared) ?
<div class="clients">{props.clients} {(props.clients === 1) ? "spectator" : "spectators"}</div> : [];
const shareButton = () => {
if (props.canShare) {
return [
<div class="share">
<button class="share-session" title="Start a shared session"
onClick={() => {
props.onShare()
}}/> }}/>
{shareText} </Show>
</div>, </button>
clientCount, </li>
] </ul>
} else if (props.inShared) { </details>
return <div class="share shared"> </Show>
You're spectating a session controlled by someone else <Show when={props.isShared && !props.inShared}>
</div> <div class="clients">{props.clients} {(props.clients === 1) ? "spectator" : "spectators"}</div>
} else { </Show>
return [];
}
}
return (<div class="analyse-menu">
{shareButton}
</div>) </div>)
} }

23
style/pages/viewer/AnalyseMenu.css
View file

@ -22,17 +22,17 @@
} }
} }
& .share-session { & button.share-session {
background: transparent; background: transparent;
color: var(--primary-color); color: var(--primary-color);
font-size: 200%; padding-left: 32px;
width: 24px;
height: 24px; height: 24px;
margin: 10px; margin: 10px;
border: none; border: none;
cursor: pointer; cursor: pointer;
background-image: url("inline://images//link_white.svg"); background-image: url("inline://images//link_white.svg");
background-size: contain; background-size: contain;
background-repeat: no-repeat;
&:active, &:focus { &:active, &:focus {
outline: none; outline: none;
@ -43,9 +43,9 @@
color: var(--primary-color); color: var(--primary-color);
background-color: var(--text-secondary); background-color: var(--text-secondary);
padding: 5px; padding: 5px;
margin-top: 0;
border: 1px #888 solid; border: 1px #888 solid;
border-radius: 5px; border-radius: 5px;
margin-top: -3px;
&:active, &:focus { &:active, &:focus {
outline: none; outline: none;
@ -64,4 +64,19 @@
.clients { .clients {
margin-left: 10px; margin-left: 10px;
} }
summary {
font-size: 120%;
margin: 5px;
margin-left: 10px;
}
summary::marker {
content: '';
}
ul {
padding: 0;
margin: 0;
}
} }