wbrawner/tasks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix appearance of date and timepicker

Browse source
This commit is contained in:
raimund-schluessler 2014-04-20 00:26:52 +02:00
parent d18da9e2f0
commit 910d0938c8
8 changed files with 86 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
css/style.css
View file

@ -950,64 +950,70 @@ input.timepicker-input {
.ui-widget-content {
border: none;
}
.ui-datepicker {
td.ui-timepicker-hours table {
border-right: 1px solid #CCCCCC;
}
.ui-datepicker,
.ui-timepicker {
width: 185px;
}
.ui-datepicker .ui-widget-header {
.ui-datepicker .ui-widget-header,
.ui-timepicker .ui-widget-header {
background: none repeat scroll 0 0 transparent;
border: none;
color: #423E3E;
font-weight: 600;
font-size: 12px;
}
.ui-datepicker .ui-timepicker-title,
.ui-timepicker .ui-timepicker-title {
text-align: center;
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover {
.ui-timepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover,
.ui-timepicker .ui-datepicker-next-hover {
right: 2px;
top: 2px;
background: none;
border: none;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover {
.ui-timepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-timepicker .ui-datepicker-prev-hover {
left: 2px;
top: 2px;
background: none;
border: none;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
.ui-timepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-timepicker .ui-datepicker-next span {
margin-left: -4px;
margin-top: -4px;
}
.ui-datepicker .ui-icon-circle-triangle-w {
.ui-datepicker .ui-icon-circle-triangle-w,
.ui-timepicker .ui-icon-circle-triangle-w {
background-image: url("../img/sprites.svg");
background-position: -20px -60px;
height: 10px;
width: 10px;
}
.ui-datepicker .ui-icon-circle-triangle-e {
.ui-datepicker .ui-icon-circle-triangle-e,
.ui-timepicker .ui-icon-circle-triangle-e {
background-image: url("../img/sprites.svg");
background-position: -30px -60px;
height: 10px;
width: 10px;
}
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
color: #423E3E;
background: none repeat scroll 0 0 #F8F8F8;
border: none;
font-weight: bold;
}
.ui-datepicker .ui-state-default.hover,
.ui-datepicker .ui-widget-content .ui-state-default.hover,
.ui-datepicker .ui-widget-header .ui-state-default.hover {
border: none;
}
.ui-datepicker table {
.ui-datepicker table,
.ui-timepicker table {
width: 100%;
}
.ui-datepicker table thead th {
.ui-datepicker table thead th,
.ui-timepicker table thead th {
color: #A3A3A3;
font-size: 9px;
height: auto;
@ -1015,20 +1021,27 @@ input.timepicker-input {
text-align: center;
text-transform: uppercase;
}
.ui-datepicker table tr {
.ui-datepicker table tr,
.ui-timepicker table tr {
line-height: 15px;
}
.ui-datepicker table tr:hover {
.ui-datepicker table tr:hover,
.ui-timepicker table tr:hover {
background: none repeat scroll 0 0 transparent;
}
.ui-datepicker table td {
.ui-datepicker table td,
.ui-timepicker table td {
width: 14%;
padding: 0;
}
.ui-datepicker table td.ui-datepicker-today a {
.ui-datepicker table td.ui-datepicker-today a,
.ui-timepicker table td.ui-datepicker-today a {
color: #2289DA;
}
.ui-datepicker table td.selected a {
.ui-datepicker table td.selected a,
.ui-timepicker table td.selected a,
.ui-datepicker table td a.ui-state-active,
.ui-timepicker table td a.ui-state-active {
background: -moz-linear-gradient(center top, #33a3ef, #168ad4) repeat scroll 0 0 transparent !important;
border-radius: 3px 3px 3px 3px;
color: white;
@ -1036,7 +1049,9 @@ input.timepicker-input {
position: relative;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.ui-datepicker table a.ui-state-default {
.ui-datepicker table a.ui-state-default,
.ui-timepicker table a.ui-state-default {
border: none;
background: none repeat scroll 0 0 transparent;
color: #737272;
border-radius: 3px 3px 3px 3px;
@ -1048,7 +1063,9 @@ input.timepicker-input {
margin: 1px;
text-align: center;
}
.ui-datepicker table a.ui-state-default:hover {
.ui-datepicker table a.ui-state-default:hover,
.ui-timepicker table a.ui-state-default:hover {
border: none;
background: none repeat scroll 0 0 #EAEAEA;
}
div.ui-datepicker,

28
css/style.less
View file

@ -998,7 +998,10 @@ input.timepicker-input{
.ui-widget-content{
border:none;
}
.ui-datepicker {
td.ui-timepicker-hours table{
border-right: 1px solid #CCCCCC;
}
.ui-datepicker, .ui-timepicker {
width: 185px;
.ui-widget-header{
background: none repeat scroll 0 0 transparent;
@ -1007,6 +1010,9 @@ input.timepicker-input{
font-weight: 600;
font-size:12px;
}
.ui-timepicker-title{
text-align: center;
}
.ui-datepicker-next, .ui-datepicker-next-hover{
right:2px;
top:2px;
@ -1035,15 +1041,13 @@ input.timepicker-input{
height: 10px;
width: 10px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
color: #423E3E;
background: none repeat scroll 0 0 #F8F8F8;
border: none;
font-weight: bold;
&.hover{
border:none;
}
}
// .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
// color: #423E3E;
// background: none repeat scroll 0 0 #F8F8F8;
// font-weight: bold;
// &.hover{
// }
// }
table{
width:100%;
thead{
@ -1070,7 +1074,7 @@ input.timepicker-input{
color:#2289DA;
}
}
&.selected a{
&.selected a, a.ui-state-active{
background: -moz-linear-gradient(center top , #33A3EF, #168AD4) repeat scroll 0 0 transparent !important;
border-radius: 3px 3px 3px 3px;
color: white;
@ -1080,6 +1084,7 @@ input.timepicker-input{
}
}
a.ui-state-default{
border: none;
background: none repeat scroll 0 0 transparent;
color:#737272;
border-radius: 3px 3px 3px 3px;
@ -1091,6 +1096,7 @@ input.timepicker-input{
margin:1px;
text-align: center;
&:hover{
border:none;
background: none repeat scroll 0 0 #EAEAEA;
}
}

8
js/app/controllers/detailscontroller.coffee
View file

@ -154,19 +154,19 @@ $timeout, $routeParams) ->
,5000)
,true)
@_$scope.setStartDay = (date) ->
@_$scope.setstartday = (date) ->
_tasksbusinesslayer.setStartDay(_$scope.route.taskID,
moment(date,'MM/DD/YYYY'))
@_$scope.setStartTime = (date) ->
@_$scope.setstarttime = (date) ->
_tasksbusinesslayer.setStartTime(_$scope.route.taskID,
moment(date,'HH:mm'))
@_$scope.setDueDay = (date) ->
@_$scope.setdueday = (date) ->
_tasksbusinesslayer.setDueDay(_$scope.route.taskID,
moment(date,'MM/DD/YYYY'))
@_$scope.setDueTime = (date) ->
@_$scope.setduetime = (date) ->
_tasksbusinesslayer.setDueTime(_$scope.route.taskID,
moment(date,'HH:mm'))

2
js/app/directives/datepicker.coffee
View file

@ -24,7 +24,7 @@ angular.module('Tasks').directive 'datepicker', ->
link: (scope, elm, attr) ->
elm.datepicker({
onSelect: (date, inst) ->
scope['set'+attr.datepicker](date)
scope['set'+attr.datepicker+'day'](date)
scope.$apply()
beforeShow: (input, inst) ->
dp = $(inst).datepicker('widget')

4
js/app/directives/timepicker.coffee
View file

@ -24,10 +24,12 @@ angular.module('Tasks').directive 'timepicker', ->
link: (scope, elm, attr) ->
elm.timepicker({
onSelect: (date, inst) ->
scope['set'+attr.timepicker](date)
scope['set'+attr.timepicker+'time'](date)
scope.$apply()
myPosition: 'center top'
atPosition: 'center bottom'
hourText: t('tasks_enhanced','Hours')
minuteText: t('tasks_enhanced','Minutes')
# beforeShowDay: (date) ->
# if (moment(date).startOf('day')
# .diff(moment(scope.task[attr.datepicker], "YYYYMMDDTHHmmss")

16
js/public/app.js
View file

@ -140,7 +140,7 @@
link: function(scope, elm, attr) {
return elm.datepicker({
onSelect: function(date, inst) {
scope['set' + attr.datepicker](date);
scope['set' + attr.datepicker + 'day'](date);
return scope.$apply();
},
beforeShow: function(input, inst) {
@ -238,11 +238,13 @@
link: function(scope, elm, attr) {
return elm.timepicker({
onSelect: function(date, inst) {
scope['set' + attr.timepicker](date);
scope['set' + attr.timepicker + 'time'](date);
return scope.$apply();
},
myPosition: 'center top',
atPosition: 'center bottom'
atPosition: 'center bottom',
hourText: t('tasks_enhanced', 'Hours'),
minuteText: t('tasks_enhanced', 'Minutes')
});
}
};
@ -453,16 +455,16 @@
}
}
}, true);
this._$scope.setStartDay = function(date) {
this._$scope.setstartday = function(date) {
return _tasksbusinesslayer.setStartDay(_$scope.route.taskID, moment(date, 'MM/DD/YYYY'));
};
this._$scope.setStartTime = function(date) {
this._$scope.setstarttime = function(date) {
return _tasksbusinesslayer.setStartTime(_$scope.route.taskID, moment(date, 'HH:mm'));
};
this._$scope.setDueDay = function(date) {
this._$scope.setdueday = function(date) {
return _tasksbusinesslayer.setDueDay(_$scope.route.taskID, moment(date, 'MM/DD/YYYY'));
};
this._$scope.setDueTime = function(date) {
this._$scope.setduetime = function(date) {
return _tasksbusinesslayer.setDueTime(_$scope.route.taskID, moment(date, 'HH:mm'));
};
this._$scope.setreminder = function(date) {

2
l10n/de.php
View file

@ -7,6 +7,8 @@
"Done" => "Erledigt",
"All" => "Alle",
"Current" => "Aktuell",
"Hours" => "Stunden",
"Minutes" => "Minuten",
"Week" => "Woche",
"Add Task" => "Task hinzufügen",
"Set due date" => "Fälligkeitsdatum auswählen",

8
templates/part.details.php
View file

@ -27,8 +27,8 @@
</a>
<span class="icon detail-save" ng-click="endEdit()" stop-event="click"></span>
<div class="section-edit" ng-show="route.parameter=='startdate'">
<input class="datepicker-input medium focus" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.start | dateTaskList }}" datepicker="StartDay">
<input class="timepicker-input medium focus" type="text" key-value="" placeholder="hh:mm" value="{{ task.start | timeTaskList }}" timepicker="StartTime" stop-event="click">
<input class="datepicker-input medium focus" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.start | dateTaskList }}" datepicker="start">
<input class="timepicker-input medium focus" type="text" key-value="" placeholder="hh:mm" value="{{ task.start | timeTaskList }}" timepicker="start" stop-event="click">
</div>
</div>
<div class="section detail-date" ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate'}" ng-click="editDueDate()" stop-event="click">
@ -42,8 +42,8 @@
</a>
<span class="icon detail-save" ng-click="endEdit()" stop-event="click"></span>
<div class="section-edit" ng-show="route.parameter=='duedate'">
<input class="datepicker-input medium focus" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.due | dateTaskList }}" datepicker="DueDay">
<input class="timepicker-input medium focus" type="text" key-value="" placeholder="hh:mm" value="{{ task.due | timeTaskList }}" timepicker="DueTime" stop-event="click">
<input class="datepicker-input medium focus" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.due | dateTaskList }}" datepicker="due">
<input class="timepicker-input medium focus" type="text" key-value="" placeholder="hh:mm" value="{{ task.due | timeTaskList }}" timepicker="due" stop-event="click">
</div>
</div>
<div class="section detail-reminder" ng-class="{'date':isDue(task.reminder.date), 'editing':route.parameter=='reminder'}" ng-click="editReminder()" stop-event="click">