ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-08 03:50:39 +00:00
Code Issues Actions 1 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="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-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-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-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-end-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>

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

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

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

@ -605,64 +605,109 @@
} }
} }
.pr-time{ .pr-time{
.-label-start-date{ // FIXED TIME MODE
&-label-start-date{
grid-area: sDate; grid-area: sDate;
} }
.-label-start-time{ &-label-start-time{
grid-area: sTime; grid-area: sTime;
} }
.-input-start-date{ &-input-start-date{
grid-area: sDateInput; grid-area: sDateInput;
} }
.-input-start-time{ &-input-start-time{
grid-area: sTimeInput; grid-area: sTimeInput;
} }
&-label-end-date{
&.icon-arrows-right-left{
grid-area: arrowIcon;
}
.-label-end-date{
grid-area: eDate; grid-area: eDate;
} }
.-label-end-time{ &-label-end-time{
grid-area: eTime; grid-area: eTime;
} }
.-input-end-date{ &-input-end-date{
grid-area: eDateInput; grid-area: eDateInput;
} }
.-input-end-time{ &-input-end-time{
grid-area: eTimeInput; grid-area: eTimeInput;
} }
.-input--buttons{ &-label-blank-grid{
grid-area: buttons;
}
.-label-blank-grid{
grid-area: blank; 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 { &--fixed-mode {
.c-tc-input-popup__input-grid { .c-tc-input-popup__input-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr; 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: grid-template-areas:
"sDate sTime . eDate eTime ." "sDate sTime . eDate eTime ."
"sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons "; "sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons";
} }
} }
&--realtime-mode { &--realtime-mode {
.c-tc-input-popup__input-grid { .c-tc-input-popup__input-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr; 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 { &__input-grid {
display: grid; display: grid;
grid-column-gap: 3px; grid-column-gap: 3px;
grid-row-gap: $interiorMargin;
align-items: start; align-items: start;
} }
} }