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% font-size: 90%
unselectable() unselectable()
ul.compact-tags ul.compact-tags
width: 100%
margin-top: 0.5em
li
margin: 0
width: 100% width: 100%
line-height: 140% margin-top: 0.5em
white-space: nowrap li
overflow: hidden margin: 0
text-overflow: ellipsis width: 100%
transition: background-color 0.5s linear line-height: 140%
a:focus white-space: nowrap
outline: 0 overflow: hidden
box-shadow: inset 0 0 0 2px $main-color text-overflow: ellipsis
&.implication transition: background-color 0.5s linear
background: $implied-tag-background-color a:focus
color: $implied-tag-text-color outline: 0
&.new box-shadow: inset 0 0 0 2px $main-color
background: $new-tag-background-color &.implication
color: $new-tag-text-color background: $implied-tag-background-color
&.duplicate color: $implied-tag-text-color
background: $duplicate-tag-background-color &.new
color: $duplicate-tag-text-color background: $new-tag-background-color
i color: $new-tag-text-color
padding-right: 0.4em &.duplicate
.append 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 color: $inactive-link-color
margin-left: 0.7em
font-size: 90%
unselectable() 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'); const usagesNode = document.createElement('span');
usagesNode.classList.add('append'); usagesNode.classList.add('tag-usages');
usagesNode.setAttribute( usagesNode.setAttribute(
'data-pseudo-content', actualTag ? actualTag.usages : 0); 'data-pseudo-content', actualTag ? actualTag.usages : 0);
const removalLinkNode = document.createElement('a'); const removalLinkNode = document.createElement('a');
removalLinkNode.classList.add('append'); removalLinkNode.classList.add('remove-tag');
removalLinkNode.setAttribute('href', ''); removalLinkNode.setAttribute('href', '');
removalLinkNode.setAttribute('data-pseudo-content', '×'); removalLinkNode.setAttribute('data-pseudo-content', '×');
removalLinkNode.addEventListener('click', e => { removalLinkNode.addEventListener('click', e => {
@ -334,10 +334,10 @@ class TagInputControl extends events.EventTarget {
const listItemNode = document.createElement('li'); const listItemNode = document.createElement('li');
listItemNode.setAttribute('data-tag', tagName); listItemNode.setAttribute('data-tag', tagName);
listItemNode.appendChild(removalLinkNode);
listItemNode.appendChild(tagLinkNode); listItemNode.appendChild(tagLinkNode);
listItemNode.appendChild(searchLinkNode); listItemNode.appendChild(searchLinkNode);
listItemNode.appendChild(usagesNode); listItemNode.appendChild(usagesNode);
listItemNode.appendChild(removalLinkNode);
return listItemNode; return listItemNode;
} }
@ -402,24 +402,22 @@ class TagInputControl extends events.EventTarget {
const weightNode = document.createElement('span'); const weightNode = document.createElement('span');
weightNode.classList.add('tag-weight'); weightNode.classList.add('tag-weight');
weightNode.classList.add('append');
weightNode.setAttribute('data-pseudo-content', weight); weightNode.setAttribute('data-pseudo-content', weight);
const removeLinkNode = document.createElement('a'); const removalLinkNode = document.createElement('a');
removeLinkNode.classList.add('remove-tag'); removalLinkNode.classList.add('remove-tag');
removeLinkNode.classList.add('append'); removalLinkNode.setAttribute('href', '');
removeLinkNode.setAttribute('href', ''); removalLinkNode.setAttribute('data-pseudo-content', '×');
removeLinkNode.setAttribute('data-pseudo-content', '×'); removalLinkNode.addEventListener('click', e => {
removeLinkNode.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
listNode.removeChild(listItemNode); listNode.removeChild(listItemNode);
this._suggestions.ban(tagName); this._suggestions.ban(tagName);
}); });
const listItemNode = document.createElement('li'); const listItemNode = document.createElement('li');
listItemNode.appendChild(removalLinkNode);
listItemNode.appendChild(weightNode); listItemNode.appendChild(weightNode);
listItemNode.appendChild(addLinkNode); listItemNode.appendChild(addLinkNode);
listItemNode.appendChild(removeLinkNode);
listNode.appendChild(listItemNode); listNode.appendChild(listItemNode);
} }
} }