IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): help popover

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-22 11:41:50 +01:00
parent b98c826e95
commit f375c3000d
10 changed files with 333 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/components/popover/popover.ts
View File

@ -16,6 +16,7 @@ export function popoverDirective() {
return;
}
var offset = attrs.offset || '0 -10px';
transclude(function(clone, newScope) {
var content = document.createElement("div");
@ -27,10 +28,10 @@ export function popoverDirective() {
target: inputElem[0],
content: content,
position: 'right middle',
classes: 'drop-popover',
classes: 'drop-help',
openOn: 'click',
tetherOptions: {
offset: "0 -10px"
offset: offset
}
});

4
public/app/core/components/sidemenu/sidemenu.html
View File

@ -1,7 +1,7 @@
<ul class="sidemenu">
<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
<div class="sidemenu-org">
<a class="sidemenu-org" href="profile">
<div class="sidemenu-org-avatar">
<img ng-if="ctrl.user.gravatarUrl" ng-src="{{ctrl.user.gravatarUrl}}">
<span class="sidemenu-org-avatar--missing">
@ -12,7 +12,7 @@
<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
</div>
</div>
</a>
<i class="fa fa-caret-right"></i>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">

8
public/app/features/datasources/partials/edit.html
View File

@ -15,6 +15,13 @@
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
<gf-popover offset="0px -85px">
The name is used when you select the data source in panels.
The <code>Default</code> data source is preselected in new
new panels.
</gf-popover>
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
</div>
@ -24,6 +31,7 @@
<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
</div>
</div>
</div>
<rebuild-on-change property="datasourceMeta.id">

16
public/app/features/datasources/partials/http_settings.html
View File

@ -9,14 +9,14 @@
<gf-popover>
<p>Specify a complete HTTP url (http://your_server:8080)</p>
<p ng-show="current.access === 'direct'">
When access method is <code>Direct</code> then this url needs to be
accessable from your browser.
</p>
<p ng-show="current.access === 'proxy'">
Your access method is currently <code>Proxy</code> then the url needs to
be accessable from the grafana backend.
</p>
<span ng-show="current.access === 'direct'">
Your access method is <code>Direct</code>, this means the url
needs to be accessable from the browser.
</span>
<span ng-show="current.access === 'proxy'">
Your access method is currently <code>Proxy</code>, this means the url
needs to be accessable from the grafana backend.
</span>
</gf-popover>
</div>

6
public/sass/_grafana.scss
View File

@ -7,7 +7,7 @@
@import "mixins/grid-framework";
@import "mixins/hover";
@import "mixins/forms";
@import "mixins/drop_element";
// BASE
@import "base/normalize";
@ -64,7 +64,7 @@
@import "components/footer";
@import "components/infobox";
@import "components/shortcuts";
@import "components/tether_drop";
@import "components/drop";
@import "components/query_editor";
// PAGES
@ -76,5 +76,5 @@
@import "pages/signup";
@import "pages/styleguide";
@import "old_responsive";
@import "old_responsive";

4
public/sass/_variables.dark.scss
View File

@ -246,5 +246,9 @@ $popoverTitleBackground: $popoverBackground;
$popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25);
// popover
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $text-color;
// images
$checkboxImageUrl: '../img/checkbox.png';

6
public/sass/_variables.light.scss
View File

@ -174,7 +174,7 @@ $dropdownBorder: $tight-form-border;
$dropdownDividerTop: $gray-6;
$dropdownDividerBottom: $white;
$dropdownDivider: $dropdownDividerTop;
$dropdownTitle: $dark-5;
$dropdownTitle: $gray-3;
$dropdownLinkColor: $dark-3;
$dropdownLinkColorHover: $link-color;
@ -273,5 +273,9 @@ $popoverTitleBackground: $white;
$popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25);
// popover
$popover-help-bg: $blue-dark;
$popover-help-color: $gray-6;
// images
$checkboxImageUrl: '../img/checkbox_white.png';

28
public/sass/components/_drop.scss Normal file
View File

@ -0,0 +1,28 @@
$popover-arrow-size: 1rem;
$color: inherit;
$backgroundColor: $btn-secondary-bg;
$color: $text-color;
$useDropShadow: false;
$attachmentOffset: $popover-arrow-size;
$easing: cubic-bezier(0, 0, 0.265, 1.55);
.drop-element {
position: absolute;
display: none;
&.drop-open {
display: block;
}
&.drop-open.drop-popover.drop-out-of-bounds,
&.drop-open-transitionend.drop-popover.drop-out-of-bounds {
display: none;
}
}
.drop-element, .drop-element * {
box-sizing: border-box;
}
@include drop-theme("help", $popover-help-bg, $popover-help-color);
@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);

307
public/sass/components/_tether_drop.scss
View File

@ -1,307 +0,0 @@
$arrowPointerEvents: null;
$color: inherit;
$useDropShadow: false;
$arrowSize: 1rem;
$backgroundColor: $btn-secondary-bg;
$color: $text-color;
$useDropShadow: false;
$attachmentOffset: $arrowSize;
$easing: cubic-bezier(0, 0, 0.265, 1.55);
.drop-element {
position: absolute;
display: none;
&.drop-open {
display: block;
// hide when out of bounds
&.drop-out-of-bounds {
display: none;
}
}
ul {
margin: 0 0 1rem 1rem;
}
}
.drop-element, .drop-element * {
box-sizing: border-box;
}
.drop-element.drop-popover {
max-width: 100%;
max-height: 100%;
.drop-content {
border-radius: $border-radius-lg;
position: relative;
font-family: inherit;
background: $backgroundColor;
color: $color;
padding: 1em;
font-size: $font-size-sm;
max-width: 20rem;
@if $useDropShadow {
transform: translateZ(0);
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2));
}
&:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-width: $arrowSize;
border-style: solid;
pointer-events: $arrowPointerEvents;
}
}
// Centers and middles
&.drop-element-attached-bottom.drop-element-attached-center .drop-content {
margin-bottom: $arrowSize;
&:before {
top: 100%;
left: 50%;
margin-left: - $arrowSize;
border-top-color: $backgroundColor;
}
}
&.drop-element-attached-top.drop-element-attached-center .drop-content {
margin-top: $arrowSize;
&:before {
bottom: 100%;
left: 50%;
margin-left: - $arrowSize;
border-bottom-color: $backgroundColor;
}
}
&.drop-element-attached-right.drop-element-attached-middle .drop-content {
margin-right: $arrowSize;
&:before {
left: 100%;
top: 50%;
margin-top: - $arrowSize;
border-left-color: $backgroundColor;
}
}
&.drop-element-attached-left.drop-element-attached-middle .drop-content {
margin-left: $arrowSize;
&:before {
right: 100%;
top: 50%;
margin-top: - $arrowSize;
border-right-color: $backgroundColor;
}
}
// Target middle/center, element corner
&.drop-element-attached-left.drop-target-attached-center .drop-content {
left: - $arrowSize * 2;
}
&.drop-element-attached-right.drop-target-attached-center .drop-content {
left: $arrowSize * 2;
}
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
margin-top: $arrowSize;
&:before {
bottom: 100%;
left: $arrowSize;
border-bottom-color: $backgroundColor;
}
}
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
margin-top: $arrowSize;
&:before {
bottom: 100%;
right: $arrowSize;
border-bottom-color: $backgroundColor;
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
margin-bottom: $arrowSize;
&:before {
top: 100%;
left: $arrowSize;
border-top-color: $backgroundColor;
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
margin-bottom: $arrowSize;
&:before {
top: 100%;
right: $arrowSize;
border-top-color: $backgroundColor;
}
}
// Top and bottom corners
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
margin-top: $arrowSize;
&:before {
bottom: 100%;
left: $arrowSize;
border-bottom-color: $backgroundColor;
}
}
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
margin-top: $arrowSize;
&:before {
bottom: 100%;
right: $arrowSize;
border-bottom-color: $backgroundColor;
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
margin-bottom: $arrowSize;
&:before {
top: 100%;
left: $arrowSize;
border-top-color: $backgroundColor;
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
margin-bottom: $arrowSize;
&:before {
top: 100%;
right: $arrowSize;
border-top-color: $backgroundColor;
}
}
// Side corners
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: $arrowSize;
&:before {
top: $arrowSize;
left: 100%;
border-left-color: $backgroundColor;
}
}
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: $arrowSize;
&:before {
top: $arrowSize;
right: 100%;
border-right-color: $backgroundColor;
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: $arrowSize;
&:before {
bottom: $arrowSize;
left: 100%;
border-left-color: $backgroundColor;
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: $arrowSize;
&:before {
bottom: $arrowSize;
right: 100%;
border-right-color: $backgroundColor;
}
}
}
@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") {
.#{$themePrefix}-element.#{$themePrefix}-#{$themeName} {
transform: translateZ(0);
transition: opacity 100ms;
opacity: 0;
.#{$themePrefix}-content {
transition: transform 0.2s $easing;
transform: scale(0) translateZ(0);
}
&.#{$themePrefix}-open {
display: none;
}
&.#{$themePrefix}-open-transitionend {
display: block;
}
&.#{$themePrefix}-after-open {
transition: none;
opacity: 1;
.#{$themePrefix}-content {
transform: scale(1) translateZ(0);
}
}
// Centers and middles
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
transform-origin: 50% calc(100% + #{$attachmentOffset});
}
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
transform-origin: 50% (-$attachmentOffset);
}
&.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
transform-origin: calc(100% + #{$attachmentOffset}) 50%;
}
&.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
transform-origin: -($attachmentOffset 50%);
}
// Top and bottom corners
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
transform-origin: 0 (-$attachmentOffset);
}
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
transform-origin: 100% (-$attachmentOffset);
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
transform-origin: 0 calc(100% + #{$attachmentOffset});
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
transform-origin: 100% calc(100% + #{$attachmentOffset});
}
// Side corners
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
transform-origin: calc(100% + #{$attachmentOffset}) 0;
}
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
transform-origin: (-$attachmentOffset) 0;
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
transform-origin: calc(100% + #{$attachmentOffset}) 100%;
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
transform-origin: (-$attachmentOffset) 100%;
}
}
}
@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);

272
public/sass/mixins/_drop_element.scss Normal file
View File

@ -0,0 +1,272 @@
@mixin drop-theme($themeName, $theme-bg, $theme-color) {
.drop-element.drop-#{$themeName} {
max-width: 100%;
max-height: 100%;
.drop-content {
border-radius: $border-radius-lg;
position: relative;
font-family: inherit;
background: $theme-bg;
color: $theme-color;
padding: 1em;
font-size: $font-size-sm;
max-width: 20rem;
&:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-width: $popover-arrow-size;
border-style: solid;
pointer-events: null;
}
}
// Centers and middles
&.drop-element-attached-bottom.drop-element-attached-center .drop-content {
margin-bottom: $popover-arrow-size;
&:before {
top: 100%;
left: 50%;
margin-left: - $popover-arrow-size;
border-top-color: $theme-bg;
}
}
&.drop-element-attached-top.drop-element-attached-center .drop-content {
margin-top: $popover-arrow-size;
&:before {
bottom: 100%;
left: 50%;
margin-left: - $popover-arrow-size;
border-bottom-color: $theme-bg;
}
}
&.drop-element-attached-right.drop-element-attached-middle .drop-content {
margin-right: $popover-arrow-size;
&:before {
left: 100%;
top: 50%;
margin-top: - $popover-arrow-size;
border-left-color: $theme-bg;
}
}
&.drop-element-attached-left.drop-element-attached-middle .drop-content {
margin-left: $popover-arrow-size;
&:before {
right: 100%;
top: 50%;
margin-top: - $popover-arrow-size;
border-right-color: $theme-bg;
}
}
// Target middle/center, element corner
&.drop-element-attached-left.drop-target-attached-center .drop-content {
left: - $popover-arrow-size * 2;
}
&.drop-element-attached-right.drop-target-attached-center .drop-content {
left: $popover-arrow-size * 2;
}
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
margin-top: $popover-arrow-size;
&:before {
bottom: 100%;
left: $popover-arrow-size;
border-bottom-color: $theme-bg;
}
}
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
margin-top: $popover-arrow-size;
&:before {
bottom: 100%;
right: $popover-arrow-size;
border-bottom-color: $theme-bg;
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
margin-bottom: $popover-arrow-size;
&:before {
top: 100%;
left: $popover-arrow-size;
border-top-color: $theme-bg;
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
margin-bottom: $popover-arrow-size;
&:before {
top: 100%;
right: $popover-arrow-size;
border-top-color: $theme-bg;
}
}
// Top and bottom corners
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
margin-top: $popover-arrow-size;
&:before {
bottom: 100%;
left: $popover-arrow-size;
border-bottom-color: $theme-bg;
}
}
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
margin-top: $popover-arrow-size;
&:before {
bottom: 100%;
right: $popover-arrow-size;
border-bottom-color: $theme-bg;
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
margin-bottom: $popover-arrow-size;
&:before {
top: 100%;
left: $popover-arrow-size;
border-top-color: $theme-bg;
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
margin-bottom: $popover-arrow-size;
&:before {
top: 100%;
right: $popover-arrow-size;
border-top-color: $theme-bg;
}
}
// Side corners
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: $popover-arrow-size;
&:before {
top: $popover-arrow-size;
left: 100%;
border-left-color: $theme-bg;
}
}
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: $popover-arrow-size;
&:before {
top: $popover-arrow-size;
right: 100%;
border-right-color: $theme-bg;
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: $popover-arrow-size;
&:before {
bottom: $popover-arrow-size;
left: 100%;
border-left-color: $theme-bg;
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: $popover-arrow-size;
&:before {
bottom: $popover-arrow-size;
right: 100%;
border-right-color: $theme-bg;
}
}
}
}
@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") {
.#{$themePrefix}-element.#{$themePrefix}-#{$themeName} {
transform: translateZ(0);
transition: opacity 100ms;
opacity: 0;
.#{$themePrefix}-content {
transition: transform 0.2s $easing;
transform: scale(0) translateZ(0);
}
&.#{$themePrefix}-open {
display: none;
}
&.#{$themePrefix}-open-transitionend {
display: block;
}
&.#{$themePrefix}-after-open {
transition: none;
opacity: 1;
.#{$themePrefix}-content {
transform: scale(1) translateZ(0);
}
}
// Centers and middles
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
transform-origin: 50% calc(100% + #{$attachmentOffset});
}
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
transform-origin: 50% (-$attachmentOffset);
}
&.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
transform-origin: calc(100% + #{$attachmentOffset}) 50%;
}
&.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
transform-origin: -($attachmentOffset 50%);
}
// Top and bottom corners
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
transform-origin: 0 (-$attachmentOffset);
}
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
transform-origin: 100% (-$attachmentOffset);
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
transform-origin: 0 calc(100% + #{$attachmentOffset});
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
transform-origin: 100% calc(100% + #{$attachmentOffset});
}
// Side corners
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
transform-origin: calc(100% + #{$attachmentOffset}) 0;
}
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
transform-origin: (-$attachmentOffset) 0;
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
transform-origin: calc(100% + #{$attachmentOffset}) 100%;
}
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
transform-origin: (-$attachmentOffset) 100%;
}
}
}