ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-12 21:56:13 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Initial changes to refactor Time Conductor

Browse Source
This commit is contained in:
Rukmini Bose 2024-02-13 13:37:08 -08:00
parent 5f8d6899d2
commit 4b61e61af7
2 changed files with 71 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,16 @@
<template> <template>
<form ref="fixedDeltaInput"> <form ref="fixedDeltaInput">
<div class="c-tc-input-popup__input-grid"> <div class="c-tc-input-popup__input-grid">
<div class="pr-time-label"><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">Time</div> <div class="pr-time-label pr-time-label-start-time">Time</div>
<div class="pr-time-label"></div> <div class="pr-time-label pr-time-label-blank-grid"></div>
<div class="pr-time-label"><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">Time</div> <div class="pr-time-label pr-time-label-end-time">Time</div>
<div class="pr-time-label"></div> <div class="pr-time-label pr-time-label-blank-grid"></div>
<div class="pr-time-input pr-time-input--date pr-time-input--input-and-button"> <div
class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date"
>
<input <input
ref="startDate" ref="startDate"
v-model="formattedBounds.start" v-model="formattedBounds.start"
@ -28,7 +30,7 @@
/> />
</div> </div>
<div class="pr-time-input pr-time-input--time"> <div class="pr-time-input pr-time-input--time pr-time-input-start-time">
<input <input
ref="startTime" ref="startTime"
v-model="formattedBounds.startTime" v-model="formattedBounds.startTime"
@ -43,7 +45,9 @@
<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 pr-time-input--date pr-time-input--input-and-button"> <div
class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date"
>
<input <input
ref="endDate" ref="endDate"
v-model="formattedBounds.end" v-model="formattedBounds.end"
@ -63,7 +67,7 @@
/> />
</div> </div>
<div class="pr-time-input pr-time-input--time"> <div class="pr-time-input pr-time-input--time pr-time-input-end-time">
<input <input
ref="endTime" ref="endTime"
v-model="formattedBounds.endTime" v-model="formattedBounds.endTime"

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

@ -605,9 +605,65 @@
} }
} }
.pr-time-label-start-date{
background: red;
grid-area: head;
}
.pr-time-label-start-time{
background: red;
grid-area: headd;
}
.pr-time-input-start-date{
background: blue;
grid-area: headdd;
}
.pr-time-input-start-time{
background: blue;
grid-area: inputStartTime;
}
.icon-arrows-right-left{
background: green;
grid-area: arrowIcon;
}
.pr-time-label-end-date{
background: red;
grid-area: endDate;
}
.pr-time-label-end-time{
background: red;
grid-area: endTime;
}
.pr-time-input-end-date{
background: blue;
grid-area: inputEndDate;
}
.pr-time-input-end-time{
background: blue;
grid-area: inputEndTime;
}
.pr-time-input--buttons{
background: purple;
grid-area: buttons;
}
.pr-time-label-blank-grid{
background: yellow;
grid-area: blankSpace;
}
&--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: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
// grid-template-areas:
// "start_date start_time blank-space end_date end_time blank-space"
// "input_start_date input_start_time arrow_icon input_end_date input_end_time buttons";
grid-template-areas:
"head headd headdd";
} }
} }