ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-21 01:21:19 +00:00
Code Issues Actions 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
Show Stats 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;
}
}
.l-calendar,
.l-time-selects {
border-top: 1px solid $colorInteriorBorder
}
.l-time-selects {
line-height: $formInputH;
}
}
/******************************************************** 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
* at runtime from the About dialog for additional information.
*****************************************************************************/
@mixin complexFieldHolder($myW) {
width: $myW + $interiorMargin;
input[type="text"] {
width: $myW;
}
}
.complex.datetime {
span {
display: inline-block;
margin-right: $interiorMargin;
}
/*
.field-hints,
.fields {
}
.field-hints {
}
*/
.fields {
margin-top: $interiorMarginSm 0;
padding: $interiorMarginSm 0;
}
.date {
$myW: 80px;
width: $myW + $interiorMargin;
input {
width: $myW;
}
@include complexFieldHolder(80px);
}
.time.md {
@include complexFieldHolder(60px);
}
.time.sm {
$myW: 40px;
width: $myW + $interiorMargin;
input {
width: $myW;
}
@include complexFieldHolder(40px);
}
}

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

@ -39,35 +39,28 @@
<div class="sub">{{cell.dayOfYear}}</div>
</li>
</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 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 class="l-time-selects complex datetime"
ng-show="options">
<div class="field-hints">
<span class="hint time md"
ng-repeat="key in ['hours', 'minutes', 'seconds']"
ng-if="options[key]">
{{nameFor(key)}}
</span>
</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>