From c6ceb562d0e07eed797eac8fc855b69dedd26130 Mon Sep 17 00:00:00 2001 From: maxpozdeev Date: Mon, 21 Aug 2023 20:52:39 +0300 Subject: [PATCH] * add rounded corners to tags in tag list --- src/content/mytinytodo.js | 38 ++++++++++++++----------- src/content/theme/dark.css | 8 ++++-- src/content/theme/style.css | 56 +++++++++++++++++++++++++++---------- 3 files changed, 67 insertions(+), 35 deletions(-) diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js index 49b507a..66bfdd8 100644 --- a/src/content/mytinytodo.js +++ b/src/content/mytinytodo.js @@ -496,7 +496,7 @@ var mytinytodo = window.mytinytodo = _mtt = { clearTimeout(_mtt.timers.previewtag); $('#tasklist li').removeClass('not-in-tagpreview'); //tag is not escaped - addFilterTag($(this).attr('tag'), $(this).attr('tagid'), (event.metaKey || event.ctrlKey ? true : false) ); + addFilterTag(this.dataset.tag, this.dataset.tagId, (event.metaKey || event.ctrlKey ? true : false) ); return false; }); @@ -523,10 +523,12 @@ var mytinytodo = window.mytinytodo = _mtt = { if (this.options.tagPreview && !this.options.touchDevice) { $('#tasklist').on('mouseover mouseout', '.tag', function(event){ - var cl = 'tag-id-' + $(this).attr('tagid'); - var sel = (event.metaKey || event.ctrlKey) ? 'li.'+cl : 'li:not(.'+cl+')'; - if(event.type == 'mouseover') { - _mtt.timers.previewtag = setTimeout( function(){$('#tasklist '+sel).addClass('not-in-tagpreview');}, _mtt.options.tagPreviewDelay); + const cl = 'tag-id-' + this.dataset.tagId; + const sel = (event.metaKey || event.ctrlKey) ? 'li.'+cl : 'li:not(.'+cl+')'; + if (event.type == 'mouseover') { + _mtt.timers.previewtag = setTimeout( function(){ + $('#tasklist '+sel).addClass('not-in-tagpreview'); + }, _mtt.options.tagPreviewDelay); } else { clearTimeout(_mtt.timers.previewtag); @@ -1234,12 +1236,12 @@ _mtt.preparePrio = preparePrio; function prepareTagsStr(item) { - if(!item.tags || item.tags == '') return ''; - var a = item.tags.split(','); - if(!a.length) return ''; - var b = item.tags_ids.split(',') - for(var i in a) { - a[i] = ''+a[i]+''; + if (!item.tags || item.tags == '') return ''; + let a = item.tags.split(','); + if (!a.length) return ''; + const b = item.tags_ids.split(',') + for (let i in a) { + a[i] = ''+a[i]+''; } return ''+a.join(', ')+''; }; @@ -1836,14 +1838,16 @@ function saveTask(form) function toggleEditAllTags(show) { - if(show) + if (show) { - if(curList.id == -1) { - var taskId = document.getElementById('taskedit_form').id.value; + if (curList.id == -1) { + const taskId = document.getElementById('taskedit_form').id.value; loadTags(taskList[taskId].listId, fillEditAllTags); } - else if(flag.tagsChanged) loadTags(curList.id, fillEditAllTags); - else fillEditAllTags(); + else if (flag.tagsChanged) + loadTags(curList.id, fillEditAllTags); + else + fillEditAllTags(); showhide($('#alltags_hide'), $('#alltags_show')); } else { @@ -1858,7 +1862,7 @@ function fillEditAllTags() tagsList.forEach( (item) => { a.push('' + item.tag + ''); }); - const content = (a.length == 0) ? _mtt.lang.get('noTags') : a.join(', '); + const content = (a.length == 0) ? _mtt.lang.get('noTags') : a.join(''); $('#alltags').html(content); $('#alltags').show(); }; diff --git a/src/content/theme/dark.css b/src/content/theme/dark.css index 159e4f8..7a856fe 100644 --- a/src/content/theme/dark.css +++ b/src/content/theme/dark.css @@ -47,7 +47,7 @@ --color-btn-tab-hover-bg: #5a5a5a; /* Menu */ - --color-menu: #2b2b2b; + --color-menu: #252525; --color-menu-border: #555; --color-menu-hover: #5a8df0; --color-menu-text: #eaeaea; @@ -63,8 +63,10 @@ --color-tasklist-tag: var(--color-tab-text); --color-tasklist-note-link: #999; --color-tasklist-link-hover: var(--color-link); - --color-taglist-text-hover: var(--color-bg); - --color-taglist-text-hover-bg: var(--color-text-default); + --color-taglist-tag: var(--color-text-reduced); + --color-taglist-tag-bg: #444; + --color-taglist-tag-hover: var(--color-taglist-tag); + --color-taglist-tag-hover-bg: var(--color-taglist-tag-bg); --color-tasklist-listname: #bbb; --color-tasklist-listname-bg: #333; diff --git a/src/content/theme/style.css b/src/content/theme/style.css index d2b04ab..ebbccaf 100644 --- a/src/content/theme/style.css +++ b/src/content/theme/style.css @@ -67,8 +67,10 @@ --color-tasklist-tag: var(--color-tab-text); --color-tasklist-note-link: #777; --color-tasklist-link-hover: var(--color-link); /* #af0000 */ - --color-taglist-text-hover: var(--color-bg); - --color-taglist-text-hover-bg: var(--color-btn-tab-hover-bg); + --color-taglist-tag: var(--color-text-reduced); + --color-taglist-tag-bg: #e0e0e0; + --color-taglist-tag-hover: var(--color-taglist-tag); + --color-taglist-tag-hover-bg: var(--color-taglist-tag-bg); --color-tasklist-listname: #555; --color-tasklist-listname-bg: #eee; @@ -592,7 +594,13 @@ li.task-row.task-expanded .task-toggle { transform:rotate(90deg); } margin: 0px 2px; } .task-tags { padding:0px 2px; } -.task-tags .tag { font-size:0.9rem; font-weight:bold; color: var(--color-tasklist-tag); text-decoration:underline; } +.task-tags .tag { + font-size:0.9rem; + font-weight:bold; + color: var(--color-tasklist-tag); + text-decoration:underline; + cursor: pointer; +} .duedate { color:var(--color-duedate-default); padding:0px; padding-left:1px; margin-left:5px; white-space:nowrap; } .duedate:before { content:'\2192\20'; @@ -718,18 +726,29 @@ li.task-row.task-expanded .task-note-block { display:block; } } #page_taskedit .form-row-short { float:left; margin-right:12px; } #alltags .tag { - color:var(--color-tasklist-tag); - text-decoration: underline; + display: inline-block; + color:var(--color-taglist-tag); + background-color:var(--color-taglist-tag-bg); cursor: pointer; + padding: 0 0.5em; + border-radius: 1em; + background-clip: padding-box; + border: 1px solid transparent; + margin-bottom:2px; + margin-right: 3px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #alltags .tag:hover { - background-color:var(--color-taglist-text-hover-bg); - color: var(--color-taglist-text-hover); + /*background-color:var(--color-taglist-tag-hover-bg);*/ + border-color: var(--color-taglist-tag-hover-bg);; + color: var(--color-taglist-tag-hover); } .alltags-cell { width:1%; white-space:nowrap; padding-left:5px; } #page_taskedit.mtt-inadd .mtt-inedit { display:none; } #page_taskedit.mtt-inedit .mtt-inadd { display:none; } -#taskedit_id { +#taskedit_id, #taskview_id { color: var(--color-text-reduced2); font-weight: normal; margin-left: 5px; @@ -795,17 +814,24 @@ h3.page-title a.mtt-back-button { padding:5px; } #tagcloud .tag { - margin: 2px; - padding: 2px; - line-height:160%; - color: var(--color-text-default); + display: inline-block; + padding: 0 0.5em; + border-radius: 1em; + color:var(--color-taglist-tag); + background-color:var(--color-taglist-tag-bg); cursor: pointer; - text-decoration: underline; white-space: nowrap; + background-clip: padding-box; /* for transparent border */ + border: 1px solid transparent; + margin-bottom:2px; + margin-right: 1px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #tagcloud .tag:hover { - background-color:var(--color-taglist-text-hover-bg); - color: var(--color-taglist-text-hover); + border-color: var(--color-taglist-tag-hover-bg); + color: var(--color-taglist-tag-hover); } #tagcloudload { display:none;