From 8f5f51c5514b4956374ebc522debfdbbb69acf9d Mon Sep 17 00:00:00 2001 From: Aries Date: Thu, 19 Sep 2024 16:27:55 +0800 Subject: [PATCH] Improve/sync title with view (#6789) * update title and favicon * sync title when rename view --- .../src/metadata/metadata-tree-view/index.js | 43 +++++++++++++++++- .../metadata-tree-view/view-item/index.js | 8 +++- media/favicons/gallery.png | Bin 0 -> 799 bytes media/favicons/table.png | Bin 0 -> 524 bytes 4 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 media/favicons/gallery.png create mode 100644 media/favicons/table.png diff --git a/frontend/src/metadata/metadata-tree-view/index.js b/frontend/src/metadata/metadata-tree-view/index.js index 5f57a16939e..0f62aa2203a 100644 --- a/frontend/src/metadata/metadata-tree-view/index.js +++ b/frontend/src/metadata/metadata-tree-view/index.js @@ -15,6 +15,22 @@ import { isEnter } from '../utils/hotkey'; import './index.css'; +const updateFavicon = (iconName) => { + const favicon = document.getElementById('favicon'); + if (favicon) { + switch (iconName) { + case 'image': + favicon.href = '/media/favicons/gallery.png'; + break; + case 'table': + favicon.href = '/media/favicons/table.png'; + break; + default: + favicon.href = '/media/favicons/favicon.png'; + } + } +}; + const MetadataTreeView = ({ userPerm, currentPath }) => { const canAdd = useMemo(() => { if (userPerm !== 'rw' && userPerm !== 'admin') return false; @@ -33,11 +49,15 @@ const MetadataTreeView = ({ userPerm, currentPath }) => { moveView } = useMetadata(); const [newView, setNewView] = useState(null); - const [showAddViewPopover, setShowAddViewPopover] = useState(false); const [showInput, setShowInput] = useState(false); - const inputRef = useRef(null); const [inputValue, setInputValue] = useState(''); + const [originalTitle, setOriginalTitle] = useState(''); + const inputRef = useRef(null); + + useEffect(() => { + setOriginalTitle(document.title); + }, []); useEffect(() => { const { origin, pathname, search } = window.location; @@ -47,6 +67,8 @@ const MetadataTreeView = ({ userPerm, currentPath }) => { const lastOpenedView = viewsMap[viewID] || ''; if (lastOpenedView) { selectView(lastOpenedView); + document.title = `${lastOpenedView.name} - Seafile`; + updateFavicon(VIEW_TYPE_ICON[lastOpenedView.type] || 'table'); return; } const url = `${origin}${pathname}`; @@ -57,10 +79,27 @@ const MetadataTreeView = ({ userPerm, currentPath }) => { const firstView = firstViewObject ? viewsMap[firstViewObject._id] : ''; if (showFirstView && firstView) { selectView(firstView); + document.title = `${firstView.name} - Seafile`; + updateFavicon(VIEW_TYPE_ICON[firstView.type] || 'table'); + } else { + document.title = originalTitle; + updateFavicon('default'); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + const currentViewId = currentPath.split('/').pop(); + const currentView = viewsMap[currentViewId]; + if (currentView) { + document.title = `${currentView.name} - Seafile`; + updateFavicon(VIEW_TYPE_ICON[currentView.type] || 'table'); + } else { + document.title = originalTitle; + updateFavicon('default'); + } + }, [currentPath, viewsMap, originalTitle]); + const onUpdateView = useCallback((viewId, update, successCallback, failCallback) => { updateView(viewId, update, () => { setState(n => n + 1); diff --git a/frontend/src/metadata/metadata-tree-view/view-item/index.js b/frontend/src/metadata/metadata-tree-view/view-item/index.js index 0f1fbcbf5ce..bad7b638add 100644 --- a/frontend/src/metadata/metadata-tree-view/view-item/index.js +++ b/frontend/src/metadata/metadata-tree-view/view-item/index.js @@ -100,8 +100,12 @@ const ViewItem = ({ const renameView = useCallback((name, failCallback) => { onUpdate({ name }, () => { setRenamePopoverShow(false); - }, failCallback); - }, [onUpdate]); + document.title = `${name} - Seafile`; + }, (error) => { + failCallback(error); + document.title = `${view.name} - Seafile`; + }); + }, [onUpdate, view.name]); const onDragStart = useCallback((event) => { if (!canDrop) return false; diff --git a/media/favicons/gallery.png b/media/favicons/gallery.png new file mode 100644 index 0000000000000000000000000000000000000000..ce7c2caeac30c39c786ed9699c7f114424f18b8a GIT binary patch literal 799 zcmV+)1K|9LP)whR`BOyLG7U;{`62q@uU}_(1Rxhp?DL#DhRF!f+uf6@!~}f1rPP_APPmQt03;m zCQY1|nC`k}k~G`h^}&+toA=)Ly>BL&41=`sOT{(whA{~n`vJR)e2p_U3x+98i1Eo= z*-y*?FB{VmSZ^GtUu9O%lA@nGoi`nv2-!Meb60jhhE4FvDd&x!^PooTE=i!Z)^Y*~ zRsS0{X*fBSMVnq9$8QA-5AGK6{>{8El(PEB=}g_=gh&lgEtM%1XkYDeyK(ggzRp>y z{6PQ8c8-Z_Ie4}Ff|Uv|#+>-L;FRp;dbRurC>5v;J~WiVz}_U@&X{;~zXU6uD79sw zRG>PtqmyH3I1POj$G~6`+jfZR;kxc45im{2j_n1Ya=CK9;EZ__i9q3tg@^Y_c=y`G zlgGa>^GY(RvbF0qh?t^8UIQ^)XrJUjJbqS1~&*IO+7q-cpwE@GtZuuJy+m0k^;N;2<$uPN=?<4 z=QwgJ)Tu{C(%8N;T5q9InJmM`%?V7uT-@sF?Gw&RE3kbz7)qd2w2{A43ab-)T&bf? zlPrxkl(^>QdbRxOC>5CdY@wr5b9OVo#Kriimdcdv(S}1G6ZIO^pjs+pS1x{Ex)-|& zCBUy#ARuQ+hyDiw@~qY}W3!wNimk)P6sJ=vzzWSLArGe#o6`}QPN{NR%S$3nm<~Fg dvpiuE_HXiws(UM2s{8-|002ovPDHLkV1m3ZWIX@? literal 0 HcmV?d00001 diff --git a/media/favicons/table.png b/media/favicons/table.png new file mode 100644 index 0000000000000000000000000000000000000000..3edd84faa51a847d966de6b4167904c3f8a5ae49 GIT binary patch literal 524 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmUKs7M+SzC{oH>NS%G|u)CkWs zUtb0-Ae)1Mu|1Q41;}CqVksbIU|?Fn1Q$_Qz>HvnB>VjwP68Fzd%8G=L~tGrH}qpR z6u7gsZ(0+RrjV%o0#~oDl0VA*9{VQTQO>Ajj_p#o_^C0(!$U-5i^|Okh3F%n=EWx5 z?tQv<=iHkgPwq?ol)P)wY+2bVp?O>PatLwG$<-%TF>`mo2CNeVdJ|=p0{muA+HM^YkBV54XM?lFyje?zT}b^}v&zvb#b) y^(K8-@#j);)9r<>ZqrZs_?vEHmU+OWzN6pWC08_WW;`fH7(8A5T-G@yGywoL70amr literal 0 HcmV?d00001