mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
1069a45cfc
* first cut of flexible layout * better drag handling * add drop targets to every row * enable drag and drop between columns and rows * enable persistance * add editing capability * chage rows to frames and columns to containers, switch draggable to whole frame object * Merge latest, resolve conflicts. Need to just apply these changes to Deep's branch and push * enhancements to drag targets * WIP in flexibleLayout, container.vue files - Refined classes and markup; - min-width changed to flex-basis; - Added toggle direction button; * Significant progress but still WIP - Refined classes and markup; - Layout toggling working; - Add Container working properly; - TODOs: fix sizing in empty container, fix bordering, more refinements; * add resizing of frames - still wip * Significant enhancements - Moved all CSS into flexibleLayout.vue; - Layout now improved for empty container and drop hints; - Proportional sizing now better for frames and containers; * Resize handle WIP * abstract splitter and logic into self contained component that will emit an event when mouse is moving * Resize handle WIP - Minor tweak to handle padding and hover; * add container resize todo persist * persist container resize * add frame header, fix column resize on last column * Refinements to resize-handle - Fixed sizing; - Transition on hover; - TODOs: needs is-dragging to maintain hover style while dragging; * fix drop hints showing after drop * move header * improve mouse move gesture * Added frame size indicator * add snapto functionality * Refined container and frame size indicators - Also added overflow handling to l-grid-view * improve resizing logic * add selection on frames * Various resizing-frames related - Fixed overflow - now frame widths can be collapsed to 5% minimum; - Sizing indicators refined, better positioning and layout; - Added grippy drag indicators to column heads; - TODOs: add column head cursors and hover effects, hide indicators when not in edit mode, handle nested layout and flex layouts while editing * Selecting and emtpy layout messaging - Better empty layout message; - Moved s-selected to proper element in c-fl-frame; * Drop-hint and sizing related various - Drop-hints for first placeholder container now display; - Drop-hints moved into drag-wrapper; * add delete frame * Editing various - Adjust Snow theme constants related to editing; - Changed delete message wording; * Updated icon and added description * add toggle and remove container to toolbar * miscellaneous cleanup * add container button to toolbar * improve toolbar * code cleanup in plugin.js * Various icons, toolbar separator - Copied in c-toolbar__separator and associated changes in _controls from Pegah's layout_alpha branch - may have conflicts later. - Added separator to FL toolbar; - Updated icons for grippy-ew, toolbar icons; * add check for empty containers" * logic to resize frames on drop * fix delete frame and persisting toolbar * Significant changes to edit / selection styling - Both Flexible and fixed Display Layouts addressed; - Both themes addressed; - Changed drop-hint icon to icon-plus; * add correct icons to frame header and fix toolbars showing up in wrong views * Moving and resizing various - Cursors; - Grippy added to frame resize-handle, WIP!; * add container reordering * add frame/no frame support to toolbar' * fix regression of resize handles showing after last frame in container * force selection of flexible-layout when editing is first clicked, to apply correct toolbar * make changes to simplify toolbar * Modified sizing algorithm slightly * make changes reviewer requested * fix regression that causes top drop hint to not show * remove unused variables and bind events to vue * unsub selection before destroy
285 lines
12 KiB
HTML
285 lines
12 KiB
HTML
<!--
|
|
Open MCT, Copyright (c) 2014-2017, 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.
|
|
-->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<title></title>
|
|
<script src="dist/openmct.js"></script>
|
|
<link rel="stylesheet" href="dist/openmct.css">
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96">
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16">
|
|
<link rel="shortcut icon" href="dist/favicons/favicon.ico">
|
|
</head>
|
|
<body>
|
|
</body>
|
|
<script>
|
|
var THIRTY_MINUTES = 30 * 60 * 1000;
|
|
[
|
|
'example/eventGenerator',
|
|
'example/styleguide'
|
|
].forEach(
|
|
openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
|
|
);
|
|
openmct.install(openmct.plugins.MyItems());
|
|
openmct.install(openmct.plugins.LocalStorage());
|
|
openmct.install(openmct.plugins.Generator());
|
|
openmct.install(openmct.plugins.ExampleImagery());
|
|
openmct.install(openmct.plugins.UTCTimeSystem());
|
|
openmct.install(openmct.plugins.ImportExport());
|
|
openmct.install(openmct.plugins.FixedView());
|
|
openmct.install(openmct.plugins.AutoflowView({
|
|
type: "telemetry.panel"
|
|
}));
|
|
openmct.install(openmct.plugins.Conductor({
|
|
menuOptions: [
|
|
{
|
|
name: "Fixed",
|
|
timeSystem: 'utc',
|
|
bounds: {
|
|
start: Date.now() - THIRTY_MINUTES,
|
|
end: Date.now()
|
|
}
|
|
},
|
|
{
|
|
name: "Realtime",
|
|
timeSystem: 'utc',
|
|
clock: 'local',
|
|
clockOffsets: {
|
|
start: -25 * 60 * 1000,
|
|
end: 5 * 60 * 1000
|
|
}
|
|
}
|
|
]
|
|
}));
|
|
openmct.install(openmct.plugins.SummaryWidget());
|
|
openmct.install(openmct.plugins.Notebook());
|
|
openmct.install(openmct.plugins.FolderView());
|
|
openmct.install(openmct.plugins.Tabs());
|
|
openmct.install(openmct.plugins.FlexibleLayout());
|
|
openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
|
|
openmct.time.timeSystem('utc');
|
|
openmct.start();
|
|
|
|
// openmct.toolbars.addProvider({
|
|
// name: "Testing Toolbar",
|
|
// key: "testing",
|
|
// description: "a mock toolbar that exercises all controls",
|
|
// forSelection: function (selection) {
|
|
// return true; // always applies.
|
|
// },
|
|
// toolbar: function (selection) {
|
|
// return [
|
|
// {
|
|
// control: 'menu',
|
|
// icon: 'icon-plus',
|
|
// label: 'Add',
|
|
// options: [
|
|
// { name: 'Box', class: 'icon-box', title: 'Add Box' },
|
|
// { name: 'Line', class: 'icon-line-horz', title: 'Add Line' },
|
|
// { name: 'Text', class: 'icon-font', title: 'Add Text' },
|
|
// { name: 'Image', class: 'icon-image', title: 'Add Image' }
|
|
// ]
|
|
// },
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'color-picker',
|
|
// icon: 'icon-paint-bucket',
|
|
// value: '#33ff00',
|
|
// },
|
|
// {
|
|
// control: 'color-picker',
|
|
// icon: 'icon-pencil',
|
|
// value: '#ffffff',
|
|
// },
|
|
// {
|
|
// control: 'color-picker',
|
|
// icon: 'icon-font',
|
|
// value: '#333333',
|
|
// },
|
|
//
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'select-menu',
|
|
// value: 11,
|
|
// options: [
|
|
// { value: 9, name: '9 px' },
|
|
// { value: 10, name: '10 px' },
|
|
// { value: 11, name: '11 px' },
|
|
// { value: 12, name: '12 px' },
|
|
// { value: 13, name: '13 px' },
|
|
// { value: 14, name: '14 px' },
|
|
// { value: 16, name: '16 px' },
|
|
// { value: 18, name: '18 px' },
|
|
// { value: 20, name: '20 px' },
|
|
// { value: 24, name: '24 px' },
|
|
// { value: 28, name: '28 px' },
|
|
// { value: 32, name: '32 px' },
|
|
// { value: 40, name: '40 px' },
|
|
// { value: 48, name: '48 px' },
|
|
// { value: 56, name: '56 px' },
|
|
// { value: 64, name: '64 px' },
|
|
// { value: 72, name: '72 px' },
|
|
// { value: 80, name: '80 px' },
|
|
// { value: 88, name: '88 px' },
|
|
// { value: 96, name: '96 px' },
|
|
// { value: 128, name: '128 px' },
|
|
// { value: 160, name: '160 px' }
|
|
// ]
|
|
// },
|
|
//
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'menu',
|
|
// icon: 'icon-layers',
|
|
// options: [
|
|
// { name: 'Move to top', class: 'icon-arrow-double-up', title: 'Move to top' },
|
|
// { name: 'Move up', class: 'icon-arrow-up', title: 'Move up' },
|
|
// { name: 'Move down', class: 'icon-arrow-down', title: 'Move down' },
|
|
// { name: 'Move to bottom', class: 'icon-arrow-double-down', title: 'Move to bottom' }
|
|
// ]
|
|
// },
|
|
//
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'button',
|
|
// icon: 'icon-gear'
|
|
// },
|
|
//
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'input',
|
|
// type: 'number',
|
|
// label: 'X',
|
|
// value: 1,
|
|
// title: 'X position'
|
|
// },
|
|
// {
|
|
// control: 'input',
|
|
// type: 'number',
|
|
// label: 'Y',
|
|
// value: 2,
|
|
// title: 'Y position'
|
|
// },
|
|
// {
|
|
// control: 'input',
|
|
// type: 'number',
|
|
// label: 'W',
|
|
// value: 3,
|
|
// title: 'Width'
|
|
// },
|
|
// {
|
|
// control: 'input',
|
|
// type: 'number',
|
|
// label: 'H',
|
|
// value: 4,
|
|
// title: 'Height'
|
|
// },
|
|
//
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'button',
|
|
// icon: 'icon-trash',
|
|
// label: 'delete',
|
|
// modifier: 'caution'
|
|
// },
|
|
//
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'checkbox',
|
|
// name: 'this is a checkbox',
|
|
// },
|
|
// {
|
|
// control: 'separator'
|
|
// },
|
|
// {
|
|
// control: 'toggle-button',
|
|
// title: 'Toggle Frame',
|
|
// property: 'hideFrame',
|
|
// value: false,
|
|
// options: [
|
|
// {
|
|
// value: true,
|
|
// icon: 'icon-frame-hide'
|
|
// },
|
|
// {
|
|
// value: false,
|
|
// icon: 'icon-frame-show'
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// control: 'toggle-button',
|
|
// title: 'Snap to grid',
|
|
// property: 'snapToGrid',
|
|
// value: true,
|
|
// options: [
|
|
// {
|
|
// value: true,
|
|
// icon: 'icon-grid-snap-to'
|
|
// },
|
|
// {
|
|
// value: false,
|
|
// icon: 'icon-grid-snap-no'
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// control: 'toggle-button',
|
|
// title: 'Toggle label',
|
|
// property: 'showLabel',
|
|
// value: true,
|
|
// options: [
|
|
// {
|
|
// value: true,
|
|
// icon: 'icon-two-parts-both'
|
|
// },
|
|
// {
|
|
// value: false,
|
|
// icon: 'icon-two-parts-one-only'
|
|
// }
|
|
// ]
|
|
// }
|
|
// ];
|
|
// }
|
|
// });
|
|
|
|
</script>
|
|
</html>
|