Move task selection/filtering links on top of the list
This commit is contained in:
Thomas Bruederli
parent
8961bf3147
commit
f109d5ab30
4 changed files with 99 additions and 41 deletions
|
|
@ -4,6 +4,7 @@ $labels = array();
|
|||
$labels['navtitle'] = 'Aufgaben';
|
||||
$labels['lists'] = 'Ressourcen';
|
||||
$labels['list'] = 'Ressource';
|
||||
$labels['tags'] = 'Tags';
|
||||
|
||||
$labels['createnewtask'] = 'Neue Aufgabe eingeben';
|
||||
$labels['mark'] = 'Markieren';
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ $labels = array();
|
|||
$labels['navtitle'] = 'Tasks';
|
||||
$labels['lists'] = 'Resources';
|
||||
$labels['list'] = 'Resource';
|
||||
$labels['tags'] = 'Tags';
|
||||
|
||||
$labels['createnewtask'] = 'Create new Task';
|
||||
$labels['mark'] = 'Mark';
|
||||
|
|
|
|||
|
|
@ -50,8 +50,27 @@ body.tasklistview #searchmenulink {
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
#taskselector {
|
||||
margin: -4px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#taskselector li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 90%;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
|
||||
#taskselector li a {
|
||||
display: inline-block;
|
||||
color: #004458;
|
||||
min-width: 4em;
|
||||
padding: 0.2em 0.6em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eee;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
#taskselector li:first-child {
|
||||
|
|
@ -73,32 +92,7 @@ body.tasklistview #searchmenulink {
|
|||
color: #97b3bf;
|
||||
}
|
||||
|
||||
#taskselector li .count {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 6px;
|
||||
min-width: 1.8em;
|
||||
padding: 2px 4px;
|
||||
background: #d9ecf4;
|
||||
background: -moz-linear-gradient(top, #d9ecf4 0%, #c7e3ef 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9ecf4), color-stop(100%,#c7e3ef));
|
||||
background: -o-linear-gradient(top, #d9ecf4 0%, #c7e3ef 100%);
|
||||
background: -ms-linear-gradient(top, #d9ecf4 0%, #c7e3ef 100%);
|
||||
background: linear-gradient(top, #d9ecf4 0%, #c7e3ef 100%);
|
||||
box-shadow: inset 0 1px 1px 0 #b7d3df;
|
||||
-o-box-shadow: inset 0 1px 1px 0 #b7d3df;
|
||||
-webkit-box-shadow: inset 0 1px 1px 0 #b7d3df;
|
||||
-moz-box-shadow: inset 0 1px 1px 0 #b7d3df;
|
||||
border: 1px solid #a7c3cf;
|
||||
border-radius: 9px;
|
||||
color: #69939e;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#taskselector li.selected .count {
|
||||
#taskselector li.selected a {
|
||||
color: #fff;
|
||||
background: #005d76;
|
||||
background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
|
||||
|
|
@ -111,9 +105,49 @@ body.tasklistview #searchmenulink {
|
|||
-webkit-box-shadow: inset 0 1px 1px 0 #003645;
|
||||
-moz-box-shadow: inset 0 1px 1px 0 #003645;
|
||||
border-color: #003645;
|
||||
border-radius: 9px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#taskselector li.overdue.selected .count {
|
||||
#taskselector li .count {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: 5px;
|
||||
min-width: 1.8em;
|
||||
padding: 2px 4px;
|
||||
background: #ff3800;
|
||||
box-shadow: 0 1px 2px 0 rgba(24,24,24,0.6);
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 80%;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#taskselector li .count:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 0;
|
||||
border-color: #ff3800 transparent;
|
||||
/* reduce the damage in FF3.0 */
|
||||
display: block;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
#taskselector li .count {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 0px;
|
||||
padding: 2px 5px;
|
||||
background: #db3333;
|
||||
background: -moz-linear-gradient(top, #db3333 0%, #a82727 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db3333), color-stop(100%,#a82727));
|
||||
|
|
@ -124,8 +158,15 @@ body.tasklistview #searchmenulink {
|
|||
-o-box-shadow: inset 0 1px 1px 0 #831f1f;
|
||||
-webkit-box-shadow: inset 0 1px 1px 0 #831f1f;
|
||||
-moz-box-shadow: inset 0 1px 1px 0 #831f1f;
|
||||
border-color: #831f1f;
|
||||
border: 1px solid #831f1f;
|
||||
border-radius: 9px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 80%;
|
||||
text-shadow: none;
|
||||
}
|
||||
*/
|
||||
|
||||
#tasklists li {
|
||||
margin: 0;
|
||||
|
|
@ -206,7 +247,7 @@ body.tasklistview #searchmenulink {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: 28px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#message.statusbar {
|
||||
|
|
@ -215,13 +256,24 @@ body.tasklistview #searchmenulink {
|
|||
|
||||
#tasksview .scroller {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 35px;
|
||||
width: 100%;
|
||||
bottom: 28px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#tasksview .buttonbar {
|
||||
color: #777;
|
||||
background: #eee;
|
||||
background: -moz-linear-gradient(top, #eee 0%, #dfdfdf 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#dfdfdf));
|
||||
background: -o-linear-gradient(top, #eee 0%, #dfdfdf 100%);
|
||||
background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%);
|
||||
background: linear-gradient(top, #eee 0%, #dfdfdf 100%);
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#thelist {
|
||||
padding: 0;
|
||||
margin: 1em;
|
||||
|
|
|
|||
|
|
@ -18,17 +18,7 @@
|
|||
|
||||
<div id="selectorbox" class="uibox listbox">
|
||||
<div class="scroller">
|
||||
<ul id="taskselector" class="listing">
|
||||
<li class="all selected"><a href="#all"><roundcube:label name="tasklist.all" /><span class="count"></span></a></li>
|
||||
<li class="overdue inactive"><a href="#overdue"><roundcube:label name="tasklist.overdue" /><span class="count"></span></a></li>
|
||||
<li class="flagged"><a href="#flagged"><roundcube:label name="tasklist.flagged" /><span class="count"></span></a></li>
|
||||
<li class="today"><a href="#today"><roundcube:label name="tasklist.today" /><span class="count"></span></a></li>
|
||||
<li class="tomorrow"><a href="#tomorrow"><roundcube:label name="tasklist.tomorrow" /><span class="count"></span></a></li>
|
||||
<li class="week"><a href="#week"><roundcube:label name="tasklist.next7days" /></a></li>
|
||||
<li class="later"><a href="#later"><roundcube:label name="tasklist.later" /></a></li>
|
||||
<li class="nodate"><a href="#nodate"><roundcube:label name="tasklist.nodate" ucfirst="true" /></a></li>
|
||||
<li class="complete"><a href="#complete"><roundcube:label name="tasklist.complete" /><span class="count"></span></a></li>
|
||||
</ul>
|
||||
<h2 class="boxtitle"><roundcube:label name="tasklist.tags" /></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -54,6 +44,20 @@
|
|||
</div>
|
||||
|
||||
<div id="tasksview" class="uibox">
|
||||
<div class="boxtitle buttonbar">
|
||||
<ul id="taskselector">
|
||||
<li class="all selected"><a href="#all"><roundcube:label name="tasklist.all" /><span class="count"></span></a></li>
|
||||
<li class="overdue inactive"><a href="#overdue"><roundcube:label name="tasklist.overdue" /><span class="count"></span></a></li>
|
||||
<li class="flagged"><a href="#flagged"><roundcube:label name="tasklist.flagged" /><span class="count"></span></a></li>
|
||||
<li class="today"><a href="#today"><roundcube:label name="tasklist.today" /><span class="count"></span></a></li>
|
||||
<li class="tomorrow"><a href="#tomorrow"><roundcube:label name="tasklist.tomorrow" /><span class="count"></span></a></li>
|
||||
<li class="week"><a href="#week"><roundcube:label name="tasklist.next7days" /></a></li>
|
||||
<li class="later"><a href="#later"><roundcube:label name="tasklist.later" /></a></li>
|
||||
<li class="nodate"><a href="#nodate"><roundcube:label name="tasklist.nodate" ucfirst="true" /></a></li>
|
||||
<li class="complete"><a href="#complete"><roundcube:label name="tasklist.complete" /><span class="count"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="scroller">
|
||||
<roundcube:object name="plugin.tasks" id="thelist" />
|
||||
<div id="listmessagebox"></div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue