Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style(flat-components): update status text and join button #2114

Merged
merged 1 commit into from
Feb 19, 2024
Merged

style(flat-components): update status text and join button #2114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const EditRoomBody: React.FC<EditRoomBodyProps> = ({
const [isShowEditSubmitConfirm, showEditSubmitConfirm] = useState(false);

const [isPeriodic, setIsPeriodic] = useState(false);
const showPmi = useMemo(() => !!pmi && !isPeriodic, [isPeriodic, pmi]);
const enablePmi = useMemo(() => !!pmi && !isPeriodic, [isPeriodic, pmi]);

// @TODO: need to remove
const [region] = useState<Region>(initialValues.region);
Expand Down Expand Up @@ -172,16 +172,16 @@ export const EditRoomBody: React.FC<EditRoomBodyProps> = ({
nextPeriodicRoomEndTime,
)}
{renderEndTimePicker(t, form, nextPeriodicRoomEndTime)}
{showPmi && updateAutoPmiOn && (
{updateAutoPmiOn && (
<Form.Item
className="edit-room-form-item no-margin pmi"
name="pmi"
valuePropName="checked"
>
<div>
<div title={t("periodic-cannot-use-pmi")}>
<Checkbox
checked={autoPmiOn}
disabled={pmiRoomExist}
checked={enablePmi && autoPmiOn}
disabled={pmiRoomExist || !enablePmi}
onClick={() => updateAutoPmiOn(!autoPmiOn)}
>
<PmiDesc
Expand Down
3 changes: 2 additions & 1 deletion packages/flat-components/src/components/InviteModal/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,15 @@
display: inline-block;

&:first-of-type {
padding-right: 16px;
white-space: nowrap;
color: var(--text);
}

&:last-of-type {
padding-left: 16px;
flex: 1;
text-align: right;
user-select: text;
}
}

Expand Down
6 changes: 3 additions & 3 deletions packages/flat-components/src/components/InviteModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
? onlySuffixTimeFormat(endTime)
: completeTimeFormat(endTime);

return `${formatBeginTime}~${formatEndTime}`;
return `${formatBeginTime} ~ ${formatEndTime}`;
}, [beginTime, endTime]);

const onCopyClicked = (): void => {
Expand Down Expand Up @@ -97,7 +97,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
</div>
<div className="invite-modal-content-item">
<span>{t("room-uuid")}</span>
<span style={{ userSelect: "text" }}>{formatInviteCode(uuid, inviteCode)}</span>
<span>{formatInviteCode(uuid, inviteCode)}</span>
</div>
{formattedTimeRange && (
<div className="invite-modal-content-item">
Expand All @@ -107,7 +107,7 @@ export const InviteModal: React.FC<InviteModalProps> = ({
)}
<div className="invite-modal-content-item">
<span>{t("join-link")}</span>
<span style={{ userSelect: "text" }}>{joinLink}</span>
<span>{joinLink}</span>
</div>
</div>
</Modal>
Expand Down
2 changes: 1 addition & 1 deletion packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const RoomDetailFooter = /* @__PURE__ */ observer<RoomDetailFooterProps>(
{t("invitation")}
</Button>
<Button className="room-detail-footer-btn" type="primary" onClick={onJoinRoom}>
{isCreator && room.roomStatus === RoomStatus.Idle ? t("begin") : t("join-room")}
{t("join-room")}
</Button>
<InviteModal
baseUrl={inviteBaseUrl}
Expand Down
28 changes: 17 additions & 11 deletions packages/flat-components/src/components/RoomStatusElement/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,24 @@ export interface RoomStatusElementProps {
room: RoomInfo;
}

const statusMap: Record<"running" | "stopped" | "upcoming", "started" | "stopped" | "idle"> = {
running: "started",
stopped: "stopped",
upcoming: "idle",
};

export const RoomStatusElement: React.FC<RoomStatusElementProps> = ({ room }) => {
const t = useTranslate();
switch (room.roomStatus) {
case RoomStatus.Started:
case RoomStatus.Paused: {
return <span className="room-status-started">{t("room-status.running")}</span>;
}
case RoomStatus.Stopped: {
return <span className="room-status-stopped">{t("room-status.stopped")}</span>;
}
default: {
return <span className="room-status-idle">{t("room-status.upcoming")}</span>;
}

const now = Date.now();
let status: "running" | "stopped" | "upcoming";
if (room.beginTime && now < room.beginTime) {
status = "upcoming";
} else if (room.roomStatus === RoomStatus.Stopped || (room.endTime && now > room.endTime)) {
status = "stopped";
} else {
status = "running";
}

return <span className={"room-status-" + statusMap[status]}>{t("room-status." + status)}</span>;
};
1 change: 1 addition & 0 deletions packages/flat-i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,7 @@
"periodic-rooms-do-not-exist": "Periodic room does not exist",
"periodic-rooms-have-ended": "Periodic room has ended",
"periodic-sub-rooms-do-not-exist": "Periodic sub-room does not exist",
"periodic-cannot-use-pmi": "Periodic room cannot use PMI",
"replay-does-not-exist": "Replay does not exist",
"request-error": "Request error",
"request-failed": "Request failed",
Expand Down
1 change: 1 addition & 0 deletions packages/flat-i18n/locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,7 @@
"periodic-rooms-do-not-exist": "周期性房间不存在",
"periodic-rooms-have-ended": "周期性房间已结束",
"periodic-sub-rooms-do-not-exist": "周期性子房间不存在",
"periodic-cannot-use-pmi": "周期性房间不能使用个人房间号",
"user-does-not-exist": "用户不存在",
"user-room-list-is-not-empty": "用户房间列表不为空",
"user-already-binding": "用户已绑定",
Expand Down
59 changes: 13 additions & 46 deletions packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,53 +81,20 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
const primaryAction = (
roomStatus?: RoomStatus,
): RoomListItemPrimaryAction<"replay" | "join" | "begin"> | null => {
let primaryAction: RoomListItemPrimaryAction<
"replay" | "join" | "begin"
> | null;
switch (roomStatus) {
case RoomStatus.Idle: {
const isCreator = room.ownerUUID === globalStore.userUUID;
primaryAction = isCreator
? {
key: "begin",
text: t("begin"),
type: "primary",
}
: {
key: "join",
text: t("join"),
type: "primary",
};
break;
}
case RoomStatus.Started:
case RoomStatus.Paused: {
primaryAction = {
key: "join",
text: t("join"),
type: "primary",
};
break;
}
case RoomStatus.Stopped: {
primaryAction = room.hasRecord
? {
key: "replay",
text: t("replay"),
}
: null;
break;
}
default: {
primaryAction = {
key: "begin",
text: t("begin"),
type: "primary",
};
break;
}
if (roomStatus === RoomStatus.Stopped) {
return room.hasRecord
? {
key: "replay",
text: t("replay"),
}
: null;
} else {
return {
key: "join",
text: t("join"),
type: "primary",
};
}
return primaryAction;
};

return (
Expand Down
Loading