fix(web): clarify selected notebook styling
This commit is contained in:
1 parent
3164e7fffc
commit
2bc0018a01
2 files changed
+6
-14
No files matched your search
@@ -8,7 +8,6 @@ import {
|
||||
hasNotebookDragData,
|
||||
getMemoDragIds,
|
||||
getNotebookDropPosition,
|
||||
notebookTreeContainsId,
|
||||
focusNotebookTreeButton,
|
||||
NOTEBOOK_DRAG_MIME,
|
||||
setMemoDragPreview,
|
||||
@@ -65,7 +64,6 @@ export const NotebookTreeItem = ({
|
||||
const showsSplitCount = !showDescendantNotes && hasChildren;
|
||||
const selected = node.id === selectedNotebookId;
|
||||
const isInbox = node.slug === "inbox";
|
||||
const hasSelectedDescendant = selectedNotebookId ? notebookTreeContainsId(node.children, selectedNotebookId) : false;
|
||||
const [dropPosition, setDropPosition] = useState<NotebookDropPosition | null>(null);
|
||||
const [actionsOpen, setActionsOpen] = useState(false);
|
||||
const actionsRef = useRef<HTMLDivElement>(null);
|
||||
@@ -178,9 +176,7 @@ export const NotebookTreeItem = ({
|
||||
"group relative flex h-9 cursor-pointer items-center gap-1 rounded-md px-2 text-xs transition-all duration-200 select-none",
|
||||
selected
|
||||
? "edgeever-workspace-selection font-medium text-slate-950"
|
||||
: hasSelectedDescendant
|
||||
? "bg-slate-50 text-slate-900 hover:bg-slate-100"
|
||||
: "text-slate-700 hover:bg-slate-50",
|
||||
: "text-slate-700 hover:bg-slate-50",
|
||||
dropPosition === "inside" && "ring-2 ring-slate-300",
|
||||
dropPosition === "inside" && hasChildren && !open && "bg-slate-100"
|
||||
)}
|
||||
@@ -270,11 +266,11 @@ export const NotebookTreeItem = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<NotebookIcon className={cn("h-4 w-4 shrink-0 transition-colors duration-200", selected || hasSelectedDescendant ? "text-slate-700" : "text-slate-500")} />
|
||||
<NotebookIcon className={cn("h-4 w-4 shrink-0 transition-colors duration-200", selected ? "text-slate-700" : "text-slate-500")} />
|
||||
<span
|
||||
className={cn(
|
||||
"truncate font-medium transition-colors duration-200",
|
||||
selected ? "text-slate-950" : hasSelectedDescendant ? "text-slate-900" : "text-slate-800 group-hover:text-slate-950"
|
||||
"truncate transition-colors duration-200",
|
||||
selected ? "font-semibold text-black dark:text-slate-950" : "font-medium text-slate-800 group-hover:text-slate-950"
|
||||
)}
|
||||
>
|
||||
{node.name}
|
||||
|
||||
@@ -20,7 +20,6 @@ import {
|
||||
filterNotebookTree,
|
||||
getExpandableNotebookIds,
|
||||
getNotebookAncestorIds,
|
||||
notebookTreeContainsId,
|
||||
} from "@/lib/app-helpers";
|
||||
|
||||
const MobileBottomNavButton = ({
|
||||
@@ -332,7 +331,6 @@ const MobileNotebookPickerItem = ({
|
||||
const { t } = useTranslation();
|
||||
const selected = node.id === selectedNotebookId;
|
||||
const hasChildren = node.children.length > 0;
|
||||
const hasSelectedDescendant = selectedNotebookId ? notebookTreeContainsId(node.children, selectedNotebookId) : false;
|
||||
const expanded = searchActive || expandedNotebookIds.has(node.id);
|
||||
|
||||
return (
|
||||
@@ -342,10 +340,8 @@ const MobileNotebookPickerItem = ({
|
||||
className={cn(
|
||||
"flex h-12 w-full items-center gap-3 rounded-md px-3 text-left text-sm transition",
|
||||
selected
|
||||
? "bg-slate-100 font-semibold text-slate-950"
|
||||
: hasSelectedDescendant
|
||||
? "bg-slate-50 text-slate-900 hover:bg-slate-100"
|
||||
: "text-slate-800 hover:bg-slate-50"
|
||||
? "bg-slate-100 font-semibold text-black dark:text-slate-950"
|
||||
: "text-slate-800 hover:bg-slate-50"
|
||||
)}
|
||||
style={{ paddingLeft: `${12 + depth * 18}px` }}
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user