ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-21 01:42:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1674 from nasa/hyperlink-styling

Browse Source 
Hyperlink styling
This commit is contained in:
Pete Richards 2017-08-14 13:04:26 -07:00 committed by GitHub
commit 82a661b884
5 changed files with 63 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
platform/commonUI/general/res/sass/controls/_controls.scss
View File

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

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

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

2
platform/features/hyperlink/bundle.js
View File

@ -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": [

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