mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 09:26:45 +00:00
35d1b894e2
* first cut, working for objects with explicit height * working for all objects by setting min-height explicitly to 70vh * add composition listeners * Tabs view WIP - Markup and CSS BEMized; - Stubbed in type icon in tab elements; - TODO: refine styling on tabs; * Tabs view WIP - Layout enhancements; * add types and header * remove static icon-layout class * move Tabs into its own plugin folder: * simplify on composition add listener callback * fix icon rendering * add document dragstart and dragend listeners, with v-if div for drop target * remove third argument from document listeners, move drop target to tab container * Sanding and shimming on Tabs View - WIP * Tabs View styling - Shippable to Deep; - Added new c-drop-hint element in _controls.scss; - Added new theme constants; - Added 'empty' tabs view message; - TODOs: add listener for dragover event for is-mouse-over styling, integrate forthcoming changes to symbolsfont; * add is-mouse-over class when drag enters dropHint div, add and remove listeners * .c-drop-hint styling refined - Refined hover effects; - Bg icon instead of glyph character; - TODOs: Change $bg-icon to plus sign; * fix bug regarding persisting drop-hint styling even after drop is ended
284 lines
12 KiB
HTML
284 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.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>
|