CHE-4927 fix light theme styles

Signed-off-by: Oleksii Orel <oorel@redhat.com>
eclipse-che · Jan 25, 2018 · 4493896 · 4493896
1 parent eb83d6a
commit 4493896
Show file tree

Hide file tree

Showing 37 changed files with 246 additions and 148 deletions.
diff --git a/ide/che-core-ide-api/src/main/java/org/eclipse/che/ide/api/theme/Theme.java b/ide/che-core-ide-api/src/main/java/org/eclipse/che/ide/api/theme/Theme.java
@@ -112,13 +112,6 @@ public interface Theme {
    */
   String activeTabTextShadow();
 
-  /**
-   * Icon color in active (selected) tab.
-   *
-   * @return color for icon
-   */
-  String activeTabIconColor();
-
   /**
    * Text color for part button.
    *
@@ -293,6 +286,12 @@ public interface Theme {
   /** Background of the DropdownList widget. */
   String getDropdownListBackground();
 
+  /** Color of the ExecLabel for DropdownList  widget. */
+  String getDropdownListExecLabelColor();
+
+  /** Background of the ExecLabel for DropdownList  widget. */
+  String getDropdownListExecLabelBackground();
+
   /** Background of the hovered DropdownList widget. */
   String getHoveredDropdownListBackground();
 
@@ -1119,6 +1118,13 @@ public interface Theme {
    */
   String consolesToolbarToggledButtonColor();
 
+  /**
+   * Toggled button border on the consoles toolbar.
+   *
+   * @return color
+   */
+  String consolesToolbarToggledButtonBorderColor();
+
   /**
    * Text color for DEV label in processes tree.
    *
@@ -1697,4 +1703,26 @@ public interface Theme {
   String projectExplorerPlaceholderIconColor();
 
   String projectExplorerPlaceholderRowColor();
+
+  /**
+   * ******************************************************************************************
+   *
+   * <p>Part switcher icons
+   *
+   * <p>******************************************************************************************
+   */
+  String tabIconColor();
+
+  String activeTabIconColor();
+
+  String hoveredTabIconColor();
+
+  /**
+   * ******************************************************************************************
+   *
+   * <p>Toolbar panel
+   *
+   * <p>******************************************************************************************
+   */
+  String noToolbarPanelColor();
 }
diff --git a/ide/che-core-ide-api/src/main/resources/org/eclipse/che/ide/api/ui/style.css b/ide/che-core-ide-api/src/main/resources/org/eclipse/che/ide/api/ui/style.css
@@ -67,6 +67,7 @@
 @eval consolesToolbarHoveredButtonColor org.eclipse.che.ide.api.theme.Style.theme.consolesToolbarHoveredButtonColor();
 @eval consolesToolbarDisabledButtonColor org.eclipse.che.ide.api.theme.Style.theme.consolesToolbarDisabledButtonColor();
 @eval consolesToolbarToggledButtonColor org.eclipse.che.ide.api.theme.Style.theme.consolesToolbarToggledButtonColor();
+@eval consolesToolbarToggledButtonBorderColor org.eclipse.che.ide.api.theme.Style.theme.consolesToolbarToggledButtonBorderColor();
 
 @eval tabBorderShadow org.eclipse.che.ide.api.theme.Style.theme.tabBorderShadow();
 

diff --git a/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/Resources.java b/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/Resources.java
@@ -26,9 +26,10 @@
 import org.eclipse.che.ide.ui.cellview.DataGridResources;
 import org.eclipse.che.ide.ui.list.CategoriesList;
 import org.eclipse.che.ide.ui.list.SimpleList;
+import org.eclipse.che.ide.ui.smartTree.TreeStyles;
 import org.eclipse.che.ide.ui.tree.Tree;
 import org.eclipse.che.ide.ui.window.Window;
-import org.eclipse.che.ide.ui.zeroclipboard.ZeroClipboardResources;
+import org.eclipse.che.ide.ui.zeroclipboard.ClipboardResources;
 import org.vectomatic.dom.svg.ui.SVGResource;
 
 /**
@@ -43,7 +44,7 @@ public interface Resources
         SimpleList.Resources,
         MenuResources,
         DialogBoxResources,
-        ZeroClipboardResources,
+        ClipboardResources,
         NotificationResources,
         DataGridResources,
         CellTableResources,
@@ -52,7 +53,8 @@ public interface Resources
         ButtonLoaderResources,
         ProjectWizardResources,
         MachineResources,
-        CommandResources {
+        CommandResources,
+        TreeStyles {
 
   @Source({
     "Core.css",

diff --git a/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/console/OutputConsoleViewImpl.ui.xml b/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/console/OutputConsoleViewImpl.ui.xml
@@ -31,7 +31,7 @@
         .toolbarButton {
             width: 14px;
             height: 14px;
-            margin-left: 2px;
+            margin-left: 1px;
             margin-top: 4px;
             cursor: pointer;
             font-size: 9px;
@@ -76,7 +76,7 @@
         .toolbarButton[toggled] {
             opacity: 1;
             background: consolesToolbarToggledButtonColor;
-            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+            border: 1px solid consolesToolbarToggledButtonBorderColor;
         }
 
         .toolbarButton[disabled],

diff --git a/...-ide-app/src/main/java/org/eclipse/che/ide/factory/configure/CreateFactoryViewImpl.ui.xml b/...-ide-app/src/main/java/org/eclipse/che/ide/factory/configure/CreateFactoryViewImpl.ui.xml
@@ -82,7 +82,7 @@
     </ui:style>
 
     <g:FlowPanel width="340px" ui:field="createFactoryPanel">
-        <g:FlowPanel ui:field="upperPanel" addStyleNames="{style.topPanel} {style.border}">
+        <g:FlowPanel ui:field="upperPanel" addStyleNames="{style.topPanel}">
             <g:Label ui:field="factoryNameLabel" addStyleNames="{res.factoryCSS.label}"/>
             <g:TextBox ui:field="factoryName" addStyleNames="{style.input}"/>
             <g:Button ui:field="createFactoryButton" text="{locale.createFactoryButton}"

diff --git a/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/part/PartStackViewImpl.ui.xml b/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/part/PartStackViewImpl.ui.xml
@@ -14,6 +14,8 @@
              xmlns:g='urn:import:com.google.gwt.user.client.ui'>
 
     <ui:style src="org/eclipse/che/ide/api/ui/style.css" >
+        @eval hoveredTabIconColor org.eclipse.che.ide.api.theme.Style.theme.hoveredTabIconColor();
+        @eval tabIconColor org.eclipse.che.ide.api.theme.Style.theme.tabIconColor();
 
         .partStack {
             position: relative;
@@ -176,28 +178,45 @@
          ******************************************************************************/
         .partSwitcher .partButtons > div svg,
         .partSwitcher .partButtons > div svg rect,
+        .partSwitcher .partButtons > div svg path,
+        .partSwitcher .partButtons > div svg polygon {
+            fill: tabIconColor;
+            -webkit-transition: color 0.1s ease-in-out,
+            fill 0.1s ease-in-out;
+            transition: color 0.1s ease-in-out,
+            fill 0.1s ease-in-out;
+        }
+
         .partSwitcher .partButtons > div svg path {
-            fill: tabTextColor;
+            stroke: tabIconColor;
             -webkit-transition: color 0.1s ease-in-out,
-            fill 0.1s ease-in-out,
             stroke 0.1s ease-in-out;
             transition: color 0.1s ease-in-out,
-            fill 0.1s ease-in-out,
             stroke 0.1s ease-in-out;
         }
 
         .partSwitcher .partButtons > div:hover svg,
         .partSwitcher .partButtons > div:hover svg rect,
+        .partSwitcher .partButtons > div:hover svg path,
+        .partSwitcher .partButtons > div:hover svg polygon {
+            fill: hoveredTabIconColor;
+        }
+
         .partSwitcher .partButtons > div:hover svg path {
-            fill: hoveredTabTextColor;
+            stroke: hoveredTabIconColor;
         }
 
         .partSwitcher .partButtons > div[selected] svg,
         .partSwitcher .partButtons > div[selected] svg rect,
-        .partSwitcher .partButtons > div[selected] svg path {
+        .partSwitcher .partButtons > div[selected] svg path,
+        .partSwitcher .partButtons > div[selected] svg polygon {
             fill: activeTabIconColor;
         }
 
+        .partSwitcher .partButtons > div[selected] svg path {
+            stroke: activeTabIconColor;
+        }
+
         /******************************************************************************
          *
          * Part buttons

diff --git a/...-app/src/main/java/org/eclipse/che/ide/part/explorer/project/ProjectExplorerViewImpl.java b/...-app/src/main/java/org/eclipse/che/ide/part/explorer/project/ProjectExplorerViewImpl.java
@@ -262,7 +262,7 @@ public Element render(Node node, String domID, Tree.Joint joint, int depth) {
             Element nodeContainer = element.getFirstChildElement();
             DivElement divElement = Document.get().createDivElement();
             divElement.setInnerText("(" + head + ")");
-            divElement.setClassName(treeStyles.styles().vcsHeadContainer());
+            divElement.setClassName(treeStyles.treeStylesCss().vcsHeadContainer());
             nodeContainer.insertBefore(divElement, nodeContainer.getLastChild());
           }
         }

diff --git a/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/preferences/StyleInjector.java b/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/preferences/StyleInjector.java
@@ -36,13 +36,14 @@ public void inject() {
     resources.dataGridStyle().ensureInjected();
     resources.cellTableStyle().ensureInjected();
     resources.defaultCategoriesListCss().ensureInjected();
-    resources.Css().ensureInjected();
+    resources.buttonLoaderCss().ensureInjected();
     resources.menuCss().ensureInjected();
 
     resources.commandsExplorerCss().ensureInjected();
     resources.commandsPaletteCss().ensureInjected();
     resources.commandToolbarCss().ensureInjected();
     resources.editorCss().ensureInjected();
     resources.commandTypeChooserCss().ensureInjected();
+    resources.treeStylesCss().ensureInjected();
   }
 }
diff --git a/...rc/main/java/org/eclipse/che/ide/processes/loading/WorkspaceLoadingTrackerViewImpl.ui.xml b/...rc/main/java/org/eclipse/che/ide/processes/loading/WorkspaceLoadingTrackerViewImpl.ui.xml
@@ -18,35 +18,17 @@
     <ui:with field="machineResources" type="org.eclipse.che.ide.machine.MachineResources"/>
     <ui:with field="resources" type="org.eclipse.che.ide.Resources" />
 
-    <ui:style>
-
-        @def workspaceStatusBackgroundColor #191c28;
+    <ui:style  src="org/eclipse/che/ide/api/ui/style.css">
         @def workspaceStatusDelimiterColor rgba(160, 169, 183, 0.2);
-        @def workspaceStatusMachineOutputsHyperlink #4973c1;
-
-        @def workspaceStatusWaitingWorkspaceSection #f0c530;
-        @def workspaceStatusWorkspaceStartedSection #3aa461;
-        @def workspaceStatusWorkspaceStoppedSection #f0c530;
-        @def workspaceStatusWorkspaceFailedSection red;
-
-        @def workspaceStatusMachineStateStarting #4973c1;
-        @def workspaceStatusMachineStateRunning #3aa461;
-        @def workspaceStatusMachineStateStopped #adadad;
-        @def workspaceStatusMachineStateFailed red;
-
-        @def workspaceStatusInstallerStateStarting #4973c1;
-        @def workspaceStatusInstallerStateRunning #4973c1;
-        @def workspaceStatusInstallerStateFailed red;
-
-        @def workspaceStatusInstallerStatusStarting #4973c1;
-        @def workspaceStatusInstallerStatusRunning #3aa461;
-        @def workspaceStatusInstallerStatusFailed red;
-
-        @def workspaceStatusErrorMessage red;
+        @def workspaceStatusGreyColor #adadad;
+        @def workspaceStatusYellowColor #f0c530;
+        @def workspaceStatusBlueColor #4973c1;
+        @def workspaceStatusGreenColor #3aa461;
+        @def workspaceStatusRedColor red;
 
         .panel {
             overflow: auto;
-            background-color: workspaceStatusBackgroundColor;
+            background-color: outputBackgroundColor;
             user-select: text;
             position: relative;
         }
@@ -61,6 +43,7 @@
 
         .table > tbody > tr > td {
             font-family: "Open Sans", sans-serif;
+            color: outputFontColor;
             font-size: 9pt;
             line-height: 13px;
             white-space: pre;
@@ -100,7 +83,7 @@
             top: 37px;
             line-height: 15px!important;
             font-size: 9px;
-            color: workspaceStatusMachineOutputsHyperlink;
+            color: workspaceStatusBlueColor;
             text-decoration: underline;
             cursor: pointer;
         }
@@ -131,19 +114,19 @@
         }
 
         .machineState[rel="starting"] {
-            color: workspaceStatusMachineStateStarting;
+            color: workspaceStatusBlueColor;
         }
 
         .machineState[rel="running"] {
-            color: workspaceStatusMachineStateRunning;
+            color: workspaceStatusGreenColor;
         }
 
         .machineState[rel="stopped"] {
-            color: workspaceStatusMachineStateStopped;
+            color: workspaceStatusGreyColor;
         }
 
         .machineState[rel="failed"] {
-            color: workspaceStatusMachineStateFailed;
+            color: workspaceStatusRedColor;
         }
 
         .installerRow {
@@ -177,32 +160,32 @@
         }
 
         .state[rel="starting"] {
-            color: workspaceStatusInstallerStateStarting;
+            color: workspaceStatusBlueColor;
         }
 
         .state[rel="running"] {
-            color: workspaceStatusInstallerStateRunning;
+            color: workspaceStatusBlueColor;
         }
 
         .state[rel="failed"] {
-            color: workspaceStatusInstallerStateFailed;
+            color: workspaceStatusRedColor;
         }
 
         .status[rel="starting"] {
-            color: workspaceStatusInstallerStatusStarting;
+            color: workspaceStatusBlueColor;
         }
 
         .status[rel="running"],
         .status[rel="ok"] {
-            color: workspaceStatusInstallerStatusRunning;
+            color: workspaceStatusGreenColor;
         }
 
         .status[rel="failed"] {
-            color: workspaceStatusInstallerStatusFailed;
+            color: workspaceStatusRedColor;
         }
 
         .error {
-            color: workspaceStatusErrorMessage;
+            color: workspaceStatusRedColor;
             white-space: normal!important;
             padding-right: 30px;
         }
@@ -213,15 +196,15 @@
             font-size: 20px;
             line-height: 20px!important;
             text-align: center;
-            color: workspaceStatusErrorMessage;
+            color: workspaceStatusRedColor;
             position: relative;
             vertical-align: middle;
         }
 
         .workspaceFailedIcon > div {
             position: absolute;
             left: 15px;
-            top: 0px;
+            top: 0;
         }
 
         .workspaceFailedTitle {
@@ -254,19 +237,19 @@
         }
 
         .waitingWorkspaceSection td {
-            color: workspaceStatusWaitingWorkspaceSection;
+            color: workspaceStatusYellowColor;
         }
 
         .workspaceStartedSection td {
-            color: workspaceStatusWorkspaceStartedSection;
+            color: workspaceStatusGreenColor;
         }
 
         .workspaceStoppedSection td {
-            color: workspaceStatusWorkspaceStoppedSection;
+            color: workspaceStatusYellowColor;
         }
 
         .workspaceFailedSection td {
-            color: workspaceStatusWorkspaceFailedSection;
+            color: workspaceStatusRedColor;
         }
 
     </ui:style>

diff --git a/.../java/org/eclipse/che/ide/projectimport/wizard/presenter/ImportProjectWizardViewImpl.java b/.../java/org/eclipse/che/ide/projectimport/wizard/presenter/ImportProjectWizardViewImpl.java
@@ -67,7 +67,7 @@ public void onClick(ClickEvent event) {
                 delegate.onImportClicked();
               }
             });
-    importButton.addStyleName(ideResources.Css().buttonLoader());
+    importButton.addStyleName(ideResources.buttonLoaderCss().buttonLoader());
 
     addButtonToFooter(importButton);