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
Download Patch File Download Diff File Expand all files Collapse all files

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%;
}
}
}