NSFW tagging and tag editing

3 files changed, 47 insertions, 0 deletions

diff --git a/Pages/Component/MediaTagTable.razor b/Pages/Component/MediaTagTable.razor
index 278304d..ce42e48 100644
--- a/Pages/Component/MediaTagTable.razor
+++ b/Pages/Component/MediaTagTable.razor
@@ -28,6 +28,8 @@
             <td>
                 @if(!e.isImplicit) {
                     <a href="javascript:;" @onclick=@(() => Delete(e.tagDef))>Delete</a>
+                } else {
+                    <a href="javascript:;" @onclick=@(() => MakeExplicit(e.tagDef))>Make Explicit</a>
                 }
             </td>
         </tr>
@@ -60,4 +62,9 @@
             .Where(e => e.tagDefinition.Source == TagSource.UserTag)
             .ToArray();
     }
+
+    private void MakeExplicit(TagDefinition tagDef) {
+        tagService.AddTag(Media, tagDef);
+        Refresh();
+    }
 }
diff --git a/Pages/Component/Switch.razor b/Pages/Component/Switch.razor
new file mode 100644
index 0000000..ffb3543
--- /dev/null
+++ b/Pages/Component/Switch.razor
@@ -0,0 +1,15 @@
+<link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
+
+<label>
+  <input
+      type="checkbox"
+      @onchange=@(e => OnToggle.InvokeAsync((e.Value as bool?) ?? false))
+      hidden/>
+  <div class="switch-outer">
+    <div class="switch-inner"/>
+  </div>
+</label>
+
+@code {
+    public EventCallback<bool> OnToggle { get; set; }
+}
diff --git a/Pages/Component/Switch.razor.css b/Pages/Component/Switch.razor.css
new file mode 100644
index 0000000..6b1f5d5
--- /dev/null
+++ b/Pages/Component/Switch.razor.css
@@ -0,0 +1,25 @@
+div.switch-outer {
+    background:    var(--col-switch-bg);
+    border-radius: 20px;
+    border:        1px solid var(--col-switch-fg);
+    cursor:        pointer;
+    height:        20px;
+    transition:    background 0.1s linear;
+    width:         40px;
+}
+
+div.switch-inner {
+    background:    var(--col-switch-fg);
+    border-radius: 20px;
+    height:        20px;
+    transition:    margin-left 0.1s linear;
+    width:         20px;
+}
+
+input:checked + div.switch-outer {
+    background: var(--col-switch-bg-hl);
+}
+
+input:checked + div.switch-outer > div.switch-inner {
+    margin-left: 20px;
+}