Style fixes for Percent complete settings
This commit is contained in:
raimund-schluessler
parent
4266ea1fc8
commit
ba8e676d89
10 changed files with 182 additions and 17 deletions
|
|
@ -122,6 +122,9 @@
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
#content .icon.detail-percent {
|
||||
background-position: -260px -60px;
|
||||
}
|
||||
#content .icon.task-checked,
|
||||
#content .icon.detail-checked {
|
||||
background-position: -60px -20px;
|
||||
|
|
@ -846,6 +849,13 @@
|
|||
border: 1px solid rgba(43, 136, 217, 0.65);
|
||||
box-shadow: 0 0 4px rgba(43, 136, 217, 0.32), 0 1px 1px rgba(255, 255, 255, 0.43), 0 2px 4px rgba(43, 136, 217, 0.12) inset, 0 0 4px rgba(43, 136, 217, 0.2) inset;
|
||||
}
|
||||
#task-details .body .section input[type="range"] {
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
padding-top: 10px;
|
||||
width: 200px;
|
||||
margin: 0px;
|
||||
}
|
||||
#task-details .body .section select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0px;
|
||||
|
|
@ -854,6 +864,7 @@
|
|||
width: 98px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
height: 19px;
|
||||
}
|
||||
#task-details .body .section .icon {
|
||||
left: 16px;
|
||||
|
|
@ -904,6 +915,9 @@
|
|||
#task-details .body .section.date .icon.detail-start.overdue {
|
||||
background-position: -220px -60px;
|
||||
}
|
||||
#task-details .body .section.date .icon.detail-percent {
|
||||
background-position: -260px -80px;
|
||||
}
|
||||
#task-details .body .section.date .icon.detail-reminder {
|
||||
background-position: -40px -60px;
|
||||
}
|
||||
|
|
@ -1019,6 +1033,10 @@ input.duration-input {
|
|||
margin: 2px 0 0 0.3em;
|
||||
width: 35px;
|
||||
}
|
||||
input.percent-input {
|
||||
width: 35px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.ui-widget-content {
|
||||
background: none repeat scroll 0 0 #F9F9F9;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
|
|
|
|||
|
|
@ -144,6 +144,9 @@
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
&.detail-percent{
|
||||
background-position: -260px -60px;
|
||||
}
|
||||
&.task-checked, &.detail-checked {
|
||||
background-position: -60px -20px;
|
||||
height: 20px;
|
||||
|
|
@ -879,6 +882,13 @@
|
|||
border: 1px solid rgba(43, 136, 217, 0.65);
|
||||
box-shadow: 0 0 4px rgba(43, 136, 217, 0.32), 0 1px 1px rgba(255, 255, 255, 0.43), 0 2px 4px rgba(43, 136, 217, 0.12) inset, 0 0 4px rgba(43, 136, 217, 0.2) inset;
|
||||
}
|
||||
&[type="range"]{
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
padding-top: 10px;
|
||||
width: 200px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
select{
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
|
|
@ -888,6 +898,7 @@
|
|||
width: 98px;
|
||||
margin:0;
|
||||
font-weight: normal;
|
||||
height:19px;
|
||||
}
|
||||
.icon{
|
||||
left: 16px;
|
||||
|
|
@ -939,6 +950,9 @@
|
|||
background-position: -220px -60px;
|
||||
}
|
||||
}
|
||||
&.detail-percent{
|
||||
background-position: -260px -80px;
|
||||
}
|
||||
&.detail-reminder{
|
||||
background-position: -40px -60px;
|
||||
&.overdue{
|
||||
|
|
@ -1074,6 +1088,10 @@ input.duration-input{
|
|||
margin: 2px 0 0 0.3em;
|
||||
width: 35px;
|
||||
}
|
||||
input.percent-input{
|
||||
width: 35px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.ui-widget-content{
|
||||
color: #423E3E;
|
||||
background: none repeat scroll 0 0 #F9F9F9;
|
||||
|
|
|
|||
BIN
img/sprites.png
BIN
img/sprites.png
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 15 KiB |
|
|
@ -1584,4 +1584,64 @@
|
|||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_219_" x="260" y="60" width="20" height="20"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_220_">
|
||||
<use xlink:href="#SVGID_219_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#SVGID_220_)">
|
||||
<defs>
|
||||
<rect id="SVGID_221_" x="260" y="60" width="20" height="20"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_222_">
|
||||
<use xlink:href="#SVGID_221_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<line clip-path="url(#SVGID_222_)" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="274.054" y1="65.01" x2="265.923" y2="76.621"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_222_)" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="266.787" cy="66.245" r="2.078"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_222_)" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="273.213" cy="75.422" r="2.078"/>
|
||||
|
||||
<line clip-path="url(#SVGID_222_)" fill="none" stroke="#B0B0B0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="274.065" y1="64.194" x2="265.935" y2="75.806"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_222_)" fill="none" stroke="#B0B0B0" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="266.799" cy="65.429" r="2.078"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_222_)" fill="none" stroke="#B0B0B0" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="273.225" cy="74.605" r="2.078"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_223_" x="260" y="80" width="20" height="20"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_224_">
|
||||
<use xlink:href="#SVGID_223_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#SVGID_224_)">
|
||||
<defs>
|
||||
<rect id="SVGID_225_" x="260" y="80" width="20" height="20"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_226_">
|
||||
<use xlink:href="#SVGID_225_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<line clip-path="url(#SVGID_226_)" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="274.054" y1="85.01" x2="265.923" y2="96.621"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_226_)" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="266.787" cy="86.245" r="2.078"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_226_)" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="273.213" cy="95.422" r="2.078"/>
|
||||
|
||||
<line clip-path="url(#SVGID_226_)" fill="none" stroke="#4372A7" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="274.065" y1="84.194" x2="265.935" y2="95.806"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_226_)" fill="none" stroke="#4372A7" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="266.799" cy="85.429" r="2.078"/>
|
||||
|
||||
<circle clip-path="url(#SVGID_226_)" fill="none" stroke="#4372A7" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" cx="273.225" cy="94.605" r="2.078"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 82 KiB |
|
|
@ -145,6 +145,14 @@ $timeout, $routeParams) ->
|
|||
_$location.path('/lists/'+_$scope.route.listID +
|
||||
'/tasks/' + _$scope.route.taskID + '/edit/note')
|
||||
|
||||
@_$scope.editPercent = () ->
|
||||
if _$scope.status.searchActive
|
||||
_$location.path('/search/'+_$scope.route.searchString +
|
||||
'/tasks/' + _$scope.route.taskID + '/edit/percent')
|
||||
else
|
||||
_$location.path('/lists/'+_$scope.route.listID +
|
||||
'/tasks/' + _$scope.route.taskID + '/edit/percent')
|
||||
|
||||
@_$scope.endEdit = () ->
|
||||
if _$scope.status.searchActive
|
||||
_$location.path('/search/'+_$scope.route.searchString +
|
||||
|
|
@ -164,6 +172,10 @@ $timeout, $routeParams) ->
|
|||
_tasksbusinesslayer.deleteDueDate(_$scope.route.taskID)
|
||||
_$scope.endEdit()
|
||||
|
||||
@_$scope.deletePercent = () ->
|
||||
_tasksbusinesslayer.setPercentComplete(_$scope.route.taskID,0)
|
||||
_$scope.endEdit()
|
||||
|
||||
@_$scope.deleteStartDate = () ->
|
||||
_tasksbusinesslayer.deleteStartDate(_$scope.route.taskID)
|
||||
_$scope.endEdit()
|
||||
|
|
@ -207,12 +219,15 @@ $timeout, $routeParams) ->
|
|||
_$scope.notetimer = $timeout( () ->
|
||||
_tasksbusinesslayer.setTaskNote(_$scope.task.id,_$scope.task.note)
|
||||
,5000)
|
||||
if newVal.complete != oldVal.complete
|
||||
if _$scope.completetimer
|
||||
$timeout.cancel(_$scope.completetimer)
|
||||
_$scope.completetimer = $timeout( () ->
|
||||
_tasksbusinesslayer.setPercentComplete(_$scope.task.id,
|
||||
_$scope.task.complete)
|
||||
,2000)
|
||||
,true)
|
||||
|
||||
@_$scope.setPercentComplete = (percentComplete) ->
|
||||
_tasksbusinesslayer.setPercentComplete(_$scope.route.taskID,
|
||||
percentComplete)
|
||||
|
||||
@_$scope.setstartday = (date) ->
|
||||
_tasksbusinesslayer.setStart(_$scope.route.taskID,
|
||||
moment(date,'MM/DD/YYYY'),'day')
|
||||
|
|
|
|||
24
js/app/filters/percentDetails.coffee
Normal file
24
js/app/filters/percentDetails.coffee
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
###
|
||||
|
||||
ownCloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2013
|
||||
|
||||
This library is free software; you can redistribute it and/or
|
||||
modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
License as published by the Free Software Foundation; either
|
||||
version 3 of the License, or any later version.
|
||||
|
||||
This library is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public
|
||||
License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
###
|
||||
angular.module('Tasks').filter 'percentDetails', () ->
|
||||
(percent) ->
|
||||
t('tasks_enhanced', '%s % completed').replace('%s',percent)
|
||||
|
|
@ -512,6 +512,13 @@
|
|||
return _$location.path('/lists/' + _$scope.route.listID + '/tasks/' + _$scope.route.taskID + '/edit/note');
|
||||
}
|
||||
};
|
||||
this._$scope.editPercent = function() {
|
||||
if (_$scope.status.searchActive) {
|
||||
return _$location.path('/search/' + _$scope.route.searchString + '/tasks/' + _$scope.route.taskID + '/edit/percent');
|
||||
} else {
|
||||
return _$location.path('/lists/' + _$scope.route.listID + '/tasks/' + _$scope.route.taskID + '/edit/percent');
|
||||
}
|
||||
};
|
||||
this._$scope.endEdit = function() {
|
||||
if (_$scope.status.searchActive) {
|
||||
return _$location.path('/search/' + _$scope.route.searchString + '/tasks/' + _$scope.route.taskID);
|
||||
|
|
@ -532,6 +539,10 @@
|
|||
_tasksbusinesslayer.deleteDueDate(_$scope.route.taskID);
|
||||
return _$scope.endEdit();
|
||||
};
|
||||
this._$scope.deletePercent = function() {
|
||||
_tasksbusinesslayer.setPercentComplete(_$scope.route.taskID, 0);
|
||||
return _$scope.endEdit();
|
||||
};
|
||||
this._$scope.deleteStartDate = function() {
|
||||
_tasksbusinesslayer.deleteStartDate(_$scope.route.taskID);
|
||||
return _$scope.endEdit();
|
||||
|
|
@ -576,15 +587,20 @@
|
|||
if (_$scope.notetimer) {
|
||||
$timeout.cancel(_$scope.notetimer);
|
||||
}
|
||||
return _$scope.notetimer = $timeout(function() {
|
||||
_$scope.notetimer = $timeout(function() {
|
||||
return _tasksbusinesslayer.setTaskNote(_$scope.task.id, _$scope.task.note);
|
||||
}, 5000);
|
||||
}
|
||||
if (newVal.complete !== oldVal.complete) {
|
||||
if (_$scope.completetimer) {
|
||||
$timeout.cancel(_$scope.completetimer);
|
||||
}
|
||||
return _$scope.completetimer = $timeout(function() {
|
||||
return _tasksbusinesslayer.setPercentComplete(_$scope.task.id, _$scope.task.complete);
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
this._$scope.setPercentComplete = function(percentComplete) {
|
||||
return _tasksbusinesslayer.setPercentComplete(_$scope.route.taskID, percentComplete);
|
||||
};
|
||||
this._$scope.setstartday = function(date) {
|
||||
return _tasksbusinesslayer.setStart(_$scope.route.taskID, moment(date, 'MM/DD/YYYY'), 'day');
|
||||
};
|
||||
|
|
@ -2651,6 +2667,15 @@
|
|||
|
||||
}).call(this);
|
||||
|
||||
(function() {
|
||||
angular.module('Tasks').filter('percentDetails', function() {
|
||||
return function(percent) {
|
||||
return t('tasks_enhanced', '%s % completed').replace('%s', percent);
|
||||
};
|
||||
});
|
||||
|
||||
}).call(this);
|
||||
|
||||
(function() {
|
||||
angular.module('Tasks').filter('reminderDetails', function() {
|
||||
return function(reminder, scope) {
|
||||
|
|
|
|||
|
|
@ -76,4 +76,5 @@
|
|||
'The name "%s" is already used.' => 'Der Name "%s" ist bereits vergeben.',
|
||||
'An empty name ist not allowed.' => 'Ein leerer Name ist nicht gestattet.',
|
||||
'Load more completed tasks' => 'Weitere erledigte Tasks laden',
|
||||
"%s % completed" => "Zu %s % abgeschlossen",
|
||||
);
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<li ng-animate="'animate'" ng-repeat="task in tasks | taskAtDay:day | filter:{'completed':'false'} | orderBy:sortDue | orderBy:'starred':true"
|
||||
class="task-item ui-draggable" rel="{{ task.id }}" ng-click="openDetails(task.id)" ng-class="{done: task.completed}" oc-drag-task stop-event="click">
|
||||
<div class="task-body">
|
||||
<div class="percentdone" style="width:{{ task.complete }}%; background-color:{{list.calendarcolor}};"></div>
|
||||
<div class="percentdone" style="width:{{ task.complete }}%; background-color:{{task.calendarcolor}};"></div>
|
||||
<a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted(task.id)" stop-event="click">
|
||||
<span class="icon task-checkbox" ng-class="{'task-checked': task.completed}"></span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -70,14 +70,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section detail-complete">
|
||||
<div class="section-title" ng-class="{'overdue':isOverDue(task.reminder.date)}">
|
||||
<text rel="">Percent completed</text>
|
||||
<select ng-init='percents = ["0","5","10","15","20","25","30","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]'
|
||||
ng-change="setPercentComplete(task.complete)"
|
||||
ng-model="task.complete"
|
||||
ng-options="percent for percent in percents">
|
||||
</select>
|
||||
<div class="section detail-complete" ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}" ng-click="editPercent()" stop-event="click">
|
||||
<span class="icon detail-percent"></span>
|
||||
<div class="section-title" ng-hide="route.parameter=='percent'">
|
||||
<text rel="">{{ task.complete | percentDetails}}</text>
|
||||
</div>
|
||||
<a class="detail-delete" ng-click="deletePercent()" stop-event="click">
|
||||
<span class="icon detail-delete"></span>
|
||||
</a>
|
||||
<span class="icon detail-save" ng-click="endEdit()" stop-event="click"></span>
|
||||
<div class="section-edit" ng-show="route.parameter=='percent'">
|
||||
<input class="percent-input" type="text" ng-model="task.complete">
|
||||
<input type="range" ng-model="task.complete" min="0" max="100" step ="1">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ul class="subtasks buffer"></ul> -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue