Notebook integration deep (#1947)
* NASA - OPEN MCT NOTEBOOK UI PROTOTYPE CHALLENGE https://www.topcoder.com/challenge-details/30059614/ Initial submission * Code updates: -Topcoder final fixes -NASA review fixes * drag and drop style fix, new entry focus, delete display fix * NASA reported issues fixed: objects saved in notebook, delete entry dialog, style files, and new entry from drag objects fixed. * Annotation toolbar UI style fixes, added annotation functionality on new entry dialog * painterro .map file issue fixed. * NASA review fixes: css files adjusted notebook children tree removed embed's title links to live object * CouchDB documentation added * CouchDB documentation added Screenshots added. * CouchDB setup documentation added * Test case functional and cosmetic issues fixed. * Test cases functional and cosmetic issues fixed. * updated file saver library * Code issues fixes: NotificationLaunchIndicator deleted. Inappropriate modifications to domain object models fixed. Implemented $destroy listener on entryDnd directive. Naming conventions fixed. Unnecessary changes made to platform handled. Painterro dependency handled gulp verify fix. * names and package fixes * filenames fix * [Notebook] Relocate to platform/features/notebook * [Notebook] Remove obsolete README * [Notebook] Restore original index.html * [Notebook] Expose via openmct.plugins * [Notebook] Remove demo entries * [Notebook] Run gulp fixstyle * [Notebook] Use dot notation instead of brackets ...for checkstyle * [Notebook] Remove extra comma * [Notebook] Run gulp fixstyle * [Notebook] Use dot notation instead of brackets ...for checkstyle * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Run gulp fixstyle * [Notebook] Include painterro for tests * [Notebook] Fix require config for painterro * [Merge] WIP markup and styling Fixes #1896 - Very much WIP, currently having issues with hovering and jiggling * [Merge] WIP markup and styling Fixes #1896 - Very much WIP, attempting to convert textarea to contenteditable; * [Merge] JS debugging Fixes #1896 - Very much WIP! * [Merge] JS debugging Fixes #1896 - Really, really WIP - DnD doesn't work properly, and drag to existing entry no longer works. * [Front-end] Notebook thematic styling; test console Fixes #1896 - Added thematic styles and config; - Really, really, really WIP!! - DnD doesn't work properly, and drag to existing entry no longer works. * [Merge] Cleanups in JS Fixes #1896 - Removed and commented out logging statements * [Merge] WIP SCSS and markup polishing Fixes #1896 - Significant style and markup changes; - Styles, layout, etc. relating to embed elements; - Fixes in both notebook.html and embedControl.html; - Class name normalization; * [Merge] WIP Mods related to MCTModalNotebook.js Fixes #1896 Fixes #1906 * fix drag and drop, delete entries * [Front-end] Refined styling of entry embeds Fixes #1896 * [Merge] Generalized hover hide/show of local controls Fixes #1896 * [Merge] Generalized labeled icon-* elements Fixes #1896 * [Frontend] CSS normalizing, apply general styles in markup Fixes #1896 - Notebook class names more individualized; - Apply .labeled and .has-local-controls general classes; - Apply .s-input-inline to contenteditable div; - Look and feel cleanups for drag area and entry elements; * added modifiedOn time for entries that are changed, and fixed issue regarding inner text being filled when new entry button clicked * [Frontend] CSS sanding and cleanups Fixes #1896 - Removing unused classes; - Finessed margin and padding; * [Frontend] Mobile styling Fixes #1896 - Mod .has-local-controls to not apply when in touch context * [Frontend] WIP Mobile styling Fixes #1896 - phone portrait entry layout optimization * fix expand in layout, which was causing snapshot at expand * [Frontend] Fixes to search control Fixes #1896 - Search control now more robust, added .search-filter-by-type class selector; * [Frontend] Fix custom Selects Fixes #1896 - Custom Selects now much more solid, handle width compression better; * remove duplicate code from MCTModalNotebook and roll changes into MCTTriggerModal * [Frontend] WIP Mobile styling Fixes #1896 - Fixed general approach to portrait orientation in mobile/_layout.scss to use media query; - Fixed portrait layout in _notebook_base.scss to use media query; * prevent multiple new notebook entry divs from being created on open overlay, instead create on initialization * [Frontend] WIP Snapshot styling Fixes #1896 - Better class names; - Moved buttons in frame layout; * remove frame layout duplicate and use frame.html * fix issue of preserving line breaks when text is received from a persisted source * add comments, clean out some code, and fix broken tests * fix export image after merging with master * include painterro in karma config * Inlined templates for notebook * disable view policy - to allow layouts to function - needs more investigation * fix layout display overload, remove viewpolicy and notebookLayout.html. Fix delete error - issues found when deploying for testathon * fix (not being able to focus on content editable div to add text, while in layout) - when in layout, the first child of the outermost div is the only one that registers a click, this was causing an issue of not being able to edit notebook entries. My fix includes finding the first child of the div that registers the click and forcing a focus event. * fix focus one new entry issue, cleanup of code related to finding elements, and write more reusable code * abstract findElementById for reusability and improve performance from O^2 to O * user findElementById in entrydnd * change snapshot library to dom-to-image * [Frontend] WIP Snapshot styling Fixes #1896 Fixes #1947 - Significant markup changes to template in ViewSnaphot.js - WIP!!! Keeping own topic branch for now * [Frontend] WIP Snapshot styling Fixes #1896 Fixes #1947 - Significant markup changes to ViewSnaphot.js; - Change in imagery.scss to move non-layout styling to appropriate class; * Removed snapshot from version number to close sprint eagle * Updated version number for Enterprise release * Lock filesaver version (#1956) Lock filesaver version as there have been a large number of broken builds from what should be non-breaking version increases. Fixes currently broken build. * [Frontend] Snapshot styling Fixes #1896 Fixes #1947 - Final tweaks after rebase from notebook-integration-deep-styling * fixes issue of overlay not closing when context menu item in clicked when viewing snapshot * [Frontend] Painterro styling Fixes #1896 Fixes #1947 - WIP - Painterro styling overrides and config - Removed commented code * [Frontend] Painterro styling Fixes #1896 Fixes #1947 - WIP - Painterro styling overrides and config * fixes issue of overlay not closing when context menu item in clicked when viewing snapshot * specify require paths for new library * [Frontend] Local controls CSS added for hide/show of trash can icons Fixes #1896 Fixes #1947 - Also updated frame.scss to use same transition timing * proper shimming * dragging objects to notebook now only creates a link, clicking on snapshot from object view takes a snapshot of the current view, without re-rendering * [Frontend] Local controls CSS added for hide/show of trash can icons Fixes #1896 Fixes #1947 - Also updated frame.scss to use same transition timing * select correct div for snapshot * [Frontend] Adding background color to snapshot Fixes #1896 Fixes #1947 * remove snapshot class after async image render * [Frontend] Adding background color to snapshot Fixes #1896 Fixes #1947 * remove snapshot button from frames in layout * remove snapshot from frame view, add it only to overlay, change mctSnapShot to accomodate taking snaps of overlay/object view * add preview action, working, need styling for notebook action on preview * fix checkstyle * change glyph for preview, use similar tempalte to frame.html * dont allow preview action on objects getting edited currently * changes to browseController and NavigationService to block navigation and show preview of object when trying to navigate to object in tree in edit mode * [Frontend] Painterro styling and config Fixes #1896 Fixes #1947 - Changes mainly related to toolbar styling and labels * [Frontend] Notebook/Preview related sanding and polishing Fixes #1947 - Changed description for notebook-new-entry * [Frontend] Notebook/Preview related sanding and polishing Fixes #1947 - Added new global "hide-in-t-main-view" class; - Apply new class to Preview action to suppress display of that button in main view of navigated object; * code cleanup * [Frontend] Notebook/Preview related sanding and polishing Fixes #1947 - Classes for Notebook Entry button spacing; * abstract overlay into a service/api - to reduce code duplication catch error produced by painterro because of async div creation by dialog service * fix broken mcttriggermodal tests * fix checkstyle and lint * add functionality of being able to add buttons to the browse bar element of overlay when instantiating the overlay service * Reduce frequency of template recompilation in mct-include * Use updated painterro library. Fixes #1981 * add save flag and call done in both cases (clicking on cancel or ok) * fixes #1951 persist modified empty entry on blur * Bump Node Version * fix checkstyle * fixes issue where annotating snapshot that is already saved in notebook does not work * fix painterro button styling issue move jquery logic inside timeout block, because buttons are asynchronously created * remove description required when saving snapshot to notebook * remove create snapshot action from embeds, and add preview action to embeds * fixes edge case for issue #1981 Add a reject callback in the edgecase that user presses the x icon or esc key to cancel annotation, which was leading to the drag drop issue * Add default sort options on creation menu of Notebook * fix auto focus on new entry when in oldest first order, both in layout and regular view * [Frontend] Notebook mobile mods - Hide entry area when mobile; - Disallow entry edit or delete in mobile; * fixes issue 2041 (#2049) * fixes issue 2041 allows user to select caret position in notebook entries while in layout * [Frontend] Restore class, refine selector Fixes #2041 Fixes #2049 - Restored .s-input-inline to editable field; - Refined pointer-events: none to properly target .title-label only; * remove unused files/code and smoke test * remove , add pre-wrap to css and use inner text * make reviewer requested changes 'in progress still' * make reviewer requested changes 'continued' * replace html2canvas with dom-to-image - add in progress dialog to export image service - add error dialog to export image service * Search UI refactored to use flex Fixes #1947 - Fixes broken search inputs in main search and Notebook; - Significant rewrite to search SCSS and markup; * Fixes for Notebook custom selects; polishes to search Fixes #1947 - Better flex styles for custom selects; - Refinements to search styling; - Much better mobile responsive layout for search and controls in portrait layout; * fix preview action for embeds, which was showing current domain object vs selected domain object * Fixed hidden search dropdown menu Fixes #1947 * Revert whitespace change Revert change to whitespace in index.html. #1947. * [Export] Use html2canvas Use html2canvas instead of dom-to-image. Fixes issues with text exports. html2canvas is better supported and under active development and is a better choice for this library. Cleaned up export code, ensure that images are properly saved as the correct types. related to feedback on #1947 * Don't show brackets when timestamp is not specified (#331)
This commit is contained in:
Deep Tailor
committed by
Pete Richards
Pete Richards
parent
73e38f1955
commit
90a6bbc13e
@@ -65,7 +65,7 @@
|
||||
<div class='split-pane-component t-object pane primary-pane left'>
|
||||
<mct-representation mct-object="navigatedObject"
|
||||
key="navigatedObject.getCapability('status').get('editing') ? 'edit-object' : 'browse-object'"
|
||||
class="abs holder holder-object">
|
||||
class="abs holder holder-object t-main-view">
|
||||
</mct-representation>
|
||||
<a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect flush-right"
|
||||
title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
|
||||
|
||||
@@ -47,8 +47,8 @@ define(
|
||||
urlService,
|
||||
defaultPath
|
||||
) {
|
||||
var initialPath = ($route.current.params.ids || defaultPath).split("/");
|
||||
var currentIds;
|
||||
var initialPath = ($route.current.params.ids || defaultPath).split("/"),
|
||||
currentIds;
|
||||
|
||||
$scope.treeModel = {
|
||||
selectedObject: undefined,
|
||||
@@ -56,7 +56,24 @@ define(
|
||||
navigationService.setNavigation(object, true);
|
||||
},
|
||||
allowSelection: function (object) {
|
||||
return navigationService.shouldNavigate();
|
||||
var domainObjectInView = navigationService.getNavigation(),
|
||||
isInEditMode = domainObjectInView.getCapability('status').get('editing');
|
||||
|
||||
if (isInEditMode) {
|
||||
|
||||
var actions = object.getCapability('action'),
|
||||
previewAction = actions.getActions({key: 'mct-preview-action'})[0];
|
||||
|
||||
if (previewAction && previewAction.perform) {
|
||||
previewAction.perform();
|
||||
return false;
|
||||
} else {
|
||||
return navigationService.shouldNavigate();
|
||||
}
|
||||
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -162,7 +162,6 @@ define(
|
||||
*/
|
||||
NavigationService.prototype.shouldWarnBeforeNavigate = function () {
|
||||
var reasons = [];
|
||||
|
||||
this.checks.forEach(function (checkFn) {
|
||||
var reason = checkFn();
|
||||
if (reason) {
|
||||
|
||||
@@ -4,7 +4,10 @@
|
||||
<div class="top-bar">
|
||||
<div class="title">{{ngModel.title}}</div>
|
||||
</div>
|
||||
<div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint + " [" + ngModel.timestamp + "]"}}</div>
|
||||
<div class="hint" ng-hide="ngModel.hint === undefined">
|
||||
{{ngModel.hint}}
|
||||
<span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="message-action">
|
||||
{{ngModel.actionText}}
|
||||
|
||||
@@ -49,6 +49,8 @@ define([
|
||||
"./src/directives/MCTSplitPane",
|
||||
"./src/directives/MCTSplitter",
|
||||
"./src/directives/MCTTree",
|
||||
"./src/directives/MCTPreview",
|
||||
"./src/actions/MCTPreviewAction",
|
||||
"./src/filters/ReverseFilter",
|
||||
"text!./res/templates/bottombar.html",
|
||||
"text!./res/templates/controls/action-button.html",
|
||||
@@ -69,6 +71,7 @@ define([
|
||||
"text!./res/templates/controls/selector.html",
|
||||
"text!./res/templates/controls/datetime-picker.html",
|
||||
"text!./res/templates/controls/datetime-field.html",
|
||||
"text!./res/templates/preview.html",
|
||||
'legacyRegistry'
|
||||
], function (
|
||||
UrlService,
|
||||
@@ -99,6 +102,8 @@ define([
|
||||
MCTSplitPane,
|
||||
MCTSplitter,
|
||||
MCTTree,
|
||||
MCTPreview,
|
||||
MCTPreviewAction,
|
||||
ReverseFilter,
|
||||
bottombarTemplate,
|
||||
actionButtonTemplate,
|
||||
@@ -119,6 +124,7 @@ define([
|
||||
selectorTemplate,
|
||||
datetimePickerTemplate,
|
||||
datetimeFieldTemplate,
|
||||
previewTemplate,
|
||||
legacyRegistry
|
||||
) {
|
||||
|
||||
@@ -396,6 +402,31 @@ define([
|
||||
"key": "mctTree",
|
||||
"implementation": MCTTree,
|
||||
"depends": ['gestureService']
|
||||
},
|
||||
{
|
||||
"key": "mctPreview",
|
||||
"implementation": MCTPreview,
|
||||
"depends": [
|
||||
"$document"
|
||||
]
|
||||
}
|
||||
],
|
||||
"actions": [
|
||||
{
|
||||
"key": "mct-preview-action",
|
||||
"implementation": MCTPreviewAction,
|
||||
"name": "Preview",
|
||||
"cssClass": "hide-in-t-main-view icon-eye-open",
|
||||
"description": "Preview in large dialog",
|
||||
"category": [
|
||||
"contextual",
|
||||
"view-control"
|
||||
],
|
||||
"depends": [
|
||||
"$compile",
|
||||
"$rootScope"
|
||||
],
|
||||
"priority": "preferred"
|
||||
}
|
||||
],
|
||||
"constants": [
|
||||
@@ -511,6 +542,10 @@ define([
|
||||
{
|
||||
"key": "object-inspector",
|
||||
"template": objectInspectorTemplate
|
||||
},
|
||||
{
|
||||
"key": "mct-preview",
|
||||
"template": previewTemplate
|
||||
}
|
||||
],
|
||||
"controls": [
|
||||
|
||||
@@ -225,7 +225,8 @@ a.disabled {
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden {
|
||||
.hidden,
|
||||
.t-main-view .hide-in-t-main-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -33,6 +33,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
[class*="icon-"].labeled {
|
||||
// Moved from .s-button and generalized
|
||||
&:before {
|
||||
// Fend off label from icon when it's included
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** CHAR UNICODES */
|
||||
|
||||
$glyph-icon-alert-rect: '\e900';
|
||||
|
||||
@@ -299,7 +299,7 @@
|
||||
color: $ic;
|
||||
}
|
||||
@if $bgHov != none {
|
||||
&:not(.disabled):hover {
|
||||
&:not([disabled="true"]):not(.disabled):hover {
|
||||
background: $bgHov;
|
||||
color: $fgHov;
|
||||
>.icon,
|
||||
|
||||
@@ -270,37 +270,4 @@
|
||||
@extend .s-summary-widget;
|
||||
@extend .l-summary-widget;
|
||||
padding: $interiorMarginSm $interiorMargin;
|
||||
}
|
||||
|
||||
// Hide and show elements in the rule-header on hover
|
||||
.l-widget-rule,
|
||||
.l-widget-test-data-item {
|
||||
.grippy,
|
||||
.l-rule-action-buttons-wrapper,
|
||||
.l-condition-action-buttons-wrapper,
|
||||
.l-widget-test-data-item-action-buttons-wrapper {
|
||||
@include trans-prop-nice($props: opacity, $dur: 500ms);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.grippy,
|
||||
.l-rule-action-buttons-wrapper,
|
||||
.l-widget-test-data-item-action-buttons-wrapper {
|
||||
@include trans-prop-nice($props: opacity, $dur: 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.l-rule-action-buttons-wrapper {
|
||||
.t-delete {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.t-condition {
|
||||
&:hover {
|
||||
.l-condition-action-buttons-wrapper {
|
||||
@include trans-prop-nice($props: opacity, $dur: 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -34,11 +34,6 @@ $pad: $interiorMargin * $baseRatio;
|
||||
line-height: $btnStdH;
|
||||
padding: 0 $pad;
|
||||
|
||||
&.labeled:before {
|
||||
// Icon when it's included
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&.lg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -59,6 +54,10 @@ $pad: $interiorMargin * $baseRatio;
|
||||
.label, .title-label { display: none; }
|
||||
}
|
||||
|
||||
&[disabled="true"] {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.pause-play {
|
||||
@extend .icon-pause;
|
||||
&.paused {
|
||||
|
||||
@@ -139,7 +139,6 @@
|
||||
}
|
||||
|
||||
.s-local-controls {
|
||||
@include trans-prop-nice(opacity);
|
||||
font-size: 0.7rem;
|
||||
&.s-wrapper-transluc {
|
||||
// Semi-opaque wrapper to visually distinguish a control
|
||||
@@ -150,6 +149,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.has-local-controls {
|
||||
.local-control {
|
||||
@include trans-prop-nice($props: opacity, $dur: 250ms);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.local-control {
|
||||
@include trans-prop-nice($props: opacity, $dur: 10ms);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** VIEW CONTROLS */
|
||||
// Expand/collapse > and v arrows, used in tree and plot legend
|
||||
// Moved this over from a tree-only context 5/18/17
|
||||
@@ -338,6 +350,7 @@ input[type="text"].s-input-inline,
|
||||
@include btnSubtle($bg: $colorSelectBg);
|
||||
@extend .icon-arrow-down; // Context arrow
|
||||
display: inline-block;
|
||||
flex: 0 0 auto; // When used in a flex context, controls need to hold their width
|
||||
padding: 0 $interiorMargin;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
}
|
||||
min-width: 150px;
|
||||
.l-image-main {
|
||||
background-color: $colorPlotBg;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
.l-image-main-controlbar {
|
||||
@@ -76,6 +75,7 @@
|
||||
}
|
||||
|
||||
.s-image-main {
|
||||
background-color: $colorPlotBg;
|
||||
border: 1px solid transparent;
|
||||
&.paused {
|
||||
@extend .s-unsynced;
|
||||
|
||||
@@ -71,8 +71,8 @@ body.mobile {
|
||||
.pane.left.treeview {
|
||||
@include trans-prop-nice(opacity, 250ms, $delay: 250ms);
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
|
||||
width: $proporMenuWithView !important;
|
||||
right: auto !important;
|
||||
width: $proporMenuWithView !important;
|
||||
}
|
||||
// Sets the right representation when the tree is shown.
|
||||
.pane.right.items {
|
||||
@@ -136,17 +136,16 @@ body.mobile {
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: $phoMaxW) and (orientation: portrait) {
|
||||
body.mobile {
|
||||
.pane-tree-showing {
|
||||
.pane.left.treeview {
|
||||
width: $proporMenuOnly !important;
|
||||
}
|
||||
.pane.right.items {
|
||||
transform: translateX($proporMenuOnly);
|
||||
.holder-object-and-inspector {
|
||||
opacity: 0;
|
||||
}
|
||||
body.phone.portrait {
|
||||
.pane-tree-showing {
|
||||
.pane.left.treeview {
|
||||
width: $proporMenuOnly !important;
|
||||
}
|
||||
.pane.right.items {
|
||||
left: 0 !important;
|
||||
transform: translateX($proporMenuOnly);
|
||||
.holder-object-and-inspector {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,87 +26,89 @@
|
||||
@include trans-prop-nice((opacity, color), 150ms);
|
||||
}
|
||||
|
||||
.c-search-btn-wrapper,
|
||||
.c-search {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
&:not(:first-child) { margin-left: $interiorMargin; }
|
||||
}
|
||||
}
|
||||
|
||||
.c-search-btn-wrapper {
|
||||
// Holds c-search and Cancel button
|
||||
//@include test();
|
||||
&.holder {
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.c-search {
|
||||
// New approach to search and filter inputs
|
||||
// Block element
|
||||
// Holds magnify glass icon, html input, cancel button, etc.
|
||||
$m: $interiorMarginSm;
|
||||
@include nice-input();
|
||||
flex: 1 1 99%;
|
||||
font-size: 0.8rem;
|
||||
height: $btnStdH;
|
||||
padding: 1px $interiorMargin;
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Magnify glass icon
|
||||
content: $glyph-icon-magnify;
|
||||
font-family: symbolsfont;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.c-search__clear-input {
|
||||
// Icon is visible only when there is text input
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
&.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input.c-search__search-input {
|
||||
background: none !important;
|
||||
box-shadow: none !important; // !important needed to override default for [input]
|
||||
flex: 1 1 99%;
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
.c-search__search-menu-holder {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
transform: translate(-30px, 10px);
|
||||
z-index: 70;
|
||||
}
|
||||
|
||||
.holder-search {
|
||||
$iconWidth: 20px;
|
||||
|
||||
.search-bar {
|
||||
$textInputHeight: 19px; // This is equal to the default value, 19px
|
||||
$iconEdgeM: 4px;
|
||||
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
||||
@extend .icon-magnify;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
height: $treeSearchInputBarH;
|
||||
line-height: $treeSearchInputBarH;
|
||||
}
|
||||
|
||||
&:before,
|
||||
.clear-input,
|
||||
.menu-icon {
|
||||
// :before is magnify glass icon
|
||||
height: $iconD;
|
||||
width: $iconD;
|
||||
line-height: $iconD;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: $iconD + $interiorMargin !important;
|
||||
padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
|
||||
|
||||
// Make work for mct-control textfield
|
||||
input {
|
||||
width: inherit; // was 100%
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Magnify glass icon
|
||||
left: $interiorMarginSm;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.clear-input {
|
||||
// Hiding for now with addition of Cancel button
|
||||
right: $iconD + $interiorMargin;
|
||||
|
||||
// Icon is visible only when there is text input
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
&.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
// 'v' invoke menu icon
|
||||
font-size: 0.8em;
|
||||
padding-right: $iconEdgeM;
|
||||
right: $iconEdgeM;
|
||||
text-align: right;
|
||||
&:hover {
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu-holder {
|
||||
float: right;
|
||||
left: -20px;
|
||||
z-index: 70;
|
||||
transition: visibility .05s, opacity .05s;
|
||||
}
|
||||
}
|
||||
|
||||
.results-msg {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -123,8 +123,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.t-frame-outer .s-input-inline {
|
||||
// Prevent inline inputs from being edited when nested in a Layout
|
||||
&.t-frame-outer .title-label.s-input-inline {
|
||||
// Prevent frame titles from being edited when nested in a Layout
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
@@ -161,6 +161,7 @@ body.desktop .frame {
|
||||
// Hide local controls initially and show it them on hover when they're in an element that's in a frame context
|
||||
// Frame template is used because we need to target the lowest nested frame
|
||||
.object-browse-bar .btn-bar {
|
||||
@include trans-prop-nice($props: opacity, $dur: 250ms);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -169,6 +170,7 @@ body.desktop .frame {
|
||||
// Handles the case where we have layouts in layouts.
|
||||
&:hover > .object-browse-bar {
|
||||
.btn-bar {
|
||||
@include trans-prop-nice($props: opacity, $dur: 10ms);
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
|
||||
45
platform/commonUI/general/res/templates/preview.html
Normal file
45
platform/commonUI/general/res/templates/preview.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="t-frame-inner abs t-object-type-{{ domainObject.getModel().type }}" mct-preview>
|
||||
<div class="abs object-browse-bar l-flex-row">
|
||||
<div class="left flex-elem l-flex-row grows">
|
||||
<mct-representation
|
||||
key="'object-header-frame'"
|
||||
mct-object="domainObject"
|
||||
class="l-flex-row flex-elem object-header grows">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
|
||||
<mct-representation
|
||||
key="'switcher'"
|
||||
ng-model="representation"
|
||||
mct-object="domainObject">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
<div class="abs object-holder">
|
||||
<mct-representation
|
||||
key="representation.selected.key"
|
||||
mct-object="representation.selected.key && domainObject">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
55
platform/commonUI/general/src/actions/MCTPreviewAction.js
Normal file
55
platform/commonUI/general/src/actions/MCTPreviewAction.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
|
||||
var PREVIEW_TEMPLATE = '<mct-representation key="\'mct-preview\'"' +
|
||||
'class="t-rep-frame holder"' +
|
||||
'mct-object="domainObject">' +
|
||||
'</mct-representation>';
|
||||
|
||||
function MCTPreviewAction($compile, $rootScope, context) {
|
||||
context = context || {};
|
||||
this.domainObject = context.selectedObject || context.domainObject;
|
||||
this.$rootScope = $rootScope;
|
||||
this.$compile = $compile;
|
||||
}
|
||||
|
||||
MCTPreviewAction.prototype.perform = function () {
|
||||
var newScope = this.$rootScope.$new();
|
||||
newScope.domainObject = this.domainObject;
|
||||
|
||||
this.$compile(PREVIEW_TEMPLATE)(newScope);
|
||||
};
|
||||
|
||||
MCTPreviewAction.appliesTo = function (context) {
|
||||
var domainObject = (context || {}).domainObject,
|
||||
status = domainObject.getCapability('status');
|
||||
|
||||
return !(status && status.get('editing'));
|
||||
};
|
||||
|
||||
return MCTPreviewAction;
|
||||
}
|
||||
);
|
||||
64
platform/commonUI/general/src/directives/MCTPreview.js
Normal file
64
platform/commonUI/general/src/directives/MCTPreview.js
Normal file
@@ -0,0 +1,64 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2016, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
define(['zepto', '../services/Overlay'], function ($, Overlay) {
|
||||
function MCTPreview($document) {
|
||||
|
||||
function link($scope, $element) {
|
||||
var actions = $scope.domainObject.getCapability('action'),
|
||||
notebookAction = actions.getActions({key: 'notebook-new-entry'})[0];
|
||||
|
||||
var notebookButton = notebookAction ?
|
||||
[
|
||||
{
|
||||
class: 'icon-notebook new-notebook-entry',
|
||||
title: 'New Notebook Entry',
|
||||
clickHandler: function (event) {
|
||||
event.stopPropagation();
|
||||
notebookAction.perform();
|
||||
}
|
||||
}
|
||||
] : [];
|
||||
|
||||
var overlayService = new Overlay({
|
||||
$document: $document,
|
||||
$element: $element[0],
|
||||
$scope: $scope,
|
||||
browseBarButtons: notebookButton
|
||||
});
|
||||
|
||||
overlayService.toggleOverlay();
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
$element.remove();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: link
|
||||
};
|
||||
}
|
||||
|
||||
return MCTPreview;
|
||||
|
||||
});
|
||||
185
platform/commonUI/general/src/services/Overlay.js
Normal file
185
platform/commonUI/general/src/services/Overlay.js
Normal file
@@ -0,0 +1,185 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/**
|
||||
* Module defining OverlayService. Created by deeptailor on 03/29/2018
|
||||
*/
|
||||
|
||||
define(['zepto'], function ($) {
|
||||
var OVERLAY_TEMPLATE = '' +
|
||||
' <div class="abs blocker"></div>' +
|
||||
' <div class="abs outer-holder">' +
|
||||
' <a class="close icon-x-in-circle"></a>' +
|
||||
' <div class="abs inner-holder l-flex-col">' +
|
||||
' <div class="t-contents flex-elem holder grows"></div>' +
|
||||
' <div class="bottom-bar flex-elem holder">' +
|
||||
' <a class="t-done s-button major">Done</a>' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
' </div>';
|
||||
|
||||
/*
|
||||
* An Overlay Service when instantiated creates an overlay dialog.
|
||||
* @param {Object} options The options object required to instantiate the overlay service
|
||||
* options = {
|
||||
* $document: document object,
|
||||
* $scope: angular $scope object,
|
||||
* element: node to be injected into overlay as a view,
|
||||
* overlayWillMount: callback executed before overlay is injected,
|
||||
* overlayWillUnmount: callback executed before overlay is removed,
|
||||
* overlayDidMount: callback executed after overlay is injected,
|
||||
* overlayDidUnmount: callback executed after overlay is removed
|
||||
* browseBarButtons: an array of desired buttons to be added to the browse bar of the overlay.
|
||||
* the array should consist of button objects containing:
|
||||
* a) class - css class to be added to the button div
|
||||
* b) title - desired button title
|
||||
* c) clickHandler - callback to be added to the click event listener of the button
|
||||
* }
|
||||
* $document, $scope and element are required
|
||||
*/
|
||||
|
||||
function Overlay(options) {
|
||||
this.element = options.$element;
|
||||
this.document = options.$document[0];
|
||||
this.$scope = options.$scope;
|
||||
|
||||
this.overlayWillMount = options.overlayWillMount;
|
||||
this.overlayWillUnmount = options.overlayWillUnmount;
|
||||
|
||||
this.overlayDidMount = options.overlayDidMount;
|
||||
this.overlayDidUnmount = options.overlayDidUnmount;
|
||||
|
||||
this.browseBarButtons = options.browseBarButtons || [];
|
||||
this.buttons = [];
|
||||
|
||||
this.openOverlay = this.openOverlay.bind(this);
|
||||
this.closeOverlay = this.closeOverlay.bind(this);
|
||||
this.toggleOverlay = this.toggleOverlay.bind(this);
|
||||
this.removeButtons = this.removeButtons.bind(this);
|
||||
|
||||
this.isOverlayOpen = false;
|
||||
}
|
||||
|
||||
Overlay.prototype.openOverlay = function () {
|
||||
|
||||
if (this.overlayWillMount && typeof this.overlayWillMount === 'function') {
|
||||
this.overlayWillMount();
|
||||
}
|
||||
|
||||
this.overlay = this.document.createElement('div');
|
||||
$(this.overlay).addClass('abs overlay l-large-view');
|
||||
this.overlay.innerHTML = OVERLAY_TEMPLATE;
|
||||
|
||||
this.overlayContainer = this.overlay.querySelector('.t-contents');
|
||||
|
||||
this.closeButton = this.overlay.querySelector('a.close');
|
||||
this.closeButton.addEventListener('click', this.toggleOverlay);
|
||||
|
||||
this.doneButton = this.overlay.querySelector('a.t-done');
|
||||
this.doneButton.addEventListener('click', this.toggleOverlay);
|
||||
|
||||
this.blocker = this.overlay.querySelector('.abs.blocker');
|
||||
this.blocker.addEventListener('click', this.toggleOverlay);
|
||||
|
||||
this.document.body.appendChild(this.overlay);
|
||||
|
||||
this.overlayContainer.appendChild(this.element);
|
||||
|
||||
this.browseBar = this.overlay.querySelector('.object-browse-bar .right');
|
||||
|
||||
if (this.browseBarButtons && Array.isArray(this.browseBarButtons)) {
|
||||
this.browseBarButtons.forEach(function (buttonObject) {
|
||||
var button = newButtonTemplate(buttonObject.class, buttonObject.title);
|
||||
this.browseBar.prepend(button);
|
||||
button.addEventListener('click', buttonObject.clickHandler);
|
||||
this.buttons.push(button);
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
if (this.overlayDidMount && typeof this.overlayDidMount === 'function') {
|
||||
this.overlayDidMount();
|
||||
}
|
||||
};
|
||||
|
||||
Overlay.prototype.closeOverlay = function () {
|
||||
|
||||
if (this.overlayWillUnmount && typeof this.overlayWillUnmount === 'function') {
|
||||
this.overlayWillUnmount();
|
||||
}
|
||||
|
||||
this.overlayContainer.removeChild(this.element);
|
||||
this.document.body.removeChild(this.overlay);
|
||||
|
||||
this.closeButton.removeEventListener('click', this.toggleOverlay);
|
||||
this.closeButton = undefined;
|
||||
|
||||
this.doneButton.removeEventListener('click', this.toggleOverlay);
|
||||
this.doneButton = undefined;
|
||||
|
||||
this.blocker.removeEventListener('click', this.toggleOverlay);
|
||||
this.blocker = undefined;
|
||||
|
||||
this.overlayContainer = undefined;
|
||||
this.overlay = undefined;
|
||||
|
||||
this.removeButtons();
|
||||
|
||||
if (this.overlayDidUnmount && typeof this.overlayDidUnmount === 'function') {
|
||||
this.overlayDidUnmount();
|
||||
}
|
||||
};
|
||||
|
||||
Overlay.prototype.toggleOverlay = function (event) {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
if (!this.isOverlayOpen) {
|
||||
this.openOverlay();
|
||||
this.isOverlayOpen = true;
|
||||
} else {
|
||||
this.closeOverlay();
|
||||
this.isOverlayOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
Overlay.prototype.removeButtons = function () {
|
||||
this.buttons.forEach(function (button) {
|
||||
button.remove();
|
||||
}.bind(this));
|
||||
|
||||
this.buttons = [];
|
||||
};
|
||||
|
||||
function newButtonTemplate(classString, title) {
|
||||
var NEW_BUTTON_TEMPLATE = '<a class="s-button labeled' + classString + '">' +
|
||||
'<span class="title-label">' + title + '</span>' +
|
||||
'</a>';
|
||||
|
||||
var button = document.createElement('div');
|
||||
$(button).addClass('holder flex-elem');
|
||||
button.innerHTML = NEW_BUTTON_TEMPLATE;
|
||||
return button;
|
||||
}
|
||||
|
||||
return Overlay;
|
||||
});
|
||||
Reference in New Issue
Block a user