From 73668d7a7e51b126567531fdbdbaf5158144aec5 Mon Sep 17 00:00:00 2001 From: Max Pozdeev Date: Fri, 28 Aug 2020 17:40:44 +0300 Subject: [PATCH] * Facelifting: move tag filters upper in toolbar, and redesigned --- src/lang/class.default.php | 1 - src/lang/en.php | 1 - src/lang/ru.php | 1 - src/mytinytodo.js | 20 +++++++++---- .../images/{tagcloud-close.svg => close.svg} | 0 src/themes/default/images/closetag.svg | 10 +++---- src/themes/default/index.php | 8 +++++- src/themes/default/pda.css | 2 -- src/themes/default/style.css | 28 +++++++++++++------ 9 files changed, 45 insertions(+), 26 deletions(-) rename src/themes/default/images/{tagcloud-close.svg => close.svg} (100%) diff --git a/src/lang/class.default.php b/src/lang/class.default.php index 2c2e862..e7b5ccf 100644 --- a/src/lang/class.default.php +++ b/src/lang/class.default.php @@ -18,7 +18,6 @@ class DefaultLang 'error' => "Some error occurred (click for details)", 'denied' => "Access denied", 'invalidpass' => "Wrong password", - 'tagfilter' => "Tag:", 'addList' => "Create new list", 'addListDefault' => "Todo", 'renameList' => "Rename list", diff --git a/src/lang/en.php b/src/lang/en.php index d840aae..604dc57 100644 --- a/src/lang/en.php +++ b/src/lang/en.php @@ -21,7 +21,6 @@ class Lang extends DefaultLang 'error' => "Some error occurred (click for details)", 'denied' => "Access denied", 'invalidpass' => "Wrong password", - 'tagfilter' => "Tag:", 'addList' => "Create new list", 'renameList' => "Rename list", 'deleteList' => "This will delete current list with all tasks in it.\\nAre you sure?", diff --git a/src/lang/ru.php b/src/lang/ru.php index 92fe399..888b949 100644 --- a/src/lang/ru.php +++ b/src/lang/ru.php @@ -21,7 +21,6 @@ class Lang extends DefaultLang 'error' => 'Ошибка', 'denied' => 'Доступ запрещен', 'invalidpass' => 'Неверный пароль', - 'tagfilter' => 'Тег:', 'addList' => 'Новый список', 'renameList' => 'Переименовать список', 'deleteList' => 'Вы действительно хотите удалить этот список со всеми задачами?', diff --git a/src/mytinytodo.js b/src/mytinytodo.js index fea0f3c..4c86dbe 100644 --- a/src/mytinytodo.js +++ b/src/mytinytodo.js @@ -188,9 +188,13 @@ var mytinytodo = window.mytinytodo = _mtt = { _mtt.menus.taskview.show(this); }); - $('#mtt_filters').on('click', '.tag-filter .mtt-filter-close', function(){ + $('#mtt-tag-filters').on('click', '.tag-filter .mtt-filter-close', function(){ cancelTagFilter($(this).attr('tagid')); }); + + $('#mtt-tag-toolbar-close').click(function(){ + cancelTagFilter(0); + }); $('#tagcloudbtn').click(function(){ if(!_mtt.menus.tagcloud) _mtt.menus.tagcloud = new mttMenu('tagcloud', { @@ -682,7 +686,8 @@ var mytinytodo = window.mytinytodo = _mtt = { _filters: [], clear: function() { this._filters = []; - $('#mtt_filters').html(''); + $('#mtt-tag-toolbar').hide(); + $('#mtt-tag-filters').html(''); }, addTag: function(tagId, tag, exclude) { @@ -690,9 +695,9 @@ var mytinytodo = window.mytinytodo = _mtt = { if(this._filters[i].tagId && this._filters[i].tagId == tagId) return false; } this._filters.push({tagId:tagId, tag:tag, exclude:exclude}); - $('#mtt_filters').append(''+ - _mtt.lang.get('tagfilter')+''+tag+''); + $('#mtt-tag-filters').append(''+tag+''); + $('#mtt-tag-toolbar').show(); return true; }, cancelTag: function(tagId) @@ -700,7 +705,10 @@ var mytinytodo = window.mytinytodo = _mtt = { for(var i in this._filters) { if(this._filters[i].tagId && this._filters[i].tagId == tagId) { this._filters.splice(i,1); - $('#mtt_filters .tag-filter.tag-id-'+tagId).remove(); + $('#mtt-tag-filters .tag-filter.tag-id-'+tagId).remove(); + if (this._filters.length == 0) { + $('#mtt-tag-toolbar').hide(); + } return true; } } diff --git a/src/themes/default/images/tagcloud-close.svg b/src/themes/default/images/close.svg similarity index 100% rename from src/themes/default/images/tagcloud-close.svg rename to src/themes/default/images/close.svg diff --git a/src/themes/default/images/closetag.svg b/src/themes/default/images/closetag.svg index 7777551..f7e7bd2 100644 --- a/src/themes/default/images/closetag.svg +++ b/src/themes/default/images/closetag.svg @@ -1,6 +1,6 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/themes/default/index.php b/src/themes/default/index.php index a176bb6..46f6fa3 100644 --- a/src/themes/default/index.php +++ b/src/themes/default/index.php @@ -125,13 +125,19 @@ $().ready(function(){
+ +

(0) / -

diff --git a/src/themes/default/pda.css b/src/themes/default/pda.css index 07845a8..24e6495 100644 --- a/src/themes/default/pda.css +++ b/src/themes/default/pda.css @@ -26,8 +26,6 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; } #toolbar.mtt-intask #htab_search { display:none; } #toolbar.mtt-insearch #htab_newtask { display:none; } #toolbar.mtt-insearch #htab_search { width:100%; max-width:100%; } -/*#toolbar.mtt-insearch .mtt-searchbox td { width:40%; }*/ -#taskview { margin-left:0px; } #search { padding:5px 20px; border-radius:15px; } #tasklist li { padding:0.5rem 3px; overflow:hidden; } diff --git a/src/themes/default/style.css b/src/themes/default/style.css index 9f3d5c4..24fbb50 100644 --- a/src/themes/default/style.css +++ b/src/themes/default/style.css @@ -103,11 +103,12 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } #mtt_body.no-lists #toolbar > * { visibility:hidden; } -.mtt-htabs { clear:both; padding:8px; border-bottom:2px solid #DEDEDE; background:#ededed; } +.mtt-htabs { clear:both; padding:8px; border-bottom:1px solid #DEDEDE; background:#ededed; } .mtt-img-button { padding:4px; display:block; border-radius:4px; transition:background-color 0.1s ease-in; cursor:pointer; } -.mtt-img-button:hover, .mtt-img-button.mtt-menu-button-active { background-color:#efefef; } +.mtt-img-button:hover, .mtt-img-button.mtt-menu-button-active { background-color:#efefef; cursor:pointer; } .mtt-img-button span { display:block; width:16px; height:16px; } +#toolbar .mtt-img-button:hover { background-color:#ddd; } .arrdown { display:inline-block; height:9px; width:9px; background:url(images/arrdown2.svg) no-repeat; } .arrdown2 { display:inline-block; height:7px; width:7px; background:url(images/arrdown2.svg) no-repeat; } @@ -128,7 +129,6 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } #newtask_adv { margin-left:0.5rem; } #newtask_adv span { background:url(images/newtask-ext.svg) no-repeat; } -#newtask_adv:hover { background-color:#ddd; } #mtt_body.show-all-tasks #htab_newtask, #mtt_body.readonly #htab_newtask { display:none; } @@ -148,20 +148,30 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } .mtt-searchbox-icon.mtt-icon-cancelsearch { background:url(images/search-cancel.svg) no-repeat; opacity:0.45; right:4px; cursor:pointer; transition:opacity .1s ease-in; } .mtt-searchbox-icon.mtt-icon-cancelsearch:hover { opacity:0.7; } -#searchbar { font-size:1rem; font-weight:normal; display:none; margin-top:5px; } +#searchbar { font-size:1rem; font-weight:normal; display:none; margin-top:0.5rem; } #searchbarkeyword { font-weight:bold; } -#taskview { margin-left:4px; } /* */ #mtt_body.no-lists #page_tasks h3 > * { visibility:hidden; } .mtt-notes-showhide { font-size:0.8rem; font-weight:normal; margin-left:2px; margin-right:2px; } .mtt-notes-showhide a { text-decoration:none; border-bottom:1px dotted; } -#mtt_filters { font-size:0.8rem; font-weight:normal; } -.tag-filter { margin-left:3px; margin-right:3px; } + +/* Tag Toolbar */ +#mtt-tag-toolbar { font-size:1.0rem; font-weight:normal; margin-top:0.5rem; line-height:1.5rem; display:flex; } +.tag-toolbar-content { flex:auto; } +.tag-toolbar-close { flex-shrink:0; } +.tag-toolbar-header { font-weight:normal; } +.tag-filter { margin-left:3px; margin-right:3px; display:inline-flex; align-items:center; + border:1px solid #ddd; border-radius:2rem; background-color:#ddd; padding:0.1rem 0.5rem; margin-bottom:3px; } .tag-filter-exclude { text-decoration:line-through; } .mtt-filter-header { font-weight:bold; margin-right:.33rem; } -.mtt-filter-close { cursor:pointer; position:relative; top:1px; margin-left:3px; display:inline-block; width:10px; height:10px; background:url(images/closetag.svg) no-repeat; } +.mtt-filter-close { cursor:pointer; /*position:relative; bottom:1px; */ margin-left:3px; display:inline-block; width:1em; height:1em; /* em! */ + background:url(images/closetag.svg) no-repeat; background-size:1em 1em; background-position:bottom center; + opacity:0.45; transition:opacity .1s ease-in; } +.mtt-filter-close:hover { opacity:0.7; } +#mtt-tag-toolbar-close span { background:url(images/close.svg) no-repeat; } + .task-left { float:left; } .task-toggle { visibility:hidden; margin-top:1px; cursor:pointer; width:16px; height:16px; float:left; @@ -291,7 +301,7 @@ a.mtt-back-button { font-size:0.8rem; } #tagcloud .w9 { font-size:170%; } #tagcloudcancel { float:right; } -#tagcloudcancel span { background:url(images/tagcloud-close.svg) no-repeat; } +#tagcloudcancel span { background:url(images/close.svg) no-repeat; } .ui-datepicker { width:190px; z-index:202; border: 1px solid #cccccc; background: #ffffff; display:none; padding:2px; box-shadow:1px 2px 5px rgba(0,0,0,0.5); border-radius:5px; } .ui-datepicker-trigger { cursor:pointer; vertical-align:text-bottom; margin-left:2px; margin-right:2px; }