ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 13:17:53 +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
Show Stats 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 {
background: transparent !important;
border: none !important;
&.t-frame-outer > .t-rep-frame {
&.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 {

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

@ -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>

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

@ -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 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="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>