Skip to content

Commit c9fa418

Browse files
texodustexodus
authored
Merge pull request #2572 from finos/update-filter
Expression editor & filter UX updates
2 parents 93959e3 + 7054cd2 commit c9fa418

28 files changed

Lines changed: 353 additions & 244 deletions

File tree

‎rust/perspective-viewer/src/less/column-settings-panel.less‎

Lines changed: 73 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -16,81 +16,95 @@
1616
#column_settings_sidebar {
1717
overflow: hidden;
1818
text-overflow: ellipsis;
19-
}
2019

21-
// NOTE: These should probably make their way to global form styling eventually.
22-
.errored {
23-
outline-color: var(--error--color);
24-
}
20+
#attributes-button-panel {
21+
flex: 0 0 auto;
22+
margin-top: 4px;
23+
}
2524

26-
.item_title {
27-
flex: 0 0 auto;
28-
font-size: var(--label--font-size, 0.75em);
29-
}
25+
#attributes-tab > .split-panel-child {
26+
min-height: 200px;
27+
flex: 0 1 auto;
28+
}
3029

31-
.radio-list-item label {
32-
margin-top: 6px;
33-
}
30+
// NOTE: These should probably make their way to global form styling eventually.
31+
.errored {
32+
outline-color: var(--error--color);
33+
}
3434

35-
input {
36-
&[type="text"],
37-
&[type="search"] {
38-
outline: 1px solid;
39-
outline-color: var(--inactive--color);
40-
background-color: var(--plugin--background);
41-
border: none;
42-
margin-bottom: 0.5em;
43-
font-family: inherit;
44-
font-size: 1em;
45-
&:disabled {
46-
background-color: var(--inactive--color);
47-
}
35+
.item_title {
36+
flex: 0 0 auto;
37+
font-size: var(--label--font-size, 0.75em);
4838
}
4939

50-
&[type="search"] {
51-
min-height: 24px;
52-
border-radius: 2px;
40+
.radio-list-item label {
41+
margin-top: 6px;
5342
}
54-
}
5543

56-
.sidebar_header_contents {
57-
display: flex;
58-
margin: 8px;
59-
align-items: center;
60-
border-radius: 3px;
61-
outline-width: 1px;
62-
outline-color: var(--inactive--color);
44+
input {
45+
&[type="text"],
46+
&[type="search"] {
47+
outline: 1px solid;
48+
outline-color: var(--inactive--color);
49+
background-color: var(--plugin--background);
50+
border: none;
51+
margin-bottom: 0.5em;
52+
font-family: inherit;
53+
font-size: 1em;
54+
&:disabled {
55+
background-color: var(--inactive--color);
56+
}
57+
}
6358

64-
&.editable {
65-
&:hover {
66-
outline-style: solid;
67-
cursor: text;
59+
&[type="search"] {
60+
min-height: 24px;
61+
border-radius: 2px;
62+
}
63+
64+
&::-webkit-search-cancel-button {
65+
cursor: pointer;
6866
}
69-
}
70-
&::focus {
71-
outline-style: solid;
72-
background: var(--plugin--background);
73-
}
74-
&.edited {
75-
outline-style: dashed;
76-
}
77-
&.invalid {
78-
outline-color: var(--error--color);
7967
}
8068

81-
.sidebar_header_title {
82-
line-height: normal;
83-
margin: 0;
84-
flex: 1;
85-
padding-left: 5px;
86-
background: none;
87-
outline: none;
88-
color: unset;
69+
.sidebar_header_contents {
70+
display: flex;
71+
margin: 8px;
72+
align-items: center;
73+
border-radius: 3px;
74+
outline-width: 1px;
75+
outline-color: var(--inactive--color);
8976

90-
&:disabled {
77+
&.editable {
78+
&:hover {
79+
outline-style: solid;
80+
cursor: text;
81+
}
82+
}
83+
&::focus {
84+
outline-style: solid;
85+
background: var(--plugin--background);
86+
}
87+
&.edited {
88+
outline-style: dashed;
89+
}
90+
&.invalid {
91+
outline-color: var(--error--color);
92+
}
93+
94+
.sidebar_header_title {
95+
line-height: normal;
96+
margin: 0;
97+
flex: 1;
98+
padding-left: 5px;
9199
background: none;
92100
outline: none;
93101
color: unset;
102+
103+
&:disabled {
104+
background: none;
105+
outline: none;
106+
color: unset;
107+
}
94108
}
95109
}
96110
}

‎rust/perspective-viewer/src/less/containers/split-panel.less‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

1313
:host {
14+
#modal_panel.split-panel.orient-reverse
15+
> .split-panel-child:not(:last-child):not(.is-width-override) {
16+
max-width: 350px;
17+
}
18+
1419
.split-panel.orient-reverse
1520
> .split-panel-child:not(:last-child):not(.is-width-override) {
1621
max-width: 300px;
@@ -42,7 +47,7 @@
4247
}
4348

4449
& > * {
45-
flex: 1 1 auto;
50+
flex: 0 1 auto;
4651
}
4752

4853
&:not(.orient-vertical) > *:first-child {

‎rust/perspective-viewer/src/less/containers/tabs.less‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,15 @@
6363
}
6464
}
6565
.tab-content {
66-
overflow-y: scroll;
67-
max-height: calc(100% - 90px);
6866
@include scrollbar;
69-
67+
flex: 1 1 auto;
68+
overflow: hidden;
7069
.tab-section {
71-
padding: 8px 4px 8px 8px;
72-
// border-bottom: 1px solid var(--inactive--border-color);
70+
padding: 8px 8px 12px 8px;
71+
flex: 0 1 auto;
72+
overflow: hidden;
7373
}
74+
7475
.text {
7576
margin-left: 1em;
7677
}

‎rust/perspective-viewer/src/less/expression-editor.less‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
text-overflow: ellipsis;
2727
min-height: 1.5em;
2828
color: var(--error--color);
29-
top: 0;
29+
top: 0.5em;
30+
left: 0.5em;
3031
position: absolute;
3132
width: calc(100% - 24px);
3233
}
@@ -40,7 +41,13 @@
4041
}
4142
}
4243

43-
#attributes-expr .split-panel-child {
44+
#attributes-expr {
45+
flex: 1 1 auto;
46+
margin-top: 1px;
47+
}
48+
49+
#attribtues-tab .split-panel-child {
50+
max-height: 400px;
4451
flex-direction: column;
4552
}
4653

@@ -68,16 +75,8 @@
6875
}
6976
}
7077

71-
.split-panel.orient-vertical
72-
> .split-panel-child:not(.is-width-override)
73-
#editor-container {
74-
height: 300px;
75-
}
76-
77-
.split-panel.orient-vertical
78-
> .split-panel-child.is-width-override
79-
#editor-container {
80-
height: calc(100% - 20px);
78+
.split-panel.orient-vertical > .split-panel-child #editor-container {
79+
height: calc(100% - 15px);
8180
}
8281

8382
#horizontal-resize {
@@ -102,10 +101,11 @@
102101

103102
#psp-expression-editor-meta {
104103
display: flex;
104+
flex: 0 0 30px;
105105
flex-direction: column;
106106
padding: 0.5em;
107107
gap: 0.25em;
108-
height: 24px;
108+
height: 30px;
109109
position: relative;
110110
}
111111

@@ -124,8 +124,9 @@
124124
flex: 1;
125125
justify-content: center;
126126
font-family: inherit;
127+
font-size: 1em;
127128
border: 1px solid var(--icon--color);
128-
height: 18px;
129+
height: 24px;
129130
padding: 2px 12px;
130131
display: flex;
131132
align-items: center;

‎rust/perspective-viewer/src/less/filter-item.less‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
color: var(--inactive--color, inherit);
5050
visibility: hidden;
5151
white-space: nowrap;
52-
padding-right: 12px;
52+
padding-right: 18px;
5353
}
5454

5555
&.num-filter {
@@ -88,6 +88,26 @@
8888
// The filter comparator
8989
#filter {
9090
.pivot-column {
91+
input {
92+
font-size: 1em;
93+
}
94+
95+
input[type="search"] {
96+
text-overflow: ellipsis;
97+
position: absolute;
98+
left: 0;
99+
right: 0;
100+
&::-webkit-search-cancel-button {
101+
cursor: pointer;
102+
opacity: 1;
103+
margin-left: 6px;
104+
}
105+
106+
&:not(:empty)::-webkit-search-cancel-button {
107+
opacity: 1;
108+
}
109+
}
110+
91111
.dropdown-width-container {
92112
height: 100%;
93113
flex: 0 0 auto;

‎rust/perspective-viewer/src/less/form/code-editor.less‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,9 @@
3535

3636
pre#content {
3737
margin: 0;
38-
padding: 6px;
39-
padding-left: 36px;
40-
position: absolute;
38+
padding: 6px 0;
39+
margin-left: 36px;
4140
box-sizing: border-box;
42-
top: 0;
43-
bottom: 0;
44-
left: 0;
45-
right: 0;
4641
pointer-events: none;
4742
font-weight: 400;
4843
font-family: var(--interface-monospace--font-family, monospace);
@@ -88,14 +83,13 @@
8883

8984
#textarea_editable {
9085
position: absolute;
91-
width: 100%;
86+
width: calc(100% - 36px);
9287
height: 100%;
9388
font-family: var(--interface-monospace--font-family, monospace);
9489
font-size: 1em;
9590
resize: none;
96-
padding: 6px;
97-
padding-left: 36px;
98-
margin: 0;
91+
padding: 6px 0;
92+
margin: 0 0 0 36px;
9993
border: none;
10094
outline: none;
10195
color: transparent;

0 commit comments

Comments
 (0)