chore: fix visibility selector style (#4733)

pull/4734/head
Johnny 2 weeks ago committed by GitHub
parent f1b365f928
commit 376b25a69c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -3,16 +3,18 @@ import { useState } from "react";
import VisibilityIcon from "@/components/VisibilityIcon";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/Popover";
import { Visibility } from "@/types/proto/api/v1/memo_service";
import { cn } from "@/utils";
import { useTranslate } from "@/utils/i18n";
interface Props {
value: Visibility;
onChange: (visibility: Visibility) => void;
onOpenChange?: (open: boolean) => void;
className?: string;
}
const VisibilitySelector = (props: Props) => {
const { value, onChange, className } = props;
const { value, onChange } = props;
const t = useTranslate();
const [open, setOpen] = useState(false);
@ -26,14 +28,24 @@ const VisibilitySelector = (props: Props) => {
const handleSelect = (visibility: Visibility) => {
onChange(visibility);
setOpen(false);
handleOpenChange(false);
};
const handleOpenChange = (open: boolean) => {
setOpen(open);
if (props.onOpenChange) {
props.onOpenChange(open);
}
};
return (
<Popover open={open} onOpenChange={setOpen}>
<Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild>
<button
className={`flex items-center justify-center gap-1 px-0.5 text-xs rounded hover:bg-gray-100 dark:hover:bg-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 transition-colors ${className || ""}`}
className={cn(
`flex items-center justify-center gap-1 px-0.5 text-xs rounded hover:bg-gray-100 dark:hover:bg-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 transition-colors`,
props.className,
)}
type="button"
>
<VisibilityIcon className="w-3 h-3" visibility={value} />

@ -40,8 +40,6 @@ export interface Props {
memoName?: string;
// The name of the parent memo if the memo is a comment.
parentMemoName?: string;
// The visibility of the parent memo for preset when commenting
parentMemoVisibility?: Visibility;
autoFocus?: boolean;
onConfirm?: (memoName: string) => void;
onCancel?: () => void;
@ -59,12 +57,12 @@ interface State {
}
const MemoEditor = observer((props: Props) => {
const { className, cacheKey, memoName, parentMemoName, parentMemoVisibility, autoFocus, onConfirm, onCancel } = props;
const { className, cacheKey, memoName, parentMemoName, autoFocus, onConfirm, onCancel } = props;
const t = useTranslate();
const { i18n } = useTranslation();
const currentUser = useCurrentUser();
const [state, setState] = useState<State>({
memoVisibility: parentMemoVisibility ?? Visibility.PRIVATE,
memoVisibility: Visibility.PRIVATE,
resourceList: [],
relationList: [],
location: undefined,
@ -75,6 +73,7 @@ const MemoEditor = observer((props: Props) => {
});
const [displayTime, setDisplayTime] = useState<Date | undefined>();
const [hasContent, setHasContent] = useState<boolean>(false);
const [isVisibilitySelectorOpen, setIsVisibilitySelectorOpen] = useState(false);
const editorRef = useRef<EditorRefActions>(null);
const userSetting = userStore.state.userSetting as UserSetting;
const contentCacheKey = `${currentUser.name}-${cacheKey || ""}`;
@ -97,16 +96,20 @@ const MemoEditor = observer((props: Props) => {
}
}, [autoFocus]);
useEffect(() => {
let visibility = parentMemoVisibility ?? userSetting.memoVisibility;
if (workspaceMemoRelatedSetting.disallowPublicVisibility && visibility === "PUBLIC") {
visibility = "PRIVATE";
useAsyncEffect(async () => {
let visibility = convertVisibilityFromString(userSetting.memoVisibility);
if (workspaceMemoRelatedSetting.disallowPublicVisibility && visibility === Visibility.PUBLIC) {
visibility = Visibility.PROTECTED;
}
if (parentMemoName) {
const parentMemo = await memoStore.getOrFetchMemoByName(parentMemoName);
visibility = parentMemo.visibility;
}
setState((prevState) => ({
...prevState,
memoVisibility: convertVisibilityFromString(visibility),
}));
}, [parentMemoVisibility, userSetting.memoVisibility, workspaceMemoRelatedSetting.disallowPublicVisibility]);
}, [parentMemoName, userSetting.memoVisibility, workspaceMemoRelatedSetting.disallowPublicVisibility]);
useAsyncEffect(async () => {
if (!memoName) {
@ -529,10 +532,19 @@ const MemoEditor = observer((props: Props) => {
</div>
</div>
<div
className="absolute invisible group-focus-within:visible group-hover:visible right-1 top-1 opacity-60"
className={cn(
"absolute right-1 top-1 opacity-60",
"invisible group-focus-within:visible group-hover:visible hover:visible focus-within:visible",
(isVisibilitySelectorOpen || memoName) && "visible",
)}
onFocus={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>
<VisibilitySelector value={state.memoVisibility} onChange={handleMemoVisibilityChange} />
<VisibilitySelector
value={state.memoVisibility}
onChange={handleMemoVisibilityChange}
onOpenChange={setIsVisibilitySelectorOpen}
/>
</div>
</div>
</MemoEditorContext.Provider>

@ -160,7 +160,6 @@ const MemoDetail = observer(() => {
cacheKey={`${memo.name}-${memo.updateTime}-comment`}
placeholder={t("editor.add-your-comment-here")}
parentMemoName={memo.name}
parentMemoVisibility={memo.visibility}
autoFocus
onConfirm={handleCommentCreated}
onCancel={() => setShowCommentEditor(false)}

Loading…
Cancel
Save