Merge pull request #1674 from nasa/hyperlink-styling

Hyperlink styling

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

@@ -72,6 +72,15 @@
     }
 }
 
+.s-hyperlink {
+    // Hyperlink objects
+    &:not(.s-button) {
+        color: $colorKey;
+        font-size: 0.8rem;
+        &:hover { color: $colorKeyHov; }
+    }
+}
+
 .s-icon-button {
     // Clickable icon elements that have hover
     @extend .ui-symbol;

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/bundle.js

@@ -37,7 +37,7 @@ define([
             {
                 "key": "hyperlink",
                 "name": "Hyperlink",
-                "cssClass": "icon-page",
+                "cssClass": "icon-chain-links",
                 "description": "A hyperlink to redirect to a different link",
                 "features": ["creation"],
                 "properties": [

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>
+   ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
-        <a href="{{domainObject.getModel().url}}"
+   ng-class="{
-           ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
+       's-button': hyperlink.isButton()
-           ng-class="{
+   }">
-               's-button': hyperlink.isButton()
+    <div class="label">{{domainObject.getModel().displayText}}</div>
-           }">
+</a>
-           {{domainObject.getModel().displayText}}
-        </a>
-    </div>
-</div>

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>
+            </mct-representation>
-            </div>
         </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">
+    <div class="abs object-holder">
-          <mct-representation key="representation.selected.key"
+        <mct-representation key="representation.selected.key"
-                              mct-object="representation.selected.key && domainObject">
+                            mct-object="representation.selected.key && domainObject">
-          </mct-representation>
+        </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>
 </div>