57443d227d
* Sanding and shimming on loading CSS - Wait spinners in the tree; - Move spinner and loading CSS from legacy to global.scss; * Misc UI 6 - Better approach to Time Conductor overflow; - Fixed main page left/right clipping issue; - Fixed table header bg styling that had issues in legacy tables; - Fixed Time Conductor datetime picker clipping issue; - New .c-message--simple for use in Summary Widgets; - Better styling for header in empty Tabs view; - Fixed Chrome 73 scrolling bug in Summary Widgets; - Fixed problem in Inspector <li> elements from new wait spinner; - Fixed color of <a> tags in tables to be more visible; styling; * Misc UI 6 - Fix VISTA session selector not scrolling (Chrome 73 overflow bug); * Misc UI 6 - Fix VISTA session selector not scrolling (Chrome 73 overflow bug);
114 lines
2.7 KiB
Vue
114 lines
2.7 KiB
Vue
<template>
|
|
<div class="c-message">
|
|
<!--Uses flex-row -->
|
|
<div class="c-message__icon"
|
|
:class="['u-icon-bg-color-' + iconClass]"></div>
|
|
<div class="c-message__text">
|
|
<!-- Uses flex-column -->
|
|
<div class="c-message__title"
|
|
v-if="title">
|
|
{{title}}
|
|
</div>
|
|
|
|
<div class="c-message__hint"
|
|
v-if="hint">
|
|
{{hint}}
|
|
<span v-if="timestamp">[{{timestamp}}]</span>
|
|
</div>
|
|
|
|
<div class="c-message__action-text"
|
|
v-if="message">
|
|
{{message}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<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;
|
|
|
|
> * + * {
|
|
margin-left: $interiorMarginLg;
|
|
}
|
|
|
|
&__icon {
|
|
// Holds a background SVG graphic
|
|
$s: 50px;
|
|
flex: 0 0 auto;
|
|
min-width: $s;
|
|
min-height: $s;
|
|
}
|
|
|
|
&__text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
|
|
> * + * {
|
|
margin-top: $interiorMargin;
|
|
}
|
|
}
|
|
|
|
// __text elements
|
|
&__title,
|
|
&__action-text {
|
|
font-size: 1.2em; // TEMP
|
|
}
|
|
|
|
&--simple {
|
|
// Icon and text elements only
|
|
&:before {
|
|
font-size: 30px !important;
|
|
}
|
|
|
|
[class*='__text'] {
|
|
font-size: 1.25em;
|
|
}
|
|
}
|
|
|
|
/************************** 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>
|
|
|
|
<script>
|
|
export default {
|
|
inject:['iconClass', 'title', 'hint', 'timestamp', 'message']
|
|
}
|
|
</script>
|