[DialogBox] : Improve display for remove folder from workspace

Fixes: #7443 Improves the display of remove from workspace dialog, adds ellipses before the root-name and gives some margin between different items in the dialogBox for better visual impact. Signed-off-by: Anas Shahid <[email protected]>
eclipse-theia · Apr 3, 2020 · fca6f89 · fca6f89
1 parent 5e45d2b
commit fca6f89
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/packages/core/src/browser/style/dialog.css b/packages/core/src/browser/style/dialog.css
@@ -105,3 +105,26 @@
     font-size: var(--theia-ui-font-size1);
     display: block;
 }
+
+.theia-DialogNode{
+    line-height: var(--theia-content-line-height);
+    margin-top: calc(var(--theia-ui-padding)*1.5);
+    margin-left: calc(var(--theia-ui-padding)*2.5);
+}
+
+.theia-DialogNodeContent{
+    display: flex;
+    align-items: center;
+    width: calc(100% - var(--theia-scrollbar-rail-width));
+}
+
+.theia-DialogNodeSegment{
+    flex-grow: 0;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.theia-DialogIcon{
+    align-content: center;
+    margin-right: calc(var(--theia-ui-padding)*1.5);
+}
diff --git a/packages/workspace/src/browser/workspace-commands.ts b/packages/workspace/src/browser/workspace-commands.ts
@@ -403,17 +403,30 @@ export class WorkspaceCommandContribution implements CommandContribution {
         };
     }
 
+    /**
+     * Removes the list of folders from the workspace upon confirmation from the user.
+     * @param uris the list of folder uris to remove.
+     */
     protected async removeFolderFromWorkspace(uris: URI[]): Promise<void> {
-        const roots = new Set(this.workspaceService.tryGetRoots().map(r => r.uri));
-        const toRemove = uris.filter(u => roots.has(u.toString()));
+        const roots = new Set(this.workspaceService.tryGetRoots().map(root => root.uri));
+        const toRemove = uris.filter(uri => roots.has(uri.toString()));
         if (toRemove.length > 0) {
             const messageContainer = document.createElement('div');
-            messageContainer.textContent = 'Remove the following folders from workspace? (note: nothing will be erased from disk)';
-            const list = document.createElement('ul');
-            list.style.listStyleType = 'none';
-            toRemove.forEach(u => {
-                const listItem = document.createElement('li');
-                listItem.textContent = u.displayName;
+            messageContainer.textContent = `Are you sure you want to remove the following folder${toRemove.length > 1 ? 's' : ''} from the workspace?`;
+            messageContainer.title = 'Note: Nothing will be erased from disk';
+            const list = document.createElement('div');
+            list.classList.add('theia-DialogNode');
+            toRemove.forEach(uri => {
+                const listItem = document.createElement('div');
+                listItem.classList.add('theia-DialogNodeContent');
+                const folderIcon = document.createElement('span');
+                folderIcon.classList.add('codicon', 'codicon-root-folder', 'theia-DialogIcon');
+                listItem.appendChild(folderIcon);
+                listItem.title = this.labelProvider.getLongName(uri);
+                const listContent = document.createElement('span');
+                listContent.classList.add('theia-DialogNodeSegment');
+                listContent.appendChild(document.createTextNode(uri.displayName));
+                listItem.appendChild(listContent);
                 list.appendChild(listItem);
             });
             messageContainer.appendChild(list);