[Front-end] Integrate Hyperlink related changes from #1685 work

Fixes #1685
(cherry picked from commit 4dff369)

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -73,6 +73,45 @@
             display: none;
         }
     }
+    &.no-frame {
+        background: transparent !important;
+        border: none !important;
+        &.t-frame-outer > .t-rep-frame {
+            &.contents {
+                $m: 2px;
+                top: $m;
+                right: $m;
+                bottom: $m;
+                left: $m;
+            }
+            > .t-frame-inner {
+                > .object-browse-bar {
+                    display: none;
+                }
+                > .object-holder.abs {
+                    top: 0 !important;
+                }
+            }
+        }
+    }
+
+    /********************************************************** OBJECT TYPES */
+    .t-object-type-hyperlink {
+        .s-hyperlink.s-button {
+            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
+            @extend .abs;
+            .label {
+                @include ellipsize();
+                @include transform(translateY(-50%));
+                padding: 0 $interiorMargin;
+                position: absolute;
+                min-width: 0;
+                left: 0; right: 0;
+                text-align: center;
+                top: 50%;
+            }
+        }
+    }
 }
 
 body.desktop .frame {

platform/features/hyperlink/res/templates/hyperlink.html

@@ -19,14 +19,10 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="s-hyperlink" ng-controller="HyperlinkController as hyperlink">
+<a class="s-hyperlink" ng-controller="HyperlinkController as hyperlink" href="{{domainObject.getModel().url}}"
-    <div>
-        <a href="{{domainObject.getModel().url}}"
    ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
    ng-class="{
        's-button': hyperlink.isButton()
    }">
-           {{domainObject.getModel().displayText}}
+    <div class="label">{{domainObject.getModel().displayText}}</div>
 </a>
-    </div>
-</div>

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

@@ -19,17 +19,15 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="frame frame-template abs">
+<div class="frame frame-template t-frame-inner abs t-object-type-{{ representation.selected.key }}">
     <div class="abs object-browse-bar l-flex-row">
         <div class="left flex-elem l-flex-row grows">
-            <div ng-if=!domainObject.getModel().removeTitle>
             <mct-representation
                     key="'object-header'"
                     mct-object="domainObject"
                     class="l-flex-row flex-elem object-header grows">
             </mct-representation>
         </div>
-        </div>
         <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
             <mct-representation key="'switcher'"
                                 ng-model="representation"
@@ -37,12 +35,7 @@
             </mct-representation>
         </div>
     </div>
-    <div ng-if=domainObject.getModel().removeTitle class="l-flex-row flex-elem object-header grows">
+    <div class="abs object-holder">
-          <mct-representation key="representation.selected.key"
-                              mct-object="representation.selected.key && domainObject">
-          </mct-representation>
-    </div>
-    <div ng-if=!domainObject.getModel().removeTitle class="abs object-holder">
         <mct-representation key="representation.selected.key"
                             mct-object="representation.selected.key && domainObject">
         </mct-representation>