mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 21:27:52 +00:00
Squashed commit of the following:
commit5aad2e6863Author: charlesh88 <charlesh88@gmail.com> Date: Thu Aug 30 14:34:44 2018 -0700 Code trimming / cleanup - pane tweaks; commit139e5ab184Author: charlesh88 <charlesh88@gmail.com> Date: Thu Aug 30 13:50:26 2018 -0700 Code trimming / cleanup - pane tweaks; commite3bb387139Author: charlesh88 <charlesh88@gmail.com> Date: Thu Aug 30 13:38:35 2018 -0700 Code trimming / cleanup - pane, Layout; commit6edaea0889Author: charlesh88 <charlesh88@gmail.com> Date: Thu Aug 30 12:57:21 2018 -0700 Collapse button new design and styling WIP - Also begin code cleanups; commitbd8fab3726Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 29 18:04:47 2018 -0700 Vertical pane resizing fixed - Vertical pane styling with significant fixes; commitcf89e8a86fAuthor: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 29 16:52:53 2018 -0700 Vertical pane resizing fixed - Vertical pane styling with significant fixes; commitb3ad4c4c14Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 29 15:58:12 2018 -0700 Vertical pane resizing fixed! Kind of... - pane__contents at 100% height is causing problems, fix this. - Normalized scss var names $splitterBtn*; - Added --reacts to pane to allow setting of proper flex attribs; commit49cead8cc6Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 28 19:07:23 2018 -0700 WIP fixing vertical pane drag problem, still broken - Converting from flex-basis back to width / height; - Make inspector-adapter target proper holder; - Added --resizing class to allow user-select: none while dragging; - Added mixins for browser prefixing; commitc6ff381cf0Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 28 14:56:50 2018 -0700 New design for pane collapse buttons - Pane padding normalized; commit7cfbfe3d96Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 28 10:27:05 2018 -0700 CSS sanding, panes and Inspector - Pane padding; - Inspector min-width; commit7d7eeff462Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 28 10:01:02 2018 -0700 Pane transitions - Fixed pane transitions; commitcf160c27e9Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 28 09:09:49 2018 -0700 Splitter styling WIP - Hover styling commit022126ca21Author: charlesh88 <charlesh88@gmail.com> Date: Mon Aug 27 21:18:14 2018 -0700 Tree styling WIP - Mobile styling; - Increased hit area for desktop and mobile on tree item; - Added button mixin; - Fixed scrolling for tree in tree pane; commit3f1e649526Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 24 14:47:22 2018 -0700 Drag collapse WIP commitf9b764bb64Author: charlesh88 <charlesh88@gmail.com> Date: Thu Aug 23 16:02:02 2018 -0700 Significant changes to splitter handle and button approach - WIP!; - WIP on drag to collapse; commita1d9c11e82Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 22 17:55:21 2018 -0700 Pane refactor styles WIP - WIP converting from width/height to flex-basis; commitb65cca277eAuthor: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 22 17:54:34 2018 -0700 Pane refactor styles WIP - WIP converting from width/height to flex-basis; commit3e71204529Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 22 17:51:07 2018 -0700 Pane refactor styles WIP - Pane transitions; - TODO: convert from width/height to flex-basis; commitb070cc27f4Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 22 10:21:14 2018 -0700 Mobile styles WIP - Mobile layout mostly done; - Pane transitions; commit2ee7a77a86Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 21 15:56:12 2018 -0700 Refinements to view control in tree - Changed state eval to use 'enabled', removed v-if; commit3a2439cd16Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 21 15:53:34 2018 -0700 Mobile styles, VERY WIP WARNING: DON'T PULL!! - Mobile in progress; commit4e0dcb68bfAuthor: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 21 11:45:22 2018 -0700 Markup / scss refactor mobile styles WIP - Layout, panes mobile styling WIP commit02afd44dd1Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 21 11:44:05 2018 -0700 Markup / scss refactor styles WIP - Moved glyph constants into _constants to avoid multiple loads of glyph classes; commit703abe36c9Author: Pete Richards <peter.l.richards@nasa.gov> Date: Mon Aug 20 13:20:58 2018 -0700 tree loads composition Expose legacy types in new API tree navigation commit80a185440bMerge:93196379a8378dfa61Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 18:00:04 2018 -0700 Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap commit93196379aaAuthor: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 17:59:43 2018 -0700 Pane padding WIP - Adding resize handle direction to l-pane element; commitbea135a221Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 17:48:20 2018 -0700 Inspector styling - Moved legacy CSS as needed into MctInspector component; commit8378dfa613Author: Pete Richards <peter.l.richards@nasa.gov> Date: Fri Aug 17 17:31:12 2018 -0700 Recursive tree items commite4420c17c6Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 17:02:20 2018 -0700 Sanding and shimming on legacy CSS - Jury-rigging to temporarily display some views: imagery, tables - Code style normalization in _global.scss; commit5aa2be9761Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 16:22:54 2018 -0700 Bring in legacy CSS - Legacy styles from old _global.scss moved into section of new _global file; - Most UI elements are working - TODO: fix Inspector grid commit8d4734ef5bAuthor: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 15:17:22 2018 -0700 Remove commented CSS commite641aa6949Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 14:37:13 2018 -0700 Main container and scroll-bar styling commitc3262de1b7Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 14:14:01 2018 -0700 Add status bar commit8addfb886eMerge:e6be02fb84203dbf8eAuthor: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 13:52:11 2018 -0700 Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap commite6be02fb8dAuthor: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 13:51:53 2018 -0700 Splitter refinements / mixin fix - Splitter with resize grippy; - Fixed @background-image mixins; commit4203dbf8e1Author: Pete Richards <peter.l.richards@nasa.gov> Date: Fri Aug 17 13:46:38 2018 -0700 Replace angular route with custom router commit5a07f0d2b5Merge:e6b22cbcb63f22c3f2Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 09:39:45 2018 -0700 Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap commite6b22cbcbeAuthor: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 17 09:39:33 2018 -0700 Markup / scss refactor WIP - Significant reorg of splitter CSS to reduce specificity; - Splitter enhancements for collapsed state; commit63f22c3f21Author: Pete Richards <peter.l.richards@nasa.gov> Date: Fri Aug 17 09:32:29 2018 -0700 remove extraneous files commit17cf0cf1e6Author: Pete Richards <peter.l.richards@nasa.gov> Date: Thu Aug 16 12:43:10 2018 -0700 Render main and inspector using angular commit233c17e75bAuthor: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 18:05:44 2018 -0700 Markup / scss refactor WIP - Scroll on tree; - Class renaming pane > l-pane; - Refinements to collapsed state, WIP commit1eaa568e04Merge:82dd8e22e3957fd619Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 17:28:45 2018 -0700 Markup / scss refactor WIP - Merge latest from Pete commit82dd8e22e7Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 17:26:45 2018 -0700 Markup / scss refactor WIP - Inspector styling - very WIP! commit3957fd619aAuthor: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 15 16:47:48 2018 -0700 Tidy pane js commit91eefbfa7bAuthor: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 15 16:44:02 2018 -0700 Pane cleanup commit5deff887fcAuthor: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 16:25:35 2018 -0700 Markup / scss refactor WIP - Added disabled property to viewControl; - Margin for elements in main panes; - Main search input styled for --major; commit6708c79754Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 14:34:54 2018 -0700 Markup / scss refactor WIP - Fix modifiers to correctly use '--'; - Fix icon element in search input to disallow shrinking; commit7c83db11adMerge:e24852bb843f978e18Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 13:58:43 2018 -0700 Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap commite24852bb83Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 13:57:27 2018 -0700 Markup / scss refactor WIP - Tree item styling commit43f978e185Author: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 15 13:52:34 2018 -0700 Use multipane instead of splitter commitf67f03af47Author: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 15 12:43:32 2018 -0700 new multipane commitf6b90caaffAuthor: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 10:41:46 2018 -0700 Markup / scss refactor WIP - Added view-control component commit4c5baf183aAuthor: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 15 10:38:26 2018 -0700 Markup / scss refactor WIP - Added sass-base.scss to make it easier for SFC's to include needed SASS vars, mixins, etc. with a single import; - Cleaned up indention in Layout.vue; commitb2d12f95eeAuthor: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 14 23:24:45 2018 -0700 Markup / scss refactor WIP - Fix transition of magnify glass icon commit4449994ca4Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 14 17:31:47 2018 -0700 Markup / scss refactor WIP - Added code comments commit84fde4bd34Author: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 14 17:29:50 2018 -0700 Markup / scss refactor WIP - Search input dynamic behavior commit9424f9f49eAuthor: charlesh88 <charlesh88@gmail.com> Date: Tue Aug 14 11:28:25 2018 -0700 Markup / scss refactor WIP - Search input styling and dynamics WIP; commitdfc02cdf25Author: charlesh88 <charlesh88@gmail.com> Date: Mon Aug 13 15:34:29 2018 -0700 Markup / scss refactor WIP - Add input-related styling; - Cleanup scss in various files; - Move search into own component; - Refine padding approach in pane-tree; commit94a3e9e798Author: charlesh88 <charlesh88@gmail.com> Date: Mon Aug 13 14:36:41 2018 -0700 Markup / scss refactor WIP - Add collapse buttons to splitter; commitd35aed2d62Author: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 10 18:45:37 2018 -0700 Markup / scss refactor WIP - Add some initial theme files; pull back from theme "override" approach; - Splitters refined; - Style cleanups; commit32cdecebceAuthor: charlesh88 <charlesh88@gmail.com> Date: Fri Aug 10 14:53:16 2018 -0700 Markup / scss refactor WIP - Markup and components corrected; - Stubbed in snow theme file; commitf811318d18Author: charlesh88 <charlesh88@gmail.com> Date: Thu Aug 9 16:02:22 2018 -0700 Markup / scss refactor WIP - Add normalize.min to styles-new; - Factor components to be more standalone, very WIP; commit4d9b7fe3e4Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 8 18:06:11 2018 -0700 Markup / scss refactor WIP - Add timestamp to webpack build commitdd93653306Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 8 18:03:00 2018 -0700 Markup / scss refactor WIP - Use MctTree component with passed properties; - MctTree markup and CSS ported from codepen; commit84430d34b1Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 8 17:39:26 2018 -0700 Markup / scss refactor WIP - Add new splitter component with passed properties; commit50be483421Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 8 16:04:41 2018 -0700 Markup / scss refactor WIP - Mixins file added; - Markup and -shell CSS from codepen brought over; commitfe2667285eMerge:c7bd7d97d5219f5394Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 8 15:15:21 2018 -0700 Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap commit5219f5394eAuthor: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 8 15:13:28 2018 -0700 Add alias for styles directory commitc7bd7d97dcMerge:0a7c16031ab18bb348Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 8 13:55:44 2018 -0700 Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap commitab18bb3484Author: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 8 13:48:27 2018 -0700 Revert "temporarily use file loader for live-reload via plugin" This reverts commit2f54f404c2. commit9c0d5f7dbfAuthor: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 8 13:48:17 2018 -0700 Enable HMR in dev server commit0a7c160315Author: charlesh88 <charlesh88@gmail.com> Date: Wed Aug 8 11:26:03 2018 -0700 Markup / scss refactor WIP - Symbol fonts and glyphs files; - Constants, global, etc. in progress; commit0fa09e31a6Author: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 8 10:30:11 2018 -0700 WIP new styles commit2f54f404c2Author: Pete Richards <peter.l.richards@nasa.gov> Date: Wed Aug 8 10:29:23 2018 -0700 temporarily use file loader for live-reload via plugin commit279e0bf29dAuthor: Pete Richards <peter.l.richards@nasa.gov> Date: Tue Aug 7 14:59:04 2018 -0700 Beginning of new layout code. Really basic 5 component setup.
This commit is contained in:
Pete Richards
parent
78c731dbf7
commit
1bb1330cba
23
app.js
23
app.js
@ -42,15 +42,30 @@ app.use('/proxyUrl', function proxyRequest(req, res, next) {
|
||||
|
||||
const webpack = require('webpack');
|
||||
const webpackConfig = require('./webpack.config.js');
|
||||
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
|
||||
webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
|
||||
|
||||
webpackConfig.entry.openmct = [
|
||||
'webpack-hot-middleware/client',
|
||||
webpackConfig.entry.openmct
|
||||
];
|
||||
|
||||
const compiler = webpack(webpackConfig);
|
||||
const webpackDevRoute = require('webpack-dev-middleware')(
|
||||
compiler, {
|
||||
|
||||
app.use(require('webpack-dev-middleware')(
|
||||
compiler,
|
||||
{
|
||||
publicPath: '/dist',
|
||||
logLevel: 'warn'
|
||||
}
|
||||
);
|
||||
));
|
||||
|
||||
app.use(webpackDevRoute);
|
||||
app.use(require('webpack-hot-middleware')(
|
||||
compiler,
|
||||
{
|
||||
|
||||
}
|
||||
));
|
||||
|
||||
// Expose index.html for development users.
|
||||
app.get('/', function (req, res) {
|
||||
|
||||
@ -34,9 +34,6 @@
|
||||
<link rel="shortcut icon" href="dist/favicons/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div class="l-splash-holder s-splash-holder">
|
||||
<div class="l-splash s-splash"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
var THIRTY_MINUTES = 30 * 60 * 1000;
|
||||
@ -48,7 +45,6 @@
|
||||
);
|
||||
openmct.install(openmct.plugins.MyItems());
|
||||
openmct.install(openmct.plugins.LocalStorage());
|
||||
openmct.install(openmct.plugins.Espresso());
|
||||
openmct.install(openmct.plugins.Generator());
|
||||
openmct.install(openmct.plugins.ExampleImagery());
|
||||
openmct.install(openmct.plugins.UTCTimeSystem());
|
||||
|
||||
16
openmct.js
16
openmct.js
@ -29,23 +29,9 @@ if (document.currentScript) {
|
||||
__webpack_public_path__ = src.replace(matcher, '') + '/';
|
||||
}
|
||||
}
|
||||
const Main = require('./platform/framework/src/Main');
|
||||
const defaultRegistry = require('./src/defaultRegistry');
|
||||
|
||||
const MCT = require('./src/MCT');
|
||||
const buildInfo = require('./src/plugins/buildInfo/plugin');
|
||||
|
||||
var openmct = new MCT();
|
||||
|
||||
openmct.legacyRegistry = defaultRegistry;
|
||||
openmct.install(openmct.plugins.Plot());
|
||||
openmct.install(openmct.plugins.TelemetryTable());
|
||||
|
||||
if (typeof BUILD_CONSTANTS !== 'undefined') {
|
||||
openmct.install(buildInfo(BUILD_CONSTANTS));
|
||||
}
|
||||
|
||||
openmct.on('start', function () {
|
||||
return new Main().run(defaultRegistry);
|
||||
});
|
||||
|
||||
module.exports = openmct;
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
"karma-html-reporter": "^0.2.7",
|
||||
"karma-jasmine": "^1.1.2",
|
||||
"karma-webpack": "^3.0.0",
|
||||
"location-bar": "^3.0.1",
|
||||
"lodash": "^3.10.1",
|
||||
"markdown-toc": "^0.11.7",
|
||||
"marked": "^0.3.5",
|
||||
@ -67,6 +68,7 @@
|
||||
"webpack": "^4.16.2",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-dev-middleware": "^3.1.3",
|
||||
"webpack-hot-middleware": "^2.22.3",
|
||||
"zepto": "^1.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -73,15 +73,6 @@ define([
|
||||
legacyRegistry.register("platform/commonUI/browse", {
|
||||
"extensions": {
|
||||
"routes": [
|
||||
{
|
||||
"when": "/browse/:ids*?",
|
||||
"template": browseTemplate,
|
||||
"reloadOnSearch": false
|
||||
},
|
||||
{
|
||||
"when": "",
|
||||
"redirectTo": "/browse/"
|
||||
}
|
||||
],
|
||||
"constants": [
|
||||
{
|
||||
@ -295,6 +286,20 @@ define([
|
||||
]
|
||||
}
|
||||
],
|
||||
"templates": [
|
||||
{
|
||||
key: "browseRoot",
|
||||
template: browseTemplate
|
||||
},
|
||||
{
|
||||
key: "browseObject",
|
||||
template: browseObjectTemplate
|
||||
},
|
||||
{
|
||||
key: "inspectorRegion",
|
||||
template: inspectorRegionTemplate
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"name": "screenfull.js",
|
||||
|
||||
@ -47,6 +47,7 @@ define(
|
||||
urlService,
|
||||
defaultPath
|
||||
) {
|
||||
window.browseScope = $scope;
|
||||
var initialPath = ($route.current.params.ids || defaultPath).split("/"),
|
||||
currentIds;
|
||||
|
||||
|
||||
@ -55,16 +55,16 @@ define(
|
||||
navigatedObject = this.navigationService.getNavigation(),
|
||||
actionMetadata = action.getMetadata ? action.getMetadata() : {};
|
||||
|
||||
if (navigatedObject.hasCapability("editor") && navigatedObject.getCapability("editor").isEditContextRoot()) {
|
||||
// if (navigatedObject.hasCapability("editor") && navigatedObject.getCapability("editor").isEditContextRoot()) {
|
||||
if (selectedObject.hasCapability("editor") && selectedObject.getCapability("editor").inEditContext()) {
|
||||
return this.editModeBlacklist.indexOf(actionMetadata.key) === -1;
|
||||
} else {
|
||||
//Target is in the context menu
|
||||
return this.nonEditContextBlacklist.indexOf(actionMetadata.key) === -1;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
// } else {
|
||||
// return true;
|
||||
// }
|
||||
};
|
||||
|
||||
return EditContextualActionPolicy;
|
||||
|
||||
@ -45,15 +45,27 @@ define(
|
||||
|
||||
// Link; install event handlers.
|
||||
function link(scope, element, attrs) {
|
||||
var removeSelectable = openmct.selection.selectable(
|
||||
element[0],
|
||||
scope.$eval(attrs.mctSelectable),
|
||||
attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
|
||||
);
|
||||
|
||||
var isDestroyed = false;
|
||||
scope.$on("$destroy", function () {
|
||||
removeSelectable();
|
||||
isDestroyed = true;
|
||||
});
|
||||
|
||||
openmct.$injector.get('$timeout')(function () {
|
||||
if (isDestroyed) {
|
||||
return;
|
||||
}
|
||||
var removeSelectable = openmct.selection.selectable(
|
||||
element[0],
|
||||
scope.$eval(attrs.mctSelectable),
|
||||
attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
|
||||
);
|
||||
|
||||
scope.$on("$destroy", function () {
|
||||
removeSelectable();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -76,7 +76,7 @@ define(
|
||||
* @returns a domain object
|
||||
*/
|
||||
InspectorController.prototype.selectedItem = function () {
|
||||
return this.$scope.selection[0].context.oldItem;
|
||||
return this.$scope.selection[0] && this.$scope.selection[0].context.oldItem;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -93,7 +93,7 @@ define([
|
||||
|
||||
// Initialize the application
|
||||
$log.info("Initializing application.");
|
||||
initializer.runApplication();
|
||||
return initializer.runApplication();
|
||||
};
|
||||
|
||||
return FrameworkLayer;
|
||||
|
||||
@ -52,10 +52,7 @@ define(
|
||||
return match ? match[1] : "";
|
||||
}
|
||||
|
||||
|
||||
// Reconfigure base url, since bundle paths will all be relative
|
||||
// to the root now.
|
||||
injector.instantiate(['$http', '$log', FrameworkLayer])
|
||||
return injector.instantiate(['$http', '$log', FrameworkLayer])
|
||||
.initializeApplication(angular, legacyRegistry, logLevel());
|
||||
};
|
||||
|
||||
|
||||
@ -55,9 +55,12 @@ define(
|
||||
var angular = this.angular,
|
||||
document = this.document,
|
||||
$log = this.$log;
|
||||
$log.info("Bootstrapping application " + (app || {}).name);
|
||||
angular.element(document).ready(function () {
|
||||
angular.bootstrap(document, [app.name], { strictDi: true });
|
||||
return new Promise(function (resolve, reject) {
|
||||
$log.info("Bootstrapping application " + (app || {}).name);
|
||||
angular.element(document).ready(function () {
|
||||
angular.bootstrap(document, [app.name], { strictDi: true });
|
||||
resolve(angular);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -44,6 +44,7 @@ define(function () {
|
||||
function SearchController($scope, searchService) {
|
||||
var controller = this;
|
||||
this.$scope = $scope;
|
||||
this.$scope.ngModel = this.$scope.ngModel || {};
|
||||
this.searchService = searchService;
|
||||
this.numberToDisplay = this.RESULTS_PER_PAGE;
|
||||
this.availabileResults = 0;
|
||||
|
||||
78
src/MCT.js
78
src/MCT.js
@ -24,28 +24,42 @@ define([
|
||||
'EventEmitter',
|
||||
'legacyRegistry',
|
||||
'uuid',
|
||||
'./defaultRegistry',
|
||||
'./api/api',
|
||||
'./selection/Selection',
|
||||
'./api/objects/object-utils',
|
||||
'./plugins/plugins',
|
||||
'./ui/ViewRegistry',
|
||||
'./ui/InspectorViewRegistry',
|
||||
'./ui/ToolbarRegistry',
|
||||
'./adapter/indicators/legacy-indicators-plugin',
|
||||
'./styles/core.scss'
|
||||
'./plugins/buildInfo/plugin',
|
||||
'./adapter/vue-adapter/install',
|
||||
'./ui/registries/ViewRegistry',
|
||||
'./ui/registries/InspectorViewRegistry',
|
||||
'./ui/registries/ToolbarRegistry',
|
||||
'./ui/router/ApplicationRouter',
|
||||
'../platform/framework/src/Main',
|
||||
'./styles-new/core.scss',
|
||||
'./ui/components/layout/Layout.vue',
|
||||
'vue'
|
||||
], function (
|
||||
EventEmitter,
|
||||
legacyRegistry,
|
||||
uuid,
|
||||
defaultRegistry,
|
||||
api,
|
||||
Selection,
|
||||
objectUtils,
|
||||
plugins,
|
||||
LegacyIndicatorsPlugin,
|
||||
buildInfoPlugin,
|
||||
installVueAdapter,
|
||||
ViewRegistry,
|
||||
InspectorViewRegistry,
|
||||
ToolbarRegistry,
|
||||
LegacyIndicatorsPlugin,
|
||||
coreStyles
|
||||
ApplicationRouter,
|
||||
Main,
|
||||
coreStyles,
|
||||
Layout,
|
||||
Vue
|
||||
) {
|
||||
/**
|
||||
* Open MCT is an extensible web application for building mission
|
||||
@ -207,6 +221,14 @@ define([
|
||||
|
||||
this.Dialog = api.Dialog;
|
||||
|
||||
this.legacyRegistry = defaultRegistry;
|
||||
this.install(this.plugins.Plot());
|
||||
this.install(this.plugins.TelemetryTable());
|
||||
|
||||
if (typeof BUILD_CONSTANTS !== 'undefined') {
|
||||
this.install(buildInfoPlugin(BUILD_CONSTANTS));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MCT.prototype = Object.create(EventEmitter.prototype);
|
||||
@ -245,11 +267,6 @@ define([
|
||||
domElement = document.body;
|
||||
}
|
||||
|
||||
var appDiv = document.createElement('div');
|
||||
appDiv.setAttribute('ng-view', '');
|
||||
appDiv.className = 'user-environ';
|
||||
domElement.appendChild(appDiv);
|
||||
|
||||
this.legacyExtension('runs', {
|
||||
depends: ['navigationService'],
|
||||
implementation: function (navigationService) {
|
||||
@ -265,6 +282,14 @@ define([
|
||||
this.legacyExtension('types', legacyDefinition);
|
||||
}.bind(this));
|
||||
|
||||
// TODO: move this to adapter bundle.
|
||||
this.legacyExtension('runs', {
|
||||
depends: ['types[]'],
|
||||
implementation: (types) => {
|
||||
this.types.importLegacyTypes(types);
|
||||
}
|
||||
});
|
||||
|
||||
this.objectViews.getAllProviders().forEach(function (p) {
|
||||
this.legacyExtension('views', {
|
||||
key: p.key,
|
||||
@ -282,15 +307,42 @@ define([
|
||||
|
||||
this.install(LegacyIndicatorsPlugin());
|
||||
|
||||
this.router = new ApplicationRouter();
|
||||
|
||||
this.router.route(/^\/$/, () => {
|
||||
this.router.setPath('/browse/mine');
|
||||
});
|
||||
|
||||
/**
|
||||
* Fired by [MCT]{@link module:openmct.MCT} when the application
|
||||
* is started.
|
||||
* @event start
|
||||
* @memberof module:openmct.MCT~
|
||||
*/
|
||||
this.emit('start');
|
||||
};
|
||||
var startPromise = new Main().run(this.legacyRegistry)
|
||||
.then(function (angular) {
|
||||
this.$angular = angular;
|
||||
// OpenMCT Object provider doesn't operate properly unless
|
||||
// something has depended upon objectService. Cool, right?
|
||||
this.$injector.get('objectService');
|
||||
|
||||
console.log('Rendering app layout.');
|
||||
|
||||
var appLayout = new Vue({
|
||||
mixins: [Layout.default],
|
||||
provide: {
|
||||
openmct: this
|
||||
}
|
||||
});
|
||||
domElement.appendChild(appLayout.$mount().$el);
|
||||
|
||||
console.log('Attaching adapter');
|
||||
installVueAdapter(appLayout, this);
|
||||
|
||||
this.router.start();
|
||||
this.emit('start');
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
/**
|
||||
* Install a plugin in MCT.
|
||||
|
||||
41
src/adapter/vue-adapter/inspector-adapter.js
Normal file
41
src/adapter/vue-adapter/inspector-adapter.js
Normal file
@ -0,0 +1,41 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
class InspectorAdapter {
|
||||
constructor(layout, openmct) {
|
||||
console.log('installing inspector adapter');
|
||||
|
||||
this.openmct = openmct;
|
||||
this.layout = layout;
|
||||
this.$injector = openmct.$injector;
|
||||
this.angular = openmct.$angular;
|
||||
|
||||
this.objectService = this.$injector.get('objectService');
|
||||
this.templateLinker = this.$injector.get('templateLinker');
|
||||
this.$timeout = this.$injector.get('$timeout');
|
||||
|
||||
this.templateMap = {};
|
||||
this.$injector.get('templates[]').forEach((t) => {
|
||||
this.templateMap[t.key] = this.templateMap[t.key] || t;
|
||||
});
|
||||
|
||||
var $rootScope = this.$injector.get('$rootScope');
|
||||
this.scope = $rootScope.$new();
|
||||
|
||||
this.templateLinker.link(
|
||||
this.scope,
|
||||
angular.element(layout.$refs.inspector.$refs.properties),
|
||||
this.templateMap["inspectorRegion"]
|
||||
);
|
||||
this.$timeout(function () {
|
||||
//hello!
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return InspectorAdapter;
|
||||
|
||||
});
|
||||
16
src/adapter/vue-adapter/install.js
Normal file
16
src/adapter/vue-adapter/install.js
Normal file
@ -0,0 +1,16 @@
|
||||
define([
|
||||
'./main-adapter',
|
||||
'./tree-adapter',
|
||||
'./inspector-adapter'
|
||||
], function (
|
||||
MainAdapter,
|
||||
TreeAdapter,
|
||||
InspectorAdapter
|
||||
) {
|
||||
|
||||
return function install(layout, openmct) {
|
||||
let main = new MainAdapter(layout, openmct);
|
||||
let tree = new TreeAdapter(layout, openmct);
|
||||
let inspector = new InspectorAdapter(layout, openmct);
|
||||
}
|
||||
});
|
||||
153
src/adapter/vue-adapter/main-adapter.js
Normal file
153
src/adapter/vue-adapter/main-adapter.js
Normal file
@ -0,0 +1,153 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
// Find an object in an array of objects.
|
||||
function findObject(domainObjects, id) {
|
||||
var i;
|
||||
for (i = 0; i < domainObjects.length; i += 1) {
|
||||
if (domainObjects[i].getId() === id) {
|
||||
return domainObjects[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// recursively locate and return an object inside of a container
|
||||
// via a path. If at any point in the recursion it fails to find
|
||||
// the next object, it will return the parent.
|
||||
function findViaComposition(containerObject, path) {
|
||||
var nextId = path.shift();
|
||||
if (!nextId) {
|
||||
return containerObject;
|
||||
}
|
||||
return containerObject.useCapability('composition')
|
||||
.then(function (composees) {
|
||||
var nextObject = findObject(composees, nextId);
|
||||
if (!nextObject) {
|
||||
return containerObject;
|
||||
}
|
||||
if (!nextObject.hasCapability('composition')) {
|
||||
return nextObject;
|
||||
}
|
||||
return findViaComposition(nextObject, path);
|
||||
});
|
||||
}
|
||||
|
||||
function getLastChildIfRoot(object) {
|
||||
if (object.getId() !== 'ROOT') {
|
||||
return object;
|
||||
}
|
||||
return object.useCapability('composition')
|
||||
.then(function (composees) {
|
||||
return composees[composees.length - 1];
|
||||
});
|
||||
}
|
||||
|
||||
function pathForObject(domainObject) {
|
||||
var context = domainObject.getCapability('context'),
|
||||
objectPath = context ? context.getPath() : [],
|
||||
ids = objectPath.map(function (domainObj) {
|
||||
return domainObj.getId();
|
||||
});
|
||||
return "/browse/" + ids.slice(1).join("/");
|
||||
}
|
||||
|
||||
class MainAdapter {
|
||||
constructor(layout, openmct) {
|
||||
this.openmct = openmct;
|
||||
this.layout = layout;
|
||||
this.$injector = openmct.$injector;
|
||||
this.angular = openmct.$angular;
|
||||
|
||||
this.objectService = this.$injector.get('objectService');
|
||||
this.templateLinker = this.$injector.get('templateLinker');
|
||||
this.navigationService = this.$injector.get('navigationService');
|
||||
this.$timeout = this.$injector.get('$timeout');
|
||||
|
||||
this.templateMap = {};
|
||||
this.$injector.get('templates[]').forEach((t) => {
|
||||
this.templateMap[t.key] = this.templateMap[t.key] || t;
|
||||
});
|
||||
|
||||
var $rootScope = this.$injector.get('$rootScope');
|
||||
this.scope = $rootScope.$new();
|
||||
this.scope.representation = {};
|
||||
|
||||
openmct.router.route(/^\/browse\/(.*)$/, (path, results) => {
|
||||
let navigatePath = results[1];
|
||||
if (!navigatePath) {
|
||||
navigatePath = 'mine';
|
||||
}
|
||||
this.navigateToPath(navigatePath);
|
||||
});
|
||||
|
||||
this.navigationService.addListener(o => this.navigateToObject(o));
|
||||
}
|
||||
|
||||
navigateToPath(path) {
|
||||
if (!Array.isArray(path)) {
|
||||
path = path.split('/');
|
||||
}
|
||||
return this.getObject('ROOT')
|
||||
.then(root => {
|
||||
return findViaComposition(root, path);
|
||||
})
|
||||
.then(getLastChildIfRoot)
|
||||
.then(object => {
|
||||
this.setMainViewObject(object);
|
||||
});
|
||||
}
|
||||
|
||||
setMainViewObject(object) {
|
||||
this.scope.domainObject = object;
|
||||
this.scope.navigatedObject = object;
|
||||
this.templateLinker.link(
|
||||
this.scope,
|
||||
angular.element(this.layout.$refs.mainContainer),
|
||||
this.templateMap["browseObject"]
|
||||
);
|
||||
document.title = object.getModel().name;
|
||||
this.scheduleDigest();
|
||||
}
|
||||
|
||||
idsForObject(domainObject) {
|
||||
return this.urlService
|
||||
.urlForLocation("", domainObject)
|
||||
.replace('/', '');
|
||||
}
|
||||
|
||||
navigateToObject(object) {
|
||||
let path = pathForObject(object);
|
||||
let views = object.useCapability('view');
|
||||
let params = this.openmct.router.getParams();
|
||||
let currentViewIsValid = views.some(v => v.key === params['view']);
|
||||
if (!currentViewIsValid) {
|
||||
this.scope.representation = {
|
||||
selected: views[0]
|
||||
}
|
||||
this.openmct.router.update(path, {
|
||||
view: views[0].key
|
||||
});
|
||||
} else {
|
||||
this.openmct.router.setPath(path);
|
||||
}
|
||||
}
|
||||
|
||||
scheduleDigest() {
|
||||
this.$timeout(function () {
|
||||
// digest done!
|
||||
});
|
||||
}
|
||||
|
||||
getObject(id) {
|
||||
return this.objectService.getObjects([id])
|
||||
.then(function (results) {
|
||||
return results[id];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return MainAdapter;
|
||||
});
|
||||
15
src/adapter/vue-adapter/tree-adapter.js
Normal file
15
src/adapter/vue-adapter/tree-adapter.js
Normal file
@ -0,0 +1,15 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
class TreeAdapter {
|
||||
constructor(layout, openmct) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return TreeAdapter;
|
||||
|
||||
});
|
||||
@ -32,6 +32,9 @@ define(function () {
|
||||
*/
|
||||
function Type(definition) {
|
||||
this.definition = definition;
|
||||
if (definition.key) {
|
||||
this.key = definition.key;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -70,5 +73,28 @@ define(function () {
|
||||
return def;
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a type definition from a legacy definition.
|
||||
*/
|
||||
Type.definitionFromLegacyDefinition = function (legacyDefinition) {
|
||||
let definition = {};
|
||||
definition.name = legacyDefinition.name;
|
||||
definition.cssClass = legacyDefinition.cssClass;
|
||||
definition.description = legacyDefinition.description;
|
||||
definition.form = legacyDefinition.properties;
|
||||
if (legacyDefinition.model) {
|
||||
definition.initialize = function (model) {
|
||||
for (let [k, v] of Object.entries(legacyDefinition.model)) {
|
||||
model[k] = JSON.parse(JSON.stringify(v));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (Array.isArray(legacyDefinition.creatable) && 'creation' in legacyDefinition.creatable) {
|
||||
definition.creatable = true;
|
||||
}
|
||||
|
||||
return definition;
|
||||
}
|
||||
|
||||
return Type;
|
||||
});
|
||||
|
||||
@ -98,6 +98,14 @@ define(['./Type'], function (Type) {
|
||||
return this.types[typeKey];
|
||||
};
|
||||
|
||||
TypeRegistry.prototype.importLegacyTypes = function (types) {
|
||||
types.filter((t) => !this.get(t.key))
|
||||
.forEach((type) => {
|
||||
let def = Type.definitionFromLegacyDefinition(type);
|
||||
this.addType(type.key, def);
|
||||
});
|
||||
}
|
||||
|
||||
return TypeRegistry;
|
||||
});
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
define([
|
||||
'./AutoflowTabularController',
|
||||
'./AutoflowTabularConstants',
|
||||
'../../ui/VueView',
|
||||
'./VueView',
|
||||
'./autoflow-tabular.html'
|
||||
], function (
|
||||
AutoflowTabularController,
|
||||
|
||||
147
src/styles-new/_constants-mobile.scss
Normal file
147
src/styles-new/_constants-mobile.scss
Normal file
@ -0,0 +1,147 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
|
||||
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobileOverlayMargin: 20px;
|
||||
$mobileMenuIconD: 34px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
$mobileTreeItemH: 35px;
|
||||
$mobileTreeItemIndent: 15px;
|
||||
$mobileTreeRightArrowW: 30px;
|
||||
|
||||
/************************** DEVICE WIDTHS */
|
||||
// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
|
||||
$phoMaxW: 767px;
|
||||
$tabMinW: 768px;
|
||||
$tabMaxW: 1024px;
|
||||
$desktopMinW: 1025px;
|
||||
|
||||
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
|
||||
$screenPortrait: "(orientation: portrait)";
|
||||
$screenLandscape: "(orientation: landscape)";
|
||||
|
||||
//$mobileDevice: "(max-device-width: #{$tabMaxW})";
|
||||
|
||||
$phoneCheck: "(max-device-width: #{$phoMaxW})";
|
||||
$tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
|
||||
$desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
|
||||
|
||||
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
|
||||
$phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
|
||||
$phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
|
||||
|
||||
$tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
|
||||
$tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
|
||||
|
||||
$desktop: "only screen and #{$desktopCheck}";
|
||||
|
||||
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
|
||||
$proporMenuOnly: 90%;
|
||||
$proporMenuWithView: 40%;
|
||||
|
||||
// Phones in any orientation
|
||||
@mixin phone {
|
||||
@media #{$phonePortrait},
|
||||
#{$phoneLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
//Phones in portrait orientation
|
||||
@mixin phonePortrait {
|
||||
@media #{$phonePortrait} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Phones in landscape orientation
|
||||
@mixin phoneLandscape {
|
||||
@media #{$phoneLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Tablets in any orientation
|
||||
@mixin tablet {
|
||||
@media #{$tabletPortrait},
|
||||
#{$tabletLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Tablets in portrait orientation
|
||||
@mixin tabletPortrait {
|
||||
@media #{$tabletPortrait} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Tablets in landscape orientation
|
||||
@mixin tabletLandscape {
|
||||
@media #{$tabletLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Phones and tablets in any orientation
|
||||
@mixin phoneandtablet {
|
||||
@media #{$phonePortrait},
|
||||
#{$phoneLandscape},
|
||||
#{$tabletPortrait},
|
||||
#{$tabletLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop monitors in any orientation
|
||||
@mixin desktopandtablet {
|
||||
// Keeping only for legacy - should not be used moving forward
|
||||
// Use body.desktop, body.tablet instead.
|
||||
@media #{$tabletPortrait},
|
||||
#{$tabletLandscape},
|
||||
#{$desktop} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop monitors in any orientation
|
||||
@mixin desktop {
|
||||
// Keeping only for legacy - should not be used moving forward
|
||||
// Use body.desktop instead.
|
||||
@media #{$desktop} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Transition used for the slide menu
|
||||
@mixin slMenuTransitions {
|
||||
@include transition-duration(.35s);
|
||||
transition-timing-function: ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
290
src/styles-new/_constants-snow.scss
Normal file
290
src/styles-new/_constants-snow.scss
Normal file
@ -0,0 +1,290 @@
|
||||
@import "constants";
|
||||
|
||||
// Mixins
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
}
|
||||
|
||||
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
// Global
|
||||
$colorBodyBg: #fcfcfc;
|
||||
$colorBodyFg: #666;
|
||||
$colorGenBg: #fff;
|
||||
$colorStatusBarBg: #000;
|
||||
$colorStatusBarFg: #999;
|
||||
$colorStatusBarFgHov: #aaa;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: #00c0f6;
|
||||
$colorEditAreaBg: #eafaff;
|
||||
$colorEditAreaFg: #4bb1c7;
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #999;
|
||||
$colorAHov: $colorKey;
|
||||
$contrastRatioPercent: 40%;
|
||||
$hoverRatioPercent: 10%;
|
||||
$basicCr: 4px;
|
||||
$controlCr: 3px;
|
||||
$smallCr: 2px;
|
||||
$overlayCr: 11px;
|
||||
$shdwTextSubtle: rgba(black, 0.2) 0 1px 2px;
|
||||
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnFgHov: $colorBtnFg;
|
||||
$colorBtnIcon: #eee;
|
||||
$colorBtnIconHov: $colorBtnFgHov;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
|
||||
$colorClickIcon: $colorKey;
|
||||
$colorClickIconHov: $colorKeyHov;
|
||||
$colorToggleIcon: rgba($colorClickIcon, 0.5);
|
||||
$colorToggleIconActive: $colorKey;
|
||||
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
|
||||
$colorInvokeMenu: #000;
|
||||
$contrastInvokeMenuPercent: 40%;
|
||||
$shdwBtns: none;
|
||||
$shdwBtnsOverlay: none;
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: pushBack($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
$timeControllerToiLineColor: $colorBodyFg;
|
||||
$timeControllerToiLineColorHov: #0052b5;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
|
||||
// Foundation Colors
|
||||
$colorAlt1: #776ba2;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#000, 0.05);
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
|
||||
$colorTick: rgba(black, 0.2);
|
||||
$colorSelectableSelectedPrimary: $colorKey;
|
||||
$colorSelectableHov: rgba($colorBodyFg, 0.4);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||
$colorMenuIc: $colorKey;
|
||||
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
|
||||
$colorMenuHovFg: $colorMenuFg;
|
||||
$colorMenuHovIc: $colorMenuIc;
|
||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||
$shdwMenuText: none;
|
||||
$colorCreateMenuLgIcon: $colorKey;
|
||||
$colorCreateMenuText: $colorBodyFg;
|
||||
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
$colorFormLines: rgba(#000, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.05);
|
||||
$colorInputBg: $colorGenBg;
|
||||
$colorInputFg: $colorBodyFg;
|
||||
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
|
||||
$colorFormText: pushBack($colorBodyFg, 10%);
|
||||
$colorInputIcon: pushBack($colorBodyFg, 25%);
|
||||
$colorFieldHint: pullForward($colorBodyFg, 40%);
|
||||
|
||||
// Inspector
|
||||
$colorInspectorBg: pullForward($colorBodyBg, 5%);
|
||||
$colorInspectorFg: $colorBodyFg;
|
||||
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
|
||||
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusBtnBg: #666;
|
||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||
$colorProgressBarAmt: #0a0;
|
||||
$progressBarHOverlay: 15px;
|
||||
$progressBarStripeW: 20px;
|
||||
$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
|
||||
$animPausedPulseDur: 1s;
|
||||
|
||||
// Indicator colors
|
||||
$colorIndicatorAvailable: $colorKey;
|
||||
$colorIndicatorDisabled: #444;
|
||||
$colorIndicatorOn: $colorOk;
|
||||
$colorIndicatorOff: #666;
|
||||
|
||||
// Selects
|
||||
$colorSelectBg: $colorBtnBg;
|
||||
$colorSelectFg: $colorBtnFg;
|
||||
|
||||
// Limits and staleness colors//
|
||||
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
||||
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
||||
$styleTelemStale: italic;
|
||||
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
|
||||
$colorLimitYellowIc: #ffaa00;
|
||||
$colorLimitRedBg: rgba(red, 0.3);
|
||||
$colorLimitRedIc: red;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleBg: $colorMenuBg;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
||||
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);//
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
||||
$durLargeViewExpand: 250ms;
|
||||
|
||||
// Items
|
||||
$colorItemBg: #ddd;
|
||||
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
|
||||
$colorItemFg: $colorBodyFg;
|
||||
$colorItemFgDetails: pushBack($colorItemFg, 15%);
|
||||
$colorItemIc: $colorKey;
|
||||
$colorItemSubIcons: $colorItemFgDetails;
|
||||
$colorItemOpenIcon: $colorItemFgDetails;
|
||||
$shdwItemText: none;
|
||||
$colorItemBgSelected: $colorKey;
|
||||
|
||||
// Tabular
|
||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
|
||||
$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBorder: $colorBodyBg;
|
||||
|
||||
// Plot
|
||||
$colorPlotBg: rgba(black, 0.05);
|
||||
$colorPlotFg: $colorBodyFg;
|
||||
$colorPlotHash: black;
|
||||
$opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: #f0f0f0; // Used
|
||||
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
||||
$colorItemTreeIcon: $colorKey; // Used
|
||||
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
|
||||
$colorItemTreeFg: $colorBodyFg;
|
||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||
$colorItemTreeSelectedFg: $colorBodyBg;
|
||||
$colorItemTreeEditingBg: #caf1ff;
|
||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||
$colorItemTreeVC: $colorBodyFg;
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
$colorThumbHoverBg: $colorItemTreeHoverBg;
|
||||
|
||||
// Scrollbar
|
||||
$scrollbarTrackSize: 7px;
|
||||
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.2);
|
||||
$scrollbarThumbColor: darken($colorBodyBg, 50%);
|
||||
$scrollbarThumbColorHov: $colorKey;
|
||||
$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
|
||||
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
|
||||
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
|
||||
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
|
||||
|
||||
// Splitter
|
||||
$splitterD: 7px;
|
||||
$splitterHandleD: 2px;
|
||||
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
|
||||
$colorSplitterBaseBg: $colorBodyBg;
|
||||
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterFg: $colorBodyBg;
|
||||
$colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
|
||||
$colorSplitterActive: $colorKey;
|
||||
$splitterBtnD: (16px, 35px);
|
||||
$splitterBtnColorBg: #eee;
|
||||
$splitterBtnColorFg: #999;
|
||||
$splitterBtnColorHoverBg: rgba($colorKey, 1);
|
||||
$splitterBtnColorHoverFg: $colorBodyBg;
|
||||
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
|
||||
$splitterShdw: none;
|
||||
$splitterEndCr: none;
|
||||
|
||||
// Minitabs
|
||||
$colorMiniTabBg: $colorSplitterBg;
|
||||
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
|
||||
$colorMiniTabBgHov: $colorSplitterHover;
|
||||
$colorMiniTabFgHov: #fff;
|
||||
|
||||
// Mobile
|
||||
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
||||
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); //pullForward($colorMobilePaneLeft, 3%);
|
||||
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
|
||||
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
|
||||
|
||||
// Datetime Picker, Calendar
|
||||
$colorCalCellHovBg: $colorKey;
|
||||
$colorCalCellHovFg: $colorKeyFg;
|
||||
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
||||
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
||||
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
|
||||
|
||||
// Palettes
|
||||
$colorPaletteFg: pullForward($colorMenuBg, 30%);
|
||||
$colorPaletteSelected: #333;
|
||||
$shdwPaletteFg: none;
|
||||
$shdwPaletteSelected: inset 0 0 0 1px #fff;
|
||||
|
||||
// About Screen
|
||||
$colorAboutLink: #84b3ff;
|
||||
|
||||
// Loading
|
||||
$colorLoadingFg: $colorAlt1;
|
||||
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
||||
|
||||
// Transitions
|
||||
$transIn: all 50ms ease-in;
|
||||
$transOut: all 250ms ease-out;
|
||||
140
src/styles-new/_constants.scss
Normal file
140
src/styles-new/_constants.scss
Normal file
@ -0,0 +1,140 @@
|
||||
/************************** PATHS */
|
||||
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
|
||||
$dirFonts: 'fonts/';
|
||||
$dirImgs: 'images/';
|
||||
|
||||
/************************** TIMINGS */
|
||||
$controlFadeMs: 100ms;
|
||||
$browseToEditAnimMs: 400ms;
|
||||
$editBorderPulseMs: 500ms;
|
||||
|
||||
/************************** SPATIAL */
|
||||
$interiorMarginSm: 3px;
|
||||
$interiorMargin: 5px;
|
||||
$interiorMarginLg: 10px;
|
||||
$inputTextPTopBtm: 2px;
|
||||
$inputTextPLeftRight: 5px;
|
||||
$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
|
||||
$treeItemIndent: 16px;
|
||||
$treeTypeIconW: 18px;
|
||||
/*************** Items */
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
|
||||
|
||||
/************************** VISUAL */
|
||||
$controlDisabledOpacity: 0.3;
|
||||
|
||||
/************************** GLYPH CHAR UNICODES */
|
||||
$glyph-icon-alert-rect: '\e900';
|
||||
$glyph-icon-alert-triangle: '\e901';
|
||||
$glyph-icon-arrow-down: '\e902';
|
||||
$glyph-icon-arrow-left: '\e903';
|
||||
$glyph-icon-arrow-right: '\e904';
|
||||
$glyph-icon-arrow-double-up: '\e905';
|
||||
$glyph-icon-arrow-tall-up: '\e906';
|
||||
$glyph-icon-arrow-tall-down: '\e907';
|
||||
$glyph-icon-arrow-double-down: '\e908';
|
||||
$glyph-icon-arrow-up: '\e909';
|
||||
$glyph-icon-asterisk: '\e910';
|
||||
$glyph-icon-bell: '\e911';
|
||||
$glyph-icon-box: '\e912';
|
||||
$glyph-icon-box-with-arrow: '\e913';
|
||||
$glyph-icon-check: '\e914';
|
||||
$glyph-icon-connectivity: '\e915';
|
||||
$glyph-icon-database-in-brackets: '\e916';
|
||||
$glyph-icon-eye-open: '\e917';
|
||||
$glyph-icon-gear: '\e918';
|
||||
$glyph-icon-hourglass: '\e919';
|
||||
$glyph-icon-info: '\e920';
|
||||
$glyph-icon-link: '\e921';
|
||||
$glyph-icon-lock: '\e922';
|
||||
$glyph-icon-minus: '\e923';
|
||||
$glyph-icon-people: '\e924';
|
||||
$glyph-icon-person: '\e925';
|
||||
$glyph-icon-plus: '\e926';
|
||||
$glyph-icon-trash: '\e927';
|
||||
$glyph-icon-x: '\e928';
|
||||
$glyph-icon-brackets: '\e929';
|
||||
$glyph-icon-crosshair: '\e930';
|
||||
$glyph-icon-grippy: '\e931';
|
||||
$glyph-icon-arrow-right-equilateral: '\e932';
|
||||
$glyph-icon-arrows-out: '\e1000';
|
||||
$glyph-icon-arrows-right-left: '\e1001';
|
||||
$glyph-icon-arrows-up-down: '\e1002';
|
||||
$glyph-icon-bullet: '\e1004';
|
||||
$glyph-icon-calendar: '\e1005';
|
||||
$glyph-icon-chain-links: '\e1006';
|
||||
$glyph-icon-collapse-pane-left: '\e1007';
|
||||
$glyph-icon-collapse-pane-right: '\e1008';
|
||||
$glyph-icon-download: '\e1009';
|
||||
$glyph-icon-duplicate: '\e1010';
|
||||
$glyph-icon-folder-new: '\e1011';
|
||||
$glyph-icon-fullscreen-collapse: '\e1012';
|
||||
$glyph-icon-fullscreen-expand: '\e1013';
|
||||
$glyph-icon-layers: '\e1014';
|
||||
$glyph-icon-line-horz: '\e1015';
|
||||
$glyph-icon-magnify: '\e1016';
|
||||
$glyph-icon-magnify-in: '\e1017';
|
||||
$glyph-icon-magnify-out: '\e1018';
|
||||
$glyph-icon-menu-hamburger: '\e1019';
|
||||
$glyph-icon-move: '\e1020';
|
||||
$glyph-icon-new-window: '\e1021';
|
||||
$glyph-icon-paint-bucket: '\e1022';
|
||||
$glyph-icon-pause: '\e1023';
|
||||
$glyph-icon-pencil: '\e1024';
|
||||
$glyph-icon-play: '\e1025';
|
||||
$glyph-icon-plot-resource: '\e1026';
|
||||
$glyph-icon-pointer-left: '\e1027';
|
||||
$glyph-icon-pointer-right: '\e1028';
|
||||
$glyph-icon-refresh: '\e1029';
|
||||
$glyph-icon-save: '\e1030';
|
||||
$glyph-icon-sine: '\e1031';
|
||||
$glyph-icon-T: '\e1032';
|
||||
$glyph-icon-thumbs-strip: '\e1033';
|
||||
$glyph-icon-two-parts-both: '\e1034';
|
||||
$glyph-icon-two-parts-one-only: '\e1035';
|
||||
$glyph-icon-resync: '\e1036';
|
||||
$glyph-icon-reset: '\e1037';
|
||||
$glyph-icon-x-in-circle: '\e1038';
|
||||
$glyph-icon-brightness: '\e1039';
|
||||
$glyph-icon-contrast: '\e1040';
|
||||
$glyph-icon-expand: '\e1041';
|
||||
$glyph-icon-list-view: '\e1042';
|
||||
$glyph-icon-grid-snap-to: '\e1043';
|
||||
$glyph-icon-grid-snap-no: '\e1044';
|
||||
$glyph-icon-frame-show: '\e1045';
|
||||
$glyph-icon-frame-hide: '\e1046';
|
||||
$glyph-icon-import: '\e1047';
|
||||
$glyph-icon-export: '\e1048';
|
||||
$glyph-icon-activity: '\e1100';
|
||||
$glyph-icon-activity-mode: '\e1101';
|
||||
$glyph-icon-autoflow-tabular: '\e1102';
|
||||
$glyph-icon-clock: '\e1103';
|
||||
$glyph-icon-database: '\e1104';
|
||||
$glyph-icon-database-query: '\e1105';
|
||||
$glyph-icon-dataset: '\e1106';
|
||||
$glyph-icon-datatable: '\e1107';
|
||||
$glyph-icon-dictionary: '\e1108';
|
||||
$glyph-icon-folder: '\e1109';
|
||||
$glyph-icon-image: '\e1110';
|
||||
$glyph-icon-layout: '\e1111';
|
||||
$glyph-icon-object: '\e1112';
|
||||
$glyph-icon-object-unknown: '\e1113';
|
||||
$glyph-icon-packet: '\e1114';
|
||||
$glyph-icon-page: '\e1115';
|
||||
$glyph-icon-plot-overlay: '\e1116';
|
||||
$glyph-icon-plot-stacked: '\e1117';
|
||||
$glyph-icon-session: '\e1118';
|
||||
$glyph-icon-tabular: '\e1119';
|
||||
$glyph-icon-tabular-lad: '\e1120';
|
||||
$glyph-icon-tabular-lad-set: '\e1121';
|
||||
$glyph-icon-tabular-realtime: '\e1122';
|
||||
$glyph-icon-tabular-scrolling: '\e1123';
|
||||
$glyph-icon-telemetry: '\e1124';
|
||||
$glyph-icon-telemetry-panel: '\e1125';
|
||||
$glyph-icon-timeline: '\e1126';
|
||||
$glyph-icon-timer: '\e1127';
|
||||
$glyph-icon-topic: '\e1128';
|
||||
$glyph-icon-box-with-dashed-lines: '\e1129';
|
||||
$glyph-icon-summary-widget: '\e1130';
|
||||
$glyph-icon-notebook: '\e1131';
|
||||
0
src/styles-new/_controls.scss
Normal file
0
src/styles-new/_controls.scss
Normal file
317
src/styles-new/_global.scss
Normal file
317
src/styles-new/_global.scss
Normal file
@ -0,0 +1,317 @@
|
||||
/************************** FONTS */
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont';
|
||||
src: url($dirFonts + 'openmct-symbols-16px.eot');
|
||||
src: url($dirFonts + 'openmct-symbols-16px.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirFonts + 'openmct-symbols-16px.woff') format('woff'),
|
||||
url($dirFonts + 'openmct-symbols-16px.ttf') format('truetype'),
|
||||
url($dirFonts + 'openmct-symbols-16px.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont-12px';
|
||||
src: url($dirFonts + 'openmct-symbols-12px.eot');
|
||||
src: url($dirFonts + 'openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirFonts + 'openmct-symbols-12px.woff') format('woff'),
|
||||
url($dirFonts + 'openmct-symbols-12px.ttf') format('truetype'),
|
||||
url($dirFonts + 'openmct-symbols-12px.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/******************************* RESETS */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/******************************* UTILITIES */
|
||||
.u-contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/******************************* BROWSER ELEMENTS */
|
||||
body.desktop {
|
||||
::-webkit-scrollbar {
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset $scrollbarTrackShdw;
|
||||
background-color: $scrollbarTrackColorBg;
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-sizing: border-box;
|
||||
background: $scrollbarThumbColor;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorHov;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay ::-webkit-scrollbar-thumb {
|
||||
background: $scrollbarThumbColorOverlay;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorOverlayHov;
|
||||
}
|
||||
}
|
||||
|
||||
.menu ::-webkit-scrollbar-thumb {
|
||||
background: $scrollbarThumbColorMenu;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorMenuHov;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $colorAHov;
|
||||
}
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
background-color: $colorBodyBg;
|
||||
color: $colorBodyFg;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=search],
|
||||
input[type=number] {
|
||||
@include nice-input();
|
||||
padding: $inputTextP;
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
font-weight: normal !important;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 120%;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/************************** LEGACY */
|
||||
|
||||
mct-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", monospace;
|
||||
font-size: 0.7em;
|
||||
line-height: 150%;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.codehilite {
|
||||
@extend .code;
|
||||
background-color: rgba($colorBodyFg, 0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.disabled,
|
||||
a.disabled {
|
||||
opacity: $controlDisabledOpacity;
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.s-status-missing {
|
||||
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
|
||||
.t-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
|
||||
.item .t-item-icon-glyph:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Object header. Expects .s-status-missing to be applied to mct-representation.object-header
|
||||
&.object-header {
|
||||
.type-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree item. Expects .s-status-missing to be applied to .tree-item,
|
||||
// and mct-representation.search-item
|
||||
&.tree-item,
|
||||
&.search-item {
|
||||
> .rep-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
// aka selection = "None". Used in palettes and their menu buttons.
|
||||
$c: red;
|
||||
$s: 48%;
|
||||
$e: 52%;
|
||||
background-image: linear-gradient(-45deg,
|
||||
transparent $s - 5%,
|
||||
$c $s,
|
||||
$c $e,
|
||||
transparent $e + 5%
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.scrolling,
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
&.scroll-pad {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll--persist {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.slidable {
|
||||
cursor: move; // Fallback
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
&.horz {
|
||||
cursor: col-resize;
|
||||
}
|
||||
&.vert {
|
||||
cursor: row-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ds {
|
||||
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden,
|
||||
.t-main-view .hide-in-t-main-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide-nice {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: rgba(#fff, 0.2);
|
||||
}
|
||||
|
||||
.comma-list span {
|
||||
&:not(:first-child) {
|
||||
&:before {
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** TEMP LEGACY FIXES */
|
||||
.t-imagery {
|
||||
display: contents;
|
||||
}
|
||||
164
src/styles-new/_glyphs.scss
Normal file
164
src/styles-new/_glyphs.scss
Normal file
@ -0,0 +1,164 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, 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.
|
||||
*****************************************************************************/
|
||||
@mixin glyphBefore($unicode, $family: 'symbolsfont') {
|
||||
&:before {
|
||||
content: $unicode;
|
||||
font-family: $family;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin glyphAfter($unicode, $family: 'symbolsfont') {
|
||||
&:after {
|
||||
content: $unicode;
|
||||
font-family: $family;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="icon-"].labeled {
|
||||
// Moved from .s-button and generalized
|
||||
&:before {
|
||||
// Fend off label from icon when it's included
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** 16 PX CLASSES */
|
||||
|
||||
.icon-alert-rect { @include glyphBefore($glyph-icon-alert-rect); }
|
||||
.icon-alert-triangle { @include glyphBefore($glyph-icon-alert-triangle); }
|
||||
.icon-arrow-down { @include glyphBefore($glyph-icon-arrow-down); }
|
||||
.icon-arrow-left { @include glyphBefore($glyph-icon-arrow-left); }
|
||||
.icon-arrow-right { @include glyphBefore($glyph-icon-arrow-right); }
|
||||
.icon-arrow-double-up { @include glyphBefore($glyph-icon-arrow-double-up); }
|
||||
.icon-arrow-tall-up { @include glyphBefore($glyph-icon-arrow-tall-up); }
|
||||
.icon-arrow-tall-down { @include glyphBefore($glyph-icon-arrow-tall-down); }
|
||||
.icon-arrow-double-down { @include glyphBefore($glyph-icon-arrow-double-down); }
|
||||
.icon-arrow-up { @include glyphBefore($glyph-icon-arrow-up); }
|
||||
.icon-asterisk { @include glyphBefore($glyph-icon-asterisk); }
|
||||
.icon-bell { @include glyphBefore($glyph-icon-bell); }
|
||||
.icon-box { @include glyphBefore($glyph-icon-box); }
|
||||
.icon-box-with-arrow { @include glyphBefore($glyph-icon-box-with-arrow); }
|
||||
.icon-check { @include glyphBefore($glyph-icon-check); }
|
||||
.icon-connectivity { @include glyphBefore($glyph-icon-connectivity); }
|
||||
.icon-database-in-brackets { @include glyphBefore($glyph-icon-database-in-brackets); }
|
||||
.icon-eye-open { @include glyphBefore($glyph-icon-eye-open); }
|
||||
.icon-gear { @include glyphBefore($glyph-icon-gear); }
|
||||
.icon-hourglass { @include glyphBefore($glyph-icon-hourglass); }
|
||||
.icon-info { @include glyphBefore($glyph-icon-info); }
|
||||
.icon-link { @include glyphBefore($glyph-icon-link); }
|
||||
.icon-lock { @include glyphBefore($glyph-icon-lock); }
|
||||
.icon-minus { @include glyphBefore($glyph-icon-minus); }
|
||||
.icon-people { @include glyphBefore($glyph-icon-people); }
|
||||
.icon-person { @include glyphBefore($glyph-icon-person); }
|
||||
.icon-plus { @include glyphBefore($glyph-icon-plus); }
|
||||
.icon-trash { @include glyphBefore($glyph-icon-trash); }
|
||||
.icon-x { @include glyphBefore($glyph-icon-x); }
|
||||
.icon-brackets { @include glyphBefore($glyph-icon-brackets); }
|
||||
.icon-crosshair { @include glyphBefore($glyph-icon-crosshair); }
|
||||
.icon-grippy { @include glyphBefore($glyph-icon-grippy); }
|
||||
.icon-arrow-right-equilateral { @include glyphBefore($glyph-icon-arrow-right-equilateral); }
|
||||
.icon-arrows-out { @include glyphBefore($glyph-icon-arrows-out); }
|
||||
.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); }
|
||||
.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); }
|
||||
.icon-bullet { @include glyphBefore($glyph-icon-bullet); }
|
||||
.icon-calendar { @include glyphBefore($glyph-icon-calendar); }
|
||||
.icon-chain-links { @include glyphBefore($glyph-icon-chain-links); }
|
||||
.icon-collapse-pane-left { @include glyphBefore($glyph-icon-collapse-pane-left); }
|
||||
.icon-collapse-pane-right { @include glyphBefore($glyph-icon-collapse-pane-right); }
|
||||
.icon-download { @include glyphBefore($glyph-icon-download); }
|
||||
.icon-duplicate { @include glyphBefore($glyph-icon-duplicate); }
|
||||
.icon-folder-new { @include glyphBefore($glyph-icon-folder-new); }
|
||||
.icon-fullscreen-collapse { @include glyphBefore($glyph-icon-fullscreen-collapse); }
|
||||
.icon-fullscreen-expand { @include glyphBefore($glyph-icon-fullscreen-expand); }
|
||||
.icon-layers { @include glyphBefore($glyph-icon-layers); }
|
||||
.icon-line-horz { @include glyphBefore($glyph-icon-line-horz); }
|
||||
.icon-magnify { @include glyphBefore($glyph-icon-magnify); }
|
||||
.icon-magnify-in { @include glyphBefore($glyph-icon-magnify-in); }
|
||||
.icon-magnify-out { @include glyphBefore($glyph-icon-magnify-out); }
|
||||
.icon-menu-hamburger { @include glyphBefore($glyph-icon-menu-hamburger); }
|
||||
.icon-move { @include glyphBefore($glyph-icon-move); }
|
||||
.icon-new-window { @include glyphBefore($glyph-icon-new-window); }
|
||||
.icon-paint-bucket { @include glyphBefore($glyph-icon-paint-bucket); }
|
||||
.icon-pause { @include glyphBefore($glyph-icon-pause); }
|
||||
.icon-pencil { @include glyphBefore($glyph-icon-pencil); }
|
||||
.icon-play { @include glyphBefore($glyph-icon-play); }
|
||||
.icon-plot-resource { @include glyphBefore($glyph-icon-plot-resource); }
|
||||
.icon-pointer-left { @include glyphBefore($glyph-icon-pointer-left); }
|
||||
.icon-pointer-right { @include glyphBefore($glyph-icon-pointer-right); }
|
||||
.icon-refresh { @include glyphBefore($glyph-icon-refresh); }
|
||||
.icon-save { @include glyphBefore($glyph-icon-save); }
|
||||
.icon-sine { @include glyphBefore($glyph-icon-sine); }
|
||||
.icon-T { @include glyphBefore($glyph-icon-T); }
|
||||
.icon-thumbs-strip { @include glyphBefore($glyph-icon-thumbs-strip); }
|
||||
.icon-two-parts-both { @include glyphBefore($glyph-icon-two-parts-both); }
|
||||
.icon-two-parts-one-only { @include glyphBefore($glyph-icon-two-parts-one-only); }
|
||||
.icon-resync { @include glyphBefore($glyph-icon-resync); }
|
||||
.icon-reset { @include glyphBefore($glyph-icon-reset); }
|
||||
.icon-x-in-circle { @include glyphBefore($glyph-icon-x-in-circle); }
|
||||
.icon-brightness { @include glyphBefore($glyph-icon-brightness); }
|
||||
.icon-contrast { @include glyphBefore($glyph-icon-contrast); }
|
||||
.icon-expand { @include glyphBefore($glyph-icon-expand); }
|
||||
.icon-list-view { @include glyphBefore($glyph-icon-list-view); }
|
||||
.icon-grid-snap-to { @include glyphBefore($glyph-icon-grid-snap-to); }
|
||||
.icon-grid-snap-no { @include glyphBefore($glyph-icon-grid-snap-no); }
|
||||
.icon-frame-show { @include glyphBefore($glyph-icon-frame-show); }
|
||||
.icon-frame-hide { @include glyphBefore($glyph-icon-frame-hide); }
|
||||
.icon-import { @include glyphBefore($glyph-icon-import); }
|
||||
.icon-export { @include glyphBefore($glyph-icon-export); }
|
||||
.icon-activity { @include glyphBefore($glyph-icon-activity); }
|
||||
.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); }
|
||||
.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); }
|
||||
.icon-clock { @include glyphBefore($glyph-icon-clock); }
|
||||
.icon-database { @include glyphBefore($glyph-icon-database); }
|
||||
.icon-database-query { @include glyphBefore($glyph-icon-database-query); }
|
||||
.icon-dataset { @include glyphBefore($glyph-icon-dataset); }
|
||||
.icon-datatable { @include glyphBefore($glyph-icon-datatable); }
|
||||
.icon-dictionary { @include glyphBefore($glyph-icon-dictionary); }
|
||||
.icon-folder { @include glyphBefore($glyph-icon-folder); }
|
||||
.icon-image { @include glyphBefore($glyph-icon-image); }
|
||||
.icon-layout { @include glyphBefore($glyph-icon-layout); }
|
||||
.icon-object { @include glyphBefore($glyph-icon-object); }
|
||||
.icon-object-unknown { @include glyphBefore($glyph-icon-object-unknown); }
|
||||
.icon-packet { @include glyphBefore($glyph-icon-packet); }
|
||||
.icon-page { @include glyphBefore($glyph-icon-page); }
|
||||
.icon-plot-overlay { @include glyphBefore($glyph-icon-plot-overlay); }
|
||||
.icon-plot-stacked { @include glyphBefore($glyph-icon-plot-stacked); }
|
||||
.icon-session { @include glyphBefore($glyph-icon-session); }
|
||||
.icon-tabular { @include glyphBefore($glyph-icon-tabular); }
|
||||
.icon-tabular-lad { @include glyphBefore($glyph-icon-tabular-lad); }
|
||||
.icon-tabular-lad-set { @include glyphBefore($glyph-icon-tabular-lad-set); }
|
||||
.icon-tabular-realtime { @include glyphBefore($glyph-icon-tabular-realtime); }
|
||||
.icon-tabular-scrolling { @include glyphBefore($glyph-icon-tabular-scrolling); }
|
||||
.icon-telemetry { @include glyphBefore($glyph-icon-telemetry); }
|
||||
.icon-telemetry-panel { @include glyphBefore($glyph-icon-telemetry-panel); }
|
||||
.icon-timeline { @include glyphBefore($glyph-icon-timeline); }
|
||||
.icon-timer { @include glyphBefore($glyph-icon-timer); }
|
||||
.icon-topic { @include glyphBefore($glyph-icon-topic); }
|
||||
.icon-box-with-dashed-lines { @include glyphBefore($glyph-icon-box-with-dashed-lines); }
|
||||
.icon-summary-widget { @include glyphBefore($glyph-icon-summary-widget); }
|
||||
.icon-notebook { @include glyphBefore($glyph-icon-notebook); }
|
||||
|
||||
/************************** 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'); }
|
||||
128
src/styles-new/_mixins.scss
Normal file
128
src/styles-new/_mixins.scss
Normal file
@ -0,0 +1,128 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************** VISUALS */
|
||||
@mixin ancillaryIcon($d, $c) {
|
||||
// Used for small icons used in combination with larger icons,
|
||||
// like the link and alert icons in tree items.
|
||||
color: $c;
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
height: $d;
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
background-image: linear-gradient(-45deg,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
transparent 50%, rgba($c, $a) 50%,
|
||||
rgba($c, $a) 75%, transparent 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
|
||||
background-image: linear-gradient($angle,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
transparent 50%, rgba($c, $a) 50%,
|
||||
rgba($c, $a) 75%, transparent 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-size: $bgsize $bgsize;
|
||||
}
|
||||
|
||||
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, rgba($c, $a) 50%,
|
||||
transparent 50%, transparent 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
/************************** TEXT */
|
||||
@mixin ellipsize() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin reverseEllipsis() {
|
||||
@include ellipsize();
|
||||
direction: rtl;
|
||||
unicode-bidi:bidi-override;
|
||||
}
|
||||
|
||||
@mixin test($c: #ffcc00, $a: 0.2) {
|
||||
background-color: rgba($c, $a) !important;
|
||||
}
|
||||
|
||||
/************************** CONTROLS, BUTTONS */
|
||||
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
|
||||
appearance: none;
|
||||
background: $bg;
|
||||
border: none;
|
||||
color: $fg;
|
||||
border-radius: $controlCr;
|
||||
box-shadow: inset $shdw;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $colorFormFieldErrorBg;
|
||||
color: $colorFormFieldErrorFg;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
border-radius: $radius;
|
||||
box-shadow: $shdw;
|
||||
}
|
||||
|
||||
/************************** MATH */
|
||||
@function percentToDecimal($p) {
|
||||
@return $p / 100%;
|
||||
}
|
||||
|
||||
@function decimalToPercent($d) {
|
||||
@return percentage($d);
|
||||
}
|
||||
|
||||
/************************** UTILITIES */
|
||||
@mixin browserPrefix($prop, $val) {
|
||||
#{$prop}: $val;
|
||||
-ms-#{$prop}: $val;
|
||||
-moz-#{$prop}: $val;
|
||||
-webkit-#{$prop}: $val;
|
||||
}
|
||||
|
||||
@mixin userSelectNone() {
|
||||
@include browserPrefix(user-select, none);
|
||||
}
|
||||
13
src/styles-new/core.scss
Normal file
13
src/styles-new/core.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "vendor/normalize.min.css";
|
||||
@import "sass-base.scss";
|
||||
|
||||
/******************** RENDERS CSS */
|
||||
@import "glyphs";
|
||||
@import "global";
|
||||
@import "controls";
|
||||
|
||||
/******************** LEGACY CSS */
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "bourbon";
|
||||
@import "legacy-styles";
|
||||
|
||||
233
src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
Normal file
233
src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
Normal file
@ -0,0 +1,233 @@
|
||||
{
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-12px",
|
||||
"lastOpened": 0,
|
||||
"created": 1527031065005
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
"selection": [
|
||||
{
|
||||
"order": 9,
|
||||
"id": 6,
|
||||
"name": "icon12-crosshair",
|
||||
"prevSize": 12,
|
||||
"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": ""
|
||||
}
|
||||
],
|
||||
"id": 0,
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-12px",
|
||||
"importSize": {
|
||||
"width": 279,
|
||||
"height": 384
|
||||
},
|
||||
"designer": "Charles Hacskaylo"
|
||||
},
|
||||
"height": 1024,
|
||||
"prevSize": 12,
|
||||
"icons": [
|
||||
{
|
||||
"id": 6,
|
||||
"paths": [
|
||||
"M597.333 0h-170.667v256h170.667v-256z",
|
||||
"M1024 426.667h-256v170.667h256v-170.667z",
|
||||
"M597.333 768h-170.667v256h170.667v-256z",
|
||||
"M256 426.667h-256v170.667h256v-170.667z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-crosshair"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"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": [
|
||||
"M938.667 170.667h-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.32l-0 341.346c0.136-47.073 38.26-85.197 85.32-85.333l853.346-0c47.073 0.136 85.197 38.26 85.333 85.32l0-170.654c-0.136-47.073-38.26-85.197-85.32-85.333z",
|
||||
"M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-folder"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{
|
||||
"f": 0
|
||||
},
|
||||
{
|
||||
"f": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"invisible": false,
|
||||
"colorThemes": [
|
||||
[
|
||||
[
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
0,
|
||||
161,
|
||||
75,
|
||||
1
|
||||
]
|
||||
]
|
||||
],
|
||||
"colorThemeIdx": 0
|
||||
}
|
||||
],
|
||||
"preferences": {
|
||||
"showGlyphs": true,
|
||||
"showCodes": true,
|
||||
"showQuickUse": true,
|
||||
"showQuickUse2": true,
|
||||
"showSVGs": true,
|
||||
"fontPref": {
|
||||
"prefix": "icon-",
|
||||
"metadata": {
|
||||
"fontFamily": "openmct-symbols-12px",
|
||||
"majorVersion": 1,
|
||||
"minorVersion": 0
|
||||
},
|
||||
"metrics": {
|
||||
"emSize": 1024,
|
||||
"baseline": 6.25,
|
||||
"whitespace": 50
|
||||
},
|
||||
"embed": false
|
||||
},
|
||||
"imagePref": {
|
||||
"prefix": "icon-",
|
||||
"png": true,
|
||||
"useClassSelector": true,
|
||||
"color": 0,
|
||||
"bgColor": 16777215
|
||||
},
|
||||
"historySize": 100,
|
||||
"gridSize": 16
|
||||
},
|
||||
"uid": -1
|
||||
}
|
||||
3760
src/styles-new/fonts/icomoon-project-openmct-symbols-16px.json
Normal file
3760
src/styles-new/fonts/icomoon-project-openmct-symbols-16px.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/styles-new/fonts/openmct-symbols-12px.eot
Executable file
BIN
src/styles-new/fonts/openmct-symbols-12px.eot
Executable file
Binary file not shown.
14
src/styles-new/fonts/openmct-symbols-12px.svg
Executable file
14
src/styles-new/fonts/openmct-symbols-12px.svg
Executable file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="openmct-symbols-12px" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/styles-new/fonts/openmct-symbols-12px.ttf
Executable file
BIN
src/styles-new/fonts/openmct-symbols-12px.ttf
Executable file
Binary file not shown.
BIN
src/styles-new/fonts/openmct-symbols-12px.woff
Executable file
BIN
src/styles-new/fonts/openmct-symbols-12px.woff
Executable file
Binary file not shown.
BIN
src/styles-new/fonts/openmct-symbols-16px.eot
Executable file
BIN
src/styles-new/fonts/openmct-symbols-16px.eot
Executable file
Binary file not shown.
123
src/styles-new/fonts/openmct-symbols-16px.svg
Executable file
123
src/styles-new/fonts/openmct-symbols-16px.svg
Executable file
@ -0,0 +1,123 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="openmct-symbols-16px" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="icon-alert-rect" d="M896 960h-768c-70.6-0.2-127.8-57.4-128-128v-768c0.2-70.6 57.4-127.8 128-128h768c70.6 0.2 127.8 57.4 128 128v768c-0.2 70.6-57.4 127.8-128 128zM576 64h-128v128h128v-128zM597.8 448l-37.8-192h-96l-37.8 192v384h171.8v-384z" />
|
||||
<glyph unicode="" glyph-name="icon-alert-triangle" d="M998.2 111.2l-422.6 739.6c-35 61.2-92 61.2-127 0l-422.8-739.6c-35-61.2-6-111.2 64.4-111.2h843.4c70.6 0 99.6 50 64.6 111.2zM576 64h-128v128h128v-128zM597.8 448l-37.8-192h-96l-37.8 192v256h171.8v-256z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-down" d="M512 192l512 512h-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-left" d="M256 448l512-512v1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-right" d="M768 448l-512 512v-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-double-up" d="M510 450l512-512h-1024zM510 962l512-512h-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-tall-up" d="M512 960l512-1024h-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-tall-down" d="M512-64l-512 1024h1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-double-down" d="M510 450l-512 512h1024zM510-62l-512 512h1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-up" d="M512 704l-512-512h1024z" />
|
||||
<glyph unicode="" glyph-name="icon-asterisk" d="M1004.166 619.542l-97.522 168.916-330.534-229.414 33.414 400.956h-195.048l33.414-400.956-330.534 229.414-97.522-168.916 363.944-171.542-363.944-171.542 97.522-168.916 330.534 229.414-33.414-400.956h195.048l-33.414 400.956 330.534-229.414 97.522 168.916-363.944 171.542z" />
|
||||
<glyph unicode="" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
|
||||
<glyph unicode="" glyph-name="icon-box" d="M0 960h1024v-1024h-1024v1024z" />
|
||||
<glyph unicode="" glyph-name="icon-box-with-arrow-cursor" d="M894 962h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 322.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
|
||||
<glyph unicode="" glyph-name="icon-check" d="M1024 960l-640-640-384 384v-384l384-384 640 640z" />
|
||||
<glyph unicode="" glyph-name="icon-connectivity" d="M704 384c0-70.4-57.6-128-128-128h-128c-70.4 0-128 57.6-128 128v128c0 70.4 57.6 128 128 128h128c70.4 0 128-57.6 128-128v-128zM1024 448l-192 320v-640zM0 448l192 320v-640z" />
|
||||
<glyph unicode="" glyph-name="icon-database-in-brackets" d="M768 608c0-53.019-114.615-96-256-96s-256 42.981-256 96c0 53.019 114.615 96 256 96s256-42.981 256-96zM768 288v256c0-53-114.6-96-256-96s-256 43-256 96v-256c0-53 114.6-96 256-96s256 43 256 96zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 128.4v639.4c0 0.2 0.2 0.2 0.4 0.4h127.6v191.8h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
|
||||
<glyph unicode="" glyph-name="icon-eye-open" d="M512 843.6c-245.8 0-452.2-168-510.8-395.6 58.6-227.4 265-395.6 510.8-395.6s452.2 168 510.8 395.6c-58.6 227.4-265 395.6-510.8 395.6zM829.2 371.6c-22.6-34.4-50.6-64.8-83-90.4-32.8-25.8-69-45.6-108-59.4-40.4-14.2-82.8-21.4-126-21.4s-85.8 7.2-126 21.4c-39 13.8-75.4 33.8-108 59.4-32.4 25.6-60.4 55.8-83 90.4-15.8 24-28.8 49.6-38.6 76.4 10 26.8 23 52.4 38.6 76.4 22.6 34.4 50.6 64.8 83 90.4 32.8 25.8 69 45.6 108 59.4 40.4 14.2 82.8 21.4 126 21.4s85.8-7.2 126-21.4c39-13.8 75.4-33.8 108-59.4 32.4-25.6 60.4-55.8 83-90.4 15.8-24 28.8-49.6 38.6-76.4-9.8-26.8-22.8-52.4-38.6-76.4zM704 448c0-106.039-85.961-192-192-192s-192 85.961-192 192c0 106.039 85.961 192 192 192s192-85.961 192-192z" />
|
||||
<glyph unicode="" glyph-name="icon-gear" d="M1024 384v128l-140.976 35.244c-8.784 32.922-21.818 64.106-38.504 92.918l74.774 124.622-90.51 90.51-124.622-74.774c-28.812 16.686-59.996 29.72-92.918 38.504l-35.244 140.976h-128l-35.244-140.976c-32.922-8.784-64.106-21.818-92.918-38.504l-124.622 74.774-90.51-90.51 74.774-124.622c-16.686-28.812-29.72-59.996-38.504-92.918l-140.976-35.244v-128l140.976-35.244c8.784-32.922 21.818-64.106 38.504-92.918l-74.774-124.622 90.51-90.51 124.622 74.774c28.812-16.686 59.996-29.72 92.918-38.504l35.244-140.976h128l35.244 140.976c32.922 8.784 64.106 21.818 92.918 38.504l124.622-74.774 90.51 90.51-74.774 124.622c16.686 28.812 29.72 59.996 38.504 92.918l140.976 35.244zM704 448c0-106.038-85.962-192-192-192s-192 85.962-192 192 85.962 192 192 192 192-85.962 192-192z" />
|
||||
<glyph unicode="" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
|
||||
<glyph unicode="" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h64v256h256v-256h64v-128z" />
|
||||
<glyph unicode="" glyph-name="icon-link" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
|
||||
<glyph unicode="" glyph-name="icon-lock" d="M832 576h-32v96c0 158.8-129.2 288-288 288s-288-129.2-288-288v-96h-32c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h640c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128zM416 672c0 53 43 96 96 96s96-43 96-96v-96h-192v96z" />
|
||||
<glyph unicode="" glyph-name="icon-minus" d="M960 320c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64h-896c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h896z" />
|
||||
<glyph unicode="" glyph-name="icon-people" d="M704 640h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM256 640h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM832 576h-192c-34.908 0-67.716-9.448-96-25.904 57.278-33.324 96-95.404 96-166.096v-448h384v448c0 105.6-86.4 192-192 192zM384 576h-192c-105.6 0-192-86.4-192-192v-448h576v448c0 105.6-86.4 192-192 192z" />
|
||||
<glyph unicode="" glyph-name="icon-person" d="M768 704c0-105.6-86.4-192-192-192h-128c-105.6 0-192 86.4-192 192v64c0 105.6 86.4 192 192 192h128c105.6 0 192-86.4 192-192v-64zM64-64v192c0 140.8 115.2 256 256 256h384c140.8 0 256-115.2 256-256v-192z" />
|
||||
<glyph unicode="" glyph-name="icon-plus" d="M960 576h-330v320c0 35.2-28.8 64-64 64h-108c-35.2 0-64-28.8-64-64v-320h-330c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h330v-320c0-35.2 28.8-64 64-64h108c35.2 0 64 28.8 64 64v320h330c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64z" />
|
||||
<glyph unicode="" glyph-name="icon-trash" d="M832 832h-192.36v64c0 35.2-28.8 64-64 64h-128c-35.2 0-64-28.8-64-64v-64h-191.64c-105.6 0-192-72-192-160s0-160 0-160h64v-384c0-105.6 86.4-192 192-192h512c105.6 0 192 86.4 192 192v384h64c0 0 0 72 0 160s-86.4 160-192 160zM320 128h-128v384h128v-384zM576 128h-128v384h128v-384zM832 128h-128v384h128v-384z" />
|
||||
<glyph unicode="" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
|
||||
<glyph unicode="" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
|
||||
<glyph unicode="" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
|
||||
<glyph unicode="" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-right-equilateral" d="M962 448l-896-512v1024z" />
|
||||
<glyph unicode="󡀀" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
|
||||
<glyph unicode="󡀁" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
|
||||
<glyph unicode="󡀂" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
|
||||
<glyph unicode="󡀄" glyph-name="icon-bullet" d="M832 208c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
|
||||
<glyph unicode="󡀅" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
|
||||
<glyph unicode="󡀆" glyph-name="icon-chain-links" d="M958.4 894.4c-43.8 43.8-101 65.6-158.4 65.6s-114.6-21.8-158.4-65.6l-128-128c-74-74-85.4-187-34-273l-12.8-12.8c-35.4 20.8-75 31.4-114.8 31.4-57.4 0-114.6-21.8-158.4-65.6l-128-128c-87.4-87.4-87.4-229.4 0-316.8 43.8-43.8 101-65.6 158.4-65.6s114.6 21.8 158.4 65.6l128 128c74 74 85.4 187 34 273l12.8 12.8c35.2-21 75-31.6 114.6-31.6 57.4 0 114.6 21.8 158.4 65.6l128 128c87.6 87.6 87.6 229.6 0.2 317zM419.8 220.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2s-49.8 10-67.8 28.2c-37.4 37.4-37.4 98.4 0 135.8l128 128c18.2 18.2 42.2 28.2 67.8 28.2 5.6 0 11.2-0.6 16.8-1.4l-55.6-55.6c-10.4-10.4-16.2-24.2-16.2-38.8s5.8-28.6 16.2-38.8c10.4-10.4 24.2-16.2 38.8-16.2s28.6 5.8 38.8 16.2l55.6 55.6c5.4-30.4-3.6-62.2-26.6-85zM867.8 668.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2-5.6 0-11.2 0.6-16.8 1.4l55.6 55.6c10.4 10.4 16.2 24.2 16.2 38.8s-5.8 28.6-16.2 38.8c-10.4 10.4-24.2 16.2-38.8 16.2s-28.6-5.8-38.8-16.2l-55.6-55.6c-5.2 29.8 3.6 61.6 26.6 84.6l128 128c18 18.4 42.2 28.4 67.8 28.4s49.8-10 67.8-28.2c37.6-37.4 37.6-98.2 0-135.6z" />
|
||||
<glyph unicode="󡀇" glyph-name="icon-pane-collapse-left" horiz-adv-x="832" d="M0 960h192v-1024h-192v1024zM832 704h-256v256l-320-416 320-416v256h256v320z" />
|
||||
<glyph unicode="󡀈" glyph-name="icon-pane-collapse-right" horiz-adv-x="832" d="M640 960h192v-1024h-192v1024zM0 704h256v256l320-416-320-416v256h-256v320z" />
|
||||
<glyph unicode="󡀉" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
|
||||
<glyph unicode="󡀐" glyph-name="icon-duplicate" d="M640 704v128c0 70.4-57.6 128-128 128h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h128v139.6c0 134.8 109.6 244.4 244.4 244.4h139.6zM896 576h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h384c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128z" />
|
||||
<glyph unicode="󡀑" glyph-name="icon-folder-new" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM704 160h-128v-128h-128v128h-128v128h128v128h128v-128h128v-128z" />
|
||||
<glyph unicode="󡀒" glyph-name="icon-fullscreen-expand" d="M192.344 128c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 767.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 960h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 128.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
|
||||
<glyph unicode="󡀓" glyph-name="icon-fullscreen-collapse" d="M191.656 128c0.118-0.1 0.244-0.224 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192h-192v-192h191.656zM192 768.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656zM832 576h192v192h-191.656c-0.118 0.1-0.244 0.226-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192zM832 127.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656z" />
|
||||
<glyph unicode="󡀔" glyph-name="icon-layers" d="M1024 576l-512 384-512-384 512-384zM512 64l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
|
||||
<glyph unicode="󡀕" glyph-name="icon-line-horz" d="M64 384c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
|
||||
<glyph unicode="󡀖" glyph-name="icon-magnify" d="M1024 64l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 340.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
|
||||
<glyph unicode="󡀗" glyph-name="icon-magnify-in" d="M1024 64l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 340.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 608h384v-128h-384v128zM352 736h128v-384h-128v384z" />
|
||||
<glyph unicode="󡀘" glyph-name="icon-magnify-out" d="M767.2 320.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 340.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 608h384v-128h-384v128z" />
|
||||
<glyph unicode="󡀙" glyph-name="icon-menu" d="M0 832h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 192h1024v-128h-1024v128z" />
|
||||
<glyph unicode="󡀠" glyph-name="icon-move" d="M293.4 448l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 512h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
|
||||
<glyph unicode="󡀡" glyph-name="icon-new-window" d="M448 960v-128h320l-384-384 128-128 384 384v-320h128v576zM576 285.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
|
||||
<glyph unicode="󡀢" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
|
||||
<glyph unicode="󡀣" glyph-name="icon-pause" d="M126 962h256v-1024h-256v1024zM638 962h256v-1024h-256v1024z" />
|
||||
<glyph unicode="󡀤" glyph-name="icon-pencil" d="M922.344 858.32c-38.612 38.596-81.306 69.232-120.304 86.324-68.848 30.25-104.77 9.078-120.194-6.344l-516.228-516.216-3.136-9.152-162.482-476.932 485.998 165.612 6.73 6.806 509.502 509.506c9.882 9.866 21.768 27.77 21.768 56.578 0.002 50.71-38.996 121.148-101.654 183.818zM237.982 104.34l-69.73 69.728 69.25 203.228 18.498 6.704h64v-128h128v-64l-6.846-18.506-203.172-69.154z" />
|
||||
<glyph unicode="󡀥" glyph-name="icon-play" d="M1024 448l-1024-512v1024z" />
|
||||
<glyph unicode="󡀦" glyph-name="icon-plot-resource" d="M255.884 256c0.040 0.034 0.082 0.074 0.116 0.116v127.884c0 70.58 57.42 128 128 128h255.884c0.040 0.034 0.082 0.074 0.116 0.116v127.884c0 70.58 57.42 128 128 128h143.658c-93.832 117.038-237.98 192-399.658 192-282.77 0-512-229.23-512-512 0-67.904 13.25-132.704 37.256-192h218.628zM768.116 640c-0.040-0.034-0.082-0.074-0.116-0.116v-127.884c0-70.58-57.42-128-128-128h-255.884c-0.040-0.034-0.082-0.074-0.116-0.116v-127.884c0-70.58-57.42-128-128-128h-143.658c93.832-117.038 237.98-192 399.658-192 282.77 0 512 229.23 512 512 0 67.904-13.25 132.704-37.256 192h-218.628z" />
|
||||
<glyph unicode="󡀧" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
|
||||
<glyph unicode="󡀨" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
|
||||
<glyph unicode="󡀩" glyph-name="icon-refresh" d="M960 528v432l-164.8-164.8c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2s-131.2-197.2-131.2-316.8 46.6-232.2 131.2-316.8c84.6-84.6 197.2-131.2 316.8-131.2s232.2 46.6 316.8 131.2c69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.8-145.8-159-256-313.6-256-176.4 0-320 143.6-320 320s143.8 320 320.2 320c72 0 138.4-23.8 192-64l-176-176h432z" />
|
||||
<glyph unicode="󡀰" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
|
||||
<glyph unicode="󡀱" glyph-name="icon-sine" d="M1022.294 448c-1.746 7.196-3.476 14.452-5.186 21.786-20.036 85.992-53.302 208.976-98 306.538-22.42 48.938-45.298 86.556-69.946 115.006-48.454 55.93-98.176 67.67-131.356 67.67s-82.902-11.74-131.356-67.672c-24.648-28.45-47.528-66.068-69.948-115.006-44.696-97.558-77.962-220.544-98-306.538-21.646-92.898-46.444-175.138-71.71-237.836-16.308-40.46-30.222-66.358-40.6-82.604-10.378 16.246-24.292 42.142-40.6 82.604-23.272 57.75-46.144 132.088-66.524 216.052h-197.362c1.746-7.196 3.476-14.452 5.186-21.786 20.036-85.992 53.302-208.976 98-306.538 22.42-48.938 45.298-86.556 69.946-115.006 48.454-55.932 98.176-67.672 131.356-67.672s82.902 11.74 131.356 67.672c24.648 28.45 47.528 66.068 69.948 115.006 44.696 97.558 77.962 220.544 98 306.538 21.646 92.898 46.444 175.138 71.71 237.836 16.308 40.46 30.222 66.358 40.6 82.604 10.378-16.246 24.292-42.142 40.6-82.604 23.274-57.748 46.146-132.086 66.526-216.050h197.36z" />
|
||||
<glyph unicode="󡀲" glyph-name="icon-T" d="M0 960v-256h128v64h256v-704h-192v-128h640v128h-192v704h256v-64h128v256z" />
|
||||
<glyph unicode="󡀳" glyph-name="icon-thumbs-strip" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
|
||||
<glyph unicode="󡀴" glyph-name="icon-two-parts-both" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM128 832h320v-768h-320v768zM896 64h-320v768h320v-768z" />
|
||||
<glyph unicode="󡀵" glyph-name="icon-two-parts-one-only" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-320v768h320v-768z" />
|
||||
<glyph unicode="󡀶" glyph-name="icon-resync" d="M795.2 795.2c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2-69.4-69.4-113.2-157.4-126.6-252.8h130c29.6 145.8 158.8 256 313.4 256 72 0 138.4-23.8 192-64l-176-176h432v432l-164.8-164.8zM512 128c-72 0-138.4 23.8-192 64l176 176h-432v-432l164.8 164.8c79.8-65.2 178.8-100.8 283.2-100.8 119.6 0 232.2 46.6 316.8 131.2 69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.6-145.8-158.8-256-313.4-256z" />
|
||||
<glyph unicode="󡀷" glyph-name="icon-reset" d="M460.8 499.2l-187.8 187.8c57.2 42.8 128 68.2 204.8 68.2 188.2 0 341.6-153.2 341.6-341.4s-153.2-341.2-341.4-341.2c-165 0-302.8 117.6-334.6 273h-138.4c14.2-101.8 61-195.6 135-269.6 90.2-90.2 210.4-140 338-140s247.6 49.8 338 140 140 210.4 140 338-49.8 247.6-140 338-210.4 140-338 140c-111.4 0-217-38-302-107.6l-176 175.6v-460.8h460.8z" />
|
||||
<glyph unicode="󡀸" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
|
||||
<glyph unicode="󡀹" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
|
||||
<glyph unicode="󡁀" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
|
||||
<glyph unicode="󡁁" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
|
||||
<glyph unicode="󡁂" glyph-name="icon-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
|
||||
<glyph unicode="󡁃" glyph-name="icon-grid-snap-to" d="M382 130h448v448h-448v-448zM510 450h192v-192h-192v192zM-2 386h320v-64h-320v64zM894 386h128v-64h-128v64zM574 962h64v-320h-64v320zM574 66h64v-128h-64v128zM574 386h64v-64h-64v64z" />
|
||||
<glyph unicode="󡁄" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
|
||||
<glyph unicode="󡁅" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
|
||||
<glyph unicode="󡁆" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
|
||||
<glyph unicode="󡁇" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
|
||||
<glyph unicode="󡁈" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
|
||||
<glyph unicode="󡄀" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
|
||||
<glyph unicode="󡄁" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
|
||||
<glyph unicode="󡄂" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
|
||||
<glyph unicode="󡄃" glyph-name="icon-clock" d="M512 960c-282.76 0-512-229.24-512-512s229.24-512 512-512 512 229.24 512 512-229.24 512-512 512zM782 270c-12.681-21.673-35.844-36-62.354-36-0.023 0-0.047 0-0.070 0-0.016 0-0.040 0-0.064 0-13.234 0-25.63 3.587-36.269 9.843l-221.644 127.977q-1.2 0.7-2.38 1.46l-0.86 0.56-1.86 1.28-1.26 0.9-1.26 0.96-1.7 1.34-0.64 0.54c-0.72 0.6-1.44 1.22-2.14 1.84v0c-5.012 4.562-9.331 9.758-12.863 15.491-0.457 0.769-0.717 1.249-0.997 1.709s-0.58 0.98-0.86 1.48c-3.092 5.53-5.561 11.936-7.071 18.704l-0.089 0.596c-0.2 0.92-0.38 1.84-0.54 2.76 0 0.28-0.1 0.56-0.16 0.84-0.12 0.7-0.22 1.42-0.3 2.14s-0.14 1.040-0.2 1.58-0.1 1.020-0.14 1.54-0.12 1.5-0.18 2.24c0 0.34 0 0.68 0 1.040q0 1.4 0 2.78c0 0.1 0 0.22 0 0.32v364.080c0 39.765 32.235 72 72 72s72-32.235 72-72v-322.44l185.7-107.22c21.605-12.697 35.879-35.823 35.879-62.284 0-13.278-3.594-25.716-9.862-36.395z" />
|
||||
<glyph unicode="󡄄" glyph-name="icon-database" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.77 0-512 85.962-512 192v-512c0-106.038 229.23-192 512-192s512 85.962 512 192v512c0-106.038-229.23-192-512-192z" />
|
||||
<glyph unicode="󡄅" glyph-name="icon-database-query" d="M683.52 140.714c-50.782-28.456-109.284-44.714-171.52-44.714-194.094 0-352 157.906-352 352s157.906 352 352 352 352-157.906 352-352c0-62.236-16.258-120.738-44.714-171.52l191.692-191.692c8.516 13.89 13.022 28.354 13.022 43.212v640c0 106.038-229.23 192-512 192s-512-85.962-512-192v-640c0-106.038 229.23-192 512-192 126.11 0 241.548 17.108 330.776 45.46l-159.256 159.254zM352 448c0-88.224 71.776-160 160-160s160 71.776 160 160-71.776 160-160 160-160-71.776-160-160z" />
|
||||
<glyph unicode="󡄆" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
|
||||
<glyph unicode="󡄇" glyph-name="icon-datatable" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 385v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 345.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 70v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
|
||||
<glyph unicode="󡄈" glyph-name="icon-dictionary" d="M832 320c105.6 0 192 86.4 192 192v256c0 105.6-86.4 192-192 192v-320l-128 64-128-64v320h-384c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v192c0-105.6-86.4-192-192-192h-640v192h640z" />
|
||||
<glyph unicode="󡄉" glyph-name="icon-folder" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128z" />
|
||||
<glyph unicode="󡄐" glyph-name="icon-image" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-768v768h768v-768zM320 704l-128-128v-448h640v320l-128 128-128-128z" />
|
||||
<glyph unicode="󡄑" glyph-name="icon-layout" d="M448 960h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h256v1024zM832 960h-256v-577.664h448v385.664c0 105.6-86.4 192-192 192zM576-64h256c105.6 0 192 86.4 192 192v129.664h-448v-321.664z" />
|
||||
<glyph unicode="󡄒" glyph-name="icon-object" d="M512-64l512 320v384l-512.020 320-511.98-320v-384l512-320zM512 768l358.4-224-358.4-224-358.4 224 358.4 224z" />
|
||||
<glyph unicode="󡄓" glyph-name="icon-object-unknown" d="M510 962l-512-320v-384l512-320 512 320v384l-512 320zM585.4 100.8c-21.2-20.8-46-30.8-76-30.8-31.2 0-56.2 9.8-76.2 29.6-20 20-29.6 44.8-29.6 76.2 0 30.4 10.2 55.2 31 76.2s45.2 31.2 74.8 31.2c29.6 0 54.2-10.4 75.6-32s31.8-46.4 31.8-76c-0.2-29-10.8-54-31.4-74.4zM638.2 413.4c-23.6-11.8-37.4-22-43.4-32.4-3.6-6.2-6-14.8-7.4-26.8v-41h-161.4v44.2c0 40.2 4.4 69.8 13 88 8 17.2 22.6 30.2 44.8 40l34.8 15.4c32 14.2 48.2 35.2 48.2 62.8 0 16-6 30.4-17.2 41.8-11.2 11.2-25.6 17.2-41.6 17.2-24 0-54.4-10-62.8-57.4l-2.2-12.2h-147l1.4 16.2c4 44.6 17 82.4 38.8 112.2 19.6 27 45.6 48.6 77 64.6s64.6 24 98.2 24c60.6 0 110.2-19.4 151.4-59.6 41.2-40 61.2-88 61.2-147.2 0-70.8-28.8-121.4-85.8-149.8z" />
|
||||
<glyph unicode="󡄔" glyph-name="icon-packet" d="M511.98 960l-511.98-320v-512c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v512l-512.020 320zM512 768l358.4-224-358.4-224-358.4 224 358.4 224z" />
|
||||
<glyph unicode="󡄕" glyph-name="icon-page" d="M702 452c-105.6 0-192 86.4-192 192v320h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v320h-320zM766 580h256l-384 384v-256c0-70.4 57.6-128 128-128z" />
|
||||
<glyph unicode="󡄖" glyph-name="icon-plot-overlay" d="M830 960h-636c-106.7 0-194-87.3-194-194v-406.82c14.18-18.64 25.66-28.34 32-30.84 14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 42.46 108.48 116.32 237.76 227.040 237.76 11.354-0.003 22.389-1.366 32.952-3.936l-0.952 57.936c0 106.7-87.3 194-194 194zM992 567.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-42.46-108.48-116.32-237.76-227.040-237.76-11.355 0.003-22.389 1.367-32.952 3.936l0.952-57.936c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v406.82c-14.18 18.64-25.66 28.34-32 30.84z" />
|
||||
<glyph unicode="󡄗" glyph-name="icon-plot-stacked" d="M89.6 648c24.98 0 48.96 26.52 85.52 70.18 45.42 54.28 102 121.82 196 121.82 44.64 0 86.62-15.46 124.8-46 28.68-22.9 51.16-50.42 72.92-77.060 38.42-46.94 59.16-68.94 83.96-68.94h371.2v118c0 106.7-87.3 194-194 194h-636c-106.7 0-194-87.3-194-194v-118h89.6zM529.5 549.6c-28.24 22.64-50.52 50-72 76.28-35.5 43.48-58.76 70.12-86.3 70.12-25.060 0-49.080-26.54-85.66-70.24-45.4-54.24-102-121.76-196-121.76h-89.54v-112h371.2c44 0 85.54-15.34 123.3-45.6 28.24-22.64 50.52-50 72-76.28 35.5-43.48 58.76-70.12 86.3-70.12 25.060 0 49.080 26.54 85.66 70.24 45.4 54.24 102 121.76 196 121.76h89.54v112h-371.2c-44.060 0-85.54 15.34-123.3 45.6zM934.4 248c-24.98 0-48.96-26.52-85.52-70.18-45.42-54.28-102-121.82-196-121.82-44.64 0-86.62 15.46-124.8 46-28.68 22.9-51.16 50.42-72.92 77.060-38.42 46.94-59.16 68.94-83.96 68.94h-371.2v-118c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v118h-89.6z" />
|
||||
<glyph unicode="󡄘" glyph-name="icon-session" d="M635.6 435.6c6.6-4.2 13.2-8.6 19.2-13.6l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l135.2 108c0.2 4.8 0.2 9.4 0.2 14.2 0 52.2-7.8 102.4-22.2 149.8l-154.8-123.6c-58.2-46.6-140.2-59.2-211.4-38.4zM248.6 325.8l120.4 96.4c58 46.4 140 59.2 211.2 38.4-6.6 4.2-13.2 8.6-19.2 13.6l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.6c-40-32-91.4-48-143-48-21.6 0-43 2.8-63.8 8.4 0-0.6 0-1.2 0-1.6 5-3.4 10-6.8 14.6-10.6l120.4-96.4c29.8-23.8 83.8-23.8 113.4 0zM120.6 581.8l120.4 96.4c80.2 64.2 205.6 64.2 285.8 0l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l181 144.8c-91.2 140.4-249.6 233.4-429.6 233.4-238.6 0-439.2-163.2-496-384.2 30.8-17.6 77.8-15.6 104.6 6zM689 218l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.4c-40-32-91.4-48-143-48-47.8 0-95.4 13.8-134.2 41.4 85.6-163.6 256.8-275.4 454.2-275.4s368.6 111.8 454.2 275.4c-80.4-57.4-199.8-55.2-277.2 6.6z" />
|
||||
<glyph unicode="󡄙" glyph-name="icon-tabular" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
|
||||
<glyph unicode="󡄠" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
|
||||
<glyph unicode="󡄡" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
|
||||
<glyph unicode="󡄢" glyph-name="icon-tabular-realtime" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM448 668l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l50.456-50.997v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-75.518 76.318c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.971-30.343-71.575-49.137-117.568-49.137-20.084 0-39.331 3.584-57.137 10.146l1.145 151.831zM320 0h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 256h-256v192h256v-192zM320 512h-256v192h256v-192zM640 0h-256v192h256v-192zM448 323.38v174.5c1.88-1.74 3.74-3.5 5.56-5.34l75.5-76.3c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.644 112.128-43.879l-0.11-174.399c-1.88 1.74-3.74 3.5-5.56 5.34l-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.644-112.128 43.879zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
|
||||
<glyph unicode="󡄣" glyph-name="icon-tabular-scrolling" d="M64 960c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 704v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 576v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 320c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-64l-256 256h512z" />
|
||||
<glyph unicode="󡄤" glyph-name="icon-telemetry" d="M32 328.34c14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 37.4 95.5 99.14 207.14 188.94 232.46-90.462 152.598-254.314 253.3-441.686 253.3-0.075 0-0.15 0-0.226 0-282.748 0-511.988-229.24-511.988-512 0-0.032 0-0.070 0-0.108 0-35.719 3.641-70.587 10.572-104.255 8.968-7.457 16.648-13.417 21.428-15.297zM992 567.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-37.4-95.5-99.14-207.14-188.94-232.46 90.462-152.598 254.314-253.3 441.686-253.3 0.075 0 0.15 0 0.226 0 282.748 0 511.988 229.24 511.988 512 0 0.032 0 0.070 0 0.108 0 35.719-3.641 70.587-10.572 104.255-8.968 7.457-16.648 13.417-21.428 15.297z" />
|
||||
<glyph unicode="󡄥" glyph-name="icon-telemetry-panel" d="M169.2 512c14 56.4 33 122 56.6 176.8 15.4 35.8 31.2 63.2 48.2 84 18.4 22.4 49 49.2 91 49.2s72.6-26.8 91-49.2c17-20.6 32.6-48.2 48.2-84 23.6-54.8 42.8-120.4 56.6-176.8h461.2v256c0 105.6-86.4 192-192 192h-640c-105.6 0-192-86.4-192-192v-256h171.2zM718.6 384h-127.2c25-93.4 48.4-144.4 63.6-168.6 15.2 24.2 38.6 75.2 63.6 168.6zM301.4 512h127.2c-25 93.4-48.4 144.4-63.6 168.6-15.2-24.2-38.6-75.2-63.6-168.6zM850.8 384c-14-56.4-33-122-56.6-176.8-15.4-35.8-31.2-63.2-48.2-84-18.4-22.4-49-49.2-91-49.2s-72.6 26.8-91 49.2c-17 20.6-32.6 48.2-48.2 84-23.6 54.8-42.8 120.4-56.6 176.8h-461.2v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-171.2z" />
|
||||
<glyph unicode="󡄦" glyph-name="icon-timeline" d="M256 704h384v-128h-384v128zM384 512h384v-128h-384v128zM320 320h384v-128h-384v128zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 128.4v639.2c0 0.2 0.2 0.2 0.4 0.4h127.6v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
|
||||
<glyph unicode="󡄧" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
|
||||
<glyph unicode="󡄨" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
|
||||
<glyph unicode="󡄩" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
|
||||
<glyph unicode="󡄰" glyph-name="icon-summary-widget" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 349.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
|
||||
<glyph unicode="󡄱" glyph-name="icon-notebook" d="M896 849.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 640h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 128h-384v320h384v-320z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 44 KiB |
BIN
src/styles-new/fonts/openmct-symbols-16px.ttf
Executable file
BIN
src/styles-new/fonts/openmct-symbols-16px.ttf
Executable file
Binary file not shown.
BIN
src/styles-new/fonts/openmct-symbols-16px.woff
Executable file
BIN
src/styles-new/fonts/openmct-symbols-16px.woff
Executable file
Binary file not shown.
78
src/styles-new/legacy-styles.scss
Normal file
78
src/styles-new/legacy-styles.scss
Normal file
@ -0,0 +1,78 @@
|
||||
@import "../styles/mixins";
|
||||
@import "../styles/mobile/mixins";
|
||||
@import "../styles/themes/snow/mixins";
|
||||
|
||||
@import "../styles/constants";
|
||||
@import "../styles/mobile/constants";
|
||||
@import "../styles/themes/snow/constants";
|
||||
|
||||
@import "../styles/animations";
|
||||
@import "../styles/effects";
|
||||
@import "../styles/glyphs";
|
||||
@import "../styles/animations";
|
||||
@import "../styles/archetypes";
|
||||
//@import "../styles/about";
|
||||
//@import "../styles/text";
|
||||
@import "../styles/icons";
|
||||
@import "../styles/status";
|
||||
@import "../styles/data-status";
|
||||
@import "../styles/helpers/bubbles";
|
||||
@import "../styles/helpers/splitter";
|
||||
@import "../styles/helpers/wait-spinner";
|
||||
//@import "../styles/inspector";
|
||||
//
|
||||
//!********************************* CONTROLS *!
|
||||
//@import "../styles/controls/breadcrumb";
|
||||
@import "../styles/controls/buttons";
|
||||
@import "../styles/controls/palette";
|
||||
@import "../styles/controls/controls";
|
||||
@import "../styles/controls/lists";
|
||||
@import "../styles/controls/menus";
|
||||
@import "../styles/controls/messages";
|
||||
@import "../styles/controls/indicators";
|
||||
@import "../styles/mobile/controls/menus";
|
||||
//
|
||||
//!********************************* FORMS *!
|
||||
@import "../styles/forms/elems";
|
||||
@import "../styles/forms/channel-selector";
|
||||
@import "../styles/forms/datetime";
|
||||
@import "../styles/forms/validation";
|
||||
@import "../styles/forms/filter";
|
||||
//
|
||||
//!********************************* USER ENVIRON *!
|
||||
@import "../styles/user-environ/layout";
|
||||
@import "../styles/mobile/layout";
|
||||
@import "../styles/edit/editor";
|
||||
//@import "../styles/search/search";
|
||||
//@import "../styles/mobile/search/search";
|
||||
@import "../styles/overlay/overlay";
|
||||
@import "../styles/tree/tree";
|
||||
@import "../styles/object-label";
|
||||
//@import "../styles/mobile/tree";
|
||||
@import "../styles/user-environ/frame";
|
||||
@import "../styles/user-environ/top-bar";
|
||||
@import "../styles/user-environ/tool-bar";
|
||||
@import "../styles/user-environ/selecting";
|
||||
//
|
||||
//!********************************* VIEWS *!
|
||||
@import "../styles/fixed-position";
|
||||
@import "../styles/lists/tabular";
|
||||
@import "../styles/plots/plots-main";
|
||||
@import "../styles/plots/legend";
|
||||
@import "../styles/iframe";
|
||||
@import "../styles/views";
|
||||
@import "../styles/items/item";
|
||||
@import "../styles/mobile/item";
|
||||
@import "../styles/table";
|
||||
@import "../styles/notebook/notebook";
|
||||
//
|
||||
//!********************************* TO BE MOVED *!
|
||||
@import "../styles/autoflow";
|
||||
@import "../styles/features/imagery";
|
||||
@import "../styles/features/time-display";
|
||||
@import "../styles/widgets";
|
||||
//
|
||||
//!********************************* APP STARTUP *!
|
||||
//@import "../styles/app-start";
|
||||
|
||||
@import "../styles/conductor/time-conductor-snow";
|
||||
7
src/styles-new/sass-base.scss
Normal file
7
src/styles-new/sass-base.scss
Normal file
@ -0,0 +1,7 @@
|
||||
// Imports only constants, mixins, etc.
|
||||
// Meant for use as a single line import in Vue SFC's.
|
||||
// Do not include anything that renders to CSS!
|
||||
@import "constants";
|
||||
@import "constants-mobile";
|
||||
@import "constants-snow"; // TEMP
|
||||
@import "mixins";
|
||||
0
src/styles-new/theme-snow.scss
Normal file
0
src/styles-new/theme-snow.scss
Normal file
1
src/styles-new/vendor/normalize.min.css
vendored
Normal file
1
src/styles-new/vendor/normalize.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
|
||||
22
src/ui/components/controls/multipane.vue
Normal file
22
src/ui/components/controls/multipane.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="l-multipane"
|
||||
:class="{
|
||||
'l-multipane--vertical': type === 'vertical',
|
||||
'l-multipane--horizontal': type === 'horizontal'
|
||||
}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['vertical', 'horizontal'].indexOf(value) !== -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
418
src/ui/components/controls/pane.vue
Normal file
418
src/ui/components/controls/pane.vue
Normal file
@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="l-pane"
|
||||
:class="{
|
||||
'l-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
|
||||
'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
|
||||
'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
|
||||
'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
|
||||
'l-pane--collapsable' : collapsable,
|
||||
'l-pane--collapsed': collapsed,
|
||||
'l-pane--reacts': !handle,
|
||||
'l-pane--resizing': resizing === true
|
||||
}">
|
||||
<div v-if="handle"
|
||||
class="l-pane__handle"
|
||||
@mousedown="start">
|
||||
</div>
|
||||
<a v-if="label"
|
||||
class="l-pane__collapse-button"
|
||||
@click="toggleCollapse">
|
||||
<span class="l-pane__label">{{ label }}</span>
|
||||
</a>
|
||||
<div class="l-pane__contents">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
$hitMargin: 4px;
|
||||
/**************************** BASE - MOBILE AND DESKTOP */
|
||||
.l-multipane {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
|
||||
&--horizontal,
|
||||
> .l-pane {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
&--vertical,
|
||||
> .l-pane {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.l-pane {
|
||||
backface-visibility: hidden;
|
||||
display: flex;
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
|
||||
&__handle,
|
||||
&__label {
|
||||
// __handle and __label don't appear in mobile
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0; right: 0; // Default
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&--reacts {
|
||||
// This is the pane that doesn't hold the handle
|
||||
// It reacts to other panes that are able to resize
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
flex-basis: 0px !important;
|
||||
transition: all 350ms ease;
|
||||
|
||||
.l-pane__contents {
|
||||
transition: opacity 150ms ease;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
&.l-pane--collapsed {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--vertical"] {
|
||||
&.l-pane--collapsed {
|
||||
padding-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/************************ CONTENTS */
|
||||
&__contents {
|
||||
flex: 1 1 100%;
|
||||
opacity: 1;
|
||||
padding: $interiorMargin;
|
||||
pointer-events: inherit;
|
||||
transition: opacity 250ms ease 250ms;
|
||||
overflow: auto;
|
||||
|
||||
.l-pane__contents {
|
||||
// Don't pad all nested __contents
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
// Create margin between elements in a pane
|
||||
// Doesn't match first elem, but will match all subsequent
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/************************ DESKTOP STYLES */
|
||||
body.desktop & {
|
||||
&__handle {
|
||||
background: $colorSplitterBg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
$m: 2px;
|
||||
$h: nth($splitterBtnD, 1) - ($m * 2);
|
||||
color: $splitterBtnColorFg;
|
||||
flex: 0 0 nth($splitterBtnD, 1);
|
||||
font-size: $h * .9;
|
||||
position: relative;
|
||||
justify-content: start;
|
||||
transition: $transOut;
|
||||
|
||||
&:after {
|
||||
// Close icon
|
||||
background: $splitterBtnColorFg;
|
||||
border-radius: 2px;
|
||||
color: $splitterBtnColorBg;
|
||||
content: $glyph-icon-minus;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: .8em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
padding: 0 7px;
|
||||
position: absolute;
|
||||
right: $m;
|
||||
top: $m;
|
||||
text-align: right;
|
||||
transition: $transOut;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(black, 0.1);
|
||||
//color: $splitterBtnColorHoverFg;
|
||||
&:after {
|
||||
background: $splitterBtnColorHoverBg;
|
||||
color: $splitterBtnColorHoverFg;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
// Name of the pane
|
||||
@include ellipsize();
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
transform-origin: top left;
|
||||
flex: 1 0 90%;
|
||||
}
|
||||
|
||||
&--resizing {
|
||||
// User is dragging the handle and resizing a pane
|
||||
@include userSelectNone();
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
$d: nth($splitterBtnD, 1);
|
||||
flex-basis: $d;
|
||||
min-width: $d !important;
|
||||
min-height: $d !important;
|
||||
|
||||
> .l-pane__handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
background: $splitterBtnColorFg;
|
||||
color: $splitterBtnColorBg;
|
||||
|
||||
&:after {
|
||||
content: $glyph-icon-plus;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $splitterBtnColorHoverBg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
height: nth($splitterBtnD, 1);
|
||||
padding: $interiorMarginSm $interiorMarginSm;
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
> .l-pane__handle {
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $splitterHandleD;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
top: 0;
|
||||
right: $hitMargin * -1;
|
||||
bottom: 0;
|
||||
left: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
height: auto;
|
||||
|
||||
[class*="label"] {
|
||||
position: absolute;
|
||||
transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: none;
|
||||
padding: 0;
|
||||
top: $interiorMarginSm;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
width: auto;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter Before */
|
||||
&[class*="-before"] {
|
||||
> .l-pane__handle {
|
||||
left: 0;
|
||||
transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter After */
|
||||
&[class*="-after"] {
|
||||
> .l-pane__handle {
|
||||
right: 0;
|
||||
transform: translateX(floor($splitterHandleD / 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--vertical"] {
|
||||
> .l-pane__handle {
|
||||
cursor: row-resize;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $splitterHandleD;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
left: 0;
|
||||
top: $hitMargin * -1;
|
||||
right: 0;
|
||||
bottom: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Vertical Splitter Before */
|
||||
&[class*="-before"] {
|
||||
> .l-pane__handle {
|
||||
top: 0;
|
||||
transform: translateY(floor($splitterHandleD / -2)); // Center over the pane edge
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Vertical Splitter After */
|
||||
&[class*="-after"] {
|
||||
> .l-pane__handle {
|
||||
bottom: 0;
|
||||
transform: translateY(floor($splitterHandleD / 2)); // Center over the pane edge
|
||||
}
|
||||
}
|
||||
}
|
||||
} // Ends .body.desktop
|
||||
} // Ends .l-pane
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const COLLAPSE_THRESHOLD_PX = 40;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
handle: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['before', 'after'].indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
collapsable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: String,
|
||||
resizing: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.type = this.$parent.type;
|
||||
this.styleProp = (this.type === 'horizontal') ? 'width' : 'height'
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse: function () {
|
||||
this.collapsed = !this.collapsed;
|
||||
if (this.collapsed) {
|
||||
// Pane is expanded and is being collapsed
|
||||
this.currentSize = (this.dragCollapse === true)? this.initial : this.$el.style[this.styleProp];
|
||||
this.$el.style[this.styleProp] = '';
|
||||
} else {
|
||||
// Pane is collapsed and is being expanded
|
||||
this.$el.style[this.styleProp] = this.currentSize;
|
||||
delete this.currentSize;
|
||||
delete this.dragCollapse;
|
||||
}
|
||||
},
|
||||
trackSize: function() {
|
||||
if (!this.dragCollapse === true) {
|
||||
if (this.type === 'vertical') {
|
||||
this.initial = this.$el.offsetHeight;
|
||||
} else if (this.type === 'horizontal') {
|
||||
this.initial = this.$el.offsetWidth;
|
||||
}
|
||||
}
|
||||
},
|
||||
getPosition: function (event) {
|
||||
return this.type === 'horizontal' ?
|
||||
event.pageX :
|
||||
event.pageY;
|
||||
},
|
||||
getNewSize: function (event) {
|
||||
let delta = this.startPosition - this.getPosition(event);
|
||||
if (this.handle === "before") {
|
||||
return `${this.initial + delta}px`;
|
||||
}
|
||||
if (this.handle === "after") {
|
||||
return `${this.initial - delta}px`;
|
||||
}
|
||||
},
|
||||
updatePosition: function (event) {
|
||||
let size = this.getNewSize(event);
|
||||
let intSize = parseInt(size.substr(0, size.length - 2));
|
||||
if (intSize < COLLAPSE_THRESHOLD_PX && this.collapsable === true) {
|
||||
this.dragCollapse = true;
|
||||
this.end();
|
||||
this.toggleCollapse();
|
||||
} else {
|
||||
this.$el.style[this.styleProp] = size;
|
||||
}
|
||||
},
|
||||
start: function (event) {
|
||||
this.startPosition = this.getPosition(event);
|
||||
document.body.addEventListener('mousemove', this.updatePosition);
|
||||
document.body.addEventListener('mouseup', this.end);
|
||||
this.resizing = true;
|
||||
this.trackSize();
|
||||
},
|
||||
end: function (event) {
|
||||
document.body.removeEventListener('mousemove', this.updatePosition);
|
||||
document.body.removeEventListener('mouseup', this.end);
|
||||
this.resizing = false;
|
||||
this.trackSize();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
98
src/ui/components/controls/search.vue
Normal file
98
src/ui/components/controls/search.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="c-search"
|
||||
:class="{ 'is-active': active === true }">
|
||||
<input class="c-search__input" type="search"
|
||||
v-bind:value="searchInput"
|
||||
@input="handleInput($event)"/>
|
||||
<a class="c-search__clear-input icon-x-in-circle"
|
||||
v-on:click="clearInput"></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";;
|
||||
|
||||
/******************************* SEARCH */
|
||||
.c-search {
|
||||
@include nice-input();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 4px;
|
||||
|
||||
&:before {
|
||||
// Mag glass icon
|
||||
content: $glyph-icon-magnify;
|
||||
direction: rtl; // Aligns glyph to right-hand side of container, for transition
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
flex: 0 0 auto;
|
||||
opacity: 0.5;
|
||||
overflow: hidden;
|
||||
padding: 2px; // Prevents clipping
|
||||
transition: width 250ms ease;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset rgba(black, 0.8) 0 0px 2px;
|
||||
&:before {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&--major {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
background: none !important;
|
||||
box-shadow: none !important; // !important needed to override default for [input]
|
||||
flex: 0 1 100%;
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
min-width: 10px; // Must be set to allow input to collapse below browser min
|
||||
}
|
||||
|
||||
&__clear-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
&:before {
|
||||
padding: 2px 0px;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.c-search__clear-input {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
searchInput: '',
|
||||
active: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
// Grab input as the user types it
|
||||
// and set 'active' based on input length > 0
|
||||
this.searchInput = e.target.value;
|
||||
this.active = (this.searchInput.length > 0);
|
||||
},
|
||||
clearInput() {
|
||||
// Clear the user's input and set 'active' to false
|
||||
this.searchInput = '';
|
||||
this.active = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
133
src/ui/components/controls/splitter.vue
Normal file
133
src/ui/components/controls/splitter.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="c-splitter" :class="{
|
||||
'c-splitter-vertical' : align === 'vertical',
|
||||
'c-splitter-horizontal' : align === 'horizontal',
|
||||
'c-splitter-collapse-left' : collapse === 'to-left',
|
||||
'c-splitter-collapse-right' : collapse === 'to-right',
|
||||
}">
|
||||
<a class="c-splitter__btn"></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/constants";
|
||||
@import "~styles/constants-snow";
|
||||
@import "~styles/mixins";
|
||||
@import "~styles/glyphs";
|
||||
|
||||
$c: #06f;
|
||||
$size: $splitterHandleD;
|
||||
$margin: 0px;
|
||||
$hitMargin: 4px;
|
||||
|
||||
|
||||
.c-splitter {
|
||||
background: $colorSplitterBg;
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
// Bigger hit area
|
||||
//@include test();
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&-vertical {
|
||||
cursor: col-resize;
|
||||
width: $size;
|
||||
margin: 0 $margin;
|
||||
&:before {
|
||||
top: 0;
|
||||
right: $hitMargin * -1;
|
||||
bottom: 0;
|
||||
left: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
cursor: row-resize;
|
||||
height: $size;
|
||||
margin: $margin 0;
|
||||
&:before {
|
||||
top: $hitMargin * -1;
|
||||
right: 0;
|
||||
bottom: $hitMargin * -1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-splitter__btn {
|
||||
// Collapse button
|
||||
background: $colorSplitterBg;
|
||||
display: none; // Only display if splitter is collapsible, see below
|
||||
width: $splitterD;
|
||||
height: 40px;
|
||||
transition: $transOut;
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
[class*="collapse"] & {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
&:before {
|
||||
color: $colorSplitterFg;
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="collapse-left"] & {
|
||||
border-bottom-left-radius: $controlCr;
|
||||
right: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-left;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="collapse-right"] & {
|
||||
border-bottom-right-radius: $controlCr;
|
||||
left: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
align: String,
|
||||
collapse: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
src/ui/components/controls/viewControl.vue
Normal file
62
src/ui/components/controls/viewControl.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<span class="c-view-control"
|
||||
:class="{
|
||||
'c-view-control--expanded' : expanded,
|
||||
'is-enabled' : enabled
|
||||
}"
|
||||
@click="toggle"></span>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";;
|
||||
|
||||
.c-view-control {
|
||||
$d: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: $d;
|
||||
position: relative;
|
||||
|
||||
&.is-enabled:before {
|
||||
$s: .65;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
position: absolute;
|
||||
transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
&:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
enabled: {
|
||||
// Provided to allow the view-control to still occupy space without displaying a control icon.
|
||||
// Used as such in the tree - when a node doesn't have children, set disabled to true.
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.expanded = !this.expanded;
|
||||
this.$emit('click', event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
172
src/ui/components/layout/Layout.vue
Normal file
172
src/ui/components/layout/Layout.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="l-shell">
|
||||
<div class="l-shell__head">
|
||||
[ Create Button ]
|
||||
[ App Logo ]
|
||||
</div>
|
||||
<multipane class="l-shell__main"
|
||||
type="horizontal">
|
||||
<pane class="l-shell__pane-tree"
|
||||
handle="after"
|
||||
label="Browse"
|
||||
collapsable>
|
||||
<div class="l-shell__search">
|
||||
<search class="c-search--major" ref="shell-search"></search>
|
||||
</div>
|
||||
<div class="l-shell__tree">
|
||||
<mct-tree :nodes="treeRoots"></mct-tree>
|
||||
</div>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-main">
|
||||
<div class="l-shell__main-container" ref="mainContainer"></div>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-inspector l-pane--holds-multipane"
|
||||
handle="before"
|
||||
label="Inspect"
|
||||
collapsable>
|
||||
<MctInspector ref="inspector"></MctInspector>
|
||||
</pane>
|
||||
</multipane>
|
||||
<div class="l-shell__status">
|
||||
<MctStatus></MctStatus>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
/******************************* SHELL */
|
||||
.l-shell {
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
&__status {
|
||||
background: $colorBodyFg;
|
||||
color: $colorBodyBg;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
height: 24px;
|
||||
padding: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
background: $colorTreeBg;
|
||||
width: 40%;
|
||||
|
||||
[class*="collapse-button"] {
|
||||
// For mobile, collapse button becomes menu icon
|
||||
body.mobile & {
|
||||
height: $mobileMenuIconD;
|
||||
width: $mobileMenuIconD;
|
||||
transform: translateX(100%);
|
||||
|
||||
&:before {
|
||||
color: $colorKey;
|
||||
content: $glyph-icon-menu-hamburger;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__head,
|
||||
&__pane-inspector {
|
||||
body.mobile & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include phonePortrait() {
|
||||
&__pane-tree {
|
||||
width: calc(100% - #{$mobileMenuIconD});
|
||||
|
||||
+ .l-pane {
|
||||
// Hide pane-main when this pane is expanded
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] + .l-pane {
|
||||
// Show pane-main when tree is collapsed
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
transition: opacity 250ms ease 250ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********** MAIN AREA */
|
||||
&__main-container {
|
||||
// Wrapper for main views
|
||||
font-size: 16px; // TEMP FOR LEGACY STYLING
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $interiorMargin; right: $interiorMarginLg; bottom: $interiorMargin; left: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__tree {
|
||||
// Tree component within __pane-tree
|
||||
flex: 1 1 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__time-conductor {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
min-height: 50px;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
body.desktop & {
|
||||
/********** HEAD AND STATUS */
|
||||
&__head,
|
||||
&__status {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
&__head {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
height: 40px;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__pane-tree,
|
||||
&__pane-inspector {
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&__pane-inspector {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import MctInspector from './MctInspector.vue';
|
||||
import MctMain from './MctMain.vue';
|
||||
import MctStatus from './MctStatus.vue';
|
||||
import MctTree from './mct-tree.vue';
|
||||
import search from '../controls/search.vue';
|
||||
import multipane from '../controls/multipane.vue';
|
||||
import pane from '../controls/pane.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MctInspector,
|
||||
MctMain,
|
||||
MctStatus,
|
||||
MctTree,
|
||||
search,
|
||||
multipane,
|
||||
pane
|
||||
}
|
||||
}
|
||||
</script>
|
||||
25
src/ui/components/layout/MCTSearch.vue
Normal file
25
src/ui/components/layout/MCTSearch.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="c-search c-search--major">
|
||||
<input type="search" placeholder="Search"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/constants";
|
||||
|
||||
/******************************* SEARCH */
|
||||
.c-search {
|
||||
input[type=search] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--major {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
202
src/ui/components/layout/MctInspector.vue
Normal file
202
src/ui/components/layout/MctInspector.vue
Normal file
@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<multipane class="c-inspector"
|
||||
type="vertical">
|
||||
<pane class="c-inspector__properties">
|
||||
<div ref="properties"></div>
|
||||
</pane>
|
||||
<pane class="l-pane c-inspector__elements"
|
||||
handle="before"
|
||||
label="Elements">
|
||||
<div ref="elements">c-inspector__elements 1</div>
|
||||
</pane>
|
||||
</multipane>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
@mixin grid-two-column() {
|
||||
display: grid;
|
||||
grid-row-gap: 0;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@mixin grid-two-column-span-cols() {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.c-inspector {
|
||||
min-width: 150px;
|
||||
|
||||
> [class*="__"] {
|
||||
min-height: 50px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
> .l-pane__contents > * {
|
||||
// Provide margin against scrollbar
|
||||
// TODO: move this into pane.vue
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__elements {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.l-inspector-part {
|
||||
display: contents; // Legacy
|
||||
}
|
||||
|
||||
h2 {
|
||||
// Legacy, somewhat
|
||||
@include grid-two-column-span-cols;
|
||||
border-radius: $smallCr;
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
font-size: .85em;
|
||||
font-weight: normal;
|
||||
margin: $interiorMarginLg 0 $interiorMarginSm 0;
|
||||
padding: $interiorMarginSm $interiorMargin;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-properties {
|
||||
.label {
|
||||
color: $colorInspectorPropName;
|
||||
}
|
||||
.value {
|
||||
color: $colorInspectorPropVal;
|
||||
word-break: break-all;
|
||||
&:first-child {
|
||||
// If there is no preceding .label element, make value span columns
|
||||
@include grid-two-column-span-cols;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* PROPERTIES GRID */
|
||||
|
||||
.grid-elem {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
}
|
||||
&.label {
|
||||
background-color: rgba(0,0,128,0.2);
|
||||
}
|
||||
&.value {
|
||||
background-color: rgba(0,128,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Properties grids
|
||||
.grid-properties, // LEGACY
|
||||
.l-grid-properties {
|
||||
@include grid-two-column;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.grid-span-all {
|
||||
@include grid-two-column-span-cols;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
.grid-cell {
|
||||
padding: 3px $interiorMarginLg 3px 0;
|
||||
&[title] {
|
||||
// When a cell has a title, assume it's helpful text
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
&.force-border,
|
||||
&:not(:first-of-type) {
|
||||
// Row borders, effected via border-top on child elements of the row
|
||||
.grid-cell {
|
||||
border-top: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************************************************** LEGACY STYLES */
|
||||
.tree {
|
||||
.grid-properties {
|
||||
margin-left: $treeItemIndent + $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.inspector-location {
|
||||
display: inline-block;
|
||||
|
||||
.location-item {
|
||||
$h: 1.2em;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $h;
|
||||
position: relative;
|
||||
padding: 2px 4px;
|
||||
.t-object-label {
|
||||
.t-item-icon {
|
||||
height: $h;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.last) .t-object-label .t-title-label:after {
|
||||
color: pushBack($colorInspectorFg, 15%);
|
||||
content: '\e904';
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
font-style: normal !important;
|
||||
line-height: inherit;
|
||||
margin-left: $interiorMarginSm;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements pool
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import multipane from '../controls/multipane.vue';
|
||||
import pane from '../controls/pane.vue';
|
||||
export default {
|
||||
components: {
|
||||
multipane,
|
||||
pane
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
src/ui/components/layout/MctMain.vue
Normal file
21
src/ui/components/layout/MctMain.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<mct-representation key='browse-object'></mct-representation>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.MCT_Main {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 0px;
|
||||
bottom: 20px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
14
src/ui/components/layout/MctStatus.vue
Normal file
14
src/ui/components/layout/MctStatus.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span class="c-status">
|
||||
[ Status ]
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
111
src/ui/components/layout/mct-tree.vue
Normal file
111
src/ui/components/layout/mct-tree.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<ul class="c-tree">
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child">
|
||||
</tree-item>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
// TODO: make sure hit area encompasses all of the tree item; currently is just the text
|
||||
|
||||
.c-tree {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
||||
.c-tree {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-radius: $controlCr;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
transition: background 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
.c-tree__item__name:before {
|
||||
// Type icon
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
|
||||
&__view-control {
|
||||
color: $colorItemTreeVC;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: $colorItemTreeFg;
|
||||
width: 100%;
|
||||
&:before {
|
||||
color: $colorItemTreeIcon;
|
||||
width: $treeTypeIconW;
|
||||
}
|
||||
}
|
||||
|
||||
body.mobile & {
|
||||
@include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
|
||||
height: $mobileTreeItemH;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
[class*="view-control"] {
|
||||
width: ceil($mobileTreeItemH * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-object-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before {
|
||||
// Type icon
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@include ellipsize();
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import treeItem from './tree-item.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
children: []
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
mounted: function () {
|
||||
this.openmct.objects.get('ROOT')
|
||||
.then(root => this.openmct.composition.get(root).load())
|
||||
.then(children => this.children = children.map((c) => {
|
||||
return {
|
||||
id: this.openmct.objects.makeKeyString(c.identifier),
|
||||
object: c,
|
||||
path: [c.identifier]
|
||||
};
|
||||
}))
|
||||
},
|
||||
name: 'mct-tree',
|
||||
components: {
|
||||
treeItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
src/ui/components/layout/tree-item.vue
Normal file
91
src/ui/components/layout/tree-item.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<li class="c-tree__item-h">
|
||||
<div class="c-tree__item">
|
||||
<view-control class="c-tree__item__view-control"
|
||||
:enabled="hasChildren"
|
||||
:expanded="expanded"
|
||||
@click="toggleChildren">
|
||||
</view-control>
|
||||
<a class="c-tree__item__name c-object-name"
|
||||
:class="cssClass"
|
||||
:href="href">
|
||||
<span class="c-object-name__name">{{ node.object.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul v-if="expanded" class="c-tree">
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child"
|
||||
>
|
||||
</tree-item>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import viewControl from '../controls/viewControl.vue'
|
||||
export default {
|
||||
name: 'tree-item',
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
node: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasChildren: false,
|
||||
loaded: false,
|
||||
children: [],
|
||||
expanded: false,
|
||||
cssClass: 'icon-folder'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
href: function () {
|
||||
return '#/browse/' + this.node.path
|
||||
.map(o => this.openmct.objects.makeKeyString(o))
|
||||
.join('/');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// TODO: should update on mutation.
|
||||
// TODO: click navigation should not fubar hash quite so much.
|
||||
// TODO: should highlight if navigated to.
|
||||
// TODO: should have context menu.
|
||||
// TODO: should support drag/drop composition
|
||||
let type = this.openmct.types.get(this.node.object.type);
|
||||
if (type) {
|
||||
this.cssClass = type.definition.cssClass;
|
||||
} else {
|
||||
console.log("Failed to get typeDef for object", this.node.object.name, this.node.object.type);
|
||||
}
|
||||
|
||||
let composition = this.openmct.composition.get(this.node.object);
|
||||
if (!composition) {
|
||||
return;
|
||||
}
|
||||
this.hasChildren = true;
|
||||
|
||||
},
|
||||
methods: {
|
||||
toggleChildren: function () {
|
||||
this.expanded = !this.expanded;
|
||||
if (this.expanded && !this.loaded && this.hasChildren) {
|
||||
this.openmct.composition.get(this.node.object).load()
|
||||
.then(children => {
|
||||
this.children = children.map((c) => {
|
||||
return {
|
||||
id: this.openmct.objects.makeKeyString(c.identifier),
|
||||
object: c,
|
||||
path: this.node.path.concat([c.identifier])
|
||||
};
|
||||
});
|
||||
})
|
||||
.then(() => this.loaded = true);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
viewControl
|
||||
}
|
||||
}
|
||||
</script>
|
||||
172
src/ui/router/ApplicationRouter.js
Normal file
172
src/ui/router/ApplicationRouter.js
Normal file
@ -0,0 +1,172 @@
|
||||
/**
|
||||
|
||||
Application router -- must
|
||||
|
||||
*/
|
||||
|
||||
const LocationBar = require('location-bar');
|
||||
const EventEmitter = require('EventEmitter');
|
||||
|
||||
function paramsToObject(searchParams) {
|
||||
let params = {};
|
||||
for ([key, value] of searchParams.entries()) {
|
||||
if (params[key]) {
|
||||
if (!Array.isArray(params[key])) {
|
||||
params[key] = [params[key]];
|
||||
}
|
||||
params[key].push(value);
|
||||
} else {
|
||||
params[key] = value;
|
||||
}
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
class ApplicationRouter extends EventEmitter {
|
||||
/**
|
||||
* events
|
||||
* change:params -> notify listeners w/ new, old, and changed.
|
||||
* change:path -> notify listeners w/ new, old paths.
|
||||
*
|
||||
* methods:
|
||||
* update(path, params) -> updates path and params at the same time. Only
|
||||
* updates specified params, other params are not modified.
|
||||
* updateParams(newParams) -> update only specified params, leaving rest
|
||||
* intact. Does not modify path.
|
||||
* updatePath(path);
|
||||
|
||||
* route(path, handler);
|
||||
* start(); Start routing.
|
||||
*/
|
||||
constructor() {
|
||||
super()
|
||||
this.routes = [];
|
||||
this.started = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* start application routing, should be done after handlers are registered.
|
||||
*/
|
||||
start() {
|
||||
if (this.started) {
|
||||
throw new Error('Router already started!');
|
||||
}
|
||||
this.started = true;
|
||||
let locationBar = new LocationBar();
|
||||
locationBar.onChange(p => this.handleLocationChange(p));
|
||||
locationBar.start({
|
||||
root: location.pathname
|
||||
});
|
||||
}
|
||||
|
||||
handleLocationChange(pathString) {
|
||||
let url = new URL(
|
||||
pathString,
|
||||
`${location.protocol}//${location.host}${location.pathname}`
|
||||
)
|
||||
|
||||
let oldLocation = this.currentLocation;
|
||||
|
||||
let newLocation = {
|
||||
url: url,
|
||||
path: url.pathname,
|
||||
queryString: url.search.replace(/^\?/, ''),
|
||||
params: paramsToObject(url.searchParams)
|
||||
};
|
||||
|
||||
this.currentLocation = newLocation;
|
||||
|
||||
if (!oldLocation) {
|
||||
this.doPathChange(newLocation.path, null, newLocation);
|
||||
this.doParamsChange(newLocation.params, {}, newLocation);
|
||||
return;
|
||||
}
|
||||
|
||||
if (oldLocation.path !== newLocation.path) {
|
||||
this.doPathChange(
|
||||
newLocation.path,
|
||||
oldLocation.path,
|
||||
this
|
||||
);
|
||||
}
|
||||
if (!_.isEqual(oldLocation.params, newLocation.params)) {
|
||||
this.doParamsChange(
|
||||
newLocation.params,
|
||||
oldLocation.params,
|
||||
newLocation
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
doPathChange(newPath, oldPath, newLocation) {
|
||||
let route = this.routes.filter(r => r.matcher.test(newPath))[0];
|
||||
if (route) {
|
||||
route.callback(newPath, route.matcher.exec(newPath));
|
||||
}
|
||||
this.emit('change:path', newPath, oldPath);
|
||||
}
|
||||
|
||||
doParamsChange(newParams, oldParams, newLocation) {
|
||||
let changedParams = {};
|
||||
for (let [key, value] of Object.entries(newParams)) {
|
||||
if (value !== oldParams[key]) {
|
||||
changedParams[key] = value;
|
||||
}
|
||||
}
|
||||
for (let [key, value] of Object.entries(oldParams)) {
|
||||
if (!newParams.hasOwnProperty(key)) {
|
||||
changedParams[key] = undefined;
|
||||
}
|
||||
}
|
||||
this.emit('change:params', newParams, oldParams, changedParams);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update route params. Takes an object of updates. New parameters
|
||||
*/
|
||||
updateParams(updateParams) {
|
||||
let searchParams = this.currentLocation.url.searchParams;
|
||||
for (let [key, value] of Object.entries(updateParams)) {
|
||||
if (typeof value === 'undefined') {
|
||||
searchParams.delete(key);
|
||||
} else {
|
||||
searchParams.set(key, value);
|
||||
}
|
||||
}
|
||||
this.setQueryString(searchParams.toString());
|
||||
}
|
||||
|
||||
getParams() {
|
||||
return this.currentLocation.params;
|
||||
}
|
||||
|
||||
update(path, params) {
|
||||
let searchParams = this.currentLocation.url.searchParams;
|
||||
for (let [key, value] of Object.entries(params)) {
|
||||
if (typeof value === 'undefined') {
|
||||
searchParams.delete(key);
|
||||
} else {
|
||||
searchParams.set(key, value);
|
||||
}
|
||||
}
|
||||
this.set(path, searchParams.toString());
|
||||
}
|
||||
|
||||
set(path, queryString) {
|
||||
location.hash = `${path}?${queryString}`;
|
||||
}
|
||||
|
||||
setQueryString(queryString) {
|
||||
this.set(this.currentLocation.path, queryString);
|
||||
}
|
||||
|
||||
setPath(path) {
|
||||
this.set(path, this.currentLocation.queryString);
|
||||
}
|
||||
|
||||
route(matcher, callback) {
|
||||
this.routes.push({matcher, callback});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ApplicationRouter;
|
||||
@ -28,7 +28,8 @@ const webpackConfig = {
|
||||
"espresso": path.join(__dirname, "src/styles/theme-espresso.scss"),
|
||||
"snow": path.join(__dirname, "src/styles/theme-snow.scss"),
|
||||
"vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js"),
|
||||
"d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js")
|
||||
"d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
|
||||
"styles": path.join(__dirname, "src/styles-new")
|
||||
}
|
||||
},
|
||||
devtool: devMode ? 'eval-source-map' : 'source-map',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user