[KE1.6.12/2.0.4] WebUI 変更点まとめ
# UI 変更点まとめ
KE 1.6.12  および 2.0.4 において JS ライブラリのアップデートを行なっており、それに伴い全体的に WebUI に変更を加えています。ここでは WebUI の全体的な変更点についてまとめて記します。

## JS ライブラリの更新
アップデートした JS ライブラリは以下のとおりです。太字のものは、アップデート自体が重要またはアップデートによる影響が大きい（ために Kompira 側の実装を修正・調整した）ものを示しています。

- **bootstrap: 4.5.2 (END OF LIFE) ⇒ 5.3.3**
- (REMOVED) bootstrap-select-1.13.16 (boostrap 5 is not yet supported)
- **select2-bootstrap4-theme: 1.3.4 ⇒ select2-bootstrap-5-theme: 1.3.0**
- **tempus-dominus: 4-53.0 (NO LONGER SUPPORTED) ⇒ 6.9.4**
- (ADD) popper-2.11.8
- **moment.js: 2.27.0 (VULNERABLE) ⇒ 2.30.1**
- jquery: 3.5.1 ⇒ 3.7.1
- jquery-ui: 1.12.1 ⇒ 1.14.1
- dependsOn: 1.0.1 ⇒ 1.5.1
- js-cookie: 2.2.0 ⇒ 3.0.5
- jsrender: 1.0.6 ⇒ 1.0.15
- jstree: 3.3.8 ⇒ 3.3.17
- codemirror: 5.48.0 ⇒ 5.56.18

## 全体的な変化
- レイアウト
    - マージン・パディング・要素のサイズなどのレイアウト細部については、全体的に若干変化があります。
    - レイアウトが破綻しにくいようにいくつかの箇所でテキストの折り返しを許可しました。
    - その他のページレイアウト変更については後述します。
- カラーリング
    - 全体的に色見に変化があります。
    - カスタムスタイルをベースにした配色の適用範囲が拡大しています。
- フォント
    - デフォルトフォントが変更されているため、全体的に変化があります。

## ページレイアウト
### 全体
- ページヘッダの要素（タイトル、検索フォーム、ステータス絞り込み、ページネータなど）の配置方法を見直しました。
    - 画面サイズを変更（主に小さく）してもレイアウトが破綻しにくくなりました。
- 画面が小さいとき（幅が575pxまで）のレイアウトを見直しました（スマホでもある程度操作しやすくなりました）。
    - 全体のフォントサイズを縮小します。
        ![image.png](https://image.docbase.io/uploads/8f4b0c62-def5-49e2-8a14-f16ccb6131b6.png =WxH)
    - オブジェクト詳細画面などで右側に表示されるプロパティ情報を画面下部にレイアウトされるようにしました。
        ![image.png](https://image.docbase.io/uploads/7ec74eeb-d187-4985-9560-e3a25c1dbca2.png =WxH)

### オブジェクト一覧
- 選択しているオブジェクトの背景色を変更しました。

![image.png](https://image.docbase.io/uploads/7afc7e25-eba2-4d34-b5ac-b17040b2966d.png =WxH)

### オブジェクト検索
- 検索条件入力フォームが画面幅で表示されるようになりました。

![image.png](https://image.docbase.io/uploads/a4b2e6fd-22a2-4b8f-b58e-daa2bcc13250.png =WxH)

### インシデント一覧
- 検索フォームの位置を変更しました。（検索フォームを右上に配置するようにして、他の画面と揃えました）

![image.png](https://image.docbase.io/uploads/2f7ae438-b65a-4e0c-88c9-1178884467ce.png =WxH)

### プロセス一覧
- 日付範囲指定と検索フォームの位置を変更しました。（検索フォームを右上に配置するようにして、他の画面と揃えました）

![image.png](https://image.docbase.io/uploads/554e26ce-77eb-4fc5-ac74-49dae561ee9f.png =WxH)

- [KE2.0のみ]「クラッシュ」状態のプロセスも色付けするようにしました。

![image.png](https://image.docbase.io/uploads/9c5b0ccb-c88d-4e56-8d67-11242b80e0ba.png =WxH)


### ユーザ一覧／グループ一覧
- ページネータのレイアウトを変更しました。
- 新規作成の名称入力フォームにプレースホルダ（「ユーザの作成」および「グループの作成」）を表示するようになりました。

![image.png](https://image.docbase.io/uploads/011202e4-2015-4789-b96a-b3fc159ac1c6.png =WxH)

## フィールド
### 値がない場合の表示
- （Object 以外の）フィールドに値がない場合に `None` または空白で表示されていましたが、フィールド型ごとに以下のように表示するように変更しました。
    - Object フィールド: `No object` または `オブジェクトがありません` （従来通り）
    - Fileフィールド: `No file` または `ファイルがありません`
    - Array\<T>/Dictionary\<T>: `No item` または `要素がありません` （要素数が0の場合）
    - その他のフィールド: `No value` または `値がありません`

![image.png](https://image.docbase.io/uploads/8e6dfb77-9af3-4afa-a9b5-a68c80b4fbd2.png =WxH)

![image.png](https://image.docbase.io/uploads/12ef59dc-e187-4e2c-b51c-70b10ae51f68.png =WxH)

### Booleanフィールド
- Boolean フィールドが Python 表記のまま `True` / `False` と表示されていましたが、以下のように表示するように変更しました。
    - 真の場合: `true`
    - 偽の場合: `false`

![image.png](https://image.docbase.io/uploads/304037d7-3681-4dd0-9fc6-f82dd3b99506.png =WxH)

### Fileフィールド
- 表示時の File フィールドに以下の変更があります。
    - 添付されているファイルのサイズをファイル名の横に表示するようになりました。
        ![image.png](https://image.docbase.io/uploads/adabdf82-c490-4fb2-9835-4bbe555aed5c.png =WxH)
    -  添付ファイルの `<A>` タグに `download` 属性を追加しました（タブで開かず直接ダウンロードします）。

- 編集時の File フィールドに以下の変更があります。
    - 現在のファイルと変更するファイルを表示する UI のデザインを見直しました。
        ![image.png](https://image.docbase.io/uploads/c5ca5391-4f38-4370-92e1-ebce8b10524f.png =WxH)
    - 変更するファイルを選択したときに、「現在のファイルのクリア」がチェックされていた場合にチェックを解除するようにしました（ファイルの変更とクリアを両方指定するとエラーになるため）。また、「現在のファイルのクリア」を押せないように無効化するようにしました。
    - 選択したファイルがサイズ制限 (1.0 GB) を超える場合の警告に、ファイル名を表示するようになりました（どのファイルを選択したのか分からなくなるのを改善）。また、サイズ制限調査の警告メッセージがフィールドごとに個別に表示されるようになりました。
        ![image.png](https://image.docbase.io/uploads/d494955e-59d4-444d-9c26-29e105e3b249.png =WxH)

### Datetime/Date/Timeフィールド
- ピッカーライブラリが tempus-dominos6 になり、Datetime ピッカー、Date ピッカー、Time ピッカー、それぞれの UI が変わりました。Datetime ピッカーについては Date と Time を横に並べて表示する UI になっています。
    - Datetime ピッカー
![image.png](https://image.docbase.io/uploads/f06c45ee-a591-4a48-b89f-0223f326105b.png =WxH)
    - Date ピッカー
![image.png](https://image.docbase.io/uploads/a6677f93-338a-4fa9-96e7-1816286aa665.png =WxH)
    - Time ピッカー
![image.png](https://image.docbase.io/uploads/3b417698-72f2-43be-a955-d84f1279b137.png =WxH)

- Array\<T> および Dictionary\<T> の場合でも各ピッカーが利用できるようなりました。

## その他
- HTML 構造
    - 各所に細かい差分があります。HTML 構造に依存したスクレイピング処理は失敗する場合があります。
- CSS 構造
    - 各所に細かい差分があります。
    - CSS 定義ファイルの構成にも変更があります（Codemirror 用 CSS ファイルの分離など）。
    - `px` 指定を `rem` など相対サイズ指定への置き換えを進めています。
    - カスタムスタイルの設定値を CSS のカスタムプロパティとして、`var()` で参照するように進めています。
    - 配色についてカスタムプロパティと `color-mix()` による混色による定義を進めています。