fix(settings): fix input[number] stylings

aidenlx · Feb 28, 2022 · eaeb33a · eaeb33a
1 parent ebdcfa7
commit eaeb33a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/settings.less b/src/settings.less
@@ -0,0 +1,16 @@
+.setting-item-control > input[type="number"] {
+  &:invalid {
+    color: var(--text-error);
+    background-color: var(--background-modifier-error);
+    & + span.validity::after {
+      content: "✖";
+      padding-left: 5px;
+    }
+  }
+  &.input-short {
+    width: 5em;
+  }
+  & + span.unit {
+    margin-left: 5px;
+  }
+}
diff --git a/src/settings.ts b/src/settings.ts
@@ -1,3 +1,5 @@
+import "./settings.less";
+
 import { getApi } from "@aidenlx/obsidian-icon-shortcodes";
 import { App, Modifier, Platform, PluginSettingTab, Setting } from "obsidian";
 import { folderIconMark } from "./fe-handler/folder-mark";
@@ -265,8 +267,13 @@ export class ALxFolderNoteSettingTab extends PluginSettingTab {
           type: "number",
           min: "0.2",
           step: "0.1",
+          required: true,
         });
-        text.inputEl.insertAdjacentText("afterend", " second(s)");
+        text.inputEl.addClass("input-short");
+        text.inputEl.insertAdjacentElement(
+          "afterend",
+          createSpan({ cls: ["validity", "unit"], text: "second(s)" }),
+        );
         text
           .setValue(`${this.plugin.longPressDelay / 1e3}`)
           .onChange(async (val) => {