devonfw#1454 Added custom type FlatIcon for easier icon access | Resp…

…onsive GUI | Dark Mode WiP
NelsonNew · Dec 19, 2022 · 55c16d9 · 55c16d9
1 parent c1578ca
commit 55c16d9
Show file tree

Hide file tree

Showing 18 changed files with 242 additions and 315 deletions.
diff --git a/cobigen/gui/pom.xml b/cobigen/gui/pom.xml
@@ -53,6 +53,16 @@
             <version>3.13.2</version>
             <scope>test</scope>
         </dependency>
+        <dependency>
+            <groupId>org.kordamp.ikonli</groupId>
+            <artifactId>ikonli-javafx</artifactId>
+            <version>11.3.5</version>
+        </dependency>
+        <dependency>
+            <groupId>org.kordamp.ikonli</groupId>
+            <artifactId>ikonli-materialdesign-pack</artifactId>
+            <version>11.3.5</version>
+        </dependency>
     </dependencies>
     <build>
         <plugins>

diff --git a/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/App.java b/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/App.java
@@ -10,16 +10,35 @@
 import javafx.scene.image.Image;
 import javafx.stage.Stage;
 
+/**
+ * TODO nneuhaus This type ...
+ *
+ */
 public class App extends Application {
 
+  /**
+   * latch for waiting for the app
+   */
   public static final CountDownLatch latch = new CountDownLatch(1);
 
+  /**
+   * The app itself
+   */
   public static App app = null;
 
-  public Stage window;
-
+  /**
+   * The scene to set in the window
+   */
   private static Scene scene;
 
+  /**
+   * The window to show in the app
+   */
+  public Stage window;
+
+  /**
+   * @return the app when it is ready
+   */
   public static App waitForApp() {
 
     try {
@@ -30,22 +49,25 @@ public static App waitForApp() {
     return app;
   }
 
+  /**
+   * Sets the given app as the general app
+   *
+   * @param app0 gets set as the app
+   */
   public static void setApp(App app0) {
 
     app = app0;
     latch.countDown();
   }
 
+  /**
+   * The constructor.
+   */
   public App() {
 
     setApp(this);
   }
 
-  public void printSomething() {
-
-    System.out.println("You called a method on the application");
-  }
-
   @Override
   public void start(Stage primaryStage) throws IOException {
 
@@ -58,6 +80,7 @@ public void start(Stage primaryStage) throws IOException {
     Image image = new Image(App.class.getResource("icons/devon-icon.jpg").toExternalForm());
     this.window.setTitle("Template Set Manager");
     this.window.getIcons().add(image);
+
     this.window.setScene(App.scene);
     this.window.showAndWait();
   }

diff --git a/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/AppLauncher.java b/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/AppLauncher.java
@@ -18,7 +18,6 @@ public void run() {
       }
     }.start();
     this.app = App.waitForApp();
-    this.app.printSomething();
   }
 
   public static void main(String[] args) {
@@ -31,7 +30,6 @@ public void run() {
       }
     }.start();
     App app = App.waitForApp();
-    app.printSomething();
   }
 
 }
diff --git a/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/controllers/HomeController.java b/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/controllers/HomeController.java
@@ -7,13 +7,13 @@
 import java.net.URL;
 import java.util.ResourceBundle;
 
+import com.devonfw.cobigen.gui.App;
 import com.devonfw.cobigen.gui.services.TreeViewBuilder;
 
 import javafx.fxml.FXML;
 import javafx.fxml.Initializable;
 import javafx.scene.Scene;
 import javafx.scene.control.MenuButton;
-import javafx.scene.control.MenuItem;
 import javafx.scene.control.TreeView;
 import javafx.scene.layout.AnchorPane;
 
@@ -24,28 +24,25 @@
 public class HomeController implements Initializable {
 
   @FXML
-  AnchorPane treeViewPane;
-
-  @FXML
-  MenuButton settings;
+  AnchorPane homePane;
 
   @FXML
-  MenuItem light;
+  AnchorPane treeViewPane;
 
   @FXML
-  MenuItem dark;
+  MenuButton settings;
 
   private String[] EXAMPLE_LIST = { "Title of Increment 1", "Description of Increment 1", "Title of Increment 2",
   "Description of Increment 2", "Title of Increment 3", "Description of Increment 3" };
 
-  // TODO: get path dynamically from file name
-  private String lightTheme = "file:/C:/projects/my-project/workspaces/main/cobigen/cobigen/gui/eclipse-target/classes/com/devonfw/cobigen/gui/styles.css";
+  private String lightTheme = App.class.getResource("styles.css").toExternalForm();
 
-  private String darkTheme = "file:/C:/projects/my-project/workspaces/main/cobigen/cobigen/gui/eclipse-target/classes/com/devonfw/cobigen/gui/dark_theme.css";
+  private String darkTheme = App.class.getResource("dark_theme.css").toExternalForm();
 
   @Override
   public void initialize(URL location, ResourceBundle resources) {
 
+    // Build the tree view
     TreeView<String> treeView = TreeViewBuilder.buildTreeView(this.EXAMPLE_LIST);
     treeView.setId("treeView");
     AnchorPane.setTopAnchor(treeView, 0.0);
@@ -66,23 +63,16 @@ public void openWiki(javafx.event.ActionEvent actionEvent) throws IOException, U
     Desktop.getDesktop().browse(new URI("https://github.com/devonfw/cobigen/wiki"));
   }
 
-  public void changeToDark(javafx.event.ActionEvent actionEvent) throws IOException {
+  public void changeTheme(javafx.event.ActionEvent actionEvent) throws IOException {
 
     Scene scene = this.treeViewPane.getScene();
-    scene.getStylesheets().remove(this.lightTheme);
-    if (!scene.getStylesheets().contains(this.darkTheme)) {
-      scene.getStylesheets().add(this.darkTheme);
-    }
-
-  }
-
-  public void changeToLight(javafx.event.ActionEvent actionEvent) throws IOException {
 
-    Scene scene = this.treeViewPane.getScene();
-    scene.getStylesheets().remove(this.darkTheme);
-    if (!scene.getStylesheets().contains(this.lightTheme)) {
+    if (scene.getStylesheets().contains(this.lightTheme)) {
+      scene.getStylesheets().remove(this.lightTheme);
+      scene.getStylesheets().add(this.darkTheme);
+    } else {
+      scene.getStylesheets().remove(this.darkTheme);
       scene.getStylesheets().add(this.lightTheme);
     }
-
   }
 }
diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/dark_theme.css b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/dark_theme.css
@@ -1,124 +1,75 @@
-
-/*THIS IS ONLY A TEST FILE*/ 
-
-
-/* makes button and filter option white and borderless*/
 .root {
-  -fx-body-color : black;
-  -fx-outer-border : black;
-
-}
-.root * {
-    -fx-font: 11px Arial;
+    -fx-accent: #1e74c6;
+    -fx-body-color : white;
+    -fx-outer-border : black;
     -fx-focus-color: transparent;
     -fx-faint-focus-color: transparent;
-    -fx-base: white;
+    -fx-base: black;
     -fx-accent: #0070AD;
+    -fx-control-inner-background: derive(-fx-base, 35.0%);
+    -fx-control-inner-background-alt: -fx-control-inner-background ;
 }
 
-.scroll-bar {
-  -fx-background-color: white;
-  -fx-block-increment: 1;
+/* Text */
+Text {
+  -fx-font: 12px Ubuntu;
+  -fx-fill: white;
+  -fx-font-weight: 200;
+  -fx-font-smoothing-type: lcd;
 }
 
-/* sets the color when cursor hovers over button*/
-color-picker:hover,
-.date-picker:hover > .arrow-button,
-.combo-box:hover,.choice-box:hover,
-.number-button:hover,.left-arrow-button:hover,.right-arrow-button:hover,
-.button:hover,.menu-button:hover,.toggle-button:hover,
-.font-menu-button:hover,
-.split-menu-button > .label:hover, .split-menu-button > .arrow-button:hover {
-  -fx-background-color: #ececec;
-
+.header {
+ -fx-font-weight: 400;
+ -fx-font-size: 16.0px;
 }
 
- /*pressed selected*/
-.color-picker:pressed,.color-picker:selected,
-.number-button:pressed,.number-button:selected,
-.date-picker:pressed > .arrow-button,
-.combo-box:pressed > .arrow-button,.combo-box:selected > .arrow-button,
-.choice-box:pressed > .arrow-button,.choice-box:selected > .arrow-button,
-.font-menu-button:pressed,.font-menu-button:selected,
-.left-arrow-button:pressed,.left-arrow-button:selected,
-.right-arrow-button:pressed,.right-arrow-button:selected,
-.button:pressed, .button:selected,.menu-button:pressed,.menu-button:selected
-,.toggle-button:pressed,.toggle-button:selected,
-.split-menu-button:pressed > .label, .split-menu-button > .arrow-button:pressed {
-  -fx-background-color: #D3D3D3
-  }
-
- #menuBarPane{
- -fx-background-color: white;
- }
-
- #templateSetsLabel{
- -fx-background-color: transparent;
-
- }
- #headersText{
- -fx-font-size: 20px;
- }
-
- #homeButtonIcon{
-  -fx-scale-x: 0.1;
-  -fx-scale-y: 0.1;
- }
-
- .menuButtons{
- -fx-background-color: #0070AD
- }
- .subHeader{
- -fx-font-size: 16px
- }
-
- /* Items in the search panel*/
- .listCell{
-
- }
-.list-cell:filled:selected:focused, .list-cell:filled:selected {
-    -fx-background-color: #0070AD;
-    -fx-text-fill: white;
+.subheader {
+ -fx-font-weight: 300;
+ -fx-font-size: 14.0px;
 }
 
-.list-cell:even { /* <=== changed to even */
-    -fx-background-color: white;
+/* Components */
+.label{
+    -fx-text-fill: lightgray;
 }
 
-.list-cell:filled:hover {
-    -fx-background-color: #12B3DB;
-    -fx-text-fill: white;
+.text-field {
+    -fx-prompt-text-fill: gray;
 }
 
-list-view {
-    -fx-background-color: white;
+.button{
+    -fx-focus-traversable: false;
 }
 
-.list-cell:odd {
--fx-background-color: white;
-
+.button:default {
+    -fx-base: -fx-accent ;
 }
 
-.split-menu-button {
-    -fx-background-color: #0070AD, #0070AD;
-
-}
-.split-menu-button > .label {
+.button:hover{
     -fx-text-fill: white;
-    -fx-background-color: #0070AD, #0070AD;
 }
-.split-menu-button > .arrow-button {
-    -fx-background-color: #0070AD, #0070AD;
 
+.separator *.line {
+    -fx-background-color: #3C3C3C;
+    -fx-border-style: solid;
+    -fx-border-width: 1.0px;
 }
-.split-menu-button:hover {
-    -fx-background-color: #0070AD;
+
+.scroll-bar {
+  -fx-background-color: derive(-fx-base,45.0%);
+  -fx-block-increment: 1.0;
 }
-.split-menu-button:hover > .label {
-    -fx-background-color: #0070AD, #0070AD, transparent, #0070AD;
 
+.list-cell:even,
+.list-cell:odd {
+    -fx-control-inner-background: derive(-fx-base, 15.0%);
 }
-.split-menu-button:hover > .arrow-button {
-    -fx-background-color: #ececec,  #ececec,  #ececec,  #ececec;
 
+.list-cell:empty {
+    -fx-background-color: transparent;
 }
+
+.list-cell {
+    -fx-border-color: transparent;
+    -fx-table-cell-border-color:transparent;
+}