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

Style updates (#2243)

Browse Source 
* Create button disabled when editing

- New disabled mixin;
- Selector def for .is-editing .c-create-button;

* Symbolsfont install generation, Elements pool

- Moved font src statement to prevent genning of symbolsfont in wrong
directory locations;
- Elements pool styling WIP, todo: hover item styles, class naming;

* Tree styling

- Hover behavior refined;
- Styling for .is-selected state;

* Fixed icons for fullscreen toggle button

* Tree-related styling for is-selected, is-being-edited
This commit is contained in:
Charles Hacskaylo 2018-12-11 19:29:29 -08:00 committed by Pete Richards
parent 0d8dad1559
commit bb8342f62b
11 changed files with 106 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles-new/_constants-espresso.scss
View File

@ -267,14 +267,16 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
// Tree
$colorTreeBg: transparent;
$colorItemTreeHoverBg: lighten($colorBodyBg, 10%);
$colorItemTreeHoverFg: lighten($colorBodyFg, 10%);
$colorItemTreeHoverFg: lighten($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: darken($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeEditingBg: $editColor;
$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: darken($editColor, 20%);
$colorItemTreeEditingFg: $editColorFg;
$colorItemTreeEditingIcon: $editColorFg;
$colorItemTreeVC: rgba($colorBodyFg, 0.5);
$colorItemTreeVCHover: $colorKey;
$shdwItemTreeIcon: none;

8
src/styles-new/_constants-maelstrom.scss
View File

@ -270,14 +270,16 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
// Tree
$colorTreeBg: transparent;
$colorItemTreeHoverBg: lighten($colorBodyBg, 10%);
$colorItemTreeHoverFg: lighten($colorBodyFg, 10%);
$colorItemTreeHoverFg: lighten($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: darken($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeEditingBg: $editColor;
$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: darken($editColor, 20%);
$colorItemTreeEditingFg: $editColorFg;
$colorItemTreeEditingIcon: $editColorFg;
$colorItemTreeVC: rgba($colorBodyFg, 0.5);
$colorItemTreeVCHover: $colorKey;
$shdwItemTreeIcon: none;

2
src/styles-new/_constants-snow.scss
View File

@ -273,8 +273,10 @@ $colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: lighten($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: $editColor;
$colorItemTreeEditingFg: $editColorFg;
$colorItemTreeEditingIcon: $editColorFg;
$colorItemTreeVC: rgba($colorBodyFg, 0.5);
$colorItemTreeVCHover: $colorKey;
$shdwItemTreeIcon: none;

18
src/styles-new/_constants.scss
View File

@ -24,24 +24,6 @@
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
$dirImgs: 'images/';
@font-face {
// Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.json` to generate font files
font-family: 'symbolsfont';
src: url('fonts/Open-MCT-Symbols-16px.woff') format('woff'),
url('fonts/Open-MCT-Symbols-16px.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
// Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
font-family: 'symbolsfont-12px';
src: url('fonts/openmct-symbols-12px.woff') format('woff'),
url('fonts/openmct-symbols-12px.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/************************** TIMINGS */
$controlFadeMs: 100ms;
$browseToEditAnimMs: 400ms;

18
src/styles-new/_glyphs.scss
View File

@ -20,6 +20,24 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
@font-face {
// Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.json` to generate font files
font-family: 'symbolsfont';
src: url('./fonts/Open-MCT-Symbols-16px.woff') format('woff'),
url('./fonts/Open-MCT-Symbols-16px.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
// Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
font-family: 'symbolsfont-12px';
src: url('./fonts/openmct-symbols-12px.woff') format('woff'),
url('./fonts/openmct-symbols-12px.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/************************** 16 PX CLASSES */
.icon-alert-rect { @include glyphBefore($glyph-icon-alert-rect); }
.icon-alert-triangle { @include glyphBefore($glyph-icon-alert-triangle); }

6
src/styles-new/_mixins.scss
View File

@ -96,6 +96,12 @@
background-size: $bgsize $bgsize;
}
@mixin disabled() {
opacity: $controlDisabledOpacity;
pointer-events: none !important;
cursor: default !important;
}
@mixin noColor() {
// A "no fill/stroke" selection option. Used in palettes.
$c: red;

31
src/styles/_global.scss
View File

@ -19,37 +19,6 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/************************** FONTS */
@font-face {
/*
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json
* to generate font files
*/
font-family: 'symbolsfont';
src: url($dirFonts + 'symbols/openmct-symbols-16px.eot');
src: url($dirFonts + 'symbols/openmct-symbols-16px.eot?#iefix') format('embedded-opentype'),
url($dirFonts + 'symbols/openmct-symbols-16px.woff') format('woff'),
url($dirFonts + 'symbols/openmct-symbols-16px.ttf') format('truetype'),
url($dirFonts + 'symbols/openmct-symbols-16px.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
/*
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json
* to generate font files
*/
font-family: 'symbolsfont-12px';
src: url($dirFonts + 'symbols/openmct-symbols-12px.eot');
src: url($dirFonts + 'symbols/openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
url($dirFonts + 'symbols/openmct-symbols-12px.woff') format('woff'),
url($dirFonts + 'symbols/openmct-symbols-12px.ttf') format('truetype'),
url($dirFonts + 'symbols/openmct-symbols-12px.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/************************** HTML ENTITIES */
a {
color: $colorA;

11
src/ui/components/controls/CreateButton.vue
View File

@ -32,12 +32,17 @@
.c-create-button,
.c-create-menu {
font-size: 1.1em;
}
.c-create-button .c-button__label {
text-transform: $createBtnTextTransform;
.c-create-button {
.is-editing & {
@include disabled();
}
.c-button__label {
text-transform: $createBtnTextTransform;
}
}
.c-create-menu {

44
src/ui/components/inspector/Elements.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="flex-elem l-flex-col holder grows">
<Search @input="applySearch"></Search>
<div class="flex-elem grows vscroll scroll-pad">
<ul class="tree" id="inspector-elements-tree"
<div class="c-elements-pool">
<Search class="c-elements-pool__search" @input="applySearch"></Search>
<div class="c-elements-pool__elements">
<ul class="tree c-tree c-elements-pool__tree" id="inspector-elements-tree"
v-if="elements.length > 0">
<li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop">
<span class="tree-item">
<span class="grippy-sm"
<div class="c-tree__item c-elements-pool__item">
<span class="icon-grippy"
v-if="elements.length > 1 && isEditing"
draggable="true"
@dragstart="moveFrom(index)">
</span>
<object-label :domainObject="element" :objectPath="[element, parentObject]"></object-label>
</span>
</div>
</li>
<li class="js-last-place" @drop="moveToIndex(elements.length)"></li>
</ul>
@ -22,12 +22,32 @@
</template>
<style lang="scss">
@import "~styles/sass-base";
@import "~styles/glyphs";
.grippy-sm {
// Used in editor Elements pool
@extend .icon-grippy-12px;
cursor: move;
.c-elements-pool {
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1 1 auto !important;
> * + * {
margin-top: $interiorMargin;
}
&__search {
flex: 0 0 auto;
}
&__elements {
flex: 1 1 auto;
overflow: auto;
}
&__item {
.icon-grippy {
font-size: 0.8em;
}
}
}
.js-last-place{

2
src/ui/components/layout/Layout.vue
View File

@ -9,7 +9,7 @@
@click="openInNewTab"
target="_blank">
</button>
<button v-bind:class="['c-click-icon', fullScreen ? 'icon-fullscreen-expand' : 'icon-fullscreen-collapse']"
<button v-bind:class="['c-click-icon', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
v-bind:title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
@click="fullScreenToggle">
</button>

32
src/ui/components/layout/mct-tree.vue
View File

@ -31,17 +31,43 @@
$aPad: $interiorMarginSm;
border-radius: $controlCr;
display: flex;
align-items: stretch;
align-items: center;
cursor: pointer;
padding: $interiorMargin - $aPad;
transition: background 150ms ease;
&:hover {
background: $colorItemTreeHoverBg;
.c-tree__item__type-icon {
// Type icon
.c-tree__item__type-icon:before {
color: $colorItemTreeIconHover;
}
.c-tree__item__name {
color: $colorItemTreeHoverFg;
}
}
&.is-selected {
background: $colorItemTreeSelectedBg;
.c-tree__item__type-icon:before {
color: $colorItemTreeIconHover;
}
.c-tree__item__name {
color: $colorItemTreeSelectedFg;
}
}
&.is-being-edited {
background: $colorItemTreeEditingBg;
.c-tree__item__type-icon:before {
color: $colorItemTreeEditingIcon;
}
.c-tree__item__name {
color: $colorItemTreeEditingFg;
font-style: italic;
}
}
&__view-control {