ulysia/szurubooru
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client: tag input animations fixed

Browse source
This commit is contained in:
Ben Klein 2021-04-13 04:20:13 +00:00
parent 6fff36fa15
commit d85ce8e542
2 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
client/css/tag-input-control.styl
View file

@ -92,7 +92,7 @@ div.tag-input
to to
background-position: 0% 0% background-position: 0% 0%
@keyframes new-tag-added @keyframes tag-added-to-post
from from
max-height: 0 max-height: 0
to to
@ -110,28 +110,27 @@ ul.compact-tags
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
transition: background-color 0.5s linear transition: background-color 0.5s linear
background-size: 200%
a a
display: inline display: inline
a:focus a:focus
outline: 0 outline: 0
box-shadow: inset 0 0 0 2px $main-color box-shadow: inset 0 0 0 2px $main-color
// these 3 added when tag is added to ul
&.implication &.implication
// background: $implied-tag-background-color
color: $implied-tag-text-color color: $implied-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $implied-tag-background-color) background-image: linear-gradient(90deg, transparent, transparent, $implied-tag-background-color)
background-size: 200% animation: tag-added-to-post 1s ease forwards, tag-background-updated 2s ease forwards
animation: tag-background-updated 2s ease forwards
&.new &.new
// background: $new-tag-background-color
color: $new-tag-text-color color: $new-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $new-tag-background-color) background-image: linear-gradient(90deg, transparent, transparent, $new-tag-background-color)
background-size: 200%; animation: tag-added-to-post 1s ease forwards, tag-background-updated 2s ease forwards
animation: new-tag-added 1s ease forwards, tag-background-updated 2s ease forwards &.added
animation: tag-added-to-post 1s ease forwards
// highlight when already in tag list
&.duplicate &.duplicate
// background: $duplicate-tag-background-color
color: $duplicate-tag-text-color color: $duplicate-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $duplicate-tag-background-color) background-image: linear-gradient(90deg, transparent, transparent, $duplicate-tag-background-color)
background-size: 200%
animation: tag-background-updated 2s ease forwards animation: tag-background-updated 2s ease forwards
i i
padding-right: 0.4em padding-right: 0.4em

5
client/js/controls/tag_input_control.js
View file

@ -196,9 +196,12 @@ class TagInputControl extends events.EventTarget {
if (!tag.category) { if (!tag.category) {
listItemNode.classList.add("new"); listItemNode.classList.add("new");
} }
if (source === SOURCE_IMPLICATION) { else if (source === SOURCE_IMPLICATION) {
listItemNode.classList.add("implication"); listItemNode.classList.add("implication");
} }
else {
listItemNode.classList.add("added");
}
this._tagListNode.prependChild(listItemNode); this._tagListNode.prependChild(listItemNode);
_fadeOutListItemNodeStatus(listItemNode); _fadeOutListItemNodeStatus(listItemNode);