Android Lollipop Timetpicker

README.md

Recreating the android timepicker in scss . Note that the android clock has PM hours on the outside circle except for 00.

Problems with current solution:

• very heavy code
• fixed width and height

Not sure any of the problems can be fixed, I think it somewhat pushes the limit of what scss should do :)

html

<table>
      <thead>
      <tr>
        <th>‹</th>
        <th colspan="5" class="switch">Jan 12, 2015</th>
        <th>›</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td colspan="7">
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope active">0</span>
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">1</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">2</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">3</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">4</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">5</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">6</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">7</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">8</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">9</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">10</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">11</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">12</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">13</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">14</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">15</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">16</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">17</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">18</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">19</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">20</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">21</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">22</span><!-- end ngRepeat: hour in hours -->
          <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour|date:'H'" class="ng-binding ng-scope">23</span><!-- end ngRepeat: hour in hours -->
        </td>
      </tr>
      </tbody>
    </table>

math

@function yOnClock($step, $radius){
	@return $radius * sin(2 * pi() * $step / 12);
}

@function xOnClock($step, $radius){
	@return $radius * cos(2 * pi() * $step / 12);
}

@function pi() {
  @return 3.14159265359;
}

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function sin($angle) {
  $sin: 0;
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

style

$clock-size: 200px;
$radius: $clock-size / 2;
$inner-radius: $radius - 35px;

&:nth-child(1){
	transform: translate(xOnClock(1 - 4, $radius), yOnClock(1 - 4, $radius));
}
@for $i from 2 through 12{
	&:nth-child(#{$i}){
		transform: translate(xOnClock($i - 4, $inner-radius), yOnClock($i - 4, $inner-radius));
		font-size: 18px;
	}
}
&:nth-child(13){
	font-size: 18px;
	transform: translate(xOnClock(13 - 4, $inner-radius), yOnClock(13 - 4, $inner-radius));
}
@for $i from 2 through 12{//actualy 14 to 24
	&:nth-child(#{$i + 12}){
		transform: translate(xOnClock($i - 4, $radius), yOnClock($i - 4, $radius));
	}
}