Skip to content

Commit a88e98b

Browse files
H7GhosTH7GhosT
committed
Filters with expandable groups first steps
1 parent af87dcf commit a88e98b

16 files changed

Lines changed: 1192 additions & 794 deletions

File tree

‎assets/icons/filter.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/assets/fonts/tgico.svg‎

Lines changed: 263 additions & 262 deletions
Loading

‎public/assets/fonts/tgico.ttf‎

168 Bytes
Binary file not shown.

‎public/assets/fonts/tgico.woff‎

168 Bytes
Binary file not shown.

‎src/components/sidebarRight/tabs/adminRecentActions/filters/config.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {ChannelAdminLogEventsFilter} from '../../../../../layer';
2+
import {LangPackKey} from '../../../../../lib/langPack';
3+
4+
5+
export type FilterGroupConfigItem = {
6+
i18nKey: LangPackKey;
7+
items: {
8+
pFlag: keyof ChannelAdminLogEventsFilter['pFlags'];
9+
i18nKey: LangPackKey;
10+
}[];
11+
};
12+
13+
export const filterGroupsConfig: FilterGroupConfigItem[] = [
14+
{
15+
i18nKey: 'AdminRecentActionsFilters.MembersAndAdmins',
16+
items: [
17+
{
18+
pFlag: 'join',
19+
i18nKey: 'AdminRecentActionsFilters.NewMembers'
20+
},
21+
{
22+
pFlag: 'leave',
23+
i18nKey: 'AdminRecentActionsFilters.MembersLeftGroup'
24+
},
25+
{
26+
pFlag: 'promote',
27+
i18nKey: 'AdminRecentActionsFilters.NewAdminRights'
28+
}
29+
]
30+
},
31+
32+
{
33+
i18nKey: 'AdminRecentActionsFilters.GroupSettings',
34+
items: [
35+
{
36+
pFlag: 'info',
37+
i18nKey: 'AdminRecentActionsFilters.GroupInfo'
38+
},
39+
{
40+
pFlag: 'invites',
41+
i18nKey: 'AdminRecentActionsFilters.InviteLinks'
42+
},
43+
{
44+
pFlag: 'group_call',
45+
i18nKey: 'AdminRecentActionsFilters.VideoChats'
46+
}
47+
]
48+
},
49+
50+
{
51+
i18nKey: 'AdminRecentActionsFilters.Messages',
52+
items: [
53+
{
54+
pFlag: 'delete',
55+
i18nKey: 'AdminRecentActionsFilters.DeletedMessages'
56+
},
57+
{
58+
pFlag: 'edit',
59+
i18nKey: 'AdminRecentActionsFilters.EditedMessages'
60+
},
61+
{
62+
pFlag: 'pinned',
63+
i18nKey: 'AdminRecentActionsFilters.PinnedMessages'
64+
}
65+
]
66+
}
67+
];

‎src/components/sidebarRight/tabs/adminRecentActions/filters/expandableFilterGroup.module.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.Row {
2+
--padding: 12px;
3+
4+
overflow: hidden;
5+
border-radius: 8px;
6+
7+
display: flex;
8+
align-items: center;
9+
cursor: pointer;
10+
11+
&Checkbox {
12+
margin: 0;
13+
display: inline-flex;
14+
15+
&Wrapper {
16+
display: flex;
17+
padding: var(--padding);
18+
}
19+
}
20+
21+
&Separator {
22+
height: 1.5em;
23+
width: 1px;
24+
margin-right: var(--padding);
25+
background-color: rgba(var(--secondary-text-color-rgb), 0.25);
26+
}
27+
28+
&Label {
29+
padding: var(--padding);
30+
padding-left: 0;
31+
flex: 1;
32+
display: flex;
33+
align-items: center;
34+
gap: 8px;
35+
justify-content: space-between;
36+
}
37+
38+
&Offset {
39+
padding-left: 20px;
40+
}
41+
}
42+
43+
.Count {
44+
display: flex;
45+
align-items: center;
46+
gap: 2px;
47+
color: var(--secondary-text-color);
48+
font-size: 14px;
49+
50+
&Arrow {
51+
transition: transform 0.28s ease-in-out;
52+
53+
&.toggled {
54+
transform: rotate(180deg);
55+
}
56+
}
57+
}
58+
59+
.ExpandedItems {
60+
overflow: hidden;
61+
}

‎src/components/sidebarRight/tabs/adminRecentActions/filters/expandableFilterGroup.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {Accessor, createMemo, createSignal, For, JSX, Show} from 'solid-js';
2+
import CheckboxFieldTsx from '../../../../checkboxFieldTsx';
3+
import {IconTsx} from '../../../../iconTsx';
4+
import {HeightTransition} from '../heightTransition';
5+
import styles from './expandableFilterGroup.module.scss';
6+
7+
8+
type Item = {
9+
checked: Accessor<boolean>;
10+
label: JSX.Element;
11+
onClick: () => void;
12+
};
13+
14+
type ExpandableFilterGroupProps = {
15+
mainLabel: JSX.Element;
16+
onMainCheckboxClick: () => void;
17+
checkedCount: number;
18+
items: Item[];
19+
};
20+
21+
export const ExpandableFilterGroup = (props: ExpandableFilterGroupProps) => {
22+
const [isExpanded, setIsExpanded] = createSignal(false);
23+
24+
const isMainChecked = createMemo(() => props.items.every(item => item.checked()));
25+
26+
const onMainCheckboxClick = (e: MouseEvent) => {
27+
e.stopPropagation();
28+
props.onMainCheckboxClick();
29+
};
30+
31+
return (
32+
<>
33+
<div class={`${styles.Row} hover-effect`} onClick={() => setIsExpanded(!isExpanded())}>
34+
<div class={styles.RowCheckboxWrapper} onClick={onMainCheckboxClick}>
35+
<CheckboxFieldTsx class={styles.RowCheckbox} checked={isMainChecked()} />
36+
</div>
37+
<div class={styles.RowSeparator} />
38+
<div class={styles.RowLabel}>
39+
{props.mainLabel}
40+
<div class={styles.Count}>
41+
{props.checkedCount}/{props.items.length}
42+
<IconTsx class={styles.CountArrow} classList={{[styles.toggled]: isExpanded()}} icon='arrowhead' />
43+
</div>
44+
</div>
45+
</div>
46+
47+
<HeightTransition>
48+
<Show when={isExpanded()}>
49+
<div class={styles.ExpandedItems}>
50+
<For each={props.items}>
51+
{item => (
52+
<div class={`${styles.Row} hover-effect`} onClick={item.onClick}>
53+
<div class={styles.RowOffset} />
54+
<div class={styles.RowCheckboxWrapper}>
55+
<CheckboxFieldTsx class={styles.RowCheckbox} checked={item.checked()} />
56+
</div>
57+
<div class={styles.RowLabel}>
58+
{item.label}
59+
</div>
60+
</div>
61+
)}
62+
</For>
63+
</div>
64+
</Show>
65+
</HeightTransition>
66+
</>
67+
)
68+
};

‎src/components/sidebarRight/tabs/adminRecentActions/filters/index.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import {For, Show} from 'solid-js';
2+
import {Transition} from 'solid-transition-group';
3+
import {I18nTsx} from '../../../../../helpers/solid/i18n';
4+
import {filterGroupsConfig} from './config';
5+
import {ExpandableFilterGroup} from './expandableFilterGroup';
6+
import styles from './styles.module.scss';
7+
8+
9+
type FiltersProps = {
10+
open: boolean;
11+
};
12+
13+
export const Filters = (props: FiltersProps) => {
14+
return (
15+
<>
16+
<Transition name='fade'>
17+
<Show when={props.open}>
18+
<div class={styles.Overlay} />
19+
</Show>
20+
</Transition>
21+
22+
<Transition
23+
enterActiveClass={styles.ContainerEnterActive}
24+
exitActiveClass={styles.ContainerExitActive}
25+
enterClass={styles.ContainerEnter}
26+
exitToClass={styles.ContainerExitTo}
27+
>
28+
<Show when={props.open}>
29+
<div class={styles.Container}>
30+
<div class={styles.Card}>
31+
<For each={filterGroupsConfig}>
32+
{group => (
33+
<ExpandableFilterGroup
34+
mainLabel={<I18nTsx key={group.i18nKey} />}
35+
checkedCount={group.items.length}
36+
onMainCheckboxClick={() => {}}
37+
items={group.items.map(item => ({
38+
checked: () => false,
39+
label: <I18nTsx key={item.i18nKey} />,
40+
onClick: () => {}
41+
}))}
42+
/>
43+
)}
44+
</For>
45+
</div>
46+
</div>
47+
</Show>
48+
</Transition>
49+
</>
50+
);
51+
};
52+
53+
54+
/*
55+
pFlags: Partial<{
56+
join?: true,
57+
leave?: true,
58+
invite?: true,
59+
ban?: true,
60+
unban?: true,
61+
kick?: true,
62+
unkick?: true,
63+
promote?: true,
64+
demote?: true,
65+
info?: true,
66+
settings?: true,
67+
pinned?: true,
68+
edit?: true,
69+
delete?: true,
70+
group_call?: true,
71+
invites?: true,
72+
send?: true,
73+
forums?: true,
74+
sub_extend?: true,
75+
}>
76+
77+
join: 'AdminRecentActionsFilters.NewMembers'
78+
leave: 'AdminRecentActionsFilters.MembersLeftGroup'
79+
80+
promote: 'AdminRecentActionsFilters.NewAdminRights'
81+
82+
info: 'AdminRecentActionsFilters.GroupInfo'
83+
invites: 'AdminRecentActionsFilters.InviteLinks'
84+
group_call: 'AdminRecentActionsFilters.VideoChats'
85+
86+
delete: 'AdminRecentActionsFilters.DeletedMessages'
87+
edit: 'AdminRecentActionsFilters.EditedMessages'
88+
pinned: 'AdminRecentActionsFilters.PinnedMessages'
89+
90+
*/

‎src/components/sidebarRight/tabs/adminRecentActions/filters/styles.module.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.Container {
2+
position: absolute;
3+
z-index: 2;
4+
5+
--padding: 12px;
6+
--padding-bottom: 64px;
7+
8+
padding: var(--padding);
9+
padding-bottom: var(--padding-bottom);
10+
top: 0;
11+
left: 0;
12+
right: 0;
13+
14+
/* height: 340px; */
15+
max-height: 100%;
16+
17+
--start-color: rgba(0, 0, 0, 0.15);
18+
/* --start-color: var(--background-color); */
19+
background-image: linear-gradient(to bottom, var(--start-color) calc(100% - var(--padding-bottom)), transparent);
20+
21+
:global(.night) & {
22+
--start-color: rgba(0, 0, 0, 0.35);
23+
}
24+
25+
&EnterActive, &ExitActive {
26+
transition: opacity 0.1s ease-in-out, transform 0.16s ease-in-out;
27+
}
28+
29+
&Enter, &ExitTo {
30+
opacity: 0;
31+
transform: translateY(-16px) scale(1.02);
32+
}
33+
}
34+
35+
.Card {
36+
height: 100%;
37+
38+
padding: 12px;
39+
40+
background-color: var(--surface-color);
41+
border-radius: 16px;
42+
}
43+
44+
.Overlay {
45+
position: absolute;
46+
z-index: 1;
47+
inset: 0;
48+
}
49+
50+
.TopLevelCheckbox {
51+
background-color: red;
52+
}

0 commit comments

Comments
 (0)