「改善されたカスタムテーマの編集ページを使用する」試験機能を追加

Robot-Inventor · Nov 22, 2020 · a7fbd15 · a7fbd15
1 parent d99641f
commit a7fbd15
Show file tree

Hide file tree

Showing 6 changed files with 326 additions and 1 deletion.
diff --git a/changelog.md b/changelog.md
@@ -46,6 +46,7 @@ Edition: ORIZIN Agent HTML
 #### 追加
 
 - ORIZIN Agentについてページに「情報を表示」セクションを追加し、ORIZIN Agentに関する情報がまとまったウィンドウを表示できるようになりました。
+- 「改善されたカスタムテーマの編集ページを使用する」試験機能を追加しました。
 
 #### 修正
 

diff --git a/resource/html/flag.html b/resource/html/flag.html
@@ -62,6 +62,12 @@ <h2>試験機能</h2>
  設定ページの「アップデートを確認」セクションにアップデートチェッカーボタンを表示します。
  </p>
  </section>
+ <section>
+ <i class="material_icon">edit</i>改善されたカスタムテーマの編集ページを使用する　<toggle-switch id="enable_improved_custom_theme_editor"></toggle-switch>
+ <p class="information">
+ 設定ページのテーマセクションで「カスタムテーマの編集」を押した際に改善されたページを表示します。
+ </p>
+ </section>
  <span id="refresh_button" onclick="eel.reset_flag(); location.reload();" class="ripple_effect"><i class="material_icon">refresh</i>すべてデフォルトに戻す</span>
  </div>
  </main>

diff --git a/resource/html/improved_set_custom_css_theme.html b/resource/html/improved_set_custom_css_theme.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta http-equiv="Expires" content="86400">
+ <link rel="stylesheet" type="text/css" href="../css/layout.css">
+ <link rel="shortcut icon" href="../image/favicon.ico">
+ <meta name="theme-color" content="#FF6A00">
+ <title>ORIZIN Agent HTML</title>
+ <meta name="description" content="オープンソースのAIアシスタント「ORIZIN Agent HTML」です。">
+ <!-- この行は他のページとは違うため，headタグ内の書き換えの際は注意 --><link rel="stylesheet" type="text/css" href="../css/classic.min.css">
+ </head>
+ <body>
+ <header>
+ </header>
+ <main>
+ <div class="fill_panel">
+ <h2>カスタムテーマの編集</h2>
+ <p class="warning">
+ <i class="material_icon">warning</i>この改善されたカスタムテーマの編集ツールは実装途中であり正常にカスタムテーマの編集を行えません。
+ </p>
+ <button class="ripple_effect stroke hover show_color_setting_button" id="new_theme_button"><i class="material_icon">add</i>新規</button><button class="ripple_effect stroke hover show_color_setting_button" id="open_theme_button"><i class="material_icon">input</i>開く</button>
+ <div id="color_setting">
+ <section>
+ 背景色<div id="bg"></div>
+ </section>
+ <section>
+ 影の色<div id="shadow"></div>
+ </section>
+ <section>
+ カードの背景色<div id="card_bg"></div>
+ </section>
+ <section>
+ 文字色<div id="text"></div>
+ </section>
+ <section>
+ テーマ色<div id="theme_color"></div>
+ </section>
+ <button class="ripple_effect stroke hover" id="save_button"><i class="material_icon">save</i>上書き保存</button><button class="ripple_effect stroke hover" id="save_as_button"><i class="material_icon">add</i>名前をつけて保存</button>
+ </div>
+ </div>
+ </main>
+ <style>
+ #color_setting {
+ display: none;
+ }
+
+ section {
+ padding: 1rem 0;
+ border-top: solid 0.1rem var(--text);
+ }
+
+ section div {
+ display: inline-block;
+ margin-left: 2rem;
+ }
+
+ #file_name_textbox {
+ margin-right: 0.5rem;
+ }
+
+ #save_as_done {
+ vertical-align: super;
+ margin-left: 1rem;
+ transform: translateY(-0.5rem);
+ }
+ </style>
+ <script src="../javascript/jquery-3.5.1.min.js"></script>
+ <script src="../javascript/orizin_ui.min.js"></script>
+ <script src="../javascript/basic.js"></script>
+ <script src="../javascript/pickr.min.js"></script>
+ <script src="/eel.js"></script>
+ <script>
+ let css_data = [];
+ let old_css_data = [];
+
+ async function check_current_css_theme_information() {
+ css_data = await eel.check_current_css_theme_information()();
+ old_css_data = await eel.check_current_css_theme_information()();
+ const swatches_values = [
+ "rgb(244, 67, 54)",
+ "rgb(233, 30, 99)",
+ "rgb(156, 39, 176)",
+ "rgb(103, 58, 183)",
+ "rgb(63, 81, 181)",
+ "rgb(33, 150, 243)",
+ "rgb(3, 169, 244)",
+ "rgb(0, 188, 212)",
+ "rgb(0, 150, 136)",
+ "rgb(76, 175, 80)",
+ "rgb(139, 195, 74)",
+ "rgb(205, 220, 57)",
+ "rgb(255, 235, 59)",
+ "rgb(255, 193, 7)"
+ ];
+ const components_values = {
+ preview: true,
+ opacity: true,
+ hue: true,
+ interaction: {
+ hex: true,
+ rgba: true,
+ hsla: true,
+ hsva: true,
+ cmyk: true,
+ input: true,
+ clear: true,
+ save: true,
+ cancel: true
+ }
+ };
+ const i18n_values = {
+ "btn:save": "決定",
+ "btn:clear": "リセット",
+ "btn:cancel": "キャンセル"
+ };
+ const bg = Pickr.create({
+ el: "#bg",
+ theme: "classic",
+ default: css_data[0],
+ swatches: swatches_values,
+ components: components_values,
+ i18n: i18n_values
+ });
+ bg.on("save", (color, instance) => {
+ css_data[0] = color.toHEXA().toString();
+ bg.hide();
+ });
+
+ const card_bg = Pickr.create({
+ el: "#card_bg",
+ theme: "classic",
+ default: css_data[1],
+ swatches: swatches_values,
+ components: components_values,
+ i18n: i18n_values
+ });
+ card_bg.on("save", (color, instance) => {
+ css_data[1] = color.toHEXA().toString();
+ card_bg.hide();
+ });
+
+ const text = Pickr.create({
+ el: "#text",
+ theme: "classic",
+ default: css_data[2],
+ swatches: swatches_values,
+ components: components_values,
+ i18n: i18n_values
+ });
+ text.on("save", (color, instance) => {
+ css_data[2] = color.toHEXA().toString();
+ text.hide();
+ });
+
+ const shadow = Pickr.create({
+ el: "#shadow",
+ theme: "classic",
+ default: css_data[3],
+ swatches: swatches_values,
+ components: components_values,
+ i18n: i18n_values
+ });
+ shadow.on("save", (color, instance) => {
+ css_data[3] = color.toHEXA().toString();
+ shadow.hide();
+ });
+
+ const theme_color = Pickr.create({
+ el: "#theme_color",
+ theme: "classic",
+ default: css_data[4],
+ swatches: swatches_values,
+ components: components_values,
+ i18n: i18n_values
+ });
+ theme_color.on("save", (color, instance) => {
+ css_data[4] = color.toHEXA().toString();
+ theme_color.hide();
+ });
+ }
+
+ check_current_css_theme_information();
+
+ window.addEventListener("beforeunload", function() {
+ if (old_css_data.toString() != css_data.toString()) {
+ eel.write_custom_css_theme(css_data);
+ eel.change_theme("theme/user/custom_theme.css");
+ }
+ });
+
+ document.querySelectorAll(".show_color_setting_button").forEach((element) => {
+ element.addEventListener("click", function() {
+ document.getElementById("color_setting").style.display = "block";
+ });
+ });
+
+ const new_theme_button = document.getElementById("new_theme_button");
+ const open_theme_button = document.getElementById("open_theme_button");
+
+ new_theme_button.addEventListener("click", function() {
+ new_theme_button.classList.add("fill");
+ open_theme_button.classList.remove("fill");
+ });
+
+ async function generate_theme_menu() {
+ theme_dict = await eel.return_theme_dict()();
+ theme_select_element = document.getElementById("theme");
+ for (theme_path in theme_dict) {
+ theme_select_element.insertAdjacentHTML("beforeend", `<option value="${theme_path}">${theme_dict[theme_path]}</option>`);
+ }
+ }
+
+ open_theme_button.addEventListener("click", function() {
+ open_theme_button.classList.add("fill");
+ new_theme_button.classList.remove("fill");
+ const save_as_modal = new ModalWindow();
+ save_as_modal.show_modal(`
+<h2>テーマを選択</h2>
+<select id="theme" onchange="eel.change_theme(document.getElementById('theme').value);">
+ <!-- ここの中身はJavaScriptで動的に生成 -->
+</select>
+<button class="stroke hover">開く</button>
+ `);
+ generate_theme_menu();
+ });
+
+ const save_as_button = document.getElementById("save_as_button");
+ const save_button = document.getElementById("save_button");
+
+ save_as_button.addEventListener("click", function() {
+ const save_as_modal = new ModalWindow();
+ save_as_modal.show_modal(`
+<h2>テーマ名を入力</h2>
+<underlined-textbox placeholder="テーマの名前を入力..." id="file_name_textbox"></underlined-textbox>
+<button class="ripple_effect stroke hover" id="save_as_done"><i class="material_icon">done</i>決定</button>
+ `);
+ });
+
+ save_button.addEventListener("click", function() {
+ document.getElementById("save_as_control").style.display = "none";
+ });
+ </script>
+ </body>
+</html>
diff --git a/resource/html/setting.html b/resource/html/setting.html
@@ -32,7 +32,7 @@ <h2>設定</h2>
  <select id="theme" onchange="eel.change_theme(document.getElementById('theme').value);">
  <!-- ここの中身はJavaScriptで動的に生成 -->
  </select>
- <a href="set_custom_css_theme.html" class="ripple_effect"><i class="material_icon">edit</i>カスタムテーマの編集</a>
+ <a href="set_custom_css_theme.html" class="ripple_effect" id="edit_theme"><i class="material_icon">edit</i>カスタムテーマの編集</a>
  </details>
  </section>
  <section title="ORIZIN Agentがあなたのことを何と呼ぶかを設定します。">
@@ -311,6 +311,10 @@ <h2>設定</h2>
  document.getElementById("check_update").style.display = "block";
  }
 
+ if (await eel.read_flag("enable_improved_custom_theme_editor")()) {
+ document.getElementById("edit_theme").href = "improved_set_custom_css_theme.html";
+ }
+
  document.querySelectorAll("div.fill_panel section").forEach((element) => {
  element.dataset.defaultDisplay = getComputedStyle(element).getPropertyValue("display");
  });

diff --git a/resource/javascript/basic.js b/resource/javascript/basic.js
@@ -85,3 +85,70 @@ async function feed_buck_setting() {
  document.getElementById("feedback_button").style.display = "block";
  }
 }
+
+class ModalWindow {
+ constructor() {
+ const modal_style = document.createElement("style");
+ modal_style.textContent = `
+#modal_window_outer {
+ background: var(--card_bg);
+ color: var(--text);
+ font-size: 1rem;
+ font-family: "Yu Gothic UI", sans-serif;
+ padding: 1rem;
+ min-width: 50vmin;
+ max-width: 50vmax;
+ max-height: 50vh;
+ border-radius: 0.5rem;
+ position: fixed;
+ top: 50vh;
+ left: 50vw;
+ transform: translate(-50%, -50%);
+ box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.8);
+ display: none;
+ overflow-y: scroll;
+ transition: 0s;
+}
+
+#modal_window_overlay {
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.5);
+ position: fixed;
+ top: 50vh;
+ left: 50vw;
+ transform: translate(-50%, -50%);
+ cursor: pointer;
+ display: none;
+ transition: 0s;
+}
+ `;
+ document.body.appendChild(modal_style);
+ }
+
+ show_modal(content="", z_index=2) {
+ this.close_modal();
+ document.body.insertAdjacentHTML("beforeend", "<div id='modal_window_overlay'></div><div id='modal_window_outer'><p id='modal_window_inner'></p></div>");
+ document.getElementById("modal_window_inner").innerHTML = content;
+ const overlay = document.getElementById("modal_window_overlay");
+ overlay.style.zIndex = z_index;
+ overlay.style.display = "block";
+ const modal = document.getElementById("modal_window_outer");
+ modal.style.zIndex = z_index;
+ modal.style.display = "block";
+ document.getElementById("modal_window_overlay").addEventListener("click", () => {
+ this.close_modal();
+ });
+ }
+
+ close_modal() {
+ const outer = document.getElementById("modal_window_outer");
+ if(outer) {
+ outer.remove();
+ }
+ const overlay = document.getElementById("modal_window_overlay");
+ if(overlay) {
+ overlay.remove();
+ }
+ }
+}
diff --git a/resource/setting/default_flag.otfd b/resource/setting/default_flag.otfd
@@ -1,4 +1,5 @@
 add_readable_text_setting:False
+enable_improved_custom_theme_editor:False
 enable_update_checker:False
 fast_start:False
 get_news_from_google_news:False