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

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>
<form ref="fixedDeltaInput">
<div class="c-tc-input-popup__input-grid">
<div class="pr-time-label"><em>Start</em> Date</div>
<div class="pr-time-label">Time</div>
<div class="pr-time-label"></div>
<div class="pr-time-label"><em>End</em> Date</div>
<div class="pr-time-label">Time</div>
<div class="pr-time-label"></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-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>
<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
ref="startDate"
v-model="formattedBounds.start"
@ -28,7 +30,7 @@
/>
</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
ref="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--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
ref="endDate"
v-model="formattedBounds.end"
@ -63,7 +67,7 @@
/>
</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
ref="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 {
.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";
}
}