Skip to content

Commit

Permalink
refactor(flat-pages): change fold button to sidebar handle (#1922)
Browse files Browse the repository at this point in the history
  • Loading branch information
hyrious authored May 10, 2023
1 parent a336460 commit b9ec222
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 27 deletions.
18 changes: 8 additions & 10 deletions packages/flat-pages/src/BigClassPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,10 @@ import {
TopBarDivider,
TopBarRightBtn,
SVGExit,
SVGMenuUnfold,
SVGMenuFold,
SVGScreenSharing,
} from "flat-components";
import { observer } from "mobx-react-lite";
import React, { useContext, useEffect, useState } from "react";
import React, { useContext, useEffect } from "react";
import { useTranslate } from "@netless/flat-i18n";
import { RoomStatus } from "@netless/flat-server-api";
import { ChatPanel } from "../components/ChatPanel";
Expand Down Expand Up @@ -53,7 +51,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(

const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);

const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
const isRealtimeSideOpen = !whiteboardStore.isRightSideClose;

useEffect(() => {
if (classroomStore.isCreator && classroomStore.roomStatus === RoomStatus.Idle) {
Expand Down Expand Up @@ -175,12 +173,12 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
/>
)}
{windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
{/* {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
<TopBarRightBtn
icon={isRealtimeSideOpen ? <SVGMenuUnfold /> : <SVGMenuFold />}
title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
onClick={handleSideOpenerSwitch}
/>
/> */}
{windowsBtn?.showWindowsBtn && <TopBarDivider />}
</>
);
Expand All @@ -192,6 +190,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
return (
<RealtimePanel
chatSlot={<ChatPanel classRoomStore={classroomStore} />}
classroom={classroomStore}
isShow={isRealtimeSideOpen}
isVideoOn={classroomStore.isJoinedRTC}
videoSlot={
Expand Down Expand Up @@ -249,10 +248,9 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
);
}

function handleSideOpenerSwitch(): void {
openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
whiteboardStore.setRightSideClose(isRealtimeSideOpen);
}
// function handleSideOpenerSwitch(): void {
// whiteboardStore.setRightSideClose(isRealtimeSideOpen);
// }
}),
);

Expand Down
18 changes: 8 additions & 10 deletions packages/flat-pages/src/OneToOnePage/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import "./OneToOnePage.less";

import React, { useContext, useState } from "react";
import React, { useContext } from "react";
import { useTranslate } from "@netless/flat-i18n";
import { observer } from "mobx-react-lite";
import { message } from "antd";
Expand All @@ -14,8 +14,6 @@ import {
CloudRecordBtn,
SVGScreenSharing,
SVGExit,
SVGMenuFold,
SVGMenuUnfold,
} from "flat-components";

import InviteButton from "../components/InviteButton";
Expand Down Expand Up @@ -53,7 +51,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(

const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);

const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
const isRealtimeSideOpen = !whiteboardStore.isRightSideClose;

return (
<div className="one-to-one-class-page-container">
Expand Down Expand Up @@ -170,12 +168,12 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
/>
)}
{windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
{/* {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
<TopBarRightBtn
icon={isRealtimeSideOpen ? <SVGMenuUnfold /> : <SVGMenuFold />}
title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
onClick={handleSideOpenerSwitch}
/>
/> */}
{windowsBtn?.showWindowsBtn && <TopBarDivider />}
</>
);
Expand All @@ -185,6 +183,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
return (
<RealtimePanel
chatSlot={<ChatPanel classRoomStore={classroomStore} />}
classroom={classroomStore}
isShow={isRealtimeSideOpen}
isVideoOn={classroomStore.isJoinedRTC}
videoSlot={
Expand Down Expand Up @@ -247,10 +246,9 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
);
}

function handleSideOpenerSwitch(): void {
openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
whiteboardStore.setRightSideClose(isRealtimeSideOpen);
}
// function handleSideOpenerSwitch(): void {
// whiteboardStore.setRightSideClose(isRealtimeSideOpen);
// }
}),
);

Expand Down
11 changes: 5 additions & 6 deletions packages/flat-pages/src/SmallClassPage/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import "./SmallClassPage.less";

import classNames from "classnames";
import React, { useContext, useEffect, useState } from "react";
import React, { useContext, useEffect } from "react";
import { message } from "antd";
import { observer } from "mobx-react-lite";
import { useTranslate } from "@netless/flat-i18n";
Expand All @@ -15,8 +15,6 @@ import {
TopBarRightBtn,
SVGScreenSharing,
SVGExit,
SVGMenuFold,
SVGMenuUnfold,
SVGLeft,
SVGRight,
} from "flat-components";
Expand Down Expand Up @@ -60,7 +58,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(

const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);

const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
const isRealtimeSideOpen = !whiteboardStore.isRightSideClose;

useEffect(() => {
if (classroomStore.isCreator && classroomStore.roomStatus === RoomStatus.Idle) {
Expand Down Expand Up @@ -288,15 +286,15 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
/>
)}
{windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
{/* {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
<TopBarRightBtn
icon={isRealtimeSideOpen ? <SVGMenuUnfold /> : <SVGMenuFold />}
title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
onClick={() => {
openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
whiteboardStore.setRightSideClose(isRealtimeSideOpen);
}}
/>
/> */}
{windowsBtn?.showWindowsBtn && <TopBarDivider />}
</>
);
Expand All @@ -306,6 +304,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
return (
<RealtimePanel
chatSlot={<ChatPanel classRoomStore={classroomStore} />}
classroom={classroomStore}
isShow={isRealtimeSideOpen}
isVideoOn={false}
videoSlot={null}
Expand Down
6 changes: 5 additions & 1 deletion packages/flat-pages/src/components/RealtimePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React, { ReactElement } from "react";
import classNames from "classnames";

import "./RealtimePanel.less";
import { ClassroomStore } from "@netless/flat-stores";
import { SidebarHandler } from "./SidebarHandle";

export type RealtimePanelProps = {
// is playing user video
Expand All @@ -10,11 +12,12 @@ export type RealtimePanelProps = {
isShow: boolean;
videoSlot?: React.ReactNode;
chatSlot: React.ReactNode;
classroom: ClassroomStore;
};

export class RealtimePanel extends React.PureComponent<RealtimePanelProps> {
public override render(): ReactElement {
const { isVideoOn, isShow, videoSlot, chatSlot } = this.props;
const { isVideoOn, isShow, videoSlot, chatSlot, classroom } = this.props;

return (
<div
Expand All @@ -32,6 +35,7 @@ export class RealtimePanel extends React.PureComponent<RealtimePanelProps> {
</div>
<div className="realtime-panel-chat-slot">{chatSlot}</div>
</div>
<SidebarHandler classroom={classroom} />
</div>
);
}
Expand Down
51 changes: 51 additions & 0 deletions packages/flat-pages/src/components/SidebarHandle/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import "./style.less";

import React from "react";
import { observer } from "mobx-react-lite";

import { ClassroomStore } from "@netless/flat-stores";

export interface SidebarHandleProps {
classroom: ClassroomStore;
}

export const SidebarHandler = observer<SidebarHandleProps>(function SidebarHandle({ classroom }) {
const whiteboard = classroom.whiteboardStore;

const collapsed = whiteboard.isRightSideClose;

return (
<label className="sidebar-handler">
<input
checked={collapsed}
type="checkbox"
onChange={() => whiteboard.setRightSideClose(!collapsed)}
/>
<svg fill="none" height="42" viewBox="0 0 17 42" width="17">
<path
className="sidebar-handler-border-color sidebar-handler-bg-color"
d="M17.0 41.0H5.0C2.7909 41.0 1.0 39.2091 1.0 37.0V5.0C1.0 2.79086 2.7909 1.0 5.0 1.0H17.0"
fill="#fff"
stroke="#000"
/>
{collapsed ? (
<path
className="sidebar-handler-image-fill-color"
clipRule="evenodd"
d="M8 19L10 17V25L8 23L6 21L8 19ZM12 17H11V25H12V17Z"
fill="#fff"
fillRule="evenodd"
/>
) : (
<path
className="sidebar-handler-image-fill-color"
clipRule="evenodd"
d="M10 19L8 17V25L10 23L12 21L10 19ZM6 17H7V25H6V17Z"
fill="#fff"
fillRule="evenodd"
/>
)}
</svg>
</label>
);
});
81 changes: 81 additions & 0 deletions packages/flat-pages/src/components/SidebarHandle/style.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
.sidebar-handler {
appearance: none;
border: 0;
width: 17px;
position: absolute;
right: 100%;
top: 50%;
transform: translate(0, -50%);
font-size: 0;
z-index: 100;
cursor: pointer;
pointer-events: auto;

input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
appearance: none;
margin: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
z-index: -1;
}

svg {
opacity: 0;
transition: opacity 0.5s 1s;
pointer-events: none;
}

&:focus-visible {
outline: 2px solid -webkit-focus-ring-color;
}

&:hover svg,
&.collapsed svg {
opacity: 1;
transition: opacity 0.2s;
}
}

.sidebar-handler-bg-color {
fill: #ffffff;
}

.sidebar-handler-border-color {
stroke: var(--grey-1);
}

.sidebar-handler-image-stroke-color {
stroke: var(--grey-6);
}

.sidebar-handler-image-fill-color {
fill: var(--grey-6);
}

.realtime-panel:hover+.sidebar-handler svg {
opacity: 1;
transition: opacity 0.2s;
}

.flat-color-scheme-dark {
.sidebar-handler-bg-color {
fill: var(--grey-9);
}

.sidebar-handler-border-color {
stroke: var(--grey-8);
}

.sidebar-handler-image-stroke-color {
stroke: var(--grey-5);
}

.sidebar-handler-image-fill-color {
fill: var(--grey-5);
}
}

0 comments on commit b9ec222

Please sign in to comment.