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

client/tags: make implications yellow

Browse source
This commit is contained in:
rr- 2016-07-30 12:57:34 +02:00
parent e4954140f8
commit af455b901f
3 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/css/colors.styl
View file

@ -28,9 +28,11 @@ $button-enabled-text-color = white
$button-enabled-background-color = $main-color $button-enabled-background-color = $main-color
$button-disabled-text-color = #666 $button-disabled-text-color = #666
$button-disabled-background-color = #CCC $button-disabled-background-color = #CCC
$default-tag-category-background-color = $active-tab-background-color
$new-tag-background-color = #DFC $new-tag-background-color = #DFC
$new-tag-text-color = black $new-tag-text-color = black
$default-tag-category-background-color = $active-tab-background-color $implied-tag-background-color = #FFC
$implied-tag-text-color = black
$duplicate-tag-background-color = #FDC $duplicate-tag-background-color = #FDC
$duplicate-tag-text-color = black $duplicate-tag-text-color = black
$note-overlay-background-color = rgba(255, 255, 255, 0.3) $note-overlay-background-color = rgba(255, 255, 255, 0.3)

3
client/css/forms.styl
View file

@ -174,6 +174,9 @@ input:disabled
cursor: not-allowed cursor: not-allowed
div.tag-input div.tag-input
li.implication
background: $implied-tag-background-color
color: $implied-tag-text-color
li.new li.new
background: $new-tag-background-color background: $new-tag-background-color
color: $new-tag-text-color color: $new-tag-text-color

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

@ -10,6 +10,10 @@ const TagAutoCompleteControl = require('./tag_auto_complete_control.js');
const KEY_SPACE = 32; const KEY_SPACE = 32;
const KEY_RETURN = 13; const KEY_RETURN = 13;
const SOURCE_INIT = 'init';
const SOURCE_IMPLICATION = 'implication';
const SOURCE_USER_INPUT = 'user-input';
class TagInputControl extends events.EventTarget { class TagInputControl extends events.EventTarget {
constructor(sourceInputNode) { constructor(sourceInputNode) {
super(); super();
@ -34,7 +38,7 @@ class TagInputControl extends events.EventTarget {
}, },
confirm: text => { confirm: text => {
this._tagInputNode.value = ''; this._tagInputNode.value = '';
this.addTag(text, true); this.addTag(text, SOURCE_USER_INPUT);
}, },
verticalShift: -2, verticalShift: -2,
}); });
@ -57,7 +61,7 @@ class TagInputControl extends events.EventTarget {
this.addEventListener('remove', e => this._evtTagRemoved(e)); this.addEventListener('remove', e => this._evtTagRemoved(e));
// add existing tags // add existing tags
this.addMultipleTags(this._sourceInputNode.value, false); this.addMultipleTags(this._sourceInputNode.value, SOURCE_INIT);
} }
isTaggedWith(tagName) { isTaggedWith(tagName) {
@ -66,13 +70,13 @@ class TagInputControl extends events.EventTarget {
.includes(tagName.toLowerCase()); .includes(tagName.toLowerCase());
} }
addMultipleTags(text, addImplications) { addMultipleTags(text, source) {
for (let tagName of text.split(/\s+/).filter(word => word).reverse()) { for (let tagName of text.split(/\s+/).filter(word => word).reverse()) {
this.addTag(tagName, addImplications); this.addTag(tagName, source);
} }
} }
addTag(tagName, addImplications) { addTag(tagName, source) {
tagName = tags.getOriginalTagName(tagName); tagName = tags.getOriginalTagName(tagName);
if (!tagName) { if (!tagName) {
@ -85,15 +89,16 @@ class TagInputControl extends events.EventTarget {
this.dispatchEvent(new CustomEvent('add', { this.dispatchEvent(new CustomEvent('add', {
detail: { detail: {
tagName: tagName, tagName: tagName,
source: source,
}, },
})); }));
this.dispatchEvent(new CustomEvent('change')); this.dispatchEvent(new CustomEvent('change'));
// XXX: perhaps we should aggregate suggestions from all implications // XXX: perhaps we should aggregate suggestions from all implications
// for call to the _suggestRelations // for call to the _suggestRelations
if (addImplications) { if ([SOURCE_USER_INPUT, SOURCE_IMPLICATION].includes(source)) {
for (let otherTagName of tags.getAllImplications(tagName)) { for (let otherTagName of tags.getAllImplications(tagName)) {
this.addTag(otherTagName, true, false); this.addTag(otherTagName, SOURCE_IMPLICATION);
} }
} }
} }
@ -130,6 +135,9 @@ class TagInputControl extends events.EventTarget {
if (!tags.getTagByName(tagName)) { if (!tags.getTagByName(tagName)) {
listItemNode.classList.add('new'); listItemNode.classList.add('new');
} }
if (e.detail.source === SOURCE_IMPLICATION) {
listItemNode.classList.add('implication');
}
this._tagListNode.prependChild(listItemNode); this._tagListNode.prependChild(listItemNode);
} }
} }
@ -173,7 +181,7 @@ class TagInputControl extends events.EventTarget {
_addTagsFromInput(text) { _addTagsFromInput(text) {
this._hideAutoComplete(); this._hideAutoComplete();
this.addMultipleTags(text, true); this.addMultipleTags(text, SOURCE_USER_INPUT);
this._tagInputNode.value = ''; this._tagInputNode.value = '';
// TODO: suggest relations! // TODO: suggest relations!
} }