mirror of
https://github.com/maxpozdeev/mytinytodo.git
synced 2026-03-11 08:55:27 +00:00
* Facelifting: move tag filters upper in toolbar, and redesigned
This commit is contained in:
Max Pozdeev
parent
88d040eab4
commit
73668d7a7e
9 changed files with 45 additions and 26 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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?",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ class Lang extends DefaultLang
|
|||
'error' => 'Ошибка',
|
||||
'denied' => 'Доступ запрещен',
|
||||
'invalidpass' => 'Неверный пароль',
|
||||
'tagfilter' => 'Тег:',
|
||||
'addList' => 'Новый список',
|
||||
'renameList' => 'Переименовать список',
|
||||
'deleteList' => 'Вы действительно хотите удалить этот список со всеми задачами?',
|
||||
|
|
|
|||
|
|
@ -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('<span class="tag-filter tag-id-'+tagId+
|
||||
(exclude ? ' tag-filter-exclude' : '')+'"><span class="mtt-filter-header">'+
|
||||
_mtt.lang.get('tagfilter')+'</span>'+tag+'<span class="mtt-filter-close" tagid="'+tagId+'"></span></span>');
|
||||
$('#mtt-tag-filters').append('<span class="tag-filter tag-id-'+tagId+
|
||||
(exclude ? ' tag-filter-exclude' : '')+'">'+tag+'<span class="mtt-filter-close" tagid="'+tagId+'"></span></span>');
|
||||
$('#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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 199 B After Width: | Height: | Size: 199 B |
|
|
@ -1,6 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
||||
<!--<rect x="0" y="0" width="16" height="16" fill="red"/>-->
|
||||
<rect x="0" y="0" width="10" height="10" rx="2" fill="#888"/>
|
||||
<line x1="2" y1="2" x2="8" y2="8" stroke-width="1" stroke="#fff"/>
|
||||
<line x1="8" y1="2" x2="2" y2="8" stroke-width="1" stroke="#fff"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
|
||||
<g stroke-width="1.5" fill="none">
|
||||
<path d="M12.0 12.0l-8-8" stroke="#000"/>
|
||||
<path d="M4.0 12.0l+8-8" stroke="#000"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 329 B After Width: | Height: | Size: 193 B |
|
|
@ -125,13 +125,19 @@ $().ready(function(){
|
|||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<div id="mtt-tag-toolbar" style="display:none">
|
||||
<div class="tag-toolbar-content">
|
||||
<span id="mtt-tag-filters"></span>
|
||||
</div>
|
||||
<div class="tag-toolbar-close"><div id="mtt-tag-toolbar-close" class="mtt-img-button"><span></span></div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<h3>
|
||||
<span id="taskview" class="mtt-menu-button"><span class="btnstr"><?php _e('tasks');?></span> (<span id="total">0</span>) <span class="arrdown"></span></span>
|
||||
<span class="mtt-notes-showhide"><?php _e('notes');?> <a href="#" id="mtt-notes-show"><?php _e('notes_show');?></a> / <a href="#" id="mtt-notes-hide"><?php _e('notes_hide');?></a></span>
|
||||
<span id="mtt_filters"></span>
|
||||
<span id="tagcloudbtn" class="mtt-menu-button"><?php _e('tagcloud');?> <span class="arrdown2"></span></span>
|
||||
</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue