[WEB-1116] fix: editor info badges occupying multiple lines (#5548)

This commit is contained in:
Aaryan Khandelwal
2024-09-07 09:01:01 +05:30
committed by GitHub
parent 29fd1186ee
commit 8154a190d2
4 changed files with 15 additions and 10 deletions
+1 -1
View File
@@ -41,7 +41,7 @@ router.ws("/collaboration", (ws, req) => {
app.use(process.env.LIVE_BASE_PATH || "/live", router);
app.use((_req, res, _next) => {
app.use((_req, res) => {
res.status(404).send("Not Found");
});
@@ -3,14 +3,14 @@ import React from "react";
import { PageRenderer } from "@/components/editors";
// constants
import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
// extensions
import { IssueWidget } from "@/extensions";
// helpers
import { getEditorClassNames } from "@/helpers/common";
// plane editor types
import { TEmbedConfig } from "@/plane-editor/types";
// hooks
import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
// types
import { EditorRefApi, ICollaborativeDocumentEditor } from "@/types";
import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
import { IssueWidget } from "@/extensions";
const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
const {
@@ -4,7 +4,7 @@ import { Tooltip } from "@plane/ui";
export const LockedComponent = (props: { toolTipContent?: string }) => {
const { toolTipContent } = props;
const lockedComponent = (
<div className="flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
<div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
<Lock className="h-3 w-3" />
<span>Locked</span>
</div>
@@ -63,7 +63,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-end gap-3">
{is_locked && <LockedComponent />}
{archived_at && (
<div className="flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
<div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
<ArchiveIcon className="flex-shrink-0 size-3" />
<span>Archived at {renderFormattedDate(archived_at)}</span>
</div>
@@ -73,7 +73,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
tooltipHeading="You are offline"
tooltipContent="All changes made will be saved locally and will be synced when the internet connection is re-established."
>
<div className="flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
<div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
<span className="flex-shrink-0 size-1.5 rounded-full bg-custom-text-300" />
<span>Offline</span>
</div>
@@ -84,14 +84,19 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
tooltipHeading="Connection failed"
tooltipContent="All changes made will be saved locally and will be synced when the connection is re-established."
>
<div className="flex h-7 items-center gap-2 rounded-full bg-red-500/20 px-3 py-0.5 text-xs font-medium text-red-500">
<div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-red-500/20 px-3 py-0.5 text-xs font-medium text-red-500">
<CircleAlert className="flex-shrink-0 size-3" />
<span>Server error</span>
</div>
</Tooltip>
)}
{canCurrentUserFavoritePage && (
<FavoriteStar selected={is_favorite} onClick={handleFavorite} iconClassName="text-custom-text-100" />
<FavoriteStar
selected={is_favorite}
onClick={handleFavorite}
buttonClassName="flex-shrink-0"
iconClassName="text-custom-text-100"
/>
)}
<PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} />
<PageOptionsDropdown