标签云、开关ui优化

Author: baiyuanneko

App/edit_external_links.js

@@ -33,7 +33,7 @@ module.exports = function () {
   langdata.PLEASE_INPUT_EXTERNAL_LINK_URL[lang_name]
 }" id="external_link_url">
         </div>
-        <div class="mb-3 form-check">
+        <div class="mb-3 form-check form-switch">
           <input type="checkbox" class="form-check-input" id="external_link_open_in_new_tab">
           <label class="form-check-label" for="external_link_open_in_new_tab">${
   langdata.OPEN_IN_NEW_TAB[lang_name]

App/i18n

@@ -174,6 +174,22 @@ <h5 class="modal-title" id="edit_external_links_dialog_title"></h5>
     </div>
   </div>
 
+  <div class="modal fade" tabindex="-1" id="article_tag_cloud_dialog">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="article_tag_cloud_dialog_title"></h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body" id="article_tag_cloud_dialog_content">
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="primary_btn" id="close_article_tag_cloud_btn" data-bs-dismiss="modal"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
 
 
 
@@ -184,4 +200,4 @@ <h5 class="modal-title" id="edit_external_links_dialog_title"></h5>
   <script src="./manage.js"></script>
 </body>
 
-</html>
+</html>

App/manage.html

@@ -558,7 +558,7 @@ function open_customize_bbg_ui_dialog() {
     <div class="container-fluid">
     <h3>${langdata["SETTING_OF_CUSTOM_UI"][lang_name]}</h3>
     <br />
-    <div class="form-check">
+    <div class="form-check form-switch">
       <input class="form-check-input" type="checkbox" value="" id="enable_custom_ui">
       <label class="form-check-label" for="enable_custom_ui">
         ${langdata["ENABLE_CUSTOM_UI"][lang_name]}

App/render_article_manager.js

@@ -889,3 +889,66 @@ details > *:not(summary) {
   margin-top: 0.5em;
   padding-bottom: 0.5em;
 }
+
+.form-check.form-switch {
+  min-height: 18px;
+  padding-left: 42px;
+}
+
+.form-switch .form-check-input {
+  width: 34px;
+  height: 18px;
+  margin-top: 0;
+  margin-left: -42px;
+  cursor: pointer;
+  border: none;
+  border-radius: 999px;
+  background-color: rgba(255, 255, 255, 0.28);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 16 16'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ffffff'/%3E%3C/svg%3E");
+  background-position: 2px center;
+  background-size: 14px 14px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  transition: background-color 0.2s ease, background-position 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+}
+
+.form-switch .form-check-input:hover {
+  background-color: rgba(255, 255, 255, 0.38);
+}
+
+.form-switch .form-check-input:focus {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 16 16'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ffffff'/%3E%3C/svg%3E");
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.28);
+}
+
+.form-switch .form-check-input:checked {
+  background-color: #1677ff;
+  background-position: calc(100% - 2px) center;
+}
+
+.form-switch .form-check-input:checked:hover {
+  background-color: #4096ff;
+}
+
+.form-switch .form-check-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.form-switch .form-check-label {
+  padding-left: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.tag-cloud-order-toggle.form-switch {
+  padding-left: 0;
+  gap: 10px;
+}
+
+.tag-cloud-order-toggle.form-switch .form-check-input {
+  margin-left: 0;
+}
+
+.tag-cloud-order-toggle.form-switch .form-check-label {
+  padding-left: 0;
+}