mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 09:26:45 +00:00
Vue Browse Bar (#2164)
* Object browse bar IN PROGRESS * Object browse bar VERY WIP * Object browse bar WIP - view-control renamed to disclosure-triangle; - Good progress on object browse bar elements; * Object browse bar WIP - Layout of start-side elements now working with ellipsis; - TODO: cleanups and consolidation; * Object browse bar shippable - Better layout approach; - Refinements to button classes; * Sanding and shimming on misc styles - Tree icon shrinkage fixed; - c-icon-button much better relative sizing; - Removed c-button-set wrapper from Layout.vue; - Added uppercasing of Create button for Snow theme; * working object name, css class * working dynamic name, css classes and view switcher
This commit is contained in:
Deep Tailor
Pete Richards
parent
78ae7b334c
commit
08cd6b1d99
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
// Global
|
||||
$fontBaseSize: 13px;
|
||||
$fontBaseSize: 12px;
|
||||
$colorBodyBg: #fcfcfc;
|
||||
$colorBodyFg: #666;
|
||||
$colorGenBg: #fff;
|
||||
@ -71,6 +71,7 @@ $sliderKnobR: 2px;
|
||||
$timeControllerToiLineColor: $colorBodyFg;
|
||||
$timeControllerToiLineColorHov: #0052b5;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
$createBtnTextTransform: uppercase;
|
||||
|
||||
// Foundation Colors
|
||||
$colorAlt1: #776ba2;
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
/**************************** BUTTONS */
|
||||
/******************************************************** BUTTONS */
|
||||
%c-control {
|
||||
@include userSelectNone();
|
||||
$fs: 1em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: $fs;
|
||||
justify-content: start;
|
||||
cursor: pointer;
|
||||
|
||||
@ -13,12 +15,13 @@
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&:after {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 0.6em;
|
||||
[class*="__label"] {
|
||||
line-height: $fs; // Remove effect on top and bottom padding
|
||||
font-size: $fs;
|
||||
}
|
||||
|
||||
}
|
||||
@ -56,10 +59,14 @@
|
||||
.c-icon-button {
|
||||
// A clickable element that just includes the icon, no background
|
||||
// Padding is included to facilitate a bigger hit area
|
||||
// Make the icon bigger relative to its container
|
||||
@extend %c-control;
|
||||
$pLR: 3px;
|
||||
$pTB: 3px;
|
||||
border-radius: $controlCr;
|
||||
color: $colorKey;
|
||||
padding: nth($btnPad, 1) floor(nth($btnPad, 2) * 0.8);
|
||||
font-size: $fontBaseSize * 1.2;
|
||||
padding: $pTB $pLR ;
|
||||
|
||||
&:hover {
|
||||
background: rgba($colorKey, 0.2);
|
||||
@ -77,7 +84,7 @@
|
||||
// c-icon-buttons get grouped more closely together
|
||||
// When one set is adjacent to another, provides a divider between
|
||||
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
|
||||
> * {
|
||||
// Assume buttons are immediate descendants
|
||||
@ -118,6 +125,8 @@
|
||||
/********* Menu Buttons */
|
||||
// Always includes :after dropdown arrow
|
||||
// Optionally can include icon in :before
|
||||
// Default menu position is down and to the right
|
||||
// Apply c-menu-button--menus-up and c-menu-button--menus-left to --w wrapper element to modify menu position
|
||||
.c-menu-button {
|
||||
$m: $interiorMarginSm;
|
||||
@extend %c-button;
|
||||
@ -132,9 +141,106 @@
|
||||
margin-left: $m;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&--w {
|
||||
// Wraps c-menu-button, contains button and menu
|
||||
.c-menu {
|
||||
// Default position
|
||||
top: 100%; left: 0;
|
||||
}
|
||||
|
||||
&.c-menu-button--menus-up {
|
||||
.c-menu {
|
||||
top: auto; bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.c-menu-button--menus-left {
|
||||
.c-menu {
|
||||
left: auto; right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**************************** MENUS */
|
||||
/******************************************************** DISCLOSURE CONTROLS */
|
||||
/********* Disclosure Button */
|
||||
// Provides a downward arrow icon that when clicked displays a context menu
|
||||
// Always placed AFTER an element
|
||||
.c-disclosure-button {
|
||||
@extend .c-icon-button;
|
||||
margin-left: $interiorMarginSm;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-down;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
/********* Disclosure Triangle */
|
||||
// Provides an arrow icon that when clicked expands an element to reveal its contents.
|
||||
// Used in tree items. Always placed BEFORE an element.
|
||||
.c-disclosure-triangle {
|
||||
$d: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: $d;
|
||||
position: relative;
|
||||
|
||||
&.is-enabled:before {
|
||||
$s: .65;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
position: absolute;
|
||||
transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
&:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******************************************************** FORM ELEMENTS */
|
||||
/********* Inline inputs */
|
||||
// A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
|
||||
.c-input-inline {
|
||||
@include input-base();
|
||||
border: 1px solid transparent;
|
||||
display: block !important;
|
||||
min-width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
transition: all 250ms ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&:not(:focus) {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
padding-left: $inputTextPLeftRight;
|
||||
padding-right: $inputTextPLeftRight;
|
||||
}
|
||||
&:hover {
|
||||
border-color: rgba($colorBodyFg, 0.2);
|
||||
}
|
||||
&:focus {
|
||||
@include nice-input($shdw: rgba(0, 0, 0, 0.6) 0 1px 3px);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** MENUS */
|
||||
@mixin menuOuter() {
|
||||
border-radius: $basicCr;
|
||||
background: $colorMenuBg;
|
||||
@ -171,8 +277,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.c-menu {
|
||||
@include menuOuter();
|
||||
@include menuInner();
|
||||
|
||||
@ -43,6 +43,15 @@ div {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.u-space {
|
||||
// Provides a separator space between elements
|
||||
&--right {
|
||||
+ [class*="__"] {
|
||||
margin-left: $interiorMarginLg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* BROWSER ELEMENTS */
|
||||
body.desktop {
|
||||
::-webkit-scrollbar {
|
||||
|
||||
@ -110,13 +110,10 @@
|
||||
}
|
||||
|
||||
/************************** CONTROLS, BUTTONS */
|
||||
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
|
||||
@mixin input-base() {
|
||||
appearance: none;
|
||||
background: $bg;
|
||||
border: none;
|
||||
color: $fg;
|
||||
border-radius: $controlCr;
|
||||
box-shadow: inset $shdw;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
@ -129,6 +126,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
|
||||
@include input-base();
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
box-shadow: inset $shdw;
|
||||
}
|
||||
|
||||
@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="c-create-button--w">
|
||||
<div class="c-create-button c-menu-button c-button--major icon-plus"
|
||||
@click="toggleCreateMenu">
|
||||
Create
|
||||
<span class="c-button__label">Create</span>
|
||||
</div>
|
||||
<div class="c-create-menu c-super-menu"
|
||||
v-if="showCreateMenu">
|
||||
@ -43,6 +43,10 @@
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.c-create-button .c-button__label {
|
||||
text-transform: $createBtnTextTransform;
|
||||
}
|
||||
|
||||
.c-create-menu {
|
||||
max-height: 80vh;
|
||||
max-width: 500px;
|
||||
|
||||
178
src/ui/components/controls/MainViewBrowseBar.vue
Normal file
178
src/ui/components/controls/MainViewBrowseBar.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="l-browse-bar">
|
||||
<div class="l-browse-bar__start">
|
||||
<a class="l-browse-bar__nav-to-parent-button c-icon-button icon-pointer-left"></a>
|
||||
<div v-bind:class="['l-browse-bar__object-name--w', type.cssClass]">
|
||||
<span
|
||||
class="l-browse-bar__object-name c-input-inline"
|
||||
v-on:blur="updateName"
|
||||
contenteditable>
|
||||
{{ domainObject.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="l-browse-bar__context-actions c-disclosure-button"></div>
|
||||
</div>
|
||||
|
||||
<div class="l-browse-bar__end">
|
||||
<div class="l-browse-bar__view-switcher c-menu-button--w c-menu-button--menus-left"
|
||||
v-if="domainObjectViews.length > 1">
|
||||
<div v-bind:class="['c-menu-button', currentView.cssClass]"
|
||||
title="Switch view type"
|
||||
@click="toggleViewMenu">
|
||||
<span class="c-button__label">{{ currentView.name }}</span>
|
||||
</div>
|
||||
<div class="c-menu" v-if="showViewMenu">
|
||||
<ul>
|
||||
<li v-for="(view,index) in domainObjectViews"
|
||||
@click="updateViewParams(view)"
|
||||
:key="index"
|
||||
:class="view.cssClass"
|
||||
:title="view.title">
|
||||
{{ view.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action buttons -->
|
||||
<div class="l-browse-bar__actions">
|
||||
<div class="l-browse-bar__action c-button icon-eye-open" title="Preview"></div>
|
||||
<div class="l-browse-bar__action c-button icon-notebook" title="New Notebook entry"></div>
|
||||
<div class="l-browse-bar__action c-button c-button--major icon-pencil" title="Edit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuPlaceholder from '../controls/ContextMenu.vue';
|
||||
|
||||
export default {
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
editNameEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleViewMenu: function (event) {
|
||||
event.stopPropagation();
|
||||
this.showViewMenu = !this.showViewMenu;
|
||||
},
|
||||
updateName: function (event) {
|
||||
if (event.target.innerText !== this.domainObject.name) {
|
||||
this.openmct.objects.mutate(this.domainObject, 'name', event.target.innerText);
|
||||
}
|
||||
},
|
||||
updateViewParams: function (view) {
|
||||
this.openmct.router.updateParams({view: view.key});
|
||||
},
|
||||
updateCurrentView: function (viewKey) {
|
||||
viewKey = viewKey || this.openmct.router.getParams().view;
|
||||
|
||||
if (viewKey) {
|
||||
this.currentView = this.domainObjectViews.find((view) => view.key === viewKey) || {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
showViewMenu: false,
|
||||
domainObject: {},
|
||||
domainObjectViews: [],
|
||||
currentView: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MenuPlaceholder
|
||||
},
|
||||
computed: {
|
||||
type() {
|
||||
return this.openmct.types.get(this.domainObject.type).definition;
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.$root.$on('main-view-domain-object', (domainObject) => {
|
||||
this.legacyObject = domainObject;
|
||||
this.domainObject = domainObject.useCapability('adapter');
|
||||
this.domainObjectViews = domainObject.useCapability('view');
|
||||
|
||||
this.updateCurrentView();
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
if (this.showViewMenu) {
|
||||
this.showViewMenu = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.openmct.router.on('change:params', (params) => {this.updateCurrentView(params.view)});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
/******************************* START */
|
||||
|
||||
.l-browse-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
[class*="__"] {
|
||||
// Removes extraneous horizontal white space
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&__start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
font-size: 1.4em;
|
||||
margin-right: $interiorMargin;
|
||||
min-width: 0; // Forces interior to compress when pushed on
|
||||
}
|
||||
|
||||
&__end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
|
||||
[class*="__"] + [class*="__"] {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav-to-parent-button,
|
||||
&__disclosure-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__nav-to-parent-button {
|
||||
// This is an icon-button
|
||||
$p: $interiorMarginLg;
|
||||
margin-right: $interiorMargin;
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
}
|
||||
|
||||
&__object-name--w {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
|
||||
&:before {
|
||||
// Icon
|
||||
opacity: 0.5;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__object-name {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -152,7 +152,7 @@
|
||||
|
||||
&__collapse-button {
|
||||
$m: 2px;
|
||||
$h: 12px; //nth($splitterBtnD, 1) - ($m * 2);
|
||||
$h: 12px;
|
||||
color: $splitterBtnColorFg;
|
||||
flex: 0 0 nth($splitterBtnD, 1);
|
||||
font-size: $h * .9;
|
||||
@ -192,6 +192,7 @@
|
||||
// Name of the pane
|
||||
@include ellipsize();
|
||||
display: block;
|
||||
padding-right: nth($splitterBtnD, 2) + $interiorMargin; // Force label to ellipsis
|
||||
text-transform: uppercase;
|
||||
transform-origin: top left;
|
||||
flex: 1 0 90%;
|
||||
|
||||
@ -1,43 +1,12 @@
|
||||
<template>
|
||||
<span class="c-view-control"
|
||||
<span class="c-disclosure-triangle"
|
||||
:class="{
|
||||
'c-view-control--expanded' : expanded,
|
||||
'c-disclosure-triangle--expanded' : expanded,
|
||||
'is-enabled' : enabled
|
||||
}"
|
||||
@click="toggle"></span>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";;
|
||||
|
||||
.c-view-control {
|
||||
$d: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: $d;
|
||||
position: relative;
|
||||
|
||||
&.is-enabled:before {
|
||||
$s: .65;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
position: absolute;
|
||||
transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
&:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@ -114,6 +114,7 @@ export default {
|
||||
this.templateMap["browseObject"]
|
||||
);
|
||||
document.title = object.getModel().name;
|
||||
this.$root.$emit('main-view-domain-object', object);
|
||||
this.scheduleDigest();
|
||||
},
|
||||
|
||||
|
||||
@ -3,10 +3,8 @@
|
||||
<div class="l-shell__head">
|
||||
<CreateButton class="l-shell__create-button"></CreateButton>
|
||||
<div class="l-shell__controls">
|
||||
<div class="l-controls__elem c-button-set">
|
||||
<a class="c-icon-button icon-new-window" title="Open in a new browser tab"></a>
|
||||
<a class="c-icon-button icon-fullscreen-collapse" title="Enable full screen mode"></a>
|
||||
</div>
|
||||
<a class="c-icon-button icon-new-window" title="Open in a new browser tab"></a>
|
||||
<a class="c-icon-button icon-fullscreen-collapse" title="Enable full screen mode"></a>
|
||||
</div>
|
||||
<div class="l-shell__app-logo">[ App Logo ]</div>
|
||||
</div>
|
||||
@ -24,8 +22,8 @@
|
||||
</div>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-main">
|
||||
<browse-object class="l-shell__main-container">
|
||||
</browse-object>
|
||||
<MainViewBrowseBar class="l-shell__main-view-browse-bar"></MainViewBrowseBar>
|
||||
<browse-object class="l-shell__main-container"></browse-object>
|
||||
<mct-template template-key="conductor"
|
||||
class="l-shell__time-conductor">
|
||||
</mct-template>
|
||||
@ -149,7 +147,7 @@
|
||||
&__main-container {
|
||||
// Wrapper for main views
|
||||
flex: 1 1 100%;
|
||||
font-size: 16px; // TEMP FOR LEGACY STYLING
|
||||
font-size: 16px; // TEMP FOR LEGACY STYLING - TODO: REMOVE!
|
||||
}
|
||||
|
||||
&__tree {
|
||||
@ -193,6 +191,7 @@
|
||||
import search from '../controls/search.vue';
|
||||
import multipane from '../controls/multipane.vue';
|
||||
import pane from '../controls/pane.vue';
|
||||
import MainViewBrowseBar from '../controls/MainViewBrowseBar.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -205,7 +204,8 @@
|
||||
CreateButton,
|
||||
search,
|
||||
multipane,
|
||||
pane
|
||||
pane,
|
||||
MainViewBrowseBar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -69,7 +69,8 @@
|
||||
|
||||
&:before {
|
||||
// Type icon
|
||||
display: inline-block;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.3em;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user