diff --git a/src/plugins/userIndicator/components/MissionStatusPopup.vue b/src/plugins/userIndicator/components/MissionStatusPopup.vue index fa66d23cb3..4269f41180 100644 --- a/src/plugins/userIndicator/components/MissionStatusPopup.vue +++ b/src/plugins/userIndicator/components/MissionStatusPopup.vue @@ -1,17 +1,25 @@ @@ -27,22 +35,18 @@ export default { }; }, async created() { - this.missionStatuses = [ - 'Command', - 'Drive', - 'Camera' - ]; + this.missionStatuses = ['Command', 'Drive', 'Camera']; this.missionStatusOptions = [ { key: '0', - label: 'No Go' + label: 'NO GO' }, { key: '1', - label: 'Go' + label: 'GO' } - ] + ]; }, methods: { onDismiss() { diff --git a/src/plugins/userIndicator/user-indicator.scss b/src/plugins/userIndicator/user-indicator.scss index 2feb04c14e..be80696022 100644 --- a/src/plugins/userIndicator/user-indicator.scss +++ b/src/plugins/userIndicator/user-indicator.scss @@ -1,13 +1,35 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2024, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + .c-indicator { &:before { // Indicator icon color: $colorKey; } - + &--clickable { cursor: pointer; max-width: 250px; - + @include hover() { background: $colorIndicatorBgHov; } @@ -21,7 +43,7 @@ display: flex; flex-direction: column; padding: $interiorMarginLg; - min-width: 350px; + min-width: max-content; max-width: 35%; > * + * { @@ -30,7 +52,7 @@ *:before { font-size: 0.8em; - margin-right: $interiorMarginSm; + margin-right: $interiorMarginSm; // WTF - this is BAD! } &__section { @@ -43,6 +65,32 @@ } } + &__header { + align-items: center; + display: flex; + column-gap: $interiorMargin; + text-transform: uppercase; + + > * { flex: 0 0 auto; } + + [class*='title'] { + flex: 1 1 auto; + } + } + + .t-close-btn { + &:before { + margin-right: 0; + } + } + + &__component { + // General classes for new control panel component + display: flex; + flex-direction: column; + gap: $interiorMargin; + } + &__top { text-transform: uppercase; } @@ -70,7 +118,7 @@ } } - /****** Admin interface */ + /*************************************************** ADMIN INTERFACE */ &__content { $m: $interiorMargin; display: grid; @@ -108,4 +156,35 @@ } } } -} \ No newline at end of file +} + +/**************** STYLES FOR THE MISSION STATUS USER CONTROL PANEL */ +.c-ucp-mission-status { + $bg: rgba(black, 0.7); + display: grid; + grid-template-columns: max-content max-content 1fr; + align-items: center; + grid-column-gap: $interiorMarginLg; + grid-row-gap: $interiorMargin; + + &__widget { + border-radius: $basicCr; + background: $bg; + border: 1px solid transparent; + padding: $interiorMarginSm $interiorMarginLg; + text-align: center; + + &.--is-go { + $c: #2C7527; + background: $c; + color: white; + } + + &.--is-no-go { + $c: #FBC147; + background: $bg; + border: 1px solid $c; + color: $c; + } + } +} diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index b67a7bcb9f..19fb3d5e1f 100644 --- a/src/styles/_controls.scss +++ b/src/styles/_controls.scss @@ -222,6 +222,10 @@ button { font-size: 1.1em; } } + + &--sm { + padding: $interiorMarginSm $interiorMargin; + } } .c-list-button { diff --git a/src/styles/_global.scss b/src/styles/_global.scss index c1f387561c..b913de877e 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -98,6 +98,7 @@ body.desktop { } div, + ul, span { // Firefox scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;