Skip to content

Commit 67e6b7d

Browse files
github-actions[bot]CopilotCopilotmkamiishi
authored
[jp-sync] docs(grid): sync JP styling sections to match updated EN samples (#343)
* docs(grid): sync JP styling section updates to match EN samples Updated SCSS code blocks in JP hierarchical grid and tree grid docs to match the simplified styling approach used in the English source. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * docs(grid): sync JP grids_templates styling sections to match updated EN samples * Update text for grid theme integration instructions Refine phrasing for clarity in Japanese documentation. * Enhance advanced filtering dialog styling instructions It looks like this translation does not match the original text. The original refers to styling the header title by extending query-builder-theme and setting the $header-foreground parameter, but the Japanese translation mentions $background, $foreground, and $accent-color instead. Could we revise it to align with the original? --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: mkamiishi <mkamiishi@infragistics.com>
1 parent 4bb5b17 commit 67e6b7d

14 files changed

Lines changed: 277 additions & 251 deletions

‎docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -341,17 +341,14 @@ igxHierarchicalGrid を使用すると、[`Ignite UI for Angular テーマ ラ
341341
これらはテーマの中核となるプロパティです。設定すると、すべてのグリッド パーツと内部コンポーネントがそれらの値からカラーを取得し、グリッド全体で一貫した外観になります。ボタン、アイコン、入力、ドロップダウン、チェックボックス、スクロールバー、チップ、その他のヘルパーコンポーネントなどのネストされたコンポーネントも、統一された外観のためにメインの <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> からスタイル トークンを取得します。
342342

343343
```scss
344-
$custom-theme: grid-theme(
345-
$cell-active-border-color: #ffcd0f,
346-
$cell-selected-background: #6f6f6f,
347-
$row-hover-background: #f8e495,
348-
$row-selected-background: #8d8d8d,
349-
$header-background: #494949,
350-
$header-text-color: #fff,
351-
$expand-icon-color: #ffcd0f,
352-
$expand-icon-hover-color: #e0b710,
353-
$resize-line-color: #ffcd0f,
354-
$row-highlight: #ffcd0f
344+
$background: #292826;
345+
$foreground: #eeece1;
346+
$accent: #ffcd0f;
347+
348+
$custom-grid: grid-theme(
349+
$background: $background,
350+
$foreground: $foreground,
351+
$accent-color: $accent,
355352
);
356353
```
357354

@@ -365,7 +362,7 @@ $custom-theme: grid-theme(
365362

366363
```scss
367364
:host {
368-
@include tokens($custom-theme);
365+
@include tokens($custom-grid);
369366
}
370367
```
371368

‎docs/angular/src/content/jp/components/treegrid/tree-grid.mdx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -301,17 +301,14 @@ Tree Grid は、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass
301301
これらはテーマの中核となるプロパティです。設定すると、すべてのグリッド パーツと内部コンポーネントがそれらの値からカラーを取得し、グリッド全体で一貫した外観になります。ボタン、アイコン、入力、ドロップダウン、チェックボックス、スクロールバー、チップ、その他のヘルパーコンポーネントなどのネストされたコンポーネントも、統一された外観のためにメインの <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> からスタイル トークンを取得します。
302302

303303
```scss
304-
$custom-theme: grid-theme(
305-
$cell-active-border-color: #ffcd0f,
306-
$cell-selected-background: #6f6f6f,
307-
$row-hover-background: #f8e495,
308-
$row-selected-background: #8d8d8d,
309-
$header-background: #494949,
310-
$header-text-color: #fff,
311-
$expand-icon-color: #ffcd0f,
312-
$expand-icon-hover-color: #e0b710,
313-
$resize-line-color: #ffcd0f,
314-
$row-highlight: #ffcd0f
304+
$background: #292826;
305+
$foreground: #eeece1;
306+
$accent: #ffcd0f;
307+
308+
$custom-grid: grid-theme(
309+
$background: $background,
310+
$foreground: $foreground,
311+
$accent-color: $accent,
315312
);
316313
```
317314

@@ -323,7 +320,7 @@ $custom-theme: grid-theme(
323320

324321
```scss
325322
:host {
326-
@include tokens($custom-theme);
323+
@include tokens($custom-grid);
327324
}
328325
```
329326

‎docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,9 @@ ngAfterViewInit(): void {
249249

250250
```scss
251251
$custom-query-builder: query-builder-theme(
252-
$header-foreground: #512da8
252+
$background: #1f2836,
253+
$foreground: #f5f6e6,
254+
$accent-color: #f5f6e6
253255
);
254256
```
255257

@@ -260,15 +262,6 @@ $custom-query-builder: query-builder-theme(
260262
最後にコンポーネントのテーマをアプリケーションに**含めます**。
261263

262264
```scss
263-
$custom-query-builder: query-builder-theme(
264-
$header-foreground: #512da8,
265-
$color-expression-group-and: #eb0000,
266-
$color-expression-group-or: #0000f3,
267-
$subquery-header-background: var(--ig-gray-300),
268-
$subquery-border-color: var(--ig-warn-500),
269-
$subquery-border-radius: rem(4px)
270-
);
271-
272265
igx-advanced-filtering-dialog {
273266
@include tokens($custom-query-builder);
274267
}
@@ -283,15 +276,6 @@ igx-advanced-filtering-dialog {
283276
</DocsAside>
284277

285278
```scss
286-
$custom-query-builder: query-builder-theme(
287-
$header-foreground: #512da8,
288-
$color-expression-group-and: #eb0000,
289-
$color-expression-group-or: #0000f3,
290-
$subquery-header-background: var(--ig-gray-300),
291-
$subquery-border-color: var(--ig-warn-500),
292-
$subquery-border-radius: rem(4px)
293-
);
294-
295279
:host {
296280
::ng-deep {
297281
igx-advanced-filtering-dialog {

‎docs/angular/src/content/jp/grids_templates/cell-editing.mdx‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -574,22 +574,50 @@ $color-palette: palette(
574574
これで、パレットを使用してテーマを定義できます。セルは <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> によってスタイル設定されているため、それを使用して {ComponentName} のテーマを生成できます。
575575

576576
```scss
577-
$custom-grid-theme: grid-theme(
577+
$grid-theme: grid-theme(
578578
$cell-editing-background: $blue,
579+
$cell-editing-foreground: $white,
580+
$cell-active-border-color: $blue,
579581
$cell-edited-value-color: $white,
580-
$cell-active-border-color: $white,
581-
$edit-mode-color: color($color-palette, "secondary", 200)
582+
$edit-mode-color: color($color: "secondary", $variant: 200)
582583
);
583584
```
584585

585586
### テーマを適用
586587

587-
テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。
588+
最後の手順は、カスタム パレットとグリッド テーマを**含める**ことです。
589+
590+
<ComponentBlock for="Grid">
591+
592+
```scss
593+
igx-grid {
594+
@include palette($color-palette);
595+
@include tokens($grid-theme);
596+
}
597+
```
598+
599+
</ComponentBlock>
600+
<ComponentBlock for="TreeGrid">
588601

589602
```scss
590-
@include grid($custom-grid-theme);
603+
igx-tree-grid {
604+
@include palette($color-palette);
605+
@include tokens($grid-theme);
606+
}
591607
```
592608

609+
</ComponentBlock>
610+
<ComponentBlock for="HierarchicalGrid">
611+
612+
```scss
613+
igx-hierarchical-grid {
614+
@include palette($color-palette);
615+
@include tokens($grid-theme);
616+
}
617+
```
618+
619+
</ComponentBlock>
620+
593621
### デモ
594622

595623
上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます ([`input-group`](/input-group.md#スタイル設定)、[`datepicker`](/date-picker.md#スタイル設定) および [`checkbox`](/checkbox.md#スタイル設定))。

‎docs/angular/src/content/jp/grids_templates/column-resizing.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,12 +313,34 @@ column.autosize();
313313

314314
最も簡単な方法は、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を拡張し、`$resize-line-color` パラメーター以外にも多くのパラメータを受け入れます。
315315

316+
<ComponentBlock for="Grid">
317+
316318
``` scss
317319
$custom-grid-theme: grid-theme(
318320
$resize-line-color: #0288d1
319321
);
320322
```
321323

324+
</ComponentBlock>
325+
<ComponentBlock for="TreeGrid">
326+
327+
``` scss
328+
$custom-grid-theme: grid-theme(
329+
$resize-line-color: #dc38e8
330+
);
331+
```
332+
333+
</ComponentBlock>
334+
<ComponentBlock for="HierarchicalGrid">
335+
336+
``` scss
337+
$custom-grid-theme: grid-theme(
338+
$resize-line-color: #07ea07
339+
);
340+
```
341+
342+
</ComponentBlock>
343+
322344
<DocsAside type="info" title="情報">
323345
上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
324346
</DocsAside>

‎docs/angular/src/content/jp/grids_templates/column-selection.mdx‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -120,27 +120,39 @@ API 操作の詳細については、[`API リファレンス`](#api-references)
120120
<ComponentBlock for="TreeGrid">
121121

122122
```scss
123-
$custom-grid-theme: grid-theme(
124-
$row-selected-background: #011627,
125-
$row-selected-text-color: #ecaa53,
126-
$row-selected-hover-background: #011627,
127-
$header-selected-text-color: #ecaa53,
128-
$header-selected-background: #011627,
129-
$expand-icon-color: #ecaa53,
130-
$expand-icon-hover-color: #b64b80
123+
$background: #0b0119;
124+
$foreground: #eeece1;
125+
$accent: #f6b560;
126+
127+
$grid-theme: grid-theme(
128+
$background: $background,
129+
$foreground: $foreground,
130+
$accent-color: $accent,
131+
132+
$row-selected-background: #012724,
133+
$row-selected-text-color: $accent,
134+
$header-selected-text-color: $accent,
135+
$header-selected-background: #012427,
136+
137+
$row-selected-hover-background: hsl(from #012427 h s 10%),
138+
$row-selected-hover-text-color: $accent,
131139
);
132140
```
133141

134142
</ComponentBlock>
135143
<ComponentBlock for="Grid, HierarchicalGrid, PivotGrid">
136144

137145
```scss
146+
$background: #011627;
147+
$accent: #ecaa53;
148+
138149
$custom-grid-theme: grid-theme(
139-
$row-selected-background: #011627,
140-
$row-selected-text-color: #ecaa53,
141-
$row-selected-hover-background: #011627,
142-
$header-selected-text-color: #ecaa53,
143-
$header-selected-background: #011627
150+
$row-selected-background: $background,
151+
$row-selected-text-color: $accent,
152+
$row-selected-hover-background: hsl(from $background h s 10%),
153+
$row-selected-hover-text-color: $accent,
154+
$header-selected-text-color: $accent,
155+
$header-selected-background: $background,
144156
);
145157
```
146158

@@ -152,12 +164,13 @@ $custom-grid-theme: grid-theme(
152164
- **$row-selected-background**- 選択した部分の背景を設定します。
153165
- **$row-selected-text-color** - 選択した部分のテキスト色を設定します。
154166
- **$row-selected-hover-background** - ホバーされたセルまたは複数のセルの色を設定します。
167+
- **$row-selected-hover-text-color** - ホバーされたセルまたは複数のセルのテキスト色を設定します。
155168
- **$header-selected-text-color** - 選択した列ヘッダーのテキスト色を設定します。
156169
- **$header-selected-background** - 選択した列ヘッダーの背景色を設定します。
157170

158171
### CSS 変数の使用
159172

160-
最後にカスタム `igx-grid` テーマを含めます。
173+
最後にカスタム グリッド テーマを**含めます**。
161174

162175
```scss
163176
:host {

0 commit comments

Comments
 (0)