diff --git a/app/javascript/src/javascripts/tag_counter.js b/app/javascript/src/javascripts/tag_counter.js index 3aa537cf7..37ff8f46d 100644 --- a/app/javascript/src/javascripts/tag_counter.js +++ b/app/javascript/src/javascripts/tag_counter.js @@ -19,7 +19,7 @@ export default @observer class TagCounter extends Component { return ( {this.tagCount} / {TagCounter.highCount} tags - + ); } @@ -28,13 +28,13 @@ export default @observer class TagCounter extends Component { this.tagCount = Utility.regexp_split($(this.props.tags).val()).length; } - @computed get emoji() { + @computed get iconName() { if (this.tagCount < TagCounter.lowCount) { - return "frown"; + return "blobglare"; } else if (this.tagCount >= TagCounter.lowCount && this.tagCount < TagCounter.highCount) { - return "meh"; + return "blobthinkingglare"; } else { - return "smile"; + return "blobaww"; } } diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss index 78a4c20bb..a7e84a847 100644 --- a/app/javascript/src/styles/base/000_vars.scss +++ b/app/javascript/src/styles/base/000_vars.scss @@ -1,4 +1,5 @@ :root { + --text-xs: 0.8em; --text-sm: 0.9em; --text-md: 1em; --text-lg: 1.16667em; diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 211b835fc..6d32823ae 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -145,10 +145,6 @@ --tag-count-color: var(--muted-text-color); --low-post-count-color: red; - --tag-count-indicator-frown-color: red; - --tag-count-indicator-meh-color: darkkhaki; - --tag-count-indicator-smile-color: green; - --remove-favorite-button: deeppink; --ugoira-seek-slider-background: #EEE; @@ -417,10 +413,6 @@ body[data-current-user-theme="dark"] { --target-background: var(--blue-0); - --tag-count-indicator-frown-color: var(--red-1); - --tag-count-indicator-meh-color: var(--yellow-1); - --tag-count-indicator-smile-color: var(--green-1); - --uploads-dropzone-background: var(--grey-3); --uploads-dropzone-progress-bar-foreground-color: var(--link-color); --uploads-dropzone-progress-bar-background-color: var(--link-hover-color); diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 1412f86be..42f36505e 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -485,6 +485,33 @@ div#c-posts, div#c-uploads { } } +/* Container for the tag edit , header, and related tags buttons. */ +#tags-container { + div.header { + line-height: 1.5em; + + label { + display: inline-block; + } + + i.fa-external-link-alt { + font-size: var(--text-xs); + } + + span[data-tag-counter] { + float: right; + color: var(--muted-text-color); + font-size: var(--text-sm); + + img { + margin-left: 0.5em; + width: 20px; + height: 20px; + } + } + } +} + div#c-explore-posts { a.desc { font-weight: bold; diff --git a/app/javascript/src/styles/specific/tags.scss b/app/javascript/src/styles/specific/tags.scss index d47e5f574..ae921029d 100644 --- a/app/javascript/src/styles/specific/tags.scss +++ b/app/javascript/src/styles/specific/tags.scss @@ -5,45 +5,3 @@ div#c-tags { } } } - -#tags-container { - 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: var(--tag-count-color); - text-decoration: italic; - margin-left: 0.25em; - padding-bottom: 0.2em; - } - - i { - margin-left: 0.25em; - font-size: 11pt; - } - - .fa-frown { - color: var(--tag-count-indicator-frown-color); - } - - .fa-meh { - color: var(--tag-count-indicator-meh-color); - } - - .fa-smile { - color: var(--tag-count-indicator-smile-color); - } - } - } -} diff --git a/app/views/posts/partials/show/_edit.html.erb b/app/views/posts/partials/show/_edit.html.erb index 6df702965..6867b657f 100644 --- a/app/views/posts/partials/show/_edit.html.erb +++ b/app/views/posts/partials/show/_edit.html.erb @@ -49,10 +49,8 @@ <%= f.label :tag_string, "Tags" %> - - - - + + diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb index 8bc5b0fc1..51552cedb 100644 --- a/app/views/uploads/new.html.erb +++ b/app/views/uploads/new.html.erb @@ -65,10 +65,8 @@ <%= f.label :tag_string, "Tags" %> - - - - + + <%= f.input :tag_string, label: false, input_html: { size: "60x5", "data-autocomplete": "tag-edit", "data-shortcut": "e", spellcheck: false, value: params[:tag_string] } %> diff --git a/public/images/blobaww.png b/public/images/blobaww.png new file mode 100644 index 000000000..b387aac8b Binary files /dev/null and b/public/images/blobaww.png differ diff --git a/public/images/blobglare.png b/public/images/blobglare.png new file mode 100644 index 000000000..41132e995 Binary files /dev/null and b/public/images/blobglare.png differ diff --git a/public/images/blobthinkingglare.png b/public/images/blobthinkingglare.png new file mode 100644 index 000000000..d18807b38 Binary files /dev/null and b/public/images/blobthinkingglare.png differ