From a338cbf63b2cf1a5cbd12f3ad97edf1ff9a00a27 Mon Sep 17 00:00:00 2001 From: blaqkrow Date: Fri, 20 Oct 2017 12:17:49 +0800 Subject: [PATCH 1/2] jasmine's theme function --- .../java/seedu/address/ui/MainWindow.java | 45 ++- src/main/resources/view/GreenTheme.css | 351 ++++++++++++++++++ src/main/resources/view/MainWindow.fxml | 5 +- src/main/resources/view/WhiteTheme.css | 351 ++++++++++++++++++ 4 files changed, 749 insertions(+), 3 deletions(-) create mode 100755 src/main/resources/view/GreenTheme.css create mode 100755 src/main/resources/view/WhiteTheme.css diff --git a/src/main/java/seedu/address/ui/MainWindow.java b/src/main/java/seedu/address/ui/MainWindow.java index 5771261918c2..c0edbf53a3cc 100644 --- a/src/main/java/seedu/address/ui/MainWindow.java +++ b/src/main/java/seedu/address/ui/MainWindow.java @@ -13,6 +13,7 @@ import javafx.scene.input.KeyEvent; import javafx.scene.layout.Region; import javafx.scene.layout.StackPane; +import javafx.scene.layout.VBox; import javafx.stage.Stage; import seedu.address.commons.core.Config; import seedu.address.commons.core.GuiSettings; @@ -70,7 +71,8 @@ public class MainWindow extends UiPart { @FXML private StackPane emailButtonPlaceholder; - + @FXML + private VBox vBox; public MainWindow(Stage primaryStage, Config config, UserPrefs prefs, Logic logic) { super(FXML); @@ -205,7 +207,6 @@ public void handleHelp() { HelpWindow helpWindow = new HelpWindow(); helpWindow.show(); } - void show() { primaryStage.show(); } @@ -218,6 +219,46 @@ private void handleExit() { raise(new ExitAppRequestEvent()); } + /** + * Changes to default dark theme. + */ + @FXML + private void handleBlackTheme() { + if (vBox.getStylesheets().contains("view/DarkTheme.css")) { + vBox.getStylesheets().remove("view/DarkTheme.css"); + } + vBox.getStylesheets().remove("view/WhiteTheme.css"); + vBox.getStylesheets().remove("view/GreenTheme.css"); + vBox.getStylesheets().add("view/DarkTheme.css"); + } + + /** + * Changes to white theme. + */ + @FXML + private void handleWhiteTheme() { + if (vBox.getStylesheets().contains("view/WhiteTheme.css")) { + vBox.getStylesheets().remove("view/WhiteTheme.css"); + } + vBox.getStylesheets().remove("view/DarkTheme.css"); + vBox.getStylesheets().remove("view/GreenTheme.css"); + vBox.getStylesheets().add("view/WhiteTheme.css"); + } + + + /** + * Changes to green theme. + */ + @FXML + private void handleGreenTheme() { + if (vBox.getStylesheets().contains("view/GreenTheme.css")) { + vBox.getStylesheets().remove("view/GreenTheme.css"); + } + vBox.getStylesheets().remove("view/WhiteTheme.css"); + vBox.getStylesheets().remove("view/DarkTheme.css"); + vBox.getStylesheets().add("view/GreenTheme.css"); + } + public PersonListPanel getPersonListPanel() { return this.personListPanel; } diff --git a/src/main/resources/view/GreenTheme.css b/src/main/resources/view/GreenTheme.css new file mode 100755 index 000000000000..35a879e006bb --- /dev/null +++ b/src/main/resources/view/GreenTheme.css @@ -0,0 +1,351 @@ +.background { + -fx-background-color: derive(#527623, 20%); + background-color: #7bb135; /* Used in the default.html file */ +} + +.label { + -fx-font-size: 11pt; + -fx-font-family: "Segoe UI Semibold"; + -fx-text-fill: #95ca4e; + -fx-opacity: 0.9; +} + +.label-bright { + -fx-font-size: 11pt; + -fx-font-family: "Segoe UI Semibold"; + -fx-text-fill: white; + -fx-opacity: 1; +} + +.label-header { + -fx-font-size: 32pt; + -fx-font-family: "Segoe UI Light"; + -fx-text-fill: white; + -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: #527623; + -fx-control-inner-background: #527623; + -fx-background-color: #527623; + -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 + transparent + derive(-fx-base, 80%) + 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: white; + -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: derive(#527623, 20%); + -fx-border-color: transparent transparent transparent #89c43b; +} + +.split-pane { + -fx-border-radius: 1; + -fx-border-width: 1; + -fx-background-color: derive(#527623, 20%); +} + +.list-view { + -fx-background-insets: 0; + -fx-padding: 0; + -fx-background-color: derive(#527623, 20%); +} + +.list-cell { + -fx-label-padding: 0 0 0 0; + -fx-graphic-text-gap : 0; + -fx-padding: 0 0 0 0; +} + +.list-cell:filled:even { + -fx-background-color: #339900; +} + +.list-cell:filled:odd { + -fx-background-color: #226600; +} + +.list-cell:filled:selected { + -fx-background-color: #59b300; +} + +.list-cell:filled:selected #cardPane { + -fx-border-color: #00cc66; + -fx-border-width: 1; +} + +.list-cell .label { + -fx-text-fill: white; +} + +.cell_big_label { + -fx-font-family: "Segoe UI Semibold"; + -fx-font-size: 16px; + -fx-text-fill: #0e1406; +} + +.cell_small_label { + -fx-font-family: "Segoe UI"; + -fx-font-size: 13px; + -fx-text-fill: #0e1406; +} + +.anchor-pane { + -fx-background-color: derive(#527623, 20%); +} + +.pane-with-border { + -fx-background-color: derive(#527623, 20%); + -fx-border-color: derive(#527623, 10%); + -fx-border-top-width: 1px; +} + +.status-bar { + -fx-background-color: derive(#527623, 20%); + -fx-text-fill: black; +} + +.result-display { + -fx-background-color: transparent; + -fx-font-family: "Segoe UI Light"; + -fx-font-size: 13pt; + -fx-text-fill: white; +} + +.result-display .label { + -fx-text-fill: black !important; +} + +.status-bar .label { + -fx-font-family: "Segoe UI Light"; + -fx-text-fill: white; +} + +.status-bar-with-border { + -fx-background-color: derive(#527623, 30%); + -fx-border-color: derive(#527623, 25%); + -fx-border-width: 1px; +} + +.status-bar-with-border .label { + -fx-text-fill: white; +} + +.grid-pane { + -fx-background-color: derive(#527623, 30%); + -fx-border-color: derive(#527623, 30%); + -fx-border-width: 1px; +} + +.grid-pane .anchor-pane { + -fx-background-color: derive(#527623, 30%); +} + +.context-menu { + -fx-background-color: derive(#527623, 50%); +} + +.context-menu .label { + -fx-text-fill: white; +} + +.menu-bar { + -fx-background-color: derive(#527623, 20%); +} + +.menu-bar .label { + -fx-font-size: 14pt; + -fx-font-family: "Segoe UI Light"; + -fx-text-fill: white; + -fx-opacity: 0.9; +} + +.menu .left-container { + -fx-background-color: black; +} + +/* + * 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: #e7f3d8; + -fx-border-width: 2; + -fx-background-radius: 0; + -fx-background-color: #527623; + -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif; + -fx-font-size: 11pt; + -fx-text-fill: #dcedc4; + -fx-background-insets: 0 0 0 0, 0, 1, 2; +} + +.button:hover { + -fx-background-color: #608929; +} + +.button:pressed, .button:default:hover:pressed { + -fx-background-color: white; + -fx-text-fill: #527623; +} + +.button:focused { + -fx-border-color: white, white; + -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: #527623; + -fx-text-fill: white; +} + +.button:default { + -fx-background-color: -fx-focus-color; + -fx-text-fill: #ffffff; +} + +.button:default:hover { + -fx-background-color: derive(-fx-focus-color, 30%); +} + +.dialog-pane { + -fx-background-color: #527623; +} + +.dialog-pane > *.button-bar > *.container { + -fx-background-color: #527623; +} + +.dialog-pane > *.label.content { + -fx-font-size: 14px; + -fx-font-weight: bold; + -fx-text-fill: white; +} + +.dialog-pane:header *.header-panel { + -fx-background-color: derive(#527623, 25%); +} + +.dialog-pane:header *.header-panel *.label { + -fx-font-size: 18px; + -fx-font-style: italic; + -fx-fill: white; + -fx-text-fill: white; +} + +.scroll-bar { + -fx-background-color: derive(#527623, 20%); +} + +.scroll-bar .thumb { + -fx-background-color: derive(#527623, 50%); + -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: transparent #7bb135 transparent #7bb135; + -fx-background-insets: 0; + -fx-border-color: #7bb135 #7bb135 #ffffff #7bb135; + -fx-border-insets: 0; + -fx-border-width: 1; + -fx-font-family: "Segoe UI Light"; + -fx-font-size: 13pt; + -fx-text-fill: white; +} + +#filterField, #personListPanel, #personWebpage { + -fx-effect: innershadow(gaussian, black, 10, 0, 0, 0); +} + +#resultDisplay .content { + -fx-background-color: transparent, #7bb135, transparent, #7bb135; + -fx-background-radius: 0; +} + +#tags { + -fx-hgap: 7; + -fx-vgap: 3; +} + +#tags .label { + -fx-text-fill: white; + -fx-background-color: #00cc00; + -fx-padding: 1 3 1 3; + -fx-border-radius: 2; + -fx-background-radius: 2; + -fx-font-size: 11; +} diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml index c5eb2c9187c4..3b27957e7c6b 100644 --- a/src/main/resources/view/MainWindow.fxml +++ b/src/main/resources/view/MainWindow.fxml @@ -10,7 +10,7 @@ - + @@ -19,6 +19,9 @@ + + + diff --git a/src/main/resources/view/WhiteTheme.css b/src/main/resources/view/WhiteTheme.css new file mode 100755 index 000000000000..9a4c02d0d18c --- /dev/null +++ b/src/main/resources/view/WhiteTheme.css @@ -0,0 +1,351 @@ +.background { + -fx-background-color: derive(white, 20%); + background-color: white; +} + +.label { + -fx-font-size: 11pt; + -fx-font-family: "Segoe UI Semibold"; + -fx-text-fill: #b3b3b3; + -fx-opacity: 0.9; +} + +.label-bright { + -fx-font-size: 11pt; + -fx-font-family: "Segoe UI Semibold"; + -fx-text-fill: black; + -fx-opacity: 1; +} + +.label-header { + -fx-font-size: 32pt; + -fx-font-family: "Segoe UI Light"; + -fx-text-fill: white; + -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: #f2f2f2; + -fx-control-inner-background: #f2f2f2; + -fx-background-color: #f2f2f2; + -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 + transparent + derive(-fx-base, 80%) + 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: black; + -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: derive(#1d1d1d, 20%); + -fx-border-color: transparent transparent transparent #d9d9d9; +} + +.split-pane { + -fx-border-radius: 1; + -fx-border-width: 1; + -fx-background-color: #f2f2f2; +} + +.list-view { + -fx-background-insets: 0; + -fx-padding: 0; + -fx-background-color: derive(white, 20%); +} + +.list-cell { + -fx-label-padding: 0 0 0 0; + -fx-graphic-text-gap : 0; + -fx-padding: 0 0 0 0; +} + +.list-cell:filled:even { + -fx-background-color: #e6ffe6; +} + +.list-cell:filled:odd { + -fx-background-color: #ffffff; +} + +.list-cell:filled:selected { + -fx-background-color: #bfbfbf; +} + +.list-cell:filled:selected #cardPane { + -fx-border-color: #b3b3ff; + -fx-border-width: 1; +} + +.list-cell .label { + -fx-text-fill: black; +} + +.cell_big_label { + -fx-font-family: "Segoe UI Semibold"; + -fx-font-size: 16px; + -fx-text-fill: #010504; +} + +.cell_small_label { + -fx-font-family: "Segoe UI"; + -fx-font-size: 13px; + -fx-text-fill: #010504; +} + +.anchor-pane { + -fx-background-color: #e6e6e6; +} + +.pane-with-border { + -fx-background-color: #e6e6e6; + -fx-border-color: #f2f2f2; + -fx-border-top-width: 1px; +} + +.status-bar { + -fx-background-color: #e6f2ff; + -fx-text-fill: black; +} + +.result-display { + -fx-background-color: transparent; + -fx-font-family: "Segoe UI Light"; + -fx-font-size: 13pt; + -fx-text-fill: black; +} + +.result-display .label { + -fx-text-fill: white !important; +} + +.status-bar .label { + -fx-font-family: "Segoe UI Light"; + -fx-text-fill: black; +} + +.status-bar-with-border { + -fx-background-color: #cccccc; + -fx-border-color: #f2f2f2; + -fx-border-width: 1px; +} + +.status-bar-with-border .label { + -fx-text-fill: black; +} + +.grid-pane { + -fx-background-color: #e6e6e6; + -fx-border-color: #e6e6e6; + -fx-border-width: 1px; +} + +.grid-pane .anchor-pane { + -fx-background-color: #e6e6e6; +} + +.context-menu { + -fx-background-color: #d9d9d9; +} + +.context-menu .label { + -fx-text-fill: white; +} + +.menu-bar { + -fx-background-color: #f2f2f2; +} + +.menu-bar .label { + -fx-font-size: 14pt; + -fx-font-family: "Segoe UI Light"; + -fx-text-fill: black; + -fx-opacity: 0.9; +} + +.menu .left-container { + -fx-background-color: white; +} + +/* + * 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: #999999; + -fx-border-width: 2; + -fx-background-radius: 0; + -fx-background-color: #e6e6e6; + -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif; + -fx-font-size: 11pt; + -fx-text-fill: #1a1a1a; + -fx-background-insets: 0 0 0 0, 0, 1, 2; +} + +.button:hover { + -fx-background-color: #cccccc; +} + +.button:pressed, .button:default:hover:pressed { + -fx-background-color: black; + -fx-text-fill: white; +} + +.button:focused { + -fx-border-color: #595959, #595959; + -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: white; + -fx-text-fill: black; +} + +.button:default { + -fx-background-color: #f2f2f2; + -fx-text-fill: black; +} + +.button:default:hover { + -fx-background-color: #bfbfbf; +} + +.dialog-pane { + -fx-background-color: white; +} + +.dialog-pane > *.button-bar > *.container { + -fx-background-color: white; +} + +.dialog-pane > *.label.content { + -fx-font-size: 14px; + -fx-font-weight: bold; + -fx-text-fill: black; +} + +.dialog-pane:header *.header-panel { + -fx-background-color: derive(#1d1d1d, 25%); +} + +.dialog-pane:header *.header-panel *.label { + -fx-font-size: 18px; + -fx-font-style: italic; + -fx-fill: black; + -fx-text-fill: black; +} + +.scroll-bar { + -fx-background-color: #f2f2f2; +} + +.scroll-bar .thumb { + -fx-background-color: #d9d9d9; + -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: transparent #cccccc transparent #cccccc; + -fx-background-insets: 0; + -fx-border-color: #cccccc #cccccc #000000 #cccccc; + -fx-border-insets: 0; + -fx-border-width: 1; + -fx-font-family: "Segoe UI Light"; + -fx-font-size: 13pt; + -fx-text-fill: black; +} + +#filterField, #personListPanel, #personWebpage { + -fx-effect: innershadow(gaussian, white, 10, 0, 0, 0); +} + +#resultDisplay .content { + -fx-background-color: transparent, #e6e6e6, transparent, #e6e6e6; + -fx-background-radius: 0; +} + +#tags { + -fx-hgap: 7; + -fx-vgap: 3; +} + +#tags .label { + -fx-text-fill: black; + -fx-background-color: #edf5f7; + -fx-padding: 1 3 1 3; + -fx-border-radius: 2; + -fx-background-radius: 2; + -fx-font-size: 11; +} From 4cf84c81860558c49dbf0419052cc065b6461d09 Mon Sep 17 00:00:00 2001 From: blaqkrow Date: Fri, 20 Oct 2017 12:36:44 +0800 Subject: [PATCH 2/2] Fixed major conflict MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit IMPORTANT: don’t edit the same FXML file lol --- .../java/seedu/address/ui/MainWindow.java | 3 -- src/main/resources/view/MainWindow.fxml | 33 ++----------------- 2 files changed, 2 insertions(+), 34 deletions(-) diff --git a/src/main/java/seedu/address/ui/MainWindow.java b/src/main/java/seedu/address/ui/MainWindow.java index 5e9615d755e4..ba87569b2c1d 100644 --- a/src/main/java/seedu/address/ui/MainWindow.java +++ b/src/main/java/seedu/address/ui/MainWindow.java @@ -49,9 +49,6 @@ public class MainWindow extends UiPart { private DeleteButton deleteButton; private EmailButton emailButton; - @FXML - private VBox vBox; - @FXML private StackPane browserPlaceholder; diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml index acb87a1520e1..3b27957e7c6b 100644 --- a/src/main/resources/view/MainWindow.fxml +++ b/src/main/resources/view/MainWindow.fxml @@ -18,17 +18,10 @@ -<<<<<<< HEAD -======= - - - - ->>>>>>> origin/v1.2-Implementing-Google-maps-+-extra-UI-elements @@ -67,29 +60,7 @@ + - - - - - - - - - - - - - - - - - - - - - - - +