From b4af6f5033ed1e32af087440825b76b6f97a3e2b Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Fri, 11 Sep 2015 09:31:13 -0400 Subject: [PATCH] (css) Improve sgTimepicker --- .../js/Common/sgTimepicker.directive.js | 729 +++++++++--------- .../components/datepicker/datePicker.scss | 12 +- .../components/timepicker/timepicker.scss | 147 ++-- 3 files changed, 426 insertions(+), 462 deletions(-) diff --git a/UI/WebServerResources/js/Common/sgTimepicker.directive.js b/UI/WebServerResources/js/Common/sgTimepicker.directive.js index 3a42fcc4f..9170938f3 100644 --- a/UI/WebServerResources/js/Common/sgTimepicker.directive.js +++ b/UI/WebServerResources/js/Common/sgTimepicker.directive.js @@ -5,307 +5,319 @@ .module('SOGo.Common') .directive('sgTimePane', timePaneDirective); - function timePaneDirective() { - return { - template: - '
' + - '
' + - '
' + - '{{hour.displayName}}'+ - '
' + - '
' + - '
' + - '{{minute.displayName}}'+ - '
' + - '
' + - '
' + - '{{minute.displayName}}' + - '
' + - '
', - 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: [ + '
', + '
', + '
', + '
', + ' {{hour.displayName}}', + '
', + '
', + '
', + '
', + '
', + '
', + ' {{minute.displayName}}', + '
', + '
', + '
', + '
', + '
', + ' {{minute.displayName}}', + '
', + '
', + '
', + ' ', + '
', + '
' + ].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. - '' + - '
' + - '' + - '' + - '
' + - '' + - '
' + - // This pane will be detached from here and re-attached to the document body. - '
' + - '
' + - '
' + - '
' + - '
' + - '' + - '
' + + 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. + '', + '
', + ' ', + ' ', + '
', + ' ', '
', + // This pane will be detached from here and re-attached to the document body. + '
', + '
', + '
', + '
', + '
', + ' ', + '
', + '
' + ].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); }; diff --git a/UI/WebServerResources/scss/components/datepicker/datePicker.scss b/UI/WebServerResources/scss/components/datepicker/datePicker.scss index dcf140f13..b28ff445d 100644 --- a/UI/WebServerResources/scss/components/datepicker/datePicker.scss +++ b/UI/WebServerResources/scss/components/datepicker/datePicker.scss @@ -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; +} + diff --git a/UI/WebServerResources/scss/components/timepicker/timepicker.scss b/UI/WebServerResources/scss/components/timepicker/timepicker.scss index 06b1fc045..f1dc754b1 100644 --- a/UI/WebServerResources/scss/components/timepicker/timepicker.scss +++ b/UI/WebServerResources/scss/components/timepicker/timepicker.scss @@ -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.