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

poc(): tether drop

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-21 18:08:44 +01:00
parent 8f9c3c8381
commit a93fe5b2b2
8 changed files with 472 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/app/core/components/popover/popover.ts Normal file
View File

@ -0,0 +1,25 @@
///<reference path="../../../headers/common.d.ts" />
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);

11
public/app/core/core.ts
View File

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

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

@ -6,6 +6,9 @@
<div class="gf-form">
<span class="gf-form-label width-7">Url</span>
<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
<gf-popover style="display: none">
Help
</gf-popover>
</div>
<div class="gf-form">

8
public/app/headers/common.d.ts vendored
View File

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

1
public/app/system.conf.js
View File

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

2
public/sass/_grafana.scss
View File

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

178
public/sass/components/_popovers.scss
View File

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

245
public/sass/components/_tether_drop.scss Normal file
View File

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