From f2b5d7670f3d63c0897c024b0b03576c65ab7a9d Mon Sep 17 00:00:00 2001 From: Manfred Karrer Date: Thu, 11 Sep 2014 11:58:49 +0200 Subject: [PATCH] Use TitledGroupBg component --- src/main/java/io/bitsquare/gui/bitsquare.css | 485 +++++++++--------- .../gui/components/TitledGroupBg.java | 75 +++ .../changepassword/ChangePasswordView.fxml | 37 +- .../account/content/fiat/FiatAccountView.fxml | 67 +-- .../content/password/PasswordView.fxml | 35 +- .../registration/RegistrationView.fxml | 37 +- .../restrictions/RestrictionsView.fxml | 88 ++-- .../content/seedwords/SeedWordsView.fxml | 36 +- .../trade/createoffer/CreateOfferView.fxml | 71 +-- .../trade/createoffer/CreateOfferViewCB.java | 21 +- 10 files changed, 482 insertions(+), 470 deletions(-) create mode 100644 src/main/java/io/bitsquare/gui/components/TitledGroupBg.java diff --git a/src/main/java/io/bitsquare/gui/bitsquare.css b/src/main/java/io/bitsquare/gui/bitsquare.css index 53142cdcce..844de01512 100644 --- a/src/main/java/io/bitsquare/gui/bitsquare.css +++ b/src/main/java/io/bitsquare/gui/bitsquare.css @@ -12,12 +12,244 @@ upper border on tab: cfcfcf lower border on tab: b5b5b5 upper gradient color on tab: d3d3d3 lower gradient color on tab: dddddd - - */ -/* Account */ +/* Splash */ +#splash { + -fx-background-color: #ffffff; +} + +/* Main UI */ +#logo-sub-title-label { + -fx-font-weight: bold; + -fx-font-size: 24; +} + +#base-content-container { + -fx-background-color: #dddddd; +} + +#content-pane { + -fx-background-color: #f4f4f4; +} + +#headline-label { + -fx-font-weight: bold; + -fx-font-size: 18; +} + +#info-label { + -fx-font-size: 14; +} + +#online-label { + -fx-fill: green; +} + +#offline-label { + -fx-fill: red; +} + +/* main nav */ + +#nav-button { + -fx-cursor: hand; + -fx-background-color: transparent; +} + +#nav-button .text { + -fx-font-size: 10; +} + +#nav-button:selected .text { + -fx-font-size: 11; + -fx-font-weight: bold; +} + +#nav-alert-button { + -fx-background-color: transparent; + -fx-cursor: hand; + -fx-border-style: none; +} + +#nav-button-label { + -fx-font-size: 10; +} + +#nav-balance-label { + -fx-font-weight: bold; + -fx-alignment: center; +} + +.text-field:readonly { + -fx-text-fill: #000000; + -fx-background-color: #FAFAFA; +} + +#feedback-text { + -fx-font-size: 10; +} + +#label-url { + -fx-cursor: hand; + -fx-text-fill: blue; + -fx-underline: true; +} + +#icon-button { + -fx-cursor: hand; + -fx-background-color: transparent; +} + +.copy-icon { + -fx-text-fill: #0096c9; + -fx-cursor: hand; +} + +.copy-icon:hover { + -fx-text-fill: black; +} + +/* Same style like non editable textfield. But textfield spans a whole column in a grid, so we use generally +textfield */ +#label-with-background { + -fx-background-color: #FAFAFA; + -fx-border-radius: 4; + -fx-padding: 4 4 4 4; +} + +#address-text-field { + -fx-cursor: hand; + -fx-text-fill: #0096c9; +} +#address-text-field:hover { + -fx-text-fill: black; +} + +#funds-confidence { + -fx-progress-color: dimgrey; +} + +/* .table-view */ +.table-view .table-cell { + -fx-alignment: center; +} + +.table-view .column-header .label { + -fx-alignment-alignment: center; +} + +.table-view .focus { + -fx-alignment: center; +} + +.table-view .text { + -fx-fill: black; +} + +.table-view .table-row-cell:selected .table-row-cell:row-selection .table-row-cell:cell-selection .text { + -fx-fill: white; +} + +.table-view .table-row-cell:selected .button .text { + -fx-fill: black; +} + +.table-view .table-row-cell .copy-icon .text { + -fx-fill: #0096c9; +} + +.table-view .table-row-cell .copy-icon .text:hover { + -fx-fill: black; +} + +.table-view .table-row-cell:selected .copy-icon .text { + -fx-fill: white; +} + +.table-view .table-row-cell:selected .copy-icon .text:hover { + -fx-fill: black; +} + +.table-view .table-row-cell .hyperlink .text { + -fx-fill: #0096c9; +} + +.table-view .table-row-cell .hyperlink .text:hover { + -fx-fill: black; +} + +.table-view .table-row-cell:selected .hyperlink .text { + -fx-fill: white; +} + +.table-view .table-row-cell:selected .hyperlink .text:hover { + -fx-fill: black; +} + +#form-header-text { + -fx-font-weight: bold; + -fx-font-size: 14; +} + +#clickable-icon { + -fx-text-fill: #0096c9; + -fx-cursor: hand; +} + +#clickable-icon:hover { + -fx-text-fill: #666; +} + +#form-title { + -fx-font-weight: bold; +} + +/* tab pane */ +.tab-pane .tab-label { + -fx-font-size: 15; +} + +.tab-pane:focused { + -fx-background-color: transparent; +} + +.tab-header-area:focused { + -fx-background-color: transparent; +} + +.tab:focused { + -fx-background-color: transparent; +} + +/* table-view */ +.table-view:focused { + -fx-background-color: transparent; +} + +/* scroll-pane */ + +.scroll-pane { + -fx-background-insets: 0; + -fx-padding: 0; +} + +.scroll-pane:focused { + -fx-background-insets: 0; +} + +.scroll-pane .corner { + -fx-background-insets: 0; +} + +/* validation */ +#validation-error { + -fx-text-fill: red; +} + + +/* Account */ #content-pane-top { -fx-background-color: @@ -184,199 +416,20 @@ lower gradient color on tab: dddddd } -/* Splash */ -#splash { - -fx-background-color: #ffffff; -} - -/* Main UI */ -#logo-sub-title-label { +/* TitledGroupBg */ +#titled-group-bg-label { -fx-font-weight: bold; - -fx-font-size: 24; -} - -#base-content-container { - -fx-background-color: #dddddd; -} - -#content-pane { + -fx-font-size: 14; + -fx-text-fill: #333; -fx-background-color: #f4f4f4; } - -#headline-label { - -fx-font-weight: bold; - -fx-font-size: 18; -} - -#info-label { - -fx-font-size: 14; -} - -#online-label { - -fx-fill: green; -} - -#offline-label { - -fx-fill: red; -} - -/* main nav */ - -#nav-button { - -fx-cursor: hand; - -fx-background-color: transparent; -} - -#nav-button .text { - -fx-font-size: 10; -} - -#nav-button:selected .text { - -fx-font-size: 11; - -fx-font-weight: bold; -} - -#nav-alert-button { - -fx-background-color: transparent; - -fx-cursor: hand; - -fx-border-style: none; -} - -#nav-button-label { - -fx-font-size: 10; -} - -#nav-balance-label { - -fx-font-weight: bold; - -fx-alignment: center; -} - -.text-field:readonly { - -fx-text-fill: #000000; - -fx-background-color: #FAFAFA; -} - -#feedback-text { - -fx-font-size: 10; -} - -#label-url { - -fx-cursor: hand; - -fx-text-fill: blue; - -fx-underline: true; -} - -#icon-button { - -fx-cursor: hand; - -fx-background-color: transparent; -} - -.copy-icon { - -fx-text-fill: #0096c9; - -fx-cursor: hand; -} - -.copy-icon:hover { - -fx-text-fill: black; -} - -/* Same stlye like non editable textfield. But textfield spans a whole column in a grid, so we use generally textfield */ -#label-with-background { - -fx-background-color: #FAFAFA; - -fx-border-radius: 4; - -fx-padding: 4 4 4 4; -} - -#address-text-field { - -fx-cursor: hand; - -fx-text-fill: #0096c9; -} -#address-text-field:hover { - -fx-text-fill: black; -} - -#funds-confidence { - -fx-progress-color: dimgrey; -} - -/* .table-view */ -.table-view .table-cell { - -fx-alignment: center; -} - -.table-view .column-header .label { - -fx-alignment-alignment: center; -} - -.table-view .focus { - -fx-alignment: center; -} - -.table-view .text { - -fx-fill: black; -} - -.table-view .table-row-cell:selected .table-row-cell:row-selection .table-row-cell:cell-selection .text { - -fx-fill: white; -} - -.table-view .table-row-cell:selected .button .text { - -fx-fill: black; -} - -.table-view .table-row-cell .copy-icon .text { - -fx-fill: #0096c9; -} - -.table-view .table-row-cell .copy-icon .text:hover { - -fx-fill: black; -} - -.table-view .table-row-cell:selected .copy-icon .text { - -fx-fill: white; -} - -.table-view .table-row-cell:selected .copy-icon .text:hover { - -fx-fill: black; -} - -.table-view .table-row-cell .hyperlink .text { - -fx-fill: #0096c9; -} - -.table-view .table-row-cell .hyperlink .text:hover { - -fx-fill: black; -} - -.table-view .table-row-cell:selected .hyperlink .text { - -fx-fill: white; -} - -.table-view .table-row-cell:selected .hyperlink .text:hover { - -fx-fill: black; -} - -/* forms */ -#form-header-text { - -fx-font-weight: bold; - -fx-font-size: 14; -} - -#form-group-title { - -fx-font-weight: bold; - -fx-font-size: 14; - -fx-text-fill: #111; - -fx-background-color: #f4f4f4; -} - -#form-group-title-active { +#titled-group-bg-label-active { -fx-font-weight: bold; -fx-font-size: 14; -fx-text-fill: #0096c9; -fx-background-color: #f4f4f4; } - -#form-group-background { +#titled-group-bg { -fx-body-color: linear-gradient(to bottom, #f4f4f4, #F0F0F0); -fx-outer-border: linear-gradient(to bottom, #ddd, #ccc); -fx-background-color: -fx-shadow-highlight-color, @@ -386,7 +439,7 @@ lower gradient color on tab: dddddd -fx-background-insets: 0 0 -1 0, 0, 1, 2; -fx-background-radius: 3px, 3px, 2px, 1px; } -#form-group-background-active { +#titled-group-bg-active { -fx-body-color: linear-gradient(to bottom, #f4f4f4, #F0F0F0); -fx-outer-border: linear-gradient(to bottom, #9bbdc9, #57acc9); -fx-background-color: -fx-shadow-highlight-color, @@ -396,57 +449,3 @@ lower gradient color on tab: dddddd -fx-background-insets: 0 0 -1 0, 0, 1, 2; -fx-background-radius: 3px, 3px, 2px, 1px; } -#clickable-icon { - -fx-text-fill: #0096c9; - -fx-cursor: hand; -} - -#clickable-icon:hover { - -fx-text-fill: #666; -} - -#form-title { - -fx-font-weight: bold; -} - -/* tab pane */ -.tab-pane .tab-label { - -fx-font-size: 15; -} - -.tab-pane:focused { - -fx-background-color: transparent; -} - -.tab-header-area:focused { - -fx-background-color: transparent; -} - -.tab:focused { - -fx-background-color: transparent; -} - -/* table-view */ -.table-view:focused { - -fx-background-color: transparent; -} - -/* scroll-pane */ - -.scroll-pane { - -fx-background-insets: 0; - -fx-padding: 0; -} - -.scroll-pane:focused { - -fx-background-insets: 0; -} - -.scroll-pane .corner { - -fx-background-insets: 0; -} - -/* validation */ -#validation-error { - -fx-text-fill: red; -} \ No newline at end of file diff --git a/src/main/java/io/bitsquare/gui/components/TitledGroupBg.java b/src/main/java/io/bitsquare/gui/components/TitledGroupBg.java new file mode 100644 index 0000000000..97ae34eddf --- /dev/null +++ b/src/main/java/io/bitsquare/gui/components/TitledGroupBg.java @@ -0,0 +1,75 @@ +/* + * This file is part of Bitsquare. + * + * Bitsquare is free software: you can redistribute it and/or modify it + * under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or (at + * your option) any later version. + * + * Bitsquare is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public + * License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Bitsquare. If not, see . + */ + +package io.bitsquare.gui.components; + +import javafx.beans.property.SimpleStringProperty; +import javafx.beans.property.StringProperty; +import javafx.geometry.Insets; +import javafx.scene.control.*; +import javafx.scene.layout.*; + +import org.slf4j.Logger; +import org.slf4j.LoggerFactory; + +public class TitledGroupBg extends Pane { + private static final Logger log = LoggerFactory.getLogger(TitledGroupBg.class); + + private final Label label; + private StringProperty text = new SimpleStringProperty(); + + /////////////////////////////////////////////////////////////////////////////////////////// + // Constructor + /////////////////////////////////////////////////////////////////////////////////////////// + + public TitledGroupBg() { + GridPane.setMargin(this, new Insets(-10, -10, -10, -10)); + GridPane.setColumnSpan(this, 2); + + label = new Label(); + label.textProperty().bind(text); + label.setLayoutX(8); + label.setLayoutY(-8); + label.setPadding(new Insets(0, 7, 0, 5)); + setActive(); + getChildren().add(label); + } + + public void setInactive() { + setId("titled-group-bg"); + label.setId("titled-group-bg-label"); + } + + public void setActive() { + setId("titled-group-bg-active"); + label.setId("titled-group-bg-label-active"); + } + + public String getText() { + return text.get(); + } + + public StringProperty textProperty() { + return text; + } + + public void setText(String text) { + this.text.set(text); + } + + +} diff --git a/src/main/java/io/bitsquare/gui/main/account/content/changepassword/ChangePasswordView.fxml b/src/main/java/io/bitsquare/gui/main/account/content/changepassword/ChangePasswordView.fxml index 9c5c736ca2..a796afdda6 100644 --- a/src/main/java/io/bitsquare/gui/main/account/content/changepassword/ChangePasswordView.fxml +++ b/src/main/java/io/bitsquare/gui/main/account/content/changepassword/ChangePasswordView.fxml @@ -18,6 +18,7 @@ --> + @@ -27,29 +28,7 @@ AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns:fx="http://javafx.com/fxml"> - - - - - - - - - - - - - - - - - - - +