Skip to content

Commit a0dd7a7

Browse files
artembelikartembelik
committed
chore(actions-panel): updated examples and dev application
1 parent fec14b4 commit a0dd7a7

File tree

6 files changed

+141
-192
lines changed

6 files changed

+141
-192
lines changed

‎apps/docs/src/styles/_examples.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@
99
&.docs-live-example__example_top-bar-overflow {
1010
padding: var(--kbq-size-3xl);
1111
}
12+
13+
&.docs-live-example__example_actions-panel-overview {
14+
padding: 0;
15+
}
1216
}

‎packages/components-dev/actions-panel/styles.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
dev-app {
22
max-width: 608px;
3-
min-height: 2000px;
43
display: block;
5-
border: 1px solid cyan;
64
}

‎packages/docs-examples/components/actions-panel/actions-panel-adaptive/actions-panel-adaptive-example.ts

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,12 @@ type ExampleAction = {
3535
<button (click)="open()" kbq-button>open</button>
3636
3737
<ng-template let-data>
38-
<div class="example-counter">Selected: {{ data.length }}</div>
39-
<kbq-divider class="example-divider-vertical" [vertical]="true" />
4038
<div #kbqOverflowItems="kbqOverflowItems" kbqOverflowItems>
39+
<div [kbqOverflowItem]="action.Counter" order="99">
40+
<div class="example-counter">Selected: {{ data.length }}</div>
41+
<kbq-divider class="example-divider-vertical" [vertical]="true" />
42+
</div>
43+
4144
@for (action of actions; track action.id) {
4245
<button
4346
[kbqOverflowItem]="action.id"
@@ -50,25 +53,28 @@ type ExampleAction = {
5053
{{ action.id }}
5154
</button>
5255
}
53-
<div kbqOverflowItemsResult>
54-
<button [kbqDropdownTriggerFor]="dropdown" color="contrast" kbq-button>
56+
57+
@let hiddenItemIDs = kbqOverflowItems.hiddenItemIDs();
58+
<!-- ignores when only action.Counter is hidden -->
59+
@if (hiddenItemIDs.size > 1) {
60+
<button [kbqDropdownTriggerFor]="dropdown" kbqOverflowItemsResult color="contrast" kbq-button>
5561
<i kbq-icon="kbq-ellipsis-vertical_16"></i>
5662
</button>
63+
}
5764
58-
<kbq-dropdown #dropdown="kbqDropdown">
59-
<div class="example-counter-dropdown">Selected: {{ data.length }}</div>
60-
<kbq-divider />
61-
62-
@for (action of actions; track action.id) {
63-
@if (kbqOverflowItems.hiddenItemIDs().has(action.id)) {
64-
<button (click)="onAction(action)" kbq-dropdown-item>
65-
<i [class]="action.icon" kbq-icon></i>
66-
{{ action.id }}
67-
</button>
68-
}
65+
<kbq-dropdown #dropdown="kbqDropdown">
66+
<div class="example-counter-dropdown">Selected: {{ data.length }}</div>
67+
<kbq-divider />
68+
69+
@for (action of actions; track action.id) {
70+
@if (hiddenItemIDs.has(action.id)) {
71+
<button (click)="onAction(action)" kbq-dropdown-item>
72+
<i [class]="action.icon" kbq-icon></i>
73+
{{ action.id }}
74+
</button>
6975
}
70-
</kbq-dropdown>
71-
</div>
76+
}
77+
</kbq-dropdown>
7278
</div>
7379
</ng-template>
7480
`,
@@ -78,18 +84,12 @@ type ExampleAction = {
7884
align-items: center;
7985
justify-content: center;
8086
height: 64px;
81-
resize: horizontal;
82-
max-width: 100%;
83-
min-width: 110px;
8487
overflow: hidden;
85-
container-type: inline-size;
88+
}
8689
87-
@container (width < 498px) {
88-
.example-counter,
89-
.example-counter + .example-divider-vertical {
90-
display: none;
91-
}
92-
}
90+
.kbq-overflow-item {
91+
display: flex;
92+
align-items: center;
9393
}
9494
9595
.example-counter {
@@ -113,35 +113,29 @@ type ExampleAction = {
113113
height: var(--kbq-actions-panel-vertical-divider-height) !important;
114114
margin: var(--kbq-actions-panel-vertical-divider-margin);
115115
}
116-
117-
.kbq-button,
118-
.kbq-dropdown-trigger {
119-
margin: var(--kbq-size-border-width);
120-
}
121116
`,
122117
changeDetection: ChangeDetectionStrategy.OnPush
123118
})
124119
export class ExampleActionsPanel {
125-
readonly actions: ExampleAction[] = [
120+
protected readonly actions: ExampleAction[] = [
126121
{ id: 'Responsible', icon: 'kbq-user_16' },
127122
{ id: 'Status', icon: 'kbq-arrow-right-s_16' },
128123
{ id: 'Archive', icon: 'kbq-box-archive-arrow-down_16' }
129124
];
130-
readonly actionsPanel = inject(KbqActionsPanel, { self: true });
131-
readonly elementRef = inject(ElementRef);
132-
readonly templateRef = viewChild.required(TemplateRef);
133-
actionsPanelRef: KbqActionsPanelRef | null;
134-
readonly toast = inject(KbqToastService);
125+
protected readonly action = { Counter: 'counter' };
126+
127+
private readonly actionsPanel = inject(KbqActionsPanel, { self: true });
128+
private readonly elementRef = inject(ElementRef);
129+
private readonly templateRef = viewChild.required(TemplateRef);
130+
private actionsPanelRef: KbqActionsPanelRef | null;
131+
private readonly toast = inject(KbqToastService);
135132

136133
constructor() {
137134
afterNextRender(() => this.open());
138135
}
139136

140-
open(): void {
137+
protected open(): void {
141138
this.actionsPanelRef = this.actionsPanel.open(this.templateRef(), {
142-
width: '100%',
143-
maxWidth: 498,
144-
minWidth: 106,
145139
data: { length: 5 },
146140
overlayContainer: this.elementRef
147141
});
@@ -156,7 +150,7 @@ export class ExampleActionsPanel {
156150
});
157151
}
158152

159-
onAction(action: ExampleAction): void {
153+
protected onAction(action: ExampleAction): void {
160154
this.toast.show({ title: `Action initiated ${action.id}` });
161155
}
162156
}
@@ -170,15 +164,20 @@ export class ExampleActionsPanel {
170164
selector: 'actions-panel-adaptive-example',
171165
template: `
172166
<div>First, the number of records is hidden</div>
173-
<example-actions-panel [style.width.px]="395" />
167+
<example-actions-panel [style.width.px]="450" />
174168
175169
<div>Then, the actions are hidden under the dropdown menu</div>
176-
<example-actions-panel [style.width.px]="329" />
170+
<example-actions-panel [style.width.px]="370" />
177171
178172
<div>Everything is hidden under the dropdown menu</div>
179-
<example-actions-panel [style.width.px]="106" />
173+
<example-actions-panel [style.width.px]="210" />
180174
`,
181175
styles: `
176+
:host {
177+
min-width: 480px;
178+
display: block;
179+
}
180+
182181
div {
183182
color: var(--kbq-foreground-contrast-secondary);
184183
margin: var(--kbq-size-s) var(--kbq-size-s) 0;

‎packages/docs-examples/components/actions-panel/actions-panel-close/actions-panel-close-example.ts

Lines changed: 8 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
} from '@angular/core';
1010
import { KbqActionsPanel, KbqActionsPanelRef } from '@koobiq/components/actions-panel';
1111
import { KbqButtonModule } from '@koobiq/components/button';
12-
import { KbqDividerModule } from '@koobiq/components/divider';
1312
import { KbqIconModule } from '@koobiq/components/icon';
1413
import { KbqToastService } from '@koobiq/components/toast';
1514

@@ -18,19 +17,13 @@ import { KbqToastService } from '@koobiq/components/toast';
1817
*/
1918
@Component({
2019
standalone: true,
21-
imports: [
22-
KbqButtonModule,
23-
KbqIconModule,
24-
KbqDividerModule
25-
],
20+
imports: [KbqButtonModule, KbqIconModule],
2621
providers: [KbqActionsPanel],
2722
selector: 'actions-panel-close-example',
2823
template: `
2924
<button (click)="open()" kbq-button>open</button>
3025
3126
<ng-template let-data>
32-
<div class="example-content">Selected: {{ data.length }}</div>
33-
<kbq-divider class="example-divider-vertical" [vertical]="true" />
3427
<button (click)="onAction('Execute and close')" color="contrast" kbq-button>
3528
<i kbq-icon="kbq-user_16"></i>
3629
Execute and close
@@ -45,42 +38,22 @@ import { KbqToastService } from '@koobiq/components/toast';
4538
height: 64px;
4639
overflow: hidden;
4740
}
48-
49-
.example-content {
50-
display: flex;
51-
align-items: center;
52-
margin: 0 var(--kbq-size-m);
53-
user-select: none;
54-
white-space: nowrap;
55-
}
56-
57-
.example-divider-vertical {
58-
background-color: var(--kbq-actions-panel-vertical-divider-background-color);
59-
height: var(--kbq-actions-panel-vertical-divider-height) !important;
60-
margin: var(--kbq-actions-panel-vertical-divider-margin);
61-
}
62-
63-
.kbq-button,
64-
.kbq-dropdown-trigger {
65-
margin: var(--kbq-size-border-width);
66-
}
6741
`,
6842
changeDetection: ChangeDetectionStrategy.OnPush
6943
})
7044
export class ActionsPanelCloseExample {
71-
readonly actionsPanel = inject(KbqActionsPanel, { self: true });
72-
readonly elementRef = inject(ElementRef);
73-
readonly templateRef = viewChild.required(TemplateRef);
74-
readonly toast = inject(KbqToastService);
75-
actionsPanelRef: KbqActionsPanelRef | null;
45+
private readonly actionsPanel = inject(KbqActionsPanel, { self: true });
46+
private readonly elementRef = inject(ElementRef);
47+
private readonly templateRef = viewChild.required(TemplateRef);
48+
private readonly toast = inject(KbqToastService);
49+
private actionsPanelRef: KbqActionsPanelRef | null;
7650

7751
constructor() {
7852
afterNextRender(() => this.open());
7953
}
8054

81-
open(): void {
55+
protected open(): void {
8256
this.actionsPanelRef = this.actionsPanel.open(this.templateRef(), {
83-
minWidth: 346,
8457
data: { length: 3 },
8558
overlayContainer: this.elementRef
8659
});
@@ -95,7 +68,7 @@ export class ActionsPanelCloseExample {
9568
});
9669
}
9770

98-
onAction(action: string): void {
71+
protected onAction(action: string): void {
9972
this.toast.show({ title: `Action initiated ${action}` });
10073
this.actionsPanelRef?.close();
10174
}

0 commit comments

Comments
 (0)