ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-13 12:48:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Front-end] Integrate Hyperlink

Browse Source 
Fixes #1685
Fixed problematic markup in hyperlink.html;
Styling for Hyperlink in Layout context;
Tweaks to no-frame style;
This commit is contained in:
Charles Hacskaylo
2017-08-14 11:57:49 -07:00
parent 36a0976e98
commit 4dff369807
3 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,6 +74,7 @@
} }
} }
&.no-frame { &.no-frame {
background: transparent !important;
border: none !important; border: none !important;
&.t-frame-outer > .t-rep-frame { &.t-frame-outer > .t-rep-frame {
&.contents { &.contents {
@ -93,6 +94,24 @@
} }
} }
} }
/********************************************************** 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 { body.desktop .frame {

18
platform/features/hyperlink/res/templates/hyperlink.html
View File

@ -19,14 +19,10 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. 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>

21
platform/features/layout/res/templates/frame.html
View File

@ -19,16 +19,14 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="frame frame-template t-frame-inner 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="abs object-browse-bar l-flex-row">
<div class="left flex-elem l-flex-row grows"> <div class="left flex-elem l-flex-row grows">
<div ng-if=!domainObject.getModel().removeTitle> <mct-representation
<mct-representation
key="'object-header'" key="'object-header'"
mct-object="domainObject" mct-object="domainObject"
class="l-flex-row flex-elem object-header grows"> class="l-flex-row flex-elem object-header grows">
</mct-representation> </mct-representation>
</div>
</div> </div>
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed"> <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
<mct-representation key="'switcher'" <mct-representation key="'switcher'"
@ -37,14 +35,9 @@
</mct-representation> </mct-representation>
</div> </div>
</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>
</div> </div>