From 7c9a6bd81717d0833858c6d62fc93740f65a431b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 14 Aug 2017 11:57:49 -0700
Subject: [PATCH] [Front-end] Integrate Hyperlink related changes from #1685
 work

Fixes #1685
(cherry picked from commit 4dff369)
---
 .../general/res/sass/user-environ/_frame.scss | 39 +++++++++++++++++++
 .../hyperlink/res/templates/hyperlink.html    | 18 ++++-----
 .../features/layout/res/templates/frame.html  | 21 ++++------
 3 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index 1dcc8e35b6..bbbbba8bb2 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/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 {
diff --git a/platform/features/hyperlink/res/templates/hyperlink.html b/platform/features/hyperlink/res/templates/hyperlink.html
index 8e04dbca7b..9874f20e81 100644
--- a/platform/features/hyperlink/res/templates/hyperlink.html
+++ b/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">
-    <div>
-        <a href="{{domainObject.getModel().url}}"
-           ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
-           ng-class="{
-               's-button': hyperlink.isButton()
-           }">
-           {{domainObject.getModel().displayText}}
-        </a>
-    </div>
-</div>
+<a class="s-hyperlink" ng-controller="HyperlinkController as hyperlink" href="{{domainObject.getModel().url}}"
+   ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
+   ng-class="{
+       's-button': hyperlink.isButton()
+   }">
+    <div class="label">{{domainObject.getModel().displayText}}</div>
+</a>
diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html
index 3b9adf250a..b3c9f0ade4 100644
--- a/platform/features/layout/res/templates/frame.html
+++ b/platform/features/layout/res/templates/frame.html
@@ -19,16 +19,14 @@
  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
+            <mct-representation
                     key="'object-header'"
                     mct-object="domainObject"
                     class="l-flex-row flex-elem object-header grows">
-                </mct-representation>
-            </div>
+            </mct-representation>
         </div>
         <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
             <mct-representation key="'switcher'"
@@ -37,14 +35,9 @@
             </mct-representation>
         </div>
     </div>
-    <div ng-if=domainObject.getModel().removeTitle class="l-flex-row flex-elem object-header grows">
-          <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>
+    <div class="abs object-holder">
+        <mct-representation key="representation.selected.key"
+                            mct-object="representation.selected.key && domainObject">
+        </mct-representation>
     </div>
 </div>