Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit 747ee85

Browse files
EheviEhevi
authored
UI improvements (#77)
* filtering panel cleanup * Filtering panel cleanup * Pager cleanup
1 parent daa23df commit 747ee85

6 files changed

Lines changed: 98 additions & 79 deletions

File tree

‎app/public/components/userView/data/pager.js‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -74,53 +74,55 @@ export default function pager(model, data, scid) {
7474
const siteChangingController = (onclickF, label) => h('a.site-changing-controller', { onclick: onclickF }, label);
7575

7676
return [
77-
h('.flex-row', [
78-
h('.menu-title.w-33', `${firstRowIdx}-${lastRowIdx} out of ${data.totalRecordsNumber} items`),
79-
80-
h('input.pager.p2', {
81-
id: `rows-on-site-input-${scid}`,
82-
type: 'number',
83-
placeholder: 50,
84-
value: model.router.params['rows-on-site'],
85-
}, ''),
86-
h('.menu-title', 'per page'),
87-
h('button.btn.m1', { onclick: () => onclickSetRowsOnSite(model, scid) }, 'apply'),
88-
89-
h('.menu-title.w-25'),
90-
91-
// Move to first site
92-
currentSite > 1 ? siteChangingController(() => model.fetchedData.changePage(1), iconMediaSkipBackward()) : ' ',
93-
// Move to middle of sites range [first, current]
94-
currentSite > 3 ? siteChangingController(() => model.fetchedData.changePage(Math.floor(currentSite / 2)), iconChevronBottom()) : ' ',
95-
// Move one site back
96-
currentSite > 1 ? siteChangingController(() => model.fetchedData.changePage(currentSite - 1), iconCaretLeft()) : ' ',
97-
98-
mapArrayToButtons(leftButtonsR),
99-
leftThreeDotsPresent ? h('.ellipsis') : '',
100-
mapArrayToButtons(middleButtonsR),
101-
rightThreeDotsPresent ? '...' : '',
102-
mapArrayToButtons(rightButtonsR),
103-
104-
// Analogically as above
105-
currentSite < sitesNumber
106-
? siteChangingController(
107-
() => model.fetchedData.changePage(currentSite + 1),
108-
iconCaretRight(),
109-
)
110-
: ' ',
111-
112-
currentSite < sitesNumber - 2
113-
? siteChangingController(
114-
() => model.fetchedData.changePage(currentSite + Math.floor((sitesNumber - currentSite) / 2)),
115-
iconChevronBottom(),
116-
)
117-
: ' ',
118-
currentSite < sitesNumber
119-
? siteChangingController(
120-
() => model.fetchedData.changePage(sitesNumber),
121-
iconMediaSkipForward(),
122-
)
123-
: ' ',
77+
h('.flex-row.pager-panel', [
78+
h('.flex.menu-title', `${firstRowIdx}-${lastRowIdx} out of ${data.totalRecordsNumber} items`),
79+
80+
h('.flex',
81+
h('input.pager.p2', {
82+
id: `rows-on-site-input-${scid}`,
83+
type: 'number',
84+
placeholder: 50,
85+
value: model.router.params['rows-on-site'],
86+
}, ''),
87+
h('.menu-title', 'per page'),
88+
h('button.btn.m1', { onclick: () => onclickSetRowsOnSite(model, scid) }, 'apply')),
89+
90+
h('.flex.pager-buttons',
91+
// Move to first site
92+
currentSite > 1 ? siteChangingController(() => model.fetchedData.changePage(1), iconMediaSkipBackward()) : ' ',
93+
// Move to middle of sites range [first, current]
94+
currentSite > 3
95+
? siteChangingController(() => model.fetchedData.changePage(Math.floor(currentSite / 2)), iconChevronBottom())
96+
: ' ',
97+
// Move one site back
98+
currentSite > 1 ? siteChangingController(() => model.fetchedData.changePage(currentSite - 1), iconCaretLeft()) : ' ',
99+
100+
mapArrayToButtons(leftButtonsR),
101+
leftThreeDotsPresent ? h('.ellipsis') : '',
102+
mapArrayToButtons(middleButtonsR),
103+
rightThreeDotsPresent ? '...' : '',
104+
mapArrayToButtons(rightButtonsR),
105+
106+
// Analogically as above
107+
currentSite < sitesNumber
108+
? siteChangingController(
109+
() => model.fetchedData.changePage(currentSite + 1),
110+
iconCaretRight(),
111+
)
112+
: ' ',
113+
114+
currentSite < sitesNumber - 2
115+
? siteChangingController(
116+
() => model.fetchedData.changePage(currentSite + Math.floor((sitesNumber - currentSite) / 2)),
117+
iconChevronBottom(),
118+
)
119+
: ' ',
120+
currentSite < sitesNumber
121+
? siteChangingController(
122+
() => model.fetchedData.changePage(sitesNumber),
123+
iconMediaSkipForward(),
124+
)
125+
: ' '),
124126
]),
125127
];
126128
}

‎app/public/components/userView/data/table/filter.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,22 +34,18 @@ export default function filter(model) {
3434
const { params } = model.router;
3535

3636
return h('.filter-panel', [
37-
h('.x-scrollable',
37+
h('.filter-panel-content',
3838
h('table.no-spacing',
3939
h('tbody',
4040
labelsRow(model, fields),
4141
inputsRow(params, upperInputIds, fields),
4242
inputsRow(params, lowerInputIds, fields))),
43-
h('.absolute',
44-
h('button.btn.btn-primary', {
45-
onclick: onclickSubmit(model, inputsIds),
46-
}, 'Submit'),
47-
' ',
48-
h('button.btn', {
43+
h('.filter-panel-buttons',
44+
h('button.btn.filter-btn', {
4945
onclick: onclickClear(model, inputsIds),
50-
}, h('.clear-filters-20'), 'Clear filters'),
51-
' ',
52-
h('button.btn', {
46+
}, h('.clear-filters-20.vertical-center'), h('.icon-btn-text', 'Clear filters')),
47+
' ',
48+
h('button.btn.filter-btn', {
5349
onclick: () => {
5450
for (const field of data.fields) {
5551
field.marked = true;
@@ -58,15 +54,19 @@ export default function filter(model) {
5854
},
5955
}, 'Show all columns'),
6056
' ',
61-
h('button.btn', {
57+
h('button.btn.filter-btn', {
6258
onclick: () => data.fields.forEach((f) => {
6359
model.fetchedData.changeItemStatus(
6460
f,
6561
data.rows.some((r) => r[f.name]),
6662
);
6763
model.notify();
6864
}),
69-
}, h('.hide-empty-20'), 'Hide empty columns'))),
65+
}, h('.hide-empty-20.vertical-center'), h('.icon-btn-text', 'Hide empty columns')),
66+
' ',
67+
h('button.btn.btn-primary.filter-btn', {
68+
onclick: onclickSubmit(model, inputsIds),
69+
}, 'Submit'))),
7070
]);
7171
}
7272

‎app/public/styles/custom.css‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,6 @@
3737
.no-text-decoration {
3838
text-decoration: none !important;
3939
}
40-
41-
.x-scrollable {
42-
overflow-x: auto !important;
43-
overflow-y: hidden !important;
44-
width: 100%;
45-
padding-bottom: 40px;
46-
}
4740

4841
.table-cell-like {
4942
display: table-cell !important;
@@ -97,11 +90,6 @@
9790
bottom: -100%;
9891
}
9992

100-
.big-tap {
101-
width: 500px;
102-
height: 100px;
103-
}
104-
10593
.vertical-center {
10694
margin: 0;
10795
position: absolute;
@@ -131,14 +119,6 @@
131119
visibility: hidden !important;
132120
}
133121

134-
.filter-panel {
135-
position: sticky !important;
136-
top: 0px;
137-
padding-top: 10px;
138-
background-color: var(--color-white);
139-
z-index: 2 !important;
140-
}
141-
142122
.inline {
143123
display: inline-block !important;
144124
}

‎app/public/styles/custom/filter/filter.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.filter-panel {
2+
position: sticky !important;
3+
top: 0px;
4+
padding-top: 10px;
5+
background-color: var(--color-white);
6+
z-index: 2 !important;
7+
}
8+
9+
.filter-panel-content {
10+
overflow-x: auto !important;
11+
overflow-y: hidden !important;
12+
width: 100%;
13+
padding-bottom: 65px;
14+
}
15+
16+
.filter-panel-buttons {
17+
position: absolute;
18+
padding: 10px;
19+
}
20+
21+
.filter-btn {
22+
min-height: 40px;
23+
}
24+
25+
.icon-btn-text {
26+
padding-left: 30px !important;
27+
display: inline-block !important;
28+
}

‎app/public/styles/custom/pager.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
* or submit itself to any jurisdiction.
1313
*/
1414

15+
.pager-panel {
16+
justify-content: space-between;
17+
}
18+
1519
input.pager {
1620
border: none !important;
1721
width: 70px;
@@ -24,3 +28,7 @@ input.pager {
2428
margin: 3px;
2529
cursor: pointer;
2630
}
31+
32+
.pager-buttons {
33+
margin-right: 10px;
34+
}

‎app/public/styles/styles.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@import (less) "./custom/tables/periods.css";
2323
@import (less) "./custom/tables/runs.css";
2424
@import (less) "./custom/tables/data-passes.css";
25+
@import (less) "./custom/filter/filter.css";
2526

2627
.container {
2728
.flex-wrap;

0 commit comments

Comments
 (0)