[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 · Mar 31, 2020 · 7fbff45 · 7fbff45
1 parent 743836e
commit 7fbff45
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/workspace/src/browser/workspace-commands.ts b/packages/workspace/src/browser/workspace-commands.ts
@@ -413,8 +413,15 @@ export class WorkspaceCommandContribution implements CommandContribution {
             list.style.listStyleType = 'none';
             toRemove.forEach(u => {
                 const listItem = document.createElement('li');
-                listItem.textContent = u.displayName;
+                const listContent = document.createElement('div');
+                const icon = document.createElement('i');
+                icon.classList.add('fa', 'fa-circle-o');
+                icon.style.marginRight = '0.5em';
+                listContent.appendChild(icon);
+                listContent.appendChild(document.createTextNode(u.displayName));
+                listItem.appendChild(listContent);
                 list.appendChild(listItem);
+                listItem.style.marginBottom = '0.5rem';
             });
             messageContainer.appendChild(list);
             const dialog = new ConfirmDialog({