(css) Improve sgTimepicker
Francis Lachapelle
parent
6bbd182559
commit
b4af6f5033
|
|
@ -5,307 +5,319 @@
|
|||
.module('SOGo.Common')
|
||||
.directive('sgTimePane', timePaneDirective);
|
||||
|
||||
function timePaneDirective() {
|
||||
return {
|
||||
template:
|
||||
'<div class="sg-time-pane">' +
|
||||
'<div class="hours-pane"><div ng-repeat="hoursBigLine in hours" layout="row" layout-sm="column" ><div ng-repeat="hoursLine in hoursBigLine" layout="row" class="hours" >' +
|
||||
'<div flex layout="row" layout-align="center center" ng-repeat="hour in hoursLine">' +
|
||||
'<md-button class="hourBtn md-fab md-mini" id="{{hour.id}}" ng-click="hourClickHandler(hour.displayName)">{{hour.displayName}}</md-button>'+
|
||||
'</div></div></div></div>' +
|
||||
'<div ng-repeat="minutesLine in min5" layout="row" class="min5" ng-show="is5min()">' +
|
||||
'<div flex layout="row" layout-align="center center" ng-repeat="minute in minutesLine">' +
|
||||
'<md-button class="minuteBtn md-fab md-mini" id="{{minute.id}}" ng-click="minuteClickHandler(minute.displayName)">{{minute.displayName}}</md-button>'+
|
||||
'</div></div>' +
|
||||
'<div ng-repeat="minutesLine in min1" layout="row" class="min1" ng-hide="is5min()">' +
|
||||
'<div flex layout="row" layout-align="center center" ng-repeat="minute in minutesLine">' +
|
||||
'<md-button class="minuteBtn md-fab md-mini" id="{{minute.id}}" ng-click="minuteClickHandler(minute.displayName)">{{minute.displayName}}</md-button>' +
|
||||
'</div></div>' +
|
||||
'<div flex layout="row" layout-align="center center" class="toggle-pane"><md-button class="toggleBtn md-fab md-mini" ng-bind="getToggleBtnLbl()" ng-click="toggleManual5min()"></md-button></div></div>',
|
||||
scope: {},
|
||||
require: ['ngModel', 'sgTimePane'],
|
||||
controller: TimePaneCtrl,
|
||||
controllerAs: 'ctrl',
|
||||
bindToController: true,
|
||||
link: function(scope, element, attrs, controllers) {
|
||||
var ngModelCtrl = controllers[0];
|
||||
var sgTimePaneCtrl = controllers[1];
|
||||
console.log(element);
|
||||
var timePaneElement = element;
|
||||
sgTimePaneCtrl.configureNgModel(ngModelCtrl,sgTimePaneCtrl, timePaneElement);
|
||||
}
|
||||
};
|
||||
function timePaneDirective() {
|
||||
return {
|
||||
template: [
|
||||
'<div class="sg-time-pane">',
|
||||
' <div class="hours-pane">',
|
||||
' <div ng-repeat="hoursBigLine in hours" layout="row" layout-sm="column">',
|
||||
' <div ng-repeat="hoursLine in hoursBigLine" layout="row" class="hours">',
|
||||
' <md-button class="hourBtn md-fab md-mini" ng-repeat="hour in hoursLine" id="{{hour.id}}"',
|
||||
' ng-click="hourClickHandler(hour.displayName)">{{hour.displayName}}</md-button>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="min5" ng-show="is5min()">',
|
||||
' <div layout="row" layout-sm="column">',
|
||||
' <div ng-repeat="minutesLine in min5" layout="row">',
|
||||
' <md-button class="minuteBtn md-fab md-mini" ng-repeat="minute in minutesLine" id="{{minute.id}}"',
|
||||
' ng-click="minuteClickHandler(minute.displayName)">{{minute.displayName}}</md-button>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="min1" ng-hide="is5min()" layout="row" layout-sm="column" layout-wrap>',
|
||||
' <div ng-repeat="minutesLine in min1" layout="row" layout-align="space-around center" flex="50">',
|
||||
' <md-button class="minuteBtn md-fab md-mini" ng-repeat="minute in minutesLine" id="{{minute.id}}"',
|
||||
' ng-click="minuteClickHandler(minute.displayName)">{{minute.displayName}}</md-button>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div flex layout="row" layout-align="center center" class="toggle-pane">',
|
||||
' <md-button class="toggleBtn md-fab md-mini" ng-bind="getToggleBtnLbl()" ng-click="toggleManual5min()"></md-button>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join(''),
|
||||
scope: {},
|
||||
require: ['ngModel', 'sgTimePane'],
|
||||
controller: TimePaneCtrl,
|
||||
controllerAs: 'ctrl',
|
||||
bindToController: true,
|
||||
link: function(scope, element, attrs, controllers) {
|
||||
var ngModelCtrl = controllers[0];
|
||||
var sgTimePaneCtrl = controllers[1];
|
||||
console.log(element);
|
||||
var timePaneElement = element;
|
||||
sgTimePaneCtrl.configureNgModel(ngModelCtrl,sgTimePaneCtrl, timePaneElement);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/** Class applied to the selected hour or minute cell/. */
|
||||
var SELECTED_TIME_CLASS = 'md-bg';
|
||||
|
||||
/** Class applied to the focused hour or minute cell/. */
|
||||
var FOCUSED_TIME_CLASS = 'md-focus';
|
||||
|
||||
/** Next identifier for calendar instance. */
|
||||
var nextTimePaneUniqueId = 0;
|
||||
|
||||
function TimePaneCtrl($element, $attrs, $scope, $animate, $q, $mdConstant,
|
||||
$mdTheming, $$mdDateUtil, $mdDateLocale, $mdInkRipple, $mdUtil) {
|
||||
var m;
|
||||
this.$scope = $scope;
|
||||
this.$element = $element;
|
||||
this.timePaneElement = $element[0].querySelector('.sg-time-pane');
|
||||
this.$animate = $animate;
|
||||
this.$q = $q;
|
||||
this.$mdInkRipple = $mdInkRipple;
|
||||
this.$mdUtil = $mdUtil;
|
||||
this.keyCode = $mdConstant.KEY_CODE;
|
||||
this.dateUtil = $$mdDateUtil;
|
||||
this.id = nextTimePaneUniqueId++;
|
||||
this.ngModelCtrl = null;
|
||||
this.selectedTime = null;
|
||||
this.displayTime = null;
|
||||
this.isInitialized = false;
|
||||
|
||||
$scope.hours=[];
|
||||
$scope.hours[0]=[];
|
||||
$scope.hours[0][0]=[];
|
||||
$scope.hours[0][1]=[];
|
||||
$scope.hours[1]=[];
|
||||
$scope.hours[1][0]=[];
|
||||
$scope.hours[1][1]=[];
|
||||
for(var i=0; i<6; i++){
|
||||
$scope.hours[0][0][i] = {id:'tp-'+this.id+'-hour-'+i, displayName:i<10?"0"+i:""+i, selected:false};
|
||||
$scope.hours[0][1][i] = {id:'tp-'+this.id+'-hour-'+(i+6),displayName:(i+6)<10?"0"+(i+6):""+(i+6), selected:false};
|
||||
$scope.hours[1][0][i] = {id:'tp-'+this.id+'-hour-'+(i+12), displayName:""+(i+12), selected:false};
|
||||
$scope.hours[1][1][i] = {id:'tp-'+this.id+'-hour-'+(i+18), displayName:""+(i+18), selected:false};
|
||||
}
|
||||
|
||||
/** Class applied to the selected hour or minute cell/. */
|
||||
//var SELECTED_TIME_CLASS = 'md-calendar-selected-date';
|
||||
//var SELECTED_TIME_CLASS1 = 'md-raised';
|
||||
var SELECTED_TIME_CLASS2 = 'md-primary';
|
||||
|
||||
/** Class applied to the focused hour or minute cell/. */
|
||||
var FOCUSED_TIME_CLASS = 'md-focus';
|
||||
|
||||
/** Next identifier for calendar instance. */
|
||||
var nextTimePaneUniqueId = 0;
|
||||
|
||||
function TimePaneCtrl($element, $attrs, $scope, $animate, $q, $mdConstant,
|
||||
$mdTheming, $$mdDateUtil, $mdDateLocale, $mdInkRipple, $mdUtil) {
|
||||
var m;
|
||||
this.$scope = $scope;
|
||||
this.$element = $element;
|
||||
this.timePaneElement = $element[0].querySelector('.sg-time-pane');
|
||||
this.$animate = $animate;
|
||||
this.$q = $q;
|
||||
this.$mdInkRipple = $mdInkRipple;
|
||||
this.$mdUtil = $mdUtil;
|
||||
this.keyCode = $mdConstant.KEY_CODE;
|
||||
this.dateUtil = $$mdDateUtil;
|
||||
this.id = nextTimePaneUniqueId++;
|
||||
this.ngModelCtrl = null;
|
||||
this.selectedTime = null;
|
||||
this.displayTime = null;
|
||||
this.isInitialized = false;
|
||||
|
||||
$scope.hours=[];
|
||||
$scope.hours[0]=[];
|
||||
$scope.hours[0][0]=[];
|
||||
$scope.hours[0][1]=[];
|
||||
$scope.hours[1]=[];
|
||||
$scope.hours[1][0]=[];
|
||||
$scope.hours[1][1]=[];
|
||||
for(var i=0; i<6; i++){
|
||||
$scope.hours[0][0][i] = {id:'tp-'+this.id+'-hour-'+i, displayName:i<10?"0"+i:""+i, selected:false};
|
||||
$scope.hours[0][1][i] = {id:'tp-'+this.id+'-hour-'+(i+6),displayName:(i+6)<10?"0"+(i+6):""+(i+6), selected:false};
|
||||
$scope.hours[1][0][i] = {id:'tp-'+this.id+'-hour-'+(i+12), displayName:""+(i+12), selected:false};
|
||||
$scope.hours[1][1][i] = {id:'tp-'+this.id+'-hour-'+(i+18), displayName:""+(i+18), selected:false};
|
||||
}
|
||||
|
||||
$scope.min5=[];
|
||||
$scope.min5[0]=[];
|
||||
$scope.min5[1]=[];
|
||||
for(i=0; i<6; i++){
|
||||
m=i*5;
|
||||
$scope.min5[0][i] = {id:'tp-'+this.id+'-minute5-'+m, displayName:m<10?":0"+m:":"+m, selected:true};
|
||||
$scope.min5[1][i] = {id:'tp-'+this.id+'-minute5-'+(m+30), displayName:":"+(m+30), selected:false};
|
||||
}
|
||||
|
||||
$scope.min1=[];
|
||||
for(i=0; i<12; i++){
|
||||
$scope.min1[i]=[];
|
||||
for(var ii=0; ii<5; ii++){
|
||||
m=i*5 + ii;
|
||||
$scope.min1[i][ii] = {id:'tp-'+this.id+'-minute-'+m, displayName:m<10?":0"+m:":"+m, selected:true};
|
||||
}
|
||||
}
|
||||
|
||||
$scope.show5min=true;
|
||||
$scope.getToggleBtnLbl = function() {
|
||||
return ($scope.is5min()) ? '>>' : '<<';
|
||||
};
|
||||
$scope.toggleManual5min = function() {
|
||||
$scope.manual5min = !$scope.is5min();
|
||||
};
|
||||
$scope.is5min=function(){
|
||||
if($scope.manual5min === true || $scope.manual5min === false) {
|
||||
return $scope.manual5min;
|
||||
}
|
||||
else {
|
||||
return $scope.show5min;
|
||||
}
|
||||
};
|
||||
|
||||
if (!$attrs.tabindex) {
|
||||
$element.attr('tabindex', '-1');
|
||||
}
|
||||
|
||||
var self = this;
|
||||
|
||||
this.hourClickHandler = function(displayVal) {
|
||||
var updated = new Date(self.displayTime).setHours(Number(displayVal));
|
||||
self.setNgModelValue(updated, 'hours');
|
||||
};
|
||||
$scope.hourClickHandler = this.hourClickHandler;
|
||||
|
||||
this.minuteClickHandler = function(displayVal) {
|
||||
//remove leading ':'
|
||||
var val = displayVal.substr(1);
|
||||
var updated = new Date(self.displayTime).setMinutes(Number(val));
|
||||
self.setNgModelValue(updated, 'minutes');
|
||||
};
|
||||
$scope.minuteClickHandler = this.minuteClickHandler;
|
||||
|
||||
this.attachTimePaneEventListeners();
|
||||
$scope.min5=[];
|
||||
$scope.min5[0]=[];
|
||||
$scope.min5[1]=[];
|
||||
for(i=0; i<6; i++){
|
||||
m=i*5;
|
||||
$scope.min5[0][i] = {id:'tp-'+this.id+'-minute5-'+m, displayName:m<10?":0"+m:":"+m, selected:true};
|
||||
$scope.min5[1][i] = {id:'tp-'+this.id+'-minute5-'+(m+30), displayName:":"+(m+30), selected:false};
|
||||
}
|
||||
TimePaneCtrl.$inject = ["$element", "$attrs", "$scope", "$animate", "$q", "$mdConstant", "$mdTheming", "$$mdDateUtil", "$mdDateLocale", "$mdInkRipple", "$mdUtil"];
|
||||
|
||||
TimePaneCtrl.prototype.configureNgModel = function(ngModelCtrl, sgTimePaneCtrl, timePaneElement) {
|
||||
this.ngModelCtrl = ngModelCtrl;
|
||||
var self = this;
|
||||
ngModelCtrl.$render = function() {
|
||||
self.changeSelectedTime(self.ngModelCtrl.$viewValue, sgTimePaneCtrl, timePaneElement);
|
||||
};
|
||||
$scope.min1=[];
|
||||
for(i=0; i<12; i++){
|
||||
$scope.min1[i]=[];
|
||||
for(var ii=0; ii<5; ii++){
|
||||
m=i*5 + ii;
|
||||
$scope.min1[i][ii] = {id:'tp-'+this.id+'-minute-'+m, displayName:m<10?":0"+m:":"+m, selected:true};
|
||||
}
|
||||
}
|
||||
|
||||
$scope.show5min=true;
|
||||
$scope.getToggleBtnLbl = function() {
|
||||
return ($scope.is5min()) ? '>>' : '<<';
|
||||
};
|
||||
$scope.toggleManual5min = function() {
|
||||
$scope.manual5min = !$scope.is5min();
|
||||
};
|
||||
$scope.is5min=function(){
|
||||
if($scope.manual5min === true || $scope.manual5min === false) {
|
||||
return $scope.manual5min;
|
||||
}
|
||||
else {
|
||||
return $scope.show5min;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Change the selected date in the time (ngModel value has already been changed).
|
||||
*/
|
||||
TimePaneCtrl.prototype.changeSelectedTime = function(date, sgTimePaneCtrl, timePaneElement) {
|
||||
var self = this;
|
||||
var previousSelectedTime = this.selectedTime;
|
||||
this.selectedTime = new Date(date);
|
||||
this.changeDisplayTime(date).then(function() {
|
||||
// Remove the selected class from the previously selected date, if any.
|
||||
if (previousSelectedTime) {
|
||||
var prevH = previousSelectedTime.getHours();
|
||||
var prevHCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+prevH);
|
||||
if (prevHCell) {
|
||||
prevHCell.classList.remove(SELECTED_TIME_CLASS2);
|
||||
prevHCell.setAttribute('aria-selected', 'false');
|
||||
}
|
||||
var prevM = previousSelectedTime.getMinutes();
|
||||
var prevMCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute-'+prevM);
|
||||
if (prevMCell) {
|
||||
prevMCell.classList.remove(SELECTED_TIME_CLASS2);
|
||||
prevMCell.setAttribute('aria-selected', 'false');
|
||||
}
|
||||
var prevM5Cell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute5-'+prevM);
|
||||
if (prevM5Cell) {
|
||||
prevM5Cell.classList.remove(SELECTED_TIME_CLASS2);
|
||||
prevM5Cell.setAttribute('aria-selected', 'false');
|
||||
}
|
||||
}
|
||||
if (!$attrs.tabindex) {
|
||||
$element.attr('tabindex', '-1');
|
||||
}
|
||||
|
||||
// Apply the select class to the new selected date if it is set.
|
||||
if (date) {
|
||||
var d = new Date(date);
|
||||
var newH = d.getHours();
|
||||
var mCell, hCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+newH);
|
||||
if (hCell) {
|
||||
hCell.classList.add(SELECTED_TIME_CLASS2);
|
||||
hCell.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
var newM = d.getMinutes();
|
||||
if (newM % 5 === 0) {
|
||||
sgTimePaneCtrl.$scope.show5min = true;
|
||||
mCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute5-'+newM);
|
||||
if (mCell) {
|
||||
mCell.classList.add(SELECTED_TIME_CLASS2);
|
||||
mCell.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
}
|
||||
else {
|
||||
sgTimePaneCtrl.$scope.show5min = false;
|
||||
}
|
||||
mCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute-'+newM);
|
||||
if (mCell) {
|
||||
mCell.classList.add(SELECTED_TIME_CLASS2);
|
||||
mCell.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
var self = this;
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
this.hourClickHandler = function(displayVal) {
|
||||
var updated = new Date(self.displayTime).setHours(Number(displayVal));
|
||||
self.setNgModelValue(updated, 'hours');
|
||||
};
|
||||
$scope.hourClickHandler = this.hourClickHandler;
|
||||
|
||||
TimePaneCtrl.prototype.changeDisplayTime = function(date) {
|
||||
this.minuteClickHandler = function(displayVal) {
|
||||
//remove leading ':'
|
||||
var val = displayVal.substr(1);
|
||||
var updated = new Date(self.displayTime).setMinutes(Number(val));
|
||||
self.setNgModelValue(updated, 'minutes');
|
||||
};
|
||||
$scope.minuteClickHandler = this.minuteClickHandler;
|
||||
|
||||
this.attachTimePaneEventListeners();
|
||||
}
|
||||
TimePaneCtrl.$inject = ["$element", "$attrs", "$scope", "$animate", "$q", "$mdConstant", "$mdTheming", "$$mdDateUtil", "$mdDateLocale", "$mdInkRipple", "$mdUtil"];
|
||||
|
||||
TimePaneCtrl.prototype.configureNgModel = function(ngModelCtrl, sgTimePaneCtrl, timePaneElement) {
|
||||
this.ngModelCtrl = ngModelCtrl;
|
||||
var self = this;
|
||||
ngModelCtrl.$render = function() {
|
||||
self.changeSelectedTime(self.ngModelCtrl.$viewValue, sgTimePaneCtrl, timePaneElement);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Change the selected date in the time (ngModel value has already been changed).
|
||||
*/
|
||||
TimePaneCtrl.prototype.changeSelectedTime = function(date, sgTimePaneCtrl, timePaneElement) {
|
||||
var self = this;
|
||||
var previousSelectedTime = this.selectedTime;
|
||||
this.selectedTime = new Date(date);
|
||||
this.changeDisplayTime(date).then(function() {
|
||||
// Remove the selected class from the previously selected date, if any.
|
||||
if (previousSelectedTime) {
|
||||
var prevH = previousSelectedTime.getHours();
|
||||
var prevHCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+prevH);
|
||||
if (prevHCell) {
|
||||
prevHCell.classList.remove(SELECTED_TIME_CLASS);
|
||||
prevHCell.setAttribute('aria-selected', 'false');
|
||||
}
|
||||
var prevM = previousSelectedTime.getMinutes();
|
||||
var prevMCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute-'+prevM);
|
||||
if (prevMCell) {
|
||||
prevMCell.classList.remove(SELECTED_TIME_CLASS);
|
||||
prevMCell.setAttribute('aria-selected', 'false');
|
||||
}
|
||||
var prevM5Cell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute5-'+prevM);
|
||||
if (prevM5Cell) {
|
||||
prevM5Cell.classList.remove(SELECTED_TIME_CLASS);
|
||||
prevM5Cell.setAttribute('aria-selected', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the select class to the new selected date if it is set.
|
||||
if (date) {
|
||||
var d = new Date(date);
|
||||
if (!this.isInitialized) {
|
||||
this.buildInitialTimePaneDisplay();
|
||||
return this.$q.when();
|
||||
}
|
||||
if (!this.dateUtil.isValidDate(d)) {
|
||||
return this.$q.when();
|
||||
}
|
||||
|
||||
this.displayTime = d;
|
||||
|
||||
return this.$q.when();
|
||||
};
|
||||
TimePaneCtrl.prototype.buildInitialTimePaneDisplay = function() {
|
||||
this.displayTime = this.selectedTime || this.today;
|
||||
this.isInitialized = true;
|
||||
};
|
||||
|
||||
TimePaneCtrl.prototype.attachTimePaneEventListeners = function() {
|
||||
// Keyboard interaction.
|
||||
this.$element.on('keydown', angular.bind(this, this.handleKeyEvent));
|
||||
};
|
||||
|
||||
/*** User input handling ***/
|
||||
|
||||
/**
|
||||
* Handles a key event in the calendar with the appropriate action. The action will either
|
||||
* be to select the focused date or to navigate to focus a new date.
|
||||
* @param {KeyboardEvent} event
|
||||
*/
|
||||
TimePaneCtrl.prototype.handleKeyEvent = function(event) {
|
||||
var self = this;
|
||||
this.$scope.$apply(function() {
|
||||
// Capture escape and emit back up so that a wrapping component
|
||||
// (such as a time-picker) can decide to close.
|
||||
if (event.which == self.keyCode.ESCAPE || event.which == self.keyCode.TAB) {
|
||||
self.$scope.$emit('md-time-pane-close');
|
||||
|
||||
if (event.which == self.keyCode.TAB) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Remaining key events fall into two categories: selection and navigation.
|
||||
// Start by checking if this is a selection event.
|
||||
if (event.which === self.keyCode.ENTER) {
|
||||
self.setNgModelValue(self.displayTime, 'enter');
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Selection isn't occuring, so the key event is either navigation or nothing.
|
||||
/*var date = self.getFocusDateFromKeyEvent(event);
|
||||
if (date) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Since this is a keyboard interaction, actually give the newly focused date keyboard
|
||||
// focus after the been brought into view.
|
||||
self.changeDisplayTime(date).then(function () {
|
||||
self.focus(date);
|
||||
});
|
||||
}*/
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the ng-model value for the time pane and emits a change event.
|
||||
* @param {Date} date
|
||||
*/
|
||||
TimePaneCtrl.prototype.setNgModelValue = function(date, mode) {
|
||||
this.$scope.$emit('sg-time-pane-change', {date:date, changed:mode});
|
||||
this.ngModelCtrl.$setViewValue(date);
|
||||
this.ngModelCtrl.$render();
|
||||
};
|
||||
|
||||
/**
|
||||
* Focus the cell corresponding to the given date.
|
||||
* @param {Date=} opt_date
|
||||
*/
|
||||
TimePaneCtrl.prototype.focus = function(opt_date, sgTimePaneCtrl) {
|
||||
var date = opt_date || this.selectedTime || this.today;
|
||||
|
||||
var previousFocus = this.timePaneElement.querySelector('.md-focus');
|
||||
if (previousFocus) {
|
||||
previousFocus.classList.remove(FOCUSED_TIME_CLASS);
|
||||
var newH = d.getHours();
|
||||
var mCell, hCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+newH);
|
||||
if (hCell) {
|
||||
hCell.classList.add(SELECTED_TIME_CLASS);
|
||||
hCell.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
var newM = d.getMinutes();
|
||||
if (newM % 5 === 0) {
|
||||
sgTimePaneCtrl.$scope.show5min = true;
|
||||
mCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute5-'+newM);
|
||||
if (mCell) {
|
||||
mCell.classList.add(SELECTED_TIME_CLASS);
|
||||
mCell.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
}
|
||||
else {
|
||||
sgTimePaneCtrl.$scope.show5min = false;
|
||||
}
|
||||
mCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute-'+newM);
|
||||
if (mCell) {
|
||||
mCell.classList.add(SELECTED_TIME_CLASS);
|
||||
mCell.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
TimePaneCtrl.prototype.changeDisplayTime = function(date) {
|
||||
var d = new Date(date);
|
||||
if (!this.isInitialized) {
|
||||
this.buildInitialTimePaneDisplay();
|
||||
return this.$q.when();
|
||||
}
|
||||
if (!this.dateUtil.isValidDate(d)) {
|
||||
return this.$q.when();
|
||||
}
|
||||
|
||||
this.displayTime = d;
|
||||
|
||||
return this.$q.when();
|
||||
};
|
||||
TimePaneCtrl.prototype.buildInitialTimePaneDisplay = function() {
|
||||
this.displayTime = this.selectedTime || this.today;
|
||||
this.isInitialized = true;
|
||||
};
|
||||
|
||||
TimePaneCtrl.prototype.attachTimePaneEventListeners = function() {
|
||||
// Keyboard interaction.
|
||||
this.$element.on('keydown', angular.bind(this, this.handleKeyEvent));
|
||||
};
|
||||
|
||||
/*** User input handling ***/
|
||||
|
||||
/**
|
||||
* Handles a key event in the calendar with the appropriate action. The action will either
|
||||
* be to select the focused date or to navigate to focus a new date.
|
||||
* @param {KeyboardEvent} event
|
||||
*/
|
||||
TimePaneCtrl.prototype.handleKeyEvent = function(event) {
|
||||
var self = this;
|
||||
this.$scope.$apply(function() {
|
||||
// Capture escape and emit back up so that a wrapping component
|
||||
// (such as a time-picker) can decide to close.
|
||||
if (event.which == self.keyCode.ESCAPE || event.which == self.keyCode.TAB) {
|
||||
self.$scope.$emit('md-time-pane-close');
|
||||
|
||||
if (event.which == self.keyCode.TAB) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Remaining key events fall into two categories: selection and navigation.
|
||||
// Start by checking if this is a selection event.
|
||||
if (event.which === self.keyCode.ENTER) {
|
||||
self.setNgModelValue(self.displayTime, 'enter');
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Selection isn't occuring, so the key event is either navigation or nothing.
|
||||
/*var date = self.getFocusDateFromKeyEvent(event);
|
||||
if (date) {
|
||||
var newH = date.getHours();
|
||||
var hCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+newH);
|
||||
if (hCell) {
|
||||
hCell.classList.add(FOCUSED_TIME_CLASS);
|
||||
hCell.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Since this is a keyboard interaction, actually give the newly focused date keyboard
|
||||
// focus after the been brought into view.
|
||||
self.changeDisplayTime(date).then(function () {
|
||||
self.focus(date);
|
||||
});
|
||||
}*/
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the ng-model value for the time pane and emits a change event.
|
||||
* @param {Date} date
|
||||
*/
|
||||
TimePaneCtrl.prototype.setNgModelValue = function(date, mode) {
|
||||
this.$scope.$emit('sg-time-pane-change', {date:date, changed:mode});
|
||||
this.ngModelCtrl.$setViewValue(date);
|
||||
this.ngModelCtrl.$render();
|
||||
};
|
||||
|
||||
/**
|
||||
* Focus the cell corresponding to the given date.
|
||||
* @param {Date=} opt_date
|
||||
*/
|
||||
TimePaneCtrl.prototype.focus = function(opt_date, sgTimePaneCtrl) {
|
||||
var date = opt_date || this.selectedTime || this.today;
|
||||
|
||||
var previousFocus = this.timePaneElement.querySelector('.md-focus');
|
||||
if (previousFocus) {
|
||||
previousFocus.classList.remove(FOCUSED_TIME_CLASS);
|
||||
}
|
||||
|
||||
if (date) {
|
||||
var newH = date.getHours();
|
||||
var hCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+newH);
|
||||
if (hCell) {
|
||||
hCell.classList.add(FOCUSED_TIME_CLASS);
|
||||
hCell.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(function() {
|
||||
|
|
@ -336,37 +348,38 @@
|
|||
*/
|
||||
function timePickerDirective() {
|
||||
return {
|
||||
template:
|
||||
// Buttons are not in the tab order because users can open the hours pane via keyboard
|
||||
// interaction on the text input, and multiple tab stops for one component (picker)
|
||||
// may be confusing.
|
||||
'<md-button class="sg-timepicker-button md-icon-button" type="button" ' +
|
||||
'tabindex="-1" aria-hidden="true" ' +
|
||||
'ng-click="ctrl.openTimePane($event)">' +
|
||||
//'<md-icon class="md-timepicker-calendar-icon" md-svg-icon="md-calendar"></md-icon>' +
|
||||
'<i class="material-icons">access_time</i>' +
|
||||
'</md-button>' +
|
||||
'<div class="sg-timepicker-input-container" ' +
|
||||
'ng-class="{\'sg-timepicker-focused\': ctrl.isFocused}">' +
|
||||
'<input class="sg-timepicker-input" aria-haspopup="true" ' +
|
||||
'ng-focus="ctrl.setFocused(true)" ng-blur="ctrl.setFocused(false)">' +
|
||||
'<md-button type="button" md-no-ink ' +
|
||||
'class="sg-timepicker-triangle-button md-icon-button" ' +
|
||||
'ng-click="ctrl.openTimePane($event)" ' +
|
||||
'aria-label="{{::ctrl.dateLocale.msgOpenCalendar}}">' +
|
||||
'<div class="sg-timepicker-expand-triangle"></div>' +
|
||||
'</md-button>' +
|
||||
'</div>' +
|
||||
// This pane will be detached from here and re-attached to the document body.
|
||||
'<div class="sg-timepicker-time-pane md-whiteframe-z1">' +
|
||||
'<div class="sg-timepicker-input-mask">' +
|
||||
'<div class="sg-timepicker-input-mask-opaque"></div>' +
|
||||
'</div>' +
|
||||
'<div class="sg-timepicker-time">' +
|
||||
'<sg-time-pane role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ' +
|
||||
'ng-model="ctrl.time" ng-if="ctrl.isTimeOpen"></sg-time-pane>' +
|
||||
'</div>' +
|
||||
template: [
|
||||
// Buttons are not in the tab order because users can open the hours pane via keyboard
|
||||
// interaction on the text input, and multiple tab stops for one component (picker)
|
||||
// may be confusing.
|
||||
'<md-button class="sg-timepicker-button md-icon-button" type="button" ',
|
||||
' tabindex="-1" aria-hidden="true" ',
|
||||
' ng-click="ctrl.openTimePane($event)">',
|
||||
' <md-icon>access_time</md-icon>',
|
||||
'</md-button>',
|
||||
'<div class="md-default-theme sg-timepicker-input-container" ',
|
||||
' ng-class="{\'sg-timepicker-focused\': ctrl.isFocused,',
|
||||
' \'md-bdr\': ctrl.isFocused}">',
|
||||
' <input class="sg-timepicker-input" aria-haspopup="true" ',
|
||||
' ng-focus="ctrl.setFocused(true)" ng-blur="ctrl.setFocused(false)">',
|
||||
' <md-button type="button" md-no-ink ',
|
||||
' class="sg-timepicker-triangle-button md-icon-button" ',
|
||||
' ng-click="ctrl.openTimePane($event)" ',
|
||||
' aria-label="{{::ctrl.dateLocale.msgOpenCalendar}}">',
|
||||
' <div class="sg-timepicker-expand-triangle"></div>',
|
||||
' </md-button>',
|
||||
'</div>',
|
||||
// This pane will be detached from here and re-attached to the document body.
|
||||
'<div class="sg-timepicker-time-pane md-whiteframe-z1">',
|
||||
' <div class="sg-timepicker-input-mask">',
|
||||
' <div class="sg-timepicker-input-mask-opaque"></div>',
|
||||
' </div>',
|
||||
' <div class="sg-timepicker-time md-default-theme md-bg md-background">',
|
||||
' <sg-time-pane role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ',
|
||||
' ng-model="ctrl.time" ng-if="ctrl.isTimeOpen"></sg-time-pane>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join(''),
|
||||
require: ['ngModel', 'sgTimepicker'],
|
||||
scope: {
|
||||
placeholder: '@mdPlaceholder'
|
||||
|
|
@ -398,7 +411,7 @@
|
|||
* ngInject @constructor
|
||||
*/
|
||||
function TimePickerCtrl($scope, $element, $attrs, $compile, $timeout, $mdConstant, $mdTheming,
|
||||
$mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF) {
|
||||
$mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF) {
|
||||
/** @final */
|
||||
this.$compile = $compile;
|
||||
|
||||
|
|
@ -494,8 +507,8 @@
|
|||
});
|
||||
}
|
||||
|
||||
TimePickerCtrl.$inject = ["$scope", "$element", "$attrs", "$compile", "$timeout", "$mdConstant", "$mdTheming",
|
||||
"$mdUtil", "$mdDateLocale", "$$mdDateUtil", "$$rAF"];
|
||||
TimePickerCtrl.$inject = ["$scope", "$element", "$attrs", "$compile", "$timeout", "$mdConstant", "$mdTheming",
|
||||
"$mdUtil", "$mdDateLocale", "$$mdDateUtil", "$$rAF"];
|
||||
|
||||
/**
|
||||
* Sets up the controller's reference to ngModelController.
|
||||
|
|
@ -505,21 +518,21 @@
|
|||
this.ngModelCtrl = ngModelCtrl;
|
||||
var self = this;
|
||||
ngModelCtrl.$render = function() {
|
||||
self.time = self.ngModelCtrl.$viewValue;
|
||||
self.inputElement.value = self.formatTime(self.time);
|
||||
self.time = self.ngModelCtrl.$viewValue;
|
||||
self.inputElement.value = self.formatTime(self.time);
|
||||
self.resizeInputElement();
|
||||
};
|
||||
};
|
||||
|
||||
TimePickerCtrl.prototype.formatTime = function(time) {
|
||||
var t = new Date(time);
|
||||
if(t) {
|
||||
var h= t.getHours();
|
||||
var m= t.getMinutes();
|
||||
return (h<10?('0'+ h) : h) + ':' + (m<10?'0'+ m : m);
|
||||
}
|
||||
else return '';
|
||||
};
|
||||
TimePickerCtrl.prototype.formatTime = function(time) {
|
||||
var t = new Date(time);
|
||||
if(t) {
|
||||
var h= t.getHours();
|
||||
var m= t.getMinutes();
|
||||
return (h<10?('0'+ h) : h) + ':' + (m<10?'0'+ m : m);
|
||||
}
|
||||
else return '';
|
||||
};
|
||||
/**
|
||||
* Attach event listeners for both the text input and the md-time.
|
||||
* Events are used instead of ng-model so that updates don't infinitely update the other
|
||||
|
|
@ -529,21 +542,21 @@
|
|||
var self = this;
|
||||
|
||||
self.$scope.$on('sg-time-pane-change', function(event, data) {
|
||||
var time = new Date(data.date);
|
||||
self.ngModelCtrl.$setViewValue(time);
|
||||
self.time = time;
|
||||
self.inputElement.value = self.formatTime(self.time);
|
||||
if(data.changed == 'minutes') {
|
||||
self.closeTimePane();
|
||||
}
|
||||
self.resizeInputElement();
|
||||
self.inputContainer.classList.remove(INVALID_CLASS);
|
||||
var time = new Date(data.date);
|
||||
self.ngModelCtrl.$setViewValue(time);
|
||||
self.time = time;
|
||||
self.inputElement.value = self.formatTime(self.time);
|
||||
if(data.changed == 'minutes') {
|
||||
self.closeTimePane();
|
||||
}
|
||||
self.resizeInputElement();
|
||||
self.inputContainer.classList.remove(INVALID_CLASS);
|
||||
});
|
||||
|
||||
var ngElement = angular.element(self.inputElement);
|
||||
ngElement.on('input', angular.bind(self, self.resizeInputElement));
|
||||
ngElement.on('input', self.$mdUtil.debounce(self.handleInputEvent,
|
||||
DEFAULT_DEBOUNCE_INTERVAL, self));
|
||||
DEFAULT_DEBOUNCE_INTERVAL, self));
|
||||
};
|
||||
|
||||
/** Attach event listeners for user interaction. */
|
||||
|
|
@ -609,19 +622,19 @@
|
|||
*/
|
||||
TimePickerCtrl.prototype.handleInputEvent = function(self) {
|
||||
var inputString = this.inputElement.value;
|
||||
var arr = inputString.split(':');
|
||||
if(arr.length < 2) {return;}
|
||||
var h=Number(arr[0]);
|
||||
var m=Number(arr[1]);
|
||||
var newVal = new Date(this.time);
|
||||
if (h && h>=0 && h<=23 && m && m>=0 && m<= 59 && angular.isDate(newVal)) {
|
||||
newVal.setHours(h);
|
||||
newVal.setMinutes(m);
|
||||
this.ngModelCtrl.$setViewValue(newVal);
|
||||
this.time = newVal;
|
||||
this.inputContainer.classList.remove(INVALID_CLASS);
|
||||
}
|
||||
else {
|
||||
var arr = inputString.split(':');
|
||||
if(arr.length < 2) {return;}
|
||||
var h=Number(arr[0]);
|
||||
var m=Number(arr[1]);
|
||||
var newVal = new Date(this.time);
|
||||
if (h && h>=0 && h<=23 && m && m>=0 && m<= 59 && angular.isDate(newVal)) {
|
||||
newVal.setHours(h);
|
||||
newVal.setMinutes(m);
|
||||
this.ngModelCtrl.$setViewValue(newVal);
|
||||
this.time = newVal;
|
||||
this.inputContainer.classList.remove(INVALID_CLASS);
|
||||
}
|
||||
else {
|
||||
// If there's an input string, it's an invalid time.
|
||||
this.inputContainer.classList.toggle(INVALID_CLASS, inputString);
|
||||
}
|
||||
|
|
@ -631,6 +644,7 @@
|
|||
TimePickerCtrl.prototype.attachTimePane = function() {
|
||||
var timePane = this.timePane;
|
||||
this.$element.addClass('sg-timepicker-open');
|
||||
this.$element.find('button').addClass('md-primary');
|
||||
|
||||
var elementRect = this.inputContainer.getBoundingClientRect();
|
||||
var bodyRect = document.body.getBoundingClientRect();
|
||||
|
|
@ -654,6 +668,7 @@
|
|||
/** Detach the floating time pane from the document. */
|
||||
TimePickerCtrl.prototype.detachTimePane = function() {
|
||||
this.$element.removeClass('sg-timepicker-open');
|
||||
this.$element.find('button').removeClass('md-primary');
|
||||
this.timePane.classList.remove('md-pane-open');
|
||||
|
||||
if (this.timePane.parentNode) {
|
||||
|
|
@ -672,7 +687,7 @@
|
|||
this.isTimeOpen = true;
|
||||
this.timePaneOpenedFrom = event.target;
|
||||
this.attachTimePane();
|
||||
this.focusTime();
|
||||
//this.focusTime();
|
||||
|
||||
// Because the time pane is attached directly to the body, it is possible that the
|
||||
// rest of the component (input, etc) is in a different scrolling container, such as
|
||||
|
|
@ -711,7 +726,7 @@
|
|||
// Use a timeout in order to allow the time to be rendered, as it is gated behind an ng-if.
|
||||
var self = this;
|
||||
this.$mdUtil.nextTick(function() {
|
||||
var ctrl = self.getTimePaneCtrl();
|
||||
var ctrl = self.getTimePaneCtrl();
|
||||
self.getTimePaneCtrl().focus(null, ctrl);
|
||||
}, false);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
/// datePicker.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends-datePicker';
|
||||
|
||||
md-datepicker {
|
||||
background: transparent;
|
||||
.md-calendar-scroll-container,
|
||||
.md-datepicker-input-mask {
|
||||
// Let the content set the container width instead of using a fixed width
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.md-datepicker-input-container {
|
||||
// Gain some space
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,6 @@
|
|||
/** Styles for sgTimePane. */
|
||||
$sg-time-pane-cell-size: 40px;
|
||||
|
||||
$md-calendar-cell-size: 44px !default;
|
||||
$md-calendar-header-height: 40px;
|
||||
$md-calendar-cell-emphasis-size: 40px !default;
|
||||
$md-calendar-side-padding: 16px !default;
|
||||
$md-calendar-weeks-to-show: 7 !default;
|
||||
|
||||
$md-calendar-month-label-padding: 8px !default;
|
||||
$md-calendar-month-label-font-size: 13px !default;
|
||||
|
||||
$md-calendar-width: (7 * $md-calendar-cell-size) + (2 * $md-calendar-side-padding);
|
||||
$md-calendar-height:
|
||||
($md-calendar-weeks-to-show * $md-calendar-cell-size) + $md-calendar-header-height;
|
||||
$sg-time-width: (12 * $sg-time-pane-cell-size) + (2 * $md-calendar-side-padding);
|
||||
|
||||
sg-time-pane {
|
||||
font-size: 13px;
|
||||
|
|
@ -20,13 +8,21 @@ sg-time-pane {
|
|||
}
|
||||
|
||||
.hours-pane {
|
||||
// TODO: should use background-200
|
||||
border-bottom: solid 1px rgb(224,224,224);
|
||||
}
|
||||
|
||||
.toggle-pane {
|
||||
// TODO: should use background-200
|
||||
border-top: solid 1px rgb(224,224,224);
|
||||
}
|
||||
|
||||
.hours-pane,
|
||||
.min1,
|
||||
.min5 {
|
||||
padding: 0 $md-calendar-side-padding;
|
||||
}
|
||||
|
||||
.md-button.md-fab.hourBtn,
|
||||
.md-button.md-fab.minuteBtn,
|
||||
.md-button.md-fab.toggleBtn,
|
||||
|
|
@ -35,45 +31,30 @@ sg-time-pane {
|
|||
.md-button.md-fab.toggleBtn.md-focused,
|
||||
.md-button.md-fab.hourBtn.md-focus,
|
||||
.md-button.md-fab.minuteBtn.md-focus,
|
||||
.md-button.md-fab.toggleBtn.md-focus{
|
||||
.md-button.md-fab.toggleBtn.md-focus {
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight:normal;
|
||||
color: rgba(0,0,0,0.5);
|
||||
height:$sg-time-pane-cell-size;
|
||||
width:$sg-time-pane-cell-size;
|
||||
height: $sg-time-pane-cell-size;
|
||||
width: $sg-time-pane-cell-size;
|
||||
line-height: $sg-time-pane-cell-size;
|
||||
box-shadow: none;
|
||||
margin: 2px;
|
||||
margin: 0;
|
||||
&:not(.md-bg):not(.toggleBtn) {
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: lightgrey;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.md-button.md-fab.toggleBtn{
|
||||
background-color: rgb(63, 81, 181);
|
||||
.md-button.md-fab.toggleBtn {
|
||||
color: white;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.md-button.md-fab.hourBtn:hover, .md-button.md-fab.minuteBtn:hover {
|
||||
background-color: lightgrey;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.md-button.md-fab.hourBtn.md-primary, .md-button.md-fab.minuteBtn.md-primary,
|
||||
.md-button.md-fab.hourBtn.md-primary:hover, .md-button.md-fab.minuteBtn.md-primary:hover,
|
||||
.md-button.md-fab.hourBtn.md-primary.md-focus, .md-button.md-fab.minuteBtn.md-primary.md-focus,
|
||||
.md-button.md-fab.hourBtn.md-primary.md-focused, .md-button.md-fab.minuteBtn.md-primary.md-focused{
|
||||
background-color: lightgrey;
|
||||
color: rgb(63, 81, 181);;
|
||||
}
|
||||
|
||||
/** Styles for sgTimepicker. */
|
||||
$md-datepicker-button-gap: 12px; // Space between the text input and the calendar-icon button.
|
||||
$md-datepicker-border-bottom-gap: 5px; // Space between input and the grey underline.
|
||||
$md-datepicker-open-animation-duration: 0.2s;
|
||||
|
||||
sg-timepicker {
|
||||
// Don't let linebreaks happen between the open icon-button and the input.
|
||||
white-space: nowrap;
|
||||
|
|
@ -87,60 +68,40 @@ sg-timepicker {
|
|||
background: none;
|
||||
}
|
||||
|
||||
// The input into which the user can type the date.
|
||||
// The input into which the user can type the time.
|
||||
.sg-timepicker-input {
|
||||
//@include md-flat-input();
|
||||
min-width: 120px;
|
||||
max-width: $md-calendar-width - $md-datepicker-button-gap;
|
||||
background: inherit;
|
||||
border: none;
|
||||
@extend .md-datepicker-input;
|
||||
}
|
||||
|
||||
// Container for the datepicker input.
|
||||
// Container for the timepicker input.
|
||||
.sg-timepicker-input-container {
|
||||
// Position relative in order to absolutely position the down-triangle button within.
|
||||
position: relative;
|
||||
|
||||
padding-bottom: $md-datepicker-border-bottom-gap;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgb(224,224,224);
|
||||
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-left: $md-datepicker-button-gap;
|
||||
@extend .md-datepicker-input-container;
|
||||
|
||||
&.sg-timepicker-focused {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
// From datePicker-theme.scss
|
||||
// TODO: should use background-300
|
||||
border-bottom-color: rgb(224,224,224);
|
||||
}
|
||||
|
||||
|
||||
// Floating pane that contains the time at the bottom of the input.
|
||||
.sg-timepicker-time-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-menu;
|
||||
@extend .md-datepicker-calendar-pane;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background: inherit;
|
||||
// Because blocks of 1-minute cells are allowed to wrap on multiple rows,
|
||||
// we limit the maximum size of the time pane
|
||||
max-width: $sg-time-width;
|
||||
|
||||
// From datePicker-theme.css
|
||||
border-color: rgb(224,224,224);
|
||||
box-shadow: rgba(0, 0, 0, 0.137255) 0 3px 1px -2px, rgba(0, 0, 0, 0.0980392) 0 2px 2px 0, rgba(0, 0, 0, 0.0823529) 0 1px 5px 0;
|
||||
transform: scale(0);
|
||||
transform-origin: 0 0;
|
||||
//transition: transform $md-datepicker-open-animation-duration $swift-ease-out-timing-function;
|
||||
|
||||
&.md-pane-open {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Portion of the floating panel that sits, invisibly, on top of the input.
|
||||
.sg-timepicker-input-mask {
|
||||
height: 40px;
|
||||
width: $md-calendar-width;
|
||||
position: relative;
|
||||
|
||||
background: transparent;
|
||||
|
|
@ -149,12 +110,7 @@ sg-timepicker {
|
|||
}
|
||||
|
||||
.sg-timepicker-input-mask-opaque {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 120px;
|
||||
background: white;
|
||||
|
||||
height: 100%;
|
||||
@extend .md-datepicker-input-mask-opaque;
|
||||
}
|
||||
|
||||
// The time portion of the floating pane (vs. the input mask).
|
||||
|
|
@ -177,38 +133,23 @@ sg-timepicker {
|
|||
// Down triangle/arrow indicating that the datepicker can be opened.
|
||||
// We can do this entirely with CSS without needing to load an icon.
|
||||
// See https://css-tricks.com/snippets/css/css-triangle/
|
||||
$md-date-arrow-size: 5px;
|
||||
//$md-date-arrow-size: 5px;
|
||||
.sg-timepicker-expand-triangle {
|
||||
// Center the triangle inside of the button so that the
|
||||
// ink ripple origin looks correct.
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $md-date-arrow-size solid transparent;
|
||||
border-right: $md-date-arrow-size solid transparent;
|
||||
border-top: $md-date-arrow-size solid rgba(black, 0.20);
|
||||
@extend .md-datepicker-expand-triangle;
|
||||
}
|
||||
|
||||
// Button containing the down "disclosure" triangle/arrow.
|
||||
.sg-timepicker-triangle-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@extend .md-datepicker-triangle-button;
|
||||
|
||||
// TODO(jelbourn): This position isn't great on all platforms.
|
||||
transform: translateY(-25%) translateX(45%);
|
||||
// From datepicker-theme.scss
|
||||
&:hover .sg-timepicker-expand-triangle {
|
||||
border-top-color: rgba(0,0,0,0.54);
|
||||
}
|
||||
}
|
||||
|
||||
// Need crazy specificity to override .md-button.md-icon-button.
|
||||
// Only apply this high specifiy to the property we need to override.
|
||||
.sg-timepicker-triangle-button.md-button.md-icon-button {
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
position: absolute;
|
||||
@extend .md-datepicker-triangle-button.md-button.md-icon-button;
|
||||
}
|
||||
|
||||
// Disabled state for all elements of the picker.
|
||||
|
|
|
|||
Loading…
Reference in New Issue