diff --git a/app/javascript/src/javascripts/posts.js.erb b/app/javascript/src/javascripts/posts.js.erb index bf5ac5057..a6c23b72e 100644 --- a/app/javascript/src/javascripts/posts.js.erb +++ b/app/javascript/src/javascripts/posts.js.erb @@ -39,6 +39,10 @@ Post.initialize_all = function() { this.initialize_edit_dialog(); } + var $fields_multiple = $('[data-autocomplete="tag-edit"]'); + $fields_multiple.on("keypress.danbooru", Post.update_tag_count); + Post.update_tag_count(); + $(window).on('danbooru:initialize_saved_seraches', () => { Post.initialize_saved_searches(); }); @@ -78,7 +82,7 @@ Post.initialize_gestures = function() { } Post.initialize_edit_dialog = function() { - $("#open-edit-dialog").button().show().on("click.danbooru", function(e) { + $("#open-edit-dialog").show().on("click.danbooru", function(e) { Post.open_edit_dialog(); e.preventDefault(); }); @@ -598,6 +602,27 @@ Post.initialize_saved_searches = function() { }); } +Post.update_tag_count = function(event) { + let string = "0 tags"; + let count = 0; + + if (event) { + let tags = $(event.target).val().match(/\S+/g); + if (tags) { + count = tags.length; + string = (count == 1) ? (count + " tag") : (count + " tags") + } + } + $("#tags-container .count").html(string); + let klass = "smile"; + if (count < 25) { + klass = "frown"; + } else if (count < 35) { + klass = "meh"; + } + $("#tags-container .options #face").removeClass().addClass(`far fa-${klass}`); +} + $(document).ready(function() { Post.initialize_all(); }); diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 91103f0ad..14d5f27a5 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -44,10 +44,6 @@ article.post-preview { margin-top: 1em; } -#open-edit-dialog { - padding: 0; -} - #edit-dialog textarea { margin-bottom: 0.25em; } @@ -57,7 +53,6 @@ article.post-preview { border: 2px solid transparent; } - &.post-status-has-children img { border-color: $preview_has_children_color; } @@ -348,6 +343,7 @@ div#c-posts { } textarea { + width: 100%; margin-bottom: 0.25em; } diff --git a/app/javascript/src/styles/specific/tags.scss b/app/javascript/src/styles/specific/tags.scss index f94a9f431..ec8796a21 100644 --- a/app/javascript/src/styles/specific/tags.scss +++ b/app/javascript/src/styles/specific/tags.scss @@ -11,3 +11,47 @@ div#c-tags { } } } + +#tags-container { + max-width: 70em; + + div.header { + margin: 0; + display: grid; + grid-template-columns: 50% 50%; + width: 100%; + + label { + grid-column: 1; + } + + .options { + grid-column: 2; + justify-self: end; + + .count { + color: gray; + text-decoration: italic; + margin-left: 0.25em; + padding-bottom: 0.2em; + } + + i { + margin-left: 0.25em; + font-size: 11pt; + } + + .fa-frown { + color: red; + } + + .fa-meh { + color: darkkhaki; + } + + .fa-smile { + color: green; + } + } + } +} diff --git a/app/javascript/src/styles/specific/uploads.scss b/app/javascript/src/styles/specific/uploads.scss index c352b787f..f63d6ddf9 100644 --- a/app/javascript/src/styles/specific/uploads.scss +++ b/app/javascript/src/styles/specific/uploads.scss @@ -34,6 +34,7 @@ div#c-uploads { textarea { margin-bottom: 0.25em; + width: 100%; } .hint { diff --git a/app/views/posts/partials/show/_edit.html.erb b/app/views/posts/partials/show/_edit.html.erb index dc5837ccd..11d261a4d 100644 --- a/app/views/posts/partials/show/_edit.html.erb +++ b/app/views/posts/partials/show/_edit.html.erb @@ -75,16 +75,25 @@
<% end %> -