Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Add workspace switching by horizontally scrolling sidebar #2828

Conversation

kristijanribaric
Copy link
Contributor

This PR adds the ability to switch workspaces by horizontally scrolling the sidebar. A scroll cooldown and threshold are implemented to prevent accidental workspace changes. The _setupHoverDetection method is renamed to _setupSidebarHandlers as it now handles both hover and scroll events.

This commit adds the ability to switch workspaces by horizontally
scrolling the sidebar.  A scroll cooldown and threshold are
implemented to prevent accidental workspace changes.  The
`_setupHoverDetection` method is renamed to `_setupSidebarHandlers`
as it now handles both hover and scroll events.
@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. Feature labels Nov 10, 2024
Copy link
Member

@mr-cheff mr-cheff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Nov 10, 2024
@mr-cheff mr-cheff merged commit 110279c into zen-browser:dev Nov 10, 2024
1 check passed
@iskaa02
Copy link

iskaa02 commented Nov 11, 2024

wouldn't be better to make the switching animation a non-linear animation.
my idea would be rendering the next and previous workspaces, when switching animate the position (also animate background) by interpolating gesture/scroll, and when the animation is finished switch the workspace, this would look much better and smoother, also would eliminate the need for entering animation for tabs.

// example pseudo code
// State
let currentWorkspace = 0;
let transitioning = false;
let scrollPos = 0; // Scroll progress (-1 to 1)

// Scroll event (hypothetical)
onScroll(progress => { 
  scrollPos = progress;
  updateWorkspaceTransforms(currentWorkspace, progress); // Non-linear visual update
});

onScrollEnd(() => {
  if (Math.abs(scrollPos) > 0.5) {
    goToWorkspace(Math.sign(scrollPos));
  } else {
    animateTo(currentWorkspace); // Snap back
  }
  scrollPos = 0;
});


// Switching
function goToWorkspace(direction) {
  if (transitioning) return;
  transitioning = true;
  const nextWorkspace = currentWorkspace + direction; //... bounds checking
  animateTo(nextWorkspace, () => {
    currentWorkspace = nextWorkspace;
    transitioning = false;
  });
}

// Animation (hypothetical functions)
function updateWorkspaceTransforms(current, progress) {
  // ... apply non-linear transforms based on progress, to current and next ...
}

function animateTo(targetWorkspace, onComplete = () => {}) {
  // ... animate workspaces to target positions (with easing if needed) ...
  onComplete(); // Callback when animation finished.
}

@kristijanribaric
Copy link
Contributor Author

That would require significant changes to Firefox source code where you wouldn't just create a tab in a tab container, you would have a different tab container depending on a workspace... All in all it's not that trivial and it would require major refactoring for a small gain

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature lgtm This PR has been approved by a maintainer size:S This PR changes 10-29 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants