Skip to content

Commit 070ce7f

Browse files
kseniya57kseniya57
committed
feat(Gallery): add Gallery component
1 parent 52ef20f commit 070ce7f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1450
-11
lines changed

‎CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@
1313
/src/components/StoreBadge @NikitaCG
1414
/src/components/Stories @darkgenius
1515
/src/components/ConfirmDialog @kseniya57
16+
/src/components/Gallery @kseniya57

‎src/components/FilePreview/FilePreview.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export interface FilePreviewProps extends QAProps {
5353

5454
onClick?: React.MouseEventHandler<HTMLDivElement>;
5555
actions?: FilePreviewActionProps[];
56+
hideName?: boolean;
5657
}
5758

5859
export function FilePreview({
@@ -63,6 +64,7 @@ export function FilePreview({
6364
description,
6465
onClick,
6566
actions,
67+
hideName,
6668
}: FilePreviewProps) {
6769
const id = useUniqId();
6870

@@ -125,9 +127,11 @@ export function FilePreview({
125127
<Icon className={cn('icon-svg')} data={FILE_ICON[type]} size={20} />
126128
</div>
127129
)}
128-
<Text className={cn('name')} color="secondary" ellipsis title={file.name}>
129-
{file.name}
130-
</Text>
130+
{!hideName && (
131+
<Text className={cn('name')} color="secondary" ellipsis title={file.name}>
132+
{file.name}
133+
</Text>
134+
)}
131135
{Boolean(description) && (
132136
<Text
133137
className={cn('description')}

‎src/components/FilePreview/README.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,20 @@ A component for displaying the file.
1212
| className | `string` | | | Class name for the file container |
1313
| onClick | `function` | | | Click handler for the file container |
1414
| [actions](#actions) | `FilePreviewActionProps[]` | | `[]` | Click handler for the file container |
15+
| hideName | `Boolean` | | | Hide the file name |
1516

1617
#### Actions
1718

1819
For a file, you can prescribe actions that will be visible when you hover over it.
1920

20-
| Property | Type | Required | Default | Description |
21-
| ---------- | ------------------------------------------------------------------------------------ | -------- | ------- | ------------------------------ |
22-
| id | `String` | | | Action id |
23-
| icon | `String` | ✓ | | Action icon |
24-
| title | `String` | ✓ | | Action hint on hover |
25-
| onClick | `function` | | | Action click handler |
26-
| href | `String` | | | Action button href |
27-
| extraProps | `ButtonHTMLAttributes<HTMLButtonElement> \| AnchorHTMLAttributes<HTMLAnchorElement>` | | | Additional action button props |
21+
| Property | Type | Required | Default | Description |
22+
| ---------- | ----------------------------------------- | ---------------------------------------- | ------- | ------------------------------ |
23+
| id | `String` | | | Action id |
24+
| icon | `String` | ✓ | | Action icon |
25+
| title | `String` | ✓ | | Action hint on hover |
26+
| onClick | `function` | | | Action click handler |
27+
| href | `String` | | | Action button href |
28+
| extraProps | `ButtonHTMLAttributes<HTMLButtonElement>` | AnchorHTMLAttributes<HTMLAnchorElement>` | | Additional action button props |
2829

2930
```jsx
3031

‎src/components/Gallery/Gallery.scss

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
@use '../variables';
2+
3+
$block: '.#{variables.$ns}gallery';
4+
$filePreviewBlock: '.#{variables.$ns}file-preview';
5+
6+
#{$block} {
7+
--g-modal-margin: 0;
8+
9+
&__content {
10+
display: flex;
11+
flex-direction: column;
12+
13+
width: calc(100vw - 264px);
14+
height: calc(100vh - 56px);
15+
}
16+
17+
&__header {
18+
display: flex;
19+
align-items: start;
20+
21+
padding: var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-2) var(--g-spacing-5);
22+
23+
> * {
24+
flex: 1;
25+
min-width: 0;
26+
}
27+
}
28+
29+
&__navigation {
30+
display: flex;
31+
gap: var(--g-spacing-2);
32+
align-items: center;
33+
justify-content: center;
34+
}
35+
36+
&__actions {
37+
display: flex;
38+
gap: var(--g-spacing-1);
39+
align-items: stretch;
40+
justify-content: flex-end;
41+
}
42+
43+
&__active-item-info {
44+
align-self: stretch;
45+
align-items: center;
46+
display: flex;
47+
}
48+
49+
&__body {
50+
position: relative;
51+
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
56+
flex: 1;
57+
min-height: 0;
58+
59+
padding: 0 var(--g-spacing-2);
60+
}
61+
62+
&__body-navigation-button {
63+
position: absolute;
64+
inset-block: 0 60px;
65+
z-index: 2;
66+
67+
width: 200px;
68+
max-width: 20%;
69+
padding: 0;
70+
margin: 0;
71+
72+
appearance: none;
73+
cursor: pointer;
74+
75+
background-color: transparent;
76+
border: none;
77+
outline: none;
78+
79+
&_direction_left {
80+
inset-inline-start: 0;
81+
82+
cursor:
83+
url('./assets/arrow-left.svg') 2 2,
84+
default;
85+
}
86+
87+
&_direction_right {
88+
inset-inline-end: var(--g-spacing-5);
89+
90+
cursor:
91+
url('./assets/arrow-right.svg') 2 2,
92+
default;
93+
}
94+
}
95+
96+
&__footer {
97+
padding: var(--g-spacing-2) var(--g-spacing-5) var(--g-spacing-4) var(--g-spacing-5);
98+
}
99+
100+
&__preview-list {
101+
display: flex;
102+
gap: var(--g-spacing-2);
103+
align-items: stretch;
104+
overflow: auto hidden;
105+
-ms-overflow-style: none;
106+
scrollbar-width: none;
107+
108+
&::-webkit-scrollbar {
109+
display: none;
110+
}
111+
}
112+
113+
&__preview-list-item {
114+
width: 48px;
115+
min-width: 48px;
116+
height: 48px;
117+
border: 2px solid transparent;
118+
border-radius: var(--g-border-radius-l);
119+
padding: 0;
120+
margin: 0;
121+
122+
appearance: none;
123+
cursor: pointer;
124+
125+
background-color: transparent;
126+
outline: none;
127+
overflow: hidden;
128+
129+
&_selected {
130+
border-color: var(--g-color-line-brand);
131+
}
132+
}
133+
134+
&_mode_full-screen {
135+
overflow: hidden;
136+
137+
--g-modal-border-radius: 0;
138+
139+
#{$block} {
140+
&__content {
141+
width: 100vw;
142+
height: 100vh;
143+
}
144+
145+
&__body {
146+
padding: 0;
147+
}
148+
149+
&__header {
150+
position: absolute;
151+
inset-block-start: 0;
152+
inset-inline: 0;
153+
z-index: 3;
154+
155+
opacity: 0;
156+
157+
&:hover {
158+
opacity: 1;
159+
}
160+
}
161+
162+
&__footer {
163+
position: absolute;
164+
inset-inline: 0;
165+
inset-block-end: 0;
166+
z-index: 1;
167+
168+
opacity: 0;
169+
background-color: rgba(0, 0, 0, 0.45);
170+
171+
&:hover {
172+
opacity: 1;
173+
}
174+
}
175+
}
176+
177+
.g-root_theme_light,
178+
.g-root_theme_light-hc {
179+
#{$block}__header {
180+
background-color: var(--g-color-private-white-450);
181+
}
182+
}
183+
184+
.g-root_theme_dark,
185+
.g-root_theme_dark-hc {
186+
#{$block}__header {
187+
background-color: var(--g-color-private-black-450);
188+
}
189+
}
190+
}
191+
192+
#{$filePreviewBlock}[class] {
193+
width: 100%;
194+
height: 100%;
195+
}
196+
197+
#{$filePreviewBlock}__card {
198+
width: 100%;
199+
min-width: 100%;
200+
height: 100%;
201+
padding: 0;
202+
}
203+
204+
#{$filePreviewBlock}__image,
205+
#{$filePreviewBlock}__icon {
206+
width: 100%;
207+
height: 100%;
208+
}
209+
}

0 commit comments

Comments
 (0)