ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-12 05:40:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix legacy messages ()

Browse Source 
* Fix legacy message styling

- Code cleanup;
- Enable constants-mobile;
- Add _legacy-messages.scss;
- Add status color fg colors to theme constants;

* CSS refactoring, significant migration for messages classes

- Many messages classes migrated;
- c-click-icon > c-icon-button;
- c-click-icon rewritten;
- __close-btn refined in dialogs;

* About and splash screen styling

- Fixed splash in About screen;

* Update _mixins.scss

* Convert c-overlay__close-button to button

- <a> -> <button>;
- Set color of button;
- Normalized naming from close-btn to close-button;

* Fixed brightness filter issue on elements in overlays in VISTA;

* Fix dismiss button
This commit is contained in:
Charles Hacskaylo 2019-03-21 15:07:16 -07:00 committed by Andrew Henry
parent 0e9319e97b
commit e8e7067993
34 changed files with 413 additions and 193 deletions

20
platform/commonUI/dialog/res/templates/message.html

@ -1,10 +1,10 @@
<div class="l-message"
<div class="c-message"
ng-class="'message-severity-' + ngModel.severity">
<div class="w-message-contents">
<div class="top-bar">
<div class="title">{{ngModel.title}}</div>
<div class="c-message__top-bar">
<div class="c-message__title">{{ngModel.title}}</div>
</div>
<div class="hint" ng-hide="ngModel.hint === undefined">
<div class="c-message__hint" ng-hide="ngModel.hint === undefined">
{{ngModel.hint}}
<span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
</div>
@ -16,17 +16,17 @@
ng-model="ngModel"
ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
</div>
<div class="bottom-bar">
<a ng-repeat="dialogOption in ngModel.options"
class="s-button"
<div class="c-overlay__button-bar">
<button ng-repeat="dialogOption in ngModel.options"
class="c-button"
ng-click="dialogOption.callback()">
{{dialogOption.label}}
</a>
<a class="s-button major"
</button>
<button class="c-button c-button--major"
ng-if="ngModel.primaryOption"
ng-click="ngModel.primaryOption.callback()">
{{ngModel.primaryOption.label}}
</a>
</button>
</div>
</div>
</div>

18
platform/commonUI/dialog/res/templates/notification-message.html

@ -1,25 +1,25 @@
<div class="l-message"
<div class="c-message"
ng-class="'message-severity-' + ngModel.severity">
<div class="w-message-contents">
<div class="top-bar">
<div class="title">{{ngModel.message}}</div>
<div class="c-message__top-bar">
<div class="c-message__title">{{ngModel.message}}</div>
</div>
<div class="message-body">
<mct-include key="'progress-bar'"
ng-model="ngModel"
ng-show="ngModel.progressPerc !== undefined"></mct-include>
</div>
<div class="bottom-bar">
<a ng-repeat="dialogOption in ngModel.options"
class="s-button"
<div class="c-overlay__button-bar">
<button ng-repeat="dialogOption in ngModel.options"
class="c-button"
ng-click="dialogOption.callback()">
{{dialogOption.label}}
</a>
<a class="s-button major"
</button>
<button class="c-button c-button--major"
ng-if="ngModel.primaryOption"
ng-click="ngModel.primaryOption.callback()">
{{ngModel.primaryOption.label}}
</a>
</button>
</div>
</div>
</div>

21
platform/commonUI/dialog/res/templates/overlay-message-list.html

@ -1,22 +1,23 @@
<mct-container key="overlay">
<div class="t-message-list">
<div class="top-bar">
<div class="dialog-title">{{ngModel.dialog.title}}</div>
<div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
ngModel.dialog.messages.length == 0">s</span>
<div class="t-message-list c-overlay__contents">
<div class="c-overlay__top-bar">
<div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
<div class="c-overlay__dialog-hint">Displaying {{ngModel.dialog.messages.length}} message<span
ng-show="ngModel.dialog.messages.length > 1 ||
ngModel.dialog.messages.length == 0">s</span>
</div>
</div>
<div class="w-messages">
<div class="w-messages c-overlay__messages">
<mct-include
ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
key="'notification-message'" ng-model="msg.model"></mct-include>
</div>
<div class="bottom-bar">
<a ng-repeat="dialogAction in ngModel.dialog.actions"
class="s-button major"
<div class="c-overlay__bottom-bar">
<button ng-repeat="dialogAction in ngModel.dialog.actions"
class="c-button c-button--major"
ng-click="dialogAction.action()">
{{dialogAction.label}}
</a>
</button>
</div>
</div>
</mct-container>

4
platform/commonUI/dialog/res/templates/overlay.html

@ -22,9 +22,9 @@
<div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
<div class="c-overlay__blocker"></div>
<div class="c-overlay__outer">
<a ng-click="ngModel.cancel()"
<button ng-click="ngModel.cancel()"
ng-if="ngModel.cancel"
class="c-click-icon c-overlay__close-button icon-x-in-circle"></a>
class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
<div class="c-overlay__contents" ng-transclude></div>
</div>
</div>

8
platform/commonUI/general/res/templates/message-banner.html

@ -1,13 +1,13 @@
<div ng-controller="BannerController" ng-show="active.notification"
class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
class="c-message-banner {{active.notification.model.severity}}" ng-class="{
'minimized': active.notification.model.minimized,
'new': !active.notification.model.minimized}"
ng-click="maximize(active.notification)">
<span class="banner-elem label">
<span class="c-message-banner__message">
{{active.notification.model.title}}
</span>
<span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
<mct-include key="'progress-bar'" class="banner-elem"
<mct-include key="'progress-bar'" class="c-message-banner__progress-bar"
ng-model="active.notification.model">
</mct-include>
</span>
@ -16,5 +16,5 @@
ng-click="action(active.notification.model.primaryOption.callback, $event)">
{{active.notification.model.primaryOption.label}}
</a>
<a class="banner-elem close icon-x" ng-click="dismiss(active.notification, $event)"></a>
<button class="c-message-banner__close-button c-click-icon icon-x-in-circle" ng-click="dismiss(active.notification, $event)"></button>
</div>

4
platform/features/clock/res/templates/timer.html

@ -24,10 +24,10 @@
<button ng-click="timer.clickStopButton()"
ng-hide="timer.timerState == 'stopped'"
title="Reset"
class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"></button>
<button ng-click="timer.clickButton()"
title="{{timer.buttonText()}}"
class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major {{timer.buttonCssClass()}}"></button>
</div>
<div class="c-timer__direction {{timer.signClass()}}"
ng-hide="!timer.signClass()"></div>

36
src/api/overlays/components/DialogComponent.vue

@ -27,10 +27,16 @@
<style lang="scss">
@import "~styles/sass-base";
@mixin legacyMessage() {
flex: 0 1 auto;
font-family: symbolsfont;
font-size: $messageIconD; // Singleton message in a dialog
margin-right: $interiorMarginLg;
}
.c-message {
display: flex;
align-items: center;
padding: $interiorMarginLg;
align-items: flex-start;
> * + * {
margin-left: $interiorMarginLg;
@ -58,7 +64,33 @@
&__title,
&__action-text {
font-size: 1.2em; // TEMP
}
/************************** LEGACY */
&.message-severity-info:before {
@include legacyMessage();
content: $glyph-icon-info;
color: $colorInfo;
}
&.message-severity-alert:before {
@include legacyMessage();
content: $glyph-icon-alert-rect;
color: $colorWarningLo;
}
&.message-severity-error:before {
@include legacyMessage();
content: $glyph-icon-alert-triangle;
color: $colorWarningLo;
}
// Messages in a list
.c-overlay__messages & {
padding: $interiorMarginLg;
&:before {
font-size: $messageListIconD;
}
}
}
</style>

5
src/api/overlays/components/OverlayComponent.vue

@ -56,9 +56,11 @@
}
&__close-button {
$p: $interiorMarginSm;
$p: $interiorMargin;
border-radius: 100% !important;
color: $overlayColorFg;
display: inline-block;
font-size: 1.25em;
position: absolute;
top: $p; right: $p;
}
@ -151,6 +153,7 @@
}
}
.t-dialog-sm .l-overlay-small, // Legacy dialog support
.l-overlay-fit {
.c-overlay__outer {
@include overlaySizing(auto);

2
src/plugins/folderView/components/GridItem.vue

@ -16,7 +16,7 @@
</div>
<div class="c-grid-item__controls">
<div class="icon-people" title='Shared'></div>
<button class="c-click-icon icon-info c-info-button" title='More Info'></button>
<button class="c-icon-button icon-info c-info-button" title='More Info'></button>
<div class="icon-pointer-right c-pointer-icon"></div>
</div>
</a>

2
src/plugins/notebook/res/templates/entry.html

@ -26,7 +26,7 @@
</div>
<div class="c-ne__local-controls--hidden">
<button class="c-click-icon c-click-icon--major icon-trash"
<button class="c-icon-button c-icon-button--major icon-trash"
title="Delete this entry"
@click="deleteEntry">
</button>

2
src/plugins/summaryWidget/res/widgetTemplate.html

@ -3,7 +3,7 @@
<div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
<div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
</a>
<div class="c-summary-widget__message holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
<div class="c-summary-widget__message holder flex-elem t-message-inline c-message message-severity-alert t-message-widget-no-data">
<div class="w-message-contents l-message-body-only">
<div class="message-body">
You must add at least one telemetry object to edit this widget.

8
src/plugins/timeConductor/DatePicker.vue

@ -21,7 +21,7 @@
*****************************************************************************/
<template>
<div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper" ref="calendarHolder">
<a class="c-click-icon icon-calendar"
<a class="c-icon-button icon-calendar"
@click="toggle"></a>
<div class="c-menu c-menu--mobile-modal c-datetime-picker"
v-if="open">
@ -30,10 +30,10 @@
@click="toggle"></button>
</div>
<div class="c-datetime-picker__pager c-pager l-month-year-pager">
<div class="c-pager__prev c-click-icon icon-arrow-left"
<div class="c-pager__prev c-icon-button icon-arrow-left"
@click.stop="changeMonth(-1)"></div>
<div class="c-pager__month-year">{{model.month}} {{model.year}}</div>
<div class="c-pager__next c-click-icon icon-arrow-right"
<div class="c-pager__next c-icon-button icon-arrow-right"
@click.stop="changeMonth(1)"></div>
</div>
<div class="c-datetime-picker__calendar c-calendar">
@ -91,7 +91,7 @@
grid-template-columns: auto 1fr auto;
align-items: center;
.c-click-icon {
.c-icon-button {
font-size: 0.8em;
}

82
src/styles-new/_about.scss

@ -21,6 +21,46 @@
*****************************************************************************/
// Used by About screen, licenses, etc.
.c-splash-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('../ui/layout/assets/images/bg-splash.jpg');
&:before,
&:after {
background-position: center;
background-repeat: no-repeat;
position: absolute;
background-image: url('../ui/layout/assets/images/logo-app-shdw.svg');
background-size: contain;
content: '';
}
&:before {
// NASA logo, dude
$w: 5%;
$m: 10px;
background-image: url('../ui/layout/assets/images/logo-nasa.svg');
top: $m;
right: auto;
bottom: auto;
left: $m;
height: auto;
width: $w * 2;
padding-bottom: $w;
padding-top: $w;
}
&:after {
// App logo
top: 0;
right: 15%;
bottom: 0;
left: 15%;
}
}
.c-about {
&--splash {
// Large initial image after click on app logo with text beneath
@ -37,48 +77,6 @@
&__text {
height: 50%;
flex: 1 1 0;
position: relative;
}
&__image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('../ui/layout/assets/images/bg-splash.jpg');
position: relative;
&:before,
&:after {
background-position: center;
background-repeat: no-repeat;
position: absolute;
background-image: url('../ui/layout/assets/images/logo-app-shdw.svg');
background-size: contain;
content: '';
}
&:before {
// NASA logo, dude
$w: 5%;
$m: 10px;
background-image: url('../ui/layout/assets/images/logo-nasa.svg');
top: $m;
right: auto;
bottom: auto;
left: $m;
height: auto;
width: $w * 2;
padding-bottom: $w;
padding-top: $w;
}
&:after {
// App logo
top: 0;
right: 15%;
bottom: 0;
left: 15%;
}
}
&__text {

15
src/styles-new/_constants-espresso.scss

@ -173,9 +173,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg;
$colorClickIcon: $colorKey;
$colorClickIconBgHov: rgba($colorKey, 0.6);
$colorClickIconFgHov: $colorKeyHov;
$colorClickIconButton: $colorKey;
$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
$colorClickIconButtonFgHov: $colorKeyHov;
$colorDropHint: $colorKey;
$colorDropHintBg: pushBack($colorDropHint, 10%);
$colorDropHintBgHov: $colorDropHint;
@ -244,7 +244,7 @@ $overlayColorFg: $colorMenuFg;
$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
$colorOvrBtnFg: #fff;
$overlayCr: $interiorMarginLg;
$overlayBrightnessAdjust: brightness(1.3);
$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
// Indicator colors
$colorIndicatorAvailable: $colorKey;
@ -267,12 +267,19 @@ $colorLimitRedIc: #ff4222;
// Status
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// Bubble colors
$colorInfoBubbleBg: #dddddd;

15
src/styles-new/_constants-maelstrom.scss

@ -177,9 +177,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg;
$colorClickIcon: $colorKey;
$colorClickIconBgHov: rgba($colorKey, 0.6);
$colorClickIconFgHov: $colorKeyHov;
$colorClickIconButton: $colorKey;
$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
$colorClickIconButtonFgHov: $colorKeyHov;
$colorDropHint: $colorKey;
$colorDropHintBg: pushBack($colorDropHint, 10%);
$colorDropHintBgHov: $colorDropHint;
@ -248,7 +248,7 @@ $overlayColorFg: $colorMenuFg;
$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
$colorOvrBtnFg: #fff;
$overlayCr: $interiorMarginLg;
$overlayBrightnessAdjust: brightness(1.3);
$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
// Indicator colors
$colorIndicatorAvailable: $colorKey;
@ -271,12 +271,19 @@ $colorLimitRedIc: #ff4222;
// Status
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// Bubble colors
$colorInfoBubbleBg: #dddddd;

4
src/styles-new/_constants-mobile.scss

@ -27,8 +27,8 @@ $mobileListIconSize: 30px;
$mobileTitleDescH: 35px;
$mobileOverlayMargin: 20px;
$mobileMenuIconD: 34px;
$phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3);
$phoneItemH: floor($gridItemMobile / 4);
$tabletItemH: floor($gridItemMobile / 3);
/************************** MOBILE TREE MENU DIMENSIONS */
$mobileTreeItemH: 35px;

15
src/styles-new/_constants-snow.scss

@ -173,9 +173,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg;
$colorClickIcon: $colorKey;
$colorClickIconBgHov: rgba($colorKey, 0.2);
$colorClickIconFgHov: $colorKeyHov;
$colorClickIconButton: $colorKey;
$colorClickIconButtonBgHov: rgba($colorKey, 0.2);
$colorClickIconButtonFgHov: $colorKeyHov;
$colorDropHint: $colorKey;
$colorDropHintBg: pushBack($colorDropHint, 10%);
$colorDropHintBgHov: pushBack($colorDropHint, 40%);
@ -244,7 +244,7 @@ $overlayColorFg: $colorMenuFg;
$colorOvrBtnBg: pullForward($overlayColorBg, 40%);
$colorOvrBtnFg: #fff;
$overlayCr: $interiorMarginLg;
$overlayBrightnessAdjust: brightness(1.3);
$overlayBrightnessAdjust: brightness(1); // Applied in a filter: property
// Indicator colors
$colorIndicatorAvailable: $colorKey;
@ -267,12 +267,19 @@ $colorLimitRedIc: #ffa99a;
// Status
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// Bubble colors
$colorInfoBubbleBg: $colorMenuBg;

3
src/styles-new/_constants.scss

@ -81,6 +81,9 @@ $waitSpinnerD: 32px;
$waitSpinnerTreeD: 20px;
$waitSpinnerBorderW: 5px;
$waitSpinnerTreeBorderW: 4px;
/*************** Messages */
$messageIconD: 80px;
$messageListIconD: 32px;
/************************** MOBILE */
$mobileMenuIconD: 24px; // Used

21
src/styles-new/_controls.scss

@ -55,9 +55,13 @@ button {
}
/********* Icon Buttons */
.c-click-icon,
.c-click-swatch {
.c-click-icon {
@include cClickIcon();
}
.c-icon-button,
.c-click-swatch {
@include cClickIconButton();
&--menu {
&:after {
@ -70,8 +74,8 @@ button {
}
}
.c-click-icon {
.c-click-icon__label {
.c-icon-button {
.c-icon-button__label {
margin-left: $interiorMargin;
}
@ -508,12 +512,12 @@ select {
@include cToolbarSeparator();
}
.c-click-icon,
.c-icon-button,
.c-labeled-input {
color: $editUIBaseColorFg;
}
.c-click-icon {
.c-icon-button {
@include cControl();
$pLR: $interiorMargin - 1;
$pTB: 2px;
@ -567,9 +571,8 @@ select {
&[class*='--strip'] {
// Buttons are smashed together with minimal margin
// c-buttons don't have border-radius between buttons, creates a horizontal tool-button-strip look
// c-click-icons get grouped more closely together
// c-buttons don't have border-radius between buttons, creates a tool-button-strip look
// c-icon-buttons get grouped more closely together
[class^="c-button"] {
// Only apply the following to buttons that have background, eg. c-button
border-radius: 0;

1
src/styles-new/_forms.scss

@ -338,7 +338,6 @@
}
}
mct-form.validates {
.form-row.validates {
> .label {

144
src/styles-new/_legacy-messages.scss Normal file

@ -0,0 +1,144 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, 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.
*****************************************************************************/
/******************************************************************* MESSAGES */
.w-message-contents {
flex: 1 1 auto;
display: flex;
flex-direction: column;
> * + * {
margin-bottom: $interiorMargin;
}
.message-body {
flex: 1 1 100%;
}
}
// Singleton in an overlay dialog
.t-message-single .l-message,
.t-message-single.l-message {
$iconW: $messageListIconD;
&:before {
font-size: $iconW;
width: $iconW + 2;
}
.title {
font-size: 1.2em;
}
}
// Singleton inline in a view
.t-message-inline .l-message,
.t-message-inline.l-message {
border-radius: $controlCr;
&.message-severity-info { background-color: rgba($colorInfo, 0.3); }
&.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
&.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
.w-message-contents.l-message-body-only {
.message-body {
margin-top: $interiorMargin;
}
}
}
// In a list
.c-overlay__messages {
//@include abs();
display: flex;
flex-direction: column;
overflow: auto;
padding-right: $interiorMargin;
> div,
> span {
margin-bottom: $interiorMargin;
}
.w-messages {
flex: 1 1 100%;
overflow-y: auto;
padding-right: $interiorMargin;
}
// Each message
.c-message {
@include discreteItem();
flex: 0 0 auto;
margin-bottom: $interiorMarginSm;
.hint,
.bottom-bar {
text-align: left;
}
}
}
@include phonePortrait {
.t-message-single .l-message,
.t-message-single.l-message {
flex-direction: column;
&:before {
margin-right: 0;
margin-bottom: $interiorMarginLg;
text-align: center;
width: 100%;
}
.bottom-bar {
text-align: center;
.s-button {
display: block;
width: 100%;
}
}
}
}
body.desktop .t-message-list {
.w-message-contents { padding-right: $interiorMargin; }
}
// Alert elements in views
mixin sUnSynced() {
$c: $colorPausedBg;
border: 1px solid $c;
}
.s-unsynced {
@include sUnsynced();
}
.s-status-timeconductor-unsynced {
// Plot areas
.gl-plot .gl-plot-display-area {
@include sUnsynced();
}
// Object headers
.object-header {
.t-object-alert {
display: inline;
}
}
}

8
src/styles-new/_legacy.scss

@ -314,7 +314,7 @@ body.mobile.phone {
transition: $transOut;
width: 0;
.c-click-icon:before { font-size: 1em; }
.c-icon-button:before { font-size: 1em; }
}
&__direction {
@ -797,6 +797,7 @@ mct-indicators mct-include {
display: inline-block;
position: relative;
padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
text-transform: uppercase;
&:before {
display: inline-block;
@ -806,7 +807,8 @@ mct-indicators mct-include {
display: inline-block;
a,
button,
.s-button {
s-button,
.c-button {
// Make <a> in label look like buttons
transition: $transIn;
background: transparent;
@ -831,8 +833,6 @@ mct-indicators mct-include {
margin-right: $interiorMarginSm;
}
}
button { text-transform: uppercase !important; }
}
&.no-collapse {

67
src/styles-new/_mixins.scss

@ -51,33 +51,15 @@
/************************** EFFECTS */
@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
@include keyframes($animName) {
@keyframes pulse {
0% { opacity: $opacity0; }
100% { opacity: $opacity100; }
}
@include animation-name($animName);
@include animation-duration($dur);
@include animation-direction(alternate);
@include animation-iteration-count($iteration);
@include animation-timing-function(ease-in-out);
}
@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
@include keyframes($animName) {
from { #{propName}: $propValStart; }
to { #{$propName}: $propValEnd; }
}
@include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
}
@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
@include animation-name($animName);
@include animation-duration($dur);
@include animation-delay($delay);
@include animation-fill-mode(both);
@include animation-direction($dir);
@include animation-iteration-count($count);
@include animation-timing-function(ease-in-out);
animation-name: $animName;
animation-duration: $dur;
animation-direction: alternate;
animation-iteration-count: $iteration;
animation-timing-function: ease-in-out;
}
/************************** VISUALS */
@ -412,24 +394,37 @@
}
}
@mixin cClickIcon() {
// A clickable element that just includes the icon, no background
@include cControl();
cursor: pointer;
padding: 4px; // Bigger hit area
opacity: 0.6;
transition: $transOut;
transform-origin: center;
@include hover() {
transform: scale(1.1);
transition: $transIn;
opacity: 1;
}
}
@mixin cClickIconButton() {
// A clickable element that just includes the icon
// Background is displayed on hover
// Padding is included to facilitate a bigger hit area
// Make the icon bigger relative to its container
@include cControl();
$pLR: 4px;
$pTB: 4px;
background: none;
box-shadow: none;
border-radius: $controlCr;
cursor: pointer;
$pLR: 4px;
$pTB: 4px;
transition: $transOut;
border-radius: $controlCr;
padding: $pTB $pLR;
@include hover() {
background: $colorClickIconBgHov;
color: $colorClickIconFgHov;
}
&:before,
*:before {
// *:before handles any nested containers that may contain glyph elements
@ -437,6 +432,12 @@
font-size: 1.25em;
}
@include hover() {
transition: $transIn;
background: $colorClickIconButtonBgHov;
color: $colorClickIconButtonFgHov;
}
&[class*="--major"] {
color: $colorKey;
}

1
src/styles-new/core.scss

@ -24,6 +24,7 @@
@import "sass-base";
/******************** RENDERS CSS */
@import "about";
@import "glyphs";
@import "global";
@import "status";

1
src/styles-new/sass-base.scss

@ -24,6 +24,7 @@
// Meant for use as a single line import in Vue SFC's.
// Do not include anything that renders to CSS!
@import "constants";
@import "constants-mobile.scss";
@import "constants-espresso"; // TEMP
//@import "constants-snow"; // TEMP
//@import "constants-maelstrom";

2
src/ui/layout/AboutDialog.vue

@ -1,7 +1,7 @@
<template>
<div class="c-about c-about--splash">
<div v-if="branding.aboutHtml" class="s-text l-content" v-html="branding.aboutHtml"></div>
<div v-else class="c-about__image"></div>
<div v-else class="c-about__image c-splash-image"></div>
<div class="c-about__text s-text">
<h1 class="l-title s-title">Open MCT</h1>

2
src/ui/layout/BrowseBar.vue

@ -2,7 +2,7 @@
<div class="l-browse-bar">
<div class="l-browse-bar__start">
<button v-if="hasParent"
class="l-browse-bar__nav-to-parent-button c-click-icon c-click-icon--major icon-pointer-left"
class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-pointer-left"
@click="goToParent"></button>
<div class="l-browse-bar__object-name--w"
:class="type.cssClass">

6
src/ui/layout/Layout.vue

@ -5,11 +5,11 @@
<div class="l-shell__head">
<CreateButton class="l-shell__create-button"></CreateButton>
<div class="l-shell__controls">
<button class="c-click-icon c-click-icon--major icon-new-window" title="Open in a new browser tab"
<button class="c-icon-button c-icon-button--major icon-new-window" title="Open in a new browser tab"
@click="openInNewTab"
target="_blank">
</button>
<button v-bind:class="['c-click-icon c-click-icon--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
<button v-bind:class="['c-icon-button c-icon-button--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
v-bind:title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
@click="fullScreenToggle">
</button>
@ -74,7 +74,7 @@
[class*="collapse-button"] {
// For mobile, collapse button becomes menu icon
body.mobile & {
@include cClickIcon();
@include cClickIconButton();
position: absolute;
right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
top: 0;

73
src/ui/layout/status-bar/NotificationBanner.vue

@ -17,7 +17,7 @@
at runtime from the About dialog for additional information.
-->
<template>
<div class="c-message-banner s-message-banner"
<div class="c-message-banner"
:class="[
activeModel.severity,
{
@ -31,36 +31,68 @@
class="c-message-banner__progress-bar"
v-if="activeModel.progressPerc !== undefined" :model="activeModel">
</progress-bar>
<button class="c-message-banner__close-btn c-click-icon icon-x"
@click="dismiss()"></button>
<button class="c-message-banner__close-button c-click-icon icon-x-in-circle"
@click.stop="dismiss()"></button>
</div>
</template>
<style lang="scss">
@import "~styles/sass-base";
@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
$bgPb: 10%;
$bgPbD: 10%;
background-color: darken($bg, $bgPb);
color: $fg;
&:hover {
background-color: darken($bg, $bgPb - $bgPbD);
}
.s-action {
background-color: darken($bg, $bgPb + $bgPbD);
&:hover {
background-color: darken($bg, $bgPb);
}
}
}
.c-message-banner {
$closeBtnSize: 7px;
$m: 1px;
border-radius: $controlCr;
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
cursor: pointer;
display: flex;
align-items: center;
left: 50%;
max-width: 50%;
padding: $interiorMargin $interiorMarginLg;
padding: $interiorMargin $interiorMargin $interiorMargin $interiorMarginLg;
position: absolute;
transform: translateX(-50%);
bottom: $m;
z-index: 2;
// TODOs:
// - Styling for message types, add color values to theme scss files
// - Factor out s-message-banner
> * + * {
margin-left: $interiorMargin;
}
&.ok {
@include statusBannerColors($colorOk, $colorOkFg);
}
&.info {
@include statusBannerColors($colorInfo, $colorInfoFg);
}
&.caution,
&.warning,
&.alert {
@include statusBannerColors($colorWarningLo,$colorWarningLoFg);
}
&.error {
@include statusBannerColors($colorWarningHi, $colorWarningHiFg);
}
&__message {
@include ellipsize();
flex: 1 1 auto;
@ -78,29 +110,10 @@
}
}
&__close-btn {
font-size: $closeBtnSize;
&__close-button {
font-size: 1.25em;
}
}
/*
.l-message-banner {
display: flex;
left: 50%;
position: absolute;
}
.banner-elem {
display: inline;
}*/
</style>
<script>
@ -176,6 +189,7 @@
},
destroyActiveNotification() {
this.clearModel();
activeNotification.off('destroy', this.destroyActiveNotification);
activeNotification = undefined;
},
dismiss() {
@ -189,7 +203,6 @@
this.activeModel.minimized = true;
activeNotification.off('progress', this.updateProgress);
activeNotification.off('minimized', this.minimized);
activeNotification.off('destroy', this.destroyActiveNotification);
activeNotification.off('progress', updateMaxProgressBar);
activeNotification.off('minimized', dismissMaximizedDialog);

6
src/ui/toolbar/components/toolbar-button.vue

@ -1,13 +1,13 @@
<template>
<div class="c-ctrl-wrapper">
<div class="c-click-icon"
<div class="c-icon-button"
:title="options.title"
:class="{
[options.icon]: true,
'c-click-icon--caution': options.modifier === 'caution'
'c-icon-button--caution': options.modifier === 'caution'
}"
@click="onClick">
<div class="c-click-icon__label"
<div class="c-icon-button__label"
v-if="options.label">
{{ options.label }}
</div>

2
src/ui/toolbar/components/toolbar-color-picker.vue

@ -1,6 +1,6 @@
<template>
<div class="c-ctrl-wrapper">
<div class="c-click-icon c-click-icon--swatched"
<div class="c-icon-button c-icon-button--swatched"
:class="options.icon"
:title="options.title"
@click="toggle">

4
src/ui/toolbar/components/toolbar-menu.vue

@ -1,10 +1,10 @@
<template>
<div class="c-ctrl-wrapper">
<div class="c-click-icon c-click-icon--menu"
<div class="c-icon-button c-icon-button--menu"
:class="options.icon"
:title="options.title"
@click="toggle">
<div class="c-click-icon__label"
<div class="c-icon-button__label"
v-if="options.label">
{{ options.label }}
</div>

2
src/ui/toolbar/components/toolbar-select-menu.vue

@ -1,6 +1,6 @@
<template>
<div class="c-ctrl-wrapper">
<div class="c-click-icon c-click-icon--menu"
<div class="c-icon-button c-icon-button--menu"
:class="options.icon"
:title="options.title"
@click="toggle">

2
src/ui/toolbar/components/toolbar-toggle-button.vue

@ -1,6 +1,6 @@
<template>
<div class="c-ctrl-wrapper">
<div class="c-click-icon"
<div class="c-icon-button"
:title="nextValue.title"
:class="nextValue.icon"
@click="cycle">