Redesign

[blink1073]

I propose the following redesign, staying with the model of having a flat view with breadcrumbs. It is a blend between Cloud9 and Github.

• Selection is done using standard mouse+keyboard interaction
  • Double click to open, click to select
  • Shift + click to select a range
  • Accel + click to toggle selection of individual elements
• Use a context menu for actions
• Add a last modified identifier (e.g. "a year ago")
• Use a specific icon for notebook files to make them stand out from other files

[blink1073]

cc @ellisonbg @sccolbert @cameronoelsen @dwillmer

[ellisonbg]

For now, we are using this hackpad to design the behaviors, features and interactions:

https://jupyter.hackpad.com/Jupyter-Workbench-UIUX-m8yrTt4p5ZA

Could you add this to the file browser section?

In general, I think we need to start with pure mouse based interactions and then add keyboard stuff later. We are finding that it is useful to list things in the form "users should be able to..."

Also, how soon are you wanting to start working on this. Yesterday and today I have been working with @cameronoelsen to finish the menu and phosphide design. We are going to try to push hard on the 4.1 release today. Could we revisit this together on Monday?

[blink1073]

I'll take the conversation there, sure, this can hold off until Monday.

[ellisonbg]

OK, awesome!

On Fri, Nov 20, 2015 at 8:18 AM, Steven Silvester notifications@github.com wrote:

I'll take the conversation there, sure, this can hold off until Monday.

— Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-filebrowser/issues/5#issuecomment-158448084 .

Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[blink1073]

Design notes for potential implementation:

ViewModel

Needs to query and modify the file system, and query and modify notebook session states.

interface FileBrowserViewModel {
  /**
   * Get a list of running session models.
   */
  listRunningSessions: () => Promise<ISessionId>;

  /**
   * Connect to a session by session id.
   */
  connectToSession: (id: string) => Promise<ISessionId>;

  /**
   * Contents provider.
   */
  contents: IContents;

  /**
   * The current directory path.
   */
  currentDirectory: string;

  /**
   * The selected items in the current directory.
   */
  selectedItems: string[];
}

Widget

Consists of a breadcrumb display, icon toolbar, and contents area.

Uses click and dblclick events with keyboard modifiers for selection.

Makes items draggable to folders and breadcrumbs.

Applies classes to the widget to differentiate between single select, no select, and multi-select for command and context menu scoping.

Plugin

Registers phosphide left sidebar content, top level menu items, context menu items, and commands.

Uses the jupyter:editor:new extension point to dynamically open editors.

Assumes contextmenu is handled by phosphide plugin and has a body element listener with CSS scoping.

Uses jupyter-js-metaservices for IContents and session providers, where the baseURL and provider names are fetched using System.import('jupyter-config.json').

[sccolbert]

To me, jupyter:editor:new sounds like a command, not an extension point. An extension point denotes something which is a stateful collection, not a transient action. So, jupyter:editors would be an example of an extension point name to which extensions contribute editors.

[blink1073]

Sounds good to me.

[blink1073]

Calling this one completed.