ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-19 03:06:54 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

[Frontend] Initial styling for selectable styling

Browse Source 
Fixes #1161
New .s-selectable, .s-hover, .s-selected and .s-moveable classes
New supporting color constants
Markup in layouts, fixed position/panels updated
Removed old commented code
This commit is contained in:
Charles Hacskaylo 2016-09-01 10:55:07 -07:00
parent 40abd1ce6c
commit ee917b0e1d
8 changed files with 54 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
platform/commonUI/general/res/sass/_fixed-position.scss
View File

@ -21,7 +21,6 @@
*****************************************************************************/
.t-fixed-position {
&.l-fixed-position {
// @include test(red);
position: absolute;
top: 0;
right: 0;
@ -35,7 +34,6 @@
height: 100%;
width: 100%;
.l-grid {
// @include test(orange);
position: absolute;
height: 100%;
width: 100%;
@ -49,11 +47,6 @@
position: absolute;
border: 1px solid transparent;
&.s-selected {
@include boxShdwLarge();
border-color: $colorKey;
cursor: move;
}
&.s-not-selected {
opacity: 0.8;
}
@ -76,26 +69,19 @@
}
.l-fixed-position-text {
//@include txtShdwSubtle();
border: 1px solid transparent;
font-size: 0.8rem;
$p: 1px; //$interiorMarginSm;
$p: 1px;
line-height: 100%;
&.l-static-text {
// overflow: auto;
padding: $p;
}
&.l-telemetry {
.l-elem {
//@include absPosDefault($p);
//@include absPosDefault(0);
box-sizing: border-box;
display: block;
padding: 2px;
//width: 50%;
&.l-title {
//right: auto;
//left: $p;
float: none;
overflow: hidden;
text-overflow: ellipsis;
@ -103,9 +89,6 @@
width: auto;
}
&.l-value {
// @include test(blue);
// right: $p;
// left: auto;
border-radius: $smallCr;
$valPad: 5px;
float: right;
@ -125,7 +108,6 @@
.l-fixed-position-item-handle {
$brd: 1px solid $colorKey;
// border-radius: $controlCr;
background: rgba($colorKey, 0.5);
cursor: crosshair;
border: $brd;

1
platform/commonUI/general/res/sass/_main.scss
View File

@ -65,6 +65,7 @@
@import "user-environ/frame";
@import "user-environ/top-bar";
@import "user-environ/tool-bar";
@import "user-environ/selecting";
/********************************* VIEWS */
@import "fixed-position";

2
platform/commonUI/general/res/sass/edit/_editor.scss
View File

@ -97,7 +97,7 @@
.frame.child-frame.panel {
&:hover {
@include boxShdwLarge();
border-color: $colorKey;
border-color: $colorSelectableSelectedPrimary;
.view-switcher {
opacity: 1;
}

39
platform/commonUI/general/res/sass/user-environ/_selecting.scss Normal file
View File

@ -0,0 +1,39 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2016, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.s-selectable {
border: 1px solid transparent;
&.s-hover {
// Styles when hovering over a selectable object
border-color: $colorSelectableHov !important;
}
&.s-selected {
// Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
border-color: $colorSelectableSelectedPrimary !important;
}
&.s-moveable {
@include boxShdwLarge();
cursor: move;
}
}

3
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -63,6 +63,9 @@ $colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
$colorTick: rgba(white, 0.2);
$colorSelectableSelectedPrimary: $colorKey;
$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
$colorSelectableHov: $colorSelectableSelectedSecondary;
// Menu colors
$colorMenuBg: pullForward($colorBodyBg, 23%);

3
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -63,6 +63,9 @@ $colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
$colorTick: rgba(black, 0.2);
$colorSelectableSelectedPrimary: $colorKey;
$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
$colorSelectableHov: $colorSelectableSelectedSecondary;
// Menu colors
$colorMenuBg: pushBack($colorBodyBg, 10%);

2
platform/features/layout/res/templates/fixed.html
View File

@ -44,7 +44,7 @@
<!-- Selection highlight, handles -->
<span ng-if="controller.selected()">
<div class="l-fixed-position-item s-selected"
<div class="l-fixed-position-item s-selectable s-selected s-moveable"
mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
mct-drag="controller.moveHandle().continueDrag(delta)"
mct-drag-up="controller.moveHandle().endDrag()"

43
platform/features/layout/res/templates/layout.html
View File

@ -33,61 +33,28 @@
</div>
<!-- Drag handles -->
<span ng-show="domainObject.hasCapability('editor')">
<span
class="edit-handle edit-move"
<span class="edit-handle edit-move"
mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<!--
<span
class="edit-handle edit-resize-w"
mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,0])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span
class="edit-handle edit-resize-e"
mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [1,0])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span
class="edit-handle edit-resize-n"
mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [0,-1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span
class="edit-handle edit-resize-s"
mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [0,1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
-->
<span
class="edit-corner edit-resize-nw"
<span class="edit-corner edit-resize-nw"
mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [-1,-1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span
class="edit-corner edit-resize-ne"
<span class="edit-corner edit-resize-ne"
mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [1,-1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span
class="edit-corner edit-resize-sw"
<span class="edit-corner edit-resize-sw"
mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span
class="edit-corner edit-resize-se"
<span class="edit-corner edit-resize-se"
mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [1,1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">