diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/popover/popover.ts new file mode 100644 index 00000000000..26b088f95d2 --- /dev/null +++ b/public/app/core/components/popover/popover.ts @@ -0,0 +1,25 @@ +/// + +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from '../../core_module'; +import Drop from 'tether-drop'; + +export function popoverDirective() { + return { + restrict: 'E', + link: function(scope, elem, attrs) { + var inputElem = elem.prev(); + console.log(inputElem); + var drop = new Drop({ + target: inputElem[0], + content: 'Welcome to the future!', + position: 'right middle', + classes: 'drop-theme-arrows-bounce-dark', + openOn: 'click' + }); + } + }; +} + +coreModule.directive('gfPopover', popoverDirective); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index f973340a336..e9b5e3c71a3 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -24,6 +24,7 @@ import './partials'; import {grafanaAppDirective} from './components/grafana_app'; import {sideMenuDirective} from './components/sidemenu/sidemenu'; import {searchDirective} from './components/search/search'; +import {popoverDirective} from './components/popover/popover'; import {navbarDirective} from './components/navbar/navbar'; import {arrayJoin} from './directives/array_join'; import 'app/core/controllers/all'; @@ -32,4 +33,12 @@ import 'app/core/routes/routes'; import './filters/filters'; import coreModule from './core_module'; -export {arrayJoin, coreModule, grafanaAppDirective, sideMenuDirective, navbarDirective, searchDirective}; +export { + arrayJoin, + coreModule, + grafanaAppDirective, + sideMenuDirective, + navbarDirective, + searchDirective, + popoverDirective +}; diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 2874e157767..cbcc471647e 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -6,6 +6,9 @@
Url + + Help +
diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts index b66ba845827..67c8604685f 100644 --- a/public/app/headers/common.d.ts +++ b/public/app/headers/common.d.ts @@ -39,4 +39,12 @@ declare module 'app/core/store' { export default store; } +declare module 'tether' { + var config: any; + export default config; +} +declare module 'tether-drop' { + var config: any; + export default config; +} diff --git a/public/app/system.conf.js b/public/app/system.conf.js index 640ae843820..9e68baa8588 100644 --- a/public/app/system.conf.js +++ b/public/app/system.conf.js @@ -3,6 +3,7 @@ System.config({ baseURL: 'public', paths: { 'tether': 'vendor/npm/tether/dist/js/tether.js', + 'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js', 'moment': 'vendor/moment.js', "jquery": "vendor/jquery/dist/jquery.js", 'lodash-src': 'vendor/lodash.js', diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index a412919ef25..d273e9019ce 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -64,6 +64,7 @@ @import "components/footer"; @import "components/infobox"; @import "components/shortcuts"; +@import "components/tether_drop"; @import "components/query_editor"; // PAGES @@ -76,3 +77,4 @@ @import "pages/styleguide"; @import "old_responsive"; + diff --git a/public/sass/components/_popovers.scss b/public/sass/components/_popovers.scss index b426450d118..f97ae454c99 100644 --- a/public/sass/components/_popovers.scss +++ b/public/sass/components/_popovers.scss @@ -126,3 +126,181 @@ } } + +.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { + box-sizing: border-box; } + +.drop-element { + position: absolute; + display: none; } + .drop-element.drop-open { + display: block; } + +.drop-element.drop-theme-arrows-bounce-dark { + max-width: 100%; + max-height: 100%; } + .drop-element.drop-theme-arrows-bounce-dark .drop-content { + border-radius: 5px; + position: relative; + font-family: inherit; + background: #000; + color: #fff; + padding: 1em; + font-size: 1.1em; + line-height: 1.5em; } + .drop-element.drop-theme-arrows-bounce-dark .drop-content:before { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-width: 12px; + border-style: solid; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { + top: 100%; + left: 50%; + margin-left: -12px; + border-top-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content:before { + bottom: 100%; + left: 50%; + margin-left: -12px; + border-bottom-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { + margin-right: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content:before { + left: 100%; + top: 50%; + margin-top: -12px; + border-left-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { + margin-left: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content:before { + right: 100%; + top: 50%; + margin-top: -12px; + border-right-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { + bottom: 100%; + left: 12px; + border-bottom-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { + bottom: 100%; + right: 12px; + border-bottom-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { + top: 100%; + left: 12px; + border-top-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { + top: 100%; + right: 12px; + border-top-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { + top: 12px; + left: 100%; + border-left-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { + top: 12px; + right: 100%; + border-right-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { + bottom: 12px; + left: 100%; + border-left-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { + bottom: 12px; + right: 100%; + border-right-color: #000; } + +.drop-element.drop-theme-arrows-bounce-dark { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition: opacity 100ms; + transition: opacity 100ms; + opacity: 0; } + .drop-element.drop-theme-arrows-bounce-dark .drop-content { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); + transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); + -webkit-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); } + .drop-element.drop-theme-arrows-bounce-dark.drop-open { + display: none; } + .drop-element.drop-theme-arrows-bounce-dark.drop-open-transitionend { + display: block; } + .drop-element.drop-theme-arrows-bounce-dark.drop-after-open { + -webkit-transition: none; + transition: none; + opacity: 1; } + .drop-element.drop-theme-arrows-bounce-dark.drop-after-open .drop-content { + -webkit-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { + -webkit-transform-origin: 50% calc(100% + 12px); + -ms-transform-origin: 50% calc(100% + 12px); + transform-origin: 50% calc(100% + 12px); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { + -webkit-transform-origin: 50% -12px; + -ms-transform-origin: 50% -12px; + transform-origin: 50% -12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { + -webkit-transform-origin: calc(100% + 12px) 50%; + -ms-transform-origin: calc(100% + 12px) 50%; + transform-origin: calc(100% + 12px) 50%; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { + -webkit-transform-origin: -12px 50%; + -ms-transform-origin: -12px 50%; + transform-origin: -12px 50%; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { + -webkit-transform-origin: 0 -12px; + -ms-transform-origin: 0 -12px; + transform-origin: 0 -12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { + -webkit-transform-origin: 100% -12px; + -ms-transform-origin: 100% -12px; + transform-origin: 100% -12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { + -webkit-transform-origin: 0 calc(100% + 12px); + -ms-transform-origin: 0 calc(100% + 12px); + transform-origin: 0 calc(100% + 12px); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { + -webkit-transform-origin: 100% calc(100% + 12px); + -ms-transform-origin: 100% calc(100% + 12px); + transform-origin: 100% calc(100% + 12px); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { + -webkit-transform-origin: calc(100% + 12px) 0; + -ms-transform-origin: calc(100% + 12px) 0; + transform-origin: calc(100% + 12px) 0; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { + -webkit-transform-origin: -12px 0; + -ms-transform-origin: -12px 0; + transform-origin: -12px 0; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { + -webkit-transform-origin: calc(100% + 12px) 100%; + -ms-transform-origin: calc(100% + 12px) 100%; + transform-origin: calc(100% + 12px) 100%; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { + -webkit-transform-origin: -12px 100%; + -ms-transform-origin: -12px 100%; + transform-origin: -12px 100%; } diff --git a/public/sass/components/_tether_drop.scss b/public/sass/components/_tether_drop.scss new file mode 100644 index 00000000000..dc91d4dc2ea --- /dev/null +++ b/public/sass/components/_tether_drop.scss @@ -0,0 +1,245 @@ + +@mixin tether($themePrefix: "tether") { + .#{ $themePrefix }-element, .#{ $themePrefix }-element * { + &, &:after, &:before { + box-sizing: border-box; + } + } + + .#{ $themePrefix }-element { + position: absolute; + display: none; + } + + &.#{ $themePrefix }-open { + display: block; + } +} + +@mixin tether-theme-arrows($themePrefix: "tether", $themeName: "arrows", $arrowSize: 16px, $arrowPointerEvents: null, $backgroundColor: #fff, $color: inherit, $useDropShadow: false) { + .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName } { + max-width: 100%; + max-height: 100%; + + .#{ $themePrefix }-content { + border-radius: 5px; + position: relative; + font-family: inherit; + background: $backgroundColor; + color: $color; + padding: 1em; + font-size: 1.1em; + line-height: 1.5em; + + @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 + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: 50%; + margin-left: - $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: 50%; + margin-left: - $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { + margin-right: $arrowSize; + + &:before { + left: 100%; + top: 50%; + margin-top: - $arrowSize; + border-left-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { + margin-left: $arrowSize; + + &:before { + right: 100%; + top: 50%; + margin-top: - $arrowSize; + border-right-color: $backgroundColor; + } + } + + // Target middle/center, element corner + + &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content { + left: - $arrowSize * 2; + } + + &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content { + left: $arrowSize * 2; + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + right: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + right: $arrowSize; + border-top-color: $backgroundColor; + } + } + + // Top and bottom corners + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + right: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + right: $arrowSize; + border-top-color: $backgroundColor; + } + } + + // Side corners + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { + margin-right: $arrowSize; + + &:before { + top: $arrowSize; + left: 100%; + border-left-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { + margin-left: $arrowSize; + + &:before { + top: $arrowSize; + right: 100%; + border-right-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { + margin-right: $arrowSize; + + &:before { + bottom: $arrowSize; + left: 100%; + border-left-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { + margin-left: $arrowSize; + + &:before { + bottom: $arrowSize; + right: 100%; + border-right-color: $backgroundColor; + } + } + } +} + +$themePrefix: "drop"; +$themeName: "arrows-bounce-dark"; +$arrowSize: 12px; +$backgroundColor: #000; +$color: #fff; +$useDropShadow: false; +$attachmentOffset: $arrowSize; +$easing: cubic-bezier(0, 0, 0.265, 1.55); + +@include tether($themePrefix: $themePrefix); +@include tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow); + + +// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing)