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

[Frontend] Time controller-related styling (CP > open117)

Browse Source 
open #1515
open #117
Layout styling in datetime picker;
Modded picker to hide time selects area
when time options are null;
(cherry picked from commit 6721093)
This commit is contained in:
Charles Hacskaylo
2015-09-25 11:11:22 -07:00
parent 7a677062e4
commit afb1202865
3 changed files with 46 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -391,6 +391,13 @@ label.checkbox.custom {
right: $pagerW + $interiorMargin; right: $pagerW + $interiorMargin;
} }
} }
.l-calendar,
.l-time-selects {
border-top: 1px solid $colorInteriorBorder
}
.l-time-selects {
line-height: $formInputH;
}
} }
/******************************************************** CALENDAR */ /******************************************************** CALENDAR */

33
platform/commonUI/general/res/sass/forms/_datetime.scss
View File

@@ -19,39 +19,44 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@mixin complexFieldHolder($myW) {
width: $myW + $interiorMargin;
input[type="text"] {
width: $myW;
}
}
.complex.datetime { .complex.datetime {
span { span {
display: inline-block; display: inline-block;
margin-right: $interiorMargin; margin-right: $interiorMargin;
} }
/*
.field-hints, .field-hints,
.fields { .fields {
} }
.field-hints { .field-hints {
} }
*/
.fields { .fields {
margin-top: $interiorMarginSm 0; margin-top: $interiorMarginSm 0;
padding: $interiorMarginSm 0; padding: $interiorMarginSm 0;
} }
.date { .date {
$myW: 80px; @include complexFieldHolder(80px);
width: $myW + $interiorMargin; }
input {
width: $myW; .time.md {
} @include complexFieldHolder(60px);
} }
.time.sm { .time.sm {
$myW: 40px; @include complexFieldHolder(40px);
width: $myW + $interiorMargin;
input {
width: $myW;
}
} }
} }

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

@@ -39,35 +39,28 @@
<div class="sub">{{cell.dayOfYear}}</div> <div class="sub">{{cell.dayOfYear}}</div>
</li> </li>
</ul> </ul>
<!--<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), selected: isSelected(cell) }'>
<div>{{cell.day}}</div>
<div style="font-size: 80%">{{cell.dayOfYear}}</div>
</td>
</tr>
</table>-->
</div> </div>
</div> </div>
<div class="l-time-selects" <div class="l-time-selects complex datetime"
ng-repeat="key in ['hours', 'minutes', 'seconds']" ng-show="options">
ng-if="options[key]"> <div class="field-hints">
<div>{{nameFor(key)}}</div> <span class="hint time md"
<div class='form-control select'> ng-repeat="key in ['hours', 'minutes', 'seconds']"
<select size="1" ng-if="options[key]">
ng-model="time[key]" {{nameFor(key)}}
ng-options="i for i in optionsFor(key)"> </span>
</select> </div>
<div>
<span class="field control time md"
ng-repeat="key in ['hours', 'minutes', 'seconds']"
ng-if="options[key]">
<div class='form-control select'>
<select size="1"
ng-model="time[key]"
ng-options="i for i in optionsFor(key)">
</select>
</div>
</span>
</div> </div>
</div> </div>
</div> </div>