fix(timepicker): fix look with bootstrap3

Closes angular-ui#1285
bekos · Dec 24, 2013 · 187945b · 187945b
1 parent 82bd6e3
commit 187945b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 59 deletions.
diff --git a/src/timepicker/docs/demo.html b/src/timepicker/docs/demo.html
@@ -1,11 +1,7 @@
 <div ng-controller="TimepickerDemoCtrl">
 
-  <div ng-model="mytime" ng-change="changed()" class="row" style="display:inline-block;">
-    <div class="row">
-      <div class="col-xs-5 col-lg-5">
+  <div ng-model="mytime" ng-change="changed()" style="display:inline-block;">
         <timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
-      </div>
-    </div>
   </div>
 
 

diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
@@ -1,5 +1,3 @@
-
-
 describe('timepicker directive', function () {
   var $rootScope, element;
 
@@ -39,15 +37,15 @@ describe('timepicker directive', function () {
   }
 
   function getArrow(isUp, tdIndex) {
-    return element.children('div').eq( (isUp) ? 0 : 2 ).find('div').eq( tdIndex ).find('a').eq(0);
+    return element.find('tr').eq( (isUp) ? 0 : 2 ).find('td').eq( tdIndex ).find('a').eq(0);
   }
 
   function getHoursButton(isUp) {
     return getArrow(isUp, 0);
   }
 
   function getMinutesButton(isUp) {
-    return getArrow(isUp, 1);
+    return getArrow(isUp, 2);
   }
 
   function getMeridianButton() {
@@ -73,7 +71,8 @@ describe('timepicker directive', function () {
     return e;
   }
 
-  it('contains three input elements and one button', function() {
+  it('contains three row & three input elements', function() {
+    expect(element.find('tr').length).toBe(3);
     expect(element.find('input').length).toBe(2);
     expect(element.find('button').length).toBe(1);
   });
@@ -322,9 +321,7 @@ 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);
 
@@ -553,7 +550,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(getMeridianButton().css('display')).toBe('none');
+      expect(getMeridianTd().css('display')).toBe('none');
     });
 
     it('toggles correctly between different modes', function() {
@@ -569,7 +566,7 @@ describe('timepicker directive', function () {
       $rootScope.$digest();
       expect(getTimeState(true)).toEqual(['14', '10']);
       expect(getModelState()).toEqual([14, 10]);
-      expect(getMeridianButton().css('display')).toBe('none');
+      expect(getMeridianTd().css('display')).toBe('none');
     });
 
     it('handles correctly initially empty model on parent element', function() {
@@ -727,7 +724,6 @@ describe('timepicker directive', function () {
 
       changeInputValueTo(el, 'pizza');
       expect($rootScope.time).toBe(null);
-
       expect(el.parent().hasClass('has-error')).toBe(true);
       expect(element.hasClass('ng-invalid-time')).toBe(true);
 
@@ -736,7 +732,6 @@ describe('timepicker directive', function () {
       $rootScope.$digest();
       expect(getTimeState()).toEqual(['08', '40', 'PM']);
       expect(getModelState()).toEqual([20, 40]);
-
       expect(el.parent().hasClass('has-error')).toBe(false);
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
@@ -746,14 +741,12 @@ describe('timepicker directive', function () {
 
       changeInputValueTo(el, 'pizza');
       expect($rootScope.time).toBe(null);
-
       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('has-error')).toBe(false);
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
@@ -767,7 +760,6 @@ describe('timepicker directive', function () {
 
       changeInputValueTo(el, '16');
       expect($rootScope.time).toBe(null);
-
       expect(el.parent().hasClass('has-error')).toBe(true);
       expect(element.hasClass('ng-invalid-time')).toBe(true);
 
@@ -879,4 +871,3 @@ describe('timepicker directive', function () {
 
 });
 
-
diff --git a/template/timepicker/timepicker.html b/template/timepicker/timepicker.html
@@ -1,38 +1,26 @@
-<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>
+<table>
+	<tbody>
+		<tr class="text-center">
+			<td><a ng-click="incrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+			<td>&nbsp;</td>
+			<td><a ng-click="incrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+			<td ng-show="showMeridian"></td>
+		</tr>
+		<tr>
+			<td style="width:50px;" class="form-group" ng-class="{'has-error': invalidHours}">
+				<input type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2">
+			</td>
+			<td>:</td>
+			<td style="width:50px;" class="form-group" ng-class="{'has-error': invalidMinutes}">
+				<input type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
+			</td>
+			<td ng-show="showMeridian"><button class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
+		</tr>
+		<tr class="text-center">
+			<td><a ng-click="decrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+			<td>&nbsp;</td>
+			<td><a ng-click="decrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+			<td ng-show="showMeridian"></td>
+		</tr>
+	</tbody>
+</table>