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

client/tag-input: move removal links to left

Browse source
This commit is contained in:
rr- 2016-08-24 00:47:15 +02:00
parent f035140c9f
commit 2ef63fcc7a
2 changed files with 41 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
client/css/tag-input.styl
View file

@ -85,33 +85,38 @@ div.tag-input
font-size: 90%
unselectable()
ul.compact-tags
width: 100%
margin-top: 0.5em
li
margin: 0
ul.compact-tags
width: 100%
line-height: 140%
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
transition: background-color 0.5s linear
a:focus
outline: 0
box-shadow: inset 0 0 0 2px $main-color
&.implication
background: $implied-tag-background-color
color: $implied-tag-text-color
&.new
background: $new-tag-background-color
color: $new-tag-text-color
&.duplicate
background: $duplicate-tag-background-color
color: $duplicate-tag-text-color
i
padding-right: 0.4em
.append
margin-top: 0.5em
li
margin: 0
width: 100%
line-height: 140%
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
transition: background-color 0.5s linear
a:focus
outline: 0
box-shadow: inset 0 0 0 2px $main-color
&.implication
background: $implied-tag-background-color
color: $implied-tag-text-color
&.new
background: $new-tag-background-color
color: $new-tag-text-color
&.duplicate
background: $duplicate-tag-background-color
color: $duplicate-tag-text-color
i
padding-right: 0.4em
.tag-usages, .tag-weight, .remove-tag
color: $inactive-link-color
margin-left: 0.7em
font-size: 90%
unselectable()
.tag-usages, .tag-weight
font-size: 90%
.tag-usages, .tag-weight
margin-left: 0.7em
.remove-tag
margin-right: 0.5em

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

@ -319,12 +319,12 @@ class TagInputControl extends events.EventTarget {
});
const usagesNode = document.createElement('span');
usagesNode.classList.add('append');
usagesNode.classList.add('tag-usages');
usagesNode.setAttribute(
'data-pseudo-content', actualTag ? actualTag.usages : 0);
const removalLinkNode = document.createElement('a');
removalLinkNode.classList.add('append');
removalLinkNode.classList.add('remove-tag');
removalLinkNode.setAttribute('href', '');
removalLinkNode.setAttribute('data-pseudo-content', '×');
removalLinkNode.addEventListener('click', e => {
@ -334,10 +334,10 @@ class TagInputControl extends events.EventTarget {
const listItemNode = document.createElement('li');
listItemNode.setAttribute('data-tag', tagName);
listItemNode.appendChild(removalLinkNode);
listItemNode.appendChild(tagLinkNode);
listItemNode.appendChild(searchLinkNode);
listItemNode.appendChild(usagesNode);
listItemNode.appendChild(removalLinkNode);
return listItemNode;
}
@ -402,24 +402,22 @@ class TagInputControl extends events.EventTarget {
const weightNode = document.createElement('span');
weightNode.classList.add('tag-weight');
weightNode.classList.add('append');
weightNode.setAttribute('data-pseudo-content', weight);
const removeLinkNode = document.createElement('a');
removeLinkNode.classList.add('remove-tag');
removeLinkNode.classList.add('append');
removeLinkNode.setAttribute('href', '');
removeLinkNode.setAttribute('data-pseudo-content', '×');
removeLinkNode.addEventListener('click', e => {
const removalLinkNode = document.createElement('a');
removalLinkNode.classList.add('remove-tag');
removalLinkNode.setAttribute('href', '');
removalLinkNode.setAttribute('data-pseudo-content', '×');
removalLinkNode.addEventListener('click', e => {
e.preventDefault();
listNode.removeChild(listItemNode);
this._suggestions.ban(tagName);
});
const listItemNode = document.createElement('li');
listItemNode.appendChild(removalLinkNode);
listItemNode.appendChild(weightNode);
listItemNode.appendChild(addLinkNode);
listItemNode.appendChild(removeLinkNode);
listNode.appendChild(listItemNode);
}
}