commit 3cfa4fb1c3f49c30499ac688fcdc43db29d6fe4b
parent dbcd6816dabe2736911939d4ddb3b08b3db9d0f0
Author: A Koens <[email protected]>
Date: Thu, 13 Oct 2022 12:34:24 +0200
Menu bar
Have a nice looking menu bar now.
Diffstat:
7 files changed, 82 insertions(+), 53 deletions(-)
diff --git a/settings.properties b/settings.properties
@@ -1,6 +1,6 @@
#Application Settings
-#Wed Oct 12 16:40:16 CEST 2022
+#Thu Oct 13 12:30:42 CEST 2022
screenWidth=680
-fullscreen=false
+fullscreen=true
screenHeight=480
title=ISY Game Client
diff --git a/src/main/resources/nl/isygameclient/css/modules/colors.module.css b/src/main/resources/nl/isygameclient/css/modules/colors.module.css
@@ -3,31 +3,31 @@
-fx-background-color: -md-sys-color-inverse-primary;
}
.inverse-primary-text {
- -fx-fill: -md-sys-color-inverse-primary;
+ -fx-text-fill: -md-sys-color-inverse-primary;
}
.on-primary-container {
-fx-background-color: -md-sys-color-on-primary-container;
}
.on-primary-container-text {
- -fx-fill: -md-sys-color-on-primary-container;
+ -fx-text-fill: -md-sys-color-on-primary-container;
}
.on-primary {
-fx-background-color: -md-sys-color-on-primary;
}
.on-primary-text {
- -fx-fill: -md-sys-color-on-primary;
+ -fx-text-fill: -md-sys-color-on-primary;
}
.primary-container {
-fx-background-color: -md-sys-color-primary-container;
}
.primary-container-text {
- -fx-fill: -md-sys-color-primary-container;
+ -fx-text-fill: -md-sys-color-primary-container;
}
.primary {
-fx-background-color: -md-sys-color-primary;
}
.primary-text {
- -fx-fill: -md-sys-color-primary;
+ -fx-text-fill: -md-sys-color-primary;
}
/* Secondary */
@@ -35,25 +35,25 @@
-fx-background-color: -md-sys-color-on-secondary-container;
}
.on-secondary-container-text {
- -fx-fill: -md-sys-color-on-secondary-container;
+ -fx-text-fill: -md-sys-color-on-secondary-container;
}
.on-secondary {
-fx-background-color: -md-sys-color-on-secondary;
}
.on-secondary-text {
- -fx-fill: -md-sys-color-on-secondary;
+ -fx-text-fill: -md-sys-color-on-secondary;
}
.secondary-container {
-fx-background-color: -md-sys-color-secondary-container;
}
.secondary-container-text {
- -fx-fill: -md-sys-color-secondary-container;
+ -fx-text-fill: -md-sys-color-secondary-container;
}
.secondary {
-fx-background-color: -md-sys-color-secondary;
}
.secondary-text {
- -fx-fill: -md-sys-color-secondary;
+ -fx-text-fill: -md-sys-color-secondary;
}
/* Tertiary */
@@ -61,25 +61,25 @@
-fx-background-color: -md-sys-color-on-tertiary-container;
}
.on-tertiary-container-text {
- -fx-fill: -md-sys-color-on-tertiary-container;
+ -fx-text-fill: -md-sys-color-on-tertiary-container;
}
.on-tertiary {
-fx-background-color: -md-sys-color-on-tertiary;
}
.on-tertiary-text {
- -fx-fill: -md-sys-color-on-tertiary;
+ -fx-text-fill: -md-sys-color-on-tertiary;
}
.tertiary-container {
-fx-background-color: -md-sys-color-tertiary-container;
}
.tertiary-container-text {
- -fx-fill: -md-sys-color-tertiary-container;
+ -fx-text-fill: -md-sys-color-tertiary-container;
}
.tertiary {
-fx-background-color: -md-sys-color-tertiary;
}
.tertiary-text {
- -fx-fill: -md-sys-color-tertiary;
+ -fx-text-fill: -md-sys-color-tertiary;
}
/* Error */
@@ -87,25 +87,25 @@
-fx-background-color: -md-sys-color-on-error-container;
}
.on-error-container-text {
- -fx-fill: -md-sys-color-on-error-container;
+ -fx-text-fill: -md-sys-color-on-error-container;
}
.on-error {
-fx-background-color: -md-sys-color-on-error;
}
.on-error-text {
- -fx-fill: -md-sys-color-on-error;
+ -fx-text-fill: -md-sys-color-on-error;
}
.error-container {
-fx-background-color: -md-sys-color-error-container;
}
.error-container-text {
- -fx-fill: -md-sys-color-error-container;
+ -fx-text-fill: -md-sys-color-error-container;
}
.error {
-fx-background-color: -md-sys-color-error;
}
.error-text {
- -fx-fill: -md-sys-color-error;
+ -fx-text-fill: -md-sys-color-error;
}
/* Surface */
@@ -113,49 +113,49 @@
-fx-background-color: -md-sys-color-inverse-on-surface;
}
.inverse-on-surface-text {
- -fx-fill: -md-sys-color-inverse-on-surface;
+ -fx-text-fill: -md-sys-color-inverse-on-surface;
}
.inverse-surface {
-fx-background-color: -md-sys-color-inverse-surface;
}
.inverse-surface-text {
- -fx-fill: -md-sys-color-inverse-surface;
+ -fx-text-fill: -md-sys-color-inverse-surface;
}
.on-surface-variant {
-fx-background-color: -md-sys-color-on-surface-variant;
}
.on-surface-variant-text {
- -fx-fill: -md-sys-color-on-surface-variant;
+ -fx-text-fill: -md-sys-color-on-surface-variant;
}
.on-surface {
-fx-background-color: -md-sys-color-on-surface;
}
.on-surface-text {
- -fx-fill: -md-sys-color-on-surface;
+ -fx-text-fill: -md-sys-color-on-surface;
}
.surface-variant {
-fx-background-color: -md-sys-color-surface-variant;
}
.surface-variant-text {
- -fx-fill: -md-sys-color-surface-variant;
+ -fx-text-fill: -md-sys-color-surface-variant;
}
.surface {
-fx-background-color: -md-sys-color-surface;
}
.surface-text {
- -fx-fill: -md-sys-color-surface;
+ -fx-text-fill: -md-sys-color-surface;
}
.surface-tint {
-fx-background-color: -md-sys-color-surface-tint;
}
.surface-tint-text {
- -fx-fill: -md-sys-color-surface-tint;
+ -fx-text-fill: -md-sys-color-surface-tint;
}
.surface-tint-color {
-fx-background-color: -md-sys-color-surface-tint-color;
}
.surface-tint-color-text {
- -fx-fill: -md-sys-color-surface-tint-color;
+ -fx-text-fill: -md-sys-color-surface-tint-color;
}
/* Background */
@@ -163,13 +163,13 @@
-fx-background-color: -md-sys-color-on-background;
}
.on-background-text {
- -fx-fill: -md-sys-color-on-background;
+ -fx-text-fill: -md-sys-color-on-background;
}
.background {
-fx-background-color: -md-sys-color-background;
}
.background-text {
- -fx-fill: -md-sys-color-background;
+ -fx-text-fill: -md-sys-color-background;
}
/* Shadow */
@@ -177,13 +177,13 @@
-fx-background-color: -md-sys-color-outline;
}
.outline-text {
- -fx-fill: -md-sys-color-outline;
+ -fx-text-fill: -md-sys-color-outline;
}
.shadow {
-fx-background-color: -md-sys-color-shadow;
}
.shadow-text {
- -fx-fill: -md-sys-color-shadow;
+ -fx-text-fill: -md-sys-color-shadow;
}
diff --git a/src/main/resources/nl/isygameclient/css/style.css b/src/main/resources/nl/isygameclient/css/style.css
@@ -1,18 +1,21 @@
.search-bar {
-fx-padding: 0 0 0 25;
- -fx-text-fill: -md-sys-color-on-surface;
- -fx-border-color: -md-sys-color-inverse-surface;
+ -fx-text-fill: -md-sys-color-inverse-surface;
+ -fx-border-color: -md-sys-color-on-surface;
-fx-border-width: 2;
-fx-border-radius: 10 10 10 10;
}
.searchIcon {
- -fx-padding: 0 0 0 20;
+ -fx-padding: 0 0 0 5;
+ -fx-fill: -md-ref-palette-neutral-variant95
}
-.transparent {
- -fx-background-color: transparent;
+.menu-bar {
+ -fx-stroke: -md-sys-color-outline-dark;
+ -fx-stroke-width: 5;
}
-
-
+.transparent {
+ -fx-background-color: transparent;
+}
+\ No newline at end of file
diff --git a/src/main/resources/nl/isygameclient/css/theme.css b/src/main/resources/nl/isygameclient/css/theme.css
@@ -2,8 +2,7 @@
/* Modules */
@import url(./modules/colors.module.css);
-@import url(./modules/icons.module.css);
@import url(./modules/typography.module.css);
-@import url(theme.dark.css);
+@import url(./themes/theme.dark.css);
@import url(style.css);
\ No newline at end of file
diff --git a/src/main/resources/nl/isygameclient/css/theme.dark.css b/src/main/resources/nl/isygameclient/css/themes/theme.dark.css
diff --git a/src/main/resources/nl/isygameclient/css/theme.light.css b/src/main/resources/nl/isygameclient/css/themes/theme.light.css
diff --git a/src/main/resources/nl/isygameclient/views/GameSelectorMenu.fxml b/src/main/resources/nl/isygameclient/views/GameSelectorMenu.fxml
@@ -7,7 +7,7 @@
<?import com.jfoenix.controls.*?>
-<AnchorPane minHeight="480.0" minWidth="600.0" prefHeight="1080.0" prefWidth="1920.0" style="-fx-background: white"
+<AnchorPane minHeight="480.0" minWidth="600.0" prefHeight="1080.0" prefWidth="1920.0" styleClass="inverse-on-surface"
stylesheets="@../css/theme.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="nl.isygameclient.controllers.GameSelectorMenuController">
<BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
@@ -15,35 +15,61 @@
<top>
<HBox prefHeight="50.0" prefWidth="600.0" BorderPane.alignment="CENTER">
<styleClass>
+ <String fx:value="menu-bar"/>
<String fx:value="surface"/>
</styleClass>
- <Label text="Store">
+ <JFXButton text="Store" disable="true" prefHeight="Infinity">
<styleClass>
- <String fx:value="display-large"/>
- <String fx:value="inverse-surface-text"/>
+ <String fx:value="title-large"/>
+ <String fx:value="on-surface-text"/>
</styleClass>
- </Label>
+ </JFXButton>
+
+ <JFXButton text="Games" prefHeight="Infinity">
+ <styleClass>
+ <String fx:value="title-large"/>
+ <String fx:value="on-surface-text"/>
+ </styleClass>
+ </JFXButton>
+
+ <JFXButton text="User" disable="true" prefHeight="Infinity">
+ <styleClass>
+ <String fx:value="title-large"/>
+ <String fx:value="on-surface-text"/>
+ </styleClass>
+ </JFXButton>
+ <VBox HBox.hgrow="ALWAYS"/>
+ <JFXButton>
+ <styleClass>
+ <String fx:value=""/>
+ </styleClass>
+ <graphic>
+ <MaterialIconView glyphName="SETTINGS" glyphSize="50"/>
+ </graphic>
+ </JFXButton>
</HBox>
</top>
<left>
<AnchorPane BorderPane.alignment="CENTER">
- <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
+ <VBox prefWidth="300" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<Label alignment="CENTER" styleClass="background-text" text="Games">
</Label>
<StackPane styleClass="highlight-rectangle">
- <TextField fx:id="searchBox" promptText="Search">
+ <TextField fx:id="searchBox" promptText="Search" prefHeight="30.0">
<styleClass>
- <String fx:value="transparent"/>
<String fx:value="search-bar"/>
+ <String fx:value="transparent"/>
</styleClass>
</TextField>
- <MaterialIconView StackPane.alignment="CENTER_LEFT" glyphName="SEARCH" glyphSize="20" styleClass="searchIcon"/>
+ <JFXButton StackPane.alignment="CENTER_LEFT" styleClass="searchIcon">
+ <graphic>
+ <MaterialIconView glyphName="SEARCH" glyphSize="20" />
+ </graphic>
+ </JFXButton>
</StackPane>
- <AnchorPane VBox.vgrow="ALWAYS">
- <ListView styleClass="background" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
- AnchorPane.topAnchor="0.0"/>
- </AnchorPane>
+ <ListView VBox.vgrow="ALWAYS" styleClass="background" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
+ AnchorPane.topAnchor="0.0"/>
</VBox>
</AnchorPane>
</left>
