Skip to content

feat(dl): column resizing (#DS-4609) #1895

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
artembelik wants to merge 1 commit into
base: main
Choose a base branch
from
+924 −194
Open

feat(dl): column resizing (#DS-4609) #1895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions packages/components-dev/dl/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { ThemePalette } from '@koobiq/components/core';
import { KbqDlModule } from '@koobiq/components/dl';
import { DlOverviewExample } from 'packages/docs-examples/components/dl/dl-overview/dl-overview-example';
import { DlResizableExample } from 'packages/docs-examples/components/dl/dl-resizable/dl-resizable-example';
import { DevThemeToggle } from '../theme-toggle';

@Component({
selector: 'dev-examples',
imports: [DlResizableExample, DlOverviewExample],
template: `
<dl-resizable-example />
<hr />
<dl-overview-example />
<hr />
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DevDocsExamples {}

@Component({
selector: 'dev-app',
imports: [KbqDlModule],
imports: [DevDocsExamples, DevThemeToggle],
templateUrl: './template.html',
styleUrl: './styles.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class DevApp {
readonly themePalette = ThemePalette;
}
export class DevApp {}
4 changes: 0 additions & 4 deletions packages/components-dev/dl/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,3 @@ dev-app {
max-width: 600px;
padding: var(--kbq-size-s);
}

.kbq-dl {
border: 1px solid var(--kbq-palette-cyan-50);
}
101 changes: 3 additions & 98 deletions packages/components-dev/dl/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,5 @@
<kbq-dl [minWidth]="590">
<kbq-dt>Тип инцидента</kbq-dt>
<kbq-dd>Вредоносное ПО</kbq-dd>
<dev-theme-toggle />

<kbq-dt>Идентификатор</kbq-dt>
<kbq-dd>INC-2022-125-78253</kbq-dd>
<hr />

<kbq-dt>Статус</kbq-dt>
<kbq-dd>Новый</kbq-dd>

<kbq-dt>Ответственный</kbq-dt>
<kbq-dd>Иванов Иван</kbq-dd>

<kbq-dt>Описание</kbq-dt>
<kbq-dd>
Здесь нужно добавить очень длинное описание, но Я не знаю, что еще можно сюда добавить, поэтому Вы видите этот
текст.
</kbq-dd>
</kbq-dl>

<br />

<kbq-dl [minWidth]="590" [wide]="true">
<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>
</kbq-dl>

<br />

<kbq-dl [vertical]="true">
<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>
</kbq-dl>

<br />

<kbq-dl [vertical]="false">
<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>

<kbq-dt>File</kbq-dt>
<kbq-dd>125 КБ</kbq-dd>
</kbq-dl>

<br />

<kbq-dl [minWidth]="590">
<kbq-dt>Never show GUIDs</kbq-dt>
<kbq-dd>f3a9583e-346c-4a52-9ddb-252fd34ea9f0</kbq-dd>
</kbq-dl>

<br />

<kbq-dl [minWidth]="590">
<kbq-dt>Description</kbq-dt>
<kbq-dd>
In order for your npm command line client to work with Artifactory you will firstly need to set the relevant
authentication. For getting authentication details run the following command
</kbq-dd>
</kbq-dl>

<br />

<kbq-dl style="width: 590px" [minWidth]="600">
<kbq-dt>Description</kbq-dt>
<kbq-dd>This should be rendered in vertical mode</kbq-dd>
</kbq-dl>
<dev-examples />
3 changes: 2 additions & 1 deletion packages/components/core/locales/en-US.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export const enUSLocaleData = {
nextMonth: 'Next month',
clear: 'Clear',
showPassword: 'Show password',
hidePassword: 'Hide password'
hidePassword: 'Hide password',
resizeColumns: 'Resize columns'
} satisfies KbqA11yLocaleConfiguration,
select: { hiddenItemsText: '+{{ number }}', selectAll: 'Select all' } satisfies KbqSelectLocaleConfiguration,
datepicker: {
Expand Down
3 changes: 2 additions & 1 deletion packages/components/core/locales/es-LA.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export const esLALocaleData = {
nextMonth: 'Mes siguiente',
clear: 'Borrar',
showPassword: 'Mostrar la contraseña',
hidePassword: 'Ocultar la contraseña'
hidePassword: 'Ocultar la contraseña',
resizeColumns: 'Redimensionar columnas'
} satisfies KbqA11yLocaleConfiguration,
select: {
hiddenItemsText: '+{{ number }}',
Expand Down
3 changes: 2 additions & 1 deletion packages/components/core/locales/pt-BR.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export const ptBRLocaleData = {
nextMonth: 'Próximo mês',
clear: 'Apagar',
showPassword: 'Mostrar a senha',
hidePassword: 'Ocultar a senha'
hidePassword: 'Ocultar a senha',
resizeColumns: 'Redimensionar colunas'
} satisfies KbqA11yLocaleConfiguration,
select: {
hiddenItemsText: '+{{ number }}',
Expand Down
3 changes: 2 additions & 1 deletion packages/components/core/locales/ru-RU.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export const ruRULocaleData = {
nextMonth: 'Следующий месяц',
clear: 'Очистить',
showPassword: 'Показать пароль',
hidePassword: 'Скрыть пароль'
hidePassword: 'Скрыть пароль',
resizeColumns: 'Изменить ширину колонок'
} satisfies KbqA11yLocaleConfiguration,
select: { hiddenItemsText: '+{{ number }}', selectAll: 'Выбрать все' } satisfies KbqSelectLocaleConfiguration,
datepicker: {
Expand Down
3 changes: 2 additions & 1 deletion packages/components/core/locales/tk-TM.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export const tkTMLocaleData = {
nextMonth: 'Indiki aý',
clear: 'Arassala',
showPassword: 'Paroly görkez',
hidePassword: 'Paroly gizle'
hidePassword: 'Paroly gizle',
resizeColumns: 'Sütünleriň giňligini üýtget'
} satisfies KbqA11yLocaleConfiguration,
select: {
hiddenItemsText: '+{{ number }}',
Expand Down
2 changes: 2 additions & 0 deletions packages/components/core/locales/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export type KbqA11yLocaleConfiguration = {
showPassword: string;
/** Password form field button that masks the password. */
hidePassword: string;
/** Separator that resizes the columns of a description list. */
resizeColumns: string;
};

/** Locale configuration for `KbqCodeBlockModule`. */
Expand Down
8 changes: 8 additions & 0 deletions packages/components/dl/dl-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,15 @@
--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);
--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);
--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);
--kbq-description-list-resizer-line-width: 1px;
--kbq-description-list-resizer-hit-area-width: calc(
2 * var(--kbq-size-s) + var(--kbq-description-list-resizer-line-width)
);
--kbq-description-list-resizer-transition-duration: 0.2s;
/* THEME TOKENS */
--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
--kbq-description-list-description-color: var(--kbq-foreground-contrast);
--kbq-description-list-resizer-color: var(--kbq-line-contrast-less);
--kbq-description-list-resizer-state-hover-color: var(--kbq-line-contrast-fade);
--kbq-description-list-resizer-state-active-color: var(--kbq-states-line-focus-theme);
}
Loading
Loading