Merge pull request #13 from toka7290/1.4.0

1.4.0

.gitignore

@@ -1,2 +1,3 @@
 .history
-server.py
+server.py
+.jsoptimize

changelog

@@ -104,9 +104,19 @@
 - 情報更新タイミングを変更
 - タッチデバイスはみ出し修正
 - セキュリティの問題修正
+1.4.0
+- 実表示プレビュー機能の追加
+- エラー箇所のフォームをハイライトするように
+- エラー判定のタイミング変更
+- Modules tab の選択制限バグの修正
+- checkboxのindeterminate表示の追加
+- ドラッグアンドドロップの領域を全画面に拡大
+- エスケープ文字を正しく扱えるように
+- about画面の追加
+- UIの改良
+- クレジット表記の追加
+- html内部の最適化
+- js 内部コードの軽量化、最適化
+
 TODO
-- 拡張機能
-- 色文字のプレビュー実装
-- 実表示プレビュー実装
-- 壊れたjson抽出
-- エラー箇所のフォームをハイライト
+- 壊れたjson抽出

css/color.css

@@ -23,14 +23,22 @@
 
   --color_text: #000;
   --color_input_text: #000;
-  --color-help_content_text: #000;
-  --color-help_content_border: #555;
+  --color_help_content_text: #000;
+  --color_help_content_border: #555;
   --color_disabled_text: #808080;
   --color_header_text: #fff;
   --color_selected_tab: #fff;
-  --color-help_content: #fff;
+  --color_help_content: #fff;
+  --color_focus_text: #fff;
+  --color_focus_foreground: rgba(0, 0, 0, 0.75);
+  --color_focus_background: rgba(0, 0, 0, 0.25);
+  --color_display_preview_background: rgba(0, 0, 0, 0.75);
 
   --color_delete_hover: #d81b60;
+  --color_error: #f44336;
+  --color_error_background: #ffebee;
+  --color_warning: #ffeb3b;
+  --color_warning_background: #fffde7;
 
   --color_prism_symbol: #b3e5fc;
   --color_prism_boolean: #4f9fe5;
@@ -40,7 +48,6 @@
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --color_selected_tab: #000;
     --color_header: #090909;
     --color_separator: #111111;
     --color_toolbar_hover: #1b1b1b;
@@ -52,19 +59,26 @@
     --color_header_2_hover: #494949;
     --color_header_preview: #757575;
     --color_toolbar: #757575;
-    --color_disabled_text: #808080;
     --color_header_preview_hover: #9e9e9e;
     --color_input_focus: #cfcfcf;
     --color_input_disabled: #bdbebd;
     --color_border_2: #e4e4e4;
     --color_button_hover: #e4e4e4;
     --color_button_active: #f0f0f0;
-    --color_text: #f5f5f5;
-    --color_header_text: #f5f5f5;
     --color_border: #f5f5f5;
-    --color_input_text: #f5f5f5;
     --color_input_border: #f5f5f5;
     --color_scrollbar-track: #fcfcfc;
     --color_delete_icon: #f5f5f5;
+
+    --color_text: #f5f5f5;
+    --color_input_text: #f5f5f5;
+    --color_header_text: #f5f5f5;
+    --color_selected_tab: #000;
+    --color_focus_text: #000;
+    --color_focus_foreground: #fff;
+    --color_focus_background: rgba(0, 0, 0, 0.5);
+
+    --color_error_background: #440000;
+    --color_warning_background: #353000;
   }
 }

css/phone.css

@@ -1,32 +1,96 @@
-div.title{
+div.value_input {
+  grid-template-columns: 1fr;
+  margin-right: 0.5rem;
+}
+div.value_input > input {
+  max-width: initial;
+  width: auto;
+}
+div.value_input.type_version > label {
+  display: grid;
+}
+div.value_input.type_uuid {
+  display: block;
+}
+div.value_input.type_uuid .uuid_group,
+div.author_adder {
+  display: grid;
+  grid-gap: 0.5rem;
+}
+div.value_input.type_uuid input,
+div.author_adder input {
+  width: auto;
+  max-width: 100%;
+  margin: 0;
+  width: auto;
+  max-width: inherit;
+}
+div.uuid_group > label,
+div.author_adder > label {
+  display: grid;
+}
+div.uuid_group > label:first-child input {
+  width: auto;
+  max-width: inherit;
+}
+div.uuid_group > label input {
+  width: auto;
+  max-width: inherit;
+  min-width: 0;
+}
+div.uuid_group > label input[type="button"] {
+  width: auto;
+  max-width: inherit;
+}
+@media (max-width: 41rem) {
+  div.title {
     /* ヘッダー */
     display: none;
-}
-.title_icon{
+  }
+  .title_icon {
     display: block;
-}
-div.header_menu_alt{
+  }
+  div.header_menu_alt {
     display: none;
-}
-div.header_menu{
+  }
+  div.header_menu {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
-}
-div.content{
+  }
+  div#page_share {
+    display: block;
+  }
+  div.content {
     /* コンテンツ */
     display: flex;
     flex-direction: column;
     position: relative;
     overflow-y: hidden;
-}
-div.data_check{
+  }
+  div.value_input > input {
+    /* エディタ */
+    width: auto;
+    max-width: inherit;
+    min-width: 0;
+  }
+  div.value_input.type_uuid input,
+  div.author_adder input {
+    width: auto;
+    max-width: inherit;
+    min-width: 0;
+  }
+  input[type="number"] {
+    min-width: 0;
+    width: auto;
+  }
+  div.data_check {
     /* データチェック */
     overflow-y: unset;
     height: auto;
     flex-basis: auto;
-}
-div.preview{
+  }
+  div.preview {
     /* プレビュー */
     display: none;
     z-index: 1;
@@ -35,8 +99,9 @@ div.preview{
     left: 0;
     right: 0;
     bottom: 0;
-}
-div.separator{
+  }
+  div.separator {
     /* セパレータ */
     display: none;
-}
+  }
+}