CHE-2919 improve process panel

Signed-off-by: Oleksii Orel <[email protected]>
eclipse-che · Dec 6, 2016 · aa464ba · aa464ba
1 parent 72f0850
commit aa464ba
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 26 deletions.
diff --git a/ide/commons-gwt/src/main/java/org/eclipse/che/ide/ui/Tooltip.java b/ide/commons-gwt/src/main/java/org/eclipse/che/ide/ui/Tooltip.java
@@ -14,25 +14,26 @@
 
 package org.eclipse.che.ide.ui;
 
+import elemental.dom.Element;
 import elemental.dom.Node;
 import elemental.events.Event;
 import elemental.events.EventListener;
 import elemental.events.EventRemover;
 import elemental.events.EventTarget;
 import elemental.events.MouseEvent;
-import elemental.dom.Element;
 import elemental.util.Timer;
 
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.CssResource;
+
 import org.eclipse.che.ide.ui.menu.AutoHideComponent;
 import org.eclipse.che.ide.ui.menu.AutoHideView;
 import org.eclipse.che.ide.ui.menu.PositionController;
 import org.eclipse.che.ide.util.AnimationController;
 import org.eclipse.che.ide.util.HoverController;
 import org.eclipse.che.ide.util.dom.Elements;
 import org.eclipse.che.ide.util.loging.Log;
-import com.google.gwt.core.client.GWT;
-import com.google.gwt.resources.client.ClientBundle;
-import com.google.gwt.resources.client.CssResource;
 
 import java.util.ArrayList;
 import java.util.List;

diff --git a/ide/commons-gwt/src/main/resources/org/eclipse/che/ide/ui/Tooltip.css b/ide/commons-gwt/src/main/resources/org/eclipse/che/ide/ui/Tooltip.css
@@ -25,7 +25,8 @@
     display: inline-block;
     position: relative;
     margin: 0;
-    max-width: 250px;
+    max-width: 500px;
+    word-wrap: break-word;
 }
 
 /*

diff --git a/ide/commons-gwt/src/main/resources/org/eclipse/che/ide/ui/tree/Tree.css b/ide/commons-gwt/src/main/resources/org/eclipse/che/ide/ui/tree/Tree.css
@@ -55,6 +55,8 @@
     position: relative;
     white-space: nowrap;
     height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .treeNodeBody:HOVER {

diff --git a/.../eclipse/che/ide/extension/machine/client/outputspanel/console/OutputConsoleViewImpl.java b/.../eclipse/che/ide/extension/machine/client/outputspanel/console/OutputConsoleViewImpl.java
@@ -40,17 +40,16 @@
 import org.eclipse.che.ide.extension.machine.client.MachineResources;
 import org.eclipse.che.ide.ui.FontAwesome;
 import org.eclipse.che.ide.ui.Tooltip;
+import org.eclipse.che.ide.util.Pair;
+import org.vectomatic.dom.svg.ui.SVGImage;
+
+import java.util.List;
 
 import static com.google.common.collect.Lists.newArrayList;
 import static com.google.gwt.regexp.shared.RegExp.compile;
 import static org.eclipse.che.ide.ui.menu.PositionController.HorizontalAlign.MIDDLE;
 import static org.eclipse.che.ide.ui.menu.PositionController.VerticalAlign.BOTTOM;
 
-import org.eclipse.che.ide.util.Pair;
-import org.vectomatic.dom.svg.ui.SVGImage;
-
-import java.util.List;
-
 /**
  * View representation of output console.
  *
@@ -293,6 +292,10 @@ public void enableStopButton(boolean enable) {
     @Override
     public void showCommandLine(String commandLine) {
         commandLabel.setText(commandLine);
+        Tooltip.create((elemental.dom.Element)commandLabel.getElement(),
+                       BOTTOM,
+                       MIDDLE,
+                       commandLine);
     }
 
     @Override
@@ -301,8 +304,11 @@ public void showPreviewUrl(String previewUrl) {
             hidePreview();
         } else {
             previewUrlLabel.setText(previewUrl);
-            previewUrlLabel.setTitle(previewUrl);
             previewUrlLabel.setHref(previewUrl);
+            Tooltip.create((elemental.dom.Element)previewUrlLabel.getElement(),
+                           BOTTOM,
+                           MIDDLE,
+                           previewUrl);
         }
     }
 

diff --git a/...clipse/che/ide/extension/machine/client/outputspanel/console/OutputConsoleViewImpl.ui.xml b/...clipse/che/ide/extension/machine/client/outputspanel/console/OutputConsoleViewImpl.ui.xml
@@ -114,14 +114,18 @@
             text-decoration: underline;
         }
 
+        a.value,
         div.value {
             white-space: nowrap;
             text-overflow: ellipsis;
             -webkit-user-select: text;
             user-select: text;
             -moz-user-select: text;
-            width: literal("calc(100% - 60px)");
+            width: literal("calc(100% - 70px)");
             overflow: hidden;
+        }
+
+        div.value {
             color: successColor;
         }
 
@@ -211,7 +215,7 @@
         <g:north size="14">
             <g:FlowPanel ui:field="previewPanel" styleName="{style.header}">
                 <g:Label text="preview:" addStyleNames="{style.label} {style.commandTitle}"/>
-                <g:Anchor ui:field="previewUrlLabel" target="_blank" title="Open in new window"
+                <g:Anchor ui:field="previewUrlLabel" target="_blank"
                           addStyleNames="{style.link} {style.value} {style.commandTitle}"/>
             </g:FlowPanel>
         </g:north>

diff --git a/...main/java/org/eclipse/che/ide/extension/machine/client/processes/ProcessTreeRenderer.java b/...main/java/org/eclipse/che/ide/extension/machine/client/processes/ProcessTreeRenderer.java
@@ -20,7 +20,6 @@
 import com.google.inject.Inject;
 
 import org.eclipse.che.api.core.model.machine.MachineConfig;
-import org.eclipse.che.api.core.model.machine.MachineRuntimeInfo;
 import org.eclipse.che.ide.api.machine.MachineEntity;
 import org.eclipse.che.ide.api.parts.PartStackUIResources;
 import org.eclipse.che.ide.extension.machine.client.MachineLocalizationConstant;
@@ -36,7 +35,6 @@
 import java.util.HashMap;
 import java.util.Map;
 
-import static org.eclipse.che.ide.extension.machine.client.processes.panel.ProcessesPanelPresenter.SSH_PORT;
 import static org.eclipse.che.ide.ui.menu.PositionController.HorizontalAlign.MIDDLE;
 import static org.eclipse.che.ide.ui.menu.PositionController.VerticalAlign.BOTTOM;
 
@@ -218,6 +216,10 @@ public void handleEvent(Event event) {
 
         Element nameElement = Elements.createSpanElement(resources.getCss().nameLabel());
         nameElement.setTextContent(machineConfig.getName());
+        Tooltip.create(nameElement,
+                       BOTTOM,
+                       MIDDLE,
+                       machineConfig.getName());
         root.appendChild(nameElement);
 
         return root;
@@ -246,6 +248,10 @@ private SpanElement createCommandElement(ProcessTreeNode node) {
 
         Element nameElement = Elements.createSpanElement();
         nameElement.setTextContent(node.getName());
+        Tooltip.create(nameElement,
+                       BOTTOM,
+                       MIDDLE,
+                       node.getName());
         root.appendChild(nameElement);
 
         Element spanElement = Elements.createSpanElement();
@@ -273,6 +279,10 @@ private SpanElement createTerminalElement(ProcessTreeNode node) {
 
         Element nameElement = Elements.createSpanElement();
         nameElement.setTextContent(node.getName());
+        Tooltip.create(nameElement,
+                       BOTTOM,
+                       MIDDLE,
+                       node.getName());
         root.appendChild(nameElement);
 
         Element spanElement = Elements.createSpanElement();

diff --git a/...ne-ext-client/src/main/resources/org/eclipse/che/ide/extension/machine/client/machine.css b/...ne-ext-client/src/main/resources/org/eclipse/che/ide/extension/machine/client/machine.css
@@ -300,14 +300,14 @@
 }
 
 .sshButton {
+    position: relative;
     font-size: 10px;
     float: right;
     margin-right: 2px;
     color: categoryHeaderButtonColor;
     cursor: pointer;
-    position: absolute;
-    right: 24px;
-    top: 0px;
+    right: 0;
+    top: 0;
 }
 
 .processTree .newTerminalButton {
@@ -321,9 +321,9 @@
     box-sizing: border-box;
     text-align: center;
     cursor: pointer;
-    position: absolute;
-    right: 0px;
-    top: 0px;
+    position: relative;
+    right: 0;
+    top: 0;
 }
 
 .processTree .newTerminalButton > svg {
@@ -414,6 +414,7 @@
 }
 
 .processesPanelStopButtonForProcess {
+    position: relative;
     float: right;
     background-color: editorTabIconColor;
     opacity: 0.3;
@@ -423,8 +424,6 @@
     border-radius: 2px;
     box-sizing: border-box;
     cursor: pointer;
-    position: absolute;
-    right: 24px;
     top: 0px;
 }
 
@@ -437,6 +436,7 @@
 }
 
 .processesPanelCloseButtonForProcess svg {
+    position: relative;
     cursor: pointer;
     opacity: 0.5;
     padding-top: 6px;
@@ -445,9 +445,6 @@
     padding-right: 9px;
     float: right;
     fill: editorTabIconColor;
-    position: absolute;
-    right: 0px;
-    top: 0px;
 }
 
 .processesPanelCloseButtonForProcess svg g,