ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-01 08:48:28 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Finish total refactor of Time Conductor

Browse Source
This commit is contained in:
Rukmini Bose 2024-02-14 17:25:50 -08:00
parent f55e31b84b
commit 4ded5b4421
3 changed files with 78 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/timeConductor/TimePopupFixed.vue
View File

@ -3,7 +3,7 @@
<div class="c-tc-input-popup__input-grid">
<div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div>
<div class="pr-time-label pr-time-label-start-time">Time</div>
<div class="pr-time-label pr-time-label-blank-grid"></div>
<div class="pr-time-label pr-time__label-blank-grid"></div>
<div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div>
<div class="pr-time-label pr-time-label-end-time">Time</div>
<div class="pr-time-label pr-time-label-blank-grid"></div>

24
src/plugins/timeConductor/TimePopupRealtime.vue
View File

@ -1,16 +1,16 @@
<template>
<form ref="deltaInput">
<div class="c-tc-input-popup__input-grid">
<div class="pr-time-label icon-minus">Hrs</div>
<div class="pr-time-label">Mins</div>
<div class="pr-time-label">Secs</div>
<div class="pr-time-label icon-minus pr-time-label-minus-hrs">Hrs</div>
<div class="pr-time-label pr-time-label-minus-mins">Mins</div>
<div class="pr-time-label pr-time-label-minus-secs">Secs</div>
<div class="pr-time-label"></div>
<div class="pr-time-label icon-plus">Hrs</div>
<div class="pr-time-label">Mins</div>
<div class="pr-time-label">Secs</div>
<div class="pr-time-label icon-plus pr-time-label-plus-hrs">Hrs</div>
<div class="pr-time-label pr-time-label-plus-mins">Mins</div>
<div class="pr-time-label pr-time-label-plus-secs">Secs</div>
<div class="pr-time-label"></div>
<div class="pr-time-input">
<div class="pr-time-input pr-time-input-minus-hrs">
<input
ref="startInputHrs"
v-model="startInputHrs"
@ -29,7 +29,7 @@
/>
<b>:</b>
</div>
<div class="pr-time-input">
<div class="pr-time-input pr-time-input-minus-mins">
<input
ref="startInputMins"
v-model="startInputMins"
@ -48,7 +48,7 @@
/>
<b>:</b>
</div>
<div class="pr-time-input">
<div class="pr-time-input pr-time-input-minus-secs">
<input
ref="startInputSecs"
v-model="startInputSecs"
@ -69,7 +69,7 @@
<div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
<div class="pr-time-input">
<div class="pr-time-input pr-time-input-plus-hrs">
<input
ref="endInputHrs"
v-model="endInputHrs"
@ -88,7 +88,7 @@
/>
<b>:</b>
</div>
<div class="pr-time-input">
<div class="pr-time-input pr-time-input-plus-mins">
<input
ref="endInputMins"
v-model="endInputMins"
@ -106,7 +106,7 @@
/>
<b>:</b>
</div>
<div class="pr-time-input">
<div class="pr-time-input pr-time-input-plus-secs">
<input
ref="endInputSecs"
v-model="endInputSecs"

85
src/plugins/timeConductor/conductor.scss
View File

@ -605,64 +605,109 @@
}
}
.pr-time{
.-label-start-date{
// FIXED TIME MODE
&-label-start-date{
grid-area: sDate;
}
.-label-start-time{
&-label-start-time{
grid-area: sTime;
}
.-input-start-date{
&-input-start-date{
grid-area: sDateInput;
}
.-input-start-time{
&-input-start-time{
grid-area: sTimeInput;
}
&.icon-arrows-right-left{
grid-area: arrowIcon;
}
.-label-end-date{
&-label-end-date{
grid-area: eDate;
}
.-label-end-time{
&-label-end-time{
grid-area: eTime;
}
.-input-end-date{
&-input-end-date{
grid-area: eDateInput;
}
.-input-end-time{
&-input-end-time{
grid-area: eTimeInput;
}
.-input--buttons{
grid-area: buttons;
}
.-label-blank-grid{
&-label-blank-grid{
grid-area: blank;
}
//REAL TIME MODE
&-label-minus-hrs{
grid-area: labelMinusHrs;
}
&-label-minus-mins{
grid-area: labelMinusMins;
}
&-label-minus-secs{
grid-area: labelMinusSecs;
}
&-label-plus-hrs{
grid-area: labelPlusHrs;
}
&-label-plus-mins{
grid-area: labelPlusMins;
}
&-label-plus-secs{
grid-area: labelPlusSecs;
}
&-input-minus-hrs{
grid-area: inputMinusHrs;
}
&-input-minus-mins{
grid-area: inputMinusMins;
}
&-input-minus-secs{
grid-area: inputMinusSecs;
}
&-input-plus-hrs{
grid-area: inputPlusHrs;
}
&-input-plus-mins{
grid-area: inputPlusMins;
}
&-input-plus-secs{
grid-area: inputPlusSecs;
}
// USED FOR BOTH
&-label-blank-grid{
grid-area: empty;
}
&-input__start-end-sep{
grid-area: arrowIcon;
}
&-input--buttons{
grid-area: buttons;
}
}
&--fixed-mode {
.c-tc-input-popup__input-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
grid-template-rows: 1fr 1fr; // hardcode the rows to avoid the random row gap
grid-template-areas:
"sDate sTime . eDate eTime ."
"sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons ";
"sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons";
}
}
&--realtime-mode {
.c-tc-input-popup__input-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
grid-row-gap: $interiorMargin; // Add only to real-time mode since this code for fixed mode is giving a random row gap.
grid-template-areas:
"labelMinusHrs labelMinusMins labelMinusSecs . labelPlusHrs labelPlusMins labelPlusSecs ."
"inputMinusHrs inputMinusMins inputMinusSecs arrowIcon inputPlusHrs inputPlusMins inputPlusSecs buttons";
}
}
&__input-grid {
display: grid;
grid-column-gap: 3px;
grid-row-gap: $interiorMargin;
align-items: start;
}
}