ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-16 14:18:16 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

R&I Layout editing mods (#2256)

Browse Source 
* Layout mods for sub object editing without is-drilled-in
* Remove drilled-in logic
This commit is contained in:
Charles Hacskaylo
2019-01-22 11:52:56 -08:00
committed by Andrew Henry
parent abcc5cb023
commit 8ef53d85c4
19 changed files with 634 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/plugins/displayLayout/DisplayLayoutType.js
View File

@ -25,6 +25,7 @@ define(function () {
return { return {
name: "Display Layout", name: "Display Layout",
creatable: true, creatable: true,
description: 'Assemble other objects and components together into a reusable screen layout. Simply drag in the objects you want, position and size them. Save your design and view or edit it at any time.',
cssClass: 'icon-layout', cssClass: 'icon-layout',
initialize(domainObject) { initialize(domainObject) {
domainObject.composition = []; domainObject.composition = [];

90
src/plugins/displayLayout/components/DisplayLayout.vue
View File

@ -25,30 +25,26 @@
@dragover="handleDragOver" @dragover="handleDragOver"
@click="bypassSelection" @click="bypassSelection"
@drop="handleDrop"> @drop="handleDrop">
<div class="l-layout__object"> <!-- Background grid -->
<!-- Background grid --> <div class="l-layout__grid-holder c-grid">
<div class="l-layout__grid-holder c-grid" <div class="c-grid__x l-grid l-grid-x"
v-if="!drilledIn"> v-if="gridSize[0] >= 3"
<div class="c-grid__x l-grid l-grid-x" :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
v-if="gridSize[0] >= 3"
:style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
</div>
<div class="c-grid__y l-grid l-grid-y"
v-if="gridSize[1] >= 3"
:style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
</div> </div>
<component v-for="(item, index) in layoutItems" <div class="c-grid__y l-grid l-grid-y"
:is="item.type" v-if="gridSize[1] >= 3"
:item="item" :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
:key="item.id"
:gridSize="item.useGrid ? gridSize : [1, 1]"
:initSelect="initSelectIndex === index"
:index="index"
@drilledIn="updateDrilledIn"
@endDrag="endDrag"
>
</component>
</div> </div>
<component v-for="(item, index) in layoutItems"
:is="item.type"
:item="item"
:key="item.id"
:gridSize="item.useGrid ? gridSize : [1, 1]"
:initSelect="initSelectIndex === index"
:index="index"
@endDrag="endDrag"
>
</component>
</div> </div>
</template> </template>
@ -59,30 +55,47 @@
@include abs(); @include abs();
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
&__grid-holder { &__grid-holder {
display: none; display: none;
} }
&__object {
flex: 1 1 auto;
overflow: auto;
}
&__frame { &__frame {
position: absolute; position: absolute;
} }
} }
.l-shell__main-container { .is-editing {
> .l-layout { .l-shell__main-container {
[s-selected] { &[s-selected],
border: $browseSelectedBorder; &[s-selected-parent] {
// Display grid in main layout holder when editing
> .l-layout {
background: $editUIGridColorBg;
> [class*="__grid-holder"] {
display: block;
}
}
}
}
.l-layout__frame {
&[s-selected],
&[s-selected-parent] {
// Display grid in nested layouts when editing
> * > * > .l-layout {
background: $editUIGridColorBg;
box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
> [class*='grid-holder'] {
display: block;
}
}
} }
} }
} }
// Styles moved to _global.scss;
</style> </style>
@ -119,7 +132,6 @@
data() { data() {
let domainObject = JSON.parse(JSON.stringify(this.domainObject)); let domainObject = JSON.parse(JSON.stringify(this.domainObject));
return { return {
drilledIn: undefined,
internalDomainObject: domainObject, internalDomainObject: domainObject,
initSelectIndex: undefined initSelectIndex: undefined
}; };
@ -275,12 +287,17 @@
this.initSelectIndex = this.layoutItems.length - 1; this.initSelectIndex = this.layoutItems.length - 1;
}, },
trackItem(item) { trackItem(item) {
if (!item.identifier) {
return;
}
let keyString = this.openmct.objects.makeKeyString(item.identifier);
if (item.type === "telemetry-view") { if (item.type === "telemetry-view") {
let keyString = this.openmct.objects.makeKeyString(item.identifier);
let count = this.telemetryViewMap[keyString] || 0; let count = this.telemetryViewMap[keyString] || 0;
this.telemetryViewMap[keyString] = ++count; this.telemetryViewMap[keyString] = ++count;
} else if (item.type === "subobject-view") { } else if (item.type === "subobject-view") {
this.objectViewMap[this.openmct.objects.makeKeyString(item.identifier)] = true; this.objectViewMap[keyString] = true;
} }
}, },
removeItem(item, index) { removeItem(item, index) {
@ -376,5 +393,4 @@
} }
} }
} }
</script> </script>

201
src/plugins/displayLayout/components/LayoutFrame.vue
View File

@ -25,25 +25,24 @@
:class="{ :class="{
'no-frame': !item.hasFrame, 'no-frame': !item.hasFrame,
'u-inspectable': inspectable, 'u-inspectable': inspectable,
'is-drilled-in': item.drilledIn 'is-resizing': isResizing
}" }"
:style="style" :style="style">
@dblclick="drill($event)">
<slot></slot> <slot></slot>
<!-- Drag handles --> <!-- Drag handles -->
<div class="c-frame-edit"> <div class="c-frame-edit">
<div class="c-frame-edit__move" <div class="c-frame-edit__move"
@mousedown="startDrag([1,1], [0,0], $event)"></div> @mousedown="startDrag([1,1], [0,0], $event, 'move')"></div>
<div class="c-frame-edit__handle c-frame-edit__handle--nw" <div class="c-frame-edit__handle c-frame-edit__handle--nw"
@mousedown="startDrag([1,1], [-1,-1], $event)"></div> @mousedown="startDrag([1,1], [-1,-1], $event, 'resize')"></div>
<div class="c-frame-edit__handle c-frame-edit__handle--ne" <div class="c-frame-edit__handle c-frame-edit__handle--ne"
@mousedown="startDrag([0,1], [1,-1], $event)"></div> @mousedown="startDrag([0,1], [1,-1], $event, 'resize')"></div>
<div class="c-frame-edit__handle c-frame-edit__handle--sw" <div class="c-frame-edit__handle c-frame-edit__handle--sw"
@mousedown="startDrag([1,0], [-1,1], $event)"></div> @mousedown="startDrag([1,0], [-1,1], $event, 'resize')"></div>
<div class="c-frame-edit__handle c-frame-edit__handle--se" <div class="c-frame-edit__handle c-frame-edit__handle--se"
@mousedown="startDrag([0,0], [1,1], $event)"></div> @mousedown="startDrag([0,0], [1,1], $event, 'resize')"></div>
</div> </div>
</div> </div>
</template> </template>
@ -55,20 +54,167 @@
.c-frame { .c-frame {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid transparent;
/*************************** NO-FRAME */ // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
&.no-frame { > *:first-child {
> [class*="contents"] > [class*="__header"] { flex: 1 1 auto;
display: none;
}
} }
&:not(.no-frame) { &:not(.no-frame) {
background: $colorBodyBg; background: $colorBodyBg;
border: 1px solid $colorInteriorBorder; border: $browseFrameBorder;
padding: $interiorMargin; padding: $interiorMargin;
} }
}
.c-frame-edit {
// In Layouts, this is the editing rect and handles
// In Fixed Position, this is a wrapper element
@include abs();
display: none;
&__move {
@include abs();
cursor: move;
}
&__handle {
$d: 6px;
$o: floor($d * -0.5);
background: $editFrameColorHandleFg;
box-shadow: $editFrameColorHandleBg 0 0 0 2px;
display: none; // Set to block via s-selected selector
position: absolute;
width: $d; height: $d;
top: auto; right: auto; bottom: auto; left: auto;
&:before {
// Extended hit area
@include abs(-10px);
content: '';
display: block;
z-index: 0;
}
&:hover {
background: $editUIColor;
}
&--nwse {
cursor: nwse-resize;
}
&--nw {
cursor: nw-resize;
left: $o; top: $o;
}
&--ne {
cursor: ne-resize;
right: $o; top: $o;
}
&--se {
cursor: se-resize;
right: $o; bottom: $o;
}
&--sw {
cursor: sw-resize;
left: $o; bottom: $o;
}
}
}
.c-so-view.has-complex-content + .c-frame-edit {
// Target frames that hold domain objects that include header elements, as opposed to drawing and alpha objects
// Make the __move element a more affordable drag UI element
.c-frame-edit__move {
@include userSelectNone();
background: $editFrameMovebarColorBg;
box-shadow: rgba(black, 0.2) 0 1px;
bottom: auto;
height: 0; // Height is set on hover on s-selected.c-frame
opacity: 0.8;
max-height: 100%;
overflow: hidden;
text-align: center;
&:before {
// Grippy
$h: 4px;
$tbOffset: ($editFrameMovebarH - $h) / 2;
$lrOffset: 25%;
@include grippy($editFrameMovebarColorFg);
content: '';
display: block;
position: absolute;
top: $tbOffset; right: $lrOffset; bottom: $tbOffset; left: $lrOffset;
}
&:hover {
background: $editFrameHovMovebarColorBg;
&:before { @include grippy($editFrameHovMovebarColorFg); }
}
}
}
.is-editing {
.c-frame {
$moveBarOutDelay: 500ms;
&.no-frame {
border: $editFrameBorder; // Base border style for a frame element while editing.
}
&-edit {
display: contents;
}
&-edit__move,
.c-so-view {
transition: $transOut;
transition-delay: $moveBarOutDelay;
}
&:not([s-selected]) {
&:hover {
border: $editFrameBorderHov;
}
}
&[s-selected] {
// All frames selected while editing
border: $editFrameSelectedBorder;
box-shadow: $editFrameSelectedShdw;
> .c-frame-edit {
[class*='__handle'] {
display: block;
}
}
}
}
.l-layout__frame:not(.is-resizing) {
// Show and animate the __move bar for sub-object views with complex content
&:hover > .c-so-view.has-complex-content {
// Move content down so the __move bar doesn't cover it.
padding-top: $editFrameMovebarH;
transition: $transIn;
&.c-so-view--no-frame {
// Move content down with a bit more space
padding-top: $editFrameMovebarH + $interiorMarginSm;
}
// Show the move bar
+ .c-frame-edit .c-frame-edit__move {
height: $editFrameMovebarH;
transition: $transIn;
}
}
}
} }
</style> </style>
@ -84,7 +230,8 @@
}, },
data() { data() {
return { return {
dragPosition: undefined dragPosition: undefined,
isResizing: undefined
} }
}, },
computed: { computed: {
@ -110,24 +257,6 @@
} }
}, },
methods: { methods: {
drill($event) {
if ($event) {
$event.stopPropagation();
}
if (!this.openmct.editor.isEditing() || !this.item.identifier) {
return;
}
this.openmct.objects.get(this.item.identifier)
.then(domainObject => {
if (this.openmct.composition.get(domainObject) === undefined) {
return;
}
this.$emit('drilledIn', this.item);
});
},
updatePosition(event) { updatePosition(event) {
let currentPosition = [event.pageX, event.pageY]; let currentPosition = [event.pageX, event.pageY];
this.initialPosition = this.initialPosition || currentPosition; this.initialPosition = this.initialPosition || currentPosition;
@ -135,7 +264,7 @@
return value - this.initialPosition[index]; return value - this.initialPosition[index];
}.bind(this)); }.bind(this));
}, },
startDrag(posFactor, dimFactor, event) { startDrag(posFactor, dimFactor, event, type) {
document.body.addEventListener('mousemove', this.continueDrag); document.body.addEventListener('mousemove', this.continueDrag);
document.body.addEventListener('mouseup', this.endDrag); document.body.addEventListener('mouseup', this.endDrag);
@ -145,6 +274,7 @@
}; };
this.updatePosition(event); this.updatePosition(event);
this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize); this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
this.isResizing = type === 'resize';
event.preventDefault(); event.preventDefault();
}, },
continueDrag(event) { continueDrag(event) {
@ -162,6 +292,7 @@
this.dragPosition = undefined; this.dragPosition = undefined;
this.initialPosition = undefined; this.initialPosition = undefined;
this.delta = undefined; this.delta = undefined;
this.isResizing = undefined;
event.preventDefault(); event.preventDefault();
} }
} }

3
src/plugins/displayLayout/components/SubobjectView.vue
View File

@ -22,8 +22,7 @@
<template> <template>
<layout-frame :item="item" <layout-frame :item="item"
:grid-size="gridSize" :grid-size="gridSize"
@endDrag="(item, updates) => $emit('endDrag', item, updates)" @endDrag="(item, updates) => $emit('endDrag', item, updates)">
@drilledIn="item => $emit('drilledIn', item)">
<object-frame v-if="domainObject" <object-frame v-if="domainObject"
:domain-object="domainObject" :domain-object="domainObject"
:object-path="objectPath" :object-path="objectPath"

2
src/plugins/flexibleLayout/components/container.vue
View File

@ -24,7 +24,7 @@
<div class="c-fl-container" <div class="c-fl-container"
:style="[{'flex-basis': sizeString}]" :style="[{'flex-basis': sizeString}]"
:class="{'is-empty': !frames.length}"> :class="{'is-empty': !frames.length}">
<div class="c-fl-container__header icon-grippy-ew" <div class="c-fl-container__header"
v-show="isEditing" v-show="isEditing"
draggable="true" draggable="true"
@dragstart="startContainerDrag"> @dragstart="startContainerDrag">

94
src/plugins/flexibleLayout/components/flexibleLayout.vue
View File

@ -79,6 +79,22 @@
<style lang="scss"> <style lang="scss">
@import '~styles/sass-base'; @import '~styles/sass-base';
@mixin containerGrippy($headerSize, $dir) {
position: absolute;
$h: 6px;
$minorOffset: ($headerSize - $h) / 2;
$majorOffset: 35%;
content: '';
display: block;
position: absolute;
@include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
@if $dir == 'x' {
top: $minorOffset; right: $majorOffset; bottom: $minorOffset; left: $majorOffset;
} @else {
top: $majorOffset; right: $minorOffset; bottom: $majorOffset; left: $minorOffset;
}
}
.c-fl { .c-fl {
@include abs(); @include abs();
@ -100,7 +116,6 @@
> * + * { margin-left: 1px; } > * + * { margin-left: 1px; }
&[class*='--rows'] { &[class*='--rows'] {
//@include test(blue, 0.1);
flex-direction: column; flex-direction: column;
> * + * { > * + * {
margin-left: 0; margin-left: 0;
@ -128,7 +143,6 @@
/***************************************************** CONTAINERS */ /***************************************************** CONTAINERS */
$headerSize: 16px; $headerSize: 16px;
border: 1px solid transparent;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
@ -138,9 +152,9 @@
flex-shrink: 1; flex-shrink: 1;
&__header { &__header {
// Only displayed when editing // Only displayed when editing, controlled via JS
background: $editSelectableColor; background: $editFrameMovebarColorBg;
color: $editSelectableColorFg; color: $editFrameMovebarColorFg;
cursor: move; cursor: move;
display: flex; display: flex;
align-items: center; align-items: center;
@ -148,12 +162,8 @@
&:before { &:before {
// Drag grippy // Drag grippy
font-size: 0.8em; @include containerGrippy($headerSize, 'x');
opacity: 0.5; opacity: 0.5;
position: absolute;
left: 50%; top: 50%;
transform-origin: center;
transform: translate(-50%, -50%);
} }
} }
@ -173,19 +183,27 @@
} }
.is-editing & { .is-editing & {
//background: $editCanvasColorBg;
border-color: $editSelectableColor;
&:hover { &:hover {
border-color: $editSelectableColorHov; .c-fl-container__header {
background: $editFrameHovMovebarColorBg;
color: $editFrameHovMovebarColorFg;
&:before {
opacity: .75;
}
}
} }
&[s-selected] { &[s-selected] {
border-color: $editSelectableColorSelected; border: $editFrameSelectedBorder;
.c-fl-container__header { .c-fl-container__header {
background: $editSelectableColorSelected; background:$editFrameSelectedMovebarColorBg;
color: $editSelectableColorSelectedFg; color: $editFrameSelectedMovebarColorFg;
&:before {
// Grippy
opacity: 1;
}
} }
} }
} }
@ -194,11 +212,6 @@
// Frames get styled here because this is particular to their presence in this layout type // Frames get styled here because this is particular to their presence in this layout type
.c-fl-frame { .c-fl-frame {
@include browserPrefix(margin-collapse, collapse); @include browserPrefix(margin-collapse, collapse);
margin: 1px;
//&__drag-wrapper {
// border: 1px solid $colorInteriorBorder; // Now handled by is-selectable
//}
} }
/****** ROWS LAYOUT */ /****** ROWS LAYOUT */
@ -211,8 +224,8 @@
overflow: hidden; overflow: hidden;
&:before { &:before {
// Drag grippy // Grippy
transform: rotate(90deg) translate(-50%, 50%); @include containerGrippy($headerSize, 'y');
} }
} }
@ -235,8 +248,6 @@
$dropHintSize: 15px; $dropHintSize: 15px;
display: flex; display: flex;
// justify-content: stretch;
// align-items: stretch;
flex: 1 1; flex: 1 1;
flex-direction: column; flex-direction: column;
overflow: hidden; // Needed to allow frames to collapse when sized down overflow: hidden; // Needed to allow frames to collapse when sized down
@ -275,7 +286,6 @@
pointer-events: none; pointer-events: none;
text-align: center; text-align: center;
width: $size; width: $size;
z-index: 2;
// Changed when layout is different, see below // Changed when layout is different, see below
border-top-right-radius: $controlCr; border-top-right-radius: $controlCr;
@ -304,37 +314,16 @@
&:before { &:before {
// The visible resize line // The visible resize line
background: $editColor; background: $editUIColor;
content: ''; content: '';
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
min-height: $size; min-width: $size; min-height: $size; min-width: $size;
} }
&__grippy {
// Grippy element
$d: 4px;
$c: black;
$a: 0.9;
$d: 5px;
background: $editColor;
color: $editColorBg;
border-radius: $smallCr;
font-size: 0.8em;
height: $d;
width: $d * 10;
position: absolute;
left: 50%; top: 50%;
text-align: center;
transform-origin: center center;
transform: translate(-50%, -50%);
z-index: 10;
}
&.vertical { &.vertical {
padding: $margin $size; padding: $margin $size;
&:hover{ &:hover{
// padding: $marginHov 0;
cursor: row-resize; cursor: row-resize;
} }
} }
@ -342,20 +331,15 @@
&.horizontal { &.horizontal {
padding: $size $margin; padding: $size $margin;
&:hover{ &:hover{
// padding: 0 $marginHov;
cursor: col-resize; cursor: col-resize;
} }
[class*='grippy'] {
transform: translate(-50%) rotate(90deg);
}
} }
&:hover { &:hover {
transition: $transOut; transition: $transOut;
&:before { &:before {
// The visible resize line // The visible resize line
background: $editColorHov; background: $editUIColorHov;
} }
} }
} }

2
src/plugins/flexibleLayout/components/frame.vue
View File

@ -26,7 +26,7 @@
'flex-basis': `${frame.size}%` 'flex-basis': `${frame.size}%`
}"> }">
<div class="c-frame c-fl-frame__drag-wrapper is-selectable is-moveable" <div class="c-frame c-fl-frame__drag-wrapper is-selectable u-inspectable is-moveable"
draggable="true" draggable="true"
@dragstart="initDrag" @dragstart="initDrag"
ref="frame"> ref="frame">

4
src/plugins/telemetryTable/components/table.vue
View File

@ -110,8 +110,8 @@
.c-telemetry-table__drop-target { .c-telemetry-table__drop-target {
position: absolute; position: absolute;
width: 2px; width: 2px;
background-color: $editColor; background-color: $editUIColor;
box-shadow: rgba($editColor, 0.5) 0 0 10px; box-shadow: rgba($editUIColor, 0.5) 0 0 10px;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }

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

@ -47,6 +47,14 @@ $bodyFont: $heroFont;
@return linear-gradient(lighten($c, 5%), $c); @return linear-gradient(lighten($c, 5%), $c);
} }
@function pullForward($val, $amt) {
@return lighten($val, $amt);
}
@function pushBack($val, $amt) {
@return darken($val, $amt);
}
// Constants // Constants
$fontBaseSize: 12px; $fontBaseSize: 12px;
$smallCr: 2px; $smallCr: 2px;
@ -55,7 +63,7 @@ $basicCr: 4px;
// Base colors // Base colors
$colorBodyBg: #393939; $colorBodyBg: #393939;
$colorBodyFg: #aaa; $colorBodyFg: #aaaaaa;
$colorBodyFgEm: #fff; $colorBodyFgEm: #fff;
$colorGenBg: #222; $colorGenBg: #222;
$colorHeadBg: #262626; $colorHeadBg: #262626;
@ -65,10 +73,11 @@ $colorStatusBarFg: $colorBodyFg;
$colorStatusBarFgHov: #aaa; $colorStatusBarFgHov: #aaa;
$colorKey: #0099cc; $colorKey: #0099cc;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorKeyHov: #00c0f6; $colorKeyHov: #26d8ff;
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%); $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%); $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
$colorKeySelectedBg: $colorKey; $colorKeySelectedBg: $colorKey;
$uiColor: #00b2ff; // Resize bars, splitter bars, etc.
$colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #ccc; $colorA: #ccc;
$colorAHov: #fff; $colorAHov: #fff;
@ -94,51 +103,52 @@ $colorPausedFg: #fff;
$colorOk: #33cc33; $colorOk: #33cc33;
// Base variations // Base variations
$colorBodyBgSubtle: lighten($colorBodyBg, 5%); $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
$colorBodyBgSubtleHov: darken($colorKey, 50%); $colorBodyBgSubtleHov: pushBack($colorKey, 50%);
$colorKeySubtle: darken($colorKey, 10%); $colorKeySubtle: pushBack($colorKey, 10%);
// Time Colors // Time Colors
$colorTime: #618cff; $colorTime: #618cff;
$colorTimeBg: $colorTime; $colorTimeBg: $colorTime;
$colorTimeFg: lighten($colorTimeBg, 30%); $colorTimeFg: pullForward($colorTimeBg, 30%);
$colorTimeHov: lighten($colorTime, 10%); $colorTimeHov: pullForward($colorTime, 10%);
$colorTimeSubtle: darken($colorTime, 20%); $colorTimeSubtle: pushBack($colorTime, 20%);
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
/************************************************** EDITING */
// Base Colors
$dlSpread: 20%;
$editColor: #00c7c3;
$editColorAlt: #9971ff;
$editColorBgBase: darken($editColor, $dlSpread);
$editColorBg: rgba($editColorBgBase, 0.2);
$editColorFg: lighten($editColor, $dlSpread);
$editColorHov: lighten($editColor, 20%);
// Canvas
$editCanvasColorBg: $editColorBg; //#002524;
$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
// Selectable
$editSelectableColor: #006563;
$editSelectableColorFg: lighten($editSelectableColor, 20%);
$editSelectableColorHov: lighten($editSelectableColor, 10%);
// Selectable selected
$editSelectableColorSelected: $editSelectableColorHov;
$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
$editSelectableColorFg: darken($editSelectableColor, 40%);
$editSelectableBorder: 1px dotted $editSelectableColor;
$editSelectableBorderHov: 1px dotted $editColorAlt;
$editSelectableBorderSelected: 1px solid $editColor;
$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
$editBorderDrilledIn: 1px dashed $editColorAlt;
$colorGridLines: rgba($editColor, 0.2);
/************************************************** BROWSING */ /************************************************** BROWSING */
$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2); $browseFrameColor: pullForward($colorBodyBg, 10%);
$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px; $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6); $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
/************************************************** EDITING */
$editUIColor: $uiColor; // Base color
$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
$editUIBaseColor: #344b8d; // Base color, toolbar bg
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
$editFrameBorder: 1px dotted $editFrameColor;
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
$editFrameColorSelected: #ccc; // Border of selected frames
$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 10px 1px;
$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
$editFrameMovebarH: 10px; // Height of move bar in layout frame
// Icons // Icons
$colorIconAlias: #4af6f3; $colorIconAlias: #4af6f3;
@ -148,16 +158,16 @@ $colorIconAliasForKeyFilter: #aaa;
$colorTabsHolderBg: rgba(black, 0.2); $colorTabsHolderBg: rgba(black, 0.2);
// Buttons and Controls // Buttons and Controls
$colorBtnBg: lighten($colorBodyBg, 10%); $colorBtnBg: pullForward($colorBodyBg, 10%);
$colorBtnBgHov: lighten($colorBtnBg, 10%); $colorBtnBgHov: pullForward($colorBtnBg, 10%);
$colorBtnFg: lighten($colorBodyFg, 10%); $colorBtnFg: pullForward($colorBodyFg, 10%);
$colorBtnReverseFg: lighten($colorBtnFg, 10%); $colorBtnReverseFg: pullForward($colorBtnFg, 10%);
$colorBtnReverseBg: lighten($colorBtnBg, 10%); $colorBtnReverseBg: pullForward($colorBtnBg, 10%);
$colorBtnFgHov: $colorBtnFg; $colorBtnFgHov: $colorBtnFg;
$colorBtnMajorBg: $colorKey; $colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: $colorKeyHov; $colorBtnMajorBgHov: $colorKeyHov;
$colorBtnMajorFg: $colorKeyFg; $colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: darken($colorBtnMajorFg, 10%); $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f; $colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e; $colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg; $colorBtnCautionFg: $colorBtnFg;
@ -165,20 +175,20 @@ $colorClickIcon: $colorKey;
$colorClickIconBgHov: rgba($colorKey, 0.6); $colorClickIconBgHov: rgba($colorKey, 0.6);
$colorClickIconFgHov: $colorKeyHov; $colorClickIconFgHov: $colorKeyHov;
$colorDropHint: $colorKey; $colorDropHint: $colorKey;
$colorDropHintBg: darken($colorDropHint, 10%); $colorDropHintBg: pushBack($colorDropHint, 10%);
$colorDropHintBgHov: $colorDropHint; $colorDropHintBgHov: $colorDropHint;
$colorDropHintFg: lighten($colorDropHint, 40%); $colorDropHintFg: pullForward($colorDropHint, 40%);
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5); $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7); $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
// Menus // Menus
$colorMenuBg: lighten($colorBodyBg, 15%); $colorMenuBg: pullForward($colorBodyBg, 15%);
$colorMenuFg: lighten($colorBodyFg, 30%); $colorMenuFg: pullForward($colorBodyFg, 30%);
$colorMenuIc: lighten($colorKey, 15%); $colorMenuIc: pullForward($colorKey, 15%);
$colorMenuHovBg: $colorMenuIc; $colorMenuHovBg: $colorMenuIc;
$colorMenuHovFg: lighten($colorMenuFg, 10%); $colorMenuHovFg: pullForward($colorMenuFg, 10%);
$colorMenuHovIc: $colorMenuHovFg; $colorMenuHovIc: $colorMenuHovFg;
$colorMenuElementHilite: lighten($colorMenuBg, 10%); $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
$shdwMenu: rgba(black, 0.5) 0 1px 5px; $shdwMenu: rgba(black, 0.5) 0 1px 5px;
$shdwMenuText: none; $shdwMenuText: none;
$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25); $menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
@ -200,21 +210,21 @@ $colorFormLines: rgba(#000, 0.1);
$colorFormSectionHeader: rgba(#000, 0.05); $colorFormSectionHeader: rgba(#000, 0.05);
$colorInputBg: rgba(black, 0.2); $colorInputBg: rgba(black, 0.2);
$colorInputFg: $colorBodyFg; $colorInputFg: $colorBodyFg;
$colorInputPlaceholder: darken($colorBodyFg, 20%); $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
$colorFormText: darken($colorBodyFg, 10%); $colorFormText: pushBack($colorBodyFg, 10%);
$colorInputIcon: darken($colorBodyFg, 25%); $colorInputIcon: pushBack($colorBodyFg, 25%);
$colorFieldHint: lighten($colorBodyFg, 40%); $colorFieldHint: pullForward($colorBodyFg, 40%);
$shdwInput: inset rgba(black, 0.4) 0 0 1px; $shdwInput: inset rgba(black, 0.4) 0 0 1px;
$shdwInputHov: inset rgba(black, 0.7) 0 0 2px; $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px; $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
// Inspector // Inspector
$colorInspectorBg: lighten($colorBodyBg, 5%); $colorInspectorBg: pullForward($colorBodyBg, 5%);
$colorInspectorFg: $colorBodyFg; $colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: darken($colorBodyFg, 20%); $colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: lighten($colorInspectorFg, 15%); $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: lighten($colorInspectorBg, 5%); $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: lighten($colorInspectorBg, 40%); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Overlay // Overlay
$overlayColorBg: $colorMenuBg; $overlayColorBg: $colorMenuBg;
@ -229,8 +239,8 @@ $colorIndicatorOn: $colorOk;
$colorIndicatorOff: #777777; $colorIndicatorOff: #777777;
// Staleness // Staleness
$colorTelemFresh: lighten($colorBodyFg, 20%); $colorTelemFresh: pullForward($colorBodyFg, 20%);
$colorTelemStale: darken($colorBodyFg, 20%); $colorTelemStale: pushBack($colorBodyFg, 20%);
$styleTelemStale: italic; $styleTelemStale: italic;
// Limits // Limits
@ -256,22 +266,22 @@ $colorInfoBubbleFg: #666;
// Items // Items
$colorItemBg: buttonBg($colorBtnBg); $colorItemBg: buttonBg($colorBtnBg);
$colorItemBgHov: buttonBg(lighten($colorBtnBg, 5%)); $colorItemBgHov: buttonBg(pullForward($colorBtnBg, 5%));
$colorListItemBg: transparent; $colorListItemBg: transparent;
$colorListItemBgHov: rgba($colorKey, 0.1); $colorListItemBgHov: rgba($colorKey, 0.1);
$colorItemFg: $colorBtnFg; $colorItemFg: $colorBtnFg;
$colorItemFgDetails: darken($colorItemFg, 20%); $colorItemFgDetails: pushBack($colorItemFg, 20%);
$shdwItemText: none; $shdwItemText: none;
// Tabular // Tabular
$colorTabBorder: lighten($colorBodyBg, 10%); $colorTabBorder: pullForward($colorBodyBg, 10%);
$colorTabBodyBg: $colorBodyBg; $colorTabBodyBg: $colorBodyBg;
$colorTabBodyFg: lighten($colorBodyFg, 20%); $colorTabBodyFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBg: lighten($colorBodyBg, 10%); $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
$colorTabHeaderFg: $colorBodyFg; $colorTabHeaderFg: $colorBodyFg;
$colorTabHeaderBorder: $colorBodyBg; $colorTabHeaderBorder: $colorBodyBg;
$colorTabGroupHeaderBg: lighten($colorBodyBg, 5%); $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
$colorTabGroupHeaderFg: darken($colorTabHeaderFg, 10%); $colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
// Plot // Plot
$colorPlotBg: rgba(black, 0.05); $colorPlotBg: rgba(black, 0.05);
@ -280,22 +290,22 @@ $colorPlotHash: black;
$opacityPlotHash: 0.2; $opacityPlotHash: 0.2;
$stylePlotHash: dashed; $stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder; $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: darken($colorPlotFg, 20%); $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
$legendHoverValueBg: rgba($colorBodyFg, 0.2); $legendHoverValueBg: rgba($colorBodyFg, 0.2);
// Tree // Tree
$colorTreeBg: transparent; $colorTreeBg: transparent;
$colorItemTreeHoverBg: lighten($colorBodyBg, 10%); $colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
$colorItemTreeHoverFg: lighten($colorBodyFg, 20%); $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey; // Used $colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used $colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg; $colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: darken($colorKey, 15%); $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorItemTreeHoverFg; $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg; $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: darken($editColor, 20%); $colorItemTreeEditingBg: pushBack($editUIColor, 20%);
$colorItemTreeEditingFg: $editColorFg; $colorItemTreeEditingFg: $editUIColor;
$colorItemTreeEditingIcon: $editColorFg; $colorItemTreeEditingIcon: $editUIColor;
$colorItemTreeVC: $colorDisclosureCtrl; $colorItemTreeVC: $colorDisclosureCtrl;
$colorItemTreeVCHover: $colorDisclosureCtrlHov; $colorItemTreeVCHover: $colorDisclosureCtrlHov;
$shdwItemTreeIcon: none; $shdwItemTreeIcon: none;
@ -307,18 +317,18 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
$scrollbarTrackSize: 7px; $scrollbarTrackSize: 7px;
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
$scrollbarTrackColorBg: rgba(#000, 0.2); $scrollbarTrackColorBg: rgba(#000, 0.2);
$scrollbarThumbColor: darken($colorBodyBg, 50%); $scrollbarThumbColor: pushBack($colorBodyBg, 50%);
$scrollbarThumbColorHov: $colorKey; $scrollbarThumbColorHov: $colorKey;
$scrollbarThumbColorMenu: lighten($colorMenuBg, 10%); $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
$scrollbarThumbColorMenuHov: lighten($scrollbarThumbColorMenu, 2%); $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
// Splitter // Splitter
$splitterHandleD: 2px; $splitterHandleD: 2px;
$splitterHandleHitMargin: 4px; $splitterHandleHitMargin: 4px;
$colorSplitterBaseBg: $colorBodyBg; $colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: lighten($colorSplitterBaseBg, 10%); $colorSplitterBg: pullForward($colorBodyBg, 10%);
$colorSplitterFg: $colorBodyBg; $colorSplitterFg: $colorBodyBg;
$colorSplitterHover: $colorKey; $colorSplitterHover: $uiColor;
$colorSplitterActive: $colorKey; $colorSplitterActive: $colorKey;
$splitterBtnD: (16px, 35px); // height, width $splitterBtnD: (16px, 35px); // height, width
$splitterBtnColorBg: $colorBtnBg; $splitterBtnColorBg: $colorBtnBg;
@ -330,7 +340,7 @@ $splitterCollapsedBtnColorBgHov: $colorKey;
$splitterCollapsedBtnColorFgHov: $colorKeyFg; $splitterCollapsedBtnColorFgHov: $colorKeyFg;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%); $colorMobilePaneLeft: pushBack($colorBodyBg, 2%);
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); $colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg; $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05); $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
@ -367,7 +377,7 @@ $createBtnTextTransform: uppercase;
} }
@mixin themedButton($c: $colorBtnBg) { @mixin themedButton($c: $colorBtnBg) {
background: linear-gradient(lighten($c, 5%), $c); background: linear-gradient(pullForward($c, 5%), $c);
box-shadow: rgba(black, 0.5) 0 0.5px 2px; box-shadow: rgba(black, 0.5) 0 0.5px 2px;
} }
@ -378,7 +388,7 @@ $sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.07); $sliderColorRangeHolder: rgba(black, 0.07);
$sliderColorRange: rgba($sliderColorBase, 0.2); $sliderColorRange: rgba($sliderColorBase, 0.2);
$sliderColorRangeHov: rgba($sliderColorBase, 0.4); $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
$sliderColorKnob: darken($sliderColorBase, 20%); $sliderColorKnob: pushBack($sliderColorBase, 20%);
$sliderColorKnobHov: rgba($sliderColorBase, 0.7); $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
$sliderColorRangeValHovBg: $sliderColorRange; $sliderColorRangeValHovBg: $sliderColorRange;
$sliderColorRangeValHovFg: $colorBodyFg; $sliderColorRangeValHovFg: $colorBodyFg;

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

@ -51,6 +51,14 @@ $bodyFont: 'Chakra Petch', sans-serif;
@return linear-gradient(lighten($c, 5%), $c); @return linear-gradient(lighten($c, 5%), $c);
} }
@function pullForward($val, $amt) {
@return lighten($val, $amt);
}
@function pushBack($val, $amt) {
@return darken($val, $amt);
}
// Constants // Constants
$fontBaseSize: 12px; $fontBaseSize: 12px;
$smallCr: 2px; $smallCr: 2px;
@ -69,10 +77,11 @@ $colorStatusBarFg: $colorBodyFg;
$colorStatusBarFgHov: #aaa; $colorStatusBarFgHov: #aaa;
$colorKey: #0099cc; $colorKey: #0099cc;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorKeyHov: #00c0f6; $colorKeyHov: #26d8ff;
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%); $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%); $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
$colorKeySelectedBg: $colorKey; $colorKeySelectedBg: $colorKey;
$uiColor: #00b2ff; // Resize bars, splitter bars, etc.
$colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #ccc; $colorA: #ccc;
$colorAHov: #fff; $colorAHov: #fff;
@ -98,51 +107,52 @@ $colorPausedFg: #fff;
$colorOk: #33cc33; $colorOk: #33cc33;
// Base variations // Base variations
$colorBodyBgSubtle: lighten($colorBodyBg, 5%); $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
$colorBodyBgSubtleHov: darken($colorKey, 50%); $colorBodyBgSubtleHov: pushBack($colorKey, 50%);
$colorKeySubtle: darken($colorKey, 10%); $colorKeySubtle: pushBack($colorKey, 10%);
// Time Colors // Time Colors
$colorTime: #618cff; $colorTime: #618cff;
$colorTimeBg: $colorTime; $colorTimeBg: $colorTime;
$colorTimeFg: lighten($colorTimeBg, 30%); $colorTimeFg: pullForward($colorTimeBg, 30%);
$colorTimeHov: lighten($colorTime, 10%); $colorTimeHov: pullForward($colorTime, 10%);
$colorTimeSubtle: darken($colorTime, 20%); $colorTimeSubtle: pushBack($colorTime, 20%);
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
/************************************************** EDITING */
// Base Colors
$dlSpread: 20%;
$editColor: #00c7c3;
$editColorAlt: #9971ff;
$editColorBgBase: darken($editColor, $dlSpread);
$editColorBg: rgba($editColorBgBase, 0.2);
$editColorFg: lighten($editColor, $dlSpread);
$editColorHov: lighten($editColor, 20%);
// Canvas
$editCanvasColorBg: $editColorBg; //#002524;
$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
// Selectable
$editSelectableColor: #006563;
$editSelectableColorFg: lighten($editSelectableColor, 20%);
$editSelectableColorHov: lighten($editSelectableColor, 10%);
// Selectable selected
$editSelectableColorSelected: $editSelectableColorHov;
$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
$editSelectableColorFg: darken($editSelectableColor, 40%);
$editSelectableBorder: 1px dotted $editSelectableColor;
$editSelectableBorderHov: 1px dotted $editColorAlt;
$editSelectableBorderSelected: 1px solid $editColor;
$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
$editBorderDrilledIn: 1px dashed $editColorAlt;
$colorGridLines: rgba($editColor, 0.2);
/************************************************** BROWSING */ /************************************************** BROWSING */
$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2); $browseFrameColor: pullForward($colorBodyBg, 10%);
$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px; $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6); $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
/************************************************** EDITING */
$editUIColor: $uiColor; // Base color
$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
$editUIBaseColor: #344b8d; // Base color, toolbar bg
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
$editFrameBorder: 1px dotted $editFrameColor;
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
$editFrameColorSelected: #ccc; // Border of selected frames
$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 10px 1px;
$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
$editFrameMovebarH: 10px; // Height of move bar in layout frame
// Icons // Icons
$colorIconAlias: #4af6f3; $colorIconAlias: #4af6f3;
@ -152,16 +162,16 @@ $colorIconAliasForKeyFilter: #aaa;
$colorTabsHolderBg: rgba(black, 0.2); $colorTabsHolderBg: rgba(black, 0.2);
// Buttons and Controls // Buttons and Controls
$colorBtnBg: lighten($colorBodyBg, 10%); $colorBtnBg: pullForward($colorBodyBg, 10%);
$colorBtnBgHov: lighten($colorBtnBg, 10%); $colorBtnBgHov: pullForward($colorBtnBg, 10%);
$colorBtnFg: lighten($colorBodyFg, 10%); $colorBtnFg: pullForward($colorBodyFg, 10%);
$colorBtnReverseFg: lighten($colorBtnFg, 10%); $colorBtnReverseFg: pullForward($colorBtnFg, 10%);
$colorBtnReverseBg: lighten($colorBtnBg, 10%); $colorBtnReverseBg: pullForward($colorBtnBg, 10%);
$colorBtnFgHov: $colorBtnFg; $colorBtnFgHov: $colorBtnFg;
$colorBtnMajorBg: $colorKey; $colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: $colorKeyHov; $colorBtnMajorBgHov: $colorKeyHov;
$colorBtnMajorFg: $colorKeyFg; $colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: darken($colorBtnMajorFg, 10%); $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f; $colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e; $colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg; $colorBtnCautionFg: $colorBtnFg;
@ -169,20 +179,20 @@ $colorClickIcon: $colorKey;
$colorClickIconBgHov: rgba($colorKey, 0.6); $colorClickIconBgHov: rgba($colorKey, 0.6);
$colorClickIconFgHov: $colorKeyHov; $colorClickIconFgHov: $colorKeyHov;
$colorDropHint: $colorKey; $colorDropHint: $colorKey;
$colorDropHintBg: darken($colorDropHint, 10%); $colorDropHintBg: pushBack($colorDropHint, 10%);
$colorDropHintBgHov: $colorDropHint; $colorDropHintBgHov: $colorDropHint;
$colorDropHintFg: lighten($colorDropHint, 40%); $colorDropHintFg: pullForward($colorDropHint, 40%);
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5); $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7); $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
// Menus // Menus
$colorMenuBg: lighten($colorBodyBg, 15%); $colorMenuBg: pullForward($colorBodyBg, 15%);
$colorMenuFg: lighten($colorBodyFg, 30%); $colorMenuFg: pullForward($colorBodyFg, 30%);
$colorMenuIc: lighten($colorKey, 15%); $colorMenuIc: pullForward($colorKey, 15%);
$colorMenuHovBg: $colorMenuIc; $colorMenuHovBg: $colorMenuIc;
$colorMenuHovFg: lighten($colorMenuFg, 10%); $colorMenuHovFg: pullForward($colorMenuFg, 10%);
$colorMenuHovIc: $colorMenuHovFg; $colorMenuHovIc: $colorMenuHovFg;
$colorMenuElementHilite: lighten($colorMenuBg, 10%); $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
$shdwMenu: rgba(black, 0.5) 0 1px 5px; $shdwMenu: rgba(black, 0.5) 0 1px 5px;
$shdwMenuText: none; $shdwMenuText: none;
$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25); $menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
@ -204,21 +214,21 @@ $colorFormLines: rgba(#000, 0.1);
$colorFormSectionHeader: rgba(#000, 0.05); $colorFormSectionHeader: rgba(#000, 0.05);
$colorInputBg: rgba(black, 0.2); $colorInputBg: rgba(black, 0.2);
$colorInputFg: $colorBodyFg; $colorInputFg: $colorBodyFg;
$colorInputPlaceholder: darken($colorBodyFg, 20%); $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
$colorFormText: darken($colorBodyFg, 10%); $colorFormText: pushBack($colorBodyFg, 10%);
$colorInputIcon: darken($colorBodyFg, 25%); $colorInputIcon: pushBack($colorBodyFg, 25%);
$colorFieldHint: lighten($colorBodyFg, 40%); $colorFieldHint: pullForward($colorBodyFg, 40%);
$shdwInput: inset rgba(black, 0.4) 0 0 1px; $shdwInput: inset rgba(black, 0.4) 0 0 1px;
$shdwInputHov: inset rgba(black, 0.7) 0 0 2px; $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px; $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
// Inspector // Inspector
$colorInspectorBg: lighten($colorBodyBg, 5%); $colorInspectorBg: pullForward($colorBodyBg, 5%);
$colorInspectorFg: $colorBodyFg; $colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: darken($colorBodyFg, 20%); $colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: lighten($colorInspectorFg, 15%); $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: lighten($colorInspectorBg, 5%); $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: lighten($colorInspectorBg, 40%); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Overlay // Overlay
$overlayColorBg: $colorMenuBg; $overlayColorBg: $colorMenuBg;
@ -233,8 +243,8 @@ $colorIndicatorOn: $colorOk;
$colorIndicatorOff: #777777; $colorIndicatorOff: #777777;
// Staleness // Staleness
$colorTelemFresh: lighten($colorBodyFg, 20%); $colorTelemFresh: pullForward($colorBodyFg, 20%);
$colorTelemStale: darken($colorBodyFg, 20%); $colorTelemStale: pushBack($colorBodyFg, 20%);
$styleTelemStale: italic; $styleTelemStale: italic;
// Limits // Limits
@ -260,22 +270,22 @@ $colorInfoBubbleFg: #666;
// Items // Items
$colorItemBg: buttonBg($colorBtnBg); $colorItemBg: buttonBg($colorBtnBg);
$colorItemBgHov: buttonBg(lighten($colorBtnBg, 5%)); $colorItemBgHov: buttonBg(pullForward($colorBtnBg, 5%));
$colorListItemBg: transparent; $colorListItemBg: transparent;
$colorListItemBgHov: rgba($colorKey, 0.1); $colorListItemBgHov: rgba($colorKey, 0.1);
$colorItemFg: $colorBtnFg; $colorItemFg: $colorBtnFg;
$colorItemFgDetails: darken($colorItemFg, 20%); $colorItemFgDetails: pushBack($colorItemFg, 20%);
$shdwItemText: none; $shdwItemText: none;
// Tabular // Tabular
$colorTabBorder: lighten($colorBodyBg, 10%); $colorTabBorder: pullForward($colorBodyBg, 10%);
$colorTabBodyBg: $colorBodyBg; $colorTabBodyBg: $colorBodyBg;
$colorTabBodyFg: lighten($colorBodyFg, 20%); $colorTabBodyFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBg: lighten($colorBodyBg, 10%); $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
$colorTabHeaderFg: $colorBodyFg; $colorTabHeaderFg: $colorBodyFg;
$colorTabHeaderBorder: $colorBodyBg; $colorTabHeaderBorder: $colorBodyBg;
$colorTabGroupHeaderBg: lighten($colorBodyBg, 5%); $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
$colorTabGroupHeaderFg: darken($colorTabHeaderFg, 10%); $colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
// Plot // Plot
$colorPlotBg: rgba(black, 0.05); $colorPlotBg: rgba(black, 0.05);
@ -284,22 +294,22 @@ $colorPlotHash: black;
$opacityPlotHash: 0.2; $opacityPlotHash: 0.2;
$stylePlotHash: dashed; $stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder; $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: darken($colorPlotFg, 20%); $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
$legendHoverValueBg: rgba($colorBodyFg, 0.2); $legendHoverValueBg: rgba($colorBodyFg, 0.2);
// Tree // Tree
$colorTreeBg: transparent; $colorTreeBg: transparent;
$colorItemTreeHoverBg: lighten($colorBodyBg, 10%); $colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
$colorItemTreeHoverFg: lighten($colorBodyFg, 20%); $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey; // Used $colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used $colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg; $colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: darken($colorKey, 15%); $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorItemTreeHoverFg; $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg; $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: darken($editColor, 20%); $colorItemTreeEditingBg: pushBack($editUIColor, 20%);
$colorItemTreeEditingFg: $editColorFg; $colorItemTreeEditingFg: $editUIColor;
$colorItemTreeEditingIcon: $editColorFg; $colorItemTreeEditingIcon: $editUIColor;
$colorItemTreeVC: $colorDisclosureCtrl; $colorItemTreeVC: $colorDisclosureCtrl;
$colorItemTreeVCHover: $colorDisclosureCtrlHov; $colorItemTreeVCHover: $colorDisclosureCtrlHov;
$shdwItemTreeIcon: none; $shdwItemTreeIcon: none;
@ -311,18 +321,18 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
$scrollbarTrackSize: 7px; $scrollbarTrackSize: 7px;
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
$scrollbarTrackColorBg: rgba(#000, 0.2); $scrollbarTrackColorBg: rgba(#000, 0.2);
$scrollbarThumbColor: darken($colorBodyBg, 50%); $scrollbarThumbColor: pushBack($colorBodyBg, 50%);
$scrollbarThumbColorHov: $colorKey; $scrollbarThumbColorHov: $colorKey;
$scrollbarThumbColorMenu: lighten($colorMenuBg, 10%); $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
$scrollbarThumbColorMenuHov: lighten($scrollbarThumbColorMenu, 2%); $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
// Splitter // Splitter
$splitterHandleD: 2px; $splitterHandleD: 2px;
$splitterHandleHitMargin: 4px; $splitterHandleHitMargin: 4px;
$colorSplitterBaseBg: $colorBodyBg; $colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: lighten($colorSplitterBaseBg, 10%); $colorSplitterBg: pullForward($colorBodyBg, 10%);
$colorSplitterFg: $colorBodyBg; $colorSplitterFg: $colorBodyBg;
$colorSplitterHover: $colorKey; $colorSplitterHover: $uiColor;
$colorSplitterActive: $colorKey; $colorSplitterActive: $colorKey;
$splitterBtnD: (16px, 35px); // height, width $splitterBtnD: (16px, 35px); // height, width
$splitterBtnColorBg: $colorBtnBg; $splitterBtnColorBg: $colorBtnBg;
@ -334,7 +344,7 @@ $splitterCollapsedBtnColorBgHov: $colorKey;
$splitterCollapsedBtnColorFgHov: $colorKeyFg; $splitterCollapsedBtnColorFgHov: $colorKeyFg;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%); $colorMobilePaneLeft: pushBack($colorBodyBg, 2%);
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); $colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg; $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05); $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
@ -371,7 +381,7 @@ $createBtnTextTransform: uppercase;
} }
@mixin themedButton($c: $colorBtnBg) { @mixin themedButton($c: $colorBtnBg) {
background: linear-gradient(lighten($c, 5%), $c); background: linear-gradient(pullForward($c, 5%), $c);
box-shadow: rgba(black, 0.5) 0 0.5px 2px; box-shadow: rgba(black, 0.5) 0 0.5px 2px;
} }

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

@ -47,6 +47,14 @@ $bodyFont: $heroFont;
@return $c; @return $c;
} }
@function pullForward($val, $amt) {
@return darken($val, $amt);
}
@function pushBack($val, $amt) {
@return lighten($val, $amt);
}
// Constants // Constants
$fontBaseSize: 12px; $fontBaseSize: 12px;
$smallCr: 2px; $smallCr: 2px;
@ -69,6 +77,7 @@ $colorKeyHov: #00c0f6;
$colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%) contrast(102%); $colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%) contrast(102%);
$colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%) contrast(102%); $colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%) contrast(102%);
$colorKeySelectedBg: $colorKey; $colorKeySelectedBg: $colorKey;
$uiColor: #289fec; // Resize bars, splitter bars, etc.
$colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999; $colorA: #999;
$colorAHov: $colorKey; $colorAHov: $colorKey;
@ -94,51 +103,52 @@ $colorPausedFg: #fff;
$colorOk: #33cc33; $colorOk: #33cc33;
// Base variations // Base variations
$colorBodyBgSubtle: darken($colorBodyBg, 5%); $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
$colorBodyBgSubtleHov: lighten($colorKey, 50%); $colorBodyBgSubtleHov: pushBack($colorKey, 50%);
$colorKeySubtle: lighten($colorKey, 50%); $colorKeySubtle: pushBack($colorKey, 10%);
// Time Colors // Time Colors
$colorTime: #618cff; $colorTime: #618cff;
$colorTimeBg: $colorTime; $colorTimeBg: $colorTime;
$colorTimeFg: $colorBodyBg; $colorTimeFg: $colorBodyBg;
$colorTimeHov: lighten($colorTime, 5%); $colorTimeHov: pushBack($colorTime, 5%);
$colorTimeSubtle: lighten($colorTime, 20%); $colorTimeSubtle: pushBack($colorTime, 20%);
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
/************************************************** EDITING */
// Base Colors
$dlSpread: 20%;
$editColor: #00c7c3;
$editColorAlt: #9971ff;
$editColorBgBase: darken($editColor, $dlSpread);
$editColorBg: darken($editColor, $dlSpread);
$editColorFg: lighten($editColor, $dlSpread);
$editColorHov: lighten($editColor, 20%);
// Canvas
$editCanvasColorBg: #e6ffff;
$editCanvasColorGrid: darken($editCanvasColorBg, 10%);
// Selectable
$editSelectableColor: #acdad6;
$editSelectableColorFg: darken($editSelectableColor, 20%);
$editSelectableColorHov: darken($editSelectableColor, 10%);
// Selectable selected
$editSelectableColorSelected: $editColor;
$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%);
$editSelectableColorFg: darken($editSelectableColor, 40%);
$editSelectableBorder: 1px dotted $editSelectableColor;
$editSelectableBorderHov: 1px dotted $editColorAlt;
$editSelectableBorderSelected: 1px solid $editColor;
$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
$editBorderDrilledIn: 1px dashed $editColorAlt;
$colorGridLines: rgba($editColor, 0.2);
/************************************************** BROWSING */ /************************************************** BROWSING */
$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2); $browseFrameColor: pullForward($colorBodyBg, 10%);
$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px; $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6); $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
/************************************************** EDITING */
$editUIColor: $uiColor; // Base color
$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
$editUIBaseColor: #cae1ff; // Base color, toolbar bg
$editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
$editUIBaseColorFg: #4c4c4c; // Toolbar button icon colors, etc.
$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
$editUIGridColorFg: rgba($editUIBaseColor, 0.3); // Grid lines in layout editing area
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
$editFrameBorder: 1px dotted $editFrameColor;
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
$editFrameColorSelected: #333; // Border of selected frames
$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 10px 1px;
$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
$editFrameMovebarH: 10px; // Height of move bar in layout frame
// Icons // Icons
$colorIconAlias: #4af6f3; $colorIconAlias: #4af6f3;
@ -149,7 +159,7 @@ $colorTabsHolderBg: rgba($colorBodyFg, 0.2);
// Buttons and Controls // Buttons and Controls
$colorBtnBg: #aaa; $colorBtnBg: #aaa;
$colorBtnBgHov: darken($colorBtnBg, 10%); $colorBtnBgHov: pullForward($colorBtnBg, 10%);
$colorBtnFg: #fff; $colorBtnFg: #fff;
$colorBtnReverseFg: $colorBodyBg; $colorBtnReverseFg: $colorBodyBg;
$colorBtnReverseBg: $colorBodyFg; $colorBtnReverseBg: $colorBodyFg;
@ -157,7 +167,7 @@ $colorBtnFgHov: $colorBtnFg;
$colorBtnMajorBg: $colorKey; $colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: $colorKeyHov; $colorBtnMajorBgHov: $colorKeyHov;
$colorBtnMajorFg: $colorKeyFg; $colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: lighten($colorBtnMajorFg, 10%); $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f; $colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e; $colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg; $colorBtnCautionFg: $colorBtnFg;
@ -165,15 +175,15 @@ $colorClickIcon: $colorKey;
$colorClickIconBgHov: rgba($colorKey, 0.2); $colorClickIconBgHov: rgba($colorKey, 0.2);
$colorClickIconFgHov: $colorKeyHov; $colorClickIconFgHov: $colorKeyHov;
$colorDropHint: $colorKey; $colorDropHint: $colorKey;
$colorDropHintBg: lighten($colorDropHint, 30%); $colorDropHintBg: pushBack($colorDropHint, 10%);
$colorDropHintBgHov: lighten($colorDropHint, 40%); $colorDropHintBgHov: pushBack($colorDropHint, 40%);
$colorDropHintFg: lighten($colorDropHint, 0); $colorDropHintFg: pushBack($colorDropHint, 0);
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5); $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7); $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
// Menus // Menus
$colorMenuBg: lighten($colorBodyBg, 10%); $colorMenuBg: pushBack($colorBodyBg, 10%);
$colorMenuFg: darken($colorMenuBg, 70%); $colorMenuFg: pullForward($colorMenuBg, 70%);
$colorMenuIc: $colorKey; $colorMenuIc: $colorKey;
$colorMenuHovBg: $colorMenuIc; $colorMenuHovBg: $colorMenuIc;
$colorMenuHovFg: $colorMenuBg; $colorMenuHovFg: $colorMenuBg;
@ -200,27 +210,27 @@ $colorFormLines: rgba(#000, 0.1);
$colorFormSectionHeader: rgba(#000, 0.05); $colorFormSectionHeader: rgba(#000, 0.05);
$colorInputBg: $colorGenBg; $colorInputBg: $colorGenBg;
$colorInputFg: $colorBodyFg; $colorInputFg: $colorBodyFg;
$colorInputPlaceholder: lighten($colorBodyFg, 20%); $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
$colorFormText: lighten($colorBodyFg, 10%); $colorFormText: pushBack($colorBodyFg, 10%);
$colorInputIcon: lighten($colorBodyFg, 25%); $colorInputIcon: pushBack($colorBodyFg, 25%);
$colorFieldHint: darken($colorBodyFg, 40%); $colorFieldHint: pullForward($colorBodyFg, 40%);
$shdwInput: inset rgba(black, 0.7) 0 0 1px; $shdwInput: inset rgba(black, 0.7) 0 0 1px;
$shdwInputHov: inset rgba(black, 0.7) 0 0 2px; $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px; $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
// Inspector // Inspector
$colorInspectorBg: darken($colorBodyBg, 5%); $colorInspectorBg: pullForward($colorBodyBg, 5%);
$colorInspectorFg: $colorBodyFg; $colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: lighten($colorBodyFg, 20%); $colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: darken($colorInspectorFg, 15%); $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: darken($colorInspectorBg, 5%); $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: darken($colorInspectorBg, 40%); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Overlay // Overlay
$overlayColorBg: $colorMenuBg; $overlayColorBg: $colorMenuBg;
$overlayColorFg: $colorMenuFg; $overlayColorFg: $colorMenuFg;
$overlayCr: $interiorMarginLg; $overlayCr: $interiorMarginLg;
$overlayBrightnessAdjust: brightness(1); $overlayBrightnessAdjust: brightness(1.3);
// Indicator colors // Indicator colors
$colorIndicatorAvailable: $colorKey; $colorIndicatorAvailable: $colorKey;
@ -229,8 +239,8 @@ $colorIndicatorOn: $colorOk;
$colorIndicatorOff: #666; $colorIndicatorOff: #666;
// Staleness // Staleness
$colorTelemFresh: darken($colorBodyFg, 20%); $colorTelemFresh: pullForward($colorBodyFg, 20%);
$colorTelemStale: lighten($colorBodyFg, 20%); $colorTelemStale: pushBack($colorBodyFg, 20%);
$styleTelemStale: italic; $styleTelemStale: italic;
// Limits // Limits
@ -255,23 +265,23 @@ $colorInfoBubbleBg: $colorMenuBg;
$colorInfoBubbleFg: #666; $colorInfoBubbleFg: #666;
// Items // Items
$colorItemBg: lighten($colorBtnBg, 20%); $colorItemBg: pushBack($colorBtnBg, 20%);
$colorItemBgHov: lighten($colorItemBg, 5%); $colorItemBgHov: pushBack($colorItemBg, 5%);
$colorListItemBg: transparent; $colorListItemBg: transparent;
$colorListItemBgHov: rgba($colorKey, 0.1); $colorListItemBgHov: rgba($colorKey, 0.1);
$colorItemFg: $colorBodyFg; $colorItemFg: $colorBodyFg;
$colorItemFgDetails: lighten($colorItemFg, 15%); $colorItemFgDetails: pushBack($colorItemFg, 15%);
$shdwItemText: none; $shdwItemText: none;
// Tabular // Tabular
$colorTabBorder: darken($colorBodyBg, 10%); $colorTabBorder: pullForward($colorBodyBg, 10%);
$colorTabBodyBg: $colorBodyBg; $colorTabBodyBg: $colorBodyBg;
$colorTabBodyFg: darken($colorBodyFg, 20%); $colorTabBodyFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBg: darken($colorBodyBg, 10%); $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
$colorTabHeaderFg: darken($colorBodyFg, 20%); $colorTabHeaderFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBorder: $colorBodyBg; $colorTabHeaderBorder: $colorBodyBg;
$colorTabGroupHeaderBg: darken($colorBodyBg, 5%); $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
$colorTabGroupHeaderFg: darken($colorTabGroupHeaderBg, 40%); $colorTabGroupHeaderFg: pullForward($colorTabGroupHeaderBg, 40%);
// Plot // Plot
$colorPlotBg: rgba(black, 0.05); $colorPlotBg: rgba(black, 0.05);
@ -280,22 +290,22 @@ $colorPlotHash: black;
$opacityPlotHash: 0.2; $opacityPlotHash: 0.2;
$stylePlotHash: dashed; $stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder; $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: lighten($colorPlotFg, 20%); $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
$legendHoverValueBg: rgba($colorBodyFg, 0.2); $legendHoverValueBg: rgba($colorBodyFg, 0.2);
// Tree // Tree
$colorTreeBg: transparent; $colorTreeBg: transparent;
$colorItemTreeHoverBg: darken($colorBodyBg, 10%); $colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
$colorItemTreeHoverFg: darken($colorBodyFg, 10%); $colorItemTreeHoverFg: pullForward($colorBodyFg, 10%);
$colorItemTreeIcon: $colorKey; // Used $colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used $colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg; $colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: lighten($colorKey, 15%); $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg; $colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg; $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: $editColor; $colorItemTreeEditingBg: pushBack($editUIColor, 20%);
$colorItemTreeEditingFg: $editColorFg; $colorItemTreeEditingFg: $editUIColor;
$colorItemTreeEditingIcon: $editColorFg; $colorItemTreeEditingIcon: $editUIColor;
$colorItemTreeVC: $colorDisclosureCtrl; $colorItemTreeVC: $colorDisclosureCtrl;
$colorItemTreeVCHover: $colorDisclosureCtrlHov; $colorItemTreeVCHover: $colorDisclosureCtrlHov;
$shdwItemTreeIcon: none; $shdwItemTreeIcon: none;
@ -307,16 +317,16 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
$scrollbarTrackSize: 7px; $scrollbarTrackSize: 7px;
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
$scrollbarTrackColorBg: rgba(#000, 0.2); $scrollbarTrackColorBg: rgba(#000, 0.2);
$scrollbarThumbColor: darken($colorBodyBg, 50%); $scrollbarThumbColor: pullForward($colorBodyBg, 50%);
$scrollbarThumbColorHov: $colorKey; $scrollbarThumbColorHov: $colorKey;
$scrollbarThumbColorMenu: darken($colorMenuBg, 10%); $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
$scrollbarThumbColorMenuHov: darken($scrollbarThumbColorMenu, 2%); $scrollbarThumbColorMenuHov: darken($scrollbarThumbColorMenu, 2%);
// Splitter // Splitter
$splitterHandleD: 2px; $splitterHandleD: 2px;
$splitterHandleHitMargin: 4px; $splitterHandleHitMargin: 4px;
$colorSplitterBaseBg: $colorBodyBg; $colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: darken($colorSplitterBaseBg, 20%); $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
$colorSplitterFg: $colorBodyBg; $colorSplitterFg: $colorBodyBg;
$colorSplitterHover: $colorKey; $colorSplitterHover: $colorKey;
$colorSplitterActive: $colorKey; $colorSplitterActive: $colorKey;
@ -330,7 +340,7 @@ $splitterCollapsedBtnColorBgHov: $colorKey;
$splitterCollapsedBtnColorFgHov: $colorKeyFg; $splitterCollapsedBtnColorFgHov: $colorKeyFg;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%); $colorMobilePaneLeft: pullForward($colorBodyBg, 2%);
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); $colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg; $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05); $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);

16
src/styles-new/_controls.scss
View File

@ -421,21 +421,31 @@ input[type=number]::-webkit-outer-spin-button {
.c-toolbar { .c-toolbar {
$p: $interiorMargin; $p: $interiorMargin;
border-top: 1px solid $colorInteriorBorder; background: $editUIBaseColor;
border-radius: $basicCr;
height: $p + 24px; // Need to standardize the height height: $p + 24px; // Need to standardize the height
padding-top: $p; padding: $p;
&__separator { &__separator {
@include cToolbarSeparator(); @include cToolbarSeparator();
} }
.c-click-icon,
.c-labeled-input {
color: $editUIBaseColorFg;
}
.c-click-icon { .c-click-icon {
@include cControl(); @include cControl();
$pLR: $interiorMargin - 1; $pLR: $interiorMargin - 1;
$pTB: 2px; $pTB: 2px;
color: $colorBodyFg;
padding: $pTB $pLR; padding: $pTB $pLR;
&:hover {
background: $editUIBaseColorHov !important;
color: $editUIBaseColorFg !important;
}
&--swatched { &--swatched {
padding-bottom: floor($pTB / 2); padding-bottom: floor($pTB / 2);
width: 2em; // Standardize the width width: 2em; // Standardize the width

138
src/styles-new/_global.scss
View File

@ -191,8 +191,8 @@ body.desktop .has-local-controls {
.c-grid { .c-grid {
pointer-events: none; pointer-events: none;
&__x { @include bgTicks($editCanvasColorGrid, 'x'); } &__x { @include bgTicks($editUIGridColorFg, 'x'); }
&__y { @include bgTicks($editCanvasColorGrid, 'y'); } &__y { @include bgTicks($editUIGridColorFg, 'y'); }
} }
/*************************** SELECTION */ /*************************** SELECTION */
@ -200,32 +200,14 @@ body.desktop .has-local-controls {
&:hover { &:hover {
box-shadow: $browseSelectableShdwHov; box-shadow: $browseSelectableShdwHov;
} }
&[s-selected] {
border: $browseSelectedBorder;
}
} }
/**************************** EDITING */ /**************************** EDITING */
.is-editing { .is-editing {
*:not(.is-drilled-in).c-frame {
border: $editSelectableBorder;
&:not([s-selected]) {
&:hover {
border: $editSelectableBorderHov;
}
}
&[s-selected] {
box-shadow: $editSelectableShdwSelected;
> .c-frame-edit {
display: block; // Show the editing rect and handles
}
}
}
*.is-drilled-in {
border: $editBorderDrilledIn;
}
.is-moveable { .is-moveable {
cursor: move; cursor: move;
} }
@ -234,116 +216,8 @@ body.desktop .has-local-controls {
// Applied in markup to objects that provide links. Disable while editing. // Applied in markup to objects that provide links. Disable while editing.
pointer-events: none; pointer-events: none;
} }
.c-frame-edit {
// In Layouts, this is the editing rect and handles
// In Fixed Position, this is a wrapper element
$z: 10;
@include abs();
display: none;
&__move {
@include abs();
box-shadow: $editMoveableSelectedShdw;
cursor: move;
z-index: $z;
}
&__handle {
$d: 8px;
$o: floor($d * -0.5);
background: rgba($editColor, 0.3);
border: 1px solid $editColor;
position: absolute;
width: $d; height: $d;
top: auto; right: auto; bottom: auto; left: auto;
z-index: $z + 1;
&:before {
// Extended hit area
$m: -5px;
content: '';
display: block;
position: absolute;
top: $m; right: $m; bottom: $m; left: $m;
z-index: -1;
}
&:hover {
background: $editColor;
}
&--nwse {
cursor: nwse-resize;
}
&--nw {
cursor: nw-resize;
left: $o; top: $o;
}
&--ne {
cursor: ne-resize;
right: $o; top: $o;
}
&--se {
cursor: se-resize;
right: $o; bottom: $o;
}
&--sw {
cursor: sw-resize;
left: $o; bottom: $o;
}
}
}
// TODO: move this into DisplayLayout and Fixed Position vue files respectively
.l-shell__main-container > .l-layout,
.l-shell__main-container > .c-object-view .l-fixed-position {
// Target the top-most layout container and color its background
background: $editCanvasColorBg;
}
.l-shell__main-container {
box-shadow: $colorBodyBg 0 0 0 1px, rgba($editColor, 0.7) 0 0 0 2px;
&[s-selected] {
// Provide a clearer selection context articulation
box-shadow: $colorBodyBg 0 0 0 1px, $editColor 0 0 0px 3px;
}
}
// Layouts
[s-selected],
[s-selected-parent] {
.l-layout {
// Show the layout grid for the top-most child of the current selection,
// and hide the grid for deeper nested levels.
[class*="__grid-holder"] {
display: block;
}
.l-layout [class*="__grid-holder"] {
display: none;
}
}
}
// Fixed position
.l-fixed-position {
&__grid-holder {
display: block;
}
.c-frame-edit {
display: block;
}
}
} }
/************************** LEGACY */ /************************** LEGACY */
mct-container { mct-container {

15
src/styles-new/_legacy.scss
View File

@ -80,7 +80,7 @@ mct-plot {
// Holds the plot area and the X-axis only // Holds the plot area and the X-axis only
position: absolute; position: absolute;
top: nth($plotDisplayArea, 1); top: nth($plotDisplayArea, 1);
right:0; //nth($plotDisplayArea, 2); right:0;
bottom: 0; bottom: 0;
left: nth($plotDisplayArea, 4); left: nth($plotDisplayArea, 4);
@ -612,3 +612,16 @@ mct-plot {
min-height: 200px; min-height: 200px;
} }
/******************************************************************* EDITING */
.is-editing {
// Fixed position
.l-fixed-position {
&__grid-holder {
display: block;
}
.c-frame-edit {
display: block;
}
}
}

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

@ -80,8 +80,7 @@
transparent 50%, rgba($c, $a) 50%, transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%, rgba($c, $a) 75%, transparent 75%,
transparent 100% transparent 100%
); ) repeat;
background-repeat: repeat;
background-size: $d $d; background-size: $d $d;
} }
@ -91,8 +90,7 @@
transparent 50%, rgba($c, $a) 50%, transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%, rgba($c, $a) 75%, transparent 75%,
transparent 100% transparent 100%
); ) repeat;
background-repeat: repeat;
background-size: $bgsize $bgsize; background-size: $bgsize $bgsize;
} }
@ -102,6 +100,23 @@
cursor: default !important; cursor: default !important;
} }
@mixin grippy($c: rgba(black, 0.5), $dir: 'x') {
$deg: 90deg;
$bgSize: 2px 100%;
@if $dir != 'x' {
// Grippy texture runs 'vertically'
$deg: 0deg;
$bgSize: 100% 2px;
}
background: linear-gradient($deg,
$c 1px, transparent 1px,
transparent 100%
) repeat;
background-size: $bgSize;
}
@mixin noColor() { @mixin noColor() {
// A "no fill/stroke" selection option. Used in palettes. // A "no fill/stroke" selection option. Used in palettes.
$c: red; $c: red;
@ -329,12 +344,12 @@
// Make the icon bigger relative to its container // Make the icon bigger relative to its container
@include cControl(); @include cControl();
$pLR: 4px; $pLR: 4px;
$pTB: 3px; $pTB: 4px;
background: none; background: none;
box-shadow: none; box-shadow: none;
border-radius: $controlCr; border-radius: $controlCr;
cursor: pointer; cursor: pointer;
padding: $pTB $pLR ; padding: $pTB $pLR;
@include hover() { @include hover() {
background: $colorClickIconBgHov; background: $colorClickIconBgHov;

39
src/ui/components/ObjectFrame.vue
View File

@ -20,9 +20,10 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="u-contents c-so-view has-local-controls" <div class="c-so-view has-local-controls"
:class="{ :class="{
'c-so-view--no-frame': !hasFrame 'c-so-view--no-frame': !hasFrame,
'has-complex-content': complexContent
}"> }">
<div class="c-so-view__header"> <div class="c-so-view__header">
<div class="c-so-view__header__start"> <div class="c-so-view__header__start">
@ -47,10 +48,15 @@
@import "~styles/sass-base"; @import "~styles/sass-base";
.c-so-view { .c-so-view {
display: flex;
flex-direction: column;
/*************************** HEADER */ /*************************** HEADER */
&__header { &__header {
flex: 0 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: $interiorMargin;
&__start, &__start,
&__end { &__end {
@ -71,7 +77,7 @@
} }
} }
&--no-frame .c-so-view__header { &--no-frame > .c-so-view__header {
display: none; display: none;
} }
@ -107,6 +113,11 @@
import ObjectView from './ObjectView.vue' import ObjectView from './ObjectView.vue'
import ContextMenuDropDown from './contextMenuDropDown.vue'; import ContextMenuDropDown from './contextMenuDropDown.vue';
const SIMPLE_CONTENT_TYPES = [
'clock',
'summary-widget'
];
export default { export default {
inject: ['openmct'], inject: ['openmct'],
props: { props: {
@ -114,21 +125,19 @@
objectPath: Array, objectPath: Array,
hasFrame: Boolean, hasFrame: Boolean,
}, },
computed: {
cssClass() {
if (!this.domainObject || !this.domainObject.type) {
return;
}
let objectType = this.openmct.types.get(this.domainObject.type);
if (!objectType || !objectType.definition) {
return; // TODO: return unknown icon type.
}
return objectType.definition.cssClass;
}
},
components: { components: {
ObjectView, ObjectView,
ContextMenuDropDown, ContextMenuDropDown,
},
data() {
let objectType = this.openmct.types.get(this.domainObject.type),
cssClass = objectType && objectType.definition ? objectType.definition.cssClass : 'icon-object-unknown',
complexContent = !SIMPLE_CONTENT_TYPES.includes(this.domainObject.type);
return {
cssClass,
complexContent
}
} }
} }
</script> </script>

13
src/ui/inspector/Elements.vue
View File

@ -6,7 +6,7 @@
v-if="elements.length > 0"> v-if="elements.length > 0">
<li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop"> <li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop">
<div class="c-tree__item c-elements-pool__item"> <div class="c-tree__item c-elements-pool__item">
<span class="icon-grippy" <span class="c-elements-pool__grippy"
v-if="elements.length > 1 && isEditing" v-if="elements.length > 1 && isEditing"
draggable="true" draggable="true"
@dragstart="moveFrom(index)"> @dragstart="moveFrom(index)">
@ -42,12 +42,13 @@
overflow: auto; overflow: auto;
} }
&__item { &__grippy {
.icon-grippy { $d: 8px;
font-size: 0.8em; @include grippy($c: $colorItemTreeVC, $dir: 'y');
} margin-right: $interiorMarginSm;
transform: translateY(-2px);
width: $d; height: $d;
} }
} }
.js-last-place{ .js-last-place{

12
src/ui/layout/Layout.vue
View File

@ -184,7 +184,6 @@
} }
/******************************* MAIN AREA */ /******************************* MAIN AREA */
&__main-container { &__main-container {
// Wrapper for main views // Wrapper for main views
flex: 1 1 auto !important; flex: 1 1 auto !important;
@ -232,6 +231,17 @@
} }
} }
} }
.is-editing {
.l-shell__main-container {
box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
&[s-selected] {
// Provide a clearer selection context articulation for the main edit area
box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdwSelected;
}
}
}
</style> </style>
<script> <script>

1
src/ui/layout/mct-tree.vue
View File

@ -33,6 +33,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
line-height: 110%;
padding: $interiorMargin - $aPad; padding: $interiorMargin - $aPad;
transition: background 150ms ease; transition: background 150ms ease;