feat(timepicker): restyled for bootstrap 3

angular-ui · Dec 28, 2013 · 6724a72 · 6724a72
1 parent a99b360
commit 6724a72
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 40 deletions.
diff --git a/src/timepicker/docs/demo.html b/src/timepicker/docs/demo.html
@@ -1,14 +1,31 @@
 <div ng-controller="TimepickerDemoCtrl">
-  <div ng-model="mytime" ng-change="changed()" class="well well-small" style="display:inline-block;">
-    <timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
+
+  <div ng-model="mytime" ng-change="changed()" class="row" style="display:inline-block;">
+    <div class="row">
+      <div class="col-xs-5 col-lg-5">
+        <timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
+      </div>
+    </div>
   </div>
 
-  <pre>Time is: {{mytime | date:'shortTime' }}</pre>
 
-  <div>Hours step is: <select ng-model="hstep" ng-options="opt for opt in options.hstep"></select></div>
-  <div>Minutes step is: <select ng-model="mstep" ng-options="opt for opt in options.mstep"></select></div>
+   <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
+
+  <div class="row"> 
+    <div class="col-xs-6">
+        Hours step is:
+      <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
+    </div>
+    <div class="col-xs-6">
+        Minutes step is:
+      <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
+    </div>
+  </div>
 
-  <button class="btn" ng-click="toggleMode()">12H / 24H</button>
-  <button class="btn" ng-click="update()">Set to 14:00</button>
+  <hr>
+
+  <button class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
+  <button class="btn btn-default" ng-click="update()">Set to 14:00</button>
   <button class="btn btn-danger" ng-click="clear()">Clear</button>
-</div>
+
+</div>
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
@@ -1,3 +1,5 @@
+
+
 describe('timepicker directive', function () {
   var $rootScope, element;
 
@@ -37,15 +39,15 @@ describe('timepicker directive', function () {
   }
 
   function getArrow(isUp, tdIndex) {
-    return element.find('tr').eq( (isUp) ? 0 : 2 ).find('td').eq( tdIndex ).find('a').eq(0);
+    return element.children('div').eq( (isUp) ? 0 : 2 ).find('div').eq( tdIndex ).find('a').eq(0);
   }
 
   function getHoursButton(isUp) {
     return getArrow(isUp, 0);
   }
 
   function getMinutesButton(isUp) {
-    return getArrow(isUp, 2);
+    return getArrow(isUp, 1);
   }
 
   function getMeridianButton() {
@@ -71,8 +73,7 @@ describe('timepicker directive', function () {
     return e;
   }
 
-  it('contains three row & three input elements', function() {
-    expect(element.find('tr').length).toBe(3);
+  it('contains three input elements and one button', function() {
     expect(element.find('input').length).toBe(2);
     expect(element.find('button').length).toBe(1);
   });
@@ -321,7 +322,9 @@ describe('timepicker directive', function () {
 
   it('responds properly on "wheel" events', function() {
     var inputs = element.find('input');
-    var hoursEl = inputs.eq(0), minutesEl = inputs.eq(1);
+    var hoursEl = inputs.eq(0), 
+        minutesEl = inputs.eq(1);
+
     var upMouseWheelEvent = wheelThatOtherMouse(-1);
     var downMouseWheelEvent = wheelThatOtherMouse(1);
 
@@ -550,7 +553,7 @@ describe('timepicker directive', function () {
     it('initially displays correct time when `show-meridian` is false', function() {
       expect(getTimeState(true)).toEqual(['14', '10']);
       expect(getModelState()).toEqual([14, 10]);
-      expect(getMeridianTd().css('display')).toBe('none');
+      expect(getMeridianButton().css('display')).toBe('none');
     });
 
     it('toggles correctly between different modes', function() {
@@ -566,7 +569,7 @@ describe('timepicker directive', function () {
       $rootScope.$digest();
       expect(getTimeState(true)).toEqual(['14', '10']);
       expect(getModelState()).toEqual([14, 10]);
-      expect(getMeridianTd().css('display')).toBe('none');
+      expect(getMeridianButton().css('display')).toBe('none');
     });
 
     it('handles correctly initially empty model on parent element', function() {
@@ -724,15 +727,17 @@ describe('timepicker directive', function () {
 
       changeInputValueTo(el, 'pizza');
       expect($rootScope.time).toBe(null);
-      expect(el.parent().hasClass('error')).toBe(true);
+
+      expect(el.parent().hasClass('has-error')).toBe(true);
       expect(element.hasClass('ng-invalid-time')).toBe(true);
 
       changeInputValueTo(el, 8);
       el.blur();
       $rootScope.$digest();
       expect(getTimeState()).toEqual(['08', '40', 'PM']);
       expect(getModelState()).toEqual([20, 40]);
-      expect(el.parent().hasClass('error')).toBe(false);
+
+      expect(el.parent().hasClass('has-error')).toBe(false);
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
 
@@ -741,13 +746,15 @@ describe('timepicker directive', function () {
 
       changeInputValueTo(el, 'pizza');
       expect($rootScope.time).toBe(null);
-      expect(el.parent().hasClass('error')).toBe(true);
+
+      expect(el.parent().hasClass('has-error')).toBe(true);
       expect(element.hasClass('ng-invalid-time')).toBe(true);
 
       changeInputValueTo(el, 22);
       expect(getTimeState()).toEqual(['02', '22', 'PM']);
       expect(getModelState()).toEqual([14, 22]);
-      expect(el.parent().hasClass('error')).toBe(false);
+
+      expect(el.parent().hasClass('has-error')).toBe(false);
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
 
@@ -760,7 +767,8 @@ describe('timepicker directive', function () {
 
       changeInputValueTo(el, '16');
       expect($rootScope.time).toBe(null);
-      expect(el.parent().hasClass('error')).toBe(true);
+
+      expect(el.parent().hasClass('has-error')).toBe(true);
       expect(element.hasClass('ng-invalid-time')).toBe(true);
 
       $rootScope.meridian = false;
@@ -871,3 +879,4 @@ describe('timepicker directive', function () {
 
 });
 
+
diff --git a/template/timepicker/timepicker.html b/template/timepicker/timepicker.html
@@ -1,20 +1,38 @@
-<table class="form-inline">
-	<tr class="text-center">
-		<td><a ng-click="incrementHours()" class="btn btn-link"><i class="icon-chevron-up"></i></a></td>
-		<td>&nbsp;</td>
-		<td><a ng-click="incrementMinutes()" class="btn btn-link"><i class="icon-chevron-up"></i></a></td>
-		<td ng-show="showMeridian"></td>
-	</tr>
-	<tr>
-		<td class="control-group" ng-class="{'error': invalidHours}"><input type="text" ng-model="hours" ng-change="updateHours()" class="span1 text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2"></td>
-		<td>:</td>
-		<td class="control-group" ng-class="{'error': invalidMinutes}"><input type="text" ng-model="minutes" ng-change="updateMinutes()" class="span1 text-center" ng-readonly="readonlyInput" maxlength="2"></td>
-		<td ng-show="showMeridian"><button type="button" ng-click="toggleMeridian()" class="btn text-center">{{meridian}}</button></td>
-	</tr>
-	<tr class="text-center">
-		<td><a ng-click="decrementHours()" class="btn btn-link"><i class="icon-chevron-down"></i></a></td>
-		<td>&nbsp;</td>
-		<td><a ng-click="decrementMinutes()" class="btn btn-link"><i class="icon-chevron-down"></i></a></td>
-		<td ng-show="showMeridian"></td>
-	</tr>
-</table>
+<span>
+    <div class="row">
+        <div class="col-xs-4 text-center">
+            <a ng-click="incrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
+        </div>
+        <div class="col-xs-6 text-center">
+            <a ng-click="incrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
+        </div>
+        <div class="col-xs-2"> </div>
+    </div>
+
+    <div class="row">
+        <div class="col-xs-4">
+            <div class="form-group" ng-class="{'has-error': invalidHours}" style="margin-bottom: 0px">
+                <input type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2"> 
+            </div>
+        </div>
+        <div class="col-xs-6">
+            <div class="input-group" ng-class="{'has-error': invalidMinutes}">
+                <span class="input-group-addon">:</span>
+                <input type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
+            </div>
+        </div>
+        <div class="col-xs-2">
+            <button ng-click="toggleMeridian()" class="btn btn-default text-center" ng-show="showMeridian">{{meridian}}</button>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-xs-4 text-center">
+            <a ng-click="decrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
+        </div>
+        <div class="col-xs-6 text-center">
+            <a ng-click="decrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
+        </div>
+        <div class="col-xs-2"> </div>
+    </div>
+</span>