From 66143dce20c035bdffae175f30e660b8ee683cb0 Mon Sep 17 00:00:00 2001 From: neobooru <50623835+neobooru@users.noreply.github.com> Date: Mon, 26 Jun 2023 20:51:25 +0200 Subject: [PATCH] client: Use expanders and full tag input control on the upload page --- client/css/expander-control.styl | 2 +- client/css/post-upload.styl | 39 ++++++++++++++--------------- client/html/post_upload.tpl | 7 +++--- client/js/views/post_upload_view.js | 36 +++++++++++++++----------- 4 files changed, 46 insertions(+), 38 deletions(-) diff --git a/client/css/expander-control.styl b/client/css/expander-control.styl index 8f689570..37b51d39 100644 --- a/client/css/expander-control.styl +++ b/client/css/expander-control.styl @@ -19,7 +19,7 @@ font-size: 1em color: $inactive-link-color float: right - line-height: 2em + line-height: 2rem .expander-content padding: 0.5em 0.5em 2em 0.5em diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl index 8b2ee83e..ec4555d1 100644 --- a/client/css/post-upload.styl +++ b/client/css/post-upload.styl @@ -16,15 +16,21 @@ $cancel-button-color = tomato &.inactive .always-upload-similar &.inactive .pause-remain-on-error &.inactive .upload-all-anonymous + &.inactive .expander &.inactive #common-tags, &.uploading input[type=submit], &.uploading .skip-duplicates, &.uploading .always-upload-similar &.uploading .pause-remain-on-error &.uploading .upload-all-anonymous + &.uploading .expander &:not(.uploading) .cancel display: none + &.inactive .control-strip + &.uploading .control-strip + gap: 0 + .dropper-container margin: 0 auto .file-dropper @@ -33,42 +39,35 @@ $cancel-button-color = tomato small font-size: 60% - label[for=common-tags] - display: none !important - - input[type=submit] - margin-top: 1em + .expander + &.collapsed + margin-bottom: 0 + .expander-content + padding: 0.5em .cancel - margin-top: 1em background: $cancel-button-color border-color: $cancel-button-color &:focus border: 2px solid $text-color - .skip-duplicates - margin-left: 1em - - .always-upload-similar - margin-left: 1em - - .pause-remain-on-error - margin-left: 1em - - .upload-all-anonymous - margin-left: 1em - form>.messages margin-top: 1em .control-strip display: flex flex-direction: column - gap: 0.5em + gap: 1em + margin-top: 1em .control-options display: flex - flex-direction: column + flex-wrap: wrap + gap: 0 1em + + span + flex: 1 1 30% + white-space: nowrap .uploadables-container list-style-type: none diff --git a/client/html/post_upload.tpl b/client/html/post_upload.tpl index 83968eb9..5240e306 100644 --- a/client/html/post_upload.tpl +++ b/client/html/post_upload.tpl @@ -3,8 +3,6 @@
- -
<%= ctx.makeCheckbox({ @@ -39,8 +37,11 @@
- <%= ctx.makeTextInput({placeholder: 'Common tags', id: 'common-tags', name: 'common-tags'}) %> +
+ <%= ctx.makeTextInput({name: 'common-tags'}) %> +
+
diff --git a/client/js/views/post_upload_view.js b/client/js/views/post_upload_view.js index ab4f1731..f1dbe2d5 100644 --- a/client/js/views/post_upload_view.js +++ b/client/js/views/post_upload_view.js @@ -4,13 +4,13 @@ const events = require("../events.js"); const api = require("../api.js"); const views = require("../util/views.js"); const FileDropperControl = require("../controls/file_dropper_control.js"); +const ExpanderControl = require("../controls/expander_control.js"); +const TagInputControl = require("../controls/tag_input_control.js"); const template = views.getTemplate("post-upload"); const rowTemplate = views.getTemplate("post-upload-row"); -const misc = require('../util/misc.js'); -const TagAutoCompleteControl = - require('../controls/tag_auto_complete_control.js'); +const TagList = require("../models/tag_list.js"); function _mimeTypeToPostType(mimeType) { return ( @@ -164,6 +164,7 @@ class PostUploadView extends events.EventTarget { this._uploadables.find = (u) => { return this._uploadables.findIndex((u2) => u.key === u2.key); }; + this._commonTags = new TagList(); this._contentFileDropper = new FileDropperControl( this._contentInputNode, @@ -190,14 +191,21 @@ class PostUploadView extends events.EventTarget { ); this._formNode.classList.add("inactive"); + this._commonTagsExpander = new ExpanderControl( + "common-tags", + "Common Tags (0)", + this._hostNode.querySelectorAll(".common-tags") + ); + if (this._commonTagsInputNode) { - this._autoCompleteControl = new TagAutoCompleteControl( + this._commonTagsControl = new TagInputControl( this._commonTagsInputNode, - { - confirm: tag => - this._autoCompleteControl.replaceSelectedText( - misc.escapeSearchTerm(tag.names[0]), true), - }); + this._commonTags + ); + + this._commonTagsControl.addEventListener("change", (_) => { + this._commonTagsExpander.title = `Common Tags (${this._commonTags.length})`; + }); } } @@ -321,9 +329,7 @@ class PostUploadView extends events.EventTarget { uploadable.tags = []; if (this._commonTagsInputNode) { - var tags = this._commonTagsInputNode.value.split(' '); - tags = tags.filter(t => t != "").map(t => t.replace('\\', '')); - uploadable.tags = uploadable.tags.concat(tags); + uploadable.tags = this._commonTags.map((tag) => tag.names[0]); } uploadable.relations = []; for (let [i, lookalike] of uploadable.lookalikes.entries()) { @@ -460,7 +466,9 @@ class PostUploadView extends events.EventTarget { } get _uploadAllAnonymous() { - return this._hostNode.querySelector("form [name=upload-all-anonymous]"); + return this._hostNode.querySelector( + "form [name=upload-all-anonymous]" + ); } get _submitButtonNode() { @@ -476,7 +484,7 @@ class PostUploadView extends events.EventTarget { } get _commonTagsInputNode() { - return this._formNode.querySelector('form [name=common-tags]'); + return this._formNode.querySelector(".common-tags input"); } }