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
background-position: 0% 0%
@keyframes new-tag-added
@keyframes tag-added-to-post
from
max-height: 0
to
@ -110,28 +110,27 @@ ul.compact-tags
overflow: hidden
text-overflow: ellipsis
transition: background-color 0.5s linear
background-size: 200%
a
display: inline
a:focus
outline: 0
box-shadow: inset 0 0 0 2px $main-color
// these 3 added when tag is added to ul
&.implication
// background: $implied-tag-background-color
color: $implied-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $implied-tag-background-color)
background-size: 200%
animation: tag-background-updated 2s ease forwards
background-image: linear-gradient(90deg, transparent, transparent, $implied-tag-background-color)
animation: tag-added-to-post 1s ease forwards, tag-background-updated 2s ease forwards
&.new
// background: $new-tag-background-color
color: $new-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $new-tag-background-color)
background-size: 200%;
animation: new-tag-added 1s ease forwards, tag-background-updated 2s ease forwards
background-image: linear-gradient(90deg, transparent, transparent, $new-tag-background-color)
animation: tag-added-to-post 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
// background: $duplicate-tag-background-color
color: $duplicate-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $duplicate-tag-background-color)
background-size: 200%
background-image: linear-gradient(90deg, transparent, transparent, $duplicate-tag-background-color)
animation: tag-background-updated 2s ease forwards
i
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) {
listItemNode.classList.add("new");
}
if (source === SOURCE_IMPLICATION) {
else if (source === SOURCE_IMPLICATION) {
listItemNode.classList.add("implication");
}
else {
listItemNode.classList.add("added");
}
this._tagListNode.prependChild(listItemNode);
_fadeOutListItemNodeStatus(listItemNode);