Added full screen button
This commit is contained in:
parent
24a3387b51
commit
58cb92d432
@ -16,6 +16,10 @@ import BrushToolIcon from "../../icons/BrushToolIcon";
|
||||
import MeasureToolIcon from "../../icons/MeasureToolIcon";
|
||||
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
|
||||
import PointerToolIcon from "../../icons/PointerToolIcon";
|
||||
import FullScreenIcon from "../../icons/FullScreenIcon";
|
||||
import FullScreenExitIcon from "../../icons/FullScreenExitIcon";
|
||||
|
||||
import useSetting from "../../helpers/useSetting";
|
||||
|
||||
function MapContols({
|
||||
onMapChange,
|
||||
@ -31,6 +35,7 @@ function MapContols({
|
||||
disabledSettings,
|
||||
}) {
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [fullScreen, setFullScreen] = useSetting("map.fullScreen");
|
||||
|
||||
const toolsById = {
|
||||
pan: {
|
||||
@ -190,6 +195,24 @@ function MapContols({
|
||||
{controls}
|
||||
</Flex>
|
||||
{getToolSettings()}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "overlay",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
m={2}
|
||||
>
|
||||
<IconButton
|
||||
onClick={() => setFullScreen(!fullScreen)}
|
||||
aria-label={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
|
||||
title={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
|
||||
>
|
||||
{fullScreen ? <FullScreenExitIcon /> : <FullScreenIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -6,6 +6,8 @@ import DiceTrayOverlay from "../dice/DiceTrayOverlay";
|
||||
|
||||
import { DiceLoadingProvider } from "../../contexts/DiceLoadingContext";
|
||||
|
||||
import useSetting from "../../helpers/useSetting";
|
||||
|
||||
function DiceTrayButton({
|
||||
shareDice,
|
||||
onShareDiceChage,
|
||||
@ -13,13 +15,14 @@ function DiceTrayButton({
|
||||
onDiceRollsChange,
|
||||
}) {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [fullScreen] = useSetting("map.fullScreen");
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: "100%",
|
||||
left: fullScreen ? "0" : "100%",
|
||||
bottom: 0,
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
|
@ -11,6 +11,8 @@ import StartTimerButton from "./StartTimerButton";
|
||||
import Timer from "./Timer";
|
||||
import DiceTrayButton from "./DiceTrayButton";
|
||||
|
||||
import useSetting from "../../helpers/useSetting";
|
||||
|
||||
function Party({
|
||||
nickname,
|
||||
partyNicknames,
|
||||
@ -30,81 +32,95 @@ function Party({
|
||||
onDiceRollsChange,
|
||||
partyDiceRolls,
|
||||
}) {
|
||||
const [fullScreen] = useSetting("map.fullScreen");
|
||||
|
||||
return (
|
||||
<Flex
|
||||
p={3}
|
||||
<Box
|
||||
bg="background"
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
overflow: "visible",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
width: "112px",
|
||||
minWidth: "112px",
|
||||
// width: fullScreen ? "0" : "112px",
|
||||
// minWidth: fullScreen ? "0" : "112px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Text mb={1} variant="heading" as="h1">
|
||||
Party
|
||||
</Text>
|
||||
</Box>
|
||||
<SimpleBar
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
overflow: "visible",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
display: fullScreen ? "none" : "flex",
|
||||
width: "112px",
|
||||
minWidth: "112px",
|
||||
padding: "0 16px",
|
||||
height: "calc(100% - 232px)",
|
||||
}}
|
||||
p={3}
|
||||
>
|
||||
<Nickname
|
||||
nickname={`${nickname} (you)`}
|
||||
diceRolls={shareDice && diceRolls}
|
||||
/>
|
||||
{Object.entries(partyNicknames).map(([id, partyNickname]) => (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Text mb={1} variant="heading" as="h1">
|
||||
Party
|
||||
</Text>
|
||||
</Box>
|
||||
<SimpleBar
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
width: "100%",
|
||||
minWidth: "112px",
|
||||
padding: "0 16px",
|
||||
height: "calc(100% - 232px)",
|
||||
}}
|
||||
>
|
||||
<Nickname
|
||||
nickname={partyNickname}
|
||||
key={id}
|
||||
stream={partyStreams[id]}
|
||||
diceRolls={partyDiceRolls[id]}
|
||||
nickname={`${nickname} (you)`}
|
||||
diceRolls={shareDice && diceRolls}
|
||||
/>
|
||||
))}
|
||||
{timer && <Timer timer={timer} index={0} />}
|
||||
{Object.entries(partyTimers).map(([id, partyTimer], index) => (
|
||||
<Timer
|
||||
timer={partyTimer}
|
||||
key={id}
|
||||
// Put party timers above your timer if there is one
|
||||
index={timer ? index + 1 : index}
|
||||
{Object.entries(partyNicknames).map(([id, partyNickname]) => (
|
||||
<Nickname
|
||||
nickname={partyNickname}
|
||||
key={id}
|
||||
stream={partyStreams[id]}
|
||||
diceRolls={partyDiceRolls[id]}
|
||||
/>
|
||||
))}
|
||||
{timer && <Timer timer={timer} index={0} />}
|
||||
{Object.entries(partyTimers).map(([id, partyTimer], index) => (
|
||||
<Timer
|
||||
timer={partyTimer}
|
||||
key={id}
|
||||
// Put party timers above your timer if there is one
|
||||
index={timer ? index + 1 : index}
|
||||
/>
|
||||
))}
|
||||
</SimpleBar>
|
||||
<Flex sx={{ flexDirection: "column" }}>
|
||||
<ChangeNicknameButton
|
||||
nickname={nickname}
|
||||
onChange={onNicknameChange}
|
||||
/>
|
||||
))}
|
||||
</SimpleBar>
|
||||
<Flex sx={{ flexDirection: "column" }}>
|
||||
<ChangeNicknameButton nickname={nickname} onChange={onNicknameChange} />
|
||||
<AddPartyMemberButton gameId={gameId} />
|
||||
<StartStreamButton
|
||||
onStreamStart={onStreamStart}
|
||||
onStreamEnd={onStreamEnd}
|
||||
stream={stream}
|
||||
/>
|
||||
<StartTimerButton
|
||||
onTimerStart={onTimerStart}
|
||||
onTimerStop={onTimerStop}
|
||||
timer={timer}
|
||||
/>
|
||||
<SettingsButton />
|
||||
</Flex>
|
||||
<AddPartyMemberButton gameId={gameId} />
|
||||
<StartStreamButton
|
||||
onStreamStart={onStreamStart}
|
||||
onStreamEnd={onStreamEnd}
|
||||
stream={stream}
|
||||
/>
|
||||
<StartTimerButton
|
||||
onTimerStart={onTimerStart}
|
||||
onTimerStop={onTimerStop}
|
||||
timer={timer}
|
||||
/>
|
||||
<SettingsButton />
|
||||
</Flex>
|
||||
</Box>
|
||||
<DiceTrayButton
|
||||
shareDice={shareDice}
|
||||
onShareDiceChage={onShareDiceChage}
|
||||
diceRolls={diceRolls}
|
||||
onDiceRollsChange={onDiceRollsChange}
|
||||
/>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -9,6 +9,7 @@ import ProxyToken from "./ProxyToken";
|
||||
import SelectTokensButton from "./SelectTokensButton";
|
||||
|
||||
import { fromEntries } from "../../helpers/shared";
|
||||
import useSetting from "../../helpers/useSetting";
|
||||
|
||||
import AuthContext from "../../contexts/AuthContext";
|
||||
import TokenDataContext from "../../contexts/TokenDataContext";
|
||||
@ -18,6 +19,7 @@ const listTokenClassName = "list-token";
|
||||
function Tokens({ onMapTokenStateCreate }) {
|
||||
const { userId } = useContext(AuthContext);
|
||||
const { ownedTokens, tokens } = useContext(TokenDataContext);
|
||||
const [fullScreen] = useSetting("map.fullScreen");
|
||||
|
||||
function handleProxyDragEnd(isOnMap, token) {
|
||||
if (isOnMap && onMapTokenStateCreate) {
|
||||
@ -48,6 +50,7 @@ function Tokens({ onMapTokenStateCreate }) {
|
||||
width: "80px",
|
||||
minWidth: "80px",
|
||||
overflow: "hidden",
|
||||
display: fullScreen ? "none" : "block",
|
||||
}}
|
||||
>
|
||||
<SimpleBar style={{ height: "calc(100% - 48px)", overflowX: "hidden" }}>
|
||||
|
18
src/icons/FullScreenExitIcon.js
Normal file
18
src/icons/FullScreenExitIcon.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
function FullScreenIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
fill="currentcolor"
|
||||
>
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M6 16h2v2c0 .55.45 1 1 1s1-.45 1-1v-3c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1zm2-8H6c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1s-1 .45-1 1v2zm7 11c.55 0 1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm1-11V6c0-.55-.45-1-1-1s-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1h-2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default FullScreenIcon;
|
18
src/icons/FullScreenIcon.js
Normal file
18
src/icons/FullScreenIcon.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
function FullScreenIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
fill="currentcolor"
|
||||
>
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M6 14c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1H7v-2c0-.55-.45-1-1-1zm0-4c.55 0 1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm11 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1s-1 .45-1 1v2zM14 6c0 .55.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V6c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default FullScreenIcon;
|
@ -27,6 +27,7 @@ function loadVersions(settings) {
|
||||
style: "galaxy",
|
||||
},
|
||||
}));
|
||||
settings.version(2, (prev) => ({ ...prev, map: { fullScreen: false } }));
|
||||
}
|
||||
|
||||
export function getSettings() {
|
||||
|
Loading…
Reference in New Issue
Block a user