May 29, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023
diff --git a/packages/tree-extension/src/fileactions.tsx b/packages/tree-extension/src/fileactions.tsx
 const Commands = ({
  commands,
  browser,
  translator,
 }: {
  commands: CommandRegistry;
  browser: FileBrowser;
  translator: ITranslator;
 }): JSX.Element => {
  const trans = translator.load('notebook');
  const selection = Array.from(browser.selectedItems());
  const oneFolder = selection.some((item) => item.type === 'directory');
  const multipleFiles =
    selection.filter((item) => item.type === 'file').length > 1;
  if (selection.length === 0) {
    // TODO: trans
    return <div>Select items to perform actions on them.</div>;
    return <div>{trans.__('Select items to perform actions on them.')}</div>;
  } else {
    const buttons = ['delete'];
    if (!oneFolder) {
            commands={commands}
            id={`filebrowser:${action}`}
            args={{ toolbar: true }}
            icon={undefined}
          />
        ))}
      </>
  translator: ITranslator;
 }): JSX.Element => {
  return (
    <UseSignal signal={selectionChanged}>
      {(): JSX.Element => <Commands commands={commands} browser={browser} />}
    <UseSignal signal={selectionChanged} shouldUpdate={() => true}>
      {(): JSX.Element => (
        <Commands
          commands={commands}
          browser={browser}
          translator={translator}
        />
      )}
    </UseSignal>
  );
 };
diff --git a/packages/tree-extension/src/index.ts b/packages/tree-extension/src/index.ts
    nbTreeWidget.tabsMovable = false;

    // The file browser currently does not provide a way to detect when
    // the selection changes. So we define a custom mutation observer
    // the selection changes. So we define a custom mutation observer as a workaround.
    // TODO: add link to the upstream JupyterLab issue
    const selectionChanged = new Signal<FileBrowser, void>(browser);
    const observer = new MutationObserver((mutationList, observer) => {
      for (const mutation of mutationList) {
        console.log('mutation');
        if (mutation.type === 'childList') {
          console.log('change selection');
          selectionChanged.emit(void 0);
        }
      }
    });
    const config = {attributes: true,childList: true, subtree: true };
    observer.observe(browser.node, config);
    const config = { childList: true, subtree: true };
    observer.observe(browser.content.node, config);

    // Create a toolbar item that adds buttons to the file browser toolbar
    // to perform actions on the files
diff --git a/packages/tree-extension/style/base.css b/packages/tree-extension/style/base.css
 .jp-DirListing-content .jp-DirListing-checkboxWrapper {
  visibility: visible;
 }

 /* Action buttons */

 .jp-FileBrowser-toolbar > .jp-FileActions.jp-Toolbar-item {
  display: flex;
  flex-direction: row;
 }

 .jp-FileActions .jp-ToolbarButtonComponent-icon {
  display: none;
 }

 .jp-FileActions .jp-ToolbarButtonComponent[data-command='filebrowser:delete'] {
  background-color: var(--jp-error-color1);
 }

 .jp-FileBrowser-toolbar .jp-FileActions .jp-ToolbarButtonComponent {
  border: solid 1px var(--jp-border-color2);
  margin: 1px;
  height: 100%;
 }
diff --git a/packages/tree/style/base.css b/packages/tree/style/base.css
 .jp-TreePanel .lm-TabBar-tabIcon svg {
  vertical-align: sub;
 }

 .jp-FileActions {
  display: flex;
  flex-direction: row;
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,17 +24,19 @@ import React from 'react';
		const Commands = ({
		commands,
		browser,
		translator,
		}: {
		commands: CommandRegistry;
		browser: FileBrowser;
		translator: ITranslator;
		}): JSX.Element => {
		const trans = translator.load('notebook');
		const selection = Array.from(browser.selectedItems());
		const oneFolder = selection.some((item) => item.type === 'directory');
		const multipleFiles =
		selection.filter((item) => item.type === 'file').length > 1;
		if (selection.length === 0) {
		// TODO: trans
		return <div>Select items to perform actions on them.</div>;
		return <div>{trans.__('Select items to perform actions on them.')}</div>;
		} else {
		const buttons = ['delete'];
		if (!oneFolder) {
Expand All		@@ -56,6 +58,7 @@ const Commands = ({
		commands={commands}
		id={`filebrowser:${action}`}
		args={{ toolbar: true }}
		icon={undefined}
		/>
		))}
		</>
Expand All		@@ -80,8 +83,14 @@ const FileActions = ({
		translator: ITranslator;
		}): JSX.Element => {
		return (
		<UseSignal signal={selectionChanged}>
		{(): JSX.Element => <Commands commands={commands} browser={browser} />}
		<UseSignal signal={selectionChanged} shouldUpdate={() => true}>
		{(): JSX.Element => (
		<Commands
		commands={commands}
		browser={browser}
		translator={translator}
		/>
		)}
		</UseSignal>
		);
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -243,18 +243,20 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
		nbTreeWidget.tabsMovable = false;

		// The file browser currently does not provide a way to detect when
		// the selection changes. So we define a custom mutation observer
		// the selection changes. So we define a custom mutation observer as a workaround.
		// TODO: add link to the upstream JupyterLab issue
		const selectionChanged = new Signal<FileBrowser, void>(browser);
		const observer = new MutationObserver((mutationList, observer) => {
		for (const mutation of mutationList) {
		console.log('mutation');
		if (mutation.type === 'childList') {
		console.log('change selection');
		selectionChanged.emit(void 0);
		}
		}
		});
		const config = {attributes: true,childList: true, subtree: true };
		observer.observe(browser.node, config);
		const config = { childList: true, subtree: true };
		observer.observe(browser.content.node, config);

		// Create a toolbar item that adds buttons to the file browser toolbar
		// to perform actions on the files
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,3 +28,24 @@
		.jp-DirListing-content .jp-DirListing-checkboxWrapper {
		visibility: visible;
		}

		/* Action buttons */

		.jp-FileBrowser-toolbar > .jp-FileActions.jp-Toolbar-item {
		display: flex;
		flex-direction: row;
		}

		.jp-FileActions .jp-ToolbarButtonComponent-icon {
		display: none;
		}

		.jp-FileActions .jp-ToolbarButtonComponent[data-command='filebrowser:delete'] {
		background-color: var(--jp-error-color1);
		}

		.jp-FileBrowser-toolbar .jp-FileActions .jp-ToolbarButtonComponent {
		border: solid 1px var(--jp-border-color2);
		margin: 1px;
		height: 100%;
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,8 +49,3 @@ button[data-command='filebrowser:refresh'] .jp-ToolbarButtonComponent-label {
		.jp-TreePanel .lm-TabBar-tabIcon svg {
		vertical-align: sub;
		}

		.jp-FileActions {
		display: flex;
		flex-direction: row;
		}