Skip to content

Commit 5df7084

Browse files
lskramarovlskramarov
committed
feat: dropdown styles + logic
1 parent 09203da commit 5df7084

File tree

4 files changed

+316
-39
lines changed

4 files changed

+316
-39
lines changed

‎packages/components/app-switcher/_app-switcher-theme.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,17 @@
88
color: var(--kbq-foreground-contrast-secondary);
99
}
1010
}
11+
12+
.kbq-app-switcher-sites {
13+
& .kbq-dropdown-item {
14+
text-decoration: none;
15+
16+
& .kbq-pressed {
17+
background: var(--kbq-states-background-transparent-active)
18+
19+
}
20+
}
21+
}
1122
}
1223

1324
@mixin kbq-app-switcher-typography() {

‎packages/components/app-switcher/app-switcher.html‎

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -37,49 +37,45 @@
3737
<div class="kbq-app-switcher-group-header__text">Другие площадки</div>
3838
</div>
3939

40-
<kbq-dropdown #appDropdownWithNested="kbqDropdown">
41-
<div kbqDropdownStaticContent>
42-
<button kbq-dropdown-item>Search settings</button>
43-
44-
<button kbq-dropdown-item [kbqDropdownTriggerFor]="appDropdownNested">Headers & footers</button>
45-
<button kbq-dropdown-item [kbqDropdownTriggerFor]="appDropdownNested">Page numbers</button>
46-
47-
<kbq-divider />
48-
49-
<button kbq-dropdown-item [kbqDropdownTriggerFor]="appDropdownNested">Table</button>
50-
51-
<kbq-divider />
52-
53-
<button kbq-dropdown-item [kbqDropdownTriggerFor]="appDropdownNested">Image</button>
54-
55-
<kbq-divider />
56-
57-
<button kbq-dropdown-item [kbqDropdownTriggerFor]="appDropdownNested">Clear formatting</button>
58-
59-
<kbq-divider />
60-
61-
<button kbq-dropdown-item [kbqDropdownTriggerFor]="appDropdownNested">Border & lines</button>
40+
<kbq-dropdown #otherSites="kbqDropdown">
41+
<div kbqDropdownStaticContent class="kbq-app-switcher-sites" (mouseleave)="otherSites.close()">
42+
@for (site of sites; track site) {
43+
<a href=""
44+
kbq-dropdown-item
45+
[kbqDropdownTriggerFor]="dropdownWithSelectedSite"
46+
[class.kbq-app-switcher__sites_main]="site.main"
47+
(mouseenter)="activeSite = site"
48+
>
49+
{{ site.name }}
50+
@if (site.main) {
51+
<kbq-badge [compact]="true">Главная</kbq-badge>
52+
}
53+
</a>
54+
}
6255
</div>
6356
</kbq-dropdown>
6457
</div>
6558
}
6659

67-
<kbq-dropdown #appDropdownNested="kbqDropdown">
68-
<button kbq-dropdown-item>Border and shading</button>
69-
70-
<kbq-divider />
71-
72-
<button kbq-dropdown-item>Normal text</button>
73-
<button kbq-dropdown-item>Title</button>
74-
<button kbq-dropdown-item>Subtitle</button>
75-
<button kbq-dropdown-item>Heading 1</button>
76-
<button kbq-dropdown-item>Heading 2</button>
77-
<button kbq-dropdown-item>Heading 3</button>
78-
<button kbq-dropdown-item>Heading 4</button>
79-
<button kbq-dropdown-item>Heading 5</button>
80-
<button kbq-dropdown-item>Heading 6</button>
81-
82-
<kbq-divider />
60+
<kbq-dropdown #dropdownWithSelectedSite="kbqDropdown" [class]="'kbq-app-switcher-sites'">
61+
@for (app of activeSite?.apps; track app) {
62+
@if (app.apps) {
63+
<a
64+
href=""
65+
kbq-dropdown-item
66+
[kbqDropdownTriggerFor]="dropdownWithGroupedApps"
67+
(mouseenter)="activeApp = app"
68+
>
69+
{{ app.name }}
70+
</a>
71+
} @else {
72+
<a href="" kbq-dropdown-item>{{ app.name }}</a>
73+
}
74+
}
75+
</kbq-dropdown>
8376

84-
<button kbq-dropdown-item>Options</button>
77+
<kbq-dropdown #dropdownWithGroupedApps="kbqDropdown" [class]="'kbq-app-switcher-sites'">
78+
@for (app of activeApp?.apps; track app) {
79+
<a href="" kbq-dropdown-item>{{ app.name }}</a>
80+
}
8581
</kbq-dropdown>

‎packages/components/app-switcher/app-switcher.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,24 @@
2929
justify-content: space-between;
3030
}
3131

32+
.kbq-app-switcher__sites-container {
33+
}
34+
35+
.kbq-app-switcher-sites {
36+
& .kbq-app-switcher__sites_main {
37+
& .kbq-dropdown-item__text {
38+
justify-content: space-between;
39+
display: flex;
40+
flex-direction: row;
41+
}
42+
43+
& .kbq-badge {
44+
align-self: center;
45+
}
46+
}
47+
48+
}
49+
50+
3251
@include kbq-app-switcher-theme();
3352
@include kbq-app-switcher-typography();

‎packages/components/app-switcher/app-switcher.ts‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,9 @@ export class KbqAppSwitcher extends KbqPopUp implements AfterViewInit {
161161

162162
isTrapFocus: boolean = false;
163163

164+
activeSite;
165+
activeApp;
166+
164167
@ViewChild('appSwitcherContent') appSwitcherContent: ElementRef<HTMLDivElement>;
165168
@ViewChild('appSwitcher') elementRef: ElementRef;
166169
@ViewChild(CdkTrapFocus) cdkTrapFocus: CdkTrapFocus;
@@ -214,6 +217,254 @@ export class KbqAppSwitcher extends KbqPopUp implements AfterViewInit {
214217

215218
modelValue: any = '';
216219

220+
sites = [
221+
{
222+
name: 'ЦФО',
223+
apps: [
224+
{
225+
name: 'Byte Sentinel',
226+
caption: 'Byte 001'
227+
},
228+
{
229+
name: 'CryptoWall'
230+
},
231+
{
232+
name: 'Phantom Gate'
233+
},
234+
{
235+
name: 'SentraLock',
236+
caption: 'Lock-sentral-urals'
237+
},
238+
{
239+
name: 'Zero Trace'
240+
}
241+
]
242+
},
243+
{
244+
name: 'СЗФО',
245+
apps: [
246+
{
247+
name: 'Byte Sentinel',
248+
caption: 'Byte 001'
249+
},
250+
{
251+
name: 'CryptoWall',
252+
apps: [
253+
{
254+
name: 'App Instance 1',
255+
caption: 'Instance Alias One'
256+
},
257+
{
258+
name: 'App Instance 2'
259+
},
260+
{
261+
name: 'App Instance 3',
262+
caption: 'Instance Alias Three'
263+
},
264+
{
265+
name: 'App Instance 4',
266+
caption: 'Instance Alias Four'
267+
}
268+
]
269+
},
270+
{
271+
name: 'Phantom Gate'
272+
},
273+
{
274+
name: 'SentraLock',
275+
caption: 'Lock-sentral-urals'
276+
},
277+
{
278+
name: 'Zero Trace'
279+
}
280+
]
281+
},
282+
{
283+
name: 'ЮФО',
284+
apps: [
285+
{
286+
name: 'Byte Sentinel',
287+
caption: 'Byte 001'
288+
},
289+
{
290+
name: 'CryptoWall'
291+
},
292+
{
293+
name: 'Phantom Gate'
294+
},
295+
{
296+
name: 'SentraLock',
297+
caption: 'Lock-sentral-urals'
298+
},
299+
{
300+
name: 'Zero Trace'
301+
}
302+
]
303+
},
304+
{
305+
name: 'СКФО',
306+
apps: [
307+
{
308+
name: 'Byte Sentinel',
309+
caption: 'Byte 001'
310+
},
311+
{
312+
name: 'CryptoWall',
313+
apps: [
314+
{
315+
name: 'App Instance 1',
316+
caption: 'Instance Alias One'
317+
},
318+
{
319+
name: 'App Instance 2'
320+
},
321+
{
322+
name: 'App Instance 3',
323+
caption: 'Instance Alias Three'
324+
},
325+
{
326+
name: 'App Instance 4',
327+
caption: 'Instance Alias Four'
328+
}
329+
]
330+
},
331+
{
332+
name: 'Phantom Gate'
333+
},
334+
{
335+
name: 'SentraLock',
336+
caption: 'Lock-sentral-urals'
337+
},
338+
{
339+
name: 'Zero Trace'
340+
}
341+
],
342+
main: true
343+
},
344+
{
345+
name: 'ПФО',
346+
apps: [
347+
{
348+
name: 'Byte Sentinel',
349+
caption: 'Byte 001'
350+
},
351+
{
352+
name: 'CryptoWall'
353+
},
354+
{
355+
name: 'Phantom Gate'
356+
},
357+
{
358+
name: 'SentraLock',
359+
caption: 'Lock-sentral-urals'
360+
},
361+
{
362+
name: 'Zero Trace'
363+
}
364+
]
365+
},
366+
{
367+
name: 'УФО',
368+
apps: [
369+
{
370+
name: 'Byte Sentinel',
371+
caption: 'Byte 001'
372+
},
373+
{
374+
name: 'CryptoWall',
375+
apps: [
376+
{
377+
name: 'App Instance 1',
378+
caption: 'Instance Alias One'
379+
},
380+
{
381+
name: 'App Instance 2'
382+
},
383+
{
384+
name: 'App Instance 3',
385+
caption: 'Instance Alias Three'
386+
},
387+
{
388+
name: 'App Instance 4',
389+
caption: 'Instance Alias Four'
390+
}
391+
]
392+
},
393+
{
394+
name: 'Phantom Gate'
395+
},
396+
{
397+
name: 'SentraLock',
398+
caption: 'Lock-sentral-urals'
399+
},
400+
{
401+
name: 'Zero Trace'
402+
}
403+
]
404+
},
405+
{
406+
name: 'СФО',
407+
apps: [
408+
{
409+
name: 'Byte Sentinel',
410+
caption: 'Byte 001'
411+
},
412+
{
413+
name: 'CryptoWall'
414+
},
415+
{
416+
name: 'Phantom Gate'
417+
},
418+
{
419+
name: 'SentraLock',
420+
caption: 'Lock-sentral-urals'
421+
},
422+
{
423+
name: 'Zero Trace'
424+
}
425+
]
426+
},
427+
{
428+
name: 'ДФО',
429+
apps: [
430+
{
431+
name: 'Byte Sentinel',
432+
caption: 'Byte 001'
433+
},
434+
{
435+
name: 'CryptoWall',
436+
apps: [
437+
{
438+
name: 'App Instance 1',
439+
caption: 'Instance Alias One'
440+
},
441+
{
442+
name: 'App Instance 2'
443+
},
444+
{
445+
name: 'App Instance 3',
446+
caption: 'Instance Alias Three'
447+
},
448+
{
449+
name: 'App Instance 4',
450+
caption: 'Instance Alias Four'
451+
}
452+
]
453+
},
454+
{
455+
name: 'Phantom Gate'
456+
},
457+
{
458+
name: 'SentraLock',
459+
caption: 'Lock-sentral-urals'
460+
},
461+
{
462+
name: 'Zero Trace'
463+
}
464+
]
465+
}
466+
];
467+
217468
hasChild(_: number, nodeData: FileFlatNode) {
218469
return nodeData.expandable;
219470
}

0 commit comments

Comments
 (0)