Merge pull request AY2324S2-CS2103T-T15-1#80 from alfaloo/fxml-mainwi…

…ndow Fxml mainwindow
Kappaccinoh · Mar 25, 2024 · 70d66f8 · 70d66f8
2 parents b78fda7 + 5c8a2a6
commit 70d66f8
Show file tree

Hide file tree

Showing 3 changed files with 361 additions and 3 deletions.
diff --git a/src/main/resources/view/Extensions.css b/src/main/resources/view/Extensions.css
@@ -5,7 +5,7 @@
 
 .list-cell:empty {
     /* Empty cells will not have alternating colours */
-    -fx-background: #383838;
+    -fx-background: white;
 }
 
 .tag-selector {

diff --git a/src/main/resources/view/LightTheme.css b/src/main/resources/view/LightTheme.css
@@ -0,0 +1,358 @@
+.background {
+    -fx-background-color: #e2e5ef;
+    background-color: #e2e5ef; /* Used in the default.html file */
+}
+
+.label {
+    -fx-font-size: 11pt;
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-text-fill: #052a3a;
+    -fx-opacity: 0.9;
+}
+
+.label-bright {
+    -fx-font-size: 11pt;
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-text-fill: #052a3a;
+    -fx-opacity: 1;
+}
+
+.label-header {
+    -fx-font-size: 32pt;
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: #052a3a;
+    -fx-opacity: 1;
+}
+
+.text-field {
+    -fx-font-size: 12pt;
+    -fx-font-family: "Segoe UI Semibold";
+}
+
+.tab-pane {
+    -fx-padding: 0 0 0 1;
+}
+
+.tab-pane .tab-header-area {
+    -fx-padding: 0 0 0 0;
+    -fx-min-height: 0;
+    -fx-max-height: 0;
+}
+
+.table-view {
+    -fx-base: #e2e5ef;
+    -fx-control-inner-background: #e2e5ef;
+    -fx-background-color: #e2e5ef;
+    -fx-table-cell-border-color: transparent;
+    -fx-table-header-border-color: transparent;
+    -fx-padding: 5;
+}
+
+.table-view .column-header-background {
+    -fx-background-color: transparent;
+}
+
+.table-view .column-header, .table-view .filler {
+    -fx-size: 35;
+    -fx-border-width: 0 0 1 0;
+    -fx-background-color: transparent;
+    -fx-border-color: transparent;
+    -fx-border-insets: 0 10 1 0;
+}
+
+.table-view .column-header .label {
+    -fx-font-size: 20pt;
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: #052a3a;
+    -fx-alignment: center-left;
+    -fx-opacity: 1;
+}
+
+.table-view:focused .table-row-cell:filled:focused:selected {
+    -fx-background-color: -fx-focus-color;
+}
+
+.split-pane:horizontal .split-pane-divider {
+    -fx-background-color: white;
+    -fx-border-color: transparent;
+}
+
+.split-pane {
+    -fx-border-radius: 1;
+    -fx-border-width: 1;
+    -fx-background-color: white;
+}
+
+.list-view {
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+    -fx-background-color: white;
+}
+
+.list-cell {
+    -fx-label-padding: 0 0 0 0;
+    -fx-graphic-text-gap : 0;
+    -fx-padding: 0 0 0 0;
+    -fx-background-radius: 15px;
+    -fx-border-radius: 15px;
+}
+
+.list-cell:filled:even {
+    -fx-background-color: #f1f4f4;
+}
+
+.list-cell:filled:odd {
+    -fx-background-color: #e2e5ef;
+}
+
+.list-cell:filled:selected {
+    -fx-background-color: #bfdcf4;
+}
+
+.list-cell:filled:selected #cardPane {
+    /*-fx-border-color: #052a3a;*/
+    -fx-border-width: 1;
+}
+
+.list-cell .label {
+    -fx-text-fill: #052a3a;
+}
+
+.cell_big_label {
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-font-size: 16px;
+    -fx-text-fill: #052a3a;
+}
+
+.cell_small_label {
+    -fx-font-family: "Segoe UI";
+    -fx-font-size: 13px;
+    -fx-text-fill: #052a3a;
+}
+
+.stack-pane {
+    -fx-background-color: white;
+}
+
+.pane-with-border {
+    -fx-background-color: white;
+    /*-fx-border-color: #052a3a;*/
+    -fx-border-top-width: 1px;
+}
+
+.status-bar {
+    -fx-background-color: #f1f4f4;
+}
+
+.result-display {
+    -fx-background-color: white;
+    -fx-font-family: "Segoe UI Light";
+    -fx-font-size: 13pt;
+    -fx-text-fill: #052a3a;
+}
+
+.result-display .label {
+    -fx-text-fill: #052a3a;
+}
+
+.status-bar .label {
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: #052a3a;
+    -fx-padding: 4px;
+    -fx-pref-height: 30px;
+}
+
+.status-bar-with-border {
+    -fx-background-color: #e2e5ef;
+    -fx-border-color: #052a3a;
+    -fx-border-width: 1px;
+}
+
+.status-bar-with-border .label {
+    -fx-text-fill: #052a3a;
+}
+
+.grid-pane {
+    -fx-background-color: #e2e5ef;
+    -fx-border-color: #052a3a;
+    -fx-border-width: 1px;
+}
+
+.grid-pane .stack-pane {
+    -fx-background-color: white;
+}
+
+.context-menu {
+    -fx-background-color: #e2e5ef;
+}
+
+.context-menu .label {
+    -fx-text-fill: #052a3a;
+}
+
+.menu-bar {
+    -fx-background-color: #f1f4f4;
+}
+
+.menu-bar .label {
+    -fx-font-size: 14pt;
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: #052a3a;
+    -fx-opacity: 0.9;
+}
+
+.menu .left-container {
+    -fx-background-color: #e2e5ef;
+}
+
+/*
+ * Metro style Push Button
+ * Author: Pedro Duque Vieira
+ * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
+ */
+.button {
+    -fx-padding: 5 22 5 22;
+    -fx-border-color: #e2e5ef;
+    -fx-border-width: 2;
+    -fx-background-radius: 0;
+    -fx-background-color: #e2e5ef;
+    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
+    -fx-font-size: 11pt;
+    -fx-text-fill: #052a3a;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+}
+
+.button:hover {
+    -fx-background-color: #e2e5ef;
+}
+
+.button:pressed, .button:default:hover:pressed {
+    -fx-background-color: white;
+    -fx-text-fill: #052a3a;
+}
+
+.button:focused {
+    -fx-border-color: #052a3a, #052a3a;
+    -fx-border-width: 1, 1;
+    -fx-border-style: solid, segments(1, 1);
+    -fx-border-radius: 0, 0;
+    -fx-border-insets: 1 1 1 1, 0;
+}
+
+.button:disabled, .button:default:disabled {
+    -fx-opacity: 0.4;
+    -fx-background-color: #e2e5ef;
+    -fx-text-fill: #052a3a;
+}
+
+.button:default {
+    -fx-background-color: -fx-focus-color;
+    -fx-text-fill: #052a3a;
+}
+
+.button:default:hover {
+    -fx-background-color: derive(-fx-focus-color, 30%);
+}
+
+.dialog-pane {
+    -fx-background-color: #e2e5ef;
+}
+
+.dialog-pane > *.button-bar > *.container {
+    -fx-background-color: #e2e5ef;
+}
+
+.dialog-pane > *.label.content {
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #052a3a;
+}
+
+.dialog-pane:header *.header-panel {
+    -fx-background-color: #e2e5ef;
+}
+
+.dialog-pane:header *.header-panel *.label {
+    -fx-font-size: 18px;
+    -fx-font-style: italic;
+    -fx-fill: white;
+    -fx-text-fill: #052a3a;
+}
+
+.scroll-bar {
+    -fx-background-color: white;
+}
+
+.scroll-bar .thumb {
+    -fx-background-color: #bfdcf4;
+    -fx-background-insets: 3;
+}
+
+.scroll-bar .increment-button, .scroll-bar .decrement-button {
+    -fx-background-color: transparent;
+    -fx-padding: 0 0 0 0;
+}
+
+.scroll-bar .increment-arrow, .scroll-bar .decrement-arrow {
+    -fx-shape: " ";
+}
+
+.scroll-bar:vertical .increment-arrow, .scroll-bar:vertical .decrement-arrow {
+    -fx-padding: 1 8 1 8;
+}
+
+.scroll-bar:horizontal .increment-arrow, .scroll-bar:horizontal .decrement-arrow {
+    -fx-padding: 8 1 8 1;
+}
+
+#cardPane {
+    -fx-background-color: transparent;
+    -fx-border-width: 0;
+
+}
+
+#commandTypeLabel {
+    -fx-font-size: 11px;
+    -fx-text-fill: #F70D1A;
+}
+
+#commandTextField {
+    -fx-background-color: #e2e5ef;
+    -fx-background-insets: 0;
+    /*-fx-border-color: #052a3a;*/
+    /*-fx-border-insets: 0;*/
+    /*-fx-border-width: 1;*/
+    -fx-font-family: "Segoe UI Light";
+    -fx-font-size: 13pt;
+    -fx-text-fill: #052a3a;
+    -fx-background-radius: 15px;
+    -fx-border-radius: 15px;
+}
+
+#filterField, #personListPanel, #personWebpage {
+    /*-fx-effect: innershadow(gaussian, #e2e5ef, 10, 0, 0, 0);*/
+}
+
+#resultDisplay .content {
+    -fx-background-color: #e2e5ef;
+    -fx-background-radius: 15px;
+    -fx-border-radius: 15px;
+}
+
+#tags {
+    -fx-hgap: 7;
+    -fx-vgap: 3;
+}
+
+#tags .label {
+    -fx-text-fill: #052a3a;
+    -fx-background-color: #3e7b91;
+    -fx-padding: 1 3 1 3;
+    -fx-border-radius: 2;
+    -fx-background-radius: 2;
+    -fx-font-size: 11;
+}
+
+#personListPanelPlaceholder, #appointmentListPanelPlaceholder {
+    -fx-background-color: white;
+}
diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
@@ -19,7 +19,7 @@
   <scene>
     <Scene>
       <stylesheets>
-        <URL value="@DarkTheme.css" />
+        <URL value="@LightTheme.css" />
         <URL value="@Extensions.css" />
       </stylesheets>
 
@@ -35,7 +35,7 @@
 
         <StackPane VBox.vgrow="NEVER" fx:id="commandBoxPlaceholder" styleClass="pane-with-border">
           <padding>
-            <Insets top="5" right="10" bottom="5" left="10" />
+            <Insets top="10" right="10" bottom="5" left="10" />
           </padding>
         </StackPane>