CHE-6645: Add new icons instead of file name colors in Git changes li…

…st (#6998)

- Added new icons instead of file name colors in Git changes list.
- Changed icons and style of buttons.
- Removed colors table that described item colors.

ide/commons-gwt/src/main/java/org/eclipse/che/ide/FontAwesome.java

@@ -50,6 +50,9 @@ public class FontAwesome {
   /** http://fortawesome.github.io/Font-Awesome/icon/expand/ */
   public static final String EXPAND = "<i class=\"fa fa-expand\"></i>";
 
+  /** http://fortawesome.github.io/Font-Awesome/icon/folder/ */
+  public static final String FOLDER = "<i class=\"fa fa-folder\"></i>";
+
   /** http://fortawesome.github.io/Font-Awesome/icon/history/ */
   public static final String HISTORY = "<i class=\"fa fa-history\"></i>";
 
@@ -119,6 +122,9 @@ public class FontAwesome {
   /** http://fontawesome.io/icon/list/ */
   public static final String LIST = "<i class=\"fa fa-list\"></i>";
 
+  /** http://fontawesome.io/icon/list-ul/ */
+  public static final String LIST_UL = "<i class=\"fa fa-list-ul\"></i>";
+
   /** http://fontawesome.io/icon/arrow-up/ */
   public static final String ARROW_UP = "<i class=\"fa fa-arrow-up\"></i>";
 

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/GitResources.java

@@ -118,4 +118,22 @@ interface Css extends CssResource {
 
   @Source("controls/revert.svg")
   SVGResource revert();
+
+  @Source("icons/added.svg")
+  SVGResource iconAdded();
+
+  @Source("icons/modified.svg")
+  SVGResource iconModified();
+
+  @Source("icons/deleted.svg")
+  SVGResource iconDeleted();
+
+  @Source("icons/renamed.svg")
+  SVGResource iconRenamed();
+
+  @Source("icons/copied.svg")
+  SVGResource iconCopied();
+
+  @Source("icons/untracked.svg")
+  SVGResource iconUntracked();
 }

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/compare/FileStatus.java

@@ -14,8 +14,8 @@
 import static org.eclipse.che.ide.ext.git.client.compare.FileStatus.Status.COPIED;
 import static org.eclipse.che.ide.ext.git.client.compare.FileStatus.Status.DELETED;
 import static org.eclipse.che.ide.ext.git.client.compare.FileStatus.Status.MODIFIED;
+import static org.eclipse.che.ide.ext.git.client.compare.FileStatus.Status.RENAMED;
 import static org.eclipse.che.ide.ext.git.client.compare.FileStatus.Status.UNMODIFIED;
-import static org.eclipse.che.ide.ext.git.client.compare.FileStatus.Status.UPDATED_BUT_UNMERGED;
 
 /**
  * Class for determining git status of given changed file.
@@ -30,7 +30,8 @@ public enum Status {
     ADDED,
     DELETED,
     COPIED,
-    UPDATED_BUT_UNMERGED,
+    RENAMED,
+    UNTRACKED,
     UNMODIFIED
   }
 
@@ -47,10 +48,10 @@ public static Status defineStatus(String status) {
         return DELETED;
       case "A":
         return ADDED;
+      case "R":
+        return RENAMED;
       case "C":
         return COPIED;
-      case "U":
-        return UPDATED_BUT_UNMERGED;
     }
     return UNMODIFIED;
   }

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/compare/changeslist/ChangesListViewImpl.java

@@ -10,9 +10,7 @@
  */
 package org.eclipse.che.ide.ext.git.client.compare.changeslist;
 
-import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
 import com.google.gwt.user.client.ui.Button;
-import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 import com.google.inject.Singleton;
@@ -39,22 +37,6 @@ protected ChangesListViewImpl(GitLocalizationConstant locale) {
     this.setTitle(locale.changeListTitle());
 
     createButtons();
-
-    SafeHtmlBuilder shb = new SafeHtmlBuilder();
-
-    shb.appendHtmlConstant("<table height =\"20\">");
-    shb.appendHtmlConstant("<tr height =\"3\"></tr><tr>");
-    shb.appendHtmlConstant("<td width =\"20\" bgcolor =\"dodgerBlue\"></td>");
-    shb.appendHtmlConstant("<td>modified</td>");
-    shb.appendHtmlConstant("<td width =\"20\" bgcolor =\"red\"></td>");
-    shb.appendHtmlConstant("<td>deleted</td>");
-    shb.appendHtmlConstant("<td width =\"20\" bgcolor =\"green\"></td>");
-    shb.appendHtmlConstant("<td>added</td>");
-    shb.appendHtmlConstant("<td width =\"20\" bgcolor =\"purple\"></td>");
-    shb.appendHtmlConstant("<td>copied</td>");
-    shb.appendHtmlConstant("</tr></table>");
-
-    getFooter().add(new HTML(shb.toSafeHtml()));
   }
 
   @Override

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/compare/changespanel/ChangedFileNode.java

@@ -15,9 +15,9 @@
 import javax.validation.constraints.NotNull;
 import org.eclipse.che.api.promises.client.Promise;
 import org.eclipse.che.api.promises.client.js.Promises;
+import org.eclipse.che.ide.ext.git.client.GitResources;
 import org.eclipse.che.ide.ext.git.client.compare.FileStatus.Status;
 import org.eclipse.che.ide.ext.git.client.compare.changespanel.ChangesPanelView.ActionDelegate;
-import org.eclipse.che.ide.project.shared.NodesResources;
 import org.eclipse.che.ide.resource.Path;
 import org.eclipse.che.ide.ui.smartTree.data.AbstractTreeNode;
 import org.eclipse.che.ide.ui.smartTree.data.HasAction;
@@ -36,7 +36,7 @@ public class ChangedFileNode extends AbstractTreeNode implements HasPresentation
 
   private final String pathName;
   private final Status status;
-  private final NodesResources nodesResources;
+  private final GitResources gitResources;
   private final ActionDelegate actionDelegate;
   private final boolean viewPath;
 
@@ -45,20 +45,20 @@ public class ChangedFileNode extends AbstractTreeNode implements HasPresentation
    *
    * @param pathName name of the file that represents this node with its full path
    * @param status git status of the file that represents this node
-   * @param nodesResources resources that contain icons
+   * @param gitResources resources that contain icons
    * @param actionDelegate sends delegated events from the view
    * @param viewPath <code>true</code> if it is needed to view file name with its full path, and
    *     <code>false</code> if it is needed to view only name of the file
    */
   ChangedFileNode(
       String pathName,
       Status status,
-      NodesResources nodesResources,
+      GitResources gitResources,
       ActionDelegate actionDelegate,
       boolean viewPath) {
     this.pathName = pathName;
     this.status = status;
-    this.nodesResources = nodesResources;
+    this.gitResources = gitResources;
     this.actionDelegate = actionDelegate;
     this.viewPath = viewPath;
   }
@@ -91,20 +91,25 @@ public boolean isLeaf() {
   public void updatePresentation(@NotNull NodePresentation presentation) {
     String name = Path.valueOf(pathName).lastSegment();
     presentation.setPresentableText(viewPath ? name : pathName);
-    presentation.setPresentableIcon(nodesResources.file());
 
     switch (status) {
       case MODIFIED:
-        presentation.setPresentableTextCss("color: DodgerBlue ;");
+        presentation.setPresentableIcon(gitResources.iconModified());
         return;
       case DELETED:
-        presentation.setPresentableTextCss("color: red;");
+        presentation.setPresentableIcon(gitResources.iconDeleted());
         return;
       case ADDED:
-        presentation.setPresentableTextCss("color: green;");
+        presentation.setPresentableIcon(gitResources.iconAdded());
+        return;
+      case RENAMED:
+        presentation.setPresentableIcon(gitResources.iconRenamed());
         return;
       case COPIED:
-        presentation.setPresentableTextCss("color: purple;");
+        presentation.setPresentableIcon(gitResources.iconCopied());
+        return;
+      case UNTRACKED:
+        presentation.setPresentableIcon(gitResources.iconUntracked());
         return;
       default:
     }

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/compare/changespanel/ChangesPanelPresenter.java

@@ -58,7 +58,7 @@ public ChangesPanelPresenter(
   public void show(AlteredFiles changedFiles) {
     this.changedFiles = changedFiles;
     if (changedFiles.isEmpty()) {
-      view.setTextToChangeViewModeButton(locale.changeListRowListViewButtonText());
+      view.updateChangeViewModeButton(viewMode);
       view.setEnabledChangeViewModeButton(false);
       view.setEnableExpandCollapseButtons(false);
       view.resetPanelState();
@@ -97,10 +97,7 @@ public void onCollapseButtonClicked() {
 
   private void viewChangedFiles() {
     view.viewChangedFiles(changedFiles, viewMode);
-    view.setTextToChangeViewModeButton(
-        viewMode == TREE
-            ? locale.changeListRowListViewButtonText()
-            : locale.changeListGroupByDirectoryButtonText());
+    view.updateChangeViewModeButton(viewMode);
   }
 
   public void setFileNodeDoubleClickHandler(FileNodeDoubleClickHandler fileNodeDoubleClickHandler) {

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/compare/changespanel/ChangesPanelView.java

@@ -81,11 +81,11 @@ interface ActionDelegate {
   void setEnabledChangeViewModeButton(boolean enabled);
 
   /**
-   * Set displayed text to button that changes view mode of changed files.
+   * Update button that changes view mode of changed files with proper icon and title.
    *
-   * @param text text that will be displayed in the button
+   * @param viewMode selected view mode (tree or list)
    */
-  void setTextToChangeViewModeButton(String text);
+  void updateChangeViewModeButton(ViewMode viewMode);
 
   /** Set custom presentation render for nodes in the panel. */
   void setTreeRender(PresentationRenderer render);

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/compare/changespanel/ChangesPanelViewImpl.java

@@ -115,7 +115,7 @@ public void viewChangedFiles(AlteredFiles files, ViewMode viewMode) {
               file ->
                   nodeStorage.add(
                       new ChangedFileNode(
-                          file, files.getStatusByFilePath(file), nodesResources, delegate, false)));
+                          file, files.getStatusByFilePath(file), res, delegate, false)));
     }
   }
 
@@ -146,8 +146,17 @@ public void setEnabledChangeViewModeButton(boolean enabled) {
   }
 
   @Override
-  public void setTextToChangeViewModeButton(String text) {
-    changeViewModeButton.setText(text);
+  public void updateChangeViewModeButton(ViewMode viewMode) {
+    switch (viewMode) {
+      case TREE:
+        changeViewModeButton.getElement().setInnerHTML(FontAwesome.LIST_UL);
+        changeViewModeButton.setTitle(locale.changeListRowListViewButtonText());
+        break;
+      case LIST:
+        changeViewModeButton.getElement().setInnerHTML(FontAwesome.FOLDER);
+        changeViewModeButton.setTitle(locale.changeListGroupByDirectoryButtonText());
+        break;
+    }
   }
 
   @Override
@@ -209,7 +218,7 @@ private List<Node> getGroupedNodes(Map<String, Status> items) {
         if (pathName.segmentCount() != i) {
           continue;
         }
-        Node fileNode = new ChangedFileNode(file, items.get(file), nodesResources, delegate, true);
+        Node fileNode = new ChangedFileNode(file, items.get(file), res, delegate, true);
         String filePath = pathName.removeLastSegments(1).toString();
         if (currentChildNodes.keySet().contains(filePath)) {
           currentChildNodes.get(filePath).add(fileNode);

plugins/plugin-git/che-plugin-git-ext-git/src/main/java/org/eclipse/che/ide/ext/git/client/compare/changespanel/ChangesPanelViewImpl.ui.xml

@@ -16,17 +16,21 @@
     <ui:with field='res' type='org.eclipse.che.ide.ext.git.client.GitResources'/>
     <ui:with field='locale' type='org.eclipse.che.ide.ext.git.client.GitLocalizationConstant'/>
     <ui:style>
-        .space {
+        .button {
             margin-right: 5px;
+            font-size: 14px;
+            padding: 0 0;
+            width: 30px;
+            min-width: auto;
         }
     </ui:style>
 
     <g:DockLayoutPanel unit="PX" width="600px" height="345px">
         <g:north size="25">
             <g:FlowPanel>
-                <g:Button ui:field="changeViewModeButton" width="140px" addStyleNames="{style.space}"/>
-                <g:Button ui:field="expandButton" addStyleNames="{style.space}"/>
-                <g:Button ui:field="collapseButton" addStyleNames="{style.space}"/>
+                <g:Button ui:field="changeViewModeButton" addStyleNames="{style.button}"/>
+                <g:Button ui:field="expandButton" addStyleNames="{style.button}"/>
+                <g:Button ui:field="collapseButton" addStyleNames="{style.button}"/>
             </g:FlowPanel>
         </g:north>
         <g:center>