custom title bar with buttons to close the application, change window…

… size and minimize. Styled dark theme buttons
NelsonNew · Dec 22, 2022 · d37de66 · d37de66
1 parent 4ad1a8f
commit d37de66
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 18 deletions.
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
@@ -9,6 +9,7 @@
 import javafx.scene.Scene;
 import javafx.scene.image.Image;
 import javafx.stage.Stage;
+import javafx.stage.StageStyle;
 
 /**
  * TODO nneuhaus This type ...
@@ -80,7 +81,8 @@ 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.initStyle(StageStyle.TRANSPARENT);
+    this.window.setResizable(true);
     this.window.setScene(App.scene);
     this.window.showAndWait();
   }

diff --git a/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/Controller.java b/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/Controller.java
@@ -8,10 +8,15 @@
 import com.devonfw.cobigen.gui.controllers.HomeController;
 import com.devonfw.cobigen.gui.controllers.MenuController;
 
+import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
 import javafx.fxml.Initializable;
 import javafx.scene.Parent;
+import javafx.scene.control.Button;
+import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.Pane;
+import javafx.stage.Stage;
 
 /**
  * Controller for the Template Set Management GUI
@@ -45,6 +50,22 @@ public class Controller implements Initializable {
   @FXML
   private AnchorPane detailsPane;
 
+  @FXML
+  private Pane topPane;
+
+  @FXML
+  private Button closeButton;
+
+  @FXML
+  private Button minButton;
+
+  @FXML
+  private Button minMaxButton;
+
+  private double xOffset = 0;
+
+  private double yOffset = 0;
+
   /**
    * Initial View
    */
@@ -87,4 +108,64 @@ public void loadDetails() throws IOException {
     }
 
   }
+
+  /**
+   * @param event: click on the x Button
+   */
+  @FXML
+  protected void handleCloseAction(ActionEvent event) {
+
+    // get the current stage
+    Stage stage = (Stage) this.closeButton.getScene().getWindow();
+    // close the window
+    stage.close();
+  }
+
+  /**
+   * @param event : click on the Button to switch window view
+   */
+  @FXML
+  protected void handleMinMaxAction(ActionEvent event) {
+
+    // get the current stage
+    Stage stage = (Stage) this.minMaxButton.getScene().getWindow();
+    // if window is full screen, make it smaller
+    // if it is a small window, make it full screen
+    if (stage.isMaximized()) {
+      stage.setMaximized(false);
+    } else {
+      stage.setMaximized(true);
+    }
+
+  }
+
+  /**
+   * @param event : click on the minimize Button
+   */
+  @FXML
+  protected void handleMinAction(ActionEvent event) {
+
+    // this minimizes the window, can be reopened by clicking in the icon in the task bar
+    // TODO: fix animation if possible?
+    Stage stage = (Stage) this.minButton.getScene().getWindow();
+    stage.setIconified(true);
+
+  }
+
+  @FXML
+  protected void handleClickAction(MouseEvent event) {
+
+    Stage stage = (Stage) this.topPane.getScene().getWindow();
+    this.xOffset = stage.getX() - event.getScreenX();
+    this.yOffset = stage.getY() - event.getScreenY();
+  }
+
+  @FXML
+  protected void handleMovementAction(MouseEvent event) {
+
+    Stage stage = (Stage) this.topPane.getScene().getWindow();
+
+    stage.setX(event.getScreenX() + this.xOffset);
+    stage.setY(event.getScreenY() + this.yOffset);
+  }
 }
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
@@ -15,6 +15,7 @@
    -fx-padding: 0;
 }
 .split-pane:vertical > .split-pane-divider {
+
    -fx-padding: 0.5;
 }
 
@@ -51,8 +52,21 @@ Text {
 
 .button{
     -fx-focus-traversable: false;
+    -fx-background-color: -fx-control-inner-background, -fx-control-inner-background, -fx-control-inner-background;
+}
+#togglebutton{
+   -fx-background-color: transparent;
+}
+#filterMenuButton{
+  -fx-background-color: -fx-control-inner-background;
 }
+ .titleBarButtons{
+ -fx-background-color: transparent
+ }
 
+.icons{
+  -fx-icon-color: -fx-body-color;
+}
 .button:default {
     -fx-base: -fx-accent ;
 }
@@ -84,4 +98,8 @@ Text {
 .list-cell {
     -fx-border-color: transparent;
     -fx-table-cell-border-color:transparent;
+}
+
+#menuBarPane{
+  -fx-background-color: -fx-control-inner-background;
 }
diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/Home.fxml b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/Home.fxml
@@ -16,9 +16,9 @@
         <AnchorPane fx:id="headerPane" minHeight="0.0" minWidth="0.0" prefHeight="57.0" prefWidth="429.0" SplitPane.resizableWithParent="false">
           <children>
             <Text fx:id="headerText" layoutX="5.0" layoutY="31.0" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="header" text="Welcome to CobiGen`s Template Set Manager!" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="10.0" />
-            <ToggleButton layoutX="389.0" layoutY="6.0" mnemonicParsing="false" onAction="#changeTheme" prefHeight="28.0" prefWidth="27.0" AnchorPane.bottomAnchor="7.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="7.0">
+            <ToggleButton fx:id="togglebutton" layoutX="389.0" layoutY="6.0" mnemonicParsing="false" onAction="#changeTheme" prefHeight="28.0" prefWidth="27.0" AnchorPane.bottomAnchor="7.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="7.0">
               <graphic>
-                <FontIcon iconLiteral="mdi-theme-light-dark" iconSize="20" />
+                <FontIcon styleClass="icons" iconLiteral="mdi-theme-light-dark" iconSize="20" />
               </graphic>
             </ToggleButton>
           </children>
@@ -28,11 +28,11 @@
             <Text layoutX="6.0" layoutY="19.0" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="subheader" text="How it Works" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="5.0" AnchorPane.topAnchor="5.0" />
             <Separator layoutY="24.0" prefHeight="16.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="25.0" />
             <Text layoutX="10.0" layoutY="53.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Search for template sets in the search bar on the left" wrappingWidth="340.80274963378906" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="40.0" />
-            <FontIcon iconLiteral="mdi-magnify" iconSize="20" layoutX="413.0" layoutY="55.0" AnchorPane.bottomAnchor="441.1666666666667" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="40.0" />
+            <FontIcon styleClass="icons" iconLiteral="mdi-magnify" iconSize="20" layoutX="413.0" layoutY="55.0" AnchorPane.bottomAnchor="441.1666666666667" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="40.0" />
             <Text layoutX="10.0" layoutY="83.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Filter your search for tags or installation state" wrappingWidth="340.80274963378906" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="70.0" />
-            <FontIcon iconLiteral="mdi-filter" iconSize="20" layoutX="413.0" layoutY="86.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="70.0" />
+            <FontIcon  styleClass="icons" iconLiteral="mdi-filter" iconSize="20" layoutX="413.0" layoutY="86.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="70.0" />
             <Text layoutX="10.0" layoutY="111.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Install, update and uninstall chosen template sets" wrappingWidth="340.80274963378906" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="100.0" />
-            <FontIcon iconLiteral="mdi-download" iconSize="20" layoutX="413.0" layoutY="114.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="100.0" />
+            <FontIcon styleClass="icons"  iconLiteral="mdi-download" iconSize="20" layoutX="413.0" layoutY="114.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="100.0" />
             <Text layoutX="5.0" layoutY="161.0" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="subheader" text="Template Set Structure" AnchorPane.leftAnchor="5.0" AnchorPane.topAnchor="135.0" />
             <Separator layoutY="166.0" prefHeight="16.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="155.0" />
             <AnchorPane layoutX="18.0" layoutY="182.0" prefHeight="120.0" prefWidth="427.0" AnchorPane.bottomAnchor="100.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="170.0">

diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/Menu.fxml b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/Menu.fxml
@@ -3,7 +3,6 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.CheckMenuItem?>
-<?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ListView?>
 <?import javafx.scene.control.Menu?>
 <?import javafx.scene.control.MenuButton?>
@@ -15,28 +14,27 @@
 <?import javafx.scene.layout.AnchorPane?>
 <?import org.kordamp.ikonli.javafx.FontIcon?>
 
-<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="502.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="30.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.devonfw.cobigen.gui.controllers.MenuController">
+<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="502.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="30.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.devonfw.cobigen.gui.controllers.MenuController">
   <children>
 
   <AnchorPane fx:id="menuPane" minHeight="0.0" minWidth="0.0" prefHeight="358.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                <children>
                   <AnchorPane fx:id="menuBarPane" layoutY="1.0" prefHeight="25.0" prefWidth="207.0" styleClass="menu-bar" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                      <children>
-                        <Label fx:id="templateSetsLabel" text="Template Sets" AnchorPane.leftAnchor="5.0" AnchorPane.topAnchor="4.0" />
                         <Button fx:id="homeButton" layoutX="82.0" layoutY="2.0" maxHeight="15.0" maxWidth="15.0" minHeight="25.0" minWidth="25.0" mnemonicParsing="false" prefHeight="15.0" prefWidth="15.0" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="74.0" AnchorPane.topAnchor="1.0">
                            <tooltip>
                               <Tooltip fx:id="homeTooltip" text="Home" />
                            </tooltip>
                      <graphic>
-                        <FontIcon iconLiteral="mdi-home" />
+                        <FontIcon iconLiteral="mdi-home" styleClass="icons" />
                      </graphic>
                         </Button>
                         <Button fx:id="refreshButton" layoutX="114.0" layoutY="1.0" maxHeight="15.0" maxWidth="15.0" mnemonicParsing="false" onAction="#refresh" prefHeight="15.0" prefWidth="15.0" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="46.0" AnchorPane.topAnchor="1.0">
                            <tooltip>
                               <Tooltip fx:id="refreshTooltip" text="Refresh" />
                            </tooltip>
                      <graphic>
-                        <FontIcon iconLiteral="mdi-refresh" />
+                        <FontIcon iconLiteral="mdi-refresh" styleClass="icons" />
                      </graphic>
                         </Button>
                         <MenuButton fx:id="filterMenuButton" layoutX="138.0" layoutY="1.0" mnemonicParsing="false" prefHeight="25.0" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="1.0">
@@ -59,7 +57,7 @@
                               </Menu>
                           </items>
                      <graphic>
-                        <FontIcon iconLiteral="mdi-filter" />
+                        <FontIcon iconLiteral="mdi-filter" styleClass="icons" />
                      </graphic>
                         </MenuButton>
                      </children>
@@ -70,7 +68,7 @@
                 <AnchorPane fx:id="searchPane" minHeight="0.0" minWidth="0.0" prefHeight="283.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="30.0">
                <children>
                 <TextField id="searchBar" fx:id="searchBar" prefHeight="25.0" prefWidth="174.0" promptText="Search Template Sets" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="26.0" AnchorPane.topAnchor="1.0" />
-                <Button fx:id="clearSearchResultsButton" mnemonicParsing="false" onAction="#clearSearchResults" prefHeight="25.0" prefWidth="27.0" style="-fx-background-color: TRANSPARENT;" text="x" textFill="#0000004d" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
+                <Button fx:id="clearSearchResultsButton" minHeight="-Infinity" mnemonicParsing="false" onAction="#clearSearchResults" prefHeight="23.0" prefWidth="27.0" style="-fx-background-color: TRANSPARENT;" text="x" textFill="#0000004d" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                 <ScrollPane fitToHeight="true" fitToWidth="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="27.0">
                      <content>
                         <ListView id="searchResultsView" fx:id="searchResultsView" />

diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/Primary.fxml b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/Primary.fxml
@@ -1,24 +1,45 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
 <?import javafx.scene.control.SplitPane?>
 <?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.Pane?>
+<?import org.kordamp.ikonli.javafx.FontIcon?>
 
-<AnchorPane fx:id="outerPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="463.0" prefWidth="671.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.devonfw.cobigen.gui.Controller">
+<AnchorPane fx:id="outerPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="489.0" prefWidth="671.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.devonfw.cobigen.gui.Controller">
    <children>
-      <SplitPane fx:id="verticalSplitPane" dividerPositions="0.33008213552361404" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+      <SplitPane fx:id="verticalSplitPane" dividerPositions="0.5" layoutY="24.0" prefHeight="465.0" prefWidth="671.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="24.0">
         <items>
-          <AnchorPane fx:id="leftPane">
+          <AnchorPane fx:id="leftPane" minWidth="-Infinity" prefHeight="463.0" prefWidth="236.0">
                <children>
                   <fx:include fx:id="menu" source="Menu.fxml" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                </children>
             </AnchorPane>
-          <AnchorPane fx:id="rightPane">
+          <AnchorPane fx:id="rightPane" minWidth="-Infinity" prefHeight="463.0" prefWidth="403.0">
                <children>
                   <fx:include fx:id="details" source="Details.fxml" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                   <fx:include fx:id="home" source="Home.fxml" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                </children>
             </AnchorPane>
         </items>
       </SplitPane>
+      <Button fx:id="closeButton" layoutX="645.0" layoutY="1.0" minHeight="-Infinity" mnemonicParsing="false" onAction="#handleCloseAction" prefHeight="23.0" prefWidth="26.0" styleClass="titleBarButtons" AnchorPane.rightAnchor="0.0">
+         <graphic>
+            <FontIcon boundsType="VISUAL" iconLiteral="mdi-close" styleClass="icons" wrappingWidth="14.333343982696533" />
+         </graphic>
+      </Button>
+      <Button fx:id="minButton" layoutX="593.0" layoutY="1.0" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#handleMinAction" prefHeight="23.0" prefWidth="26.0" styleClass="titleBarButtons" AnchorPane.rightAnchor="52.0">
+         <graphic>
+            <FontIcon iconLiteral="mdi-chevron-down" styleClass="icons" />
+         </graphic>
+      </Button>
+      <Button fx:id="minMaxButton" layoutX="619.0" layoutY="1.0" minHeight="-Infinity" mnemonicParsing="false" onAction="#handleMinMaxAction" styleClass="titleBarButtons" AnchorPane.rightAnchor="24.0">
+         <graphic>
+            <FontIcon iconLiteral="mdi-checkbox-multiple-blank-outline" styleClass="icons" text="" />
+         </graphic>
+      </Button>
+      <Label layoutX="7.0" layoutY="2.0" prefHeight="23.0" prefWidth="149.0" text="Template Set Manager" />
+      <Pane fx:id="topPane" onMouseDragged="#handleMovementAction" onMousePressed="#handleClickAction" prefHeight="23.0" prefWidth="593.0" />
    </children>
 </AnchorPane>
diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/TemplateSetCell.fxml b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/fxml/TemplateSetCell.fxml
@@ -26,7 +26,7 @@
             <Insets right="5.0" />
          </GridPane.margin>
          <graphic>
-            <FontIcon iconLiteral="mdi-settings" />
+            <FontIcon styleClass="icons" iconLiteral="mdi-settings" />
          </graphic>
       </Button>
    </children>

diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/styles.css b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/styles.css
@@ -99,6 +99,14 @@ color-picker:hover,
  .menuButtons{
  -fx-background-color: #0070AD
  }
+
+ .titleBarButtons{
+ -fx-background-color: transparent
+ }
+
+ #clearSearchButton{
+ -fx-background-color: transparent
+ }
 
  /* Items in the search panel*/
 .list-cell:filled:selected:focused, .list-cell:filled:selected {