Skip to content

Commit 94dc907

Browse files
ra3orbladera3orblade
authored
Merge pull request #1938 from anyproto/feature/JS-8659-simplified-filters-design-review
Feature/JS-8659: Simplified filters design review
2 parents 7e59f78 + 2d3fb34 commit 94dc907

File tree

20 files changed

+165
-131
lines changed

20 files changed

+165
-131
lines changed

‎src/img/arrow/select/filter.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/img/icon/dataview/button/sort1.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/img/icon/menu/action/more0.svg‎

Lines changed: 4 additions & 4 deletions
Loading

‎src/json/text.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1781,6 +1781,8 @@
17811781

17821782
"menuDataviewFilterValuesChecked": "Checked",
17831783
"menuDataviewFilterValuesUnchecked": "Unchecked",
1784+
"menuDataviewFilterValuesExact": "Exact",
1785+
"menuDataviewFilterValuesRelative": "Relative",
17841786

17851787
"menuDataviewGroupEditShowColumn": "Show column",
17861788
"menuDataviewGroupEditHideColumn": "Hide Column",

‎src/scss/block/dataview.scss‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -149,12 +149,11 @@
149149

150150
.icon { position: relative; transition: $transitionAllCommon; }
151151
.icon.btn-filter { background-image: url('~img/icon/dataview/button/filter0.svg'); }
152-
.icon.btn-filter.hasFilter { background-image: url('~img/icon/dataview/button/filter1.svg'); }
153-
.icon.btn-filter.on { background-color: var(--color-shape-highlight-medium); }
154-
.icon.btn-filter.hasFilter.on,
155-
.icon.btn-filter.hasFilter:hover { background-color: var(--color-system-selection) !important; }
152+
.icon.btn-filter.on { background-image: url('~img/icon/dataview/button/filter1.svg'); }
156153
.icon.btn-sort { background-image: url('~img/icon/dataview/button/sort0.svg'); }
157154
.icon.btn-sort.on { background-image: url('~img/icon/dataview/button/sort1.svg'); }
155+
.icon.btn-filter.on:hover,
156+
.icon.btn-sort.on:hover { background-color: var(--color-system-selection) !important; }
158157
.icon.btn-settings { background-image: url('~img/icon/dataview/button/settings.svg'); }
159158

160159
.icon.btn-filter {
@@ -226,7 +225,7 @@
226225
> .side.right { flex-shrink: 0; gap: 0px 4px; justify-content: flex-end; align-items: flex-start; }
227226

228227
.filterItem {
229-
position: relative; display: flex; flex-direction: row; gap: 0px 6px; height: 32px; align-items: center; padding: 0px 10px 0px 8px;
228+
position: relative; display: flex; flex-direction: row; gap: 0px 6px; height: 28px; align-items: center; padding: 0px 8px;
230229
border-radius: 16px; color: var(--color-text-secondary); font-weight: 500;
231230
}
232231
.filterItem {
@@ -264,7 +263,7 @@
264263
}
265264
&:hover, &.hover { background-color: var(--color-shape-highlight-medium); border-color: transparent; }
266265

267-
.content { display: flex; gap: 4px; @include text-overflow-nw; max-width: 256px; }
266+
.content { display: flex; gap: 4px; @include text-overflow-nw; max-width: 180px; }
268267
.value { @include text-overflow-nw; }
269268

270269
.label.condition { text-transform: lowercase; }
@@ -279,13 +278,13 @@
279278
}
280279
}
281280

282-
.icon.plus { width: 32px; height: 32px; border-radius: 16px; background-size: 20px; background-position: 50% 50%; background-repeat: no-repeat; }
281+
.icon.plus { width: 28px; height: 28px; border-radius: 14px; background-size: 20px; background-position: 50% 50%; background-repeat: no-repeat; }
283282
.icon.plus {
284283
&:hover, &.hover { background-color: var(--color-shape-highlight-medium); }
285284
}
286285

287286
.buttons {
288-
.label { font-weight: 500; color: var(--color-text-secondary); padding: 5px 8px; }
287+
.label { font-weight: 500; color: var(--color-text-secondary); padding: 3px 8px; }
289288
.labe:hover { color: var(--color-text-primary); }
290289
}
291290
}

‎src/scss/component/calendarSelect.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212

1313
.head {
1414
.sides { margin-bottom: 10px; }
15-
.side.left { display: flex; gap: 0px 4px; }
15+
.side.left { display: flex; gap: 0px; font-weight: 500; }
16+
.side.left {
17+
.select { padding: 2px; }
18+
}
1619
.side.right { display: flex; gap: 0px 2px; justify-content: flex-end; }
1720
.side.right {
1821
.icon.arrow {
@@ -28,7 +31,7 @@
2831
align-items: center;
2932
}
3033

31-
.weekDay { color: var(--color-control-active); @include text-small; width: 28px; text-align: center; }
34+
.weekDay { color: var(--color-text-secondary); @include text-small; width: 28px; text-align: center; }
3235
}
3336

3437
.body { padding: 0px 8px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; grid-gap: 8px; }
@@ -52,7 +55,7 @@
5255

5356
.day.isToday, .day.active { font-weight: 600; }
5457
.day.isToday { color: var(--color-system-accent-125); }
55-
.day.other { color: var(--color-control-active); }
58+
.day.other { color: var(--color-text-secondary); }
5659
.day.active { background: var(--color-system-accent-100); color: var(--color-text-inversion); }
5760
.day.weekend:not(.active) { background-color: var(--color-shape-highlight-light); }
5861

‎src/scss/menu/dataview/filter.scss‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
.conditionSelect {
8686
.select {
8787
.currentSelected { text-transform: lowercase; }
88+
.icon.arrow { background-image: url('~img/arrow/select/filter.svg') !important; background-position: 50% 50%; background-size: 8px 8px; }
8889
}
8990
}
9091
.conditionSelect:hover,
@@ -104,6 +105,13 @@
104105
}
105106
}
106107
> .section {
108+
&.noBorder::after { display: none; }
109+
110+
.tabSwitch { margin: 0px 16px; background: var(--color-shape-secondary); height: 28px; font-weight: 500; border-radius: 14px; }
111+
.tabSwitch {
112+
.highlight { box-shadow: inset 0px 0px 0px 2px var(--color-shape-secondary); }
113+
}
114+
107115
.item {
108116
.select { border: 0px; padding: 0px; display: block; width: 100%; }
109117
.select:hover, .select.isFocused { background: none; }
@@ -122,14 +130,19 @@
122130
}
123131
}
124132

133+
.calendarSelect {
134+
.head, .body { padding: 0px 16px; }
135+
.day.weekend:not(.active) { background: none; }
136+
}
137+
125138
.textInputWrapper { position: relative; margin: 0px 16px 4px; }
126139
.textInputWrapper {
127140
.input {
128141
padding: 6px 28px 8px 12px; border-radius: 18px; border: 1px solid var(--color-shape-secondary);
129-
background-color: var(--color-shape-highlight-light);
142+
background-color: var(--color-shape-highlight-light); height: 36px;
130143
}
131144
.input.isFocused { border-color: var(--color-shape-primary); background-color: var(--color-shape-highlight-medium); }
132-
.icon.clear { position: absolute; top: 5px; right: 8px; width: 20px; height: 20px; opacity: 0; background-image: url('~img/icon/filter/clear0.svg'); }
145+
.icon.clear { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; opacity: 0; background-image: url('~img/icon/filter/clear0.svg'); }
133146
.icon.clear:hover { background-image: url('~img/icon/filter/clear1.svg'); }
134147
.icon.clear.active { opacity: 1; }
135148
}

‎src/scss/theme/dark/block.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,6 @@
6767
.viewItem {
6868
.icon.arrow { background-image: url('#{$themePath}/arrow/view.svg'); }
6969
}
70-
.icon.btn-filter.on { background-image: url('#{$themePath}/icon/dataview/button/filter1.svg'); }
71-
.icon.btn-sort.on { background-image: url('#{$themePath}/icon/dataview/button/sort1.svg'); }
7270
}
7371

7472
.viewContent.viewGrid,

‎src/scss/theme/dark/common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ html.themeDark {
7777
--color-system-accent-125: #105aef;
7878
--color-system-accent-50: #224c9e;
7979
--color-system-accent-25: #18346e;
80-
--color-system-selection: rgba(24, 163, 241, 0.3);
80+
--color-system-selection: rgba(24, 163, 241, 0.15);
8181

8282
/* Common */
8383

‎src/ts/component/block/dataview/controls.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -447,10 +447,6 @@ const Controls = observer(forwardRef<ControlsRefProps, Props>((props, ref) => {
447447
cn.push('on');
448448
};
449449

450-
if ((item.id == 'filter') && filterCnt) {
451-
cn.push('hasFilter');
452-
};
453-
454450
return (
455451
<Icon
456452
id={elementId}

0 commit comments

Comments
 (0)