Skip to content

Commit 80af4c0

Browse files
ra3orbladera3orblade
authored
Merge pull request #1929 from anyproto/feature/JS-7499-advanced-filters
Feature/JS-7499: Advanced filters
2 parents 19727ca + c3d000f commit 80af4c0

File tree

34 files changed

+1592
-311
lines changed

34 files changed

+1592
-311
lines changed

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

Lines changed: 2 additions & 2 deletions
Loading

‎src/img/icon/dataview/filters/advanced.svg‎

Lines changed: 4 additions & 0 deletions
Loading

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

Lines changed: 5 additions & 0 deletions
Loading

‎src/json/text.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"commonError": "Error",
33
"commonOr": "or",
4+
"commonWhere": "Where",
45
"commonMore": "more",
56
"commonOf": "of",
67
"commonTo": "to",
@@ -275,6 +276,7 @@
275276
"pluralPdf": "Pdf|Pdfs",
276277
"pluralBookmark": "Bookmark|Bookmarks",
277278
"pluralAttachment": "Attachment|Attachments",
279+
"pluralRule": "rule|rules",
278280

279281
"electronAboutVersion": "Version:",
280282
"electronAboutDescription": "Anytype is a next generation software that breaks down barriers between applications, gives back privacy and data ownership to users.",
@@ -1749,6 +1751,10 @@
17491751
"menuDataviewViewEditName": "View name",
17501752
"menuDataviewFilterListEmpty": "No filters applied to this View",
17511753
"menuDataviewFilterNewFilter": "New filter",
1754+
"menuDataviewFilterAdvancedAdd": "Add advanced filter",
1755+
"menuDataviewFilterAddRule": "Add rule",
1756+
"menuDataviewFilterDeleteFilter": "Delete filter",
1757+
"menuDataviewFilterTurnIntoGroup": "Turn into group",
17521758
"menuDataviewViewEditView": "Edit view",
17531759

17541760
"menuDataviewUrlActionGo7": "Open in browser",
@@ -2001,6 +2007,9 @@
20012007
"filterConditionInArray": "Has any of",
20022008
"filterConditionNotInArray": "Has none of",
20032009

2010+
"filterOperatorOr": "Or",
2011+
"filterOperatorAnd": "And",
2012+
20042013
"inputWithFileTextUrl": "Paste a link",
20052014

20062015
"toastTemplateCreate": "is saved as a Template!",

‎src/scss/_vars.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@
167167
--menu-width-set: 360px;
168168
--menu-width-large: 408px;
169169
--menu-width-add: 480px;
170+
--menu-width-advanced: 640px;
170171

171172
--editor-width: 704px;
172173
}

‎src/scss/block/common.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@
122122
@import "./dataview/view/calendar";
123123
@import "./dataview/view/graph";
124124
@import "./dataview/view/timeline";
125+
@import "./dataview/filters/group";
125126
@import "./div";
126127
@import "./featured";
127128
@import "./file";

‎src/scss/block/dataview.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,10 @@
149149

150150
.icon { position: relative; transition: $transitionAllCommon; }
151151
.icon.btn-filter { background-image: url('~img/icon/dataview/button/filter0.svg'); }
152-
.icon.btn-filter.on { background-image: url('~img/icon/dataview/button/filter1.svg'); background-color: var(--color-shape-highlight-medium); }
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; }
153156
.icon.btn-sort { background-image: url('~img/icon/dataview/button/sort0.svg'); }
154157
.icon.btn-sort.on { background-image: url('~img/icon/dataview/button/sort1.svg'); }
155158
.icon.btn-settings { background-image: url('~img/icon/dataview/button/settings.svg'); }
@@ -237,13 +240,17 @@
237240
.label.condition { text-transform: lowercase; }
238241

239242
.icon.delete {
240-
display: none; position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
243+
display: none; position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%;
241244
background: var(--color-bg-primary) url('~img/icon/menu/delete.svg') 50% 50% / 12px 12px no-repeat; border: 1px solid var(--color-shape-secondary);
242245
}
243246
.icon.delete:hover { background-color: var(--color-shape-secondary); }
244247
&:hover {
245248
.icon.delete { display: block; }
246249
}
250+
251+
&.isAdvanced {
252+
.icon.advanced { width: 20px; height: 20px; background-image: url('~img/icon/dataview/filters/advanced.svg'); }
253+
}
247254
}
248255

249256
.icon.plus { width: 32px; height: 32px; border-radius: 16px; background-size: 20px; background-position: 50% 50%; background-repeat: no-repeat; }

‎src/scss/block/dataview/filters/group.scss‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@import "~scss/_mixins";
2+
3+
.menus {
4+
.menu.menuDataviewFilterAdvanced {
5+
.group { padding: 0px 0px 8px; }
6+
.group {
7+
.head { padding: 0px 0px 6px 0px; @include text-common; color: var(--color-text-primary); }
8+
.head {
9+
.label { @include text-common; padding: 0px; margin: 0px; color: var(--color-text-primary); }
10+
.select {
11+
border: 0px; font-weight: 500; padding: 2px 20px 2px 6px; display: inline-flex;
12+
background: none; color: var(--color-text-primary); margin-left: -6px; border-radius: 6px;
13+
}
14+
.select.hover, .select:hover { background-color: var(--color-shape-highlight-medium); }
15+
}
16+
17+
.items { padding: 0px 16px; }
18+
.rule { padding-bottom: 8px; }
19+
.rule {
20+
.inner { display: flex; align-items: center; gap: 0px 8px; }
21+
.inner {
22+
.relationSelect,
23+
.conditionSelect,
24+
.valueSelect .select {
25+
border: 1px solid var(--color-shape-secondary); border-radius: 6px; flex-shrink: 0; padding: 6px 24px 6px 10px;
26+
height: 36px;
27+
}
28+
.relationSelect:hover,
29+
.relationSelect.hover,
30+
.conditionSelect:hover,
31+
.conditionSelect.hover,
32+
.valueSelect .select:hover,
33+
.valueSelect .select.hover { background-color: var(--color-shape-tertiary); }
34+
35+
.relationSelect,
36+
.conditionSelect {
37+
.icon.arrow { right: 2px !important; }
38+
}
39+
40+
.relationSelect { position: relative; display: flex; align-items: center; gap: 0px 4px; }
41+
.relationSelect {
42+
.iconObject { flex-shrink: 0; }
43+
.label { @include text-common; padding: 0px; margin: 0px; @include text-overflow-nw; color: var(--color-text-primary); }
44+
}
45+
46+
.conditionSelect { @include text-common; font-weight: 500; }
47+
.conditionSelect {
48+
.currentSelected { line-height: 22px; }
49+
}
50+
51+
.valueSelect { flex-grow: 1; min-width: 0; }
52+
.valueSelect {
53+
&.isSelect,
54+
&.isMultiSelect,
55+
&.isObject,
56+
&.isFile {
57+
height: 36px; border-radius: 6px; padding: 6px 10px; border: 1px solid var(--color-shape-secondary); background-color: var(--color-bg-primary);
58+
}
59+
60+
.input {
61+
padding: 6px 12px 8px 12px; border-radius: 18px; border: 1px solid var(--color-shape-secondary);
62+
background-color: var(--color-shape-highlight-light); height: 36px;
63+
}
64+
.input.isFocused { border-color: var(--color-shape-primary); background-color: var(--color-shape-highlight-medium); }
65+
66+
.optionsList,
67+
.objectsList { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; height: 100%; align-items: center; }
68+
.optionsList,
69+
.objectsList {
70+
.rest { @include text-common; color: var(--color-text-secondary); flex-shrink: 0; white-space: nowrap; }
71+
}
72+
.objectsList {
73+
.flex { gap: 6px; flex-wrap: nowrap; }
74+
}
75+
76+
.dateWrapper {display: flex; flex-wrap: nowrap; gap: 6px; }
77+
.dateWrapper {
78+
.dateInput { flex-grow: 1; }
79+
}
80+
}
81+
82+
.icon.more { flex-shrink: 0; }
83+
}
84+
}
85+
.rule.isReadonly {
86+
.relationSelect, .conditionSelect { opacity: 0.7; }
87+
}
88+
89+
.group {
90+
.items { border-radius: 8px; background-color: var(--color-shape-highlight-light); padding: 8px 16px; }
91+
92+
.items {
93+
.item { padding: 4px 8px; background: none; }
94+
.item::before { width: 100%; left: 0px; }
95+
}
96+
97+
.rule {
98+
.inner {
99+
.relationSelect,
100+
.conditionSelect,
101+
.valueSelect .select { background-color: var(--color-bg-primary); }
102+
103+
.relationSelect:hover,
104+
.relationSelect.hover,
105+
.conditionSelect:hover,
106+
.conditionSelect.hover,
107+
.valueSelect .select:hover,
108+
.valueSelect .select.hover { background-color: var(--color-shape-tertiary); }
109+
}
110+
}
111+
}
112+
113+
.separator {
114+
.inner { margin: 8px 0px; }
115+
}
116+
117+
.item { background: none; }
118+
119+
&.depth0 { padding-top: 8px; padding-bottom: 0px; }
120+
&.depth0 {
121+
> .items {
122+
> .item { padding: 4px 0px; background: none; }
123+
> .item::before { width: calc(100% + 16px); left: -8px; }
124+
}
125+
}
126+
}
127+
}
128+
}

‎src/scss/menu/dataview/common.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
.menu.menuDataviewObjectValues,
99
.menu.menuDataviewOptionList,
1010
.menu.menuDataviewFilterList,
11+
.menu.menuDataviewFilterAdvanced,
1112
.menu.menuDataviewFilterValues,
1213
.menu.menuDataviewSort
1314
{
@@ -22,7 +23,7 @@
2223
.label { color: var(--color-control-active); @include text-small; padding: 0px 16px; font-weight: 500; margin-bottom: 8px; }
2324
}
2425

25-
.menu.menuDataviewFilterList,
26+
.menu.menuDataviewFilterAdvanced,
2627
.menu.menuDataviewSort {
2728
.item {
2829
.icon.dnd { vertical-align: top; height: 40px; background-size: 20px; margin: 0px; }

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

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
@import "~scss/_mixins";
22

33
.menus {
4-
.menu.menuDataviewFilterList { width: var(--menu-width-set); }
54
.menu.menuDataviewFilterList {
6-
.content { overflow: visible !important; padding: 0px; }
5+
.wrap { height: 100%; display: flex; flex-direction: column; }
6+
.items { flex-grow: 1; }
7+
}
8+
9+
.menu.menuDataviewFilterAdvanced { width: var(--menu-width-advanced); }
10+
.menu.menuDataviewFilterAdvanced {
11+
.content { padding-top: 0px; }
712
.wrap { height: 100%; display: flex; flex-direction: column; }
813
.items { flex-grow: 1; }
914

@@ -62,14 +67,17 @@
6267
.icon.dnd { margin-top: 0px; }
6368
}
6469

65-
.bottom { padding: 0px 0px 8px 0px; flex-shrink: 0; }
70+
.bottom { padding: 0px; flex-shrink: 0; margin: 0px 8px; }
6671
.bottom {
67-
.line { margin-top: 0px; }
72+
.item { padding: 4px 8px; }
73+
.item::before { width: 100%; left: 0px; }
6874
}
6975
}
7076

7177
.menu.menuDataviewFilterValues { width: var(--menu-width-value); }
7278
.menu.menuDataviewFilterValues {
79+
.content { padding: 0px; }
80+
7381
.inner {
7482
> .head { display: flex; align-items: center; justify-content: space-between; gap: 0px 4px; padding: 0px 10px; }
7583
> .head {
@@ -89,7 +97,7 @@
8997
.label { @include text-common; color: var(--color-text-primary); font-weight: 500; padding: 0px; margin: 0px; }
9098
.select {
9199
display: flex; border: 0px; padding: 0px; flex-shrink: 0;
92-
background-color: var(--color-bg-primary); color: var(--color-text-secondary);
100+
background: none; color: var(--color-text-secondary);
93101
}
94102
.select {
95103
.icon.arrow { position: static !important; margin: 0px !important; }
@@ -108,6 +116,12 @@
108116
}
109117
}
110118

119+
.item.isSelected {
120+
> .clickable {
121+
> .name { padding-right: 16px; }
122+
}
123+
}
124+
111125
.textInputWrapper { position: relative; margin: 0px 16px 4px; }
112126
.textInputWrapper {
113127
.input {

0 commit comments

Comments
 (0)