mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: calculate margin-top after expand animation (#9983)

Browse Source 
* fix: calculate margin top after expand animation

* fix: Forgot to take into account has-active

* fix: Formatting before push
This commit is contained in:
octaviusz
2025-08-24 17:53:16 +03:00
committed by GitHub
parent f2093e2153
commit 4abac03238
1 changed files with 65 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/zen/folders/ZenFolders.mjs
View File

@@ -479,38 +479,6 @@
const groupStart = group.querySelector('.zen-tab-group-start');
const animations = [];
tabsContainer.style.overflow = 'hidden';
if (group.hasAttribute('has-active')) {
const activeTabs = group.activeTabs;
const folders = new Map();
group.removeAttribute('has-active');
for (let tab of activeTabs) {
const group = tab?.group?.hasAttribute('split-view-group')
? tab?.group?.group
: tab?.group;
if (!folders.has(group?.id)) {
folders.set(group?.id, group?.activeGroups?.at(-1));
}
let activeGroup = folders.get(tab?.group?.id);
// If group has active tabs, we need to update the indentation
if (activeGroup) {
this.setFolderIndentation([tab], activeGroup, /* for collapse = */ true);
} else {
// Since the folder is now expanded, we should remove active attribute
// to the tab that was previously visible
tab.removeAttribute('folder-active');
if (tab.group?.hasAttribute('split-view-group')) {
tab.group.style.removeProperty('--zen-folder-indent');
} else {
tab.style.removeProperty('--zen-folder-indent');
}
}
}
folders.clear();
}
// Folder has been expanded and has no active tabs
group.activeTabs = [];
const normalizeGroupItems = (items) => {
const processed = [];
@@ -619,8 +587,66 @@
)
.then(() => {
tabsContainer.style.overflow = '';
if (group.hasAttribute('has-active')) {
const activeTabs = group.activeTabs;
const folders = new Map();
group.removeAttribute('has-active');
for (let tab of activeTabs) {
const group = tab?.group?.hasAttribute('split-view-group')
? tab?.group?.group
: tab?.group;
if (!folders.has(group?.id)) {
folders.set(group?.id, group?.activeGroups?.at(-1));
}
let activeGroup = folders.get(tab?.group?.id);
// If group has active tabs, we need to update the indentation
if (activeGroup) {
const activeGroupStart = activeGroup.querySelector('.zen-tab-group-start');
const selectedTabs = activeGroup.activeTabs;
if (selectedTabs.length > 0) {
const selectedItem = selectedTabs[0];
const isSplitView = selectedItem.group?.hasAttribute('split-view-group');
const selectedContainer = isSplitView ? selectedItem.group : selectedItem;
const heightUntilSelected =
window.windowUtils.getBoundsWithoutFlushing(selectedContainer).top -
window.windowUtils.getBoundsWithoutFlushing(activeGroupStart).bottom;
const adjustedHeight = isSplitView
? heightUntilSelected - 2
: heightUntilSelected;
animations.push(
gZenUIManager.motion.animate(
activeGroupStart,
{
marginTop: -(adjustedHeight + 4),
},
{ duration: 0, ease: 'linear' }
)
);
}
this.setFolderIndentation([tab], activeGroup, /* for collapse = */ true);
} else {
// Since the folder is now expanded, we should remove active attribute
// to the tab that was previously visible
tab.removeAttribute('folder-active');
if (tab.group?.hasAttribute('split-view-group')) {
tab.group.style.removeProperty('--zen-folder-indent');
} else {
tab.style.removeProperty('--zen-folder-indent');
}
}
}
folders.clear();
}
// Folder has been expanded and has no active tabs
group.activeTabs = [];
})
);
this.#animationCount += 1;
await Promise.all(animations);
this.#animationCount -= 1;
@@ -1305,8 +1331,13 @@
const activeForGroup = selectedItems.filter((t) => current.contains(t));
if (activeForGroup.length) {
if (current.collapsed) {
current.setAttribute('has-active', 'true');
current.activeTabs = activeForGroup;
if (current.hasAttribute('has-active')) {
current.activeTabs = [...new Set([...current.activeTabs, ...activeForGroup])];
} else {
current.setAttribute('has-active', 'true');
current.activeTabs = activeForGroup;
}
const tabsContainer = current.querySelector('.tab-group-container');
const groupStart = current.querySelector('.zen-tab-group-start');
const curMarginTop = parseInt(groupStart.style.marginTop) || 0;