diff --git a/public/css/tags.css b/public/css/tags.css index 87b428a9f..b6985c8a9 100644 --- a/public/css/tags.css +++ b/public/css/tags.css @@ -109,6 +109,7 @@ overflow: hidden; text-align: left; white-space: nowrap; + text-shadow: none !important; } .tags_inline .tag { @@ -128,6 +129,13 @@ cursor: pointer; opacity: 0.6; filter: brightness(0.8); + transition: opacity 200ms; +} + +.rm_tag_filter .tag:hover { + + opacity: 1; + filter: brightness(1); } .tags_view, @@ -163,4 +171,4 @@ -1px 1px 0px black, 1px -1px 0px black; opacity: 1; -} +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 36c19dd27..97e5c2b68 100644 --- a/public/index.html +++ b/public/index.html @@ -3805,6 +3805,7 @@
+
 entries
diff --git a/public/scripts/tags.js b/public/scripts/tags.js index 7f5809b88..c5106e7d7 100644 --- a/public/scripts/tags.js +++ b/public/scripts/tags.js @@ -263,6 +263,7 @@ function createNewTag(tagName) { id: uuidv4(), name: tagName, color: '', + color2: '', }; tags.push(tag); return tag; @@ -273,12 +274,12 @@ function appendTagToList(listElement, tag, { removable, selectable, action, isGe return; } - let tagElement = $('#tag_template .tag').clone(); tagElement.attr('id', tag.id); - tagElement.css('color', 'var(--SmartThemeBodyColor)'); + //tagElement.css('color', 'var(--SmartThemeBodyColor)'); tagElement.css('background-color', tag.color); + tagElement.css('color', tag.color2); tagElement.find('.tag_name').text(tag.name); const removeButton = tagElement.find(".tag_remove"); @@ -462,22 +463,40 @@ function onViewTagsListClick() { template.find('.tag_view_counter_value').text(count); template.find('.tag_view_name').text(tag.name); template.find('.tag_view_name').addClass('tag'); + template.find('.tag_view_name').css('background-color', tag.color); + template.find('.tag_view_name').css('color', tag.color2); + const colorPickerId = tag.id + "-tag-color"; + const colorPicker2Id = tag.id + "-tag-color2"; + template.find('.tagColorPickerHolder').html( `` ); + template.find('.tagColorPicker2Holder').html( + `` + ); template.find('.tag-color').attr('id', colorPickerId); + template.find('.tag-color2').attr('id', colorPicker2Id); + list.appendChild(template.get(0)); setTimeout(function () { document.querySelector(`.tag-color[id="${colorPickerId}"`).addEventListener('change', (evt) => { onTagColorize(evt); }); + + }, 100); + + setTimeout(function () { + document.querySelector(`.tag-color2[id="${colorPicker2Id}"`).addEventListener('change', (evt) => { + onTagColorize2(evt); + }); }, 100); $(colorPickerId).color = tag.color; + $(colorPicker2Id).color = tag.color2; } callPopup(list.outerHTML, 'text'); @@ -520,6 +539,18 @@ function onTagColorize(evt) { saveSettingsDebounced(); } +function onTagColorize2(evt) { + console.debug(evt); + const id = $(evt.target).closest('.tag_view_item').attr('id'); + const newColor = evt.detail.rgba; + $(evt.target).parent().parent().find('.tag_view_name').css('color', newColor); + $(`.tag[id="${id}"]`).css('color', newColor); + const tag = tags.find(x => x.id === id); + tag.color2 = newColor; + console.debug(tag); + saveSettingsDebounced(); +} + function onTagListHintClick() { console.log($(this)); $(this).toggleClass('selected');