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.

Sign up for GitHub

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

Prevent listing/favourite icon jitter #21

Merged
merged 1 commit into from
Nov 13, 2023
Merged

Prevent listing/favourite icon jitter #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,8 @@
"@jupyterlab/services": "^7.0.5",
"@jupyterlab/settingregistry": "^4.0.5",
"@jupyterlab/ui-components": "^4.0.5",
"@lumino/algorithm": "^2.0.0",
"@lumino/commands": "^2.0.1",
"@lumino/coreutils": "^2.0.1",
"@lumino/polling": "^2.0.0",
"@lumino/signaling": "^2.0.0",
"@lumino/widgets": "^2.0.1"
},
Expand Down
2 changes: 1 addition & 1 deletion src/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export const FavoritesBreadCrumbs: React.FunctionComponent<
const icon = getFavoritesIcon(isFavorite);
return (
<button
className="jp-ToolbarButtonComponent"
className="jp-ToolbarButtonComponent jp-Button jp-mod-minimal"
title={getPinnerActionDescription(isFavorite)}
onClick={e => {
props.handleClick(currentPath);
Expand Down
27 changes: 9 additions & 18 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import {
import { IMainMenu } from '@jupyterlab/mainmenu';
import { ISettingRegistry } from '@jupyterlab/settingregistry';
import { ReactWidget, UseSignal, folderIcon } from '@jupyterlab/ui-components';
import { toArray } from '@lumino/algorithm';
import { Throttler } from '@lumino/polling';
import { Menu, PanelLayout, Widget } from '@lumino/widgets';
import React from 'react';
import { FavoritesBreadCrumbs, FavoritesWidget } from './components';
Expand All @@ -30,11 +28,15 @@ export { IFavorites } from './token';
const BREADCRUMBS_CLASS = 'jp-FileBrowser-crumbs';

/**
* The class name for the node containing the FileBrowser BreadCrumbs favorite icon. This node
* is also responsible for click actions on the icon.
* The class name for the node containing the FileBrowser BreadCrumbs favorite icon.
*/
const FAVORITE_ITEM_PINNER_CLASS = 'jp-Favorites-pinner';

/**
* Modifier class added to breadcrumbs to ensure the favourite icon has enough spacing.
*/
const BREADCUMBS_FAVORITES_CLASS = 'jp-Favorites-crumbs';

/**
* Initialization data for the jupyterlab-favorites extension.
*/
Expand Down Expand Up @@ -108,19 +110,8 @@ const favorites: JupyterFrontEndPlugin<IFavorites> = {
);
favoriteIcon.addClass(FAVORITE_ITEM_PINNER_CLASS);
Widget.attach(favoriteIcon, breadcrumbs as HTMLElement);
const throttler = new Throttler(() => {
breadcrumbs.insertAdjacentElement('beforeend', favoriteIcon.node);
});
const observer = new MutationObserver(() => {
throttler.invoke();
});

observer.observe(breadcrumbs, { childList: true });

filebrowser.disposed.connect(() => {
throttler.dispose();
observer.disconnect();
});
breadcrumbs.insertAdjacentElement('beforebegin', favoriteIcon.node);
breadcrumbs.classList.add(BREADCUMBS_FAVORITES_CLASS);
};

filebrowser.model.pathChanged.connect(initializeBreadcrumbsIcon);
Expand All @@ -134,7 +125,7 @@ const favorites: JupyterFrontEndPlugin<IFavorites> = {
if (!widget) {
return [];
}
return toArray(widget.selectedItems());
return Array.from(widget.selectedItems());
};
const { tracker } = factory;

Expand Down
26 changes: 14 additions & 12 deletions src/manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ export class FavoritesManager {
}

isVisible(): boolean {
return this._showWidget && this.visibleFavorites().length > 0;
return this._showWidget && this.visibleFavorites(false).length > 0;
}

hasFavorite(path: string): boolean {
return this.visibleFavorites().findIndex(f => f.path === path) >= 0;
return this.visibleFavorites(false).findIndex(f => f.path === path) >= 0;
}

handleClick(favorite: IFavorites.Favorite): void {
Expand Down Expand Up @@ -161,16 +161,18 @@ export class FavoritesManager {
}
}

visibleFavorites(): IFavorites.Favorite[] {
return this.favorites
.filter(f => !f.hidden)
.sort((a, b) => {
if (a.contentType === b.contentType) {
return getName(a.path) <= getName(b.path) ? -1 : 1;
} else {
return a.contentType < b.contentType ? -1 : 1;
}
});
visibleFavorites(sort: boolean = true): IFavorites.Favorite[] {
const filtered = this.favorites.filter(f => !f.hidden);
if (!sort) {
return filtered;
}
return filtered.sort((a, b) => {
if (a.contentType === b.contentType) {
return getName(a.path) <= getName(b.path) ? -1 : 1;
} else {
return a.contentType < b.contentType ? -1 : 1;
}
});
}

private clearFavoritesOrRestoreDefaults(hidden: boolean) {
Expand Down
27 changes: 18 additions & 9 deletions style/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
.jp-Favorites-pinner {
float: right;
cursor: pointer;
position: absolute;
right: 0;
overflow: visible;

/* aimed to match the upstream breadcrumbs */
margin: 8px 12px;
}

.jp-Favorites-BreadCrumbs-Icon svg {
border-radius: var(--jp-border-radius);
cursor: pointer;
.jp-Favorites-pinner > .jp-ToolbarButtonComponent {
height: 24px;
margin-top: -5px;
}

.jp-Favorites-crumbs {
margin-right: 40px;
}

.jp-Favorites-BreadCrumbs-Icon,
.jp-Favorites-BreadCrumbs-Icon > svg {
height: 16px;
margin: 0 2px;
padding: 0 2px;
vertical-align: middle;
width: 16px;
}

Expand Down Expand Up @@ -45,7 +54,7 @@
background-color: var(--jp-layout-color2);
}

.jp-Favorites-itemIcon svg {
.jp-Favorites-itemIcon > svg {
display: block;
height: 16px;
margin: 0 5px;
Expand Down
6 changes: 2 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,10 +191,8 @@ __metadata:
"@jupyterlab/services": ^7.0.5
"@jupyterlab/settingregistry": ^4.0.5
"@jupyterlab/ui-components": ^4.0.5
"@lumino/algorithm": ^2.0.0
"@lumino/commands": ^2.0.1
"@lumino/coreutils": ^2.0.1
"@lumino/polling": ^2.0.0
"@lumino/signaling": ^2.0.0
"@lumino/widgets": ^2.0.1
"@types/json-schema": ^7.0.11
Expand Down Expand Up @@ -674,7 +672,7 @@ __metadata:
languageName: node
linkType: hard

"@lumino/algorithm@npm:^2.0.0, @lumino/algorithm@npm:^2.0.1":
"@lumino/algorithm@npm:^2.0.1":
version: 2.0.1
resolution: "@lumino/algorithm@npm:2.0.1"
checksum: cbf7fcf6ee6b785ea502cdfddc53d61f9d353dcb9659343511d5cd4b4030be2ff2ca4c08daec42f84417ab0318a3d9972a17319fa5231693e109ab112dcf8000
Expand Down Expand Up @@ -766,7 +764,7 @@ __metadata:
languageName: node
linkType: hard

"@lumino/polling@npm:^2.0.0, @lumino/polling@npm:^2.1.2":
"@lumino/polling@npm:^2.1.2":
version: 2.1.2
resolution: "@lumino/polling@npm:2.1.2"
dependencies:
Expand Down
Loading