Layout selection and show/hide frame

Added ability to show/hide object frames via a toggle button in the
edit toolbar. All objects have frames by default except for ‘hyperlinks’.
Also, implemented object selection in the layout and added tests for new features.

Fixes #1658.

platform/features/layout/res/templates/fixed.html

@@ -25,15 +25,20 @@
     <!-- Background grid -->
     <div class="l-grid-holder" ng-click="controller.clearSelection()">
         <div class="l-grid l-grid-x"
+             ng-if="!controller.getGridSize()[0] < 3"
              ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
         <div class="l-grid l-grid-y"
+             ng-if="!controller.getGridSize()[1] < 3"
              ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
     </div>
 
     <!-- Fixed position elements -->
     <div ng-repeat="element in controller.getElements()"
-         class="l-fixed-position-item"
-         ng-class="{ 's-not-selected': controller.selected() && !controller.selected(element) }"
+         class="l-fixed-position-item s-selectable s-moveable s-hover-border"
+         ng-class="{
+            's-not-selected': controller.selected() && !controller.selected(element),
+            's-selected': controller.selected(element)
+         }"
          ng-style="element.style"
          ng-click="controller.select(element)">
         <mct-include key="element.template"
@@ -43,15 +48,15 @@
     </div>
 
     <!-- Selection highlight, handles -->
-    <span ng-if="controller.selected()">
-        <div class="l-fixed-position-item s-selectable s-selected s-moveable"
+    <span class="s-selected s-moveable" ng-if="controller.selected()">
+        <div class="l-fixed-position-item t-edit-handle-holder"
              mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
              mct-drag="controller.moveHandle().continueDrag(delta)"
              mct-drag-up="controller.moveHandle().endDrag()"
              ng-style="controller.selected().style">
         </div>
         <div ng-repeat="handle in controller.handles()"
-             class="l-fixed-position-item-handle"
+             class="l-fixed-position-item-handle edit-corner"
              ng-style="handle.style()"
              mct-drag-down="handle.startDrag()"
              mct-drag="handle.continueDrag(delta)"

platform/features/layout/res/templates/frame.html

@@ -29,15 +29,21 @@
             </mct-representation>
         </div>
         <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <mct-representation key="'switcher'"
-                                ng-model="representation"
-                                mct-object="domainObject">
+            <mct-representation
+                    key="'switcher'"
+                    ng-model="representation"
+                    mct-object="domainObject">
             </mct-representation>
+            <a class="s-button icon-expand t-btn-view-large"
+               title="View large"
+               mct-trigger-modal>
+            </a>
         </div>
     </div>
     <div class="abs object-holder">
-        <mct-representation key="representation.selected.key"
-                            mct-object="representation.selected.key && domainObject">
+        <mct-representation
+                key="representation.selected.key"
+                mct-object="representation.selected.key && domainObject">
         </mct-representation>
     </div>
 </div>

platform/features/layout/res/templates/layout.html

@@ -19,19 +19,33 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-layout"
-     ng-controller="LayoutController as controller">
 
-    <div class='frame child-frame panel abs'
+<div class="abs l-layout"
+     ng-controller="LayoutController as controller"
+     ng-click="controller.clearSelection()">
+
+    <!-- Background grid -->
+    <div class="l-grid-holder" ng-click="controller.clearSelection()">
+        <div class="l-grid l-grid-x"
+             ng-if="!controller.getGridSize()[0] < 3"
+             ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
+        <div class="l-grid l-grid-y"
+             ng-if="!controller.getGridSize()[1] < 3"
+             ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
+    </div>
+
+    <div class='abs frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border'
+         ng-class="{ 'no-frame': !controller.hasFrame(childObject), 's-selected':controller.selected(childObject) }"
          ng-repeat="childObject in composition"
+         ng-click="controller.select($event, childObject.getId())"
          ng-style="controller.getFrameStyle(childObject.getId())">
 
         <mct-representation key="'frame'"
-                            class="frame child-frame holder contents abs"
+                            class="t-rep-frame holder contents abs"
                             mct-object="childObject">
         </mct-representation>
         <!-- Drag handles -->
-        <span ng-show="domainObject.hasCapability('editor')">
+        <span class="abs t-edit-handle-holder s-hover-border" ng-if="controller.selected(childObject)">
             <span class="edit-handle edit-move"
                   mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
                   mct-drag="controller.continueDrag(delta)"