Update callhierarchy tree styling

Fixes #4643 - update the `callhierarchy` tree styling when resizing. favor the display of the `symbol` when resizing. Signed-off-by: Vincent Fugnitto <[email protected]>
eclipse-theia · Mar 26, 2019 · 4ddf0a2 · 4ddf0a2
1 parent 8d9525a
commit 4ddf0a2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 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
@@ -102,11 +102,13 @@ export class CallHierarchyTreeWidget extends TreeWidget {
         const container = (containerName) ? containerName + ' — ' + location : location;
         return <div className='definitionNode'>
             <div className={'symbol-icon ' + this.toIconClass(definition.symbolKind)}></div>
-            <div className='symbol'>
-                {symbol}
-            </div>
-            <div className='container'>
-                {container}
+            <div className='definitionNode-content'>
+                <span className='symbol'>
+                    {symbol}
+                </span>
+                <span className='container'>
+                    {container}
+                </span>
             </div>
         </div>;
     }
@@ -120,14 +122,16 @@ export class CallHierarchyTreeWidget extends TreeWidget {
         const container = (containerName) ? containerName + ' — ' + location : location;
         return <div className='definitionNode'>
             <div className={'symbol-icon ' + this.toIconClass(definition.symbolKind)}></div>
-            <div className='symbol'>
-                {symbol}
-            </div>
-            <div className='referenceCount'>
-                {(referenceCount > 1) ? `[${referenceCount}]` : ''}
-            </div>
-            <div className='container'>
-                {container}
+            <div className='definitionNode-content'>
+                <span className='symbol'>
+                    {symbol}
+                </span>
+                <span className='referenceCount'>
+                    {(referenceCount > 1) ? `[${referenceCount}]` : ''}
+                </span>
+                <span className='container'>
+                    {container}
+                </span>
             </div>
         </div>;
     }

diff --git a/packages/callhierarchy/src/browser/style/index.css b/packages/callhierarchy/src/browser/style/index.css
@@ -45,23 +45,23 @@
 }
 
 .theia-CallHierarchyTree .definitionNode .symbol {
-    white-space: nowrap;
-    overflow: hidden;
+    padding-right: 4px;
 }
 
 .theia-CallHierarchyTree .definitionNode .referenceCount {
-    white-space: nowrap;
-    overflow: hidden;
     color: var(--theia-ui-font-color3);
 }
 
 .theia-CallHierarchyTree .definitionNode .container {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     color: var(--theia-ui-font-color2);
 }
 
 .call-hierarchy-tab-icon::before {
     content: "\f0ab"
 }
+
+.theia-CallHierarchyTree .definitionNode-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}