mirror of
https://github.com/nasa/openmct.git
synced 2025-02-07 03:29:24 +00:00
[New Edit Mode] Merged styles and markup from prototype
This commit is contained in:
Henry
parent
6d4a20c07a
commit
f8aa123122
@ -19,13 +19,12 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="BrowseObjectController" class="abs l-flex-col">
|
||||
<div class="object-browse-bar l-flex-row">
|
||||
<div ng-controller="BrowseObjectController" class="abs l-flex-col">
|
||||
<div class="holder flex-elem l-flex-row object-browse-bar ">
|
||||
<div class="items-select left flex-elem l-flex-row grows">
|
||||
<mct-representation key="'back-arrow'"
|
||||
mct-object="domainObject"
|
||||
class="flex-elem l-back">
|
||||
</mct-representation>
|
||||
class="flex-elem l-back"></mct-representation>
|
||||
<mct-representation key="'object-header'"
|
||||
mct-object="domainObject"
|
||||
class="l-flex-row flex-elem grows object-header">
|
||||
@ -44,8 +43,7 @@
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
<div class="holder l-flex-col flex-elem grows l-object-wrapper"
|
||||
ng-class="{'edit-main':editMode}" style="margin-top: 50px;">
|
||||
<div class="holder l-flex-col flex-elem grows l-object-wrapper">
|
||||
<div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
|
||||
<!-- Toolbar and Save/Cancel buttons -->
|
||||
<div class="l-edit-controls flex-elem l-flex-row flex-align-end">
|
||||
@ -58,6 +56,7 @@
|
||||
mct-object="domainObject"
|
||||
class='flex-elem conclude-editing'>
|
||||
</mct-representation>
|
||||
|
||||
</div>
|
||||
<mct-representation key="representation.selected.key"
|
||||
mct-object="representation.selected.key && domainObject"
|
||||
@ -65,4 +64,5 @@
|
||||
toolbar="toolbar">
|
||||
</mct-representation>
|
||||
</div><!--/ l-object-wrapper-inner -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,10 +21,11 @@
|
||||
-->
|
||||
<span ng-controller="EditActionController">
|
||||
<span ng-repeat="currentAction in editActions">
|
||||
<a class='s-btn'
|
||||
<a class='s-btn t-{{currentAction.getMetadata().key}}'
|
||||
title='{{currentAction.getMetadata().name}}'
|
||||
ng-click="currentAction.perform()"
|
||||
ng-class="{ major: $index === 0, subtle: $index !== 0 }">
|
||||
{{currentAction.getMetadata().name}}
|
||||
ng-class="{ major: $index === 0 }">
|
||||
<span class="title-label">{{currentAction.getMetadata().name}}</span>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
@ -47,14 +47,11 @@ a.disabled {
|
||||
@include animation-name(pulse, 0.2);
|
||||
}
|
||||
|
||||
@include keyframes(pulse) {
|
||||
0% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
|
||||
@mixin pulse($dur: 500ms, $iteration: infinite) {
|
||||
//@include customKeyframes(pulse, 0.2);
|
||||
@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
|
||||
@include keyframes(pulse) {
|
||||
0% { opacity: $opacity0; }
|
||||
100% { opacity: $opacity100; }
|
||||
}
|
||||
@include animation-name(pulse);
|
||||
@include animation-duration($dur);
|
||||
@include animation-direction(alternate);
|
||||
@ -62,6 +59,19 @@ a.disabled {
|
||||
@include animation-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
|
||||
@include keyframes(pulseBorder) {
|
||||
0% { border-color: rgba($c, $opacity0); }
|
||||
100% { border-color: rgba($c, $opacity100); }
|
||||
}
|
||||
@include animation-name(pulseBorder);
|
||||
@include animation-duration($dur);
|
||||
@include animation-direction(alternate);
|
||||
@include animation-iteration-count($iteration);
|
||||
@include animation-timing-function(ease);
|
||||
@include animation-delay($delay);
|
||||
}
|
||||
|
||||
.pulse {
|
||||
@include pulse(750ms);
|
||||
}
|
||||
@ -121,7 +121,12 @@ mct-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scrolling {
|
||||
.ellipsis {
|
||||
@include ellipsize();
|
||||
}
|
||||
|
||||
.scrolling,
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
.l-inspect,
|
||||
.l-inspect table tr td {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.l-inspect {
|
||||
@ -31,6 +31,9 @@
|
||||
background: $colorInspectorBg;
|
||||
color: $colorInspectorFg;
|
||||
line-height: 140%;
|
||||
|
||||
.flex-elem.holder:not(:last-child) { margin-bottom: $interiorMargin; }
|
||||
|
||||
.pane-header {
|
||||
color: pushBack($colorInspectorFg, 20%);
|
||||
font-size: 0.8rem;
|
||||
@ -44,6 +47,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
.split-pane-component.pane {
|
||||
&.bottom {
|
||||
height: 30%;
|
||||
min-height: 20%;
|
||||
max-height: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include box-sizing(border-box);
|
||||
padding-right: $interiorMargin;
|
||||
@ -118,4 +131,34 @@
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
.holder-elements {
|
||||
.current-elements {
|
||||
position: relative;
|
||||
.tree-item {
|
||||
.t-object-label {
|
||||
// Elements pool is a flat list, so don't indent items.
|
||||
font-size: 0.75rem;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-inspect {
|
||||
.splitter-inspect-panel,
|
||||
.split-pane-component.pane.bottom {
|
||||
@include trans-prop-nice(opacity, 250ms); // Not working as desired currently; entire inspector seems to be destroyed and recreated when switching into and out of edit mode.
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.s-status-editing .l-inspect {
|
||||
.location-item { pointer-events: none; }
|
||||
.splitter-inspect-panel,
|
||||
.split-pane-component.pane.bottom {
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
}
|
||||
@ -64,6 +64,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
|
||||
@include transition-property(height, width, top, right, bottom, left, opacity);
|
||||
@include transition-duration($t);
|
||||
@include transition-timing-function($tf);
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
|
||||
@include transition-property(height, bottom, top);
|
||||
@include transition-duration($dur);
|
||||
@ -309,11 +315,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
|
||||
@include appearance(none);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
|
||||
@include box-shadow(inset $shdw);
|
||||
background: $bg;
|
||||
border: none;
|
||||
color: $fg;
|
||||
@ -323,7 +329,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
|
||||
@include input-base($bg, $fg);
|
||||
padding: 0 $interiorMarginSm;
|
||||
}
|
||||
|
||||
@ -35,6 +35,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
@include box-sizing(border-box);
|
||||
padding: 0 $pad;
|
||||
font-size: 0.7rem;
|
||||
vertical-align: top;
|
||||
|
||||
.icon {
|
||||
font-size: 0.8rem;
|
||||
@ -70,6 +71,18 @@ $pad: $interiorMargin * $baseRatio;
|
||||
&.pause-play {
|
||||
|
||||
}
|
||||
&.t-save:before {
|
||||
content:'\e612';
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.t-cancel {
|
||||
.title-label { display: none; }
|
||||
&:before {
|
||||
content:'\78';
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
&.pause-play {
|
||||
.icon:before {
|
||||
|
||||
@ -6,10 +6,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-controller-visible {
|
||||
|
||||
}
|
||||
|
||||
mct-include.l-time-controller {
|
||||
$minW: 500px;
|
||||
$knobHOffset: 0px;
|
||||
@ -22,10 +18,10 @@ mct-include.l-time-controller {
|
||||
$r2H: nth($ueTimeControlH,2);
|
||||
$r3H: nth($ueTimeControlH,3);
|
||||
|
||||
@include absPosDefault();
|
||||
//@include absPosDefault();
|
||||
//@include test();
|
||||
display: block;
|
||||
top: auto;
|
||||
//top: auto;
|
||||
height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
|
||||
min-width: $minW;
|
||||
font-size: 0.8rem;
|
||||
|
||||
@ -19,8 +19,10 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.s-status-editing .l-object-wrapper,
|
||||
.edit-main {
|
||||
// .s-status-editing .l-object-wrapper is relevant to New Edit Mode;
|
||||
// .edit-main is legacy for old edit mode.
|
||||
$handleD: 15px;
|
||||
$cr: 5px;
|
||||
.edit-corner,
|
||||
@ -92,12 +94,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.frame.child-frame.panel {
|
||||
&:hover {
|
||||
@include boxShdwLarge();
|
||||
border-color: $colorKey;
|
||||
//z-index: 2;
|
||||
.view-switcher {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
}
|
||||
|
||||
.form {
|
||||
// @include test(orange);
|
||||
color: $colorFormText;
|
||||
.form-section {
|
||||
position: relative;
|
||||
@ -112,12 +111,8 @@
|
||||
|
||||
.selector-list {
|
||||
// Used in create overlay to display tree view
|
||||
@include nice-input($colorInputBg, $colorInputFg);
|
||||
@include nice-input();
|
||||
$h: 150px;
|
||||
//@include border-radius($basicCr);
|
||||
//@include box-sizing(border-box);
|
||||
//background: rgba(black, 0.2);
|
||||
//padding: $interiorMargin;
|
||||
position: relative;
|
||||
height: $h;
|
||||
// max-width: 50%;
|
||||
@ -162,13 +157,9 @@ label.form-control.checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
@include nice-input($colorInputBg, $colorInputFg);
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="search"] {
|
||||
@include nice-input();
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
@ -176,7 +167,6 @@ input[type="text"] {
|
||||
|
||||
textarea {
|
||||
@include nice-textarea($colorInputBg, $colorInputFg);
|
||||
// font-size: 0.9em;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -21,20 +21,7 @@
|
||||
*****************************************************************************/
|
||||
.filter,
|
||||
.t-filter {
|
||||
input.filter,
|
||||
input.t-filter-input {
|
||||
@include subdued-input();
|
||||
}
|
||||
input.t-filter-input {
|
||||
height: $formInputH;
|
||||
width: 200px;
|
||||
&:not(.ng-dirty) {
|
||||
// TO-DO: Update compass install to support this
|
||||
// @include input-placeholder {
|
||||
// color: rgba(#fff, 0.3);
|
||||
// font-style: italic;
|
||||
// }
|
||||
}
|
||||
&:not(.ng-dirty) + .t-a-clear {
|
||||
display: none;
|
||||
}
|
||||
@ -76,13 +63,6 @@
|
||||
background-color: $colorKey;
|
||||
}
|
||||
}
|
||||
// &:not(ng-dirty)
|
||||
}
|
||||
|
||||
.l-filter {
|
||||
// Holds an input and a clear button
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
@ -101,3 +81,74 @@
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.l-filter {
|
||||
$iconEdgeM: 4px;
|
||||
$iconD: $formInputH - ($iconEdgeM * 2);
|
||||
// Adds a magnifying glass before, holds an input and a clear button
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
input[type="search"] {
|
||||
padding: 2px ($iconD + $interiorMargin);
|
||||
}
|
||||
.clear-icon,
|
||||
.menu-icon,
|
||||
&:before {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
line-height: inherit;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Magnify glass icon
|
||||
content:'\4d';
|
||||
left: $interiorMargin;
|
||||
@include trans-prop-nice(color, 250ms);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
right: $iconEdgeM;
|
||||
// Icon is visible only when there is text input
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
&.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-filter {
|
||||
input[type="search"] {
|
||||
@include input-base();
|
||||
}
|
||||
.clear-icon,
|
||||
.menu-icon,
|
||||
&:before {
|
||||
color: $colorInputIcon;
|
||||
cursor: pointer;
|
||||
font-family: symbolsfont;
|
||||
@include trans-prop-nice((opacity, color), 150ms);
|
||||
}
|
||||
// Make icon lighten when hovering over search bar
|
||||
&:hover:before {
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
// 'x' in circle icon
|
||||
&:before {
|
||||
content: '\e607';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.object-browse-bar {
|
||||
left: 45px !important;
|
||||
margin-left: 45px;
|
||||
.context-available {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
@ -149,3 +149,32 @@ mct-representation {
|
||||
border-color: rgba($colorItemTreeSelectedFg, 0.25);
|
||||
border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
|
||||
}
|
||||
|
||||
.tree .s-status-editing,
|
||||
.search-results .s-status-editing {
|
||||
// Item is being edited
|
||||
.tree-item,
|
||||
.search-result-item {
|
||||
background: $colorItemTreeEditingBg;
|
||||
pointer-events: none;
|
||||
&:before {
|
||||
// Pencil icon
|
||||
@extend .ui-symbol;
|
||||
@include pulse($dur: 1s, $opacity0: 0.25);
|
||||
color: $colorItemTreeEditingFg;
|
||||
content: '\70';
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
.t-object-label {
|
||||
.t-item-icon,
|
||||
.t-title-label {
|
||||
color: $colorItemTreeEditingFg;
|
||||
@include text-shadow(none);
|
||||
}
|
||||
.t-title-label {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
.view-control, + .tree-item-subtree { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
&.child-frame.panel {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $bc;
|
||||
z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
|
||||
@ -77,7 +77,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// from _bottom-bar.scss
|
||||
.ue-bottom-bar {
|
||||
@include absPosDefault(0);// New status bar design
|
||||
top: auto;
|
||||
@ -109,6 +108,7 @@
|
||||
}
|
||||
|
||||
.edit-mode {
|
||||
// Old edit mode
|
||||
.split-layout {
|
||||
.split-pane-component.pane.right {
|
||||
width: 15%;
|
||||
@ -172,7 +172,7 @@
|
||||
&.toggle-inspect.anchor-right {
|
||||
right: $bodyMargin;
|
||||
&:after {
|
||||
content: '\e615'; // e615: Crosshair icon; was e608: Info "i" icon
|
||||
content: '\e615'; // Eye icon
|
||||
}
|
||||
&.collapsed {
|
||||
right: $interiorMargin;
|
||||
@ -197,6 +197,16 @@
|
||||
right: 0;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
.create-btn-holder {
|
||||
&.s-status-editing {
|
||||
display: none;
|
||||
& + .search-holder .search-bar {
|
||||
// .search-holder is adjacent sibling to .create-btn-holder
|
||||
// Add right margin when create button is hidden, to make room for the collapse pane 'x' button
|
||||
margin-right: $interiorMarginLg * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.holder.holder-object-and-inspector {
|
||||
@ -208,25 +218,50 @@
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
}
|
||||
.holder-inspector-elements {
|
||||
.holder-inspector {
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
}
|
||||
.holder-elements {
|
||||
top: 0;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.object-holder {
|
||||
@include absPosDefault(0, auto);
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
&.l-controls-visible {
|
||||
&.l-time-controller-visible {
|
||||
bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
|
||||
}
|
||||
|
||||
.l-object-wrapper {
|
||||
@extend .abs;
|
||||
|
||||
.object-holder-main {
|
||||
@extend .abs;
|
||||
}
|
||||
.l-edit-controls {
|
||||
//@include trans-prop-nice((opacity, height), 0.25s);
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
line-height: $ueEditToolBarH;
|
||||
height: 0px;
|
||||
opacity: 0;
|
||||
.tool-bar {
|
||||
right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-object-wrapper-inner {
|
||||
@include trans-prop-nice-resize(0.25s);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.object-browse-bar .s-btn,
|
||||
.top-bar .buttons-main .s-btn,
|
||||
.top-bar .s-menu-btn,
|
||||
@ -247,7 +282,6 @@
|
||||
|
||||
/***************************************************** OBJECT BROWSE BAR */
|
||||
.object-browse-bar {
|
||||
@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
|
||||
@include box-sizing(border-box);
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
@ -255,15 +289,13 @@
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMarginLg;
|
||||
.l-back {
|
||||
.l-back:not(.s-status-editing) {
|
||||
margin-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
// When the tree is hidden, these are the classes used for the left menu and the right representation.
|
||||
.pane-tree-hidden {
|
||||
// Sets the left tree menu when the tree is hidden.
|
||||
.tree-holder,
|
||||
@ -299,9 +331,6 @@
|
||||
|
||||
.pane-inspect-hidden {
|
||||
.l-object-and-inspector {
|
||||
.t-inspect {
|
||||
z-index: 1 !important; // Move down so that primary pane elements are clickable
|
||||
}
|
||||
.l-inspect,
|
||||
.splitter-inspect {
|
||||
opacity: 0;
|
||||
@ -345,3 +374,22 @@
|
||||
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
|
||||
}
|
||||
}
|
||||
|
||||
.s-status-editing {
|
||||
.l-object-wrapper {
|
||||
@include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
|
||||
@include border-radius($controlCr);
|
||||
background-color: $colorEditAreaBg;
|
||||
border-color: $colorEditAreaFg;
|
||||
border-width: 2px;
|
||||
border-style: dotted;
|
||||
.l-object-wrapper-inner {
|
||||
@include absPosDefault(3px, hidden);
|
||||
}
|
||||
.l-edit-controls {
|
||||
height: $ueEditToolBarH + $interiorMargin;
|
||||
margin-bottom: $interiorMargin;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,9 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.tool-bar {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
&.btn-bar {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.l-control-group {
|
||||
height: $btnToolbarH;
|
||||
}
|
||||
|
||||
@ -46,8 +46,7 @@
|
||||
.edit-mode {
|
||||
.top-bar {
|
||||
.buttons-main {
|
||||
// background: red;
|
||||
// width: 600px;
|
||||
// Old edit mode
|
||||
white-space: nowrap;
|
||||
&.abs {
|
||||
bottom: auto;
|
||||
|
||||
@ -20,15 +20,13 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<!-- look at action-button for example -->
|
||||
<span class="t-filter l-filter"
|
||||
<span class="t-filter l-filter s-filter"
|
||||
ng-controller="GetterSetterController">
|
||||
<input type="search"
|
||||
class="t-filter-input"
|
||||
ng-model="getterSetter.value"
|
||||
placeholder="Filter..."/>
|
||||
<a class="ui-symbol t-a-clear s-a-clear"
|
||||
ng-show="getterSetter.value !== ''"
|
||||
ng-model="getterSetter.value"/>
|
||||
<a class="clear-icon"
|
||||
ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
|
||||
ng-click="getterSetter.value = ''">
|
||||
x
|
||||
</a>
|
||||
</span>
|
||||
@ -23,7 +23,7 @@
|
||||
<div ng-controller="PaneController as modelPaneEdit">
|
||||
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
|
||||
<div class="split-pane-component pane top">
|
||||
<div class="abs holder holder-inspector-elements l-flex-col">
|
||||
<div class="abs holder holder-inspector l-flex-col">
|
||||
<div class="pane-header flex-elem">Inspection</div>
|
||||
<ul class="flex-elem grows vscroll">
|
||||
<li>
|
||||
@ -35,6 +35,47 @@
|
||||
<div class="value">{{ data.value }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li ng-if="contextutalParents.length > 0">
|
||||
<em title="The location of this linked object.">Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in contextutalParents"
|
||||
ng-class="{ last:($index + 1) === contextualParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = parent"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-if="primaryParents.length > 0">
|
||||
<em title="The location of the original object that this was linked from.">Original Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in primaryParents"
|
||||
ng-class="{ last:($index + 1) === primaryParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = parent"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/ holder-inspector -->
|
||||
</div><!--/ split-pane-component -->
|
||||
<mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
|
||||
<div class="split-pane-component pane bottom">
|
||||
<div class="abs holder holder-elements l-flex-col">
|
||||
<em class="flex-elem">Elements</em>
|
||||
<mct-representation
|
||||
key="'edit-elements'"
|
||||
mct-object="domainObject"
|
||||
class="flex-elem holder grows vscroll current-elements">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li ng-if="contextutalParents.length > 0">
|
||||
<em title="The location of this linked object.">Location</em>
|
||||
<span class="inspector-location"
|
||||
@ -63,18 +104,4 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!--/ split-pane-component -->
|
||||
<mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
|
||||
<div class="split-pane-component pane bottom" ng-show="editMode">
|
||||
<div class="abs holder holder-elements l-flex-col">
|
||||
<em class="flex-elem">Elements</em>
|
||||
<mct-representation
|
||||
key="'edit-elements'"
|
||||
mct-object="domainObject"
|
||||
class="flex-elem holder grows vscroll current-elements">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
</mct-split-pane>
|
||||
</div><!--/ PaneController -->
|
||||
</span>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,6 +6,8 @@ $colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: #005177;
|
||||
$colorKeyFg: #fff;
|
||||
$colorEditAreaBg: #31363e;
|
||||
$colorEditAreaFg: #587ab5;
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.1);
|
||||
$colorA: #ccc;
|
||||
$colorAHov: #fff;
|
||||
@ -43,8 +45,6 @@ $colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
|
||||
@ -69,8 +69,8 @@ $colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff3300;
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInputBg: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#fff, 0.1);
|
||||
$colorInputBg: rgba(#000, 0.1);
|
||||
$colorInputFg: pullForward($colorBodyFg, 20%);
|
||||
$colorFormText: rgba(#fff, 0.5);
|
||||
$colorInputIcon: pushBack($colorBodyFg, 15%);
|
||||
@ -80,7 +80,7 @@ $colorInspectorBg: pullForward($colorBodyBg, 3%);
|
||||
$colorInspectorFg: $colorBodyFg;
|
||||
$colorInspectorPropName: pushBack($colorBodyFg, 15%);
|
||||
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
@ -109,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
|
||||
$colorLimitRedIc: red;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
||||
|
||||
@ -126,7 +126,7 @@ $colorItemBg: lighten($colorBodyBg, 5%);
|
||||
$colorItemBgHov: pullForward($colorItemBg, 15%);
|
||||
$colorItemFg: lighten($colorItemBg, 50%);
|
||||
$colorItemFgDetails: lighten($colorItemBg, 30%);
|
||||
$colorItemIc: $colorKey; //pullForward($colorItemFg, 20%);
|
||||
$colorItemIc: $colorKey;
|
||||
$colorItemSubIcons: $colorItemFgDetails;
|
||||
$colorItemOpenIcon: $colorItemFgDetails;
|
||||
$shdwItemText: rgba(black, 0.1) 0 1px 2px;
|
||||
@ -153,12 +153,14 @@ $colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
|
||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
||||
$colorItemTreeVCHover: $colorAlt1;
|
||||
$colorItemTreeFg: $colorBodyFg;
|
||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||
$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
|
||||
$colorItemTreeEditingBg: #344154;
|
||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||
$colorItemTreeVC: rgba(#fff, 0.3);
|
||||
$colorItemTreeSelectedVC: $colorItemTreeVC;
|
||||
$colorItemTreeVCHover: $colorAlt1;
|
||||
$shdwItemTreeIcon: 0.6;
|
||||
|
||||
// Scrollbar
|
||||
@ -171,7 +173,7 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
|
||||
// Splitter
|
||||
$splitterD: 25px; // splitterD and HandleD should both be odd, or even
|
||||
$splitterHandleD: 1px;
|
||||
$colorSplitterBg: pullForward($colorBodyBg, 5%);
|
||||
$colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%);
|
||||
$splitterShdw: rgba(black, 0.4) 0 0 3px;
|
||||
$splitterEndCr: none;
|
||||
$colorSplitterHover: pullForward($colorBodyBg, 15%);
|
||||
@ -191,5 +193,5 @@ $colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
|
||||
$colorAboutLink: #84b3ff;
|
||||
|
||||
// Loading
|
||||
$colorLoadingBg: rgba($colorBodyFg, 0.2);
|
||||
$colorLoadingFg: $colorAlt1;
|
||||
$colorLoadingBg: rgba($colorBodyFg, 0.2);
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,6 +6,8 @@ $colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeyFg: #fff;
|
||||
$colorEditAreaBg: #eafaff;
|
||||
$colorEditAreaFg: #4bb1c7; //587ab5;
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #999;
|
||||
$colorAHov: $colorKey;
|
||||
@ -55,10 +57,10 @@ $colorMenuIc: $colorKey;
|
||||
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
|
||||
$colorMenuHovFg: $colorMenuFg;
|
||||
$colorMenuHovIc: $colorMenuIc;
|
||||
$colorCreateMenuLgIcon: $colorKey;
|
||||
$colorCreateMenuText: $colorBodyFg;
|
||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||
$shdwMenuText: none;
|
||||
$colorCreateMenuLgIcon: $colorKey;
|
||||
$colorCreateMenuText: $colorBodyFg;
|
||||
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
@ -107,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
|
||||
$colorLimitRedIc: red;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorInfoBubbleBg: $colorMenuBg;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
||||
|
||||
@ -127,12 +129,11 @@ $colorItemFgDetails: pushBack($colorItemFg, 15%);
|
||||
$colorItemIc: $colorKey;
|
||||
$colorItemSubIcons: $colorItemFgDetails;
|
||||
$colorItemOpenIcon: $colorItemFgDetails;
|
||||
$shdwItemText: none; //rgba(black, 0.2) 0 1px 2px;
|
||||
$shdwItemText: none;
|
||||
$colorItemBgSelected: $colorKey;
|
||||
|
||||
// Tabular
|
||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
|
||||
@ -149,12 +150,15 @@ $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
|
||||
// Tree
|
||||
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
|
||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeFg: $colorBodyFg;
|
||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||
$colorItemTreeSelectedFg: $colorBodyBg;
|
||||
$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
|
||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||
$colorItemTreeVC: $colorBodyFg;
|
||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
@ -20,7 +20,8 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="PlotController as plot"
|
||||
ng-mouseleave="representation.showControls = false">
|
||||
ng-mouseleave="representation.showControls = false"
|
||||
class="abs holder holder-plot">
|
||||
|
||||
<div class="gl-plot"
|
||||
ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="w2"
|
||||
ng-controller="ScrollingListController">
|
||||
<!-- To add filtering, add class 'filterable' to <table> and uncomment 2nd <tr> in <thead> -->
|
||||
<table class="tabular fixed-header">
|
||||
<table class="tabular">
|
||||
<thead>
|
||||
<tr>
|
||||
<th ng-repeat="header in headers">
|
||||
|
||||
@ -54,7 +54,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.edit-mode .s-timeline-gantt {
|
||||
.edit-mode .s-timeline-gantt,
|
||||
.s-status-editing .s-timeline-gantt {
|
||||
.handle {
|
||||
cursor: col-resize;
|
||||
&.mid {
|
||||
|
||||
@ -69,7 +69,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.edit-mode .s-timeline-gantt {
|
||||
.edit-mode .s-timeline-gantt,
|
||||
.s-status-editing .s-timeline-gantt {
|
||||
.bar {
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($colorGanttBarBg, 20), lighten($colorGanttBarBg, 10)));
|
||||
@ -140,7 +141,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.edit-mode .s-swimlane {
|
||||
.edit-mode .s-swimlane,
|
||||
.s-status-editing .s-swimlane {
|
||||
cursor: pointer;
|
||||
.t-object-label {
|
||||
@include border-radius($controlCr);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user