alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Time Controller Markup and Styling

Browse Source 
open #1515
open #117
Begin work on styling the datetime picker;
This commit is contained in:
Charles Hacskaylo
2015-09-24 11:29:28 -07:00
parent 825d93cee3
commit 404d1e7801
7 changed files with 624 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
platform/commonUI/general/res/templates/controls/datetime-picker.html
View File

@@ -20,42 +20,46 @@
at runtime from the About dialog for additional information.
-->
<div ng-controller="DateTimePickerController">
<div style="vertical-align: top; display: inline-block">
<div style="text-align: center;">
<a ng-click="changeMonth(-1)">&lt;</a>
{{month}} {{year}}
<a ng-click="changeMonth(1)">&gt;</a>
</div>
<div>
<table>
<tr>
<th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">
{{day}}
</th>
</tr>
<tr ng-repeat="row in table">
<td style="text-align: center;"
ng-repeat="cell in row"
ng-click="select(cell)"
ng-class='{
disabled: !isSelectable(cell),
test: isSelected(cell)
}'>
<div>{{cell.day}}</div>
<div style="font-size: 80%">{{cell.dayOfYear}}</div>
</td>
</tr>
</table>
</div>
</div>
<div style="vertical-align: top; display: inline-block"
ng-repeat="key in ['hours', 'minutes', 'seconds']"
ng-if="options[key]">
<div>{{nameFor(key)}}</div>
<select size="10"
ng-model="time[key]"
ng-options="i for i in optionsFor(key)">
</select>
</div>
<div ng-controller="DateTimePickerController" class="menu l-datetime-picker s-datetime-picker">
<div class="holder">
<div class="l-calendar">
<div style="text-align: center;">
<a ng-click="changeMonth(-1)">&lt;</a>
{{month}} {{year}}
<a ng-click="changeMonth(1)">&gt;</a>
</div>
<div>
<table>
<tr>
<th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">
{{day}}
</th>
</tr>
<tr ng-repeat="row in table">
<td style="text-align: center;"
ng-repeat="cell in row"
ng-click="select(cell)"
ng-class='{
disabled: !isSelectable(cell),
test: isSelected(cell)
}'>
<div>{{cell.day}}</div>
<div style="font-size: 80%">{{cell.dayOfYear}}</div>
</td>
</tr>
</table>
</div>
</div>
<div class="l-time-selects"
ng-repeat="key in ['hours', 'minutes', 'seconds']"
ng-if="options[key]">
<div>{{nameFor(key)}}</div>
<div class='form-control select'>
<select size="1"
ng-model="time[key]"
ng-options="i for i in optionsFor(key)">
</select>
</div>
</div>
</div>
</div>