mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
Fluid layouts 2 electric boogaloo (#2047)
* [Frontend] Viewport metatag updated Fixes #2008 - Added shrink-to-fit=no; * [Frontend] Fix to Time Conductor for Safari Fixes #2008 - CSS mod for gradient blockers in TC * [Frontend] Remove data visualization element in TC Fixes #2008 - Note: this element holds the TOI indicator! * [Frontend] Hide TC ticks when on mobile Fixes #2008 - Added class `mobile-hide` to <conductor-axis> * [Frontend] Significant mobile fixes for panes and viewport Fixes #2008 Fixes #1770 Fixes #1928 - Left and right panes now positioning properly in mobile; - Fixed body overflow problem for #2008 "viewport" issue; * fixes multiple issues related to 2008 context menu firing too often - fixed by setting a isDragging flag Add and Remove respective classes on mobile orientation change by using mathMedia Close tree pane when navigating in mobile portrait only * [Frontend] Various Fixes #2008 - Always show Timeline zoom controls; - Prevent inline editing of object names in the main view when in mobile; * Add touch functionality to mct-drag it allows users to use the splitter in mobile and include appropriate tests * remove couchdb and reinstall localStorage * [Frontend] Mods to imagery CSS Fixes #2008 - Reduced size of image thumbnails; - Changed min-heights of image and thumbnail holders for .mobile.phone * [Frontend] Add Advanced CSS property to Display Layouts - WIP! - Add property to bundle; - Add CSS for column, row and fit-all classes; * [Frontend] Grid holder and class prefixing - WIP! - Edit grid-holder set to position: absolute - Added "fl-" prefix to fluid layout class names; * [Frontend] More CSS tweaks - WIP! * [Frontend] Added .drag-vertical - For use in Elements pool; - Applied in elements.html; * fix: check if stats is present before reseting zoom (#2029) * [Timer] Fix regression in timer visual indication and add tests * [TimeConductor] Fixes Issue #925 (#2020) * [TimeConductor] Fixes Issue #925` - Pressing enter in date field will update bounds properly in Safari * [Copyright] Update copyright year across platform code references Fixes #2034. * fixes issue #1999 - Use Object name as default export filename (#2001) * fixes issue #1999 add dynamic name(object name) to exportAsCSV filename * make requested changes * [Frontend] Add Advanced CSS property to Display Layouts - WIP! - Add property to bundle; - Add CSS for column, row and fit-all classes; * [Frontend] Grid holder and class prefixing - WIP! - Edit grid-holder set to position: absolute - Added "fl-" prefix to fluid layout class names; * [Frontend] More CSS tweaks - WIP! * [Frontend] Added .drag-vertical - For use in Elements pool; - Applied in elements.html; * [Frontend] More CSS tweaks - WIP! - Added .fl-phone-best-fit * working drag and switch, need to mutate * fix conflict * add ability to rearrange composition using drag gestures * add maxHeight and maxWidth to layout frames * [Frontend] Added fl-mobile-best-fit * [Frontend] Allow editor to set mins dimensions for fluid layout - Cleanups in CSS; - Mod to LayoutController.js to use minWidth and minHeight; * [Frontend] Styles for reordering in Elements pool - Changed class "dragging" to "reordering"; - Visual styling WIP; - TODO: style "reorder-actor" when implemented; * add reorder-actor class to draggable item in elements pool when selected and remove class when dropped * stacked plots reload on composition change * [Frontend] Tweaks to Elements pool reordering styles - "reorder-actor" added/removed from parent tree item; - Refined styling for drag in process in list; * [Frontend] Added new 12px list view glyph - Font files and CSS updates; * [Frontend] Added new 12px grippy glyph - Font files and CSS updates for Elements pool sorting styling; * fix failing test * make reviewer requested changes * remove create dialog from mobile
This commit is contained in:
Andrew Henry
GitHub
parent
c909831dd4
commit
08bed6c23a
@ -25,9 +25,15 @@
|
||||
ng-model="filterBy">
|
||||
</mct-include>
|
||||
<div class="flex-elem grows vscroll">
|
||||
<ul class="tree" ng-if="composition.length > 0">
|
||||
<ul class="tree" id="inspector-elements-tree" ng-if="composition.length > 0">
|
||||
<li ng-repeat="containedObject in composition | filter:searchElements">
|
||||
<span class="tree-item">
|
||||
<span class="grippy-sm"
|
||||
data-id="{{ containedObject.id }}"
|
||||
mct-drag-down="dragDown($event)"
|
||||
mct-drag="drag($event)"
|
||||
mct-drag-up="dragUp($event)">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
['zepto'],
|
||||
function ($) {
|
||||
|
||||
/**
|
||||
* The ElementsController prepares the elements view for display
|
||||
@ -32,6 +32,10 @@ define(
|
||||
function ElementsController($scope, openmct) {
|
||||
this.scope = $scope;
|
||||
this.scope.composition = [];
|
||||
this.openmct = openmct;
|
||||
this.dragDown = this.dragDown.bind(this);
|
||||
this.dragUp = this.dragUp.bind(this);
|
||||
|
||||
var self = this;
|
||||
|
||||
function filterBy(text) {
|
||||
@ -65,6 +69,7 @@ define(
|
||||
self.refreshComposition(domainObject);
|
||||
|
||||
if (domainObject) {
|
||||
|
||||
self.mutationListener = domainObject.getCapability('mutation')
|
||||
.listen(self.refreshComposition.bind(self, domainObject));
|
||||
}
|
||||
@ -76,11 +81,80 @@ define(
|
||||
openmct.selection.on('change', setSelection);
|
||||
setSelection(openmct.selection.get());
|
||||
|
||||
$scope.dragDown = this.dragDown;
|
||||
$scope.drag = this.drag;
|
||||
$scope.dragUp = this.dragUp;
|
||||
|
||||
$scope.$on("$destroy", function () {
|
||||
openmct.selection.off("change", setSelection);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Invoked on DragStart - Adds reordering class to parent UL element
|
||||
* Sets selected object ID, to be used on Drag End
|
||||
*
|
||||
* @param {object} event | Mouse Event
|
||||
*/
|
||||
ElementsController.prototype.dragDown = function (event) {
|
||||
if (!this.parentUL) {
|
||||
this.parentUL = $(document).find('#inspector-elements-tree');
|
||||
}
|
||||
|
||||
this.selectedTreeItem = $(event.target).parent();
|
||||
this.selectedObjectId = event.target.getAttribute('data-id');
|
||||
|
||||
this.parentUL.addClass('reordering');
|
||||
this.selectedTreeItem.addClass('reorder-actor');
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoked on dragEnd - Removes selected object from position in composition
|
||||
* and replaces it at the target position. Composition is then updated with current
|
||||
* scope
|
||||
*
|
||||
* @param {object} event - Mouse Event
|
||||
*/
|
||||
ElementsController.prototype.dragUp = function (event) {
|
||||
this.targetObjectId = event.target.getAttribute('data-id');
|
||||
|
||||
if (this.targetObjectId && this.selectedObjectId) {
|
||||
var selectedObjectPosition,
|
||||
targetObjectPosition;
|
||||
|
||||
selectedObjectPosition = findObjectInCompositionFromId(this.selectedObjectId, this.scope.composition);
|
||||
targetObjectPosition = findObjectInCompositionFromId(this.targetObjectId, this.scope.composition);
|
||||
|
||||
if ((selectedObjectPosition !== -1) && (targetObjectPosition !== -1)) {
|
||||
var selectedObject = this.scope.composition.splice(selectedObjectPosition, 1),
|
||||
selection = this.openmct.selection.get(),
|
||||
domainObject = selection ? selection[0].context.oldItem : undefined;
|
||||
|
||||
this.scope.composition.splice(targetObjectPosition, 0, selectedObject[0]);
|
||||
|
||||
if (domainObject) {
|
||||
domainObject.getCapability('mutation').mutate(function (model) {
|
||||
model.composition = this.scope.composition.map(function (dObject) {
|
||||
return dObject.id;
|
||||
});
|
||||
}.bind(this));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.parentUL) {
|
||||
this.parentUL.removeClass('reordering');
|
||||
}
|
||||
|
||||
if (this.selectedTreeItem) {
|
||||
this.selectedTreeItem.removeClass('reorder-actor');
|
||||
}
|
||||
};
|
||||
|
||||
ElementsController.prototype.drag = function (event) {
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the composition for the selected object and populates the scope with it.
|
||||
*
|
||||
@ -103,6 +177,21 @@ define(
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds position of object with given ID in Composition
|
||||
*
|
||||
* @param {String} id
|
||||
* @param {Array} composition
|
||||
* @private
|
||||
*/
|
||||
function findObjectInCompositionFromId(id, composition) {
|
||||
var mapped = composition.map(function (element) {
|
||||
return element.id;
|
||||
});
|
||||
|
||||
return mapped.indexOf(id);
|
||||
}
|
||||
|
||||
return ElementsController;
|
||||
}
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-12px",
|
||||
"lastOpened": 0,
|
||||
"created": 1502213994889
|
||||
"created": 1527031065005
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
@ -15,20 +15,36 @@
|
||||
"code": 59696,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 11,
|
||||
"id": 8,
|
||||
"name": "icon12-grippy",
|
||||
"prevSize": 12,
|
||||
"code": 59697,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 10,
|
||||
"id": 7,
|
||||
"name": "icon12-list-view",
|
||||
"prevSize": 12,
|
||||
"code": 921666,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 6,
|
||||
"id": 3,
|
||||
"prevSize": 12,
|
||||
"code": 921865,
|
||||
"name": "icon12-folder",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"id": 0,
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-12px",
|
||||
"importSize": {
|
||||
"width": 384,
|
||||
"width": 279,
|
||||
"height": 384
|
||||
},
|
||||
"designer": "Charles Hacskaylo"
|
||||
@ -65,6 +81,80 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"paths": [
|
||||
"M186.347 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M186.347 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M186.347 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M465.573 93.173c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M465.573 372.4c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M379.028 558.728c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
|
||||
"M379.017 837.96c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
|
||||
"M744.773 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"width": 745,
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-grippy"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"paths": [
|
||||
"M0 0h1024v170.667h-1024v-170.667z",
|
||||
"M0 426.667h1024v170.667h-1024v-170.667z",
|
||||
"M0 853.333h1024v170.667h-1024v-170.667z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-list-view"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"paths": [
|
||||
@ -139,6 +229,5 @@
|
||||
"historySize": 100,
|
||||
"gridSize": 16
|
||||
},
|
||||
"uid": -1,
|
||||
"time": 1502216581486
|
||||
"uid": -1
|
||||
}
|
||||
Binary file not shown.
@ -8,5 +8,7 @@
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="icon12-crosshair" d="M597.333 938.667h-170.667v-256h170.667v256zM1024 512h-256v-170.667h256v170.667zM597.333 170.667h-170.667v-256h170.667v256zM256 512h-256v-170.667h256v170.667z" />
|
||||
<glyph unicode="" glyph-name="icon12-grippy" horiz-adv-x="745" d="M186.347 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 845.494c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 566.267c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM379.028 379.939c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM379.017 100.707c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM744.773 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173z" />
|
||||
<glyph unicode="󡁂" glyph-name="icon12-list-view" d="M0 938.667h1024v-170.667h-1024v170.667zM0 512h1024v-170.667h-1024v170.667zM0 85.334h1024v-170.667h-1024v170.667z" />
|
||||
<glyph unicode="󡄉" glyph-name="icon12-folder" d="M938.667 768h-341.333l-110.32 110.32c-33.2 33.2-98.667 60.347-145.68 60.347h-256c-47.073-0.136-85.197-38.26-85.333-85.32v-341.346c0.136 47.073 38.26 85.197 85.32 85.333h853.346c47.073-0.136 85.197-38.26 85.333-85.32v170.654c-0.136 47.073-38.26 85.197-85.32 85.333zM85.333 512h853.333c47.128 0 85.333-38.205 85.333-85.333v-426.667c0-47.128-38.205-85.333-85.333-85.333h-853.333c-47.128 0-85.333 38.205-85.333 85.333v426.667c0 47.128 38.205 85.333 85.333 85.333z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
Binary file not shown.
@ -266,3 +266,5 @@ $glyph-icon-notebook: '\e1131';
|
||||
/************************** 12 PX CLASSES */
|
||||
.icon-crosshair-12px { @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
|
||||
.icon-folder-12px { @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
|
||||
.icon-list-view-12px { @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
|
||||
.icon-grippy-12px { @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }
|
||||
|
||||
@ -770,11 +770,31 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.grippy {
|
||||
@extend .icon-grippy;
|
||||
.grippy,
|
||||
.grippy-sm,
|
||||
.drag-vertical,
|
||||
.drag-vertical-sm {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.drag-vertical {
|
||||
@extend .icon-list-view;
|
||||
}
|
||||
|
||||
.drag-vertical-sm {
|
||||
@extend .icon-list-view-12px;
|
||||
}
|
||||
|
||||
.grippy {
|
||||
// Used in Summary Widgets
|
||||
@extend .icon-grippy;
|
||||
}
|
||||
|
||||
.grippy-sm {
|
||||
// Used in editor Elements pool
|
||||
@extend .icon-grippy-12px;
|
||||
}
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
body.desktop {
|
||||
::-webkit-scrollbar {
|
||||
|
||||
@ -23,13 +23,11 @@
|
||||
|
||||
.l-grid-holder {
|
||||
display: none;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@extend .abs;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
.l-grid {
|
||||
@extend .abs;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
&.l-grid-y { background-position: 0 1px; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,14 @@ ul.tree {
|
||||
@include user-select(none);
|
||||
> li {
|
||||
display: block;
|
||||
align-content: flex-end;
|
||||
position: relative;
|
||||
.grippy-sm {
|
||||
font-size: 12px;
|
||||
margin-right: $interiorMargin;
|
||||
opacity: 0.5;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
ul.tree {
|
||||
margin-left: $treeVCW + $interiorMargin;
|
||||
@ -121,6 +128,17 @@ body.desktop {
|
||||
}
|
||||
}
|
||||
|
||||
ul.tree.reordering {
|
||||
// User is drag reordering a tree item in a container that allows the action
|
||||
.tree-item:not(.reorder-actor):hover {
|
||||
background: rgba($colorKey, 0.2);
|
||||
border: 1px dashed rgba($colorKey, 1);
|
||||
> * {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mct-representation {
|
||||
&.s-status-pending {
|
||||
.t-object-label {
|
||||
|
||||
@ -22,6 +22,9 @@
|
||||
.frame {
|
||||
$ohH: $btnFrameH;
|
||||
$bc: $colorInteriorBorder;
|
||||
|
||||
position: absolute;
|
||||
|
||||
&.child-frame.panel {
|
||||
z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
|
||||
&:not(.no-frame) {
|
||||
@ -171,3 +174,76 @@ body.desktop .frame {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.holder-object:not(.s-status-editing) {
|
||||
.l-layout {
|
||||
&.fl-column,
|
||||
&.fl-row,
|
||||
&.fl-wrap,
|
||||
&.fl-phone-best-fit,
|
||||
&.fl-mobile-best-fit {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
> .frame {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
&.t-object-type-summary-widget {
|
||||
&.no-frame.t-frame-outer > .t-rep-frame {
|
||||
&.contents {
|
||||
// When frame is hidden, add a bit of margin to the contents
|
||||
$m: $interiorMargin;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fl-column {
|
||||
flex-direction: column;
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
&.fl-row {
|
||||
flex-direction: row;
|
||||
padding-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
&.fl-wrap {
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.holder-object {
|
||||
.l-layout {
|
||||
&.fl-column,
|
||||
&.fl-row,
|
||||
&.fl-wrap,
|
||||
&.fl-phone-best-fit,
|
||||
&.fl-mobile-best-fit {
|
||||
> .frame {
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.mobile {
|
||||
.l-layout.fl-mobile-best-fit {
|
||||
flex-wrap: wrap !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
&.portrait .l-layout.fl-mobile-best-fit {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
&.landscape .l-layout.fl-mobile-best-fit {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -335,6 +335,12 @@ define([
|
||||
],
|
||||
"key": "layoutGrid",
|
||||
"conversion": "number[]"
|
||||
},
|
||||
{
|
||||
"name": "Advanced",
|
||||
"control": "textfield",
|
||||
"key": "layoutAdvancedCss",
|
||||
"cssClass": "l-input-lg"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
|
||||
<div class="abs l-layout"
|
||||
<div class="abs l-layout {{ domainObject.getModel().layoutAdvancedCss }}"
|
||||
ng-controller="LayoutController as controller"
|
||||
ng-click="controller.bypassSelection($event)">
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
|
||||
</div>
|
||||
|
||||
<div class="abs frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border t-object-type-{{ childObject.getModel().type }}"
|
||||
<div class="frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border t-object-type-{{ childObject.getModel().type }}"
|
||||
data-layout-id="{{childObject.getId() + '-' + $id}}"
|
||||
ng-class="{ 'no-frame': !controller.hasFrame(childObject), 's-drilled-in': controller.isDrilledIn(childObject) }"
|
||||
ng-repeat="childObject in composition"
|
||||
|
||||
@ -244,7 +244,9 @@ define(
|
||||
left: (gridSize[0] * raw.position[0]) + 'px',
|
||||
top: (gridSize[1] * raw.position[1]) + 'px',
|
||||
width: (gridSize[0] * raw.dimensions[0]) + 'px',
|
||||
height: (gridSize[1] * raw.dimensions[1]) + 'px'
|
||||
height: (gridSize[1] * raw.dimensions[1]) + 'px',
|
||||
minWidth: (gridSize[0] * raw.dimensions[0]) + 'px',
|
||||
minHeight: (gridSize[1] * raw.dimensions[1]) + 'px'
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -217,7 +217,9 @@ define(
|
||||
top: "320px",
|
||||
left: "640px",
|
||||
width: "160px",
|
||||
height: "160px"
|
||||
height: "160px",
|
||||
minWidth : '160px',
|
||||
minHeight : '160px'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -106,7 +106,21 @@ define([
|
||||
});
|
||||
}
|
||||
|
||||
function onCompositionChange(newComp, oldComp) {
|
||||
if (newComp !== oldComp) {
|
||||
|
||||
$scope.telemetryObjects = [];
|
||||
|
||||
objectService.getObjects(newComp).then(function (objects) {
|
||||
newComp.forEach(function (id) {
|
||||
$scope.telemetryObjects.push(objects[id]);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$scope.$watch('domainObject', onDomainObjectChange);
|
||||
$scope.$watch('domainObject.getModel().composition', onCompositionChange);
|
||||
|
||||
$scope.$on('plot:tickWidth', function ($e, width) {
|
||||
var plotId = $e.targetScope.domainObject.getId();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user