From 4ba4f66527ec98265329eaded68cc0c194587447 Mon Sep 17 00:00:00 2001 From: cd2357 Date: Sun, 3 May 2020 14:06:47 +0200 Subject: [PATCH 1/2] More readable tables and views: Alternate row background colors, regardless of theme A few CSS selectors affecting table and list row coloring were moved the dark theme stylesheet (theme-dark.css) to the common stylesheet (bisq.css). These selectors are theme-independent, since they re-use variables defined in each theme stylesheet (like -bs-background-color). Therefore a more appropriate place for them is in the common stylesheet. This move means that alternating row background colors are now available for all tables and lists, in all views, in both dark and light themes. --- desktop/src/main/java/bisq/desktop/bisq.css | 47 ++++++++++++++++++ .../src/main/java/bisq/desktop/theme-dark.css | 49 ------------------- 2 files changed, 47 insertions(+), 49 deletions(-) diff --git a/desktop/src/main/java/bisq/desktop/bisq.css b/desktop/src/main/java/bisq/desktop/bisq.css index e09d3aed0bf..10e56aafce0 100644 --- a/desktop/src/main/java/bisq/desktop/bisq.css +++ b/desktop/src/main/java/bisq/desktop/bisq.css @@ -237,6 +237,28 @@ -fx-background-color: -fx-selection-bar; } + +/* list view */ +.list-view .list-cell { + -fx-background-color: -bs-background-color; +} +.list-view .list-cell:odd { + -fx-background-color: derive(-bs-background-color, -5%); +} +.list-view .list-cell:even { + -fx-background-color: derive(-bs-background-color, 5%); +} +.list-view .list-cell:selected, +.table-view .table-cell:selected { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-border-color: -fx-selection-bar; +} + +.number-column.table-cell { + -fx-background-color: -bs-background-color; +} + .list-view:focused, .tree-view:focused, .table-view:focused, @@ -867,6 +889,31 @@ textfield */ * Table * * * ******************************************************************************/ +.table-view .table-row-cell:even .table-cell { + -fx-background-color: derive(-bs-background-color, 5%); + -fx-border-color: derive(-bs-background-color,5%); +} +.table-view .table-row-cell:odd .table-cell { + -fx-background-color: derive(-bs-background-color,-5%); + -fx-border-color: derive(-bs-background-color,-5%); +} +.table-view .table-row-cell:selected .table-cell { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-border-color: -fx-selection-bar; +} +.table-row-cell { + -fx-border-color: -bs-background-color; +} +.table-row-cell:empty, .table-row-cell:empty:even, .table-row-cell:empty:odd { + -fx-background-color: -bs-background-color; + -fx-min-height: 36; +} +.offer-table .table-row-cell { + -fx-background: -fx-accent; + -fx-background-color: -bs-color-gray-6; +} + .table-view .table-cell { -fx-alignment: center-left; -fx-padding: 2 0 2 0; diff --git a/desktop/src/main/java/bisq/desktop/theme-dark.css b/desktop/src/main/java/bisq/desktop/theme-dark.css index 7439b1cf6d1..bb95d5bb484 100644 --- a/desktop/src/main/java/bisq/desktop/theme-dark.css +++ b/desktop/src/main/java/bisq/desktop/theme-dark.css @@ -135,55 +135,6 @@ -bs-chart-dao-line2: -bs-color-blue-2; } -/* list view */ -.list-view .list-cell { - -fx-background-color: -bs-background-color; -} -.list-view .list-cell:odd { - -fx-background-color: derive(-bs-background-color, -5%); -} -.list-view .list-cell:even { - -fx-background-color: derive(-bs-background-color, 5%); -} -.list-view .list-cell:selected, -.table-view .table-cell:selected { - -fx-background: -fx-accent; - -fx-background-color: -fx-selection-bar; - -fx-border-color: -fx-selection-bar; -} - -.number-column.table-cell { - -fx-background-color: -bs-background-color; -} - -/* table view */ -.table-view, .table-cell:focused, .table-row-cell { - -fx-background: transparent; -} -.table-view .table-row-cell:even .table-cell { - -fx-background-color: derive(-bs-background-color, 5%); - -fx-border-color: derive(-bs-background-color,5%); -} -.table-view .table-row-cell:odd .table-cell { - -fx-background-color: derive(-bs-background-color,-5%); - -fx-border-color: derive(-bs-background-color,-5%); -} -.table-view .table-row-cell:selected .table-cell { - -fx-background: -fx-accent; - -fx-background-color: -fx-selection-bar; - -fx-border-color: -fx-selection-bar; -} -.table-row-cell { - -fx-border-color: -bs-background-color; -} -.table-row-cell:empty, .table-row-cell:empty:even, .table-row-cell:empty:odd { - -fx-background-color: -bs-background-color; - -fx-min-height: 36; -} -.offer-table .table-row-cell { - -fx-background: -fx-accent; - -fx-background-color: -bs-color-gray-6; -} /* tab pane */ .jfx-tab-pane .tab-content-area { From c7ccc434750fb1828f75eece6e8cf8d16b167063 Mon Sep 17 00:00:00 2001 From: cd2357 Date: Sun, 3 May 2020 14:15:14 +0200 Subject: [PATCH 2/2] More readable tables and views: Highlight table and list row on hover The same styling as for a selected row, is applied for a hovered row. This makes the UI more intuitive, helping users better navigate through and focus on specific rows, especially in large tables. --- desktop/src/main/java/bisq/desktop/bisq.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/desktop/src/main/java/bisq/desktop/bisq.css b/desktop/src/main/java/bisq/desktop/bisq.css index 10e56aafce0..dc2e9ed7c86 100644 --- a/desktop/src/main/java/bisq/desktop/bisq.css +++ b/desktop/src/main/java/bisq/desktop/bisq.css @@ -248,7 +248,9 @@ .list-view .list-cell:even { -fx-background-color: derive(-bs-background-color, 5%); } +.list-view .list-cell:hover, .list-view .list-cell:selected, +.table-view .table-cell:hover, .table-view .table-cell:selected { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; @@ -897,6 +899,7 @@ textfield */ -fx-background-color: derive(-bs-background-color,-5%); -fx-border-color: derive(-bs-background-color,-5%); } +.table-view .table-row-cell:hover .table-cell, .table-view .table-row-cell:selected .table-cell { -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar;