Add icons and captions to view tabs

Signed-off-by: William Gonzalez <William.Gonzalez@arm.com>
eclipse-theia · Sep 27, 2018 · fd9dfca · fd9dfca
1 parent 023a89c
commit fd9dfca
Show file tree

Hide file tree

Showing 24 changed files with 88 additions and 10 deletions.
diff --git a/packages/callhierarchy/src/browser/callhierarchy-tree/callhierarchy-tree-widget.tsx b/packages/callhierarchy/src/browser/callhierarchy-tree/callhierarchy-tree-widget.tsx
@@ -46,7 +46,8 @@ export class CallHierarchyTreeWidget extends TreeWidget {
 
         this.id = CALLHIERARCHY_ID;
         this.title.label = 'Call Hierarchy';
-        this.title.iconClass = 'fa fa-arrow-circle-down';
+        this.title.caption = 'Call Hierarchy';
+        this.title.iconClass = 'fa call-hierarchy-tab-icon';
         this.title.closable = true;
         this.addClass(HIERARCHY_TREE_CLASS);
         this.toDispose.push(this.model.onSelectionChanged(selection => {

diff --git a/packages/callhierarchy/src/browser/style/index.css b/packages/callhierarchy/src/browser/style/index.css
@@ -60,3 +60,7 @@
     text-overflow: ellipsis;
     color: var(--theia-ui-font-color2);
 }
+
+.call-hierarchy-tab-icon::before {
+    content: "\f0ab"
+}
diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
@@ -46,6 +46,7 @@
   position: relative;
   padding: 12px 8px;
   background: var(--theia-layout-color2);
+  flex-direction: column;
 }
 
 .p-TabBar.theia-app-left .p-TabBar-tab {
@@ -84,11 +85,11 @@
   position: absolute;
   min-height: var(--theia-private-sidebar-tab-width);
   max-height: var(--theia-private-sidebar-tab-width);
+  align-items: flex-start;
 }
 
 .p-TabBar.theia-app-sides .p-TabBar-tabIcon {
-  position: absolute;
-  transform: scale(1.5) translate(3px,1px);
+  transform: scale(1.5);
   max-height: 15px;
 }
 

diff --git a/packages/debug/src/browser/style/index.css b/packages/debug/src/browser/style/index.css
@@ -235,3 +235,7 @@ div[orientation='vertical'] > .theia-debug-entry > .theia-TreeContainer > div >
     background: var(--theia-layout-color0);
     height: 380px
 }
+
+.debug-tab-icon::before {
+    content: "\f188"
+}
diff --git a/packages/debug/src/browser/view/debug-frontend-contribution.ts b/packages/debug/src/browser/view/debug-frontend-contribution.ts
@@ -60,7 +60,7 @@ export class DebugWidget extends BaseWidget {
         this.title.label = debugSession.configuration.name;
         this.title.caption = debugSession.configuration.name;
         this.title.closable = true;
-        this.title.iconClass = 'fa fa-bug';
+        this.title.iconClass = 'fa debug-tab-icon';
         this.addClass(DebugStyles.DEBUG_CONTAINER);
         this.widgets = [this.toolbar, this.variables, this.threads, this.frames, this.breakpoints];
     }

diff --git a/packages/extension-manager/src/browser/extension-widget.tsx b/packages/extension-manager/src/browser/extension-widget.tsx
@@ -40,6 +40,8 @@ export class ExtensionWidget extends ReactWidget {
         super();
         this.id = 'extensions';
         this.title.label = 'Extensions';
+        this.title.caption = 'Extensions';
+        this.title.iconClass = 'fa extensions-tab-icon';
         this.addClass('theia-extensions');
 
         this.update();

diff --git a/packages/extension-manager/src/browser/style/extension-sidebar.css b/packages/extension-manager/src/browser/style/extension-sidebar.css
@@ -92,4 +92,8 @@
     justify-content: flex-end;
     align-items: center;
     flex: 3;
-}
+}
+
+.extensions-tab-icon::before {
+    content: "\f12e"
+}
diff --git a/packages/git/src/browser/git-widget.tsx b/packages/git/src/browser/git-widget.tsx
@@ -82,6 +82,8 @@ export class GitWidget extends ReactWidget implements StatefulWidget {
         super();
         this.id = 'theia-gitContainer';
         this.title.label = 'Git';
+        this.title.caption = 'Git';
+        this.title.iconClass = 'fa git-tab-icon';
         this.scrollContainer = GitWidget.Styles.CHANGES_CONTAINER;
         this.addClass('theia-git');
         this.node.tabIndex = 0;

diff --git a/packages/git/src/browser/history/git-history-widget.tsx b/packages/git/src/browser/history/git-history-widget.tsx
@@ -72,6 +72,8 @@ export class GitHistoryWidget extends GitNavigableListWidget<GitHistoryListNode>
         this.id = GIT_HISTORY;
         this.scrollContainer = 'git-history-list-container';
         this.title.label = 'Git History';
+        this.title.caption = 'Git History';
+        this.title.iconClass = 'fa git-history-tab-icon';
         this.addClass('theia-git');
         this.resetState();
         this.cancelIndicator = new CancellationTokenSource();

diff --git a/packages/git/src/browser/style/history.css b/packages/git/src/browser/style/history.css
@@ -213,3 +213,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.git-history-tab-icon::before {
+    content: "\f1da"
+}
diff --git a/packages/git/src/browser/style/index.css b/packages/git/src/browser/style/index.css
@@ -319,3 +319,7 @@
  .no-select:focus {
     outline: none;
  }
+
+.git-tab-icon::before {
+    content: "\f126"
+}
diff --git a/packages/markers/src/browser/problem/problem-widget.tsx b/packages/markers/src/browser/problem/problem-widget.tsx
@@ -36,7 +36,8 @@ export class ProblemWidget extends TreeWidget {
 
         this.id = 'problems';
         this.title.label = 'Problems';
-        this.title.iconClass = 'fa fa-exclamation-circle';
+        this.title.caption = 'Problems';
+        this.title.iconClass = 'fa problem-tab-icon';
         this.title.closable = true;
         this.addClass('theia-marker-container');
 

diff --git a/packages/markers/src/browser/style/index.css b/packages/markers/src/browser/style/index.css
@@ -95,4 +95,8 @@
     min-width: 8px;
     height: calc(var(--theia-private-horizontal-tab-height) * 0.8);
     line-height: calc(var(--theia-private-horizontal-tab-height) * 0.8);
-}
+}
+
+.problem-tab-icon::before {
+    content: "\f06a"
+}
diff --git a/packages/navigator/src/browser/navigator-widget.tsx b/packages/navigator/src/browser/navigator-widget.tsx
@@ -52,6 +52,8 @@ export class FileNavigatorWidget extends FileTreeWidget {
         super(props, model, contextMenuRenderer);
         this.id = FILE_NAVIGATOR_ID;
         this.title.label = LABEL;
+        this.title.caption = LABEL;
+        this.title.iconClass = 'fa navigator-tab-icon';
         this.addClass(CLASS);
         this.initialize();
     }

diff --git a/packages/navigator/src/browser/style/index.css b/packages/navigator/src/browser/style/index.css
@@ -40,3 +40,7 @@
     padding-bottom: 4px;
     width: calc(100% - var(--theia-ui-padding)*4);
 }
+
+.navigator-tab-icon::before {
+    content: "\f0c5"
+}
diff --git a/packages/outline-view/src/browser/outline-view-frontend-module.ts b/packages/outline-view/src/browser/outline-view-frontend-module.ts
@@ -27,6 +27,7 @@ import {
     defaultTreeProps
 } from '@theia/core/lib/browser';
 import { OutlineViewWidgetFactory, OutlineViewWidget } from './outline-view-widget';
+import '../../src/browser/styles/index.css';
 
 export default new ContainerModule(bind => {
     bind(OutlineViewWidgetFactory).toFactory(ctx =>

diff --git a/packages/outline-view/src/browser/outline-view-widget.tsx b/packages/outline-view/src/browser/outline-view-widget.tsx
@@ -57,6 +57,8 @@ export class OutlineViewWidget extends TreeWidget {
 
         this.id = 'outline-view';
         this.title.label = 'Outline';
+        this.title.caption = 'Outline';
+        this.title.iconClass = 'fa outline-view-tab-icon';
         this.addClass('theia-outline-view');
     }
 

diff --git a/packages/outline-view/src/browser/styles/index.css b/packages/outline-view/src/browser/styles/index.css
@@ -0,0 +1,19 @@
+/********************************************************************************
+ * Copyright (C) 2017 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.outline-view-tab-icon::before {
+    content: "\f03a"
+}
diff --git a/packages/output/src/browser/output-widget.tsx b/packages/output/src/browser/output-widget.tsx
@@ -36,7 +36,8 @@ export class OutputWidget extends ReactWidget {
         super();
         this.id = OUTPUT_WIDGET_KIND;
         this.title.label = 'Output';
-        this.title.iconClass = 'fa fa-flag';
+        this.title.caption = 'Output';
+        this.title.iconClass = 'fa output-tab-icon';
         this.title.closable = true;
         this.addClass('theia-output');
     }

diff --git a/packages/output/src/browser/style/output.css b/packages/output/src/browser/style/output.css
@@ -44,4 +44,8 @@
     background-repeat: no-repeat;
     padding-left: 3px;
     padding-right: 15px;
-}
+}
+
+.output-tab-icon::before {
+    content: "\f024"
+}
diff --git a/packages/plugin-ext/src/main/browser/plugin-ext-widget.tsx b/packages/plugin-ext/src/main/browser/plugin-ext-widget.tsx
@@ -37,6 +37,8 @@ export class PluginWidget extends ReactWidget {
         super();
         this.id = 'plugins';
         this.title.label = 'Plugins';
+        this.title.caption = 'Plugins';
+        this.title.iconClass = 'fa plugins-tab-icon';
         this.addClass('theia-plugins');
 
         this.update();

diff --git a/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css b/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css
@@ -65,3 +65,7 @@
     flex: 5;
     align-items: center;
 }
+
+.plugins-tab-icon::before {
+    content: "\f0fe"
+}
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -62,6 +62,8 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
     init() {
         this.id = SearchInWorkspaceWidget.ID;
         this.title.label = SearchInWorkspaceWidget.LABEL;
+        this.title.caption = SearchInWorkspaceWidget.LABEL;
+        this.title.iconClass = 'fa search-in-workspace-tab-icon';
 
         this.contentNode = document.createElement('div');
         this.contentNode.classList.add('t-siw-search-container');

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
@@ -397,4 +397,8 @@
 
 .replace-all-button.disabled {
     opacity: 0.5;
-}
+}
+
+.search-in-workspace-tab-icon::before {
+    content: "\f002"
+}