mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Don't fade right edge of a tab if text doesn't overflow. Fix #4330

Browse source
This commit is contained in:
Tom Najdek 2024-07-05 13:59:40 +02:00 committed by Dan Stillman
parent 73bc0cbb94
commit 21203501a9
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
chrome/content/zotero/components/tabBar.jsx
View file

@ -34,7 +34,7 @@ const SCROLL_ARROW_SCROLL_BY = 222;
const Tab = memo((props) => {
const { icon, id, index, isBeingDragged, isItemType, onContextMenu, onDragEnd, onDragStart, onTabClick, onTabClose, onTabMouseDown, selected, title } = props;
const handleTabMouseDown = useCallback(event => onTabMouseDown(event, id), [onTabMouseDown, id]);
const handleContextMenu = useCallback(event => onContextMenu(event, id), [onContextMenu, id]);
const handleTabClick = useCallback(event => onTabClick(event, id), [onTabClick, id]);
@ -104,14 +104,18 @@ const TabBar = forwardRef(function (props, ref) {
useImperativeHandle(ref, () => ({ setTabs }));
useEffect(() => {
let handleResize = () => updateScrollArrows();
let handleResize = Zotero.Utilities.throttle(() => {
updateScrollArrows();
updateOverflowing();
}, 300, { leading: false });
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
useLayoutEffect(() => updateScrollArrows());
useLayoutEffect(updateScrollArrows);
useLayoutEffect(updateOverflowing, [tabs]);
// Use offsetLeft and offsetWidth to calculate and translate tab X position
useLayoutEffect(() => {
@ -165,6 +169,12 @@ const TabBar = forwardRef(function (props, ref) {
tabsInnerContainerRef.current.classList.remove('scrollable');
}
}
function updateOverflowing() {
tabsInnerContainerRef.current.querySelectorAll('.tab-name').forEach((tabNameDOM) => {
tabNameDOM.classList.toggle('overflowing', tabNameDOM.scrollWidth > tabNameDOM.clientWidth);
});
}
const handleTabMouseDown = useCallback((event, id) => {
// Don't select tab if it'll be closed with middle button click on mouse up

12
scss/components/_tabBar.scss
View file

@ -206,12 +206,14 @@
text-align: start;
white-space: nowrap;
&:dir(ltr) {
mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
}
&.overflowing {
&:dir(ltr) {
mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
}
&:dir(rtl) {
mask-image: linear-gradient(to right, transparent 0px, var(--fill-primary) 20px);
&:dir(rtl) {
mask-image: linear-gradient(to right, transparent 0px, var(--fill-primary) 20px);
}
}
}