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
Commit prior to redoing markup of picker to use flex instead of table;
Styling in picker; tabular styles fixed somewhat;
This commit is contained in:
Charles Hacskaylo
2015-09-24 16:42:45 -07:00
parent 1d83516982
commit 67f627b51f
7 changed files with 414 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@@ -351,7 +351,43 @@ label.checkbox.custom {
/******************************************************** DATETIME PICKER */
.l-datetime-picker {
$r1H: 15px;
padding: $interiorMarginLg !important;
.l-month-year-pager {
$pagerW: 20px;
//@include test();
font-size: 0.8rem;
height: $r1H;
margin-bottom: $interiorMargin;
position: relative;
.pager,
.val {
//@include test(red);
@extend .abs;
}
.pager {
width: $pagerW;
@extend .ui-symbol;
&.prev {
right: auto;
&:before {
content: "\3c";
}
}
&.next {
left: auto;
text-align: right;
&:before {
content: "\3e";
}
}
}
.val {
text-align: center;
left: $pagerW + $interiorMargin;
right: $pagerW + $interiorMargin;
}
}
}
/******************************************************** BROWSER ELEMENTS */

8
platform/commonUI/general/res/sass/lists/_tabular.scss
View File

@@ -40,6 +40,11 @@ table {
thead, .thead {
border-bottom: 1px solid $colorTabHeaderBorder;
}
&:not(.fixed-header) tr th {
background-color: $colorTabHeaderBg;
}
tbody, .tbody {
display: table-row-group;
tr, .tr {
@@ -64,7 +69,6 @@ table {
display: table-cell;
}
th, .th {
background-color: $colorTabHeaderBg;
border-left: 1px solid $colorTabHeaderBorder;
color: $colorTabHeaderFg;
padding: $tabularTdPadLR $tabularTdPadLR;
@@ -143,7 +147,7 @@ table {
position: absolute;
width: 100%;
height: $tabularHeaderH;
background: rgba(#fff, 0.15);
background-color: $colorTabHeaderBg;
}
}
tbody, .tbody {

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

@@ -22,44 +22,42 @@
<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
<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='{
<div class="l-month-year-pager">
<a class="pager prev" ng-click="changeMonth(-1)"></a>
<span class="val">{{month}} {{year}}</span>
<a class="pager next" ng-click="changeMonth(1)"></a>
</div>
<div class="l-calendar">
<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>{{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>

81
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@@ -58,8 +58,6 @@
</mct-popup>
</span>&nbsp;
</span>
</div>
<div class="l-time-range-slider-holder">
@@ -100,81 +98,4 @@
</div>
</div>
</div>
</div>
<!-- VICTOR's -->
<!--
<div class="l-time-controller" ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder">
Start: {{startOuterText}}
<span ng-controller="ToggleController as t">
<a class="ui-symbol" ng-click="t.toggle()">p</a>
<mct-popup ng-if="t.isActive()">
<div style="background: #222;"
mct-click-elsewhere="t.setState(false)">
<mct-control key="'datetime-picker'"
ng-model="ngModel.outer"
field="'start'"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>
End: {{endOuterText}}
<span ng-controller="ToggleController as t2">
<a class="ui-symbol" ng-click="t2.toggle()">p</a>
<mct-popup ng-if="t2.isActive()">
<div style="background: #222;"
mct-click-elsewhere="t2.setState(false)">
<mct-control key="'datetime-picker'"
ng-model="ngModel.outer"
field="'end'"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>
</div>
<div class="l-time-range-slider-holder">
<div class="l-time-range-slider">
<div class="slider"
mct-resize="spanWidth = bounds.width">
<div class="slot range-holder">
<div class="range"
mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}">
</div>
</div>
<div class="knob knob-l"
mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])"
ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r"
mct-drag-down="startRightDrag()"
mct-drag="rightDrag(delta[0])"
ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div>
</div>
</div>
</div>
</div>
<div class="l-time-range-ticks-holder">
<div class="l-time-range-ticks">
<div
ng-repeat="tick in ticks"
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
class="tick tick-x"
>
<span class="l-time-range-tick-label">{{tick}}</span>
</div>
</div>
</div>
</div>-->
</div>