Skip to content

Commit 21f0f22

Browse files
LoayGhreebkoppor
LoayGhreeb
and
koppor
authored
Update main table colors (#11579)
* Update Base.css * Reorder a bit -fill before -text-fill * Fix hovering for :odd * Use -jr-blue-gray-3 colors simple-search-library.bib - Search for "S" - Select group "g" * Swap odd and even * "Fix" derive * Proposal for Blueberry-based theme * Use -jr-theme * Remove wrong comment * Fix color for focused entry * Fix double click behavior * Final double click fix --------- Co-authored-by: Oliver Kopp <[email protected]>
1 parent a28cfd2 commit 21f0f22

File tree

3 files changed

+248
-30
lines changed

3 files changed

+248
-30
lines changed

‎src/main/java/org/jabref/gui/Base.css‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@
3232
-jr-gray-3: #404040;
3333
-jr-black: #000;
3434

35+
/* Some blueish greys - currently not used */
36+
-jr-blue-gray-1: #c8d6e5;
37+
-jr-blue-gray-1-darker: derive(-jr-blue-gray-1, -5%);
38+
-jr-blue-gray-2: #8395a7;
39+
-jr-blue-gray-2-darker: derive(-jr-blue-gray-2, -5%);
40+
-jr-blue-gray-3: #576574;
41+
-jr-blue-gray-3-darker: derive(-jr-blue-gray-3, -5%);
42+
-jr-blue-gray-4: #222f3e;
43+
-jr-blue-gray-4-darker: derive(-jr-blue-gray-4, -5%);
44+
3545
/* Highlights */
3646
-jr-blue: #0abde3;
3747
-jr-light-blue: #48dbfb;
@@ -44,12 +54,6 @@
4454
-jr-yellow: #feca57;
4555
-jr-orange: #ff9f43;
4656

47-
/* Some blueish greys */
48-
-jr-blue-gray-1: #c8d6e5;
49-
-jr-blue-gray-2: #8395a7;
50-
-jr-blue-gray-3: #576574;
51-
-jr-blue-gray-4: #222f3e;
52-
5357
/* Background specs */
5458
-jr-background-alt: -fx-background;
5559
-jr-text-area-background: derive(-jr-base, 80%);
@@ -252,6 +256,34 @@
252256

253257
/* Consistent size for headers of tab-pane and side-panels*/
254258
-jr-header-height: 3em;
259+
260+
/* region: maintable base colors **/
261+
262+
-jr-match-1: -jr-white;
263+
-jr-match-1-even: -jr-base;
264+
-jr-match-1-text-color: -fx-mid-text-color;
265+
-jr-match-1-hover: -jr-hover;
266+
-jr-match-1-text-color-hover: -fx-mid-text-color;
267+
268+
-jr-match-2: derive(-jr-theme, 100%);
269+
-jr-match-2-even: derive(-jr-match-2, 10%);
270+
-jr-match-2-text-color: -fx-mid-text-color;
271+
-jr-match-2-hover: -jr-hover;
272+
-jr-match-2-text-color-hover: -fx-mid-text-color;
273+
274+
-jr-match-3: derive(-jr-theme, 50%);
275+
-jr-match-3-even: derive(-jr-match-3, 10%);
276+
-jr-match-3-text-color: derive(-jr-accent, 30%);
277+
-jr-match-3-hover: -jr-hover;
278+
-jr-match-3-text-color-hover: -fx-mid-text-color;
279+
280+
-jr-match-4: -jr-theme;
281+
-jr-match-4-even: derive(-jr-match-4, 10%);
282+
-jr-match-4-text-color: -jr-accent;
283+
-jr-match-4-hover: -jr-hover;
284+
-jr-match-4-text-color-hover: -fx-mid-text-color;
285+
286+
/* endregion */
255287
}
256288

257289
.unchanged {
@@ -270,7 +302,6 @@
270302
-rtfx-background-color: rgba(255, 107, 107, 0.55);
271303
}
272304

273-
274305
#frame {
275306
-fx-background-color: -jr-background-alt;
276307
}
@@ -584,8 +615,8 @@ TextFlow > .tooltip-text-monospaced {
584615
}
585616

586617
.tab-pane > .tab-header-area > .headers-region > .tab:selected .glyph-icon {
587-
-fx-text-fill: -fx-mid-text-color;
588618
-fx-fill: -fx-mid-text-color;
619+
-fx-text-fill: -fx-mid-text-color;
589620
}
590621

591622
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
@@ -611,13 +642,13 @@ TextFlow > .tooltip-text-monospaced {
611642

612643
.tab-pane > .tab-header-area > .headers-region > .tab .glyph-icon {
613644
-glyph-size: 13px;
614-
-fx-text-fill: -fx-mid-text-color;
615645
-fx-fill: -fx-mid-text-color;
646+
-fx-text-fill: -fx-mid-text-color;
616647
}
617648

618649
.tab-pane > .tab-header-area > .headers-region > .tab:selected .glyph-icon {
619-
-fx-text-fill: -jr-theme-text;
620650
-fx-fill: -jr-theme-text;
651+
-fx-text-fill: -jr-theme-text;
621652
}
622653

623654
.tab-pane > .tab-header-area {
@@ -648,30 +679,14 @@ TextFlow > .tooltip-text-monospaced {
648679
-fx-padding: 0 .5 0 .5;
649680
}
650681

651-
.table-row-cell:matching-search-and-groups {
652-
-fx-background-color: white;
653-
}
654-
655-
.table-row-cell:matching-search-not-groups {
656-
-fx-background-color: rgba(180, 180, 180, 0.86);
657-
}
658-
659-
.table-row-cell:matching-groups-not-search {
660-
-fx-background-color: rgba(140, 140, 140, 0.86);
661-
}
662-
663-
.table-row-cell:not-matching-search-and-groups {
664-
-fx-opacity: 60%;
665-
}
666-
667682
.table-row-cell:hover,
683+
.table-row-cell:hover:even,
668684
.tree-table-row-cell:hover {
669685
-fx-background-color: -jr-hover;
670686
-fx-text-fill: -fx-focused-text-base-color;
671687
-fx-fill: -fx-focused-text-base-color;
672688
}
673689

674-
.table-row-cell:hover,
675690
.tree-table-row-cell:selected > .tree-table-cell > .glyph-icon {
676691
-fx-fill: white;
677692
-fx-text-fill: white;
@@ -1162,12 +1177,11 @@ We want to have a look that matches our icons in the tool-bar */
11621177

11631178
.table-cell,
11641179
.tree-table-cell,
1165-
.table-cell .glyph-icon,
11661180
.tree-table-cell .glyph-icon {
1167-
-fx-padding: 0.5em 1em 0.5em 1em;
11681181
-fx-cell-size: 4.0em;
1169-
-fx-text-fill: -fx-text-background-color;
1182+
-fx-padding: 0.5em 1em 0.5em 1em;
11701183
-fx-fill: -fx-text-background-color;
1184+
-fx-text-fill: -fx-text-background-color;
11711185
}
11721186

11731187
/* Drag and drop colored indicator */

‎src/main/java/org/jabref/gui/maintable/MainTable.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,140 @@
3737
-fx-padding: -2 0 0 0;
3838
}
3939

40+
/** even and odd are swapped around somehow. Below "odd" matches lines 2, 4, ... **/
41+
42+
.table-row-cell:matching-search-and-groups {
43+
-fx-background-color: -jr-match-1;
44+
}
45+
.table-row-cell:matching-search-and-groups:hover {
46+
-fx-background-color: -jr-match-1-hover;
47+
}
48+
.table-row-cell:matching-search-and-groups > .table-cell {
49+
-fx-text-fill: -jr-match-1-text-color;
50+
}
51+
.table-row-cell:matching-search-and-groups:focused > .table-cell {
52+
-fx-text-fill: -fx-focused-text-base-color;
53+
}
54+
.table-row-cell:matching-search-and-groups:hover > .table-cell {
55+
-fx-text-fill: -jr-match-1-text-color-hover;
56+
}
57+
.table-row-cell:matching-search-and-groups > .table-cell > .ikonli-font-icon {
58+
-fx-text-fill: -jr-match-1-text-color;
59+
}
60+
.table-row-cell:matching-search-and-groups:hover > .table-cell > .ikonli-font-icon {
61+
-fx-text-fill: -jr-match-1-text-color-hover;
62+
}
63+
.table-row-cell:matching-search-and-groups:odd {
64+
-fx-background-color: -jr-match-1-even;
65+
}
66+
.table-row-cell:matching-search-and-groups:odd:focused,
67+
.table-row-cell:matching-search-and-groups:odd:focused:hover,
68+
.table-row-cell:matching-search-and-groups:focused:hover {
69+
-fx-background-color: -jr-selected;
70+
}
71+
.table-row-cell:matching-search-and-groups:odd:hover {
72+
-fx-background-color: -jr-match-1-hover;
73+
}
74+
75+
.table-row-cell:matching-search-not-groups {
76+
-fx-background-color: -jr-match-2;
77+
}
78+
.table-row-cell:matching-search-not-groups:hover {
79+
-fx-background-color: -jr-match-2-hover;
80+
}
81+
.table-row-cell:matching-search-not-groups > .table-cell {
82+
-fx-text-fill: -jr-match-2-text-color;
83+
}
84+
.table-row-cell:matching-search-not-groups:focused > .table-cell {
85+
-fx-text-fill: -fx-focused-text-base-color;
86+
}
87+
.table-row-cell:matching-search-not-groups:hover > .table-cell {
88+
-fx-text-fill: -jr-match-2-text-color-hover;
89+
}
90+
.table-row-cell:matching-search-not-groups > .table-cell > .ikonli-font-icon {
91+
-fx-text-fill: -jr-match-2-text-color;
92+
}
93+
.table-row-cell:matching-search-not-groups:hover > .table-cell > .ikonli-font-icon {
94+
-fx-text-fill: -jr-match-2-text-color-hover;
95+
}
96+
.table-row-cell:matching-search-not-groups:odd {
97+
-fx-background-color: -jr-match-2-even;
98+
}
99+
.table-row-cell:matching-search-not-groups:odd:focused,
100+
.table-row-cell:matching-search-not-groups:odd:focused:hover,
101+
.table-row-cell:matching-search-not-groups:focused:hover {
102+
-fx-background-color: -jr-selected;
103+
}
104+
.table-row-cell:matching-search-not-groups:odd:hover {
105+
-fx-background-color: -jr-match-2-hover;
106+
}
107+
108+
.table-row-cell:matching-groups-not-search {
109+
-fx-background-color: -jr-match-3;
110+
}
111+
.table-row-cell:matching-groups-not-search:hover {
112+
-fx-background-color: -jr-match-3-hover;
113+
}
114+
.table-row-cell:matching-groups-not-search > .table-cell {
115+
-fx-text-fill: -jr-match-3-text-color;
116+
}
117+
.table-row-cell:matching-groups-not-search:focused > .table-cell {
118+
-fx-text-fill: -fx-focused-text-base-color;
119+
}
120+
.table-row-cell:matching-groups-not-search:hover > .table-cell {
121+
-fx-text-fill: -jr-match-3-text-color-hover;
122+
}
123+
.table-row-cell:matching-groups-not-search > .table-cell > .ikonli-font-icon {
124+
-fx-icon-color: -jr-match-3-text-color;
125+
}
126+
.table-row-cell:matching-groups-not-search:hover > .table-cell > .ikonli-font-icon {
127+
-fx-icon-color: -jr-match-3-text-color-hover;
128+
}
129+
.table-row-cell:matching-groups-not-search:odd {
130+
-fx-background-color: -jr-match-3-even;
131+
}
132+
.table-row-cell:matching-groups-not-search:odd:focused,
133+
.table-row-cell:matching-groups-not-search:odd:focused:hover,
134+
.table-row-cell:matching-groups-not-search:focused:hover {
135+
-fx-background-color: -jr-selected;
136+
}
137+
.table-row-cell:matching-groups-not-search:odd:hover {
138+
-fx-background-color: -jr-hover;
139+
}
140+
141+
.table-row-cell:not-matching-search-and-groups {
142+
-fx-background-color: -jr-match-4;
143+
}
144+
.table-row-cell:not-matching-search-and-groups:hover {
145+
-fx-background-color: -jr-match-4-hover;
146+
}
147+
.table-row-cell:not-matching-search-and-groups > .table-cell {
148+
-fx-text-fill: -jr-match-4-text-color;
149+
}
150+
.table-row-cell:not-matching-search-and-groups:focused > .table-cell {
151+
-fx-text-fill: -fx-focused-text-base-color;
152+
}
153+
.table-row-cell:not-matching-search-and-groups:hover > .table-cell {
154+
-fx-text-fill: -jr-match-4-text-color-hover;
155+
}
156+
.table-row-cell:not-matching-search-and-groups > .table-cell > .ikonli-font-icon {
157+
-fx-icon-color: -jr-match-4-text-color;
158+
}
159+
.table-row-cell:not-matching-search-and-groups:hover > .table-cell > .ikonli-font-icon {
160+
-fx-icon-color: -jr-match-4-text-color-hover;
161+
}
162+
.table-row-cell:not-matching-search-and-groups:odd {
163+
-fx-background-color: -jr-match-4-even;
164+
}
165+
.table-row-cell:not-matching-search-and-groups:odd:focused,
166+
.table-row-cell:not-matching-search-and-groups:odd:focused:hover,
167+
.table-row-cell:not-matching-search-and-groups:focused:hover {
168+
-fx-background-color: -jr-selected;
169+
}
170+
.table-row-cell:not-matching-search-and-groups:odd:hover {
171+
-fx-background-color: -jr-match-4-hover;
172+
}
173+
40174
.rating > .container {
41175
-fx-spacing: 2;
42176
}

‎src/test/resources/testbib/simple-search-library.bib‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@Article{,
2+
title = {S2},
3+
}
4+
5+
@Article{,
6+
title = {g2},
7+
}
8+
9+
@Article{,
10+
title = {n4},
11+
}
12+
13+
@Article{,
14+
title = {Sg},
15+
}
16+
17+
@Article{,
18+
title = {Sg3},
19+
}
20+
21+
@Article{,
22+
title = {Sg2},
23+
}
24+
25+
@Article{,
26+
title = {S},
27+
}
28+
29+
@Article{,
30+
title = {S4},
31+
}
32+
33+
@Article{,
34+
title = {g},
35+
}
36+
37+
@Article{,
38+
title = {g4},
39+
}
40+
41+
@Article{,
42+
title = {n},
43+
}
44+
45+
@Article{,
46+
title = {n3},
47+
}
48+
49+
@Article{,
50+
title = {Sg4},
51+
}
52+
53+
@Article{,
54+
title = {S3},
55+
}
56+
57+
@Article{,
58+
title = {g3},
59+
}
60+
61+
@Article{,
62+
title = {n2},
63+
}
64+
65+
@Comment{jabref-meta: databaseType:bibtex;}
66+
67+
@Comment{jabref-meta: grouping:
68+
0 AllEntriesGroup:;
69+
1 SearchGroup:g\;0\;g\;0\;0\;1\;\;\;\;;
70+
}

0 commit comments

Comments
 (0)