Skip to content

Commit

Permalink
UI Reconstruction
Browse files Browse the repository at this point in the history
  • Loading branch information
@isHarryh
isHarryh committed Feb 8, 2024
1 parent 7b2e856 commit ff82a1e
Show file tree
Hide file tree
Showing 19 changed files with 975 additions and 583 deletions.
5 changes: 2 additions & 3 deletions assets/UI/BehaviorModule.fxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@
At GPL-3.0 License
-->

<!-- ********* Wrapper 2 ********* -->
<?import com.jfoenix.controls.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<!-- ********* Wrapper 2 ********* -->
<Pane prefHeight="372.0" prefWidth="460.0" styleClass="wrapper"
<Pane prefHeight="376.0" prefWidth="460.0" styleClass="wrapper" stylesheets="@Main.css"
xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="cn.harryh.arkpets.controllers.BehaviorModule">
<ScrollPane layoutX="10.0" layoutY="11.0" prefHeight="350.0" prefWidth="440.0" styleClass="scroll-v">
Expand Down
Empty file removed assets/UI/Homepage.fxml
View file
Empty file.
164 changes: 113 additions & 51 deletions assets/UI/Main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ JFXButton {
-fx-translate-y: 0.5px;
}

.btn-icon SVGPath {
Label > SVGPath, Label > AnchorPane, Label > AnchorPane > SVGPath,
JFXButton > SVGPath, JFXButton > AnchorPane, JFXButton > AnchorPane > SVGPath {
-fx-fill: inherit;
}

Expand Down Expand Up @@ -91,19 +92,30 @@ JFXButton {
-fx-border-color: #204880;
}

.btn-secondary .btn-icon {
.btn-secondary .btn-icon, .btn-iconified-secondary .btn-icon {
/* Regular */
-fx-fill: #204880;
}

.btn-iconified-secondary {
/* Regular */
-fx-text-fill: #204880;
-fx-background-color: #FFFFFF;
-fx-background-radius: 38.2%;
-fx-border-color: #204880;
-fx-border-radius: 38.2%;
-fx-border-width: 1px;
-fx-border-style: solid;
}

/*******************************************************************************
* *
* 3. Sidebar and its Menu Buttons *
* *
******************************************************************************/

#Sidebar {
-fx-background-color: #95B7E5;
-fx-background-color: #95B6E5;
}

#Title {
Expand All @@ -116,6 +128,8 @@ JFXButton {
/* Regular */
-fx-padding: 0 0 0 20px;
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-fill: #204880;
-fx-text-fill: #204880;
-fx-text-alignment: left;
-fx-background-color: #FFFFFF;
Expand All @@ -128,24 +142,17 @@ JFXButton {

.menu-btn-active {
/* Active */
-fx-fill: #FFFFFF;
-fx-text-fill: #FFFFFF;
-fx-background-color: #204880;
}

.menu-btn SVGPath {
/* Regular */
-fx-fill: #204880;
}

.menu-btn-active SVGPath {
/* Hover & Active */
-fx-fill: #FFFFFF;
}

#Start-btn {
/* Regular */
-fx-padding: 0 0 0 20px;
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-fill: #FFFFFF;
-fx-text-fill: #FFFFFF;
-fx-text-alignment: left;
-fx-background-color: #204880;
Expand All @@ -156,39 +163,79 @@ JFXButton {
-fx-border-style: solid;
}

#Start-btn SVGPath {
/* Regular */
-fx-fill: #FFFFFF;
}

#Start-menu-btn:hover SVGPath, #Start-btn:focused SVGPath {
/* Hover & Focused */
-fx-fill: #EEEEEE;
}

/*******************************************************************************
* *
* 4. Contents in wrappers *
* *
******************************************************************************/

.wrapper {
-fx-padding: 5px 10px 5px 10px;
-fx-padding: 15px;
}

#Search-models-bar {
-fx-background-radius: 8px;
-fx-background-color: #95B7E5;
.major-tool-bar-upper, .major-tool-bar-lower {
-fx-background-color: #95B6E5;
-fx-border-style: none;
-fx-padding: 4px 8px 4px 8px;
}

.major-tool-bar-upper {
-fx-background-radius: 8px 8px 8px 0;
}

.major-tool-bar-lower {
-fx-background-radius: 0 0 8px 8px;
}

.info-pane-light {
-fx-background-color: #FFFFFF;
-fx-background-radius: 3px;
-fx-border-color: #95B6E588;
-fx-border-radius: 3px;
-fx-border-width: 1.25px;
-fx-border-style: solid;
}

.info-pane-light > VBox {
-fx-padding: 8px;
}

.flow-wrapper {
-fx-border-color: #95B6E588;
-fx-border-width: 1.25px 0 0 0;
-fx-border-style: solid;
-fx-fit-to-width: true;
-fx-fit-to-height: true;
}

.tag-flow {
-fx-hgap: 4px;
-fx-vgap: 6px;
-fx-padding: 6px 4px 6px 4px;
}

.btn-flow {
-fx-hgap: 2px;
-fx-vgap: 4px;
-fx-padding: 4px 0 4px 0;
}

#Search-models-status {
-fx-fill: #204880;
-fx-font-size: 11px;
-fx-text-fill: #204880;
-fx-label-padding: 0 2px 0 2px;
}

#Search-models-list {
-fx-padding: 4px;
-fx-background-radius: 3px;
}

.Search-models-item {
/* Regular */
-fx-cursor: hand;
-fx-padding: 4px 2px 4px 2px;
-fx-text-fill: #505050;
-fx-background-color: transparent;
-fx-focus-traversable: true;
Expand Down Expand Up @@ -249,28 +296,45 @@ JFXButton {
}

.info-primary {
-fx-font-size: 16px;
-fx-font-size: 18px;
-fx-text-fill: #202020;
-fx-font-weight: bold;
-fx-label-padding: 4px 2px 4px 2px;
-fx-label-padding: 3px 1px 3px 1px;
-fx-wrap-text: true;
}

.info-secondary {
-fx-font-size: 12px;
-fx-font-weight: normal;
-fx-text-fill: #808080;
-fx-label-padding: 2px;
-fx-font-weight: normal;
-fx-label-padding: 2px 1px 2px 1px;
-fx-wrap-text: false;
}

.info-tag {
-fx-font-size: 10px;
.info-type-badge {
-fx-font-size: 12px;
-fx-font-weight: bold;
-fx-text-fill: #FFFFFF;
-fx-text-alignment: justify;
-fx-background-color: #204880DD;
-fx-background-radius: 6px;
-fx-label-padding: 2px 4px 2px 4px;
}

.info-tag-theme {
.info-tag-badge, .info-tag-badge-active {
-fx-font-size: 11px;
-fx-text-fill: #FFFFFF;
-fx-background-color: #4D7999;
-fx-background-radius: 0;
-fx-max-height: 14px;
-fx-effect: dropshadow(gaussian, #00000040, 2.5, 0.25, 0.5, 1);
}

.info-tag-badge {
-fx-background-color: #8492A5;
}

.info-tag-badge-active {
-fx-background-color: #204880EE;
}

.config-group-title {
Expand Down Expand Up @@ -342,21 +406,21 @@ JFXButton {
}

/* Progress bar's outer track */
ProgressBar > .track{
ProgressBar > .track {
-fx-background-color: #DDDDDDDD;
-fx-background-radius: 2.5px;
-fx-background-insets: 0;
}

/* Progress bar's inner bar */
ProgressBar > .bar, ProgressBar:indeterminate > .bar{
ProgressBar > .bar, ProgressBar:indeterminate > .bar {
-fx-background-color: #204880DD;
-fx-background-radius: 2.5px;
-fx-background-insets: 0;
}

#Loading-failure-tip, #Loading-waiting-tip {
-fx-background-color: #F4F4F4E0;
-fx-background-color: #F4F4F4D0;
}

#Loading-failure-tip-text {
Expand All @@ -383,8 +447,9 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
}

#Title-bar JFXButton {
-fx-fill: #FFFFFF;
-fx-background-color: #204880;
-fx-border-radius: 0px;
-fx-background-radius: 0;
-fx-border-style: none;
-fx-min-width: 24px;
-fx-min-height: 24px;
Expand All @@ -393,10 +458,6 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
-fx-focus-traversable: false;
}

#Title-bar JFXButton SVGPath {
-fx-fill: #FFFFFF;
}

#Title-minimize-btn:hover, #Title-minimize-btn:focused {
-fx-background-color: #305890;
}
Expand All @@ -411,20 +472,20 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
* *
******************************************************************************/

.scroll-bar > .thumb {
-fx-cursor: hand;
-fx-background-color: #BCBCC2;
-fx-background-insets: 0;
-fx-background-radius: 2px;
}

.scroll-bar:vertical > .track-background, .scroll-bar:horizontal > .track-background {
-fx-cursor: default;
-fx-background-color: #F1F1F5;
-fx-background-insets: 0;
-fx-background-radius: 1px;
}

.scroll-bar:vertical > .thumb, .scroll-bar:horizontal > .thumb {
-fx-cursor: hand;
-fx-background-color: #BCBCC2;
-fx-background-insets: 0;
-fx-background-radius: 2px;
}

.scroll-bar > .increment-button, .scroll-bar > .decrement-button,
.scroll-bar:hover > .increment-button, .scroll-bar:hover > .decrement-button {
-fx-cursor: hand;
Expand All @@ -439,6 +500,7 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
-fx-padding: 2px 5px 2px 5px;
}

/* All Arrows */
.scroll-bar > .increment-button > .increment-arrow, .scroll-bar > .decrement-button > .decrement-arrow {
-fx-background-color: #9696A0;
}
Expand Down Expand Up @@ -472,7 +534,7 @@ ProgressBar > .bar, ProgressBar:indeterminate > .bar{
-fx-background-insets: 0;
}

.scroll-v {
.scroll-v, .flow-wrapper {
-fx-hbar-policy: never;
-fx-vbar-policy: as-needed;
}
Loading

0 comments on commit ff82a1e

Please sign in to comment.