アイコンをmwc-iconに置き換え #158 (#165)

changelog.md

@@ -50,6 +50,7 @@ Edition: ORIZIN Agent HTML
 - バージョン情報をコピーしたときにボタンのアイコンが変更されるようになりました　[#146](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/146)
 - 設定の検索ボックスが未入力のときに入力可能領域を右端まで伸ばすことで使いやすくしました　[#142](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/142)
 - メニューの開閉ボタンをmwc-icon-buttonに置き換えました　[#145](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/145)
+- すべてのアイコンをmwc-iconに置き換えました　[#158](https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/issues/158)
 
 ### [v5.1.147.2-Eagle] - 2021-05-11
 

resource/css/about_oa.min.css

@@ -1,2 +1 @@
-h3 i.material_icon{margin-left:0}
-/*# sourceMappingURL=about_oa.min.css.map */
+/* No CSS *//*# sourceMappingURL=about_oa.min.css.map */

resource/css/about_oa.scss

@@ -1,3 +1 @@
-h3 i.material_icon {
- margin-left: 0;
-}
+

resource/css/feedback.scss

@@ -29,6 +29,10 @@ label.question_text {
  letter-spacing: 200%;
  display: block;
  margin-bottom: 1rem;
+
+ mwc-icon {
+ margin-right: 0.5em;
+ }
 }
 
 underlined-textbox {

resource/css/information.scss

@@ -43,10 +43,6 @@ p {
  margin: 0 0 0.5rem 0;
 }
 
-i.material_icon {
- margin-left: 0;
-}
-
 a.ripple_effect {
  padding: 0.1rem 0.2rem;
  border-radius: 0.25rem;

resource/css/layout.scss

@@ -86,23 +86,6 @@
  0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 
-.material_icon {
- font-family: "Material Icons";
- font-weight: normal;
- font-style: normal;
- display: inline-block;
- line-height: 1;
- text-transform: none;
- letter-spacing: normal;
- word-wrap: normal;
- white-space: nowrap;
- direction: ltr;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- transform: translateY(0.15em);
- margin: 0 0.4em;
-}
-
 * {
  overflow: scroll;
  scrollbar-width: none;
@@ -131,28 +114,6 @@
 a {
  color: var(--theme_color);
  text-decoration: none;
-
- .material_icon {
- color: var(--theme_color);
- }
-}
-
-.important {
- color: var(--theme_color);
-
- .material_icon,
- * {
- color: var(--theme_color);
- }
-}
-
-.warning {
- color: var(--error_text_color);
-
- .material_icon,
- * {
- color: var(--error_text_color);
- }
 }
 
 html,
@@ -212,7 +173,6 @@ header {
  }
 
  #menu_open_button {
- height: 5vh;
  cursor: pointer;
  margin-right: 1rem;
  transition: 0.3s;
@@ -283,8 +243,8 @@ header {
  transition: 0.3s;
  cursor: pointer;
 
- .material_icon {
- color: var(--text);
+ mwc-icon {
+ margin-right: 0.5em;
  }
  }
 
@@ -295,10 +255,6 @@ header {
  top: 0;
  left: 0;
 
- .material_icon {
- color: var(--theme_color);
- }
-
  &::before {
  content: "";
  width: 100%;
@@ -328,8 +284,6 @@ header {
  }
 
  #menu_close_button {
- border: none;
- font-size: 2rem;
  margin: 2vh;
  overflow: visible;
  --mdc-icon-size: 2rem;
@@ -517,6 +471,10 @@ details {
  padding: 1em 0;
  transform: translate(-1.5rem) !important;
  transition: 0.3s;
+
+ mwc-icon {
+ margin-right: 0.5em;
+ }
  }
 }
 
@@ -591,6 +549,20 @@ mwc-checkbox {
  --mdc-checkbox-unchecked-color: var(--text);
 }
 
+mwc-icon {
+ --mdc-icon-size: 1em;
+ vertical-align: bottom;
+ transform: translateY(-10%);
+ color: inherit;
+}
+
+h2,
+h3 {
+ mwc-icon {
+ margin-right: 0.5em;
+ }
+}
+
 /* ここからはマテリアルデザインのElevationの設定 */
 
 /**

resource/html/about_oa.html

@@ -19,11 +19,11 @@
  <h2>ORIZIN Agentについて</h2>
  <pre id="information"></pre>
  <mwc-button unelevated label="コピー" icon="content_copy" id="copy_information_button"></mwc-button>
- <h3><i class="material_icon">info</i>ORIZIN Agentとは</h3>
- ORIZIN Agentは、MITライセンスの下に公開されているオープンソースの会話を目的としたルールベースのAIアシスタントです。Robot-Inventorによって開発されました。詳しくは、<a href="https://robot-inventor.github.io/ORIZIN_Agent/" target="_blank">ORIZIN Agent公式サイト<i class="material_icon">open_in_new</i></a>をご覧ください。
- <h3><i class="material_icon">help</i>情報を表示</h3>
+ <h3><mwc-icon>info</mwc-icon>ORIZIN Agentとは</h3>
+ ORIZIN Agentは、MITライセンスの下に公開されているオープンソースの会話を目的としたルールベースのAIアシスタントです。Robot-Inventorによって開発されました。詳しくは、<a href="https://robot-inventor.github.io/ORIZIN_Agent/" target="_blank">ORIZIN Agent公式サイト<mwc-icon>open_in_new</mwc-icon></a>をご覧ください。
+ <h3><mwc-icon>help</mwc-icon>情報を表示</h3>
  ORIZIN Agent HTMLに関する情報が書かれたウィンドウを開きます。<mwc-button label="開く" id="open_splash_screen_button"></mwc-button>
- <h3><i class="material_icon">assignment</i>ライセンス</h3>
+ <h3><mwc-icon>assignment</mwc-icon>ライセンス</h3>
  <pre>
 MIT License
 

resource/html/feedback.html

@@ -22,12 +22,12 @@ <h2>フィードバック</h2>
  *が付いている項目は必須です。
  </p>
  <p class="information">
- <i class="material_icon">info</i>フィードバックはこのフォームまたは<a href="https://forms.gle/s3npSdtrvuF9WTgH8" target="_blank" rel="noreferrer noopener">Googleフォーム</a>から行えます。送信できる内容はどちらも同じです。また、このフォームに入力された内容は自動でGoogleフォームに送信されます。フォームには、個人情報やパスワードなどを入力しないでください。
+ <mwc-icon>info</mwc-icon>フィードバックはこのフォームまたは<a href="https://forms.gle/s3npSdtrvuF9WTgH8" target="_blank" rel="noreferrer noopener">Googleフォーム</a>から行えます。送信できる内容はどちらも同じです。また、このフォームに入力された内容は自動でGoogleフォームに送信されます。フォームには、個人情報やパスワードなどを入力しないでください。
  </p>
  </div>
  <form id="feedback" target="dummy_send_target">
  <div class="question_group">
- <label for="entry.1463225208" class="question_text"><i class="material_icon">feedback</i>フィードバックの種類を選択してください。*</label>
+ <label for="entry.1463225208" class="question_text"><mwc-icon>feedback</mwc-icon>フィードバックの種類を選択してください。*</label>
  <mwc-formfield label="バグの報告">
  <mwc-radio name="entry.1463225208" value="バグの報告"></mwc-radio>
  </mwc-formfield>
@@ -42,20 +42,20 @@ <h2>フィードバック</h2>
  </mwc-formfield>
  </div>
  <div class="question_group">
- <label for="entry.166666813" class="question_text"><i class="material_icon">rate_review</i>上記内容について詳しく教えてください。*</label>
+ <label for="entry.166666813" class="question_text"><mwc-icon>rate_review</mwc-icon>上記内容について詳しく教えてください。*</label>
  <underlined-textbox name="entry.166666813" placeholder="ここに入力..."></underlined-textbox>
  </div>
  <div class="question_group">
- <label for="entry.99636056" class="question_text"><i class="material_icon">link</i>GitHubに上記と同じ内容のIssuesやPull Requestsを送信した場合、そのURLを書いてください。</label>
+ <label for="entry.99636056" class="question_text"><mwc-icon>link</mwc-icon>GitHubに上記と同じ内容のIssuesやPull Requestsを送信した場合、そのURLを書いてください。</label>
  <underlined-textbox name="entry.99636056" placeholder="https://github.com/で始まるURLを入力..."></underlined-textbox>
  </div>
  <div class="question_group">
- <label class="question_text"><i class="material_icon">settings</i>システム情報を送信しますか。*</label>
+ <label class="question_text"><mwc-icon>settings</mwc-icon>システム情報を送信しますか。*</label>
  <mwc-formfield label="システム情報を送信する" id="system_info_field">
  <mwc-checkbox id="send_system_info" checked></mwc-checkbox>
  </mwc-formfield>
  <p class="information">
- <i class="material_icon">info</i>システム情報にはWebブラウザーのユーザーエージェント文字列、それを解析して取得したWebブラウザーの名称とバージョン・レンダリングエンジンの名称とバージョン・OSの名称とバージョン・CPUのアーキテクチャー・デバイスの種類とベンダー、Pythonのバージョン、Pythonを使用して取得したOSの名称とバージョン、ORIZIN Agent HTMLのバージョンが含まれます。これらの情報は問題の特定に役立ちます。また、システム情報から<b>個人を特定することはできません</b>。
+ <mwc-icon>info</mwc-icon>システム情報にはWebブラウザーのユーザーエージェント文字列、それを解析して取得したWebブラウザーの名称とバージョン・レンダリングエンジンの名称とバージョン・OSの名称とバージョン・CPUのアーキテクチャー・デバイスの種類とベンダー、Pythonのバージョン、Pythonを使用して取得したOSの名称とバージョン、ORIZIN Agent HTMLのバージョンが含まれます。これらの情報は問題の特定に役立ちます。また、システム情報から<b>個人を特定することはできません</b>。
  </p>
  <mwc-button label="送信されるシステム情報を見る" icon="visibility" id="show_system_info" trailingIcon></mwc-button>
  <pre id="system_info_preview"></pre>