[Mobile - Gestures] Merge

Merged with Mobile.

.gitignore

@@ -3,9 +3,13 @@
 *.gzip
 *.tgz
 *.DS_Store
-*.idea
+
 *.sass-cache
 
+# Intellij project configuration files
+*.idea
+*.iml
+
 # External dependencies
 
 # Build output

CONTRIBUTING.md

@@ -0,0 +1,298 @@
+# Contributing to Open MCT Web
+
+This document describes the process of contributing to Open MCT Web as well
+as the standards that will be applied when evaluating contributions.
+
+Please be aware that additional agreements will be necessary before we can
+accept changes from external contributors.
+
+## Summary
+
+The short version:
+
+1. Write your contribution.
+2. Make sure your contribution meets code, test, and commit message
+   standards as described below.
+3. Submit a pull request from a topic branch back to `master`. Include a check
+   list, as described below. (Optionally, assign this to a specific member
+   for review.)
+4. Respond to any discussion. When the reviewer decides it's ready, they
+   will merge back `master` and fill out their own check list.
+
+## Contribution Process
+
+Open MCT Web uses git for software version control, and for branching and
+merging. The central repository is at
+https://github.com/nasa/openmctweb.git.
+
+### Roles
+
+References to roles are made throughout this document. These are not intended
+to reflect titles or long-term job assignments; rather, these are used as
+descriptors to refer to members of the development team performing tasks in
+the check-in process. These roles are:
+
+* _Author_: The individual who has made changes to files in the software
+  repository, and wishes to check these in.
+* _Reviewer_: The individual who reviews changes to files before they are
+  checked in.
+* _Integrator_: The individual who performs the task of merging these files.
+  Usually the reviewer.
+
+### Branching
+
+Three basic types of branches may be included in the above repository:
+
+1. Master branch.
+2. Topic branches.
+3. Developer branches.
+
+Branches which do not fit into the above categories may be created and used
+during the course of development for various reasons, such as large-scale
+refactoring of code or implementation of complex features which may cause
+instability. In these exceptional cases it is the responsibility of the
+developer who initiates the task which motivated this branching to
+communicate to the team the role of these branches and any associated
+procedures for the duration of their use.
+
+#### Master Branch
+
+The role of the `master` branches is to represent the latest
+"ready for test" version of the software. Source code on the master
+branch has undergone peer review, and will undergo regular automated
+testing with notification on failure. Master branches may be unstable
+(particularly for recent features), but the intent is for the stability of
+any features on master branches to be non-decreasing. It is the shared
+responsibility of authors, reviewers, and integrators to ensure this.
+
+#### Topic Branches
+
+Topic branches are used by developers to perform and record work on issues.
+
+Topic branches need not necessarily be stable, even when pushed to the
+central repository; in fact, the practice of making incremental commits
+while working on an issue and pushing these to the central repository is
+encouraged, to avoid lost work and to share work-in-progress. (Small commits
+also help isolate changes, which can help in identifying which change
+introduced a defect, particularly when that defect went unnoticed for some
+time, e.g. using `git bisect`.)
+
+Topic branches should be named according to their corresponding issue
+identifiers, all lower case, without hyphens. (e.g. branch mct9 would refer
+to issue #9.)
+
+In some cases, work on an issue may warrant the use of multiple divergent
+branches; for instance, when a developer wants to try more than one solution
+and compare them, or when a "dead end" is reached and an initial approach to
+resolving an issue needs to be abandoned. In these cases, a short suffix
+should be added to the additional branches; this may be simply a single
+character (e.g. wtd481b) or, where useful, a descriptive term for what
+distinguishes the branches (e.g. wtd481verbose). It is the responsibility of
+the author to communicate which branch is intended to be merged to both the
+reviewer and the integrator.
+
+#### Developer Branches
+
+Developer branches are any branches used for purposes outside of the scope
+of the above; e.g. to try things out, or maintain a "my latest stuff"
+branch that is not delayed by the review and integration process. These
+may be pushed to the central repository, and may follow any naming convention
+desired so long as the owner of the branch is identifiable, and so long as
+the name chosen could not be mistaken for a topic or master branch.
+
+### Merging
+
+When development is complete on an issue, the first step toward merging it
+back into the master branch is to file a Pull Request. The contributions
+should meet code, test, and commit message standards as described below,
+and the pull request should include a completed author checklist, also
+as described below. Pull requests may be assigned to specific team
+members when appropriate (e.g. to draw to a specific person's attention.)
+
+Code review should take place using discussion features within the pull
+request. When the reviewer is satisfied, they should add a comment to
+the pull request containing the reviewer checklist (from below) and complete
+the merge back to the master branch.
+
+## Standards
+
+Contributions to Open MCT Web are expected to meet the following standards.
+In addition, reviewers should use general discretion before accepting
+changes.
+
+### Code Standards
+
+JavaScript sources in Open MCT Web must satisfy JSLint under its default
+settings. This is verified by the command line build.
+
+#### Code Guidelines
+
+JavaScript sources in Open MCT Web should:
+
+* Use four spaces for indentation. Tabs should not be used.
+* Include JSDoc for any exposed API (e.g. public methods, constructors.)
+* Include non-JSDoc comments as-needed for explaining private variables,
+  methods, or algorithms when they are non-obvious.
+* Define one public class per script, expressed as a constructor function
+  returned from an AMD-style module.
+* Follow “Java-like” naming conventions. These includes:
+  * Classes should use camel case, first letter capitalized
+    (e.g. SomeClassName.)
+  * Methods, variables, fields, and function names should use camel case,
+    first letter lower-case (e.g. someVariableName.) Constants
+    (variables or fields which are meant to be declared and initialized
+    statically, and never changed) should use only capital letters, with
+    underscores between words (e.g. SOME_CONSTANT.)
+  * File name should be the name of the exported class, plus a .js extension
+    (e.g. SomeClassName.js)
+* Avoid anonymous functions, except when functions are short (a few lines)
+  and/or their inclusion makes sense within the flow of the code
+  (e.g. as arguments to a forEach call.)
+* Avoid deep nesting (especially of functions), except where necessary
+  (e.g. due to closure scope.)
+* End with a single new-line character.
+* Expose public methods by declaring them on the class's prototype.
+* Within a given function's scope, do not mix declarations and imperative
+  code, and  present these in the following order:
+  * First, variable declarations and initialization.
+  * Second, function declarations.
+  * Third, imperative statements.
+  * Finally, the returned value.
+
+Deviations from Open MCT Web code style guidelines require two-party agreement,
+typically from the author of the change and its reviewer.
+
+#### Code Example
+
+```js
+/*global define*/
+
+/**
+ * Bundles should declare themselves as namespaces in whichever source
+ * file is most like the "main point of entry" to the bundle.
+ * @namespace some/bundle
+ */
+define(
+    ['./OtherClass'],
+    function (OtherClass) {
+        "use strict";
+
+        /**
+         * A summary of how to use this class goes here.
+         *
+         * @constructor
+         * @memberof some/bundle
+         */
+        function ExampleClass() {
+        }
+
+        // Methods which are not intended for external use should
+        // not have JSDoc (or should be marked @private)
+        ExampleClass.prototype.privateMethod = function () {
+        };
+
+        /**
+         * A summary of this method goes here.
+         * @param {number} n a parameter
+         * @returns {number} a return value
+         */
+        ExampleClass.prototype.publicMethod = function (n) {
+            return n * 2;
+        }
+
+        return ExampleClass;
+    }
+);
+```
+
+### Test Standards
+
+Automated testing shall occur whenever changes are merged into the main
+development branch and must be confirmed alongside any pull request.
+
+Automated tests are typically unit tests which exercise individual software
+components. Tests are subject to code review along with the actual
+implementation, to ensure that tests are applicable and useful.
+
+Examples of useful tests:
+* Tests which replicate bugs (or their root causes) to verify their
+  resolution.
+* Tests which reflect details from software specifications.
+* Tests which exercise edge or corner cases among inputs.
+* Tests which verify expected interactions with other components in the
+  system.
+
+During automated testing, code coverage metrics will be reported. Line
+coverage must remain at or above 80%.
+
+### Commit Message Standards
+
+Commit messages should:
+
+* Contain a one-line subject, followed by one line of white space,
+  followed by one or more descriptive paragraphs, each separated by one
+  line of white space.
+* Contain a short (usually one word) reference to the feature or subsystem
+  the commit effects, in square brackets, at the start of the subject line
+  (e.g. `[Documentation] Draft of check-in process`)
+* Contain a reference to a relevant issue number in the body of the commit.
+  * This is important for traceability; while branch names also provide this,
+    you cannot tell from looking at a commit what branch it was authored on.
+* Describe the change that was made, and any useful rationale therefore.
+  * Comments in code should explain what things do, commit messages describe
+    how they came to be done that way.
+* Provide sufficient information for a reviewer to understand the changes
+  made and their relationship to previous code.
+
+Commit messages should not:
+
+* Exceed 54 characters in length on the subject line.
+* Exceed 72 characters in length in the body of the commit.
+  * Except where necessary to maintain the structure of machine-readable or
+    machine-generated text (e.g. error messages)
+
+See [Contributing to a Project](http://git-scm.com/book/ch5-2.html) from
+Pro Git by Shawn Chacon and Ben Straub for a bit of the rationale behind
+these standards.
+
+## Issue Reporting
+
+Issues are tracked at https://github.com/nasa/openmctweb/issues
+
+Issues should include:
+
+* A short description of the issue encountered.
+* A longer-form description of the issue encountered. When possible, steps to
+  reproduce the issue.
+* When possible, a description of the impact of the issue. What use case does
+  it impede?
+* An assessment of the severity of the issue.
+
+Issue severity is categorized as follows (in ascending order):
+
+* _Trivial_: Minimal impact on the usefulness and functionality of the
+  software; a "nice-to-have."
+* _(Unspecified)_: Major loss of functionality or impairment of use.
+* _Critical_: Large-scale loss of functionality or impairment of use,
+  such that remaining utility becomes marginal.
+* _Blocker_: Harmful or otherwise unacceptable behavior. Must fix.
+
+## Check Lists
+
+The following check lists should be completed and attached to pull requests
+when they are filed (author checklist) and when they are merged (reviewer
+checklist.)
+
+### Author Checklist
+
+1. Changes address original issue?
+2. Unit tests included and/or updated with changes?
+3. Command line build passes?
+4. Expect to pass code review?
+
+### Reviewer Checklist
+
+1. Changes appear to address issue?
+2. Appropriate unit tests included?
+3. Code style and in-line documentation are appropriate?
+4. Commit messages meet standards?

bundles.json

@@ -18,6 +18,7 @@
     "platform/features/scrolling",
     "platform/features/events",
     "platform/forms",
+    "platform/identity",
     "platform/persistence/queue",
     "platform/policy",
     "platform/entanglement",

circle.yml

@@ -8,3 +8,7 @@ deployment:
     branch: search
     heroku:
       appname: openmctweb-staging-un
+  openmctweb-staging-deux:
+    branch: mobile
+    heroku:
+      appname: openmctweb-staging-deux

example/identity/bundle.json

@@ -0,0 +1,12 @@
+{
+    "extensions": {
+        "components": [
+            {
+                "implementation": "ExampleIdentityService.js",
+                "provides": "identityService",
+                "type": "provider",
+                "depends": [ "dialogService" ]
+            }
+        ]
+    }
+}

example/identity/src/ExampleIdentityService.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        "use strict";
+
+        var DEFAULT_IDENTITY = { key: "user", name: "Example User" },
+            DIALOG_STRUCTURE = {
+                name: "Identify Yourself",
+                sections: [{ rows: [
+                    {
+                        name: "User ID",
+                        control: "textfield",
+                        key: "key",
+                        required: true
+                    },
+                    {
+                        name: "Human name",
+                        control: "textfield",
+                        key: "name",
+                        required: true
+                    }
+                ]}]
+            };
+
+
+        /**
+         * Example implementation of an identity service. This prompts the
+         * user to enter a name and user ID; in a more realistic
+         * implementation, this would be read from a server, possibly
+         * prompting for a user name and password (or similar) as
+         * appropriate.
+         *
+         * @implements {IdentityService}
+         * @memberof platform/identity
+         */
+        function ExampleIdentityProvider(dialogService) {
+            // Handle rejected dialog messages by treating the
+            // current user as undefined.
+            function echo(v) { return v; }
+            function giveUndefined() { return undefined; }
+
+            this.userPromise =
+                dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
+                    .then(echo, giveUndefined);
+        }
+
+        ExampleIdentityProvider.prototype.getUser = function () {
+            return this.userPromise;
+        };
+
+        return ExampleIdentityProvider;
+    }
+);

jsdoc.json

@@ -1,10 +1,12 @@
 {
     "source": {
         "include": [
-            "example/",
             "platform/"
         ],
-        "includePattern": "(example|platform)/.+\\.js$",
+        "includePattern": "platform/.+\\.js$",
         "excludePattern": ".+\\Spec\\.js$|lib/.+"
-    }
-}
+    },
+    "plugins": [
+        "plugins/markdown"
+    ]
+}

package.json

@@ -28,6 +28,7 @@
     "start": "node app.js",
     "test": "karma start --single-run",
     "jshint": "jshint platform example || exit 0",
+    "watch": "karma start",
     "jsdoc": "jsdoc -c jsdoc.json -r -d target/docs/api",
     "otherdoc": "node docs/gendocs.js --in docs/src --out target/docs",
     "docs": "npm run jsdoc ; npm run otherdoc"

platform/commonUI/about/src/AboutController.js

@@ -21,6 +21,11 @@
  *****************************************************************************/
 /*global define*/
 
+
+/**
+ * Implements Open MCT Web's About dialog.
+ * @namespace platform/commonUI/about
+ */
 define(
     [],
     function () {
@@ -29,35 +34,36 @@ define(
         /**
          * The AboutController provides information to populate the
          * About dialog.
+         * @memberof platform/commonUI/about
          * @constructor
          * @param {object[]} versions an array of version extensions;
          *        injected from `versions[]`
          * @param $window Angular-injected window object
          */
         function AboutController(versions, $window) {
-            return {
-                /**
-                 * Get version info. This is given as an array of
-                 * objects, where each object is intended to appear
-                 * as a line-item in the version information listing.
-                 * @memberof AboutController#
-                 * @returns {object[]} version information
-                 */
-                versions: function () {
-                    return versions;
-                },
-                /**
-                 * Open a new window (or tab, depending on browser
-                 * configuration) containing open source licenses.
-                 * @memberof AboutController#
-                 */
-                openLicenses: function () {
-                    // Open a new browser window at the licenses route
-                    $window.open("#/licenses");
-                }
-            };
+            this.versionDefinitions = versions;
+            this.$window = $window;
         }
 
+        /**
+         * Get version info. This is given as an array of
+         * objects, where each object is intended to appear
+         * as a line-item in the version information listing.
+         * @returns {object[]} version information
+         */
+        AboutController.prototype.versions = function () {
+            return this.versionDefinitions;
+        };
+
+        /**
+         * Open a new window (or tab, depending on browser
+         * configuration) containing open source licenses.
+         */
+        AboutController.prototype.openLicenses = function () {
+            // Open a new browser window at the licenses route
+            this.$window.open("#/licenses");
+        };
+
         return AboutController;
     }
-);
+);

platform/commonUI/about/src/LicenseController.js

@@ -29,20 +29,22 @@ define(
         /**
          * Provides extension-introduced licenses information to the
          * licenses route.
+         * @memberof platform/commonUI/about
          * @constructor
          */
         function LicenseController(licenses) {
-            return {
-                /**
-                 * Get license information.
-                 * @returns {Array} license extensions
-                 */
-                licenses: function () {
-                    return licenses;
-                }
-            };
+            this.licenseDefinitions = licenses;
         }
 
+        /**
+         * Get license information.
+         * @returns {Array} license extensions
+         * @memberof platform/commonUI/about.LicenseController#
+         */
+        LicenseController.prototype.licenses = function () {
+            return this.licenseDefinitions;
+        };
+
         return LicenseController;
     }
-);
+);

platform/commonUI/about/src/LogoController.js

@@ -29,21 +29,23 @@ define(
         /**
          * The LogoController provides functionality to the application
          * logo in the bottom-right of the user interface.
+         * @memberof platform/commonUI/about
          * @constructor
          * @param {OverlayService} overlayService the overlay service
          */
         function LogoController(overlayService) {
-            return {
-                /**
-                 * Display the About dialog.
-                 * @memberof LogoController#
-                 */
-                showAboutDialog: function () {
-                    overlayService.createOverlay("overlay-about");
-                }
-            };
+            this.overlayService = overlayService;
         }
 
+        /**
+         * Display the About dialog.
+         * @memberof LogoController#
+         * @memberof platform/commonUI/about.LogoController#
+         */
+        LogoController.prototype.showAboutDialog = function () {
+            this.overlayService.createOverlay("overlay-about");
+        };
+
         return LogoController;
     }
-);
+);

platform/commonUI/browse/bundle.json

@@ -69,8 +69,8 @@
             {
                 "key": "grid-item",
                 "templateUrl": "templates/items/grid-item.html",
-                "uses": [ "type", "action" ],
-                "gestures": [ "info","menu" ]
+                "uses": [ "type", "action", "location" ],
+                "gestures": [ "info", "menu" ]
             },
             {
                 "key": "object-header",
@@ -93,12 +93,7 @@
             {
                 "key": "navigationService",
                 "implementation": "navigation/NavigationService.js"
-            },        
-            {
-                "key": "creationService",
-                "implementation": "creation/CreationService.js",
-                "depends": [ "persistenceService", "$q", "$log" ]
-            }        
+            }
         ],
         "actions": [
             {
@@ -115,7 +110,7 @@
                 "depends": [ "urlService", "$window" ],
                 "group": "windowing",
                 "glyph": "y",
-			  	"priority": "preferred"
+                "priority": "preferred"
             },
             {
                 "key": "fullscreen",
@@ -123,7 +118,7 @@
                 "category": "view-control",
                 "group": "windowing",
                 "glyph": "z",
-			  	"priority": "default"
+                "priority": "default"
             }
         ],
         "views": [
@@ -146,6 +141,13 @@
                 "type": "provider",
                 "implementation": "creation/CreateActionProvider.js",
                 "depends": [ "typeService", "dialogService", "creationService", "policyService" ]
+            },
+            {
+                "key": "CreationService",
+                "provides": "creationService",
+                "type": "provider",
+                "implementation": "creation/CreationService.js",
+                "depends": [ "persistenceService", "$q", "$log" ]
             }
         ],
         "runs": [

platform/commonUI/browse/res/templates/back-arrow.html

@@ -21,8 +21,8 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<span ng-controller="BrowseController"
-      ng-click='backArrow()'
-      ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
-    <a class='type-icon icon ui-symbol'>{</a>
-</span>
+<a ng-controller="BrowseController"
+      class='type-icon icon ui-symbol s-back'
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''"
+      ng-click='backArrow()'>{
+</a>

platform/commonUI/browse/res/templates/browse-object.html

@@ -20,22 +20,23 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="BrowseObjectController">
-    <div class="object-browse-bar bar abs">
-        <div class="items-select left abs">
+    <div class="object-browse-bar bar l-flex">
+        <div class="items-select left">
+            <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <!-- Temporarily, on mobile, the button bar is hidden-->
-        <div class="btn-bar right abs mobile-hide">
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }">
-            </mct-representation>
-
+        <div class="btn-bar right">
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
             </mct-representation>
+            <!-- Temporarily, on mobile, the action buttons are hidden-->
+            <mct-representation key="'action-group'"
+                                mct-object="domainObject"
+                                parameters="{ category: 'view-control' }"
+                                class="mobile-hide">
+            </mct-representation>
         </div>
     </div>
 

platform/commonUI/browse/res/templates/browse.html

@@ -20,30 +20,40 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController">
+<div class="abs holder-all browse-mode" ng-controller="BrowseController">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
-                <div class='holder tree-holder abs mobile-tree-holder'>
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
-                    </mct-representation>
-                </div>
-                    <mct-representation key="'create-button'" mct-object="navigatedObject">
-                    </mct-representation>
+            <div class='split-pane-component treeview pane left'>
+	            <div class="holder abs l-mobile">
+	                <mct-representation key="'create-button'" mct-object="navigatedObject">
+	                </mct-representation>
+	                <div class='holder search-holder abs'
+	                     ng-class="{active: treeModel.search}">
+	                    <mct-representation key="'search'"
+	                                 mct-object="domainObject"
+	                                 ng-model="treeModel">
+	                    </mct-representation>
+	                </div>
+	                <div class='tree-holder abs mobile-tree-holder'
+	                     ng-hide="treeModel.search">
+	                    <mct-representation key="'tree'"
+	                                        mct-object="domainObject"
+	                                        ng-model="treeModel">
+	                    </mct-representation>
+	                </div>
+	            </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
-                    <div class='split-pane-component items pane mobile-pane right-repr'>
-                        <div class='holder abs' id='content-area'>
-                            <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                            </mct-representation>
-                        </div>
-                    <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
-                        ng-click="treeSlide()">m</div>                        
-                    </div>   
+
+            <div class='split-pane-component items pane right-repr'>
+                <div class='holder abs l-mobile' id='content-area'>
+                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                    </mct-representation>
+                </div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+            </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -20,11 +20,10 @@
  at runtime from the About dialog for additional information.
 -->
 <div class='object-header object-header-mobile'>
-    <span class="label s-label">
-        <mct-representation key="'back-arrow'"></mct-representation>
-        <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
+    <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
+    <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
+    <span class="l-elem-wrapper l-flex">
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='type-name mobile-important-hide'>{{type.getName()}}</span>
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>

platform/commonUI/browse/res/templates/items/grid-item.html

@@ -20,31 +20,30 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- For selected, add class 'selected' to outer div -->
-<div class='item grid-item'>
-    <div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'>
+<div class='item grid-item' ng-click='action.perform("navigate")'>
+    <div class='contents abs'>
         <div class='top-bar bar abs'>
-            <div class='left abs'>
-                <mct-include key="_checkbox"></mct-include>
-            </div>
-            <div class='right abs mobile-right'>
-                <div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
-                <div class='ui-symbol icon profile' title="Shared">P</div>
-            </div>
+            <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
+            <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
         </div>
         <div class='item-main abs'>
-            <div class='ui-symbol icon lg abs item-type'>{{type.getGlyph()}}</div>
-            <div class='ui-symbol icon abs item-open'>}</div>
+            <div class='ui-symbol icon lg item-type'>
+                {{type.getGlyph()}}
+                <span
+                    class="ui-symbol l-icon-link" title="This object is a link"
+                    ng-show="location.isLink()"
+                    ></span>
+            </div>
+            <div class='ui-symbol abs item-open'>}</div>
         </div>
         <div class='bottom-bar bar abs'>
             <div class='title'>{{model.name}}</div>
             <div class='details'>
+                <span>{{type.getName()}}</span>
                 <span ng-show="model.composition !== undefined">
-                    {{model.composition.length}} Items
+                    - {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
                 </span>
             </div>
         </div>
     </div>
-    <div class="contents abs mobile-info desktop-hide">
-        <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
-    </div>
 </div>

platform/commonUI/browse/src/BrowseController.js

@@ -22,7 +22,8 @@
 /*global define,Promise*/
 
 /**
- * Module defining BrowseController. Created by vwoeltje on 11/7/14.
+ * This bundle implements Browse mode.
+ * @namespace platform/commonUI/browse
  */
 define(
     [],
@@ -39,6 +40,7 @@ define(
          * which Angular templates first have access to the domain object
          * hierarchy.
          *
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
@@ -132,28 +134,70 @@ define(
             // is not the root, then user is navigated to
             // parent
             function navigateToParent() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent(),
-                    grandparent;
-                if (parent.getId() !== ROOT_ID) {
-                    grandparent = parent.getCapability('context').getParent().getId();
-                    navigateTo(parent);
-                    if (grandparent && grandparent !== ROOT_ID) {
-                        $scope.atRoot = false;
-                    } else {
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parentContext,
+                    parent,
+                    grandparentId;
+                
+                // Checks if the current object has a context
+                if (context) {
+                    
+                    // Sets the parent and the parent context
+                    // which is checked
+                    parent = context.getParent();
+                    parentContext = parent.getCapability('context');
+                    
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        // Gets the grandparent id
+                        grandparentId = parentContext.getParent().getId();
+                        
+                        // Navigates to the parent
+                        navigateTo(parent);
+                        
+                        // Checks after navigation if the user is located at the 
+                        // root (grandparent of original selected object, after
+                        // navigation, user is at parent of original object and
+                        // child of grandparent)
+                        if (grandparentId && grandparentId !== ROOT_ID) {
+                            $scope.atRoot = false;
+                            return;
+                        }
+                        
+                        // Set at root if no grandparent exists and
+                        // if grandparent is ROOT, after navigation
                         $scope.atRoot = true;
                     }
-                } else {
-                    $scope.atRoot = true;
                 }
             }
             
             function checkRoot() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent();
-                if (parent.getId() !== ROOT_ID) {
-                    $scope.atRoot = false;
-                } else {
-                    $scope.atRoot = true;
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parentContext,
+                    parent,
+                    grandparent;
+                
+                // Checks if the current object has a context
+                if (context) {
+                    parent = context.getParent();
+                    parentContext = parent.getCapability('context');
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        grandparent = parentContext.getParent();
+                        
+                        // Checks if the grandparent exists
+                        // if it does not exist (for example in search),
+                        // than do not show the back button
+                        if (grandparent) {
+                            $scope.atRoot = false;
+                            return;
+                        }
+                    }
                 }
+                
+                // In any other situation where the context or parent
+                // context does not exist or the user is at ROOT, than
+                // hide the back arrow
+                $scope.atRoot = true;
+               
             }
 
             // Load the root object, put it in the scope.
@@ -187,6 +231,12 @@ define(
                 navigationService.removeListener(setNavigation);
             });
             
+            // If the user has selected an object (and is portrait
+            // on a phone), then hide the tree menu
+            $scope.$on("select-obj", function () {
+                $scope.treeSlide();
+            });
+            
             $scope.backArrow = navigateToParent;
             
             $scope.checkRoot = checkRoot;
@@ -196,3 +246,4 @@ define(
         return BrowseController;
     }
 );
+

platform/commonUI/browse/src/BrowseObjectController.js

@@ -29,6 +29,7 @@ define(
         /**
          * Controller for the `browse-object` representation of a domain
          * object (the right-hand side of Browse mode.)
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function BrowseObjectController($scope, $location, $route) {
@@ -71,3 +72,4 @@ define(
         return BrowseObjectController;
     }
 );
+

platform/commonUI/browse/src/MenuArrowController.js

@@ -33,19 +33,29 @@ define(
          * A left-click on the menu arrow should display a 
          * context menu. This controller launches the context 
          * menu. 
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function MenuArrowController($scope) {
-            function showMenu(event) {
-                var actionContext = {key: 'menu', domainObject: $scope.domainObject, event: event};
-                $scope.domainObject.getCapability('action').perform(actionContext);
-            }
-            
-            return {
-                showMenu: showMenu
-            };
+            this.$scope = $scope;
         }
 
+        /**
+         * Show a context menu for the domain object in this scope.
+         *
+         * @param event the browser event which caused this (used to
+         *        position the menu)
+         */
+        MenuArrowController.prototype.showMenu = function (event) {
+            var actionContext = {
+                key: 'menu',
+                domainObject: this.$scope.domainObject,
+                event: event
+            };
+
+            this.$scope.domainObject.getCapability('action').perform(actionContext);
+        };
+
         return MenuArrowController;
     }
-);
+);

platform/commonUI/browse/src/creation/CreateAction.js

@@ -34,7 +34,10 @@ define(
          * domain objects of a specific type. This is the action that
          * is performed when a user uses the Create menu.
          *
+         * @memberof platform/commonUI/browse
+         * @implements {Action}
          * @constructor
+         *
          * @param {Type} type the type of domain object to create
          * @param {DomainObject} parent the domain object that should
          *        act as a container for the newly-created object
@@ -49,78 +52,84 @@ define(
          *        of the newly-created domain object
          */
         function CreateAction(type, parent, context, dialogService, creationService, policyService) {
+            this.metadata = {
+                key: 'create',
+                glyph: type.getGlyph(),
+                name: type.getName(),
+                type: type.getKey(),
+                description: type.getDescription(),
+                context: context
+            };
+
+            this.type = type;
+            this.parent = parent;
+            this.policyService = policyService;
+            this.dialogService = dialogService;
+            this.creationService = creationService;
+        }
+
+        /**
+         * Create a new object of the given type.
+         * This will prompt for user input first.
+         */
+        CreateAction.prototype.perform = function () {
             /*
              Overview of steps in object creation:
 
              1. Show dialog
-               a. Prepare dialog contents
-               b. Invoke dialogService
+             a. Prepare dialog contents
+             b. Invoke dialogService
              2. Create new object in persistence service
-               a. Generate UUID
-               b. Store model
+             a. Generate UUID
+             b. Store model
              3. Mutate destination container
-               a. Get mutation capability
-               b. Add new id to composition
+             a. Get mutation capability
+             b. Add new id to composition
              4. Persist destination container
-               a. ...use persistence capability.
+             a. ...use persistence capability.
              */
 
-            function perform() {
-                // The wizard will handle creating the form model based
-                // on the type...
-                var wizard = new CreateWizard(type, parent, policyService);
+            // The wizard will handle creating the form model based
+            // on the type...
+            var wizard =
+                new CreateWizard(this.type, this.parent, this.policyService),
+                self = this;
 
-                // Create and persist the new object, based on user
-                // input.
-                function persistResult(formValue) {
-                    var parent = wizard.getLocation(formValue),
-                        newModel = wizard.createModel(formValue);
-                    return creationService.createObject(newModel, parent);
-                }
-
-                function doNothing() {
-                    // Create cancelled, do nothing
-                    return false;
-                }
-
-                return dialogService.getUserInput(
-                    wizard.getFormStructure(),
-                    wizard.getInitialFormValue()
-                ).then(persistResult, doNothing);
+            // Create and persist the new object, based on user
+            // input.
+            function persistResult(formValue) {
+                var parent = wizard.getLocation(formValue),
+                    newModel = wizard.createModel(formValue);
+                return self.creationService.createObject(newModel, parent);
             }
 
-            return {
-                /**
-                 * Create a new object of the given type.
-                 * This will prompt for user input first.
-                 * @method
-                 * @memberof CreateAction
-                 */
-                perform: perform,
+            function doNothing() {
+                // Create cancelled, do nothing
+                return false;
+            }
 
-                /**
-                 * Get metadata about this action. This includes fields:
-                 * * `name`: Human-readable name
-                 * * `key`: Machine-readable identifier ("create")
-                 * * `glyph`: Glyph to use as an icon for this action
-                 * * `description`: Human-readable description
-                 * * `context`: The context in which this action will be performed.
-                 *
-                 * @return {object} metadata about the create action
-                 */
-                getMetadata: function () {
-                    return {
-                        key: 'create',
-                        glyph: type.getGlyph(),
-                        name: type.getName(),
-                        type: type.getKey(),
-                        description: type.getDescription(),
-                        context: context
-                    };
-                }
-            };
-        }
+            return this.dialogService.getUserInput(
+                wizard.getFormStructure(),
+                wizard.getInitialFormValue()
+            ).then(persistResult, doNothing);
+        };
+
+
+        /**
+         * Metadata associated with a Create action.
+         * @typedef {ActionMetadata} CreateActionMetadata
+         * @property {string} type the key for the type of domain object
+         *           to be created
+         */
+
+        /**
+         * Get metadata about this action.
+         * @returns {CreateActionMetadata} metadata about this action
+         */
+        CreateAction.prototype.getMetadata = function () {
+           return this.metadata;
+        };
 
         return CreateAction;
     }
-);
+);

platform/commonUI/browse/src/creation/CreateActionProvider.js

@@ -33,7 +33,10 @@ define(
          * The CreateActionProvider is an ActionProvider which introduces
          * a Create action for each creatable domain object type.
          *
+         * @memberof platform/commonUI/browse
          * @constructor
+         * @implements {ActionService}
+         *
          * @param {TypeService} typeService the type service, used to discover
          *        available types
          * @param {DialogService} dialogService the dialog service, used by
@@ -44,44 +47,41 @@ define(
          *        object creation.
          */
         function CreateActionProvider(typeService, dialogService, creationService, policyService) {
-            return {
-                /**
-                 * Get all Create actions which are applicable in the provided
-                 * context.
-                 * @memberof CreateActionProvider
-                 * @method
-                 * @returns {CreateAction[]}
-                 */
-                getActions: function (actionContext) {
-                    var context = actionContext || {},
-                        key = context.key,
-                        destination = context.domainObject;
-
-                    // We only provide Create actions, and we need a
-                    // domain object to serve as the container for the
-                    // newly-created object (although the user may later
-                    // make a different selection)
-                    if (key !== 'create' || !destination) {
-                        return [];
-                    }
-
-                    // Introduce one create action per type
-                    return typeService.listTypes().filter(function (type) {
-                        return type.hasFeature("creation");
-                    }).map(function (type) {
-                        return new CreateAction(
-                            type,
-                            destination,
-                            context,
-                            dialogService,
-                            creationService,
-                            policyService
-                        );
-                    });
-                }
-            };
+            this.typeService = typeService;
+            this.dialogService = dialogService;
+            this.creationService = creationService;
+            this.policyService = policyService;
         }
 
+        CreateActionProvider.prototype.getActions = function (actionContext) {
+            var context = actionContext || {},
+                key = context.key,
+                destination = context.domainObject,
+                self = this;
+
+            // We only provide Create actions, and we need a
+            // domain object to serve as the container for the
+            // newly-created object (although the user may later
+            // make a different selection)
+            if (key !== 'create' || !destination) {
+                return [];
+            }
+
+            // Introduce one create action per type
+            return this.typeService.listTypes().filter(function (type) {
+                return type.hasFeature("creation");
+            }).map(function (type) {
+                return new CreateAction(
+                    type,
+                    destination,
+                    context,
+                    self.dialogService,
+                    self.creationService,
+                    self.policyService
+                );
+            });
+        };
+
         return CreateActionProvider;
     }
-);
+);

platform/commonUI/browse/src/creation/CreateMenuController.js

@@ -34,6 +34,7 @@ define(
          * set of Create actions based on the currently-selected
          * domain object.
          *
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function CreateMenuController($scope) {
@@ -55,4 +56,4 @@ define(
 
         return CreateMenuController;
     }
-);
+);

platform/commonUI/browse/src/creation/CreateWizard.js

@@ -21,12 +21,6 @@
  *****************************************************************************/
 /*global define*/
 
-/**
- * Defines the CreateWizard, used by the CreateAction to
- * populate the form shown in dialog based on the created type.
- *
- * @module core/action/create-wizard
- */
 define(
     function () {
         'use strict';
@@ -37,16 +31,33 @@ define(
          * @param {TypeImpl} type the type of domain object to be created
          * @param {DomainObject} parent the domain object to serve as
          *        the initial parent for the created object, in the dialog
+         * @memberof platform/commonUI/browse
          * @constructor
-         * @memberof module:core/action/create-wizard
          */
         function CreateWizard(type, parent, policyService) {
-            var model = type.getInitialModel(),
-                properties = type.getProperties();
+            this.type = type;
+            this.model = type.getInitialModel();
+            this.properties = type.getProperties();
+            this.parent = parent;
+            this.policyService = policyService;
+        }
+
+        /**
+         * Get the form model for this wizard; this is a description
+         * that will be rendered to an HTML form. See the
+         * platform/forms bundle
+         *
+         * @return {FormModel} formModel the form model to
+         *         show in the create dialog
+         */
+        CreateWizard.prototype.getFormStructure = function () {
+            var sections = [],
+                type = this.type,
+                policyService = this.policyService;
 
             function validateLocation(locatingObject) {
                 var locatingType = locatingObject &&
-                        locatingObject.getCapability('type');
+                    locatingObject.getCapability('type');
                 return locatingType && policyService.allow(
                     "composition",
                     locatingType,
@@ -54,96 +65,87 @@ define(
                 );
             }
 
+            sections.push({
+                name: "Properties",
+                rows: this.properties.map(function (property, index) {
+                    // Property definition is same as form row definition
+                    var row = Object.create(property.getDefinition());
+
+                    // Use index as the key into the formValue;
+                    // this correlates to the indexing provided by
+                    // getInitialFormValue
+                    row.key = index;
+
+                    return row;
+                }).filter(function (row) {
+                    // Only show rows which have defined controls
+                    return row && row.control;
+                })
+            });
+
+            // Ensure there is always a "save in" section
+            sections.push({ name: 'Location', rows: [{
+                name: "Save In",
+                control: "locator",
+                validate: validateLocation,
+                key: "createParent"
+            }]});
+
             return {
-                /**
-                 * Get the form model for this wizard; this is a description
-                 * that will be rendered to an HTML form. See the
-                 * platform/forms bundle
-                 *
-                 * @return {FormModel} formModel the form model to
-                 *         show in the create dialog
-                 */
-                getFormStructure: function () {
-                    var sections = [];
-
-                    sections.push({
-                        name: "Properties",
-                        rows: properties.map(function (property, index) {
-                            // Property definition is same as form row definition
-                            var row = Object.create(property.getDefinition());
-
-                            // Use index as the key into the formValue;
-                            // this correlates to the indexing provided by
-                            // getInitialFormValue
-                            row.key = index;
-
-                            return row;
-                        })
-                    });
-
-                    // Ensure there is always a "save in" section
-                    sections.push({ name: 'Location', rows: [{
-                        name: "Save In",
-                        control: "locator",
-                        validate: validateLocation,
-                        key: "createParent"
-                    }]});
-
-                    return {
-                        sections: sections,
-                        name: "Create a New " + type.getName()
-                    };
-                },
-                /**
-                 * Get the initial value for the form being described.
-                 * This will include the values for all properties described
-                 * in the structure.
-                 *
-                 * @returns {object} the initial value of the form
-                 */
-                getInitialFormValue: function () {
-                    // Start with initial values for properties
-                    var formValue = properties.map(function (property) {
-                        return property.getValue(model);
-                    });
-
-                    // Include the createParent
-                    formValue.createParent = parent;
-
-                    return formValue;
-                },
-                /**
-                 * Based on a populated form, get the domain object which
-                 * should be used as a parent for the newly-created object.
-                 * @return {DomainObject}
-                 */
-                getLocation: function (formValue) {
-                    return formValue.createParent || parent;
-                },
-                /**
-                 * Create the domain object model for a newly-created object,
-                 * based on user input read from a formModel.
-                 * @return {object} the domain object' model
-                 */
-                createModel: function (formValue) {
-                    // Clone
-                    var newModel = JSON.parse(JSON.stringify(model));
-
-                    // Always use the type from the type definition
-                    newModel.type = type.getKey();
-
-                    // Update all properties
-                    properties.forEach(function (property, index) {
-                        property.setValue(newModel, formValue[index]);
-                    });
-
-                    return newModel;
-                }
+                sections: sections,
+                name: "Create a New " + this.type.getName()
             };
+        };
 
+        /**
+         * Get the initial value for the form being described.
+         * This will include the values for all properties described
+         * in the structure.
+         *
+         * @returns {object} the initial value of the form
+         */
+        CreateWizard.prototype.getInitialFormValue = function () {
+            // Start with initial values for properties
+            var model = this.model,
+                formValue = this.properties.map(function (property) {
+                    return property.getValue(model);
+                });
 
-        }
+            // Include the createParent
+            formValue.createParent = this.parent;
+
+            return formValue;
+        };
+
+        /**
+         * Based on a populated form, get the domain object which
+         * should be used as a parent for the newly-created object.
+         * @return {DomainObject}
+         */
+        CreateWizard.prototype.getLocation = function (formValue) {
+            return formValue.createParent || this.parent;
+        };
+
+        /**
+         * Create the domain object model for a newly-created object,
+         * based on user input read from a formModel.
+         * @return {object} the domain object model
+         */
+        CreateWizard.prototype.createModel = function (formValue) {
+            // Clone
+            var newModel = JSON.parse(JSON.stringify(this.model));
+
+            // Always use the type from the type definition
+            newModel.type = this.type.getKey();
+
+            // Update all properties
+            this.properties.forEach(function (property, index) {
+                property.setValue(newModel, formValue[index]);
+            });
+
+            return newModel;
+        };
 
         return CreateWizard;
     }
-);
+);

platform/commonUI/browse/src/creation/CreationService.js

@@ -39,15 +39,43 @@ define(
          * persisting new domain objects. Handles all actual object
          * mutation and persistence associated with domain object
          * creation.
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function CreationService(persistenceService, $q, $log) {
+            this.persistenceService = persistenceService;
+            this.$q = $q;
+            this.$log = $log;
+        }
+
+        /**
+         * Create a new domain object with the provided model, as
+         * a member of the provided parent domain object's composition.
+         * This parent will additionally determine which persistence
+         * space an object is created within (as it is possible to
+         * have multiple persistence spaces attached.)
+         *
+         * Note that the model passed in for object creation may be
+         * modified to attach additional initial properties associated
+         * with domain object creation.
+         *
+         * @param {object} model the model for the newly-created
+         *        domain object
+         * @param {DomainObject} parent the domain object which
+         *        should contain the newly-created domain object
+         *        in its composition
+         * @return {Promise} a promise that will resolve when the domain
+         *         object has been created
+         */
+        CreationService.prototype.createObject = function (model, parent) {
+            var persistence = parent.getCapability("persistence"),
+                self = this;
 
             // Persist the new domain object's model; it will be fully
             // constituted as a domain object when loaded back, as all
             // domain object models are.
             function doPersist(space, id, model) {
-                return persistenceService.createObject(
+                return self.persistenceService.createObject(
                     space,
                     id,
                     model
@@ -66,14 +94,14 @@ define(
                         }
                     } else {
                         // This is abnormal; composition should be an array
-                        $log.warn(NO_COMPOSITION_WARNING + parent.getId());
+                        self.$log.warn(NO_COMPOSITION_WARNING + parent.getId());
                         return false; // Cancel mutation
                     }
                 });
 
-                return $q.when(mutatationResult).then(function (result) {
+                return self.$q.when(mutatationResult).then(function (result) {
                     if (!result) {
-                        $log.error("Could not mutate " + parent.getId());
+                        self.$log.error("Could not mutate " + parent.getId());
                         return undefined;
                     }
 
@@ -93,49 +121,27 @@ define(
                 });
             }
 
-            // Create a new domain object with the provided model as a
-            // member of the specified parent's composition
-            function createObject(model, parent) {
-                var persistence = parent.getCapability("persistence");
-
-                // We need the parent's persistence capability to determine
-                // what space to create the new object's model in.
-                if (!persistence) {
-                    $log.warn(NON_PERSISTENT_WARNING);
-                    return $q.reject(new Error(NON_PERSISTENT_WARNING));
-                }
-
-                // We create a new domain object in three sequential steps:
-                // 1. Get a new UUID for the object
-                // 2. Create a model with that ID in the persistence space
-                // 3. Add that ID to
-                return $q.when(
-                    uuid()
-                ).then(function (id) {
-                    return doPersist(persistence.getSpace(), id, model);
-                }).then(function (id) {
-                    return addToComposition(id, parent, persistence);
-                });
+            // We need the parent's persistence capability to determine
+            // what space to create the new object's model in.
+            if (!persistence) {
+                self.$log.warn(NON_PERSISTENT_WARNING);
+                return self.$q.reject(new Error(NON_PERSISTENT_WARNING));
             }
 
-            return {
-                /**
-                 * Create a new domain object with the provided model, as
-                 * a member of the provided parent domain object's composition.
-                 * This parent will additionally determine which persistence
-                 * space an object is created within (as it is possible to
-                 * have multiple persistence spaces attached.)
-                 *
-                 * @param {object} model the model for the newly-created
-                 *        domain object
-                 * @param {DomainObject} parent the domain object which
-                 *        should contain the newly-created domain object
-                 *        in its composition
-                 */
-                createObject: createObject
-            };
-        }
+            // We create a new domain object in three sequential steps:
+            // 1. Get a new UUID for the object
+            // 2. Create a model with that ID in the persistence space
+            // 3. Add that ID to
+            return self.$q.when(uuid()).then(function (id) {
+                return doPersist(persistence.getSpace(), id, model);
+            }).then(function (id) {
+                return addToComposition(id, parent, persistence);
+            });
+        };
+
+
 
         return CreationService;
     }
 );
+

platform/commonUI/browse/src/creation/LocatorController.js

@@ -30,6 +30,7 @@ define(
          * Controller for the "locator" control, which provides the
          * user with the ability to select a domain object as the
          * destination for a newly-created object in the Create menu.
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function LocatorController($scope) {
@@ -79,3 +80,4 @@ define(
         return LocatorController;
     }
 );
+

platform/commonUI/browse/src/navigation/NavigateAction.js

@@ -31,32 +31,34 @@ define(
 
         /**
          * The navigate action navigates to a specific domain object.
+         * @memberof platform/commonUI/browse
          * @constructor
+         * @implements {Action}
          */
         function NavigateAction(navigationService, $q, context) {
-            var domainObject = context.domainObject;
-
-            function perform() {
-                // Set navigation, and wrap like a promise
-                return $q.when(navigationService.setNavigation(domainObject));
-            }
-
-            return {
-                /**
-                 * Navigate to the object described in the context.
-                 * @returns {Promise} a promise that is resolved once the
-                 *          navigation has been updated
-                 */
-                perform: perform
-            };
+            this.domainObject = context.domainObject;
+            this.$q = $q;
+            this.navigationService = navigationService;
         }
 
+        /**
+         * Navigate to the object described in the context.
+         * @returns {Promise} a promise that is resolved once the
+         *          navigation has been updated
+         */
+        NavigateAction.prototype.perform = function () {
+            // Set navigation, and wrap like a promise
+            return this.$q.when(
+                this.navigationService.setNavigation(this.domainObject)
+            );
+        };
+
         /**
          * Navigate as an action is only applicable when a domain object
          * is described in the action context.
          * @param {ActionContext} context the context in which the action
          *        will be performed
-         * @returns true if applicable
+         * @returns {boolean} true if applicable
          */
         NavigateAction.appliesTo = function (context) {
             return context.domainObject !== undefined;
@@ -64,4 +66,4 @@ define(
 
         return NavigateAction;
     }
-);
+);

platform/commonUI/browse/src/navigation/NavigationService.js

@@ -32,68 +32,58 @@ define(
         /**
          * The navigation service maintains the application's current
          * navigation state, and allows listening for changes thereto.
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function NavigationService() {
-            var navigated,
-                callbacks = [];
+            this.navigated = undefined;
+            this.callbacks = [];
+        }
 
-            // Getter for current navigation
-            function getNavigation() {
-                return navigated;
-            }
+        /**
+         * Get the current navigation state.
+         * @returns {DomainObject} the object that is navigated-to
+         */
+        NavigationService.prototype.getNavigation = function () {
+            return this.navigated;
+        };
 
-            // Setter for navigation; invokes callbacks
-            function setNavigation(value) {
-                if (navigated !== value) {
-                    navigated = value;
-                    callbacks.forEach(function (callback) {
-                        callback(value);
-                    });
-                }
-            }
-
-            // Adds a callback
-            function addListener(callback) {
-                callbacks.push(callback);
-            }
-
-            // Filters out a callback
-            function removeListener(callback) {
-                callbacks = callbacks.filter(function (cb) {
-                    return cb !== callback;
+        /**
+         * Set the current navigation state. This will invoke listeners.
+         * @param {DomainObject} domainObject the domain object to navigate to
+         */
+        NavigationService.prototype.setNavigation = function (value) {
+            if (this.navigated !== value) {
+                this.navigated = value;
+                this.callbacks.forEach(function (callback) {
+                    callback(value);
                 });
             }
+        };
 
-            return {
-                /**
-                 * Get the current navigation state.
-                 */
-                getNavigation: getNavigation,
-                /**
-                 * Set the current navigation state. Thiswill invoke listeners.
-                 * @param {DomainObject} value the domain object to navigate
-                 *        to
-                 */
-                setNavigation: setNavigation,
-                /**
-                 * Listen for changes in navigation. The passed callback will
-                 * be invoked with the new domain object of navigation when
-                 * this changes.
-                 * @param {function} callback the callback to invoke when
-                 *        navigation state changes
-                 */
-                addListener: addListener,
-                /**
-                 * Stop listening for changes in navigation state.
-                 * @param {function} callback the callback which should
-                 *        no longer be invoked when navigation state
-                 *        changes
-                 */
-                removeListener: removeListener
-            };
-        }
+        /**
+         * Listen for changes in navigation. The passed callback will
+         * be invoked with the new domain object of navigation when
+         * this changes.
+         * @param {function} callback the callback to invoke when
+         *        navigation state changes
+         */
+        NavigationService.prototype.addListener = function (callback) {
+            this.callbacks.push(callback);
+        };
+
+        /**
+         * Stop listening for changes in navigation state.
+         * @param {function} callback the callback which should
+         *        no longer be invoked when navigation state
+         *        changes
+         */
+        NavigationService.prototype.removeListener = function (callback) {
+            this.callbacks = this.callbacks.filter(function (cb) {
+                return cb !== callback;
+            });
+        };
 
         return NavigationService;
     }
-);
+);

platform/commonUI/browse/src/windowing/FullscreenAction.js

@@ -35,36 +35,32 @@ define(
         /**
          * The fullscreen action toggles between fullscreen display
          * and regular in-window display.
+         * @memberof platform/commonUI/browse
          * @constructor
+         * @implements {Action}
          */
         function FullscreenAction(context) {
-            return {
-                /**
-                 * Toggle full screen state
-                 */
-                perform: function () {
-                    screenfull.toggle();
-                },
-                /**
-                 * Get metadata about this action, including the
-                 * applicable glyph to display.
-                 */
-                getMetadata: function () {
-                    // We override getMetadata, because the glyph and
-                    // description need to be determined at run-time
-                    // based on whether or not we are currently
-                    // full screen.
-                    var metadata = Object.create(FullscreenAction);
-                    metadata.glyph = screenfull.isFullscreen ? "_" : "z";
-                    metadata.description = screenfull.isFullscreen ?
-                            EXIT_FULLSCREEN : ENTER_FULLSCREEN;
-                    metadata.group = "windowing";
-                    metadata.context = context;
-                    return metadata;
-                }
-            };
+            this.context = context;
         }
 
+        FullscreenAction.prototype.perform = function () {
+            screenfull.toggle();
+        };
+
+        FullscreenAction.prototype.getMetadata = function () {
+            // We override getMetadata, because the glyph and
+            // description need to be determined at run-time
+            // based on whether or not we are currently
+            // full screen.
+            var metadata = Object.create(FullscreenAction);
+            metadata.glyph = screenfull.isFullscreen ? "_" : "z";
+            metadata.description = screenfull.isFullscreen ?
+                EXIT_FULLSCREEN : ENTER_FULLSCREEN;
+            metadata.group = "windowing";
+            metadata.context = this.context;
+            return metadata;
+        };
+
         return FullscreenAction;
     }
-);
+);

platform/commonUI/browse/src/windowing/NewTabAction.js

@@ -33,35 +33,29 @@ define(
         /**
          * The new tab action allows a domain object to be opened
          * into a new browser tab.
+         * @memberof platform/commonUI/browse
          * @constructor
+         * @implements {Action}
          */
         function NewTabAction(urlService, $window, context) {
-            // Returns the selected domain object
-            // when using the context menu or the top right button
-            // based on the context and the existance of the object
-            // It is set to object an returned
-            function getSelectedObject() {
-                var object;
-                if (context.selectedObject) {
-                    object = context.selectedObject;
-                } else {
-                    object = context.domainObject;
-                }
-                return object;
-            }
-            
-            return {
-                // Performs the open in new tab function
-                // By calling the url service, the mode needed
-                // (browse) and the domainObject is passed in and
-                // the path is returned and opened in a new tab
-                perform: function () {
-                    $window.open(urlService.urlForNewTab("browse", getSelectedObject()),
-                                "_blank");
-                }
+            context = context || {};
+
+            this.urlService = urlService;
+            this.open = function () {
+                $window.open.apply($window, arguments);
             };
+
+            // Choose the object to be opened into a new tab
+            this.domainObject = context.selectedObject || context.domainObject;
         }
 
+        NewTabAction.prototype.perform = function () {
+            this.open(
+                this.urlService.urlForNewTab("browse", this.domainObject),
+                "_blank"
+            );
+        };
+
         return NewTabAction;
     }
-);
+);

platform/commonUI/browse/src/windowing/WindowTitler.js

@@ -29,6 +29,7 @@ define(
         /**
          * Updates the title of the current window to reflect the name
          * of the currently navigated-to domain object.
+         * @memberof platform/commonUI/browse
          * @constructor
          */
         function WindowTitler(navigationService, $rootScope, $document) {
@@ -49,4 +50,4 @@ define(
 
         return WindowTitler;
     }
-);
+);

platform/commonUI/browse/test/BrowseControllerSpec.js

@@ -164,7 +164,12 @@ define(
             // lets the html code know if the
             // tree menu is open.
             it("calls the treeSlide function", function () {
-                mockScope.treeSlide();
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    "select-obj",
+                    jasmine.any(Function)
+                );
+                
+                mockScope.$on.calls[1].args[1]();
             });
 
             it("releases its navigation listener when its scope is destroyed", function () {
@@ -172,7 +177,8 @@ define(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                mockScope.$on.mostRecentCall.args[1]();
+                
+                mockScope.$on.calls[0].args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
                     mockNavigationService.addListener.mostRecentCall.args[0]
@@ -298,6 +304,19 @@ define(
                 );
                 
                 mockScope.checkRoot();
+                
+                mockDomainObject.getCapability.andReturn(undefined);
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
             });
             
             // Mocks the back arrow call that

platform/commonUI/browse/test/creation/CreateWizardSpec.js

@@ -42,7 +42,9 @@ define(
                     "property" + name,
                     [ "getDefinition", "getValue", "setValue" ]
                 );
-                mockProperty.getDefinition.andReturn({});
+                mockProperty.getDefinition.andReturn({
+                    control: "textfield"
+                });
                 mockProperty.getValue.andReturn(name);
                 return mockProperty;
             }
@@ -157,4 +159,4 @@ define(
 
         });
     }
-);
+);

platform/commonUI/browse/test/creation/CreationServiceSpec.js

@@ -38,6 +38,7 @@ define(
                 mockMutationCapability,
                 mockPersistenceCapability,
                 mockCompositionCapability,
+                mockContextCapability,
                 mockCapabilities,
                 creationService;
 
@@ -87,10 +88,15 @@ define(
                     "composition",
                     ["invoke"]
                 );
+                mockContextCapability = jasmine.createSpyObj(
+                    "context",
+                    ["getPath"]
+                );
                 mockCapabilities = {
                     mutation: mockMutationCapability,
                     persistence: mockPersistenceCapability,
-                    composition: mockCompositionCapability
+                    composition: mockCompositionCapability,
+                    context: mockContextCapability
                 };
 
                 mockPersistenceService.createObject.andReturn(
@@ -103,6 +109,7 @@ define(
                 mockParentObject.useCapability.andCallFake(function (key, value) {
                     return mockCapabilities[key].invoke(value);
                 });
+                mockParentObject.getId.andReturn('parentId');
 
                 mockPersistenceCapability.persist.andReturn(
                     mockPromise(true)
@@ -194,7 +201,6 @@ define(
                 expect(mockLog.error).toHaveBeenCalled();
             });
 
-
         });
     }
-);
+);

platform/commonUI/dialog/res/templates/dialog.html

@@ -25,7 +25,7 @@
         All fields marked <span class="ui-symbol req">*</span> are required.
     </div>
 </div>
-<div class="abs form outline editor">
+<div class="abs form editor">
     <div class='abs contents l-dialog'>
         <mct-form ng-model="ngModel.value"
                   structure="ngModel.structure"

platform/commonUI/dialog/res/templates/overlay.html

@@ -25,7 +25,7 @@
         <a href=""
            ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="btn normal ui-symbol close">
+           class="clk-icon icon ui-symbol close">
             x
         </a>
         <div class="abs contents" ng-transclude>

platform/commonUI/dialog/src/DialogService.js

@@ -22,7 +22,9 @@
 /*global define*/
 
 /**
- * Module defining DialogService. Created by vwoeltje on 11/10/14.
+ * This bundle implements the dialog service, which can be used to
+ * launch dialogs for user input & notifications.
+ * @namespace platform/commonUI/dialog
  */
 define(
     [],
@@ -32,128 +34,130 @@ define(
          * The dialog service is responsible for handling window-modal
          * communication with the user, such as displaying forms for user
          * input.
+         * @memberof platform/commonUI/dialog
          * @constructor
          */
         function DialogService(overlayService, $q, $log) {
-            var overlay,
-                dialogVisible = false;
-
-            // Stop showing whatever overlay is currently active
-            // (e.g. because the user hit cancel)
-            function dismiss() {
-                if (overlay) {
-                    overlay.dismiss();
-                }
-                dialogVisible = false;
-            }
-
-            function getDialogResponse(key, model, resultGetter) {
-                // We will return this result as a promise, because user
-                // input is asynchronous.
-                var deferred = $q.defer(),
-                    overlayModel;
-
-                // Confirm function; this will be passed in to the
-                // overlay-dialog template and associated with a
-                // OK button click
-                function confirm(value) {
-                    // Pass along the result
-                    deferred.resolve(resultGetter ? resultGetter() : value);
-
-                    // Stop showing the dialog
-                    dismiss();
-                }
-
-                // Cancel function; this will be passed in to the
-                // overlay-dialog template and associated with a
-                // Cancel or X button click
-                function cancel() {
-                    deferred.reject();
-                    dismiss();
-                }
-
-                // Add confirm/cancel callbacks
-                model.confirm = confirm;
-                model.cancel = cancel;
-
-                if (dialogVisible) {
-                    // Only one dialog should be shown at a time.
-                    // The application design should be such that
-                    // we never even try to do this.
-                    $log.warn([
-                        "Dialog already showing; ",
-                        "unable to show ",
-                        model.name
-                    ].join(""));
-                    deferred.reject();
-                } else {
-                    // Add the overlay using the OverlayService, which
-                    // will handle actual insertion into the DOM
-                    overlay = overlayService.createOverlay(
-                        key,
-                        model
-                    );
-
-                    // Track that a dialog is already visible, to
-                    // avoid spawning multiple dialogs at once.
-                    dialogVisible = true;
-                }
-
-                return deferred.promise;
-            }
-
-            function getUserInput(formModel, value) {
-                var overlayModel = {
-                        title: formModel.name,
-                        message: formModel.message,
-                        structure: formModel,
-                        value: value
-                    };
-
-                // Provide result from the model
-                function resultGetter() {
-                    return overlayModel.value;
-                }
-
-                // Show the overlay-dialog
-                return getDialogResponse(
-                    "overlay-dialog",
-                    overlayModel,
-                    resultGetter
-                );
-            }
-
-            function getUserChoice(dialogModel) {
-                // Show the overlay-options dialog
-                return getDialogResponse(
-                    "overlay-options",
-                    { dialog: dialogModel }
-                );
-            }
-
-            return {
-                /**
-                 * Request user input via a window-modal dialog.
-                 *
-                 * @param {FormModel} formModel a description of the form
-                 *        to be shown (see platform/forms)
-                 * @param {object} value the initial state of the form
-                 * @returns {Promise} a promsie for the form value that the
-                 *          user has supplied; this may be rejected if
-                 *          user input cannot be obtained (for instance,
-                 *          because the user cancelled the dialog)
-                 */
-                getUserInput: getUserInput,
-                /**
-                 * Request that the user chooses from a set of options,
-                 * which will be shown as buttons.
-                 *
-                 * @param dialogModel a description of the dialog to show
-                 */
-                getUserChoice: getUserChoice
-            };
+            this.overlayService = overlayService;
+            this.$q = $q;
+            this.$log = $log;
+            this.overlay = undefined;
+            this.dialogVisible = false;
         }
 
+        // Stop showing whatever overlay is currently active
+        // (e.g. because the user hit cancel)
+        DialogService.prototype.dismiss = function () {
+            var overlay = this.overlay;
+            if (overlay) {
+                overlay.dismiss();
+            }
+            this.dialogVisible = false;
+        };
+
+        DialogService.prototype.getDialogResponse = function (key, model, resultGetter) {
+            // We will return this result as a promise, because user
+            // input is asynchronous.
+            var deferred = this.$q.defer(),
+                self = this;
+
+            // Confirm function; this will be passed in to the
+            // overlay-dialog template and associated with a
+            // OK button click
+            function confirm(value) {
+                // Pass along the result
+                deferred.resolve(resultGetter ? resultGetter() : value);
+
+                // Stop showing the dialog
+                self.dismiss();
+            }
+
+            // Cancel function; this will be passed in to the
+            // overlay-dialog template and associated with a
+            // Cancel or X button click
+            function cancel() {
+                deferred.reject();
+                self.dismiss();
+            }
+
+            // Add confirm/cancel callbacks
+            model.confirm = confirm;
+            model.cancel = cancel;
+
+            if (this.dialogVisible) {
+                // Only one dialog should be shown at a time.
+                // The application design should be such that
+                // we never even try to do this.
+                this.$log.warn([
+                    "Dialog already showing; ",
+                    "unable to show ",
+                    model.name
+                ].join(""));
+                deferred.reject();
+            } else {
+                // Add the overlay using the OverlayService, which
+                // will handle actual insertion into the DOM
+                this.overlay = this.overlayService.createOverlay(
+                    key,
+                    model
+                );
+
+                // Track that a dialog is already visible, to
+                // avoid spawning multiple dialogs at once.
+                this.dialogVisible = true;
+            }
+
+            return deferred.promise;
+        };
+
+        /**
+         * Request user input via a window-modal dialog.
+         *
+         * @param {FormModel} formModel a description of the form
+         *        to be shown (see platform/forms)
+         * @param {object} value the initial state of the form
+         * @returns {Promise} a promise for the form value that the
+         *          user has supplied; this may be rejected if
+         *          user input cannot be obtained (for instance,
+         *          because the user cancelled the dialog)
+         */
+        DialogService.prototype.getUserInput = function (formModel, value) {
+            var overlayModel = {
+                title: formModel.name,
+                message: formModel.message,
+                structure: formModel,
+                value: value
+            };
+
+            // Provide result from the model
+            function resultGetter() {
+                return overlayModel.value;
+            }
+
+            // Show the overlay-dialog
+            return this.getDialogResponse(
+                "overlay-dialog",
+                overlayModel,
+                resultGetter
+            );
+        };
+
+        /**
+         * Request that the user chooses from a set of options,
+         * which will be shown as buttons.
+         *
+         * @param dialogModel a description of the dialog to show
+         * @return {Promise} a promise for the user's choice
+         */
+        DialogService.prototype.getUserChoice = function (dialogModel) {
+            // Show the overlay-options dialog
+            return this.getDialogResponse(
+                "overlay-options",
+                { dialog: dialogModel }
+            );
+        };
+
+
         return DialogService;
     }
-);
+);

platform/commonUI/dialog/src/OverlayService.js

@@ -43,57 +43,63 @@ define(
          * particularly where a multiple-overlay effect is not specifically
          * desired).
          *
+         * @memberof platform/commonUI/dialog
          * @constructor
          */
         function OverlayService($document, $compile, $rootScope) {
-            function createOverlay(key, overlayModel) {
-                // Create a new scope for this overlay
-                var scope = $rootScope.$new(),
-                    element;
+            this.$compile = $compile;
 
-                // Stop showing the overlay; additionally, release the scope
-                // that it uses.
-                function dismiss() {
-                    scope.$destroy();
-                    element.remove();
-                }
-
-                // If no model is supplied, just fill in a default "cancel"
-                overlayModel = overlayModel || { cancel: dismiss };
-
-                // Populate the scope; will be passed directly to the template
-                scope.overlay = overlayModel;
-                scope.key = key;
-
-                // Create the overlay element and add it to the document's body
-                element = $compile(TEMPLATE)(scope);
-                $document.find('body').prepend(element);
-
-
-
-                return {
-                    dismiss: dismiss
-                };
-            }
-
-            return {
-                /**
-                 * Add a new overlay to the document. This will be
-                 * prepended to the document body; the overlay's
-                 * template (as pointed to by the `key` argument) is
-                 * responsible for having a useful z-order, and for
-                 * blocking user interactions if appropriate.
-                 *
-                 * @param {string} key the symbolic key which identifies
-                 *        the template of the overlay to be shown
-                 * @param {object} overlayModel the model to pass to the
-                 *        included overlay template (this will be passed
-                 *        in via ng-model)
-                 */
-                createOverlay: createOverlay
+            // Don't include $document and $rootScope directly;
+            // avoids https://docs.angularjs.org/error/ng/cpws
+            this.findBody = function () {
+                return $document.find('body');
+            };
+            this.newScope = function () {
+                return $rootScope.$new();
             };
         }
 
+        /**
+         * Add a new overlay to the document. This will be
+         * prepended to the document body; the overlay's
+         * template (as pointed to by the `key` argument) is
+         * responsible for having a useful z-order, and for
+         * blocking user interactions if appropriate.
+         *
+         * @param {string} key the symbolic key which identifies
+         *        the template of the overlay to be shown
+         * @param {object} overlayModel the model to pass to the
+         *        included overlay template (this will be passed
+         *        in via ng-model)
+         */
+        OverlayService.prototype.createOverlay = function (key, overlayModel) {
+            // Create a new scope for this overlay
+            var scope = this.newScope(),
+                element;
+
+            // Stop showing the overlay; additionally, release the scope
+            // that it uses.
+            function dismiss() {
+                scope.$destroy();
+                element.remove();
+            }
+
+            // If no model is supplied, just fill in a default "cancel"
+            overlayModel = overlayModel || { cancel: dismiss };
+
+            // Populate the scope; will be passed directly to the template
+            scope.overlay = overlayModel;
+            scope.key = key;
+
+            // Create the overlay element and add it to the document's body
+            element = this.$compile(TEMPLATE)(scope);
+            this.findBody().prepend(element);
+
+            return {
+                dismiss: dismiss
+            };
+        };
+
         return OverlayService;
     }
-);
+);

platform/commonUI/edit/src/actions/CancelAction.js

@@ -29,9 +29,26 @@ define(
          * The "Cancel" action; the action triggered by clicking Cancel from
          * Edit Mode. Exits the editing user interface and invokes object
          * capabilities to persist the changes that have been made.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {Action}
          */
         function CancelAction($location, urlService, context) {
-            var domainObject = context.domainObject;
+            this.domainObject = context.domainObject;
+            this.$location = $location;
+            this.urlService = urlService;
+        }
+
+        /**
+         * Cancel editing.
+         *
+         * @returns {Promise} a promise that will be fulfilled when
+         *          cancellation has completed
+         */
+        CancelAction.prototype.perform = function () {
+            var domainObject = this.domainObject,
+                $location = this.$location,
+                urlService = this.urlService;
 
             // Look up the object's "editor.completion" capability;
             // this is introduced by EditableDomainObject which is
@@ -56,25 +73,15 @@ define(
                 )));
             }
 
-            return {
-                /**
-                 * Cancel editing.
-                 *
-                 * @returns {Promise} a promise that will be fulfilled when
-                 *          cancellation has completed
-                 */
-                perform: function () {
-                    return doCancel(getEditorCapability())
-                        .then(returnToBrowse);
-                }
-            };
-        }
+            return doCancel(getEditorCapability())
+                .then(returnToBrowse);
+        };
 
         /**
          * Check if this action is applicable in a given context.
          * This will ensure that a domain object is present in the context,
          * and that this domain object is in Edit mode.
-         * @returns true if applicable
+         * @returns {boolean} true if applicable
          */
         CancelAction.appliesTo = function (context) {
             var domainObject = (context || {}).domainObject;
@@ -84,4 +91,4 @@ define(
 
         return CancelAction;
     }
-);
+);

platform/commonUI/edit/src/actions/EditAction.js

@@ -42,7 +42,9 @@ define(
          * mode (typically triggered by the Edit button.) This will
          * show the user interface for editing (by way of a change in
          * route)
+         * @memberof platform/commonUI/edit
          * @constructor
+         * @implements {Action}
          */
         function EditAction($location, navigationService, $log, context) {
             var domainObject = (context || {}).domainObject;
@@ -60,17 +62,19 @@ define(
                 return NULL_ACTION;
             }
 
-            return {
-                /**
-                 * Enter edit mode.
-                 */
-                perform: function () {
-                    navigationService.setNavigation(domainObject);
-                    $location.path("/edit");
-                }
-            };
+            this.domainObject = domainObject;
+            this.$location = $location;
+            this.navigationService = navigationService;
         }
 
+        /**
+         * Enter edit mode.
+         */
+        EditAction.prototype.perform = function () {
+            this.navigationService.setNavigation(this.domainObject);
+            this.$location.path("/edit");
+        };
+
         /**
          * Check for applicability; verify that a domain object is present
          * for this action to be performed upon.
@@ -87,4 +91,4 @@ define(
 
         return EditAction;
     }
-);
+);

platform/commonUI/edit/src/actions/LinkAction.js

@@ -29,42 +29,43 @@ define(
 
         /**
          * Add one domain object to another's composition.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {Action}
          */
         function LinkAction(context) {
-            var domainObject = (context || {}).domainObject,
-                selectedObject = (context || {}).selectedObject,
-                selectedId = selectedObject && selectedObject.getId();
+            this.domainObject = (context || {}).domainObject;
+            this.selectedObject = (context || {}).selectedObject;
+            this.selectedId = this.selectedObject && this.selectedObject.getId();
+        }
+
+        LinkAction.prototype.perform = function () {
+            var self = this;
 
             // Add this domain object's identifier
             function addId(model) {
                 if (Array.isArray(model.composition) &&
-                        model.composition.indexOf(selectedId) < 0) {
-                    model.composition.push(selectedId);
+                    model.composition.indexOf(self.selectedId) < 0) {
+                    model.composition.push(self.selectedId);
                 }
             }
 
             // Persist changes to the domain object
             function doPersist() {
-                var persistence = domainObject.getCapability('persistence');
+                var persistence =
+                    self.domainObject.getCapability('persistence');
                 return persistence.persist();
             }
 
             // Link these objects
             function doLink() {
-                return domainObject.useCapability("mutation", addId)
+                return self.domainObject.useCapability("mutation", addId)
                     .then(doPersist);
             }
 
-            return {
-                /**
-                 * Perform this action.
-                 */
-                perform: function () {
-                    return selectedId && doLink();
-                }
-            };
-        }
+            return this.selectedId && doLink();
+        };
 
         return LinkAction;
     }
-);
+);

platform/commonUI/edit/src/actions/PropertiesAction.js

@@ -32,58 +32,58 @@ define(
         'use strict';
 
         /**
-         * Construct an action which will allow an object's metadata to be
-         * edited.
+         * Implements the "Edit Properties" action, which prompts the user
+         * to modify a domain object's properties.
          *
          * @param {DialogService} dialogService a service which will show the dialog
          * @param {DomainObject} object the object to be edited
          * @param {ActionContext} context the context in which this action is performed
+         * @memberof platform/commonUI/edit
+         * @implements {Action}
          * @constructor
          */
         function PropertiesAction(dialogService, context) {
-            var object = context.domainObject;
+            this.domainObject = (context || {}).domainObject;
+            this.dialogService = dialogService;
+        }
+
+        PropertiesAction.prototype.perform = function () {
+            var type = this.domainObject.getCapability('type'),
+                domainObject = this.domainObject,
+                dialogService = this.dialogService;
 
             // Persist modifications to this domain object
             function doPersist() {
-                var persistence = object.getCapability('persistence');
+                var persistence = domainObject.getCapability('persistence');
                 return persistence && persistence.persist();
             }
 
             // Update the domain object model based on user input
             function updateModel(userInput, dialog) {
-                return object.useCapability('mutation', function (model) {
+                return domainObject.useCapability('mutation', function (model) {
                     dialog.updateModel(model, userInput);
                 });
             }
 
             function showDialog(type) {
                 // Create a dialog object to generate the form structure, etc.
-                var dialog = new PropertiesDialog(type, object.getModel());
+                var dialog =
+                    new PropertiesDialog(type, domainObject.getModel());
 
                 // Show the dialog
                 return dialogService.getUserInput(
                     dialog.getFormStructure(),
                     dialog.getInitialFormValue()
                 ).then(function (userInput) {
-                    // Update the model, if user input was provided
-                    return userInput && updateModel(userInput, dialog);
-                }).then(function (result) {
-                    return result && doPersist();
-                });
+                        // Update the model, if user input was provided
+                        return userInput && updateModel(userInput, dialog);
+                    }).then(function (result) {
+                        return result && doPersist();
+                    });
             }
 
-            return {
-                /**
-                 * Perform this action.
-                 * @return {Promise} a promise which will be
-                 *         fulfilled when the action has completed.
-                 */
-                perform: function () {
-                    var type = object.getCapability('type');
-                    return type && showDialog(type);
-                }
-            };
-        }
+            return type && showDialog(type);
+        };
 
         /**
          * Filter this action for applicability against a given context.
@@ -106,3 +106,4 @@ define(
 
 );
 
+

platform/commonUI/edit/src/actions/PropertiesDialog.js

@@ -21,12 +21,6 @@
  *****************************************************************************/
 /*global define*/
 
-/**
- * Defines the PropertiesDialog, used by the PropertiesAction to
- * populate the form shown in dialog based on the created type.
- *
- * @module common/actions/properties-dialog
- */
 define(
     function () {
         'use strict';
@@ -37,58 +31,60 @@ define(
          * @param {TypeImpl} type the type of domain object for which properties
          *        will be specified
          * @param {DomainObject} the object for which properties will be set
+         * @memberof platform/commonUI/edit
          * @constructor
-         * @memberof module:common/actions/properties-dialog
          */
         function PropertiesDialog(type, model) {
-            var properties = type.getProperties();
-
-            return {
-                /**
-                 * Get sections provided by this dialog.
-                 * @return {FormStructure} the structure of this form
-                 */
-                getFormStructure: function () {
-                    return {
-                        name: "Edit " + model.name,
-                        sections: [{
-                            name: "Properties",
-                            rows: properties.map(function (property, index) {
-                                // Property definition is same as form row definition
-                                var row = Object.create(property.getDefinition());
-                                row.key = index;
-                                return row;
-                            })
-                        }]
-                    };
-                },
-                /**
-                 * Get the initial state of the form shown by this dialog
-                 * (based on the object model)
-                 * @returns {object} initial state of the form
-                 */
-                getInitialFormValue: function () {
-                    // Start with initial values for properties
-                    // Note that index needs to correlate to row.key
-                    // from getFormStructure
-                    return properties.map(function (property) {
-                        return property.getValue(model);
-                    });
-                },
-                /**
-                 * Update a domain object model based on the value of a form.
-                 */
-                updateModel: function (model, formValue) {
-                    // Update all properties
-                    properties.forEach(function (property, index) {
-                        property.setValue(model, formValue[index]);
-                    });
-                }
-            };
-
-
+            this.type = type;
+            this.model = model;
+            this.properties = type.getProperties();
         }
 
+        /**
+         * Get sections provided by this dialog.
+         * @return {FormStructure} the structure of this form
+         */
+        PropertiesDialog.prototype.getFormStructure = function () {
+            return {
+                name: "Edit " + this.model.name,
+                sections: [{
+                    name: "Properties",
+                    rows: this.properties.map(function (property, index) {
+                        // Property definition is same as form row definition
+                        var row = Object.create(property.getDefinition());
+                        row.key = index;
+                        return row;
+                    })
+                }]
+            };
+        };
+
+        /**
+         * Get the initial state of the form shown by this dialog
+         * (based on the object model)
+         * @returns {object} initial state of the form
+         */
+        PropertiesDialog.prototype.getInitialFormValue = function () {
+            var model = this.model;
+
+            // Start with initial values for properties
+            // Note that index needs to correlate to row.key
+            // from getFormStructure
+            return this.properties.map(function (property) {
+                return property.getValue(model);
+            });
+        };
+
+        /**
+         * Update a domain object model based on the value of a form.
+         */
+        PropertiesDialog.prototype.updateModel = function (model, formValue) {
+            // Update all properties
+            this.properties.forEach(function (property, index) {
+                property.setValue(model, formValue[index]);
+            });
+        };
+
         return PropertiesDialog;
     }
-);
+);

platform/commonUI/edit/src/actions/RemoveAction.js

@@ -37,22 +37,35 @@ define(
          *
          * @param {DomainObject} object the object to be removed
          * @param {ActionContext} context the context in which this action is performed
+         * @memberof platform/commonUI/edit
          * @constructor
-         * @memberof module:editor/actions/remove-action
+         * @implements {Action}
          */
         function RemoveAction($q, navigationService, context) {
-            var object = (context || {}).domainObject;
+            this.domainObject = (context || {}).domainObject;
+            this.$q = $q;
+            this.navigationService = navigationService;
+        }
 
-            /**
+        /**
+         * Perform this action.
+         * @return {Promise} a promise which will be
+         *         fulfilled when the action has completed.
+         */
+        RemoveAction.prototype.perform = function () {
+            var $q = this.$q,
+                navigationService = this.navigationService,
+                domainObject = this.domainObject;
+            /*
              * Check whether an object ID matches the ID of the object being
              * removed (used to filter a parent's composition to handle the
              * removal.)
              */
             function isNotObject(otherObjectId) {
-                return otherObjectId !== object.getId();
+                return otherObjectId !== domainObject.getId();
             }
 
-            /**
+            /*
              * Mutate a parent object such that it no longer contains the object
              * which is being removed.
              */
@@ -60,7 +73,7 @@ define(
                 model.composition = model.composition.filter(isNotObject);
             }
 
-            /**
+            /*
              * Invoke persistence on a domain object. This will be called upon
              * the removed object's parent (as its composition will have changed.)
              */
@@ -68,45 +81,55 @@ define(
                 var persistence = domainObject.getCapability('persistence');
                 return persistence && persistence.persist();
             }
-
-            // Checks current object with object being removed
-            function checkCurrentObjectNavigation(object, parent) {
-                var currentObj = navigationService.getNavigation();
-                if (currentObj.getId() === object.getId()) {
-                    navigationService.setNavigation(parent);
+            
+            /*
+             * Checks current object and ascendants of current
+             * object with object being removed, if the current
+             * object or any in the current object's path is being removed,
+             * navigate back to parent of removed object.
+             */
+            function checkObjectNavigation(object, parentObject) {
+                // Traverse object starts at current location
+                var traverseObject = (navigationService).getNavigation();
+                
+                // Stop when object is not defined (above ROOT)
+                while (traverseObject && traverseObject.getCapability('context')) {
+                    
+                    // If object currently traversed to is object being removed
+                    // navigate to parent of current object and then exit loop
+                    if (traverseObject.getId() === object.getId()) {
+                        navigationService.setNavigation(parentObject);
+                        return;
+                    }
+                    // Traverses to parent of current object, moving
+                    // up the ascendant path
+                    traverseObject = traverseObject.getCapability('context').getParent();
                 }
             }
-            
-            /**
+
+            /*
              * Remove the object from its parent, as identified by its context
-             * capability.
-             * @param {object} domain object being removed contextCapability
-                      gotten from the "context" capability of this object
+             * capability. Based on object's location and selected object's location
+             * user may be navigated to existing parent object
              */
             function removeFromContext(object) {
                 var contextCapability = object.getCapability('context'),
                     parent = contextCapability.getParent();
-                // Navigates to parent if deleting current object
-                checkCurrentObjectNavigation(object, parent);
-                $q.when(
+                
+                // If currently within path of removed object(s),
+                // navigates to existing object up tree
+                checkObjectNavigation(object, parent);
+                
+                return $q.when(
                     parent.useCapability('mutation', doMutate)
                 ).then(function () {
                     return doPersist(parent);
                 });
             }
 
-            return {
-                /**
-                 * Perform this action.
-                 * @return {module:core/promises.Promise} a promise which will be
-                 *         fulfilled when the action has completed.
-                 */
-                perform: function () {
-                    return $q.when(object)
-                        .then(removeFromContext);
-                }
-            };
-        }
+            return $q.when(domainObject)
+                .then(removeFromContext);
+        };
 
         // Object needs to have a parent for Remove to be applicable
         RemoveAction.appliesTo = function (context) {
@@ -124,4 +147,4 @@ define(
 
         return RemoveAction;
     }
-);
+);

platform/commonUI/edit/src/actions/SaveAction.js

@@ -30,9 +30,27 @@ define(
          * The "Save" action; the action triggered by clicking Save from
          * Edit Mode. Exits the editing user interface and invokes object
          * capabilities to persist the changes that have been made.
+         * @constructor
+         * @implements {Action}
+         * @memberof platform/commonUI/edit
          */
         function SaveAction($location, urlService, context) {
-            var domainObject = context.domainObject;
+            this.domainObject = (context || {}).domainObject;
+            this.$location = $location;
+            this.urlService = urlService;
+        }
+
+        /**
+         * Save changes and conclude editing.
+         *
+         * @returns {Promise} a promise that will be fulfilled when
+         *          cancellation has completed
+         * @memberof platform/commonUI/edit.SaveAction#
+         */
+        SaveAction.prototype.perform = function () {
+            var domainObject = this.domainObject,
+                $location = this.$location,
+                urlService = this.urlService;
 
             // Invoke any save behavior introduced by the editor capability;
             // this is introduced by EditableDomainObject which is
@@ -51,18 +69,8 @@ define(
                 ));
             }
 
-            return {
-                /**
-                 * Save changes and conclude editing.
-                 *
-                 * @returns {Promise} a promise that will be fulfilled when
-                 *          cancellation has completed
-                 */
-                perform: function () {
-                    return doSave().then(returnToBrowse);
-                }
-            };
-        }
+            return doSave().then(returnToBrowse);
+        };
 
         /**
          * Check if this action is applicable in a given context.
@@ -78,4 +86,4 @@ define(
 
         return SaveAction;
     }
-);
+);

platform/commonUI/edit/src/capabilities/EditableCompositionCapability.js

@@ -35,6 +35,9 @@ define(
          * Meant specifically for use by EditableDomainObject and the
          * associated cache; the constructor signature is particular
          * to a pattern used there and may contain unused arguments.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {CompositionCapability}
          */
         return function EditableCompositionCapability(
             contextCapability,
@@ -54,4 +57,4 @@ define(
             );
         };
     }
-);
+);

platform/commonUI/edit/src/capabilities/EditableContextCapability.js

@@ -35,6 +35,9 @@ define(
          * Meant specifically for use by EditableDomainObject and the
          * associated cache; the constructor signature is particular
          * to a pattern used there and may contain unused arguments.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {ContextCapability}
          */
         return function EditableContextCapability(
             contextCapability,
@@ -72,4 +75,4 @@ define(
             return capability;
         };
     }
-);
+);

platform/commonUI/edit/src/capabilities/EditableLookupCapability.js

@@ -35,6 +35,8 @@ define(
          * Meant specifically for use by EditableDomainObject and the
          * associated cache; the constructor signature is particular
          * to a pattern used there and may contain unused arguments.
+         * @constructor
+         * @memberof platform/commonUI/edit
          */
         return function EditableLookupCapability(
             contextCapability,
@@ -76,7 +78,7 @@ define(
             // Wrap a returned value (see above); if it's a promise, wrap
             // the resolved value.
             function wrapResult(result) {
-                return result.then ? // promise-like
+                return (result && result.then) ? // promise-like
                         result.then(makeEditable) :
                         makeEditable(result);
             }
@@ -105,8 +107,10 @@ define(
 
             // Wrap a method of this capability
             function wrapMethod(fn) {
-                capability[fn] =
-                    (idempotent ? oneTimeFunction : wrapFunction)(fn);
+                if (typeof capability[fn] === 'function') {
+                    capability[fn] =
+                        (idempotent ? oneTimeFunction : wrapFunction)(fn);
+                }
             }
 
             // Wrap all methods; return only editable domain objects.
@@ -115,4 +119,4 @@ define(
             return capability;
         };
     }
-);
+);

platform/commonUI/edit/src/capabilities/EditablePersistenceCapability.js

@@ -35,6 +35,9 @@ define(
          * Meant specifically for use by EditableDomainObject and the
          * associated cache; the constructor signature is particular
          * to a pattern used there and may contain unused arguments.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {PersistenceCapability}
          */
         function EditablePersistenceCapability(
             persistenceCapability,
@@ -62,4 +65,4 @@ define(
 
         return EditablePersistenceCapability;
     }
-);
+);

platform/commonUI/edit/src/capabilities/EditableRelationshipCapability.js

@@ -35,6 +35,9 @@ define(
          * Meant specifically for use by EditableDomainObject and the
          * associated cache; the constructor signature is particular
          * to a pattern used there and may contain unused arguments.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {RelationshipCapability}
          */
         return function EditableRelationshipCapability(
             relationshipCapability,
@@ -54,4 +57,4 @@ define(
             );
         };
     }
-);
+);

platform/commonUI/edit/src/capabilities/EditorCapability.js

@@ -39,27 +39,48 @@ define(
          * Meant specifically for use by EditableDomainObject and the
          * associated cache; the constructor signature is particular
          * to a pattern used there and may contain unused arguments.
+         * @constructor
+         * @memberof platform/commonUI/edit
          */
-        return function EditorCapability(
+        function EditorCapability(
             persistenceCapability,
             editableObject,
             domainObject,
             cache
         ) {
+            this.editableObject = editableObject;
+            this.domainObject = domainObject;
+            this.cache = cache;
+        }
 
-            // Simulate Promise.resolve (or $q.when); the former
-            // causes a delayed reaction from Angular (since it
-            // does not trigger a digest) and the latter is not
-            // readily accessible, since we're a few classes
-            // removed from the layer which gets dependency
-            // injection.
-            function resolvePromise(value) {
-                return (value && value.then) ? value : {
-                    then: function (callback) {
-                        return resolvePromise(callback(value));
-                    }
-                };
-            }
+        // Simulate Promise.resolve (or $q.when); the former
+        // causes a delayed reaction from Angular (since it
+        // does not trigger a digest) and the latter is not
+        // readily accessible, since we're a few classes
+        // removed from the layer which gets dependency
+        // injection.
+        function resolvePromise(value) {
+            return (value && value.then) ? value : {
+                then: function (callback) {
+                    return resolvePromise(callback(value));
+                }
+            };
+        }
+
+        /**
+         * Save any changes that have been made to this domain object
+         * (as well as to others that might have been retrieved and
+         * modified during the editing session)
+         * @param {boolean} nonrecursive if true, save only this
+         *        object (and not other objects with associated changes)
+         * @returns {Promise} a promise that will be fulfilled after
+         *          persistence has completed.
+         * @memberof platform/commonUI/edit.EditorCapability#
+         */
+        EditorCapability.prototype.save = function (nonrecursive) {
+            var domainObject = this.domainObject,
+                editableObject = this.editableObject,
+                cache = this.cache;
 
             // Update the underlying, "real" domain object's model
             // with changes made to the copy used for editing.
@@ -74,39 +95,32 @@ define(
                 return domainObject.getCapability('persistence').persist();
             }
 
-            return {
-                /**
-                 * Save any changes that have been made to this domain object
-                 * (as well as to others that might have been retrieved and
-                 * modified during the editing session)
-                 * @param {boolean} nonrecursive if true, save only this
-                 *        object (and not other objects with associated changes)
-                 * @returns {Promise} a promise that will be fulfilled after
-                 *          persistence has completed.
-                 */
-                save: function (nonrecursive) {
-                    return nonrecursive ?
-                            resolvePromise(doMutate()).then(doPersist) :
-                            resolvePromise(cache.saveAll());
-                },
-                /**
-                 * Cancel editing; Discard any changes that have been made to
-                 * this domain object (as well as to others that might have
-                 * been retrieved and modified during the editing session)
-                 * @returns {Promise} a promise that will be fulfilled after
-                 *          cancellation has completed.
-                 */
-                cancel: function () {
-                    return resolvePromise(undefined);
-                },
-                /**
-                 * Check if there are any unsaved changes.
-                 * @returns {boolean} true if there are unsaved changes
-                 */
-                dirty: function () {
-                    return cache.dirty();
-                }
-            };
+            return nonrecursive ?
+                resolvePromise(doMutate()).then(doPersist) :
+                resolvePromise(cache.saveAll());
         };
+
+        /**
+         * Cancel editing; Discard any changes that have been made to
+         * this domain object (as well as to others that might have
+         * been retrieved and modified during the editing session)
+         * @returns {Promise} a promise that will be fulfilled after
+         *          cancellation has completed.
+         * @memberof platform/commonUI/edit.EditorCapability#
+         */
+        EditorCapability.prototype.cancel = function () {
+            return resolvePromise(undefined);
+        };
+
+        /**
+         * Check if there are any unsaved changes.
+         * @returns {boolean} true if there are unsaved changes
+         * @memberof platform/commonUI/edit.EditorCapability#
+         */
+        EditorCapability.prototype.dirty = function () {
+            return this.cache.dirty();
+        };
+
+        return EditorCapability;
     }
-);
+);

platform/commonUI/edit/src/controllers/EditActionController.js

@@ -33,6 +33,7 @@ define(
 
         /**
          * Controller which supplies action instances for Save/Cancel.
+         * @memberof platform/commonUI/edit
          * @constructor
          */
         function EditActionController($scope) {
@@ -51,4 +52,4 @@ define(
 
         return EditActionController;
     }
-);
+);

platform/commonUI/edit/src/controllers/EditController.js

@@ -22,7 +22,8 @@
 /*global define,Promise*/
 
 /**
- * Module defining EditController. Created by vwoeltje on 11/14/14.
+ * This bundle implements Edit mode.
+ * @namespace platform/commonUI/edit
  */
 define(
     ["../objects/EditableDomainObject"],
@@ -33,15 +34,16 @@ define(
          * Controller which is responsible for populating the scope for
          * Edit mode; introduces an editable version of the currently
          * navigated domain object into the scope.
+         * @memberof platform/commonUI/edit
          * @constructor
          */
         function EditController($scope, $q, navigationService) {
-            var navigatedObject;
+            var self = this;
 
             function setNavigation(domainObject) {
                 // Wrap the domain object such that all mutation is
                 // confined to edit mode (until Save)
-                navigatedObject =
+                self.navigatedDomainObject =
                     domainObject && new EditableDomainObject(domainObject, $q);
             }
 
@@ -50,33 +52,33 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
-
-            return {
-                /**
-                 * Get the domain object which is navigated-to.
-                 * @returns {DomainObject} the domain object that is navigated-to
-                 */
-                navigatedObject: function () {
-                    return navigatedObject;
-                },
-                /**
-                 * Get the warning to show if the user attempts to navigate
-                 * away from Edit mode while unsaved changes are present.
-                 * @returns {string} the warning to show, or undefined if
-                 *          there are no unsaved changes
-                 */
-                getUnloadWarning: function () {
-                    var editorCapability = navigatedObject &&
-                            navigatedObject.getCapability("editor"),
-                        hasChanges = editorCapability && editorCapability.dirty();
-
-                    return hasChanges ?
-                            "Unsaved changes will be lost if you leave this page." :
-                            undefined;
-                }
-            };
         }
 
+        /**
+         * Get the domain object which is navigated-to.
+         * @returns {DomainObject} the domain object that is navigated-to
+         */
+        EditController.prototype.navigatedObject = function () {
+            return this.navigatedDomainObject;
+        };
+
+        /**
+         * Get the warning to show if the user attempts to navigate
+         * away from Edit mode while unsaved changes are present.
+         * @returns {string} the warning to show, or undefined if
+         *          there are no unsaved changes
+         */
+        EditController.prototype.getUnloadWarning = function () {
+            var navigatedObject = this.navigatedDomainObject,
+                editorCapability = navigatedObject &&
+                    navigatedObject.getCapability("editor"),
+                hasChanges = editorCapability && editorCapability.dirty();
+
+            return hasChanges ?
+                "Unsaved changes will be lost if you leave this page." :
+                undefined;
+        };
+
         return EditController;
     }
-);
+);

platform/commonUI/edit/src/controllers/EditPanesController.js

@@ -28,15 +28,17 @@ define(
 
         /**
          * Supports the Library and Elements panes in Edit mode.
+         * @memberof platform/commonUI/edit
          * @constructor
          */
         function EditPanesController($scope) {
-            var root;
+            var self = this;
 
             // Update root object based on represented object
             function updateRoot(domainObject) {
-                var context = domainObject &&
-                    domainObject.getCapability('context'),
+                var root = self.rootDomainObject,
+                    context = domainObject &&
+                        domainObject.getCapability('context'),
                     newRoot = context && context.getTrueRoot(),
                     oldId = root && root.getId(),
                     newId = newRoot && newRoot.getId();
@@ -44,25 +46,22 @@ define(
                 // Only update if this has actually changed,
                 // to avoid excessive refreshing.
                 if (oldId !== newId) {
-                    root = newRoot;
+                    self.rootDomainObject = newRoot;
                 }
             }
 
             // Update root when represented object changes
             $scope.$watch('domainObject', updateRoot);
-
-            return {
-                /**
-                 * Get the root-level domain object, as reported by the
-                 * represented domain object.
-                 * @returns {DomainObject} the root object
-                 */
-                getRoot: function () {
-                    return root;
-                }
-            };
         }
+        /**
+         * Get the root-level domain object, as reported by the
+         * represented domain object.
+         * @returns {DomainObject} the root object
+         */
+        EditPanesController.prototype.getRoot = function () {
+            return this.rootDomainObject;
+        };
 
         return EditPanesController;
     }
-);
+);

platform/commonUI/edit/src/directives/MCTBeforeUnload.js

@@ -31,6 +31,7 @@ define(
          * to this attribute will be evaluated during page navigation events
          * and, if it returns a truthy value, will be used to populate a
          * prompt to the user to confirm this navigation.
+         * @memberof platform/commonUI/edit
          * @constructor
          * @param $window the window
          */
@@ -102,4 +103,4 @@ define(
         return MCTBeforeUnload;
 
     }
-);
+);

platform/commonUI/edit/src/objects/EditableDomainObject.js

@@ -68,6 +68,9 @@ define(
          * which need to behave differently in edit mode,
          * and provides a "working copy" of the object's
          * model to allow changes to be easily cancelled.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {DomainObject}
          */
         function EditableDomainObject(domainObject, $q) {
             // The cache will hold all domain objects reached from
@@ -92,10 +95,10 @@ define(
                             this,
                             delegateArguments
                         ),
-                        factory = capabilityFactories[name];
+                        Factory = capabilityFactories[name];
 
-                    return (factory && capability) ?
-                            factory(capability, editableObject, domainObject, cache) :
+                    return (Factory && capability) ?
+                            new Factory(capability, editableObject, domainObject, cache) :
                             capability;
                 };
 
@@ -109,4 +112,4 @@ define(
 
         return EditableDomainObject;
     }
-);
+);

platform/commonUI/edit/src/objects/EditableDomainObjectCache.js

@@ -22,7 +22,7 @@
 /*global define*/
 
 
-/**
+/*
  * An editable domain object cache stores domain objects that have been
  * made editable, in a group that can be saved all-at-once. This supports
  * Edit mode, which is launched for a specific object but may contain
@@ -32,8 +32,6 @@
  * to ensure that changes made while in edit mode do not propagate up
  * to the objects used in browse mode (or to persistence) until the user
  * initiates a Save.
- *
- * @module editor/object/editable-domain-object-cache
  */
 define(
     ["./EditableModelCache"],
@@ -46,107 +44,118 @@ define(
          * of objects retrieved via composition or context capabilities as
          * editable domain objects.
          *
-         * @param {Constructor<EditableDomainObject>} EditableDomainObject a
+         * @param {Constructor<DomainObject>} EditableDomainObject a
          *        constructor function which takes a regular domain object as
          *        an argument, and returns an editable domain object as its
          *        result.
          * @param $q Angular's $q, for promise handling
+         * @memberof platform/commonUI/edit
          * @constructor
-         * @memberof module:editor/object/editable-domain-object-cache
          */
         function EditableDomainObjectCache(EditableDomainObject, $q) {
-            var cache = new EditableModelCache(),
-                dirty = {},
-                root;
-
-            return {
-                /**
-                 * Wrap this domain object in an editable form, or pull such
-                 * an object from the cache if one already exists.
-                 *
-                 * @param {DomainObject} domainObject the regular domain object
-                 * @returns {DomainObject} the domain object in an editable form
-                 */
-                getEditableObject: function (domainObject) {
-                    var type = domainObject.getCapability('type');
-
-                    // Track the top-level domain object; this will have
-                    // some special behavior for its context capability.
-                    root = root || domainObject;
-
-                    // Avoid double-wrapping (WTD-1017)
-                    if (domainObject.hasCapability('editor')) {
-                        return domainObject;
-                    }
-
-                    // Don't bother wrapping non-editable objects
-                    if (!type || !type.hasFeature('creation')) {
-                        return domainObject;
-                    }
-
-                    // Provide an editable form of the object
-                    return new EditableDomainObject(
-                        domainObject,
-                        cache.getCachedModel(domainObject)
-                    );
-                },
-                /**
-                 * Check if a domain object is (effectively) the top-level
-                 * object in this editable subgraph.
-                 * @returns {boolean} true if it is the root
-                 */
-                isRoot: function (domainObject) {
-                    return domainObject === root;
-                },
-                /**
-                 * Mark an editable domain object (presumably already cached)
-                 * as having received modifications during editing; it should be
-                 * included in the bulk save invoked when editing completes.
-                 *
-                 * @param {DomainObject} domainObject the domain object
-                 */
-                markDirty: function (domainObject) {
-                    dirty[domainObject.getId()] = domainObject;
-                },
-                /**
-                 * Mark an object (presumably already cached) as having had its
-                 * changes saved (and thus no longer needing to be subject to a
-                 * save operation.)
-                 *
-                 * @param {DomainObject} domainObject the domain object
-                 */
-                markClean: function (domainObject) {
-                    delete dirty[domainObject.getId()];
-                },
-                /**
-                 * Initiate a save on all objects that have been cached.
-                 */
-                saveAll: function () {
-                    // Get a list of all dirty objects
-                    var objects = Object.keys(dirty).map(function (k) {
-                        return dirty[k];
-                    });
-
-                    // Clear dirty set, since we're about to save.
-                    dirty = {};
-
-                    // Most save logic is handled by the "editor.completion"
-                    // capability, so that is delegated here.
-                    return $q.all(objects.map(function (object) {
-                        // Save; pass a nonrecursive flag to avoid looping
-                        return object.getCapability('editor').save(true);
-                    }));
-                },
-                /**
-                 * Check if any objects have been marked dirty in this cache.
-                 * @returns {boolean} true if objects are dirty
-                 */
-                dirty: function () {
-                    return Object.keys(dirty).length > 0;
-                }
-            };
+            this.cache = new EditableModelCache();
+            this.dirtyObjects = {};
+            this.root = undefined;
+            this.$q = $q;
+            this.EditableDomainObject = EditableDomainObject;
         }
 
+        /**
+         * Wrap this domain object in an editable form, or pull such
+         * an object from the cache if one already exists.
+         *
+         * @param {DomainObject} domainObject the regular domain object
+         * @returns {DomainObject} the domain object in an editable form
+         */
+        EditableDomainObjectCache.prototype.getEditableObject = function (domainObject) {
+            var type = domainObject.getCapability('type'),
+                EditableDomainObject = this.EditableDomainObject;
+
+            // Track the top-level domain object; this will have
+            // some special behavior for its context capability.
+            this.root = this.root || domainObject;
+
+            // Avoid double-wrapping (WTD-1017)
+            if (domainObject.hasCapability('editor')) {
+                return domainObject;
+            }
+
+            // Don't bother wrapping non-editable objects
+            if (!type || !type.hasFeature('creation')) {
+                return domainObject;
+            }
+
+            // Provide an editable form of the object
+            return new EditableDomainObject(
+                domainObject,
+                this.cache.getCachedModel(domainObject)
+            );
+        };
+
+        /**
+         * Check if a domain object is (effectively) the top-level
+         * object in this editable subgraph.
+         * @returns {boolean} true if it is the root
+         */
+        EditableDomainObjectCache.prototype.isRoot = function (domainObject) {
+            return domainObject === this.root;
+        };
+
+        /**
+         * Mark an editable domain object (presumably already cached)
+         * as having received modifications during editing; it should be
+         * included in the bulk save invoked when editing completes.
+         *
+         * @param {DomainObject} domainObject the domain object
+         * @memberof platform/commonUI/edit.EditableDomainObjectCache#
+         */
+        EditableDomainObjectCache.prototype.markDirty = function (domainObject) {
+            this.dirtyObjects[domainObject.getId()] = domainObject;
+        };
+
+        /**
+         * Mark an object (presumably already cached) as having had its
+         * changes saved (and thus no longer needing to be subject to a
+         * save operation.)
+         *
+         * @param {DomainObject} domainObject the domain object
+         */
+        EditableDomainObjectCache.prototype.markClean = function (domainObject) {
+            delete this.dirtyObjects[domainObject.getId()];
+        };
+
+        /**
+         * Initiate a save on all objects that have been cached.
+         * @return {Promise} A promise which will resolve when all objects are
+         *         persisted.
+         */
+        EditableDomainObjectCache.prototype.saveAll = function () {
+            // Get a list of all dirty objects
+            var dirty = this.dirtyObjects,
+                objects = Object.keys(dirty).map(function (k) {
+                    return dirty[k];
+                });
+
+            // Clear dirty set, since we're about to save.
+            this.dirtyObjects = {};
+
+            // Most save logic is handled by the "editor.completion"
+            // capability, so that is delegated here.
+            return this.$q.all(objects.map(function (object) {
+                // Save; pass a nonrecursive flag to avoid looping
+                return object.getCapability('editor').save(true);
+            }));
+        };
+
+        /**
+         * Check if any objects have been marked dirty in this cache.
+         * @returns {boolean} true if objects are dirty
+         */
+        EditableDomainObjectCache.prototype.dirty = function () {
+            return Object.keys(this.dirtyObjects).length > 0;
+        };
+
         return EditableDomainObjectCache;
     }
 );
+

platform/commonUI/edit/src/objects/EditableModelCache.js

@@ -31,33 +31,32 @@ define(
          * made editable, to support a group that can be saved all-at-once.
          * This is useful in Edit mode, which is launched for a specific
          * object but may contain changes across many objects.
+         * @memberof platform/commonUI/edit
          * @constructor
          */
         function EditableModelCache() {
-            var cache = {};
-
-            // Deep-copy a model. Models are JSONifiable, so this can be
-            // done by stringification then destringification
-            function clone(model) {
-                return JSON.parse(JSON.stringify(model));
-            }
-
-            return {
-                /**
-                 * Get this domain object's model from the cache (or
-                 * place it in the cache if it isn't in the cache yet)
-                 * @returns a clone of the domain object's model
-                 */
-                getCachedModel: function (domainObject) {
-                    var id = domainObject.getId();
-
-                    return (cache[id] =
-                        cache[id] || clone(domainObject.getModel()));
-                }
-            };
-
+            this.cache = {};
         }
 
+        // Deep-copy a model. Models are JSONifiable, so this can be
+        // done by stringification then destringification
+        function clone(model) {
+            return JSON.parse(JSON.stringify(model));
+        }
+
+        /**
+         * Get this domain object's model from the cache (or
+         * place it in the cache if it isn't in the cache yet)
+         * @returns a clone of the domain object's model
+         */
+        EditableModelCache.prototype.getCachedModel = function (domainObject) {
+            var id = domainObject.getId(),
+                cache = this.cache;
+
+            return (cache[id] =
+                cache[id] || clone(domainObject.getModel()));
+        };
+
         return EditableModelCache;
     }
-);
+);

platform/commonUI/edit/src/policies/EditActionPolicy.js

@@ -30,53 +30,47 @@ define(
          * Policy controlling when the `edit` and/or `properties` actions
          * can appear as applicable actions of the `view-control` category
          * (shown as buttons in the top-right of browse mode.)
+         * @memberof platform/commonUI/edit
          * @constructor
+         * @implements {Policy.<Action, ActionContext>}
          */
         function EditActionPolicy() {
-            // Get a count of views which are not flagged as non-editable.
-            function countEditableViews(context) {
-                var domainObject = (context || {}).domainObject,
-                    views = domainObject && domainObject.useCapability('view'),
-                    count = 0;
+        }
 
-                // A view is editable unless explicitly flagged as not
-                (views || []).forEach(function (view) {
-                    count += (view.editable !== false) ? 1 : 0;
-                });
+        // Get a count of views which are not flagged as non-editable.
+        function countEditableViews(context) {
+            var domainObject = (context || {}).domainObject,
+                views = domainObject && domainObject.useCapability('view'),
+                count = 0;
 
-                return count;
+            // A view is editable unless explicitly flagged as not
+            (views || []).forEach(function (view) {
+                count += (view.editable !== false) ? 1 : 0;
+            });
+
+            return count;
+        }
+
+        EditActionPolicy.prototype.allow = function (action, context) {
+            var key = action.getMetadata().key,
+                category = (context || {}).category;
+
+            // Only worry about actions in the view-control category
+            if (category === 'view-control') {
+                // Restrict 'edit' to cases where there are editable
+                // views (similarly, restrict 'properties' to when
+                // the converse is true)
+                if (key === 'edit') {
+                    return countEditableViews(context) > 0;
+                } else if (key === 'properties') {
+                    return countEditableViews(context) < 1;
+                }
             }
 
-            return {
-                /**
-                 * Check whether or not a given action is allowed by this
-                 * policy.
-                 * @param {Action} action the action
-                 * @param context the context
-                 * @returns {boolean} true if not disallowed
-                 */
-                allow: function (action, context) {
-                    var key = action.getMetadata().key,
-                        category = (context || {}).category;
-
-                    // Only worry about actions in the view-control category
-                    if (category === 'view-control') {
-                        // Restrict 'edit' to cases where there are editable
-                        // views (similarly, restrict 'properties' to when
-                        // the converse is true)
-                        if (key === 'edit') {
-                            return countEditableViews(context) > 0;
-                        } else if (key === 'properties') {
-                            return countEditableViews(context) < 1;
-                        }
-                    }
-
-                    // Like all policies, allow by default.
-                    return true;
-                }
-            };
-        }
+            // Like all policies, allow by default.
+            return true;
+        };
 
         return EditActionPolicy;
     }
-);
+);

platform/commonUI/edit/src/policies/EditableViewPolicy.js

@@ -28,30 +28,24 @@ define(
 
         /**
          * Policy controlling which views should be visible in Edit mode.
+         * @memberof platform/commonUI/edit
          * @constructor
+         * @implements {Policy.<View, DomainObject>}
          */
         function EditableViewPolicy() {
-            return {
-                /**
-                 * Check whether or not a given action is allowed by this
-                 * policy.
-                 * @param {Action} action the action
-                 * @param domainObject the domain object which will be viewed
-                 * @returns {boolean} true if not disallowed
-                 */
-                allow: function (view, domainObject) {
-                    // If a view is flagged as non-editable, only allow it
-                    // while we're not in Edit mode.
-                    if ((view || {}).editable === false) {
-                        return !domainObject.hasCapability('editor');
-                    }
-
-                    // Like all policies, allow by default.
-                    return true;
-                }
-            };
         }
 
+        EditableViewPolicy.prototype.allow = function (view, domainObject) {
+            // If a view is flagged as non-editable, only allow it
+            // while we're not in Edit mode.
+            if ((view || {}).editable === false) {
+                return !domainObject.hasCapability('editor');
+            }
+
+            // Like all policies, allow by default.
+            return true;
+        };
+
         return EditableViewPolicy;
     }
-);
+);

platform/commonUI/edit/src/representers/EditRepresenter.js

@@ -41,14 +41,17 @@ define(
          * and may be reused for different domain objects and/or
          * representations resulting from changes there.
          *
+         * @memberof platform/commonUI/edit
+         * @implements {Representer}
          * @constructor
          */
         function EditRepresenter($q, $log, scope) {
-            var domainObject,
-                key;
+            var self = this;
 
             // Mutate and persist a new version of a domain object's model.
             function doPersist(model) {
+                var domainObject = self.domainObject;
+
                 // First, mutate; then, persist.
                 return $q.when(domainObject.useCapability("mutation", function () {
                     return model;
@@ -64,7 +67,8 @@ define(
                 // Look up from scope; these will have been populated by
                 // mct-representation.
                 var model = scope.model,
-                    configuration = scope.configuration;
+                    configuration = scope.configuration,
+                    domainObject = self.domainObject;
 
                 // Log the commit message
                 $log.debug([
@@ -78,50 +82,33 @@ define(
                 if (domainObject && domainObject.hasCapability("persistence")) {
                     // Configurations for specific views are stored by
                     // key in the "configuration" field of the model.
-                    if (key && configuration) {
+                    if (self.key && configuration) {
                         model.configuration = model.configuration || {};
-                        model.configuration[key] = configuration;
+                        model.configuration[self.key] = configuration;
                     }
                     doPersist(model);
                 }
             }
 
-            // Respond to the destruction of the current representation.
-            function destroy() {
-                // Nothing to clean up
-            }
-
-            // Handle a specific representation of a specific domain object
-            function represent(representation, representedObject) {
-                // Track the key, to know which view configuration to save to.
-                key = (representation || {}).key;
-                // Track the represented object
-                domainObject = representedObject;
-                // Ensure existing watches are released
-                destroy();
-            }
-
             // Place the "commit" method in the scope
             scope.commit = commit;
-
-            return {
-                /**
-                 * Set the current representation in use, and the domain
-                 * object being represented.
-                 *
-                 * @param {RepresentationDefinition} representation the
-                 *        definition of the representation in use
-                 * @param {DomainObject} domainObject the domain object
-                 *        being represented
-                 */
-                represent: represent,
-                /**
-                 * Release any resources associated with this representer.
-                 */
-                destroy: destroy
-            };
         }
 
+        // Handle a specific representation of a specific domain object
+        EditRepresenter.prototype.represent = function represent(representation, representedObject) {
+            // Track the key, to know which view configuration to save to.
+            this.key = (representation || {}).key;
+            // Track the represented object
+            this.domainObject = representedObject;
+            // Ensure existing watches are released
+            this.destroy();
+        };
+
+        // Respond to the destruction of the current representation.
+        EditRepresenter.prototype.destroy = function destroy() {
+            // Nothing to clean up
+        };
+
         return EditRepresenter;
     }
-);
+);

platform/commonUI/edit/src/representers/EditToolbar.js

@@ -38,125 +38,23 @@ define(
          *
          * @param structure toolbar structure, as provided by view definition
          * @param {Function} commit callback to invoke after changes
+         * @memberof platform/commonUI/edit
          * @constructor
          */
         function EditToolbar(structure, commit) {
-            var toolbarStructure = Object.create(structure || {}),
-                toolbarState,
-                selection,
-                properties = [];
+            var self = this;
 
             // Generate a new key for an item's property
             function addKey(property) {
-                properties.push(property);
-                return properties.length - 1; // Return index of property
-            }
-
-            // Update value for this property in all elements of the
-            // selection which have this property.
-            function updateProperties(property, value) {
-                var changed = false;
-
-                // Update property in a selected element
-                function updateProperty(selected) {
-                    // Ignore selected elements which don't have this property
-                    if (selected[property] !== undefined) {
-                        // Check if this is a setter, or just assignable
-                        if (typeof selected[property] === 'function') {
-                            changed =
-                                changed || (selected[property]() !== value);
-                            selected[property](value);
-                        } else {
-                            changed =
-                                changed || (selected[property] !== value);
-                            selected[property] = value;
-                        }
-                    }
-                }
-
-                // Update property in all selected elements
-                selection.forEach(updateProperty);
-
-                // Return whether or not anything changed
-                return changed;
-            }
-
-            // Look up the current value associated with a property
-            // in selection i
-            function lookupState(property, selected) {
-                var value = selected[property];
-                return (typeof value === 'function') ? value() : value;
-            }
-
-            // Get initial value for a given property
-            function initializeState(property) {
-                var result;
-                // Look through all selections for this property;
-                // values should all match by the time we perform
-                // this lookup anyway.
-                selection.forEach(function (selected) {
-                    result = (selected[property] !== undefined) ?
-                            lookupState(property, selected) :
-                            result;
-                });
-                return result;
-            }
-
-            // Check if all elements of the selection which have this
-            // property have the same value for this property.
-            function isConsistent(property) {
-                var consistent = true,
-                    observed = false,
-                    state;
-
-                // Check if a given element of the selection is consistent
-                // with previously-observed elements for this property.
-                function checkConsistency(selected) {
-                    var next;
-                    // Ignore selections which don't have this property
-                    if (selected[property] !== undefined) {
-                        // Look up state of this element in the selection
-                        next = lookupState(property, selected);
-                        // Detect inconsistency
-                        if (observed) {
-                            consistent = consistent && (next === state);
-                        }
-                        // Track state for next iteration
-                        state = next;
-                        observed = true;
-                    }
-                }
-
-                // Iterate through selections
-                selection.forEach(checkConsistency);
-
-                return consistent;
-            }
-
-            // Used to filter out items which are applicable (or not)
-            // to the current selection.
-            function isApplicable(item) {
-                var property = (item || {}).property,
-                    method = (item || {}).method,
-                    exclusive = !!(item || {}).exclusive;
-
-                // Check if a selected item defines this property
-                function hasProperty(selected) {
-                    return (property && (selected[property] !== undefined)) ||
-                            (method && (typeof selected[method] === 'function'));
-                }
-
-                return selection.map(hasProperty).reduce(
-                    exclusive ? and : or,
-                    exclusive
-                ) && isConsistent(property);
+                self.properties.push(property);
+                return self.properties.length - 1; // Return index of property
             }
 
             // Invoke all functions in selections with the given name
             function invoke(method, value) {
                 if (method) {
                     // Make the change in the selection
-                    selection.forEach(function (selected) {
+                    self.selection.forEach(function (selected) {
                         if (typeof selected[method] === 'function') {
                             selected[method](value);
                         }
@@ -189,73 +87,172 @@ define(
                 return converted;
             }
 
+            this.toolbarState = [];
+            this.selection = undefined;
+            this.properties = [];
+            this.toolbarStructure = Object.create(structure || {});
+            this.toolbarStructure.sections =
+                ((structure || {}).sections || []).map(convertSection);
+        }
+
+        // Check if all elements of the selection which have this
+        // property have the same value for this property.
+        EditToolbar.prototype.isConsistent = function (property) {
+            var self = this,
+                consistent = true,
+                observed = false,
+                state;
+
+            // Check if a given element of the selection is consistent
+            // with previously-observed elements for this property.
+            function checkConsistency(selected) {
+                var next;
+                // Ignore selections which don't have this property
+                if (selected[property] !== undefined) {
+                    // Look up state of this element in the selection
+                    next = self.lookupState(property, selected);
+                    // Detect inconsistency
+                    if (observed) {
+                        consistent = consistent && (next === state);
+                    }
+                    // Track state for next iteration
+                    state = next;
+                    observed = true;
+                }
+            }
+
+            // Iterate through selections
+            self.selection.forEach(checkConsistency);
+
+            return consistent;
+        };
+
+        // Used to filter out items which are applicable (or not)
+        // to the current selection.
+        EditToolbar.prototype.isApplicable = function (item) {
+            var property = (item || {}).property,
+                method = (item || {}).method,
+                exclusive = !!(item || {}).exclusive;
+
+            // Check if a selected item defines this property
+            function hasProperty(selected) {
+                return (property && (selected[property] !== undefined)) ||
+                    (method && (typeof selected[method] === 'function'));
+            }
+
+            return this.selection.map(hasProperty).reduce(
+                    exclusive ? and : or,
+                    exclusive
+                ) && this.isConsistent(property);
+        };
+
+
+        // Look up the current value associated with a property
+        EditToolbar.prototype.lookupState = function (property, selected) {
+            var value = selected[property];
+            return (typeof value === 'function') ? value() : value;
+        };
+
+        /**
+         * Set the current selection. Visibility of sections
+         * and items in the toolbar will be updated to match this.
+         * @param {Array} s the new selection
+         */
+        EditToolbar.prototype.setSelection = function (s) {
+            var self = this;
+
             // Show/hide controls in this section per applicability
             function refreshSectionApplicability(section) {
                 var count = 0;
                 // Show/hide each item
                 (section.items || []).forEach(function (item) {
-                    item.hidden = !isApplicable(item);
+                    item.hidden = !self.isApplicable(item);
                     count += item.hidden ? 0 : 1;
                 });
                 // Hide this section if there are no applicable items
                 section.hidden = !count;
             }
 
-            // Show/hide controls if they are applicable
-            function refreshApplicability() {
-                toolbarStructure.sections.forEach(refreshSectionApplicability);
+            // Get initial value for a given property
+            function initializeState(property) {
+                var result;
+                // Look through all selections for this property;
+                // values should all match by the time we perform
+                // this lookup anyway.
+                self.selection.forEach(function (selected) {
+                    result = (selected[property] !== undefined) ?
+                        self.lookupState(property, selected) :
+                        result;
+                });
+                return result;
             }
 
-            // Refresh toolbar state to match selection
-            function refreshState() {
-                toolbarState = properties.map(initializeState);
-            }
+            this.selection = s;
+            this.toolbarStructure.sections.forEach(refreshSectionApplicability);
+            this.toolbarState = this.properties.map(initializeState);
+        };
 
-            toolbarStructure.sections =
-                ((structure || {}).sections || []).map(convertSection);
+        /**
+         * Get the structure of the toolbar, as appropriate to
+         * pass to `mct-toolbar`.
+         * @returns the toolbar structure
+         */
+        EditToolbar.prototype.getStructure = function () {
+            return this.toolbarStructure;
+        };
 
-            toolbarState = [];
+        /**
+         * Get the current state of the toolbar, as appropriate
+         * to two-way bind to the state handled by `mct-toolbar`.
+         * @returns {Array} state of the toolbar
+         */
+        EditToolbar.prototype.getState = function () {
+            return this.toolbarState;
+        };
 
-            return {
-                /**
-                 * Set the current selection. Visisbility of sections
-                 * and items in the toolbar will be updated to match this.
-                 * @param {Array} s the new selection
-                 */
-                setSelection: function (s) {
-                    selection = s;
-                    refreshApplicability();
-                    refreshState();
-                },
-                /**
-                 * Get the structure of the toolbar, as appropriate to
-                 * pass to `mct-toolbar`.
-                 * @returns the toolbar structure
-                 */
-                getStructure: function () {
-                    return toolbarStructure;
-                },
-                /**
-                 * Get the current state of the toolbar, as appropriate
-                 * to two-way bind to the state handled by `mct-toolbar`.
-                 * @returns {Array} state of the toolbar
-                 */
-                getState: function () {
-                    return toolbarState;
-                },
-                /**
-                 * Update state within the current selection.
-                 * @param {number} index the index of the corresponding
-                 *        element in the state array
-                 * @param value the new value to convey to the selection
-                 */
-                updateState: function (index, value) {
-                    return updateProperties(properties[index], value);
+        /**
+         * Update state within the current selection.
+         * @param {number} index the index of the corresponding
+         *        element in the state array
+         * @param value the new value to convey to the selection
+         */
+        EditToolbar.prototype.updateState = function (index, value) {
+            var self = this;
+
+            // Update value for this property in all elements of the
+            // selection which have this property.
+            function updateProperties(property, value) {
+                var changed = false;
+
+                // Update property in a selected element
+                function updateProperty(selected) {
+                    // Ignore selected elements which don't have this property
+                    if (selected[property] !== undefined) {
+                        // Check if this is a setter, or just assignable
+                        if (typeof selected[property] === 'function') {
+                            changed =
+                                changed || (selected[property]() !== value);
+                            selected[property](value);
+                        } else {
+                            changed =
+                                changed || (selected[property] !== value);
+                            selected[property] = value;
+                        }
+                    }
                 }
-            };
-        }
+
+                // Update property in all selected elements
+                self.selection.forEach(updateProperty);
+
+                // Return whether or not anything changed
+                return changed;
+            }
+
+            return updateProperties(this.properties[index], value);
+        };
 
         return EditToolbar;
     }
 );
 
+

platform/commonUI/edit/src/representers/EditToolbarRepresenter.js

@@ -27,17 +27,21 @@ define(
         "use strict";
 
         // No operation
-        function noop() {}
+        var NOOP_REPRESENTER = {
+            represent: function () {},
+            destroy: function () {}
+        };
 
         /**
          * The EditToolbarRepresenter populates the toolbar in Edit mode
          * based on a view's definition.
          * @param {Scope} scope the Angular scope of the representation
+         * @memberof platform/commonUI/edit
          * @constructor
+         * @implements {Representer}
          */
         function EditToolbarRepresenter(scope, element, attrs) {
-            var toolbar,
-                toolbarObject = {};
+            var self = this;
 
             // Mark changes as ready to persist
             function commit(message) {
@@ -49,31 +53,33 @@ define(
             // Handle changes to the current selection
             function updateSelection(selection) {
                 // Only update if there is a toolbar to update
-                if (toolbar) {
+                if (self.toolbar) {
                     // Make sure selection is array-like
                     selection = Array.isArray(selection) ?
                             selection :
                             (selection ? [selection] : []);
 
                     // Update the toolbar's selection
-                    toolbar.setSelection(selection);
+                    self.toolbar.setSelection(selection);
 
                     // ...and expose its structure/state
-                    toolbarObject.structure = toolbar.getStructure();
-                    toolbarObject.state = toolbar.getState();
+                    self.toolbarObject.structure =
+                        self.toolbar.getStructure();
+                    self.toolbarObject.state =
+                        self.toolbar.getState();
                 }
             }
 
             // Get state (to watch it)
             function getState() {
-                return toolbarObject.state;
+                return self.toolbarObject.state;
             }
 
             // Update selection models to match changed toolbar state
             function updateState(state) {
                 // Update underlying state based on toolbar changes
                 var changed = (state || []).map(function (value, index) {
-                    return toolbar.updateState(index, value);
+                    return self.toolbar.updateState(index, value);
                 }).reduce(function (a, b) {
                     return a || b;
                 }, false);
@@ -85,66 +91,73 @@ define(
                 }
             }
 
-            // Initialize toolbar (expose object to parent scope)
-            function initialize(definition) {
-                // If we have been asked to expose toolbar state...
-                if (attrs.toolbar) {
-                    // Initialize toolbar object
-                    toolbar = new EditToolbar(definition, commit);
-                    // Ensure toolbar state is exposed
-                    scope.$parent[attrs.toolbar] = toolbarObject;
-                }
-            }
-
-            // Represent a domain object using this definition
-            function represent(representation) {
-                // Get the newest toolbar definition from the view
-                var definition = (representation || {}).toolbar || {};
-                // Expose the toolbar object to the parent scope
-                initialize(definition);
-                // Create a selection scope
-                scope.selection = new EditToolbarSelection();
-                // Initialize toolbar to an empty selection
-                updateSelection([]);
-            }
-
-            // Destroy; remove toolbar object from parent scope
-            function destroy() {
+            // Avoid attaching scope to this;
+            // http://errors.angularjs.org/1.2.26/ng/cpws
+            this.setSelection = function (s) {
+                scope.selection = s;
+            };
+            this.clearExposedToolbar = function () {
                 // Clear exposed toolbar state (if any)
                 if (attrs.toolbar) {
                     delete scope.$parent[attrs.toolbar];
                 }
-            }
+            };
+            this.exposeToolbar = function () {
+                scope.$parent[self.attrs.toolbar] = self.toolbarObject;
+            };
+
+            this.commit = commit;
+            this.attrs = attrs;
+            this.updateSelection = updateSelection;
+            this.toolbar = undefined;
+            this.toolbarObject = {};
 
             // If this representation exposes a toolbar, set up watches
             // to synchronize with it.
-            if (attrs.toolbar) {
+            if (attrs && attrs.toolbar) {
                 // Detect and handle changes to state from the toolbar
                 scope.$watchCollection(getState, updateState);
                 // Watch for changes in the current selection state
                 scope.$watchCollection("selection.all()", updateSelection);
                 // Expose toolbar state under that name
-                scope.$parent[attrs.toolbar] = toolbarObject;
+                scope.$parent[attrs.toolbar] = this.toolbarObject;
+            } else {
+                // No toolbar declared, so do nothing.
+                return NOOP_REPRESENTER;
             }
 
-            return {
-                /**
-                 * Set the current representation in use, and the domain
-                 * object being represented.
-                 *
-                 * @param {RepresentationDefinition} representation the
-                 *        definition of the representation in use
-                 * @param {DomainObject} domainObject the domain object
-                 *        being represented
-                 */
-                represent: (attrs || {}).toolbar ? represent : noop,
-                /**
-                 * Release any resources associated with this representer.
-                 */
-                destroy: (attrs || {}).toolbar ? destroy : noop
-            };
         }
 
+        // Represent a domain object using this definition
+        EditToolbarRepresenter.prototype.represent = function (representation) {
+            // Get the newest toolbar definition from the view
+            var definition = (representation || {}).toolbar || {},
+                self = this;
+
+            // Initialize toolbar (expose object to parent scope)
+            function initialize(definition) {
+                // If we have been asked to expose toolbar state...
+                if (self.attrs.toolbar) {
+                    // Initialize toolbar object
+                    self.toolbar = new EditToolbar(definition, self.commit);
+                    // Ensure toolbar state is exposed
+                    self.exposeToolbar();
+                }
+            }
+
+            // Expose the toolbar object to the parent scope
+            initialize(definition);
+            // Create a selection scope
+            this.setSelection(new EditToolbarSelection());
+            // Initialize toolbar to an empty selection
+            this.updateSelection([]);
+        };
+
+        // Destroy; remove toolbar object from parent scope
+        EditToolbarRepresenter.prototype.destroy = function () {
+            this.clearExposedToolbar();
+        };
+
         return EditToolbarRepresenter;
     }
-);
+);

platform/commonUI/edit/src/representers/EditToolbarSelection.js

@@ -37,110 +37,96 @@ define(
          * * The selection, for single selected elements within the
          *   view.
          *
+         * @memberof platform/commonUI/edit
          * @constructor
          */
         function EditToolbarSelection() {
-            var selection = [ {} ],
-                selecting = false,
-                selected;
+            this.selection = [{}];
+            this.selecting = false;
+            this.selectedObj = undefined;
+        }
 
-            // Remove the currently-selected object
-            function deselect() {
-                // Nothing to do if we don't have a selected object
-                if (selecting) {
-                    // Clear state tracking
-                    selecting = false;
-                    selected = undefined;
+        /**
+         * Check if an object is currently selected.
+         * @param {*} obj the object to check for selection
+         * @returns {boolean} true if selected, otherwise false
+         */
+        EditToolbarSelection.prototype.selected = function (obj) {
+            return (obj === this.selectedObj) || (obj === this.selection[0]);
+        };
 
-                    // Remove the selection
-                    selection.pop();
-
-                    return true;
-                }
+        /**
+         * Select an object.
+         * @param obj the object to select
+         * @returns {boolean} true if selection changed
+         */
+        EditToolbarSelection.prototype.select = function (obj) {
+            // Proxy is always selected
+            if (obj === this.selection[0]) {
                 return false;
             }
 
-            // Select an object
-            function select(obj) {
-                // Proxy is always selected
-                if (obj === selection[0]) {
-                    return false;
-                }
+            // Clear any existing selection
+            this.deselect();
 
-                // Clear any existing selection
-                deselect();
+            // Note the current selection state
+            this.selectedObj = obj;
+            this.selecting = true;
 
-                // Note the current selection state
-                selected = obj;
-                selecting = true;
+            // Add the selection
+            this.selection.push(obj);
+        };
 
-                // Add the selection
-                selection.push(obj);
+        /**
+         * Clear the current selection.
+         * @returns {boolean} true if selection changed
+         */
+        EditToolbarSelection.prototype.deselect = function () {
+            // Nothing to do if we don't have a selected object
+            if (this.selecting) {
+                // Clear state tracking
+                this.selecting = false;
+                this.selectedObj = undefined;
+
+                // Remove the selection
+                this.selection.pop();
+
+                return true;
             }
+            return false;
+        };
 
+        /**
+         * Get the currently-selected object.
+         * @returns the currently selected object
+         */
+        EditToolbarSelection.prototype.get = function () {
+            return this.selectedObj;
+        };
 
-            // Check if an object is selected
-            function isSelected(obj) {
-                return (obj === selected) || (obj === selection[0]);
+        /**
+         * Get/set the view proxy (for toolbar actions taken upon
+         * the view itself.)
+         * @param [proxy] the view proxy (if setting)
+         * @returns the current view proxy
+         */
+        EditToolbarSelection.prototype.proxy = function (p) {
+            if (arguments.length > 0) {
+                this.selection[0] = p;
             }
+            return this.selection[0];
+        };
 
-            // Getter for current selection
-            function get() {
-                return selected;
-            }
-
-            // Getter/setter for view proxy
-            function proxy(p) {
-                if (arguments.length > 0) {
-                    selection[0] = p;
-                }
-                return selection[0];
-            }
-
-            // Getter for the full array of selected objects (incl. view proxy)
-            function all() {
-                return selection;
-            }
-
-            return {
-                /**
-                 * Check if an object is currently selected.
-                 * @returns true if selected, otherwise false
-                 */
-                selected: isSelected,
-                /**
-                 * Select an object.
-                 * @param obj the object to select
-                 * @returns {boolean} true if selection changed
-                 */
-                select: select,
-                /**
-                 * Clear the current selection.
-                 * @returns {boolean} true if selection changed
-                 */
-                deselect: deselect,
-                /**
-                 * Get the currently-selected object.
-                 * @returns the currently selected object
-                 */
-                get: get,
-                /**
-                 * Get/set the view proxy (for toolbar actions taken upon
-                 * the view itself.)
-                 * @param [proxy] the view proxy (if setting)
-                 * @returns the current view proxy
-                 */
-                proxy: proxy,
-                /**
-                 * Get an array containing all selections, including the
-                 * selection proxy. It is generally not advisable to
-                 * mutate this array directly.
-                 * @returns {Array} all selections
-                 */
-                all: all
-            };
-        }
+        /**
+         * Get an array containing all selections, including the
+         * selection proxy. It is generally not advisable to
+         * mutate this array directly.
+         * @returns {Array} all selections
+         */
+        EditToolbarSelection.prototype.all = function () {
+            return this.selection;
+        };
 
         return EditToolbarSelection;
     }
-);
+);

platform/commonUI/edit/test/actions/RemoveActionSpec.js

@@ -31,7 +31,13 @@ define(
                 mockNavigationService,
                 mockDomainObject,
                 mockParent,
+                mockChildObject,
+                mockGrandchildObject,
+                mockRootObject,
                 mockContext,
+                mockChildContext,
+                mockGrandchildContext,
+                mockRootContext,
                 mockMutation,
                 mockPersistence,
                 mockType,
@@ -55,6 +61,18 @@ define(
                     "domainObject",
                     [ "getId", "getCapability" ]
                 );
+                mockChildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
+                mockGrandchildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
+                mockRootObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
                 mockQ = { when: mockPromise };
                 mockParent = {
                     getModel: function () {
@@ -65,12 +83,12 @@ define(
                     },
                     useCapability: function (k, v) {
                         return capabilities[k].invoke(v);
-                    },
-                    getId: function () {
-                        return "test";
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockChildContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockGrandchildContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockRootContext = jasmine.createSpyObj("context", [ "getParent" ]);
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
@@ -97,7 +115,7 @@ define(
                     type: mockType
                 };
                 model = {
-                    composition: [ "a", "test", "b", "c" ]
+                    composition: [ "a", "test", "b" ]
                 };
 
                 actionContext = { domainObject: mockDomainObject };
@@ -137,11 +155,64 @@ define(
 
                 // Should have removed "test" - that was our
                 // mock domain object's id.
-                expect(result.composition).toEqual(["a", "b", "c"]);
+                expect(result.composition).toEqual(["a", "b"]);
 
                 // Finally, should have persisted
                 expect(mockPersistence.persist).toHaveBeenCalled();
             });
+            
+            it("removes parent of object currently navigated to", function () {
+                // Navigates to child object
+                mockNavigationService.getNavigation.andReturn(mockChildObject);
+                
+                // Test is id of object being removed
+                // Child object has different id
+                mockDomainObject.getId.andReturn("test");
+                mockChildObject.getId.andReturn("not test");
+                
+                // Sets context for the child and domainObject
+                mockDomainObject.getCapability.andReturn(mockContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                
+                // Parents of child and domainObject are set
+                mockContext.getParent.andReturn(mockParent);
+                mockChildContext.getParent.andReturn(mockDomainObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects navigation to parent of domainObject (removed object)
+                expect(mockNavigationService.setNavigation).toHaveBeenCalledWith(mockParent);
+            });
+            
+            it("checks if removing object not in ascendent path (reaches ROOT)", function () {
+                // Navigates to grandchild of ROOT
+                mockNavigationService.getNavigation.andReturn(mockGrandchildObject);
+                
+                // domainObject (grandparent) is set as ROOT, child and grandchild
+                // are set objects not being removed
+                mockDomainObject.getId.andReturn("test 1");
+                mockRootObject.getId.andReturn("ROOT");
+                mockChildObject.getId.andReturn("not test 2");
+                mockGrandchildObject.getId.andReturn("not test 3");
+                
+                // Sets context for the grandchild, child, and domainObject
+                mockRootObject.getCapability.andReturn(mockRootContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                mockGrandchildObject.getCapability.andReturn(mockGrandchildContext);
+                
+                // Parents of grandchild and child are set
+                mockChildContext.getParent.andReturn(mockRootObject);
+                mockGrandchildContext.getParent.andReturn(mockChildObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects no navigation to occur
+                expect(mockNavigationService.setNavigation).not.toHaveBeenCalled();
+            });
 
         });
     }

platform/commonUI/edit/test/objects/EditableDomainObjectCacheSpec.js

@@ -112,7 +112,9 @@ define(
             });
 
             it("saves objects that have been marked dirty", function () {
-                var objects = ['a', 'b', 'c'].map(TestObject).map(cache.getEditableObject);
+                var objects = ['a', 'b', 'c'].map(TestObject).map(function (domainObject) {
+                    return cache.getEditableObject(domainObject);
+                });
 
                 cache.markDirty(objects[0]);
                 cache.markDirty(objects[2]);
@@ -123,7 +125,9 @@ define(
             });
 
             it("does not save objects that have been marked clean", function () {
-                var objects = ['a', 'b', 'c'].map(TestObject).map(cache.getEditableObject);
+                var objects = ['a', 'b', 'c'].map(TestObject).map(function (domainObject) {
+                    return cache.getEditableObject(domainObject);
+                });
 
                 cache.markDirty(objects[0]);
                 cache.markDirty(objects[2]);

platform/commonUI/general/bundle.json

@@ -11,8 +11,7 @@
             },
             {
                 "key": "agentService",
-                "implementation": "/services/AgentService.js",
-                "depends": [ "$window" ]
+                "implementation": "/services/AgentService.js"
             }
         ],
         "runs": [
@@ -201,7 +200,7 @@
             {
                 "key": "label",
                 "templateUrl": "templates/label.html",
-                "uses": [ "type" ],
+                "uses": [ "type", "location" ],
                 "gestures": [ "drag", "menu", "info" ]
             },
             {

platform/commonUI/general/res/css/forms.css

@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -96,6 +97,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*********************************************** FORM ELEMENTS */
 /*
 @mixin invokeMenu($baseColor: $colorBodyFg) {
 	$c: $baseColor;
@@ -170,87 +172,80 @@
  *****************************************************************************/
 /* line 22, ../sass/forms/_elems.scss */
 .section-header {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
   background: rgba(255, 255, 255, 0.1);
+  color: #cccccc;
   font-size: 0.8em;
-  margin-top: 5px;
-  padding: 5px; }
-  /* line 28, ../sass/forms/_elems.scss */
-  .section-header:first-child {
-    margin-top: 0; }
+  padding: 5px 5px;
+  text-transform: uppercase; }
 
 /* line 35, ../sass/forms/_elems.scss */
 .form .form-section {
-  position: relative; }
-/* line 39, ../sass/forms/_elems.scss */
+  position: relative;
+  margin-bottom: 20px; }
+/* line 40, ../sass/forms/_elems.scss */
 .form .form-row {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   *zoom: 1;
-  border-top: 1px solid #4d4d4d;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px;
+  padding: 5px 0;
   position: relative; }
-  /* line 46, ../sass/forms/_elems.scss */
+  /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 50, ../sass/forms/_elems.scss */
-  .form .form-row .label,
-  .form .form-row .controls {
+  /* line 52, ../sass/forms/_elems.scss */
+  .form .form-row > .label,
+  .form .form-row > .controls {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    box-sizing: border-box;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
   /* line 61, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
+    min-width: 120px;
     position: relative;
     white-space: nowrap;
-    width: 20%; }
-  /* line 69, ../sass/forms/_elems.scss */
+    width: 30%; }
+  /* line 71, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 73, ../sass/forms/_elems.scss */
+  /* line 75, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
-    width: 79.9%; }
-    /* line 80, ../sass/forms/_elems.scss */
+    width: 69.9%; }
+    /* line 82, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 89, ../sass/forms/_elems.scss */
-    .form .form-row .controls input[type="text"] {
-      height: 22px;
-      line-height: 22px;
-      margin-top: -4px;
-      vertical-align: baseline; }
-    /* line 96, ../sass/forms/_elems.scss */
+    /* line 91, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 100, ../sass/forms/_elems.scss */
+    /* line 95, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 104, ../sass/forms/_elems.scss */
+    /* line 99, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 108, ../sass/forms/_elems.scss */
+    /* line 103, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 113, ../sass/forms/_elems.scss */
+  /* line 108, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 117, ../sass/forms/_elems.scss */
+  /* line 112, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -263,7 +258,7 @@
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 128, ../sass/forms/_elems.scss */
+    /* line 123, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -272,24 +267,24 @@
       bottom: 5px;
       left: 5px; }
 
-/* line 142, ../sass/forms/_elems.scss */
+/* line 137, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 148, ../sass/forms/_elems.scss */
+/* line 143, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 153, ../sass/forms/_elems.scss */
+/* line 148, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 160, ../sass/forms/_elems.scss */
+  /* line 155, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -324,18 +319,17 @@ label.form-control.checkbox input {
 .edit-main textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
-  box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
   background: rgba(255, 255, 255, 0.1);
   border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   color: #cccccc;
   outline: none;
   padding: 5px;
@@ -371,18 +365,17 @@ label.form-control.checkbox input {
 input[type="text"] {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
-  box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
   background: rgba(255, 255, 255, 0.1);
   border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
@@ -422,9 +415,9 @@ input[type="text"] {
   background-image: -moz-linear-gradient(#525252, #454545);
   background-image: -webkit-linear-gradient(#525252, #454545);
   background-image: linear-gradient(#525252, #454545);
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -440,7 +433,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -449,10 +442,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -511,18 +504,17 @@ input[type="text"] {
 .channel-selector .treeview {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
-  box-shadow: inset rgba(0, 0, 0, 0.5) 0 1px 5px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
   background: rgba(255, 255, 255, 0.1);
   border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   color: #cccccc;
   outline: none;
   padding: 0 3px;

platform/commonUI/general/res/css/items.css

@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -96,6 +97,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*********************************************** FORM ELEMENTS */
 /*
 @mixin invokeMenu($baseColor: $colorBodyFg) {
 	$c: $baseColor;
@@ -163,9 +165,9 @@
     background-image: -moz-linear-gradient(#5e5e5e, #525252);
     background-image: -webkit-linear-gradient(#5e5e5e, #525252);
     background-image: linear-gradient(#5e5e5e, #525252);
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -184,7 +186,7 @@
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -193,15 +195,15 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
     /* line 46, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
-      color: #0099cc !important; }
+      color: deepskyblue !important; }
       /* line 48, ../sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
@@ -210,35 +212,35 @@
       opacity: 1; }
     /* line 57, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
-    /* line 61, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar.abs {
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+    /* line 63, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       height: 20px;
       line-height: 20px;
+      text-align: right;
       z-index: 5; }
-      /* line 66, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
+      /* line 69, ../sass/items/_item.scss */
+      .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 68, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
+        /* line 71, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 70, ../sass/items/_item.scss */
-          .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
+          /* line 73, ../sass/items/_item.scss */
+          .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 76, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar.abs {
+    /* line 79, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
-      height: 30px;
-      padding: 5px; }
-    /* line 82, ../sass/items/_item.scss */
+      line-height: 110%; }
+    /* line 85, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 88, ../sass/items/_item.scss */
+      /* line 91, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -248,24 +250,23 @@
         left: 40px;
         width: auto;
         height: auto;
-        color: #737373;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 100, ../sass/items/_item.scss */
+        /* line 103, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
-          color: #1a8e8b;
-          height: 36px;
-          line-height: 36px;
+          color: #49dedb;
+          height: auto;
+          line-height: 100%;
           position: absolute;
-          font-size: 32px;
+          font-size: 0.3em;
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 112, ../sass/items/_item.scss */
+      /* line 116, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -285,17 +286,20 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 124, ../sass/items/_item.scss */
+    /* line 128, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-      color: #cccccc;
       overflow: hidden;
+      text-overflow: ellipsis;
       white-space: nowrap;
-      text-overflow: ellipsis; }
-    /* line 132, ../sass/items/_item.scss */
+      color: #cccccc; }
+    /* line 133, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-size: 0.8em; }
-    /* line 135, ../sass/items/_item.scss */
+    /* line 137, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -303,9 +307,9 @@
       background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
       background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
       background-image: linear-gradient(#0ac2ff, #00b4f0);
-      -moz-border-radius: 2px;
-      -webkit-border-radius: 2px;
-      border-radius: 2px;
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
@@ -317,7 +321,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 163, ../sass/_mixins.scss */
+      /* line 167, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -326,22 +330,22 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 166, ../sass/_mixins.scss */
+        /* line 170, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 171, ../sass/_mixins.scss */
+      /* line 175, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 140, ../sass/items/_item.scss */
+      /* line 142, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 141, ../sass/items/_item.scss */
+      /* line 143, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 142, ../sass/items/_item.scss */
+      /* line 144, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 144, ../sass/items/_item.scss */
+      /* line 146, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
@@ -367,82 +371,82 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 34, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .mobile-grid-nav {
-    top: 0px;
-    bottom: 0px;
-    right: 55px; }
-  /* line 39, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .mobile-info {
-    text-align: center;
-    width: 50px;
-    right: 0px;
-    left: auto;
-    font-size: 1.3em; }
-  /* line 47, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .bar.bottom-bar.abs {
-    top: 0px;
-    height: auto; }
-  /* line 54, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .item-main .item-type {
-    font-size: 30px;
-    top: 0px;
-    left: 0px;
-    text-align: left;
-    height: auto; }
-  /* line 61, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .item-main .item-open {
-    display: none; }
-  /* line 65, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
-    margin-left: 30px; } }
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%; }
+    /* line 33, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item > .contents {
+      top: 0px;
+      right: 10px;
+      bottom: 0px;
+      left: 10px; }
+    /* line 37, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: 0 !important;
+      left: auto !important;
+      right: 20px !important;
+      width: 40px !important;
+      height: auto !important;
+      text-align: right; }
+    /* line 44, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      left: 40px;
+      right: 60px; }
+    /* line 52, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      line-height: 100%;
+      text-align: left;
+      width: 30px; }
+      /* line 61, ../sass/mobile/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+        bottom: 0; }
+    /* line 65, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: block;
+      opacity: 1;
+      font-size: 1em;
+      width: auto; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
-    width: 100%;
     height: 50px; }
-    /* line 74, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-right {
-      top: 100%; }
-    /* line 77, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-info {
-      line-height: 25px; }
-    /* line 81, ../sass/mobile/_item.scss */
+    /* line 78, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 50px !important; }
+    /* line 82, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 7px;
+      bottom: auto;
+      height: 35px; }
+    /* line 87, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      line-height: 40px; }
-    /* line 85, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .title {
-      margin-right: 10px;
-      line-height: 25px; }
-    /* line 89, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .details {
-      margin-right: 10px;
-      line-height: 0px; } }
+      top: 10px;
+      bottom: auto;
+      height: 30px; }
+    /* line 90, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 50px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
-    width: 100%;
-    height: 66.66667px; }
-    /* line 99, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-right {
-      top: 100%; }
-    /* line 103, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-info {
-      line-height: 38px; }
-    /* line 107, ../sass/mobile/_item.scss */
+    height: 66px; }
+    /* line 100, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 66px !important; }
+    /* line 104, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 15px;
+      bottom: auto;
+      height: 35px; }
+    /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      font-size: 30px;
-      line-height: 50px; }
+      top: 18px;
+      bottom: auto;
+      height: 30px; }
     /* line 112, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .title {
-      margin-right: 10px;
-      line-height: 38px; }
-    /* line 116, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .details {
-      margin-right: 10px;
-      line-height: 0px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 29, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item {
-    width: 200px;
-    height: 200px; } }
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 66px; } }

platform/commonUI/general/res/css/tree.css

@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -96,6 +97,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*********************************************** FORM ELEMENTS */
 /*
 @mixin invokeMenu($baseColor: $colorBodyFg) {
 	$c: $baseColor;
@@ -151,7 +153,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 277, ../sass/_mixins.scss */
+  /* line 314, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -160,146 +162,175 @@ ul.tree {
   ul.tree li {
     display: block;
     position: relative; }
-    /* line 28, ../sass/tree/_tree.scss */
-    ul.tree li span.tree-item {
-      -moz-border-radius: 2px;
-      -webkit-border-radius: 2px;
-      border-radius: 2px;
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      display: block;
-      font-size: 0.8em;
-      height: 1.4rem;
-      line-height: 1.4rem;
-      margin-bottom: 3px;
-      position: relative; }
-      /* line 39, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .view-control {
-        display: inline-block;
-        margin-left: 5px;
-        font-size: 0.75em;
-        width: 10px; }
-        @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-          /* line 47, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .view-control:hover {
-            color: #ffc700; } }
-      /* line 53, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .label {
-        display: block;
-        overflow: hidden;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        bottom: 0px;
-        left: 0px;
-        width: auto;
-        height: auto;
-        left: 15px; }
-        /* line 60, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .type-icon {
-          overflow: false;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          width: auto;
-          height: auto;
-          text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
-          color: #0099cc;
-          left: 5px;
-          right: auto;
-          width: 1em; }
-          /* line 68, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            text-shadow: black 0 1px 2px;
-            position: absolute;
-            z-index: 2; }
-          /* line 74, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            color: #ff3c00;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            top: 1px;
-            right: -2px; }
-          /* line 80, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
-            color: #49dedb;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            left: -3px;
-            bottom: 5px; }
-        /* line 89, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          overflow: hidden;
-          position: absolute;
-          top: 0px;
-          right: 0px;
-          bottom: 0px;
-          left: 0px;
-          width: auto;
-          height: auto;
-          display: block;
-          left: 30px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 100, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.loading {
-        pointer-events: none; }
-        /* line 102, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .label {
-          opacity: 0.5; }
-          /* line 104, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item.loading .label .title-label {
-            font-style: italic; }
-        /* line 108, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .wait-spinner {
-          margin-left: 14px; }
-      /* line 113, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 117, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .view-control {
-          color: #0099cc; }
-        /* line 120, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .label .type-icon {
-          color: #fff; }
-      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 128, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover {
-          background: #404040;
-          color: #cccccc; }
-          /* line 131, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item:not(.selected):hover .context-trigger {
-            display: block; }
-          /* line 134, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item:not(.selected):hover .icon {
-            color: #33ccff; } }
-      /* line 141, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item:not(.loading) {
-        cursor: pointer; }
-      /* line 145, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .context-trigger {
-        top: -1px;
-        position: absolute;
-        right: 3px; }
-        /* line 151, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .context-trigger .invoke-menu {
-          font-size: 0.75em;
-          height: 0.9rem;
-          line-height: 0.9rem; }
-  /* line 160, ../sass/tree/_tree.scss */
+  /* line 29, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
+/* line 34, ../sass/tree/_tree.scss */
+.tree-item,
+.search-result-item {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  display: block;
+  font-size: 0.8rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-bottom: 3px;
+  position: relative; }
+  /* line 47, ../sass/tree/_tree.scss */
+  .tree-item .view-control,
+  .search-result-item .view-control {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 0.75em;
+    width: 10px; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 55, ../sass/tree/_tree.scss */
+      .tree-item .view-control:hover,
+      .search-result-item .view-control:hover {
+        color: #ffc700; } }
+  /* line 61, ../sass/tree/_tree.scss */
+  .tree-item .label,
+  .search-result-item .label {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    line-height: 1.5rem; }
+    /* line 69, ../sass/tree/_tree.scss */
+    .tree-item .label .type-icon,
+    .search-result-item .label .type-icon {
+      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+      font-size: 16px;
+      color: #0099cc;
+      left: 5px;
+      position: absolute;
+      top: 4px;
+      bottom: auto;
+      height: 16px;
+      line-height: 100%;
+      right: auto;
+      width: 16px; }
+      /* line 82, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        text-shadow: black 0 1px 2px;
+        position: absolute;
+        z-index: 2; }
+      /* line 88, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        color: #ff3c00;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        top: 1px;
+        right: -2px; }
+      /* line 94, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-link {
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        left: -3px;
+        bottom: 0px; }
+    /* line 102, ../sass/tree/_tree.scss */
+    .tree-item .label .title-label,
+    .search-result-item .label .title-label {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      display: block;
+      left: 30px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  /* line 113, ../sass/tree/_tree.scss */
+  .tree-item.loading,
+  .search-result-item.loading {
+    pointer-events: none; }
+    /* line 115, ../sass/tree/_tree.scss */
+    .tree-item.loading .label,
+    .search-result-item.loading .label {
+      opacity: 0.5; }
+      /* line 117, ../sass/tree/_tree.scss */
+      .tree-item.loading .label .title-label,
+      .search-result-item.loading .label .title-label {
+        font-style: italic; }
+    /* line 121, ../sass/tree/_tree.scss */
+    .tree-item.loading .wait-spinner,
+    .search-result-item.loading .wait-spinner {
+      margin-left: 14px; }
+  /* line 126, ../sass/tree/_tree.scss */
+  .tree-item.selected,
+  .search-result-item.selected {
+    background: #005177;
+    color: #fff; }
+    /* line 130, ../sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: #0099cc; }
+    /* line 133, ../sass/tree/_tree.scss */
+    .tree-item.selected .label .type-icon,
+    .search-result-item.selected .label .type-icon {
+      color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 141, ../sass/tree/_tree.scss */
+    .tree-item:not(.selected):hover,
+    .search-result-item:not(.selected):hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #cccccc; }
+      /* line 144, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .context-trigger,
+      .search-result-item:not(.selected):hover .context-trigger {
+        display: block; }
+      /* line 147, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .icon,
+      .search-result-item:not(.selected):hover .icon {
+        color: #33ccff; } }
+  /* line 154, ../sass/tree/_tree.scss */
+  .tree-item:not(.loading),
+  .search-result-item:not(.loading) {
+    cursor: pointer; }
+  /* line 158, ../sass/tree/_tree.scss */
+  .tree-item .context-trigger,
+  .search-result-item .context-trigger {
+    top: -1px;
+    position: absolute;
+    right: 3px; }
+    /* line 164, ../sass/tree/_tree.scss */
+    .tree-item .context-trigger .invoke-menu,
+    .search-result-item .context-trigger .invoke-menu {
+      font-size: 0.75em;
+      height: 0.9rem;
+      line-height: 0.9rem; }
+
+/* line 173, ../sass/tree/_tree.scss */
+.tree-item .label {
+  left: 15px; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -322,38 +353,33 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 24, ../sass/mobile/_tree.scss */
-  ul.tree {
-    margin: 0;
-    padding: 0; }
-    /* line 277, ../sass/_mixins.scss */
-    ul.tree li {
-      list-style-type: none;
-      margin: 0;
-      padding: 0; }
-    /* line 29, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item {
-      height: 38px;
-      line-height: 38px;
-      padding-top: 3px;
-      padding-bottom: 3px;
-      margin-bottom: 0px; }
-      /* line 36, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .view-control {
-        position: absolute;
-        right: 13px;
-        font-size: 1.8em;
-        right: 0px;
-        width: 35px;
-        text-align: center; }
-      /* line 45, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label {
-        left: 3px;
-        right: 45px;
-        font-size: 1.2em; }
-        /* line 54, ../sass/mobile/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          right: 16.9px; }
-    /* line 63, ../sass/mobile/_tree.scss */
-    ul.tree ul.tree {
-      margin-left: 7px; } }
+  /* line 27, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; }
+
+  /* line 31, ../sass/mobile/_tree.scss */
+  .tree-item,
+  .search-result-item {
+    height: 35px;
+    line-height: 35px;
+    margin-bottom: 0px; }
+    /* line 36, ../sass/mobile/_tree.scss */
+    .tree-item .view-control,
+    .search-result-item .view-control {
+      position: absolute;
+      font-size: 1.1em;
+      right: 0px;
+      width: 30px;
+      text-align: center; }
+    /* line 45, ../sass/mobile/_tree.scss */
+    .tree-item .label,
+    .search-result-item .label {
+      left: 0;
+      right: 35px;
+      line-height: 35px; }
+      /* line 50, ../sass/mobile/_tree.scss */
+      .tree-item .label .type-icon,
+      .search-result-item .label .type-icon {
+        top: 9px;
+        bottom: auto;
+        height: 16px; } }

platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json

@@ -1,19 +1,67 @@
 {
 	"metadata": {
-		"name": "WTD Symbols v2.",
-		"lastOpened": 1435765696898,
-		"created": 1435764071891
+		"name": "WTD Symbols v2.2",
+		"lastOpened": 1439948744240,
+		"created": 1439948734037
 	},
 	"iconSets": [
 		{
 			"selection": [
+				{
+					"order": 82,
+					"id": 84,
+					"prevSize": 32,
+					"code": 58887,
+					"name": "icon-x-in-circle",
+					"tempChar": ""
+				},
+				{
+					"order": 77,
+					"id": 83,
+					"prevSize": 32,
+					"code": 58881,
+					"name": "icon-datatable",
+					"tempChar": ""
+				},
+				{
+					"order": 78,
+					"id": 82,
+					"prevSize": 32,
+					"code": 58882,
+					"name": "icon-tabular-scrolling",
+					"tempChar": ""
+				},
+				{
+					"order": 79,
+					"id": 81,
+					"prevSize": 32,
+					"code": 58884,
+					"name": "icon-tabular",
+					"tempChar": ""
+				},
+				{
+					"order": 80,
+					"id": 80,
+					"prevSize": 32,
+					"code": 58885,
+					"name": "icon-calendar",
+					"tempChar": ""
+				},
+				{
+					"order": 81,
+					"id": 78,
+					"prevSize": 32,
+					"code": 58886,
+					"name": "icon-paint-bucket",
+					"tempChar": ""
+				},
 				{
 					"order": 1,
 					"id": 75,
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 3,
@@ -21,7 +69,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 4,
@@ -29,7 +77,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 5,
@@ -37,7 +85,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 6,
@@ -45,7 +93,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 7,
@@ -53,7 +101,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 8,
@@ -61,7 +109,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 9,
@@ -69,7 +117,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -77,7 +125,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -85,7 +133,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -93,7 +141,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 13,
@@ -101,7 +149,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -109,7 +157,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -117,7 +165,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -125,7 +173,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -133,7 +181,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -141,7 +189,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -149,7 +197,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -157,7 +205,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -165,7 +213,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -173,7 +221,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -181,7 +229,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -189,7 +237,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -197,7 +245,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -205,7 +253,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -213,7 +261,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -221,7 +269,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box-round-corners",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -229,7 +277,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -237,7 +285,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -245,7 +293,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -253,7 +301,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -261,7 +309,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -269,7 +317,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -277,7 +325,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -285,7 +333,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -293,7 +341,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -301,7 +349,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -309,7 +357,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -317,7 +365,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -325,7 +373,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -333,7 +381,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -341,7 +389,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -349,7 +397,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -357,7 +405,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -365,7 +413,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -373,7 +421,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -381,7 +429,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -389,7 +437,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -397,7 +445,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -405,7 +453,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -413,7 +461,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -421,7 +469,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -429,7 +477,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -437,7 +485,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -445,7 +493,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -453,7 +501,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -461,7 +509,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -469,7 +517,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -477,7 +525,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -485,7 +533,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -493,7 +541,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -501,7 +549,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -509,7 +557,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -517,7 +565,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -525,7 +573,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -533,7 +581,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -541,7 +589,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -549,7 +597,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -557,7 +605,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -565,7 +613,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -573,7 +621,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -581,7 +629,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -589,7 +637,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -604,6 +652,223 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
+				{
+					"id": 84,
+					"paths": [
+						"M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM832 704l-128 128-192-192-192 192-128-128 192-192-192-192 128-128 192 192 192-192 128 128-192 192 192 192z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-x-in-circle"
+					],
+					"colorPermutations": {
+						"16161751": []
+					}
+				},
+				{
+					"id": 83,
+					"paths": [
+						"M1024 192c0 106.039-229.23 192-512 192s-512-85.961-512-192c0-106.039 229.23-192 512-192s512 85.961 512 192z",
+						"M512 512c-282.8 0-512-86-512-192v512c0 106 229.2 192 512 192s512-86 512-192v-512c0 106-229.2 192-512 192zM896 575v256c-36.6 15.6-79.8 28.8-128 39.4v-256c48.2-10.6 91.4-23.8 128-39.4zM256 614.4v256c-48.2-10.4-91.4-23.8-128-39.4v-256c36.6 15.6 79.8 28.8 128 39.4zM384 890v-256c41 4 83.8 6 128 6s87-2.2 128-6v256c-41 4-83.8 6-128 6s-87-2.2-128-6z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						},
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-datatable"
+					],
+					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
+				{
+					"id": 82,
+					"paths": [
+						"M64 0c-35.2 0-64 28.8-64 64v192h448v-256h-384z",
+						"M1024 256v-192c0-35.2-28.8-64-64-64h-384v256h448z",
+						"M0 384v192c0 35.2 28.8 64 64 64h384v-256h-448z",
+						"M960 640c35.2 0 64-28.8 64-64v-192h-448v256h384z",
+						"M512 1024l-256-256h512z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						},
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						},
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						},
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						},
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-tabular-scrolling"
+					],
+					"colorPermutations": {
+						"16161751": [
+							1,
+							1,
+							1,
+							1,
+							1
+						],
+						"125525525516161751": [
+							1,
+							1,
+							1,
+							1,
+							1
+						]
+					}
+				},
+				{
+					"id": 81,
+					"paths": [
+						"M0 64v192h448v-256h-384c-35.2 0-64 28.8-64 64z",
+						"M960 0h-384v256h448v-192c0-35.2-28.8-64-64-64z",
+						"M576 384h448v256h-448v-256z",
+						"M0 384h448v256h-448v-256z",
+						"M0 960c0 35.2 28.8 64 64 64h384v-256h-448v192z",
+						"M576 1024h384c35.2 0 64-28.8 64-64v-192h-448v256z"
+					],
+					"attrs": [
+						{
+							"fill": "#000",
+							"opacity": 1
+						},
+						{
+							"fill": "#000",
+							"opacity": 1
+						},
+						{
+							"fill": "#000",
+							"opacity": 1
+						},
+						{
+							"fill": "#000",
+							"opacity": 1
+						},
+						{
+							"fill": "#000",
+							"opacity": 1
+						},
+						{
+							"fill": "#000",
+							"opacity": 1
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-tabular"
+					],
+					"colorPermutations": {
+						"16161751": [
+							0,
+							0,
+							0,
+							0,
+							0,
+							0
+						],
+						"125525525516161751": [
+							0,
+							0,
+							0,
+							0,
+							0,
+							0
+						]
+					}
+				},
+				{
+					"id": 80,
+					"paths": [
+						"M896 0h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-768c0-70.4-57.6-128-128-128zM640 448h-256v-192h256v192zM384 512h256v192h-256v-192zM320 704h-256v-192h256v192zM320 256v192h-256v-192h256zM128 960c-17 0-33-6.6-45.2-18.8s-18.8-28.2-18.8-45.2v-128h256v192h-192zM384 960v-192h256v192h-256zM960 896c0 17-6.6 33-18.8 45.2s-28.2 18.8-45.2 18.8h-192v-192h256v128zM960 704h-256v-192h256v192zM960 448h-256v-192h256v192z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-calendar"
+					],
+					"colorPermutations": {
+						"16161751": [
+							1
+						],
+						"125525525516161751": [
+							1
+						]
+					}
+				},
+				{
+					"id": 78,
+					"paths": [
+						"M896 640c0 0-130 188-128 256 2 70.6 57.4 128 128 128s126-57.4 128-128c2-68-128-256-128-256z",
+						"M449 129l0.2-64.8c0-35.4-28.4-64-63.8-64.2 0 0-0.2 0-0.2 0-35.2 0-63.8 28.6-64 63.8l-0.6 190.8-294 292.6c-50 50-12.4 215.2 112.4 340s290 162.4 340 112.4l417-423.6-447-447zM384 640c-70.6 0-128-57.4-128-128 0-47.4 25.8-89 64.4-111l-0.4 110.8c0 35.4 28.4 64 63.8 64.2 0 0 0.2 0 0.2 0 35.2 0 63.8-28.6 64-63.8l0.4-110.8c38 22.2 63.6 63.4 63.6 110.6 0 70.6-57.4 128-128 128z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						},
+						{
+							"fill": "rgb(6,161,75)",
+							"opacity": 1
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-paint-bucket"
+					],
+					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
 				{
 					"id": 75,
 					"paths": [
@@ -1767,7 +2032,24 @@
 					]
 				}
 			],
-			"invisible": false
+			"invisible": false,
+			"colorThemes": [
+				[
+					[
+						0,
+						0,
+						0,
+						1
+					],
+					[
+						6,
+						161,
+						75,
+						1
+					]
+				]
+			],
+			"colorThemeIdx": 0
 		},
 		{
 			"selection": [
@@ -14510,7 +14792,8 @@
 			"selector": "class",
 			"classSelector": ".ui-symbol",
 			"showMetrics": true,
-			"showMetadata": true
+			"showMetadata": true,
+			"embed": false
 		},
 		"imagePref": {
 			"prefix": "icon-",

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -6,78 +6,85 @@
 <font id="wtdsymbols" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
-<glyph unicode="&#x21;" d="M832 960h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM640 128c0-35.2-28.8-64-64-64h-128c-35.2 0-64 28.8-64 64v64c0 35.2 28.8 64 64 64h128c35.2 0 64-28.8 64-64v-64zM696.062 768.494l-48.124-384.988c-4.366-34.928-36.738-63.506-71.938-63.506h-128c-35.2 0-67.572 28.578-71.938 63.506l-48.124 384.988c-4.366 34.928 20.862 63.506 56.062 63.506h256c35.2 0 60.428-28.578 56.062-63.506z" />
-<glyph unicode="&#x2a;" 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="&#x2b;" 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="&#x2d;" 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="&#x2e;" 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="&#x32;" d="M1024 960l-640-640-384 384v-384l384-384 640 640z" />
-<glyph unicode="&#x33;" d="M640 704h-256c-70.4 0-128-57.6-128-128v-256c0-70.4 57.6-128 128-128h256c70.4 0 128 57.6 128 128v256c0 70.4-57.6 128-128 128zM0 960h192v-192h-192v192zM256 960h192v-128h-192v128zM576 960h192v-128h-192v128zM256 64h192v-128h-192v128zM576 64h192v-128h-192v128zM0 384h128v-192h-128v192zM0 704h128v-192h-128v192zM896 384h128v-192h-128v192zM896 704h128v-192h-128v192zM832 960h192v-192h-192v192zM0 128h192v-192h-192v192zM832 128h192v-192h-192v192z" />
-<glyph unicode="&#x35;" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
-<glyph unicode="&#x36;" 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="&#x3c;" d="M256 448l512-512v1024z" />
-<glyph unicode="&#x3e;" d="M768 448l-512 512v-1024z" />
-<glyph unicode="&#x3f;" 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="&#x41;" 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="&#x43;" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM768 384h-256c-35.2 0-64 28.8-64 64v384c0 35.2 28.8 64 64 64s64-28.8 64-64v-320h192c35.2 0 64-28.8 64-64s-28.8-64-64-64z" />
-<glyph unicode="&#x44;" 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="&#x46;" 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="&#x47;" 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="&#x48;" 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="&#x49;" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
-<glyph unicode="&#x4c;" 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="&#x4d;" d="M1024 64l-201.662 201.662c47.922 72.498 73.662 157.434 73.662 246.338 0 119.666-46.6 232.168-131.216 316.784s-197.118 131.216-316.784 131.216-232.168-46.6-316.784-131.216-131.216-197.118-131.216-316.784 46.6-232.168 131.216-316.784 197.118-131.216 316.784-131.216c88.904 0 173.84 25.74 246.338 73.662l201.662-201.662 128 128zM448 256c-141.16 0-256 114.842-256 256 0 141.16 114.84 256 256 256 141.158 0 256-114.84 256-256 0-141.158-114.842-256-256-256z" />
-<glyph unicode="&#x4f;" 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="&#x50;" 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="&#x51;" 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="&#x53;" 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="&#x54;" d="M718.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.6zM794.2 207.2c-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-457.2c31.4-252.6 247-448 508-448s476.6 195.4 508 448h-167.2c-14-56.4-33-122-56.6-176.8zM301.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.6zM274 772.8c18.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.8h457.2c-31.4 252.6-246.8 448-508 448s-476.6-195.4-508-448h167.2c14 56.4 33 122 56.6 176.8 15.6 35.8 31.4 63.2 48.2 84z" />
-<glyph unicode="&#x56;" 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="&#x58;" d="M640 576h-128v128h-128v-128h-128v-128h128v-128h128v128h128zM1024 64l-201.662 201.662c47.922 72.498 73.662 157.434 73.662 246.338 0 119.666-46.6 232.168-131.216 316.784s-197.118 131.216-316.784 131.216c-119.666 0-232.168-46.6-316.784-131.216s-131.216-197.118-131.216-316.784c0-119.666 46.6-232.168 131.216-316.784s197.118-131.216 316.784-131.216c88.904 0 173.84 25.74 246.338 73.662l201.662-201.662 128 128zM448 256c-141.16 0-256 114.842-256 256 0 141.16 114.84 256 256 256 141.158 0 256-114.84 256-256 0-141.158-114.842-256-256-256z" />
-<glyph unicode="&#x59;" d="M256 576h384v-128h-384v128zM1024 64l-201.662 201.662c47.922 72.498 73.662 157.434 73.662 246.338 0 119.666-46.6 232.168-131.216 316.784s-197.118 131.216-316.784 131.216c-119.666 0-232.168-46.6-316.784-131.216s-131.216-197.118-131.216-316.784c0-119.666 46.6-232.168 131.216-316.784s197.118-131.216 316.784-131.216c88.904 0 173.84 25.74 246.338 73.662l201.662-201.662 128 128zM448 256c-141.16 0-256 114.842-256 256 0 141.16 114.84 256 256 256 141.158 0 256-114.84 256-256 0-141.158-114.842-256-256-256z" />
-<glyph unicode="&#x5a;" 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="&#x5e;" d="M512 704l-512-512h1024z" />
-<glyph unicode="&#x5f;" 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="&#x61;" 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="&#x64;" 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="&#x66;" 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="&#x6c;" 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="&#x6d;" d="M0 960h1024v-256h-1024v256zM0 576h1024v-256h-1024v256zM0 192h1024v-256h-1024v256z" />
-<glyph unicode="&#x6f;" 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="&#x70;" 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="&#x72;" d="M1012.8 545.8v391.6l-127.6-127.4c-96.6 96.8-225.2 150-362 150s-265.2-53.2-362-150c-96.8-96.8-150-225.2-150-362s53.2-265.4 150-362c96.8-96.8 225.2-150 362-150s265.4 53.2 362 150l-136.6 136.6c-124.2-124.2-326.4-124.2-450.8 0-124.2 124.2-124.2 326.4 0 450.8 124.2 124.2 326.4 124.2 450.8 0l-127.4-127.4h391.6z" />
-<glyph unicode="&#x73;" 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="&#x74;" 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="&#x76;" d="M512 192l512 512h-1024z" />
-<glyph unicode="&#x78;" 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="&#x79;" 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="&#x7a;" 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="&#x7b;" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" horiz-adv-x="512" />
-<glyph unicode="&#x7d;" d="M-2 960l256-512-256-512h256l256 512-256 512z" horiz-adv-x="512" />
-<glyph unicode="&#xe0;" d="M1024 128c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
-<glyph unicode="&#xe1;" 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="&#xe2;" 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="&#xe3;" 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="&#xe4;" d="M0 960v-256h128v64h256v-704h-192v-128h640v128h-192v704h256v-64h128v256z" />
-<glyph unicode="&#xe5;" 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="&#xe7;" 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="&#xe8;" 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="&#xe9;" 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="&#xea;" 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="&#xeb;" d="M510 450l512-512h-1024zM510 962l512-512h-1024z" />
-<glyph unicode="&#xec;" d="M512-64l-512 1024h1024z" />
-<glyph unicode="&#xed;" d="M512 960l512-1024h-1024z" />
-<glyph unicode="&#xee;" d="M510 450l-512 512h1024zM510-62l-512 512h1024z" />
-<glyph unicode="&#xef;" d="M1024 448l-1024-512v1024z" />
-<glyph unicode="&#xf1;" d="M126 962h256v-1024h-256v1024zM638 962h256v-1024h-256v1024z" />
-<glyph unicode="&#xf2;" 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="&#xf3;" 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="&#xf4;" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
-<glyph unicode="&#xf5;" d="M638 898c0 35.4-28.6 64-64 64h-128c-35.4 0-64-28.6-64-64s28.6-64 64-64h128c35.4 0 64 28.6 64 64zM510 834c-247.4 0-448-200.6-448-448s200.6-448 448-448 448 200.6 448 448-200.6 448-448 448zM510 386h-336c0 185.2 150.8 336 336 336v-336z" />
-<glyph unicode="&#xf6;" 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="&#xe600;" d="M832 447.6c0 0.2 0 0.2 0 0.4v320c0 105.6-86.4 192-192 192h-448c-105.6 0-192-86.4-192-192v-320c0-105.6 86.4-192 192-192h263.6l-197.2 445.6 573.6-254zM766.8 300.2l193.8 20.4-576.6 255.4 255.4-576.6 20.4 193.8 257-257.2 107.2 107.2z" />
-<glyph unicode="&#xe603;" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
-<glyph unicode="&#xe60d;" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
-<glyph unicode="&#xe642;" 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="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#x21;" glyph-name="icon-alert-rect" d="M832 960h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM640 128c0-35.2-28.8-64-64-64h-128c-35.2 0-64 28.8-64 64v64c0 35.2 28.8 64 64 64h128c35.2 0 64-28.8 64-64v-64zM696.062 768.494l-48.124-384.988c-4.366-34.928-36.738-63.506-71.938-63.506h-128c-35.2 0-67.572 28.578-71.938 63.506l-48.124 384.988c-4.366 34.928 20.862 63.506 56.062 63.506h256c35.2 0 60.428-28.578 56.062-63.506z" />
+<glyph unicode="&#x2a;" 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="&#x2b;" 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="&#x2d;" 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="&#x2e;" 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="&#x32;" glyph-name="icon-check" d="M1024 960l-640-640-384 384v-384l384-384 640 640z" />
+<glyph unicode="&#x33;" glyph-name="icon-box-with-dashed-lines" d="M640 704h-256c-70.4 0-128-57.6-128-128v-256c0-70.4 57.6-128 128-128h256c70.4 0 128 57.6 128 128v256c0 70.4-57.6 128-128 128zM0 960h192v-192h-192v192zM256 960h192v-128h-192v128zM576 960h192v-128h-192v128zM256 64h192v-128h-192v128zM576 64h192v-128h-192v128zM0 384h128v-192h-128v192zM0 704h128v-192h-128v192zM896 384h128v-192h-128v192zM896 704h128v-192h-128v192zM832 960h192v-192h-192v192zM0 128h192v-192h-192v192zM832 128h192v-192h-192v192z" />
+<glyph unicode="&#x35;" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
+<glyph unicode="&#x36;" 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="&#x3c;" glyph-name="icon-arrow-left" d="M256 448l512-512v1024z" />
+<glyph unicode="&#x3e;" glyph-name="icon-arrow-right" d="M768 448l-512 512v-1024z" />
+<glyph unicode="&#x3f;" 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="&#x41;" 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="&#x43;" glyph-name="icon-clock" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM768 384h-256c-35.2 0-64 28.8-64 64v384c0 35.2 28.8 64 64 64s64-28.8 64-64v-320h192c35.2 0 64-28.8 64-64s-28.8-64-64-64z" />
+<glyph unicode="&#x44;" 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="&#x46;" 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="&#x47;" 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="&#x48;" 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="&#x49;" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
+<glyph unicode="&#x4c;" 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="&#x4d;" glyph-name="icon-magnify" d="M1024 64l-201.662 201.662c47.922 72.498 73.662 157.434 73.662 246.338 0 119.666-46.6 232.168-131.216 316.784s-197.118 131.216-316.784 131.216-232.168-46.6-316.784-131.216-131.216-197.118-131.216-316.784 46.6-232.168 131.216-316.784 197.118-131.216 316.784-131.216c88.904 0 173.84 25.74 246.338 73.662l201.662-201.662 128 128zM448 256c-141.16 0-256 114.842-256 256 0 141.16 114.84 256 256 256 141.158 0 256-114.84 256-256 0-141.158-114.842-256-256-256z" />
+<glyph unicode="&#x4f;" 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="&#x50;" 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="&#x51;" 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="&#x53;" 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="&#x54;" glyph-name="icon-telemetry" d="M718.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.6zM794.2 207.2c-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-457.2c31.4-252.6 247-448 508-448s476.6 195.4 508 448h-167.2c-14-56.4-33-122-56.6-176.8zM301.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.6zM274 772.8c18.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.8h457.2c-31.4 252.6-246.8 448-508 448s-476.6-195.4-508-448h167.2c14 56.4 33 122 56.6 176.8 15.6 35.8 31.4 63.2 48.2 84z" />
+<glyph unicode="&#x56;" 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="&#x58;" glyph-name="icon-magnify-in" d="M640 576h-128v128h-128v-128h-128v-128h128v-128h128v128h128zM1024 64l-201.662 201.662c47.922 72.498 73.662 157.434 73.662 246.338 0 119.666-46.6 232.168-131.216 316.784s-197.118 131.216-316.784 131.216c-119.666 0-232.168-46.6-316.784-131.216s-131.216-197.118-131.216-316.784c0-119.666 46.6-232.168 131.216-316.784s197.118-131.216 316.784-131.216c88.904 0 173.84 25.74 246.338 73.662l201.662-201.662 128 128zM448 256c-141.16 0-256 114.842-256 256 0 141.16 114.84 256 256 256 141.158 0 256-114.84 256-256 0-141.158-114.842-256-256-256z" />
+<glyph unicode="&#x59;" glyph-name="icon-magnify-out" d="M256 576h384v-128h-384v128zM1024 64l-201.662 201.662c47.922 72.498 73.662 157.434 73.662 246.338 0 119.666-46.6 232.168-131.216 316.784s-197.118 131.216-316.784 131.216c-119.666 0-232.168-46.6-316.784-131.216s-131.216-197.118-131.216-316.784c0-119.666 46.6-232.168 131.216-316.784s197.118-131.216 316.784-131.216c88.904 0 173.84 25.74 246.338 73.662l201.662-201.662 128 128zM448 256c-141.16 0-256 114.842-256 256 0 141.16 114.84 256 256 256 141.158 0 256-114.84 256-256 0-141.158-114.842-256-256-256z" />
+<glyph unicode="&#x5a;" 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="&#x5e;" glyph-name="icon-arrow-up" d="M512 704l-512-512h1024z" />
+<glyph unicode="&#x5f;" 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="&#x61;" 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="&#x64;" 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="&#x66;" 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="&#x6c;" 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="&#x6d;" glyph-name="icon-menu" d="M0 960h1024v-256h-1024v256zM0 576h1024v-256h-1024v256zM0 192h1024v-256h-1024v256z" />
+<glyph unicode="&#x6f;" 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="&#x70;" 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="&#x72;" glyph-name="icon-refresh" d="M1012.8 545.8v391.6l-127.6-127.4c-96.6 96.8-225.2 150-362 150s-265.2-53.2-362-150c-96.8-96.8-150-225.2-150-362s53.2-265.4 150-362c96.8-96.8 225.2-150 362-150s265.4 53.2 362 150l-136.6 136.6c-124.2-124.2-326.4-124.2-450.8 0-124.2 124.2-124.2 326.4 0 450.8 124.2 124.2 326.4 124.2 450.8 0l-127.4-127.4h391.6z" />
+<glyph unicode="&#x73;" 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="&#x74;" 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="&#x76;" glyph-name="icon-arrow-down" d="M512 192l512 512h-1024z" />
+<glyph unicode="&#x78;" glyph-name="icon-x-heavy" 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="&#x79;" 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="&#x7a;" 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="&#x7b;" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
+<glyph unicode="&#x7d;" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
+<glyph unicode="&#xe0;" glyph-name="icon-box-round-corners" d="M1024 128c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
+<glyph unicode="&#xe1;" 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="&#xe2;" 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="&#xe3;" 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="&#xe4;" glyph-name="icon-T" d="M0 960v-256h128v64h256v-704h-192v-128h640v128h-192v704h256v-64h128v256z" />
+<glyph unicode="&#xe5;" 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="&#xe7;" 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="&#xe8;" 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="&#xe9;" 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="&#xea;" 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="&#xeb;" glyph-name="icon-arrow-double-up" d="M510 450l512-512h-1024zM510 962l512-512h-1024z" />
+<glyph unicode="&#xec;" glyph-name="icon-arrow-tall-down" d="M512-64l-512 1024h1024z" />
+<glyph unicode="&#xed;" glyph-name="icon-arrow-tall-up" d="M512 960l512-1024h-1024z" />
+<glyph unicode="&#xee;" glyph-name="icon-arrow-double-down" d="M510 450l-512 512h1024zM510-62l-512 512h1024z" />
+<glyph unicode="&#xef;" glyph-name="icon-play" d="M1024 448l-1024-512v1024z" />
+<glyph unicode="&#xf1;" glyph-name="icon-pause" d="M126 962h256v-1024h-256v1024zM638 962h256v-1024h-256v1024z" />
+<glyph unicode="&#xf2;" 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="&#xf3;" 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="&#xf4;" glyph-name="icon-link" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
+<glyph unicode="&#xf5;" glyph-name="icon-timer" d="M638 898c0 35.4-28.6 64-64 64h-128c-35.4 0-64-28.6-64-64s28.6-64 64-64h128c35.4 0 64 28.6 64 64zM510 834c-247.4 0-448-200.6-448-448s200.6-448 448-448 448 200.6 448 448-200.6 448-448 448zM510 386h-336c0 185.2 150.8 336 336 336v-336z" />
+<glyph unicode="&#xf6;" 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="&#xe600;" glyph-name="icon-box-with-arrow-cursor" d="M832 447.6c0 0.2 0 0.2 0 0.4v320c0 105.6-86.4 192-192 192h-448c-105.6 0-192-86.4-192-192v-320c0-105.6 86.4-192 192-192h263.6l-197.2 445.6 573.6-254zM766.8 300.2l193.8 20.4-576.6 255.4 255.4-576.6 20.4 193.8 257-257.2 107.2 107.2z" />
+<glyph unicode="&#xe601;" 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="&#xe602;" 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="&#xe603;" glyph-name="icon-alert-triangle" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
+<glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
+<glyph unicode="&#xe605;" 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="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
+<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle-heavy" 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="&#xe608;" 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-384v128h128v128h-128v128h320v-256h64v-128z" />
+<glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
+<glyph unicode="&#xe642;" 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" />
 </font></defs></svg>

platform/commonUI/general/res/sass/_constants.scss

@@ -29,7 +29,7 @@ $interiorMargin: 5px;
 $interiorMarginLg: $interiorMargin * 2;
 $interiorMarginSm: 3px;
 $basicCr: 2px;
-$controlCr: 2px;
+$controlCr: 3px;
 $smallCr: 2px;
 $badgeW: 35px;
 
@@ -47,6 +47,8 @@ $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
+$colorFormLines: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.2);
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
@@ -84,6 +86,7 @@ $tabularColorBodyBg: darken($colorBodyBg, 10%);
 $tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
 $tabularColorHeaderBg: lighten($colorBodyBg, 10%);
 $tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
+$tabularColorHeaderBorder: $colorBodyBg;
 
 /************************** RATIOS */
 $ltGamma: 20%;
@@ -99,9 +102,11 @@ $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
+$treeSearchInputBarH: 25px;
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
+$overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
@@ -109,15 +114,16 @@ $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
 // Tree
 $treeVCW: 10px;
+$treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
 $colorItemTreeVCHover: $colorAlt1;
 // Tabular
-$tabularHeaderH: 18px;
+$tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
-$tabularTdPadTB: 2px;
+$tabularTdPadTB: 3px;
 // Imagery
 $imageMainControlBarH: 22px;
 $imageThumbsD: 120px;
@@ -141,12 +147,14 @@ $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.7em;
 
 /************************** CONTROLS */
-$controlCr: $basicCr;
 $controlDisabledOpacity: 0.3;
-$formLabelW: 20%;
+$formLabelW: 30%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
-$menuLineH: 1.4rem;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$menuLineH: 1.5rem;
+$menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;

platform/commonUI/general/res/sass/_global.scss

@@ -50,6 +50,11 @@ input, textarea {
 	font-family: Helvetica, Arial, sans-serif;
 }
 
+input[type="text"] {
+	vertical-align: baseline;
+	padding: 3px 5px !important;
+}
+
 h1, h2, h3 {
 	margin: 0;
 }
@@ -66,12 +71,6 @@ p {
 	margin-bottom: $interiorMarginLg;
 }
 
-span {
-	/* 618 DEBUG
-	box-sizing: border-box;
-	*/
-}
-
 mct-container {
 	display: block;
 }

platform/commonUI/general/res/sass/_icons.scss

@@ -45,7 +45,7 @@
 	}
 }
 
-.bar .icon {
+.bar .ui-symbol {
 	display: inline-block;
 }
 
@@ -65,9 +65,9 @@
 	position: absolute;
 }
 
-.tree-item .type-icon {
-	font-size: 16px; // 16px is crisp size
-}
+//.tree-item .type-icon {
+//	font-size: 16px; // 16px is crisp size
+//}
 
 .l-icon-link:before {
 	content: "\f4";

platform/commonUI/general/res/sass/_main.scss

@@ -34,11 +34,9 @@
 @import "fonts";
 @import "user-environ/layout";
 @import "mobile/layout";
-
 @import "fixed-position";
 @import "about";
 @import "text";
-@import "badges";
 @import "icons";
 @import "limits";
 @import "data-status";
@@ -54,7 +52,6 @@
 @import "edit/editor";
 @import "features/imagery";
 @import "features/time-display";
-@import "forms/mixins";
 @import "forms/elems";
 @import "forms/validation";
 @import "forms/text-input";
@@ -63,12 +60,14 @@
 @import "forms/datetime";
 @import "forms/filter";
 @import "plots/plots-main";
+@import "search/search";
+@import "mobile/search/search";
 @import "overlay/overlay";
 @import "mobile/overlay/overlay";
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/bottom-bar";
-@import "user-environ/object-browse";
+//@import "user-environ/object-browse";
 @import "user-environ/tool-bar";
 @import "helpers/bubbles";
 @import "helpers/splitter";
@@ -76,5 +75,7 @@
 @import "properties";
 @import "autoflow";
 @import "iframe";
+@import "messages";
 @import "initialization";
 @import "hide-non-functional";
+@import "views";

platform/commonUI/general/res/sass/_messages.scss

@@ -0,0 +1,12 @@
+/* Styles for messages */
+
+.message {
+	&.block {
+		@include border-radius($basicCr);
+		padding: $interiorMarginLg;
+	}
+	&.error {
+		background-color: rgba($colorAlert,0.3);
+		color: lighten($colorAlert, 20%);
+	}
+}

platform/commonUI/general/res/sass/_mixins.scss

@@ -23,154 +23,158 @@
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
-    top: $offset; right: $offset; bottom: $offset; left: $offset;
-    width: auto; height: auto;
+    top: $offset;
+    right: $offset;
+    bottom: $offset;
+    left: $offset;
+    width: auto;
+    height: auto;
 }
 
 @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;
+    // 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 trans-prop-nice($props, $t: 500ms) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property($props);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property($props);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
 }
 
 @mixin trans-prop-nice-fade($t: 0.5s) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property(visibility, opacity, background-color, border-color);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property(visibility, opacity, background-color, border-color);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
 }
 
 @mixin trans-prop-nice-resize-h($t: 0.5s) {
-	@include transition-property(height, bottom, top);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(height, bottom, top);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin trans-prop-nice-resize-w($t: 0.5s) {
-	@include transition-property(width, left, right);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(width, left, right);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin triangle-right($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-top: $size/$ratio solid transparent;
-	border-left: $size solid $color;
-	border-bottom: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-top: $size/$ratio solid transparent;
+    border-left: $size solid $color;
+    border-bottom: $size/$ratio solid transparent;
 }
 
 @mixin triangle-down($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-left: $size/$ratio solid transparent;
-	border-top: $size solid $color;
-	border-right: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-left: $size/$ratio solid transparent;
+    border-top: $size solid $color;
+    border-right: $size/$ratio solid transparent;
 }
 
 @mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-	//$size: $size*2;
-	width: 0;
-	height: 0;
-	$slopedB: $size/$ratio solid transparent;
-	$straightB: $size solid $color;
-	@if $dir == "up" {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-bottom: $straightB;
-	} @else if $dir == "right" {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-left: $straightB;
-	} @else if $dir == "down"  {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-top: $straightB;
-	} @else {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-right: $straightB;
-	}
+    //$size: $size*2;
+    width: 0;
+    height: 0;
+    $slopedB: $size/$ratio solid transparent;
+    $straightB: $size solid $color;
+    @if $dir == "up" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-bottom: $straightB;
+    } @else if $dir == "right" {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-left: $straightB;
+    } @else if $dir == "down" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-top: $straightB;
+    } @else {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-right: $straightB;
+    }
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
-	@include 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;
+    @include 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 bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
-	$deg: 90deg;
-	@if ($repeatDir != 'x') {
-		$deg: 0deg;
-		$repeatDir: repeat-y;
-	} @else {
-		$repeatDir: repeat-x;
-	}
+    $deg: 90deg;
+    @if ($repeatDir != 'x') {
+        $deg: 0deg;
+        $repeatDir: repeat-y;
+    } @else {
+        $repeatDir: repeat-x;
+    }
 
-	@include background-image(linear-gradient($deg,
-		$c 1px, transparent 1px,
-		transparent 100%
-	));
-	background-repeat: $repeatDir;
+    @include background-image(linear-gradient($deg,
+        $c 1px, transparent 1px,
+        transparent 100%
+    ));
+    background-repeat: $repeatDir;
 }
 
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-	$ltnRatio: 7%;
-	$gradRatio: 5%;
-	$hovRatio: 7%;
-	$bgBase: lighten($bg, $ltnRatio);
-	$fgBase: lighten($fg, $ltnRatio);
-	$gradC1: lighten($bgBase, $gradRatio);
-	$gradC2: $bgBase;
-	$cInvokeBase: lighten($gradC1, $ltnRatio*2);
+    $ltnRatio: 7%;
+    $gradRatio: 5%;
+    $hovRatio: 7%;
+    $bgBase: lighten($bg, $ltnRatio);
+    $fgBase: lighten($fg, $ltnRatio);
+    $gradC1: lighten($bgBase, $gradRatio);
+    $gradC2: $bgBase;
+    $cInvokeBase: lighten($gradC1, $ltnRatio*2);
 
-	@include background-image(linear-gradient($gradC1, $gradC2));
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border: none;
-	border-top: 1px solid lighten($gradC1, 2%);
-	color: $fg;
-	display: inline-block;
-	@if $hover == true {
-		&:not(.disabled):hover {
-			@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
-			color: lighten($fgBase, $hovRatio);
-			&.btn-menu .invoke-menu {
-				color: lighten($cInvokeBase, $hovRatio);
-			}
-		}
-	}
-	&.btn-menu .invoke-menu {
-		color: $cInvokeBase;
-	}
+    @include background-image(linear-gradient($gradC1, $gradC2));
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include boxShdwSubtle();
+    border: none;
+    border-top: 1px solid lighten($gradC1, 2%);
+    color: $fg;
+    display: inline-block;
+    @if $hover == true {
+        &:not(.disabled):hover {
+            @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
+            color: lighten($fgBase, $hovRatio);
+            &.btn-menu .invoke-menu {
+                color: lighten($cInvokeBase, $hovRatio);
+            }
+        }
+    }
+    &.btn-menu .invoke-menu {
+        color: $cInvokeBase;
+    }
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -184,45 +188,45 @@
 }
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-	&:before {
-		@include trans-prop-nice("border-color",0.75s);
-		content: '';
-		display: block;
-		height: auto;
-		pointer-events: none;
-		position: absolute;
-		z-index: 2;
+    &:before {
+        @include trans-prop-nice("border-color", 0.75s);
+        content: '';
+        display: block;
+        height: auto;
+        pointer-events: none;
+        position: absolute;
+        z-index: 2;
 
-		@if $direction == "horizontal" {
-			border-top: $w $style darken($b, 15%);
-			top: 2px;
-			left: 5px;
-			right: 5px;
+        @if $direction == "horizontal" {
+            border-top: $w $style darken($b, 15%);
+            top: 2px;
+            left: 5px;
+            right: 5px;
 
-		} @else if $direction == "vertical" {
-			border-left: $w $style darken($b, 15%);
-			left: 2px;
-			bottom: 5px;
-			top: 5px;
-		}
-	}
-	&:not(.disabled):hover:before {
-		@include trans-prop-nice("border-color",50ms);
-		border-color: $colorKey;
-	}
+        } @else if $direction == "vertical" {
+            border-left: $w $style darken($b, 15%);
+            left: 2px;
+            bottom: 5px;
+            top: 5px;
+        }
+    }
+    &:not(.disabled):hover:before {
+        @include trans-prop-nice("border-color", 50ms);
+        border-color: $colorKey;
+    }
 }
 
 @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include containerSubtle($bg, $fg, true);
+    @include containerSubtle($bg, $fg, true);
 }
 
 @mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	// No longer should be used; use btnSubtle instead
-	//@include containerSubtle($bg, $fg, true);
-	//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
-/*	&:not(.disabled):hover {
-		@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
-	}*/
+    // No longer should be used; use btnSubtle instead
+    //@include containerSubtle($bg, $fg, true);
+    //@include background-image(linear-gradient(lighten($bg, 20%), $bg));
+    /*	&:not(.disabled):hover {
+            @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
+        }*/
 }
 
 @mixin boxIncised($sVal: 0.6) {
@@ -238,28 +242,61 @@
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
-	@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+    @include box-shadow(rgba(black, $sVal) 0 3px 10px);
 }
 
 @mixin outerGlow($color: #fff, $sVal: 0.3) {
-	@include box-shadow(rgba($color, $sVal) 0 0 30px);
+    @include box-shadow(rgba($color, $sVal) 0 0 30px);
 }
 
 @mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
-    @include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
 }
 
 @mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
-	@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
 }
 
 @mixin txtShdwSubtle($sVal: 0.1) {
-	@include text-shadow(rgba(black, $sVal) 0 1px 2px);
-}
-@mixin txtShdwLarge($sVal: 0.7) {
-	@include text-shadow(rgba(black, $sVal) 0 3px 7px);
+    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
 }
 
+@mixin txtShdwLarge($sVal: 0.7) {
+    @include text-shadow(rgba(black, $sVal) 0 3px 7px);
+}
+
+/*********************************************** FORM ELEMENTS */
+@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include appearance(none);
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
+    //	background: lighten($bg, 20%);
+    background: rgba(#fff, 0.1);
+    border: none;
+    //border-bottom: 1px solid rgba(#fff, 0.1);
+    color: lighten($fg, 20%);
+    outline: none;
+    &.error {
+        background: rgba(red, 0.5);
+    }
+}
+
+@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include input-base($bg, $fg);
+    padding: 0 $interiorMarginSm;
+}
+
+@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include input-base($bg, $fg);
+    padding: $interiorMargin;
+}
+
+@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include nice-input($bg, $fg);
+    background: lighten($bg, 3%);
+    border-bottom: 1px solid lighten($bg, 10%);
+}
 
 /*
 @mixin invokeMenu($baseColor: $colorBodyFg) {
@@ -276,24 +313,40 @@
     padding: 0;
     li {
         list-style-type: none;
-        margin:0;
+        margin: 0;
         padding: 0;
     }
 }
 
-@mixin vertical-align {
-	/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
-	position: relative;
-	top: 50%;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
+@mixin webkitProp($name, $val) {
+	#{$name}: #{$val};
+	-webkit-#{$name}: #{$val};
+}
+
+@mixin webkitVal($name, $val) {
+	#{$name}: #{$val};
+	#{$name}: -webkit-#{$val};
+}
+
+@mixin verticalCenter {
+    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
+    //position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+@mixin verticalCenterBlock($holderH, $itemH) {
+    top: floor(($holderH - $itemH) / 2);
+    bottom: auto;
+    height: $itemH;
 }
 
 @mixin ellipsize() {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 @mixin scrollH($showBar: auto) {
@@ -307,21 +360,26 @@
 }
 
 @mixin wait-spinner($b: 5px, $c: $colorAlt1) {
-	display: block;
-	position: absolute;
-	-webkit-animation: rotation .6s infinite linear;
-	-moz-animation: rotation .6s infinite linear;
-	-o-animation: rotation .6s infinite linear;
-	animation: rotation .6s infinite linear;
-	border-color: rgba($c, 0.25);
-	border-top-color: rgba($c, 1.0);
-	border-style: solid;
-	border-width: $b;
-	border-radius: 100%;
+    display: block;
+    position: absolute;
+    -webkit-animation: rotation .6s infinite linear;
+    -moz-animation: rotation .6s infinite linear;
+    -o-animation: rotation .6s infinite linear;
+    animation: rotation .6s infinite linear;
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: $b;
+    border-radius: 100%;
 }
 
 @mixin test($c: #ffcc00, $a: 0.2) {
-	background-color: rgba($c, $a);
+    background-color: rgba($c, $a);
+}
+
+@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    @inlude box-sizing(border-box);
+    border: 1px dotted rgba($c, $a);
 }
 
 @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
@@ -342,6 +400,6 @@
 }
 
 @mixin s-stale($a: 0.5) {
-	color: rgba($colorTelemFresh, $a) !important;
-	font-style: italic;
+    color: rgba($colorTelemFresh, $a) !important;
+    font-style: italic;
 }

platform/commonUI/general/res/sass/_views.scss

@@ -0,0 +1,21 @@
+/* Styles for sub-dividing views generically */
+
+.l-view-section {
+	@include absPosDefault(0);
+	font-size: 0.8rem;
+	h2 {
+		color: #fff;
+		margin-bottom: $interiorMargin;
+	}
+	&.fixed {
+		font-size: 0.8em;
+	}
+	&.scrolling {
+		overflow: auto;
+	}
+	.controls,
+	label,
+	.inline-block {
+		display: inline-block;
+	}
+}

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio;
 .btn,
 .l-btn {
 	@include user-select(none);
-	line-height: 1.5em; // Was 1.25em
+	//line-height: 1.5em; // Was 1.25em
+	line-height: 150%;
 	padding: 0 $pad;
 	text-decoration: none;
 	&.lg,

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -102,7 +102,7 @@
 
 .btn-bar {
 	//	position: relative;
-	.btn,
+/*	.btn,
 	.btn-set,
 	.t-btn {
 		display: inline-block;
@@ -113,7 +113,7 @@
 		&:first-child {
 			//			margin-left: 0;
 		}
-	}
+	}*/
 }
 
 .l-composite-control {
@@ -153,6 +153,7 @@
 	font-size: 0.7rem;
 }
 
+/*
 .btn-set {
 	// Buttons that have a very tight conceptual grouping - no internal space between them.
 	display: inline-block;
@@ -171,37 +172,33 @@
 		}
 	}
 }
+*/
 
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
 .top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
 	$h: $btnToolbarH;
 	display: inline-block;
 	font-size: $h * $btnFontSizeToH;
-	height: $h;
-	line-height: $h - 3;
-	.icon:not(.invoke-menu) {
-		//		position: relative;
-		//		top: -0.04em;
-		//font-size: 150%;
-		//vertical-align: middle;
-	}
+	line-height: 200%;
+	vertical-align: top;
 }
 
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
 	$d: $formRowCtrlsH;
-	//	@include vertical-align();
 	cursor: pointer;
 	display: inline-block;
 	line-height: $d;
 	margin-right: $interiorMargin * 4;
 	padding-left: $d + $interiorMargin;
 	position: relative;
-	vertical-align: top;
+	vertical-align: middle; // was top
 	em {
 		color: $colorBodyFg;
 		display: inline-block;
@@ -326,9 +323,9 @@ label.checkbox.custom {
 	$p: 10px;
 	$badgeM: $interiorMargin;
 	$badgeD: $h - ($badgeM * 2);
-	height: $h;
-	line-height: $h;
-	padding-right: 10px;
+	//height: $h;
+	//line-height: $h;
+	//padding-right: 10px;
 	&.browse-btn {
 		margin-right: $interiorMargin;
 		padding-left: $badgeD + $badgeM * 2;
@@ -351,7 +348,6 @@ label.checkbox.custom {
 .context-available {
 	$c: $colorKey;
 	color: $c;
-	//padding: 0 5px;
 	&:hover {
 		color: lighten($c, 10%);
 	}
@@ -359,24 +355,63 @@ label.checkbox.custom {
 
 .view-switcher {
 	@include trans-prop-nice-fade($controlFadeMs);
+	.type-icon {
+		//vertical-align: top;
+	}
 }
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
-	display: inline-block;
+	//@include test();
 	font-size: 1em;
-	.label {
-		.title-label {
-			color: lighten($colorBodyFg, 40%);
-		}
-		.type-icon {
-			font-size: 120%;
-			margin-right: $interiorMargin;
-			vertical-align: middle;
+
+	//> .title-label,
+	//> .type-icon,
+	//> .context-available {
+	//	//@include tmpBorder(#6666ff);
+	//	//vertical-align: middle;
+	//}
+
+	> .type-icon {
+		font-size: 120%;
+		float: left;
+		margin-right: $interiorMargin;
+	}
+
+	.l-elem-wrapper {
+		//@include test(#66f, 0.2);
+		@include webkitProp(justify-content, flex-start);
+		mct-representation {
+			// Holds the context-available item
+			// Must have min-width to make flex work properly
+			// in Safari
+			min-width: 0.7em;
 		}
+	}
+
+	.action {
+		margin-right: $interiorMargin;
+	}
+
+	.title-label {
+		//@include test(green, 0.9);
+		@include ellipsize();
+		color: lighten($colorBodyFg, 40%);
+		@include webkitProp(flex, '0 1 auto');
+		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+		//position: relative;
+	}
+
+	.context-available {
+		font-size: 0.7em;
+		@include webkitProp(flex, '0 0 1');
+		//margin-right: $interiorMargin;
+	}
+
+	@include desktop {
 		.context-available {
+			@include trans-prop-nice(opacity, 0.25s);
 			opacity: 0;
-			font-size: 0.8em;
 		}
 		&:hover {
 			.context-available {
@@ -386,16 +421,6 @@ label.checkbox.custom {
 	}
 }
 
-.top-bar,
-.object-browse-bar {
-	.object-header {
-		font-size: 1.1em;
-		span {
-			display: inline-block;
-		}
-	}
-}
-
 /******************************************************** SLIDERS */
 
 .slider {
@@ -449,24 +474,26 @@ label.checkbox.custom {
 
 /******************************************************** BROWSER ELEMENTS */
 
-::-webkit-scrollbar {
-	@include sliderTrack();
-	height: $scrollbarTrackSize;
-	width: $scrollbarTrackSize;
-}
-
-::-webkit-scrollbar-thumb {
-	$bg: lighten($colorBodyBg, 10%);
-	@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
-	@include border-radius(1px);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border-top: 1px solid lighten($bg, 20%);
-	&:hover {
-		@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+@include desktop {
+	::-webkit-scrollbar {
+		@include sliderTrack();
+		height: $scrollbarTrackSize;
+		width: $scrollbarTrackSize;
 	}
-}
 
-::-webkit-scrollbar-corner {
-	background: rgba(#000, 0.4);
+	::-webkit-scrollbar-thumb {
+		$bg: lighten($colorBodyBg, 10%);
+		@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
+		@include border-radius(1px);
+		@include box-sizing(border-box);
+		@include boxShdwSubtle();
+		border-top: 1px solid lighten($bg, 20%);
+		&:hover {
+			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+		}
+	}
+
+	::-webkit-scrollbar-corner {
+		background: rgba(#000, 0.4);
+	}
 }

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -21,15 +21,15 @@
  *****************************************************************************/
 /******************************************************** MENUS */
 .menu-element {
-    $bg: lighten($colorBodyBg, 5%);
+	$bg: lighten($colorBodyBg, 5%);
 	$bgHover: lighten($bg, 20%);
 	$iconColor: $colorKey;
 	cursor: pointer;
 	position: relative;
 	.menu {
 		@include border-radius($basicCr);
-        @include containerSubtle($bg);
-        @include txtShdwSubtle(0.2);
+		@include containerSubtle($bg);
+		@include txtShdwSubtle(0.2);
 		display: block; // set to block via jQuery
 		padding: $interiorMarginSm 0;
 		position: absolute;
@@ -37,11 +37,12 @@
 		ul {
 			@include menuUlReset();
 			li {
-                @include box-sizing(border-box);
+				@include box-sizing(border-box);
 				border-top: 1px solid lighten($bg, 20%);
 				color: lighten($bg, 60%);
 				line-height: $menuLineH;
 				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+				position: relative;
 				white-space: nowrap;
 				&:first-child {
 					border: none;
@@ -61,7 +62,7 @@
 				//	display: block;
 				//}
 				.type-icon {
-                    left: $interiorMargin * 2;
+					left: $interiorMargin * 2;
 				}
 			}
 		}
@@ -77,7 +78,9 @@
 		@include containerSubtle($bg);
 		ul li {
 			padding-left: 25px;
-			a { color: $fg; }
+			a {
+				color: $fg;
+			}
 			.icon {
 				color: $ic;
 			}
@@ -90,99 +93,131 @@
 		}
 	}
 
+	.checkbox-menu {
+		// Used in search dropdown in tree
+		@extend .context-menu;
+		ul li {
+			padding-left: 50px;
+			.checkbox {
+				$d: 0.7rem;
+				position: absolute;
+				left: $interiorMargin;
+				top: ($menuLineH - $d) / 1.5;
+				em {
+					height: $d;
+					width: $d;
+					&:before {
+						font-size: 7px !important;// $d/2;
+						height: $d;
+						width: $d;
+						line-height: $d;
+					}
+				}
+			}
+			.type-icon {
+				left: 25px;
+			}
+		}
+	}
 
-    .super-menu {
-        $w: 500px;
-        $h: $w - 20;
-        $plw: 50%; //$w * 0.5;
-        $prw: 50%; //$w - $plw;
-	    $fg: #fff; //lighten($colorBodyFg, 40%);
-	    $bgHover: $colorKey; //$bg;
-	    display: block;
-        width: $w;
-        height: $h;
-        .contents {
-	        @include absPosDefault($interiorMargin);
-        }
-        .pane {
-            @include box-sizing(border-box);
-            &.left {
-                //@include test();
-                border-right: 1px solid rgba(white, 0.2);
-                left: 0;
-                padding-right: $interiorMargin;
-                right: auto;
-                width: $plw;
-                overflow-x: hidden;
-                overflow-y: auto;
-                ul {
-                    li {
-                        @include border-radius($controlCr);
-	                    padding-left: 30px;
-                        border-top: none;
-                    }
-                }
-            }
-            &.right {
-	            //@include test(red);
-	            left: auto;
-                right: 0;
-                padding: $interiorMargin * 5;
-                width: $prw;
-	            .icon {
-		            color: $fg;
-	            }
-            }
-        }
-	    .menu-item-description {
-		    .desc-area {
-			    &.icon {
-				    $h: 150px;
-				    position: relative;
-				    font-size: 8em;
-				    left: 0;
-				    height: $h;
-				    line-height: $h;
-				    margin-bottom: $interiorMargin * 5;
-				    text-align: center;
-			    }
-			    &.title {
-				    color: $fg;
-				    font-size: 1.2em;
-				    margin-bottom: 0.5em;
-			    }
-			    &.description {
-				    //color: lighten($bg, 30%);
-				    color: $fg;
-				    font-size: 0.8em;
-				    line-height: 1.5em;
-			    }
-		    }
-	    }
-    }
-    .context-menu {
-        font-size: 0.80rem;
-    }
+	.super-menu {
+		$w: 500px;
+		$h: $w - 20;
+		$plw: 50%; //$w * 0.5;
+		$prw: 50%; //$w - $plw;
+		$fg: #fff; //lighten($colorBodyFg, 40%);
+		$bgHover: $colorKey; //$bg;
+		display: block;
+		width: $w;
+		height: $h;
+		.contents {
+			@include absPosDefault($interiorMargin);
+		}
+		.pane {
+			@include box-sizing(border-box);
+			&.left {
+				//@include test();
+				border-right: 1px solid rgba(white, 0.2);
+				left: 0;
+				padding-right: $interiorMargin;
+				right: auto;
+				width: $plw;
+				overflow-x: hidden;
+				overflow-y: auto;
+				ul {
+					li {
+						@include border-radius($controlCr);
+						padding-left: 30px;
+						border-top: none;
+					}
+				}
+			}
+			&.right {
+				//@include test(red);
+				left: auto;
+				right: 0;
+				padding: $interiorMargin * 5;
+				width: $prw;
+				.icon {
+					color: $fg;
+				}
+			}
+		}
+		.menu-item-description {
+			.desc-area {
+				&.icon {
+					$h: 150px;
+					position: relative;
+					font-size: 8em;
+					left: 0;
+					height: $h;
+					line-height: $h;
+					margin-bottom: $interiorMargin * 5;
+					text-align: center;
+				}
+				&.title {
+					color: $fg;
+					font-size: 1.2em;
+					margin-bottom: 0.5em;
+				}
+				&.description {
+					//color: lighten($bg, 30%);
+					color: $fg;
+					font-size: 0.8em;
+					line-height: 1.5em;
+				}
+			}
+		}
+	}
+	.context-menu {
+		font-size: 0.80rem;
+	}
 }
 
 .context-menu-holder {
-    pointer-events: none;
-    position: absolute;
-    height: 200px;
-    width: 170px;
-    z-index: 70;
-    .context-menu-wrapper {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        .context-menu {
-        }
-    }
-    &.go-left .context-menu { right: 0; }
-    &.go-up .context-menu { bottom: 0; }
+	pointer-events: none;
+	position: absolute;
+	height: 200px;
+	width: 170px;
+	z-index: 70;
+	.context-menu-wrapper {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		.context-menu {
+		}
+	}
+	&.go-left .context-menu {
+		right: 0;
+	}
+	&.go-up .context-menu {
+		bottom: 0;
+	}
 }
 
 .btn-bar.right .menu,
 .menus-to-left .menu {
-    left: auto; right: 0; width: auto;
+	left: auto;
+	right: 0;
+	width: auto;
 }

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -1,8 +1,6 @@
 .l-image-main-wrapper,
 .l-image-main,
 .l-image-main-controlbar,
-.l-image-main-controlbar .left,
-.l-image-main-controlbar .right,
 .l-image-thumbs-wrapper {
 	@include absPosDefault(0, false);
 }
@@ -61,12 +59,9 @@
 	.left {
 		//@include test(red);
 		text-align: left;
-		width: 75% !important;
 	}
 	.right {
 		//@include test(green);
-		min-width: 40px;
-		width: 25% !important;
 		z-index: 2;
 	}
 	.l-date,

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -20,47 +20,49 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
-	@include border-radius(3px);
-	background: rgba(white, 0.1);
+	@include border-radius($basicCr);
+	background: rgba(#fff, 0.1);
+	$c: lighten($colorBodyFg, 20%);
+	//border-bottom: 1px solid rgba(#fff, 0.3);
+	color: $c;
 	font-size: 0.8em;
-	margin-top: $interiorMargin;
-	padding: $interiorMargin;
-	&:first-child {
-		margin-top: 0;
-	}
+	padding: $formTBPad $formLRPad;
+	text-transform: uppercase;
 }
 
 .form {
 //	@include test(orange);
 	.form-section {
 		position: relative;
+		margin-bottom: $interiorMarginLg * 2;
 	}
 
 	.form-row {
+		$m: $interiorMargin;
 		@include box-sizing(border-box);
 		@include clearfix;
-		border-top: 1px solid $colorInteriorBorder;
-		margin-top: $interiorMargin;
-		padding: $interiorMargin;
+		border-top: 1px solid $colorFormLines;
+		margin-top: $m;
+		padding: $formTBPad 0;
 		position: relative;
 		&.first {
 			border-top: none;
 		}
 
-		.label,
-		.controls {
-//			@include test(orange);
+		>.label,
+		>.controls {
 			@include box-sizing(border-box);
 			@include clearfix;
-			box-sizing: border-box;
-			font-size: 0.75rem;
+			font-size: 0.8rem;
 			line-height: $formInputH;
             min-height: $formInputH;
 		}
 
 		>.label {
 			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+			//@include test(orange, 0.05);
 			float: left;
+			min-width: 120px;
             position: relative;
 			white-space: nowrap;
 			width: $formLabelW;
@@ -86,13 +88,6 @@
 				}
 			}
 
-			input[type="text"] {
-				height: $formInputH;
-				line-height: $formInputH;
-				margin-top: -4px;
-				vertical-align: baseline;
-			}
-
 			.l-med input[type="text"] {
 				width: 200px;
 			}

platform/commonUI/general/res/sass/forms/_mixins.scss

@@ -23,11 +23,11 @@
 	@include appearance(none);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.5) 0 1px 5px);
+	@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
 //	background: lighten($bg, 20%);
 	background: rgba(#fff, 0.1);
 	border: none;
-	border-bottom: 1px solid rgba(#fff, 0.1);
+	//border-bottom: 1px solid rgba(#fff, 0.1);
 	color: lighten($fg, 20%);
 	outline: none;
 	&.error {

platform/commonUI/general/res/sass/forms/_validation.scss

@@ -25,18 +25,18 @@
         padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
         &::after {
             //            @include test(yellow, 0.3);
-            display: block;
+/*            display: block;
             position: absolute;
             top: 0;
             right: $reqSymbolM;
             bottom: 0;
             left: auto;
             height: auto;
-            width: $reqSymbolW;
+            width: $reqSymbolW;*/
             font-family: symbolsfont;
             font-size: $reqSymbolFontSize;
-            text-align: right;
-            vertical-align: middle;
+            //text-align: right;
+            //vertical-align: middle;
         }
     }
     &.invalid,

platform/commonUI/general/res/sass/helpers/_bubbles.scss

@@ -48,19 +48,15 @@
 			width: 100%;
 			tr {
 				td {
-					//max-width: 150px;
 					padding: 2px 0;
 					vertical-align: top;
-					//white-space: nowrap;
-					//overflow: hidden;
-					//text-overflow: ellipsis;
 					&.label {
 						padding-right: $interiorMargin * 2;
 						white-space: nowrap;
 					}
 					&.value {
-						white-space: nowrap;
-						//width: 90%;
+						//word-wrap: break-word; // Doesn't work in <td>?
+						word-break: break-all;
 					}
 					&.align-wrap {
 						white-space: normal;
@@ -135,7 +131,9 @@
 		z-index: 2;
 	}
 	&.arw-up .arw.arw-down,
-	&.arw-down .arw.arw-up { display: none; }
+	&.arw-down .arw.arw-up {
+		display: none;
+	}
 }
 
 //************************************************* LOOK AND FEEL
@@ -148,6 +146,7 @@
         @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
     }
 }
+
 .s-infobubble {
 	$emFg: darken($colorInfoBubbleFg, 20%);
 	@include border-radius($basicCr);
@@ -159,18 +158,31 @@
 		color: $emFg;
 		font-weight: bold;
 	}
-	tr {
-		td {
-			border-top: 1px solid darken($colorInfoBubbleBg, 10%);
-			font-size: 0.9em;
-		}
-		&:first-child td {
-			border-top: none;
+	table {
+		tr {
+			td {
+				border: none;
+				border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
+				font-size: 0.9em;
+			}
+
+			&:first-child td {
+				border-top: none !important;
+			}
 		}
 	}
+	&:first-child td {
+		border-top: none;
+	}
+
+	.label {
+		color: lighten($emFg, 30%);
+	}
+
 	.value {
 		color: $emFg;
 	}
+
 }
 
 .s-thumbsbubble {

platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

@@ -50,6 +50,12 @@
 	margin-top: $d / -1;
 	margin-left: $d / -1;
 	z-index: 2;
+	&.inline {
+		display: inline-block !important;
+		margin-right: $interiorMargin;
+		position: relative !important;
+		vertical-align: middle;
+	}
 }
 
 .l-wait-spinner-holder {
@@ -80,4 +86,14 @@
 	margin: 0 !important;
 	padding: 0 !important;
 	top: 2px; left: 0;
+}
+
+.wait-spinner.sm {
+	$d: 13px;
+	@include wait-spinner(0.25em, $colorKey);
+	height: $d; width: $d;
+	margin-left: 0 !important;
+	margin-top: 0 !important;
+	padding: 0 !important;
+	top: 0; left: 0;
 }

platform/commonUI/general/res/sass/items/_item.scss

@@ -44,7 +44,7 @@
             position: relative;
             &:hover .item-main {
 	            .item-type {
-		            color: $colorKey !important;
+		            color: lighten($colorKey, 10%) !important;
                     .l-icon-link {
                         color: $colorIconLink;
                     }
@@ -55,13 +55,16 @@
 	            }
             }
 	        .contents {
-		        top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin;
+                //@include test(red);
+                $m: $interiorMarginLg;
+		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
             .bar {
-                &.top-bar.abs {
+                &.top-bar {
                     bottom: auto;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
+                    text-align: right;
 	                z-index: 5;
 	                .left, .right {
 		                width: auto;
@@ -73,10 +76,10 @@
 		                }
 	                }
                 }
-                &.bottom-bar.abs {
+                &.bottom-bar {
                     top: auto;
-                    height: $ueBrowseGridItemBottomBarH;
-	                padding: $interiorMargin;
+                    //height: $ueBrowseGridItemBottomBarH;
+                    line-height: 110%;
                 }
             }
             .item-main {
@@ -89,7 +92,7 @@
                     //@include trans-prop-nice("color", $transTime);
                     @include absPosDefault($iconMargin, false);
                     //@include test(red);
-                    color: $colorItemFg;
+                    //color: $colorItemFg;
                     text-align: center;
                     font-size: $iconD * 0.95; //6em;
                     line-height: $iconD;
@@ -99,11 +102,12 @@
                     //line-height: $lh;
                     .l-icon-link {
                         // When the link icon is in the item-type icon holder
-                        color: darken($colorIconLink, 25%);
-                        height: 36px;
-                        line-height: 36px;
+                        //color: darken($colorIconLink, 25%);
+                        color: $colorIconLink;
+                        height: auto;
+                        line-height: 100%;
                         position: absolute;
-                        font-size: 32px;
+                        font-size: 0.3em;
                         left: 0px;
                         bottom: 10px;
                         z-index: 2;
@@ -123,13 +127,11 @@
             }
             .title {
 	            @include txtShdwSubtle();
+                @include ellipsize();
                 color: lighten($colorBodyFg, 20%);
-	            overflow: hidden;
-	            white-space: nowrap;
-	            text-overflow: ellipsis;
-//                font-weight: bold;
             }
             .details {
+                @include ellipsize();
                 font-size: 0.8em;
             }
 	        &.selected {

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -24,13 +24,14 @@
 	height: 100%;
 }
 
-.tabular {
+.tabular,
+table {
 	@include box-sizing(border-box);
 	border-spacing: 0;
 	border-collapse: collapse;
 	color: #fff;
 	display: table;
-	font-size: 0.75em;
+	font-size: 0.75rem;
 	position: relative;
 	//height: 100%; MOVED
 	width: 100%;
@@ -41,19 +42,7 @@
 		//table-layout: fixed; MOVED
 	}
 	thead, .thead {
-		//width: calc(100% - 10px); MOVED
-		tr, .tr {
-			height: $tabularHeaderH;
-		}
-		&:before {
-			content: "";
-			display: block;
-			z-index: 0;
-			position: absolute;
-			width: 100%;
-			height: $tabularHeaderH;
-			background: rgba(#fff, 0.15);
-		}
+		border-bottom: 1px solid $tabularColorHeaderBorder;
 	}
 	tbody, .tbody {
 		//@include absPosDefault(0); MOVED
@@ -72,38 +61,49 @@
 		&:first-child .td {
 			border-top: none;
 		}
+		&.group-header {
+			td, .td {
+				$d: 5%;
+				background-color: darken($tabularColorHeaderBg, $d);
+				color: darken($tabularColorHeaderFg, $d);
+			}
+		}
 		th, .th, td, .td {
 			display: table-cell;
 		}
 		th, .th {
-			border: none;
-			border-left: 1px solid $tabularColorBorder;
+			background-color: $tabularColorHeaderBg;
+			border-left: 1px solid $tabularColorHeaderBorder;
 			color: $tabularColorHeaderFg;
-			padding: 0 $tabularTdPadLR;
+			padding: $tabularTdPadLR $tabularTdPadLR;
 			white-space: nowrap;
 			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
 			&:first-child {
 				border-left: none;
 			}
 			&.sort {
-				.icon-sorting:before {
-					display: inline-block;
+				&.sort:after {
+					color: $colorIconLink;
 					font-family: symbolsfont;
-					margin-left: 5px;
+					font-size: 8px;
+					content: "\ed";
+					display: inline-block;
+					margin-left: $interiorMarginSm;
 				}
-				&.asc .icon-sorting:before {
-					content: '0';
-				}
-				&.desc .icon-sorting:before {
-					content: '1';
+				&.sort.desc:after {
+					content: "\ec";
 				}
 			}
+			&.sortable {
+				cursor: pointer;
+			}
 		}
 		td, .td {
-			border-top: 1px solid $tabularColorBorder;
-			min-width: 110px;
+			border-bottom: 1px solid $tabularColorBorder;
+			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;
+			word-wrap: break-word;
 			vertical-align: top;
 			&.numeric {
 				text-align: right;
@@ -119,9 +119,20 @@
 		}
 	}
 	&.filterable {
+		thead, .thead {
+			tr.s-filters, .tr.s-filters {
+				th, .th {
+					//border-left: none;
+				}
+			}
+		}
 		tbody, .tbody {
 			top: $tabularHeaderH * 2;
 		}
+		input[type="text"] {
+			@include box-sizing(border-box);
+			width: 100%; //50px;
+		}
 	}
 
 	&.fixed-header {
@@ -133,6 +144,15 @@
 		}
 		thead, .thead {
 			width: calc(100% - 10px);
+			&:before {
+				content: "";
+				display: block;
+				z-index: 0;
+				position: absolute;
+				width: 100%;
+				height: $tabularHeaderH;
+				background: rgba(#fff, 0.15);
+			}
 		}
 		tbody, .tbody {
 			@include absPosDefault(0);

platform/commonUI/general/res/sass/mobile/_constants.scss

@@ -20,18 +20,20 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-$mobile-listIcon: 30px;
-$mobile-listRight: 10px;
+/************************** STYLE */
+$colorMobilePaneLeft: #222;
 
-$phone-itemHeight: $ueBrowseGridItemLg/4;
-$tablet-itemHeight: $ueBrowseGridItemLg/3;
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+$mobileListIconSize: 30px;
+$mobileTitleDescH: 35px;
+$mobileOverlayMargin: 10px;
+$phoneItemH: floor($ueBrowseGridItemLg/4);
+$tabletItemH: floor($ueBrowseGridItemLg/3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
-$mobile-treeHeight: 38px;
-$mobile-startingTreeLeft: 3px;
-$mobile-runningTreeLeft: 7px;
-$mobile-treeRight: 13px;
+$mobileTreeItemH: 35px;
+$mobileTreeItemIndent: 20px;
+$mobileTreeRightArrowW: 30px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
@@ -80,8 +82,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 19px;
-$phoneRepSizeLandscape: 66%;
-$tabletRepSizePortrait: 500px;
-$tabletRepSizeLandscape: 78%;
-$desktopMenuSize: 25%;
+$proporMenuOnly: 90%;
+$proporMenuWithView: 40%;

platform/commonUI/general/res/sass/mobile/_item.scss

@@ -27,103 +27,92 @@
 .items-holder {
     .item {
         &.grid-item {
-            $dWid: $ueBrowseGridItemLg;
-            $dHei: $ueBrowseGridItemLg;
+            $titleH: 30px;
             @include phoneandtablet {
-                $dWid: 100%;
-                .mobile-grid-nav {
-                    top: 0px;
-                    bottom: 0px;
-                    right: 55px;
-                }
-                .mobile-info {
-                    text-align: center;
-                    width: 50px;
-                    right: 0px;
-                    left: auto;
-                    font-size: 1.3em;
+                width: 100%;
+                >.contents {
+                    top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
                 }
                 .bar {
-                    &.bottom-bar.abs {
-                        top: 0px;
-                        height: auto;
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        //@include test(blue);
+                        bottom: 0 !important; left: auto !important; right: 20px !important;
+                        width: 40px !important; height: auto !important;
+                        text-align: right;
+                    }
+                    &.bottom-bar {
+                        // Becomes the left side of the item
+                        left: $mobileListIconSize + $interiorMarginLg;
+                        right: 60px;
                     }
                     
                 }
                 .item-main {
                     .item-type {
-                        font-size: $mobile-listIcon;
-                        top: 0px;
-                        left: 0px;
+                        //@include test(blue);
+                        font-size: $mobileListIconSize;
+                        right: auto;
+                        bottom: auto;
+                        left: 0;
+                        line-height: 100%;
                         text-align: left;
-                        height: auto
+                        width: $mobileListIconSize;
+                        .l-icon-link {
+                            bottom: 0;
+                        }
                     }
                     .item-open {
-                       display: none;
+                        display: block;
+                        opacity: 1;
+                        font-size: 1em;
+                        width: auto;
                     }
                 }
-                .title, .details {
-                    margin-left: $mobile-listIcon;
-                }
             }
 
             @include phone {
-                $dHei: $phone-itemHeight;
-                width: $dWid;
+                $dHei: $phoneItemH;
                 height: $dHei;
-                .mobile-right {
-                    top: 100%;
-                }
-                .mobile-info {
-                    line-height: $phone-itemHeight * .5;
+                .bar {
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        line-height: $dHei !important;
+                    }
+                    &.bottom-bar {
+                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
+                    }
                 }
                 .item-main {
                     .item-type {
-                        line-height: $phone-itemHeight * .8;
+                        @include verticalCenterBlock($dHei, $mobileListIconSize);
+                    }
+                    .item-open {
+                        line-height: $dHei;
                     }
                 }
-                .title {
-                    margin-right: $mobile-listRight;
-                    line-height: $phone-itemHeight * .5;
-                }
-                .details {
-                    margin-right: $mobile-listRight;
-                    line-height: 0px;
-                }                
             }
             
             @include tablet {
-                $dHei: $tablet-itemHeight;
-                width: $dWid;
+                $dHei: $tabletItemH;
                 height: $dHei;
-                .mobile-right {
-                    top: 100%;
-                }
-                
-                .mobile-info {
-                    line-height: $tablet-itemHeight * .57;
+                .bar {
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        line-height: $dHei !important;
+                    }
+                    &.bottom-bar {
+                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
+                    }
                 }
                 .item-main {
                     .item-type {
-                        font-size: $mobile-listIcon;
-                        line-height: $tablet-itemHeight * .75;
+                        @include verticalCenterBlock($dHei, $mobileListIconSize);
+                    }
+                    .item-open {
+                        line-height: $dHei;
                     }
                 }
-                .title {
-                    margin-right: $mobile-listRight;
-                    line-height: $tablet-itemHeight * .57;
-                }
-                .details {
-                    margin-right: $mobile-listRight;
-                    line-height: 0px;
-                }
-            }
-            
-            @include desktop {
-                $dWid: $ueBrowseGridItemLg;
-                $dHei: $ueBrowseGridItemLg;
-                width: $dWid;
-                height: $dHei; 
             }
         }
     }

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -20,199 +20,155 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Wrapper of the entire 2 panes, only enacted on
-// phone and tablet. Also for the panes
-
-.browse-wrapper,
-.mobile-pane {
-    @include phoneandtablet {
-        position: absolute;
-        left: 0; top: 0;
-        right: 0;
-        white-space: nowrap;
+@include phoneandtablet {
+    // Wrapper of the entire 2 panes, only enacted on
+    // phone and tablet. Also for the panes
+    .browse-wrapper,
+    .pane {
+        top: 0 !important; right: 0; bottom: 0; left: 0;
     }
-}
 
-// Default views of the panels
-// if in desktop browser
-.desktop-browse {
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: $desktopMenuSize;   
-    }   
-}
+    .pane.left.treeview {
+        background-color: $colorMobilePaneLeft;
+    }
 
-// When the tree is hidden, these are the
-// classes used for the left menu and the
-// right representation.
-.browse-hidetree {
-    // NOTE: DISABLED SELECTION
-    // Selection disabled in both panes
-    // causing cut/copy/paste menu to
-    // not appear. Should me moved in
-    // future to properly work
-    @include phoneandtablet {
+    .pane.right-repr {
+        //@include test();
+        @include slMenuTransitions;
+        margin-left: 0 !important;
+        #content-area {
+            @include slMenuTransitions;
+            opacity: 1;
+        }
+    }
+
+    .user-environ .browse-area,
+    .user-environ .edit-area,
+    .user-environ .editor {
+        top: 0; left: 0; right: 0; bottom: $ueFooterH;
+    }
+
+    .holder.l-mobile {
+        top: $bodyMargin !important;
+        right: $bodyMargin !important;
+        bottom: $bodyMargin !important;
+        left: $bodyMargin !important;
+    }
+
+    // When the tree is hidden, these are the
+    // classes used for the left menu and the
+    // right representation.
+    .browse-hidetree {
         @include user-select(none);
-    }
-    // Sets the left tree menu when the tree
-    // is hidden. 
-    .mobile-pane.left-menu {
-        @include phoneandtablet {
-            @include trans-prop-nice(opacity, .4s);
+        // Sets the left tree menu when the tree
+        // is hidden.
+        .pane.left.treeview {
             opacity: 0;
             right: 100% !important;
             width: auto !important;
             overflow-y: hidden;
-            overflow-x: hidden;       
+            overflow-x: hidden;
+        }
+        // Sets the right represenation when
+        // the tree is hidden.
+        .pane.right-repr {
+            left: 0 !important;
         }
     }
-
-    // Sets the right represenation when
-    // the tree is hidden. 
-    .mobile-pane.right-repr {       
-        @include phoneandtablet {         
-            @include slMenuTransitions;
-            left: auto !important;
-            width: 100% !important;
-        }
-    }    
-}
-
-.mobile-tree-holder {
-    top: 30px;
-}
-
-// When the tree is shown, these are
-// the classes used for the left menu
-// and the right menu (for each device &
-// orientation combination, separate 
-// parameters are used)
-.browse-showtree {
-    // NOTE: DISABLED SELECTION
-    // Selection disabled in both panes
-    // causing cut/copy/paste menu to
-    // not appear. Should me moved in
-    // future to properly work
-    @include phoneandtablet {
+    
+    .browse-showtree {
+        // NOTE: DISABLED SELECTION
+        // Selection disabled in both panes
+        // causing cut/copy/paste menu to
+        // not appear. Should me moved in
+        // future to properly work
         @include user-select(none);
-    }
-    // Sets the left tree menu when the tree
-    // is shown.     
-    .mobile-pane.left-menu {
-        @include phoneandtablet {
+
+        // Sets the left tree menu when the tree is shown.
+        .pane.left.treeview {
             @include trans-prop-nice(opacity, .4s);
+            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
             display: block !important;
-            width: auto !important;
+            //width: auto !important; // CH CO
+            right: auto !important;
+            width: $proporMenuWithView !important;
         }
-        // On both phones and tablets, the amount of
-        // space allowed for the right pane is specified
-        @include phonePortrait {
-            right: $phoneRepSizePortrait !important;
-        }
-        @include phoneLandscape {
-            right: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            right: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            right: $tabletRepSizeLandscape !important;
-        }
-    }
-    // Sets the right represenation when
-    // the tree is shown.     
-    .mobile-pane.right-repr {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            left: auto !important;
-        }
-        // On both phones and tablets, the width of
-        // the right pane is specified
-        @include phonePortrait {
-            width: $phoneRepSizePortrait !important;
-        }
-        @include phoneLandscape {
-            width: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            width: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            width: $tabletRepSizeLandscape !important;
-        }
-    }
-}
+        // Sets the right representation when the tree is shown.
+        .pane.right-repr {
+            left: $proporMenuWithView !important;
+            //width: auto !important;
 
-// Button position is set as absolute with transitions
-.button-pos {
-    @include phoneandtablet {
+            //left: 0 !important;
+            //transform: translateX($proporMenuWithView);
+        }
+    }
+
+    .mobile-menu-icon {
+        font-size: 110%;
         position: absolute;
+        top: $bodyMargin + 2;
+        left: $bodyMargin;
+    }
+
+    .object-browse-bar {
+        //@include test();
+        left: 30px !important;
+        .context-available {
+            opacity: 1 !important;
+        }
+        .view-switcher {
+            margin-right: 0 !important;
+            .name {
+                // Hide the name in mobile
+                display: none;
+            }
+        }
+    }
+
+    .tree-holder {
+        overflow-x: hidden !important;
+    }
+
+    .mobile-disable-select {
+        @include user-select(none);
+    }
+
+    // Hides objects on phone and tablet
+    .mobile-hide,
+    .mobile-hide-important {
+        display: none !important;
+    }
+
+    .mobile-back-hide {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+    .mobile-back-unhide {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
     }
 }
 
-// Object header must be moved
-// over to make space for the 
-// hamburger icon
-.object-header {
-    @include phoneandtablet {
-        position: relative;
-        left: 44px;        
-        .label {
-            .context-available {
-                opacity: 1 !important;
+@include phonePortrait {
+    .browse-showtree {
+        .pane.left.treeview {
+            width: $proporMenuOnly !important;
+        }
+        .pane.right-repr {
+            left: 0 !important;
+	        @include webkitProp(transform, translateX($proporMenuOnly));
+            #content-area {
+                opacity: 0;
             }
         }
     }
 }
 
-.desktop-hide {
-    @include desktop {
+@include desktop {
+    .desktop-hide {
         display: none;
     }
-}
-
-// Hides objects on phone and tablet
-.mobile-hide {
-    @include phoneandtablet {
-        display: none;
-    }
-}
-
-.mobile-important-hide {
-    @include phoneandtablet {
-        display: none !important;
-    }
-}
-
-.mobile-back-hide {
-        pointer-events: none;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 0;
-}
-
-// Hides objects on phone and tablet
-.mobile-back-unhide {
-        pointer-events: all;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 1;
-}
-
-// Hides objects only on the phone
-.phone-hide {
-    @include phone {
-        display: none;
-    }
-}
-
-.tree-holder {
-    @include phoneandtablet {
-        overflow-x: hidden !important;
-    }
-}
-.mobile-disable-select {
-    @include phoneandtablet {
-        @include user-select(none);
-    }
-}
+}

platform/commonUI/general/res/sass/mobile/_tree.scss

@@ -20,48 +20,38 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
-ul.tree {
-    // Only applies to phones and tablets
-    @include phoneandtablet {
-        @include menuUlReset();
-        li {
-            span.tree-item {
-                // Adds some space to the top of each tree item
-                height: $mobile-treeHeight;
-                line-height: $mobile-treeHeight;
-                padding-top: $interiorMarginSm;
-                padding-bottom: $interiorMarginSm;
-                margin-bottom: 0px;
-                .view-control {
-                    position: absolute;
-                    right: $mobile-treeRight;
-                    font-size: 1.8em;
-                    right: 0px;
-                    width: 35px;
-                    text-align: center;
-                }                   
-
-                .label {
-                    // Designates the starting left margin
-                    // (indentation) of 'My Items'
-                    // Also adds right space for selection button
-                    left: $mobile-startingTreeLeft;
-                    right: 45px;
-                    font-size: 1.2em;
-                    // Allows tree item name to stop prior
-                    // to the arrow
-                    .title-label {
-                        right: $mobile-treeRight * 1.3;
-                    }
-                }             
-            }
-        }
-
+@include phoneandtablet {
+    ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: $mobile-runningTreeLeft;
+            margin-left: $mobileTreeItemIndent;
         }
     }
+	.tree-item,
+	.search-result-item {
+		height: $mobileTreeItemH;
+		line-height: $mobileTreeItemH;
+		margin-bottom: 0px;
+		.view-control {
+			//@include test(red);
+			position: absolute;
+			font-size: 1.1em;
+			right: 0px;
+			width: $mobileTreeRightArrowW;
+			text-align: center;
+		}
+
+		.label {
+			left: 0;
+			right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
+			line-height: $mobileTreeItemH;
+			//font-size: 1.1em; // CH CO
+			.type-icon {
+				@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
+			}
+			.title-label {
+			}
+		}
+	}
 }

platform/commonUI/general/res/sass/mobile/controls/_menus.scss

@@ -20,15 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Mobile hamburger icon is
-// sized according to the device
-.mobile-menu-icon {
-    display: inline-block;
-    @include phoneandtablet {
-        font-size: 21px;
-        padding-top: $imageThumbPad;
+// Override the Create menu for mobile
+@include phoneandtablet {
+    .menu-element {
+        .super-menu {
+            $d: 250px;
+            width: $d;
+            height: $d;
+
+            .pane {
+                &.left {
+                    border-right: none;
+                    padding-right: 0;
+                    width: 100%;
+                }
+                &.right {
+                    display: none;
+                }
+            }
+        }
     }
-    @include desktop {
-        display: none;
-    }       
 }

platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss

@@ -1,11 +1,51 @@
-.overlay {
-    @include phoneandtablet {
+@include phoneandtablet {
+    .overlay {
         $m: 0;
-        // Removes curved edges on the dialog box
-        // and makes it take up fullscreen
-        >.holder {
-          @include border-radius($m);
-          top: $m; right: $m; bottom: $m; left: $m;
+        .clk-icon.close {
+            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
+        }
+
+        > .holder {
+            @include border-radius($m);
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
+            > .contents {
+                top: $mobileOverlayMargin;
+                right: $mobileOverlayMargin;
+                bottom: $mobileOverlayMargin;
+                left: $mobileOverlayMargin;
+
+                .top-bar {
+                    > .title {
+                        margin-right: 1.2em;
+                    }
+                }
+
+                .form.editor {
+                    border: none;
+
+                    .contents {
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        left: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include phone {
+    .overlay > .holder > .contents .form.editor .contents .form-row {
+        > .label,
+        > .controls {
+            //@include test(blue);
+            display: block;
+            float: none;
+            width: 100%;
         }
     }
 }