调整缓存列表样式,缓存时间在Key右上角,支持删除指定缓存

This commit is contained in:
Argo-Lenovo 2016-11-04 17:42:14 +08:00
parent e6f310fe89
commit dd67c1b360
2 changed files with 217 additions and 200 deletions

View File

@ -1,182 +1,189 @@
/*--------------Tasks Widget--------------*/ /*--------------Tasks Widget--------------*/
.task-content { .task-content {
margin-bottom: 30px; margin-bottom: 30px;
} }
.tasks-widget .task-content:after { .tasks-widget .task-content:after {
clear: both; clear: both;
} }
.tasks-widget .task-footer { .tasks-widget .task-footer {
margin-top: 5px; margin-top: 5px;
} }
.tasks-widget .task-footer:after, .tasks-widget .task-footer:after,
.tasks-widget .task-footer:before { .tasks-widget .task-footer:before {
content: ""; content: "";
display: table; display: table;
line-height: 0; line-height: 0;
} }
.tasks-widget .task-footer:after { .tasks-widget .task-footer:after {
clear: both; clear: both;
} }
.tasks-widget .task-list { .tasks-widget .task-list {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.tasks-widget .task-list > li { .tasks-widget .task-list > li {
position: relative; position: relative;
padding: 10px 5px; border-bottom: 1px dashed #eaeaea;
border-bottom: 1px dashed #eaeaea; }
}
.tasks-widget .task-list li.last-line {
.tasks-widget .task-list li.last-line { border-bottom: none;
border-bottom: none; }
}
.tasks-widget .task-list li > .task-bell {
.tasks-widget .task-list li > .task-bell { margin-left: 10px;
margin-left: 10px; }
}
.tasks-widget .task-list li > .task-checkbox {
.tasks-widget .task-list li > .task-checkbox { float: left;
float: left; width: 30px;
width: 30px; }
}
.tasks-widget .task-list li > .task-title {
.tasks-widget .task-list li > .task-title { overflow: hidden;
overflow: hidden; margin-right: 10px;
margin-right: 10px; height: 46px;
} }
.tasks-widget .task-list li > .task-title .task-value { .tasks-widget .task-list li > .task-title .task-value {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
left: 190px; left: 190px;
right: 40px; right: 40px;
display: inline-block; top: 16px;
} display: inline-block;
padding-left: 16px;
.tasks-widget .task-list li > .task-title .badge { }
position: absolute;
display: inline-block; .tasks-widget .task-list li > .task-title .badge {
left: 25px; position: relative;
top: 2px; display: inline-block;
} top: -19px;
left: -12px;
.tasks-widget .task-list li > .task-title .label-success { }
background-color: #5cb85c;
} .tasks-widget .task-list li > .task-title .label-success {
background-color: #5cb85c;
.tasks-widget .task-list li > .task-config { }
position: absolute;
top: 10px; .tasks-widget .task-list li > .task-title .hidden-phone {
right: 10px; padding-top: 14px;
} }
.tasks-widget .task-list li .task-title .task-title-sp { .tasks-widget .task-list li > .task-config {
margin-right: 5px; position: absolute;
max-width: 170px; top: 10px;
overflow: hidden; right: 10px;
white-space: nowrap; }
text-overflow: ellipsis;
display: inline-block; .tasks-widget .task-list li .task-title .task-title-sp {
} margin-right: 5px;
max-width: 170px;
.tasks-widget .task-list li.task-done .task-title-sp { overflow: hidden;
text-decoration: line-through; white-space: nowrap;
color: #bbbbbb; text-overflow: ellipsis;
} display: inline-block;
padding-top: 17px;
.tasks-widget .task-list li.task-done { }
background: #f6f6f6;
} .tasks-widget .task-list li.task-done .task-title-sp {
text-decoration: line-through;
.tasks-widget .task-list li.task-done:hover { color: #bbbbbb;
background: #f4f4f4; }
}
.tasks-widget .task-list li.task-done {
.tasks-widget .task-list li:hover { background: #f6f6f6;
background: #f9f9f9; }
}
.tasks-widget .task-list li.task-done:hover {
.tasks-widget .task-list li .task-config { background: #f4f4f4;
display: none; }
}
.tasks-widget .task-list li:hover {
.tasks-widget .task-list li:hover > .task-config { background: #f9f9f9;
display: block; }
margin-bottom: 0 !important;
} .tasks-widget .task-list li .task-config {
display: none;
#sortable { }
list-style-type: none;
margin: 0 0 20px 0; .tasks-widget .task-list li:hover > .task-config {
padding: 0; display: block;
width: 100%; margin-bottom: 0 !important;
} }
#sortable li { #sortable {
padding-left: 3em; list-style-type: none;
font-size: 12px; margin: 0 0 20px 0;
} padding: 0;
width: 100%;
#sortable li i { }
position: absolute;
left: 6px; #sortable li {
padding: 4px 10px 0 10px; padding-left: 3em;
cursor: pointer; font-size: 12px;
} }
#sortable li input[type=checkbox] { #sortable li i {
margin-top: 0; position: absolute;
} left: 6px;
padding: 19px 10px;
.ui-sortable > li { cursor: pointer;
padding: 18px 0 15px 35px !important; }
position: relative;
background: #f5f6f8; #sortable li input[type=checkbox] {
margin-bottom: 2px; margin-top: 0;
border-bottom: none !important; }
}
.ui-sortable > li {
.ui-sortable li.list-primary { padding-left: 35px !important;
border-left: 3px solid #41CAC0; position: relative;
} background: #f5f6f8;
margin-bottom: 2px;
.ui-sortable li.list-success { border-bottom: none !important;
border-left: 3px solid #78CD51; }
}
.ui-sortable li.list-primary {
.ui-sortable li.list-danger { border-left: 3px solid #41CAC0;
border-left: 3px solid #FF6C60; }
}
.ui-sortable li.list-success {
.ui-sortable li.list-warning { border-left: 3px solid #78CD51;
border-left: 3px solid #F1C500; }
}
.ui-sortable li.list-danger {
.ui-sortable li.list-info { border-left: 3px solid #FF6C60;
border-left: 3px solid #58C9F3; }
}
.ui-sortable li.list-warning {
.ui-sortable li.list-inverse { border-left: 3px solid #F1C500;
border-left: 3px solid #BEC3C7; }
}
.ui-sortable li.list-info {
@media only screen and (max-width: 320px) { border-left: 3px solid #58C9F3;
}
.tasks-widget .task-config-btn {
float: inherit; .ui-sortable li.list-inverse {
display: block; border-left: 3px solid #BEC3C7;
} }
.tasks-widget .task-list-projects li > .label { @media only screen and (max-width: 320px) {
margin-bottom: 5px;
} .tasks-widget .task-config-btn {
} float: inherit;
display: block;
}
.tasks-widget .task-list-projects li > .label {
margin-bottom: 5px;
}
}

View File

@ -1,22 +1,32 @@
$(function () { $(function () {
var html = '<li class="list-primary"><i class="fa fa-ellipsis-v"></i><div class="task-title"><span class="task-title-sp">{2}</span><span class="badge badge-sm label-success">{0}</span><span class="task-value">{3}</span><div class="pull-right hidden-phone"><button class="btn btn-danger btn-xs fa fa-trash-o" data-val="{1}"></button></div></div></li>'; var html = '<li class="list-primary"><i class="fa fa-ellipsis-v"></i><div class="task-title"><span class="task-title-sp">{2}</span><span class="badge badge-sm label-success">{0}</span><span class="task-value tooltips" data-placement="top" data-original-title="{3}">{3}</span><div class="pull-right hidden-phone"><button class="btn btn-danger btn-xs fa fa-trash-o tooltips" data-key="{1}" data-placement="left" data-original-title="{1}"></button></div></div></li>';
$.ajax({
url: '../../CacheList.axd', function listCache(options) {
type: 'GET', $.ajax({
success: function (result) { url: options.url,
if (result) { type: 'GET',
result = $.parseJSON(result); success: function (result) {
if ($.isArray(result)) { if (result) {
var content = result.map(function (ele) { result = $.parseJSON(result);
return $.format(html, ele.Interval, ele.Key, ele.Desc, ele.Value); if ($.isArray(result)) {
}).join(''); var content = result.map(function (ele) {
$('#sortable').append(content); return $.format(html, ele.Interval, ele.Key, ele.Desc, ele.Value);
}).join('');
$('#sortable').html(content);
$('.tooltips').tooltip();
$('#sortable .btn').click(function () {
var key = $(this).attr('data-key');
listCache({ url: $.format('../../CacheList.axd?cacheKey={0}', key) });
});
}
} }
else {
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
} }
else { });
} }
},
error: function (XMLHttpRequest, textStatus, errorThrown) { listCache({ url: '../../CacheList.axd' });
}
});
}); });