mirror of https://github.com/nextcloud/calendar
Slightly Better Looking DatePicker
This commit is contained in:
parent
f5c16872cf
commit
5b2bc6ed20
|
@ -3869,20 +3869,20 @@ angular.module("template/datepicker/day.html", []).run(["$templateCache", functi
|
|||
"<table role=\"grid\" aria-labelledby=\"{{uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
|
||||
" <thead>\n" +
|
||||
" <tr>\n" +
|
||||
" <th colspan=\"{{5 + showWeeks}}\"><button id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"button\" id=\"datecontrol_left\" ng-click=\"move(-1)\" tabindex=\"-1\"> < </button></th>\n" +
|
||||
" <th><button type=\"button\" id=\"datecontrol_right\" ng-click=\"move(1)\" tabindex=\"-1\"> > </button></th>\n" +
|
||||
" <th colspan=\"{{5 + showWeeks}}\"><div id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"datepicker_current\" ng-click=\"toggleMode()\" tabindex=\"-1\">{{title}}</div></th>\n" +
|
||||
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_left\" ng-click=\"move(-1)\" tabindex=\"-1\"> < </button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_right\" ng-click=\"move(1)\" tabindex=\"-1\"> > </button></th>\n" +
|
||||
" </tr>\n" +
|
||||
" <tr>\n" +
|
||||
" <th ng-show=\"showWeeks\" class=\"text-center\"></th>\n" +
|
||||
" <th ng-repeat=\"label in labels track by $index\" class=\"text-center\"><small aria-label=\"{{label.full}}\">{{label.abbr}}</small></th>\n" +
|
||||
" <th ng-show=\"showWeeks\"></th>\n" +
|
||||
" <th ng-repeat=\"label in labels track by $index\" class=\"days\"><span class=\"day\" aria-label=\"{{label.full}}\">{{label.abbr}}</span></th>\n" +
|
||||
" </tr>\n" +
|
||||
" </thead>\n" +
|
||||
" <tbody>\n" +
|
||||
" <tr ng-repeat=\"row in rows track by $index\">\n" +
|
||||
" <td ng-show=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n" +
|
||||
" <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{dt.uid}}\" aria-disabled=\"{{!!dt.disabled}}\">\n" +
|
||||
" <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"{'text-muted': dt.secondary, 'text-info': dt.current}\">{{dt.label}}</span></button>\n" +
|
||||
" <td ng-repeat=\"dt in row track by dt.date\" class=\"dates\" role=\"gridcell\" id=\"{{dt.uid}}\" aria-disabled=\"{{!!dt.disabled}}\">\n" +
|
||||
" <a class=\"date\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"{'text-muted': dt.secondary, 'text-info': dt.current}\">{{dt.label}}</span></a>\n" +
|
||||
" </td>\n" +
|
||||
" </tr>\n" +
|
||||
" </tbody>\n" +
|
||||
|
@ -3895,9 +3895,9 @@ angular.module("template/datepicker/month.html", []).run(["$templateCache", func
|
|||
"<table role=\"grid\" aria-labelledby=\"{{uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
|
||||
" <thead>\n" +
|
||||
" <tr>\n" +
|
||||
" <th><button id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"> < </button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"> > </button></th>\n" +
|
||||
" <th><div id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"datepicker_current\" ng-click=\"toggleMode()\" tabindex=\"-1\">{{title}}</div></th>\n" +
|
||||
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_left\" ng-click=\"move(-1)\" tabindex=\"-1\"> < </button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_right\" ng-click=\"move(1)\" tabindex=\"-1\"> > </button></th>\n" +
|
||||
" </tr>\n" +
|
||||
" </thead>\n" +
|
||||
" <tbody>\n" +
|
||||
|
@ -3931,9 +3931,9 @@ angular.module("template/datepicker/year.html", []).run(["$templateCache", funct
|
|||
"<table role=\"grid\" aria-labelledby=\"{{uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
|
||||
" <thead>\n" +
|
||||
" <tr>\n" +
|
||||
" <th colspan=\"3\"><button id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"\" ng-click=\"move(-1)\" tabindex=\"-1\"> < </button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"\" ng-click=\"move(1)\" tabindex=\"-1\"> > </button></th>\n" +
|
||||
" <th colspan=\"3\"><div id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"datepicker_current\" ng-click=\"toggleMode()\" tabindex=\"-1\">{{title}}</div></th>\n" +
|
||||
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_left\" ng-click=\"move(-1)\" tabindex=\"-1\"> < </button></th>\n" +
|
||||
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_right\" ng-click=\"move(1)\" tabindex=\"-1\"> > </button></th>\n" +
|
||||
" </tr>\n" +
|
||||
" </thead>\n" +
|
||||
" <tbody>\n" +
|
||||
|
|
|
@ -19,4 +19,78 @@
|
|||
* 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/>.
|
||||
*
|
||||
*/
|
||||
*/
|
||||
|
||||
#datepicker .datepicker_current {
|
||||
float: left;
|
||||
width: 220px;
|
||||
height: 26px;
|
||||
margin-top: 6px;
|
||||
margin-left: 6px;
|
||||
padding-top: 6px;
|
||||
background-color: white;
|
||||
border: 1px solid rgba(190, 190, 190, 0.9);
|
||||
border-radius: 3px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
color: rgb(85, 85, 85);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#datepicker .datepicker_toggle {
|
||||
height: 34px;
|
||||
margin-top: 6px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 0px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#datepicker .datepicker_left {
|
||||
width: 33px;
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
#datepicker .datepicker_right {
|
||||
width: 33px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
#datepicker .days {
|
||||
color: rgb(85, 85, 85);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: .7em .3em;
|
||||
border: 0;
|
||||
width:30px;
|
||||
}
|
||||
|
||||
#datepicker .dates {
|
||||
padding:1px;
|
||||
}
|
||||
|
||||
#datepicker .date {
|
||||
border: 1px solid #ddd;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
padding: .2em;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
max-width: 33px;
|
||||
}
|
||||
|
||||
#datepicker .date.active {
|
||||
border: 1px solid #1d2d44;
|
||||
background: #f8f8f8;
|
||||
font-weight: bold;
|
||||
color: #1d2d44;
|
||||
}
|
Loading…
Reference in New Issue