alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Layout] Add view large button for zooming

Browse Source 
Fixes #1437
Markup and CSS for `view large` button in frame context;
Sass formatting cleanups; removed unused styles from
_layout.scss; mods to MCTTriggerModal.js to remove
button label functionality;

Added new "icon-expand" glyph and class;

Fixes #1437
Fixes #1423
New overlay > l-dialog and l-large-view classes;
Fix context-menu z-index to allow context menu
to appear in the overlay;
.object-top-bar refactored and replaced with
.object-browse-bar;
frame > hover now only displays local controls for
proper level, handles nested layout situation;
Fixed font-weight display issues;
MCTTriggerModal.js modified to do the following:
- Remove .frame classes when displaying object in overlay
- Allow click on this overlay .blocker to dismiss overlay

Fixed min-width issue incorrectly targeting .object-browse-bar in frame context;

Added expand anim to large view holder;
Changed close button icon

Significant mobile styling and cleanups;
Markup mods for overlay.html;
Handles dialog on top of large view;
Form validation now displays better in mobile;
Updated /src/api/ui/dialog.html to be in-line
with /platform/commonUI/dialog/res/templates/overlay.html;
Moved border-radius from containerBase to btnBase mixins;

Animate with scale for GPU acceleration

Change desktop animation to use scale, so that it is hardware
accelerated and buttery smooth.  Also fixes text anti-aliasing
to improve readability.

Moved mobile/overlay/_overlay.scss styles into
overlay/_overlay.scss; removed mobile/overlay/_overlay.scss;
Cleanups in _overlay.scss; restored max-width/max-height
to dialogs (removed in #1376 for #1298) and added
min-width;

[Frontend] Mobile fixes in overlay and related

Fixes #1437
Added mobile-specific styling to _messages.scss;
Fixed button layout and margins in _overlay.scss;
Fixed message.html to not default to major style
buttons;

[Frontend] Timing tweaks

Fixes #1437
Moved large view expand transition duration
into theme _constants files; shortened anim
duration

Fix Style errors

[mctTriggerModal] correct scope for toggle

Correct scope for toggleFunction such that #1503 no longer occurs.

Fixes #1503

[Style] Add copyright header
This commit is contained in:
Pete Richards
2017-02-14 15:23:17 -08:00
parent 9f8578d79e
commit 04c2eac9ef
23 changed files with 713 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
platform/features/layout/bundle.js
View File

@@ -24,6 +24,7 @@ define([
"./src/LayoutController",
"./src/FixedController",
"./src/LayoutCompositionPolicy",
'./src/MCTTriggerModal',
"text!./res/templates/layout.html",
"text!./res/templates/fixed.html",
"text!./res/templates/frame.html",
@@ -37,6 +38,7 @@ define([
LayoutController,
FixedController,
LayoutCompositionPolicy,
MCTTriggerModal,
layoutTemplate,
fixedTemplate,
frameTemplate,
@@ -222,6 +224,15 @@ define([
"template": frameTemplate
}
],
"directives": [
{
"key": "mctTriggerModal",
"implementation": MCTTriggerModal,
"depends": [
"$document"
]
}
],
"controllers": [
{
"key": "LayoutController",

2
platform/features/layout/res/templates/frame.html
View File

@@ -20,7 +20,7 @@
at runtime from the About dialog for additional information.
-->
<div class="frame frame-template abs">
<div class="abs object-top-bar l-flex-row">
<div class="abs object-browse-bar l-flex-row">
<div class="left flex-elem l-flex-row grows">
<mct-representation
key="'object-header'"

137
platform/features/layout/src/MCTTriggerModal.js Normal file
View File

@@ -0,0 +1,137 @@
/*****************************************************************************
* 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'
], function (
$
) {
var OVERLAY_TEMPLATE = '' +
'<div class="abs overlay l-large-view">' +
' <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>' +
'</div>';
/**
* MCT Trigger Modal is intended for use in only one location: inside the
* object-header to allow views in a layout to be popped out in a modal.
* Users can close the modal and go back to normal, and everything generally
* just works fine.
*
* This code is sensitive to how our html is constructed-- particularly with
* how it locates the the container of an element in a layout. However, it
* should be able to handle slight relocations so long as it is always a
* descendent of a `.frame` element.
*/
function MCTTriggerModal($document) {
var document = $document[0];
function link($scope, $element) {
var frame = $element.parent();
for (var i = 0; i < 10; i++) {
if (frame.hasClass('frame')) {
break;
}
frame = frame.parent();
}
if (!frame.hasClass('frame')) {
$element.remove();
return;
}
frame = frame[0];
var layoutContainer = frame.parentElement,
isOpen = false,
toggleOverlay,
overlay,
closeButton,
doneButton,
blocker,
overlayContainer;
function openOverlay() {
// Remove frame classes from being applied in a non-frame context
$(frame).removeClass('frame frame-template');
overlay = document.createElement('span');
overlay.innerHTML = OVERLAY_TEMPLATE;
overlayContainer = overlay.querySelector('.t-contents');
closeButton = overlay.querySelector('a.close');
closeButton.addEventListener('click', toggleOverlay);
doneButton = overlay.querySelector('a.t-done');
doneButton.addEventListener('click', toggleOverlay);
blocker = overlay.querySelector('.abs.blocker');
blocker.addEventListener('click', toggleOverlay);
document.body.appendChild(overlay);
layoutContainer.removeChild(frame);
overlayContainer.appendChild(frame);
}
function closeOverlay() {
$(frame).addClass('frame frame-template');
overlayContainer.removeChild(frame);
layoutContainer.appendChild(frame);
document.body.removeChild(overlay);
closeButton.removeEventListener('click', toggleOverlay);
closeButton = undefined;
doneButton.removeEventListener('click', toggleOverlay);
doneButton = undefined;
blocker.removeEventListener('click', toggleOverlay);
blocker = undefined;
overlayContainer = undefined;
overlay = undefined;
}
toggleOverlay = function () {
if (!isOpen) {
openOverlay();
isOpen = true;
} else {
closeOverlay();
isOpen = false;
}
};
$element.on('click', toggleOverlay);
$scope.$on('$destroy', function () {
$element.off('click', toggleOverlay);
});
}
return {
restrict: 'A',
link: link
};
}
return MCTTriggerModal;
});

122
platform/features/layout/test/MCTTriggerModalSpec.js Normal file
View File

@@ -0,0 +1,122 @@
/*****************************************************************************
* 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([
'../src/MCTTriggerModal'
], function (
MCTTriggerModal
) {
describe('MCTTriggerModal', function () {
var $scope,
$element,
frame,
layoutContainer,
$document,
mctTriggerModal;
function makeElement(classes, parentEl) {
var elem = jasmine.createSpyObj('element.' + classes.join('.'), [
'hasClass',
'parent'
]);
elem.hasClass.andCallFake(function (className) {
return classes.indexOf(className) !== -1;
});
elem.parent.andReturn(parentEl);
var div = document.createElement('div');
div.className = classes.join(' ');
parentEl[0].appendChild(div);
elem[0] = div;
return elem;
}
beforeEach(function () {
$scope = jasmine.createSpyObj('$scope', ['$on']);
$element = jasmine.createSpyObj('$element', [
'parent',
'remove',
'on',
'off'
]);
layoutContainer = document.createElement('div');
frame = makeElement(['frame'], [layoutContainer]);
var child = makeElement([], frame);
for (var i = 0; i < 5; i++) {
child = makeElement([], child);
}
$element.parent.andReturn(child);
$document = [jasmine.createSpyObj('document', ['createElement'])];
$document[0].body = document.createElement('div');
$document[0].createElement.andCallFake(function (tag) {
return document.createElement(tag);
});
mctTriggerModal = new MCTTriggerModal($document);
});
it('is a directive definition', function () {
expect(mctTriggerModal.restrict).toBe('A');
expect(mctTriggerModal.link).toEqual(jasmine.any(Function));
});
describe('link', function () {
beforeEach(function () {
mctTriggerModal.link($scope, $element);
});
it('attaches handlers to $element', function () {
expect($element.on).toHaveBeenCalledWith(
'click',
jasmine.any(Function)
);
});
it('cleans up on $scope $destroy', function () {
expect($scope.$on).toHaveBeenCalledWith(
'$destroy',
jasmine.any(Function)
);
$scope.$on.mostRecentCall.args[1]();
expect($element.off).toHaveBeenCalledWith(
'click',
jasmine.any(Function)
);
});
it('opens and closes overlays', function () {
[
'a.close', 'a.t-done', '.abs.blocker'
].forEach(function (selector) {
$element.on.mostRecentCall.args[1]();
var container = $document[0].body.querySelector('.t-contents');
expect(container.children[0]).toBe(frame[0]);
expect(layoutContainer.children[0]).not.toBe(frame[0]);
$document[0].body.querySelector(selector)
.dispatchEvent(new Event('click'));
expect(container.children[0]).not.toBe(frame[0]);
expect(layoutContainer.children[0]).toBe(frame[0]);
});
});
});
});
});