From 7d54ebebd8bde1112212dca01182a36c3d9fffb6 Mon Sep 17 00:00:00 2001 From: Jason Grout Date: Wed, 12 Jun 2019 09:50:37 -0700 Subject: [PATCH 1/3] =?UTF-8?q?Changes=20filebrowser=20home=20icon=20to=20?= =?UTF-8?q?the=20text=20=E2=80=9CRoot=E2=80=9D.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit See https://github.com/jupyterlab/jupyterlab/issues/6539 --- packages/filebrowser/src/crumbs.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts index 9ae76e6154e0..45ff1a1bbba3 100644 --- a/packages/filebrowser/src/crumbs.ts +++ b/packages/filebrowser/src/crumbs.ts @@ -29,11 +29,6 @@ const MATERIAL_CLASS = 'jp-MaterialIcon'; */ const BREADCRUMB_CLASS = 'jp-BreadCrumbs'; -/** - * The class name added to add the home icon for the breadcrumbs - */ -const BREADCRUMB_HOME = 'jp-HomeIcon'; - /** * The class named associated to the ellipses icon */ @@ -352,9 +347,9 @@ namespace Private { */ export function createCrumbs(): ReadonlyArray { let home = document.createElement('span'); - home.className = - MATERIAL_CLASS + ' ' + BREADCRUMB_HOME + ' ' + BREADCRUMB_ITEM_CLASS; - home.title = PageConfig.getOption('serverRoot') || 'Home'; + home.textContent = 'Root'; + home.className = BREADCRUMB_ITEM_CLASS; + home.title = PageConfig.getOption('serverRoot') || 'Jupyter Server Root'; let ellipsis = document.createElement('span'); ellipsis.className = MATERIAL_CLASS + ' ' + BREADCRUMB_ELLIPSES + ' ' + BREADCRUMB_ITEM_CLASS; From b2229c00f2d738927e61f3e19366b6d7b8eada72 Mon Sep 17 00:00:00 2001 From: Jason Grout Date: Wed, 12 Jun 2019 13:25:24 -0700 Subject: [PATCH 2/3] Change breadcrumbs to use a folder icon for root and slashes for separators MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This implements @tgeorgux’s design from https://github.com/jupyterlab/jupyterlab/issues/6207 The slight difference in this commit is that it also includes a final slash. This adds a bit to the visual complexity, but makes it much more clear that the final thing is a directory, and you should think about the full path as that directory, slash, something in the filebrowser list. --- packages/filebrowser/src/crumbs.ts | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts index 45ff1a1bbba3..157c290f85d0 100644 --- a/packages/filebrowser/src/crumbs.ts +++ b/packages/filebrowser/src/crumbs.ts @@ -29,6 +29,11 @@ const MATERIAL_CLASS = 'jp-MaterialIcon'; */ const BREADCRUMB_CLASS = 'jp-BreadCrumbs'; +/** + * The class name added to add the folder icon for the breadcrumbs + */ +const BREADCRUMB_HOME = 'jp-FolderIcon'; + /** * The class named associated to the ellipses icon */ @@ -318,27 +323,28 @@ namespace Private { while (firstChild && firstChild.nextSibling) { node.removeChild(firstChild.nextSibling); } + node.appendChild(separators[0]); let parts = path.split('/'); if (parts.length > 2) { - node.appendChild(separators[0]); node.appendChild(breadcrumbs[Crumb.Ellipsis]); let grandParent = parts.slice(0, parts.length - 2).join('/'); breadcrumbs[Crumb.Ellipsis].title = grandParent; + node.appendChild(separators[1]); } if (path) { if (parts.length >= 2) { - node.appendChild(separators[1]); breadcrumbs[Crumb.Parent].textContent = parts[parts.length - 2]; node.appendChild(breadcrumbs[Crumb.Parent]); let parent = parts.slice(0, parts.length - 1).join('/'); breadcrumbs[Crumb.Parent].title = parent; + node.appendChild(separators[2]); } - node.appendChild(separators[2]); breadcrumbs[Crumb.Current].textContent = parts[parts.length - 1]; node.appendChild(breadcrumbs[Crumb.Current]); breadcrumbs[Crumb.Current].title = path; + node.appendChild(separators[3]); } } @@ -347,8 +353,7 @@ namespace Private { */ export function createCrumbs(): ReadonlyArray { let home = document.createElement('span'); - home.textContent = 'Root'; - home.className = BREADCRUMB_ITEM_CLASS; + home.className = `${MATERIAL_CLASS} ${BREADCRUMB_HOME} ${BREADCRUMB_ITEM_CLASS}`; home.title = PageConfig.getOption('serverRoot') || 'Jupyter Server Root'; let ellipsis = document.createElement('span'); ellipsis.className = @@ -365,9 +370,9 @@ namespace Private { */ export function createCrumbSeparators(): ReadonlyArray { let items: HTMLElement[] = []; - for (let i = 0; i < 3; i++) { - let item = document.createElement('i'); - item.className = 'fa fa-angle-right'; + for (let i = 0; i < 4; i++) { + let item = document.createElement('span'); + item.textContent = '/'; items.push(item); } return items; From 2a3827f5f9d113bcad648b2af8f1e887df901b53 Mon Sep 17 00:00:00 2001 From: Jason Grout Date: Thu, 13 Jun 2019 09:10:22 -0700 Subject: [PATCH 3/3] Document the separator generation better. --- packages/filebrowser/src/crumbs.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts index 157c290f85d0..542677e4cbc8 100644 --- a/packages/filebrowser/src/crumbs.ts +++ b/packages/filebrowser/src/crumbs.ts @@ -370,7 +370,12 @@ namespace Private { */ export function createCrumbSeparators(): ReadonlyArray { let items: HTMLElement[] = []; - for (let i = 0; i < 4; i++) { + // The maximum number of directories that will be shown in the crumbs + const MAX_DIRECTORIES = 2; + + // Make separators for after each directory, one at the beginning, and one + // after a possible ellipsis. + for (let i = 0; i < MAX_DIRECTORIES + 2; i++) { let item = document.createElement('span'); item.textContent = '/'; items.push(item);