From a93fe5b2b2c54aaeea61ec473881002ca50ab57c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 21 Feb 2016 18:08:44 +0100 Subject: [PATCH 1/7] poc(): tether drop --- public/app/core/components/popover/popover.ts | 25 ++ public/app/core/core.ts | 11 +- .../datasources/partials/http_settings.html | 3 + public/app/headers/common.d.ts | 8 + public/app/system.conf.js | 1 + public/sass/_grafana.scss | 2 + public/sass/components/_popovers.scss | 178 +++++++++++++ public/sass/components/_tether_drop.scss | 245 ++++++++++++++++++ 8 files changed, 472 insertions(+), 1 deletion(-) create mode 100644 public/app/core/components/popover/popover.ts create mode 100644 public/sass/components/_tether_drop.scss 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) From f225bb003202dead511150f5e87024114affe72b Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 19 Feb 2016 16:01:02 +0100 Subject: [PATCH 2/7] ux(annotations): migrate annotations editors to new form --- public/app/core/directives/misc.js | 2 +- .../features/annotations/partials/editor.html | 47 +++++++-------- .../partials/annotations.editor.html | 59 +++++++++---------- .../graphite/partials/annotations.editor.html | 25 ++++---- .../influxdb/partials/annotations.editor.html | 36 ++++++----- .../partials/annotations.editor.html | 38 ++++++------ public/sass/components/_dashboard.scss | 6 ++ 7 files changed, 105 insertions(+), 108 deletions(-) diff --git a/public/app/core/directives/misc.js b/public/app/core/directives/misc.js index d9bd7a38f0c..8e1791af46c 100644 --- a/public/app/core/directives/misc.js +++ b/public/app/core/directives/misc.js @@ -39,7 +39,7 @@ function (angular, coreModule, kbn) { var tip = attrs.tip ? (' ' + attrs.tip + '') : ''; var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : ''; - var template = '
' + + var template = '
' + ' ' + '
- -
@@ -66,28 +64,32 @@
-
-
-
- - +
+
+
+ Name +
-
- - +
+ Datasource +
-
- +
+
+
+ Icon size + +
+
+ Icon color
-
- - +
+
- -
- +
+ Line color
@@ -96,11 +98,10 @@ -
- - -
-
+
+ + +
diff --git a/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html b/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html index 8f761b67865..1db00904c04 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html +++ b/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html @@ -1,39 +1,36 @@ -
-
-
Index name
-
- -
+
+
+ Index name +
-
-
Search query (lucene) Use [[filterName]] in query to replace part of the query with a filter value
-
- -
+
+ Search query (lucene) Use [[filterName]] in query to replace part of the query with a filter value +
-
-
-
Field mappings
-
- - +
+
Field mappings
+
+
+ Time +
-
- - -
- -
- - -
- -
- - +
+ Title +
-
+
+
+ Tags + +
+ +
+ Text + +
+
+
\ No newline at end of file diff --git a/public/app/plugins/datasource/graphite/partials/annotations.editor.html b/public/app/plugins/datasource/graphite/partials/annotations.editor.html index ea5c2f7f50f..b7264b5e499 100644 --- a/public/app/plugins/datasource/graphite/partials/annotations.editor.html +++ b/public/app/plugins/datasource/graphite/partials/annotations.editor.html @@ -1,15 +1,10 @@ -
-
- - -
-
- -
-
- - -
-
- - +
+
+ Graphite target expression + +
+
+ Graphite event tags + +
+
\ No newline at end of file diff --git a/public/app/plugins/datasource/influxdb/partials/annotations.editor.html b/public/app/plugins/datasource/influxdb/partials/annotations.editor.html index 03ef1df0b52..3c4634bb657 100644 --- a/public/app/plugins/datasource/influxdb/partials/annotations.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/annotations.editor.html @@ -1,29 +1,27 @@ -
-
-
InfluxDB Query Example: select text from events where $timeFilter
-
- +
+
+
+ InfluxDB Query Example: select text from events where $timeFilter +
- -
-
-
Column mappings If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.
-
- - +
+
Column mappings If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.
+
+
+ Title +
-
- - +
+ Tags +
-
- - +
+ Text +
- diff --git a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html index ffeb7d6deea..5a155b3a1b5 100644 --- a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html @@ -1,28 +1,28 @@ -
-
-
Search expression
-
- +
+
+
+ Search expression +
- -
-
-
Field formats
-
- - +
+
Field formats
+
+
+ Title +
-
- - +
+ Tags +
- -
- - +
+
+
+ Text +
diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 1ca0c3b9719..8b4b272d523 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -285,3 +285,9 @@ div.flot-text { padding: 1.2rem .5rem .4rem .5rem; } } + +.annotations-basic-settings { + .last-row { + margin-bottom: 20px; + } +} From b98c826e954d91610a566d017e1bcf2c09ce7816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 10:17:35 +0100 Subject: [PATCH 3/7] ux(): worked on new popover --- public/app/core/components/popover/popover.ts | 45 +- .../datasources/partials/http_settings.html | 13 +- public/sass/components/_popovers.scss | 178 ------ public/sass/components/_tether_drop.scss | 540 ++++++++++-------- 4 files changed, 349 insertions(+), 427 deletions(-) diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/popover/popover.ts index 26b088f95d2..5c4534ad500 100644 --- a/public/app/core/components/popover/popover.ts +++ b/public/app/core/components/popover/popover.ts @@ -8,15 +8,44 @@ import Drop from 'tether-drop'; export function popoverDirective() { return { restrict: 'E', - link: function(scope, elem, attrs) { + transclude: true, + link: function(scope, elem, attrs, ctrl, transclude) { 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' + if (inputElem.length === 0) { + console.log('Failed to find input element for popover'); + return; + } + + + transclude(function(clone, newScope) { + var content = document.createElement("div"); + _.each(clone, (node) => { + content.appendChild(node); + }); + + var drop = new Drop({ + target: inputElem[0], + content: content, + position: 'right middle', + classes: 'drop-popover', + openOn: 'click', + tetherOptions: { + offset: "0 -10px" + } + }); + + // inputElem.on('focus.popover', function() { + // drop.open(); + // }); + // + // inputElem.on('blur.popover', function() { + // close(); + // }); + + scope.$on('$destroy', function() { + drop.destroy(); + }); + }); } }; diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index cbcc471647e..93a47f4065a 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -6,8 +6,17 @@
Url - - Help + + +

Specify a complete HTTP url (http://your_server:8080)

+

+ When access method is Direct then this url needs to be + accessable from your browser. +

+

+ Your access method is currently Proxy then the url needs to + be accessable from the grafana backend. +

diff --git a/public/sass/components/_popovers.scss b/public/sass/components/_popovers.scss index f97ae454c99..e069fd8a78f 100644 --- a/public/sass/components/_popovers.scss +++ b/public/sass/components/_popovers.scss @@ -124,183 +124,5 @@ bottom: -$popoverArrowWidth; } } - } -.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 index dc91d4dc2ea..28b563383b0 100644 --- a/public/sass/components/_tether_drop.scss +++ b/public/sass/components/_tether_drop.scss @@ -1,245 +1,307 @@ - -@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; +$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); -@include tether($themePrefix: $themePrefix); -@include tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow); +.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; + } + } +} -// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing) +@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); From 6c617ba28cfec8355a680e90b46fce7eb586e68f Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 10:21:22 +0100 Subject: [PATCH 4/7] fix(annotations): rearrange missplaced save button --- .../features/annotations/partials/editor.html | 60 ++++++++++--------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index f6e2a3a41a5..01171084bf5 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -64,32 +64,34 @@
-
-
-
- Name - +
+
+
+
+ Name + +
+
+ Datasource + +
-
- Datasource - -
-
-
-
- Icon size - -
-
- - Icon color -
-
- -
-
- - Line color +
+
+ Icon size + +
+
+ + Icon color +
+
+ +
+
+ + Line color +
@@ -98,9 +100,11 @@ -
- - +
+
+ + +
From ea4ce0ce1f4ea0cbdbbd3d61ef550e1fb7c1b3e0 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 11:29:09 +0100 Subject: [PATCH 5/7] ux(playlist): finalize the ux for playlists --- .../features/playlist/partials/playlist.html | 47 +++++++++++-------- .../features/playlist/playlist_edit_ctrl.ts | 2 +- public/sass/pages/_playlist.scss | 35 ++++++++++++++ 3 files changed, 64 insertions(+), 20 deletions(-) diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index b62d2a22f54..beb311a9e6c 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -7,6 +7,8 @@

Edit Playlist

+

A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.

+
Name @@ -19,24 +21,28 @@
-
-
Add dashboards
-
- -
-
+

Dashboards

-
Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})
+ +
+
+
Available
+
+ +
+
+
+
- +
- -
- {{playlistItem.title}} + +   {{playlistItem.title}} +
-
@@ -57,20 +63,20 @@
-
Added dashboards
- +
Selected
+
- - -
- {{playlistItem.title}} + +   {{playlistItem.title}} + {{playlistItem.title}} + @@ -89,7 +95,10 @@
-  Add + Save Cancel diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts index 3baa3dd3353..ea018bc0bbb 100644 --- a/public/app/features/playlist/playlist_edit_ctrl.ts +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -11,7 +11,7 @@ export class PlaylistEditCtrl { searchQuery: string = ''; loading: boolean = false; playlist: any = { - interval: '10m', + interval: '5m', }; playlistItems: any = []; dashboardresult: any = []; diff --git a/public/sass/pages/_playlist.scss b/public/sass/pages/_playlist.scss index cbe94593f0a..f0d1cf4c038 100644 --- a/public/sass/pages/_playlist.scss +++ b/public/sass/pages/_playlist.scss @@ -1,3 +1,8 @@ +.playlist-description { + width: 555px; + margin-bottom: 20px; +} + .playlist-search-container { z-index: 1000; position: relative; @@ -18,6 +23,10 @@ right: 11px; } +.playlist-search-containerwrapper { + margin-bottom: 15px; +} + .playlist-search-field-wrapper { input { width: 100%; @@ -90,3 +99,29 @@ padding-left: 20px; } } + +.playlist-available-list { + td { + line-height: 2rem; + white-space: nowrap; + } + + .add-dashboard { + text-align: center; + } +} + +.playlist-column-header { + border-bottom: thin solid $gray-1; + padding-bottom: 10px; + margin-bottom: 15px; +} + +.selected-playlistitem-settings { + text-align: right; +} + +.tag-result-container { + width: 160px; + float: left; +} \ No newline at end of file From f375c3000d8e6f324660ff1ff55fc32d2036af75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 11:41:50 +0100 Subject: [PATCH 6/7] ux(): help popover --- public/app/core/components/popover/popover.ts | 5 +- .../core/components/sidemenu/sidemenu.html | 4 +- .../features/datasources/partials/edit.html | 8 + .../datasources/partials/http_settings.html | 16 +- public/sass/_grafana.scss | 6 +- public/sass/_variables.dark.scss | 4 + public/sass/_variables.light.scss | 6 +- public/sass/components/_drop.scss | 28 ++ public/sass/components/_tether_drop.scss | 307 ------------------ public/sass/mixins/_drop_element.scss | 272 ++++++++++++++++ 10 files changed, 333 insertions(+), 323 deletions(-) create mode 100644 public/sass/components/_drop.scss delete mode 100644 public/sass/components/_tether_drop.scss create mode 100644 public/sass/mixins/_drop_element.scss diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/popover/popover.ts index 5c4534ad500..f2a413aca02 100644 --- a/public/app/core/components/popover/popover.ts +++ b/public/app/core/components/popover/popover.ts @@ -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 } }); diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 6e460e813ce..200f01e23cf 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -1,7 +1,7 @@
  • -
    +
    @@ -12,7 +12,7 @@ {{ctrl.user.name}} {{ctrl.user.orgName}}
    -
    +
+ diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 93a47f4065a..a42d3e76c1b 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -9,14 +9,14 @@

Specify a complete HTTP url (http://your_server:8080)

-

- When access method is Direct then this url needs to be - accessable from your browser. -

-

- Your access method is currently Proxy then the url needs to - be accessable from the grafana backend. -

+ + Your access method is Direct, this means the url + needs to be accessable from the browser. + + + Your access method is currently Proxy, this means the url + needs to be accessable from the grafana backend. + diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index d273e9019ce..1d90ffaa97d 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -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"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 8604552f020..eb2733206de 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -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'; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 0b753411b32..9b04bd7445a 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -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'; diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss new file mode 100644 index 00000000000..7a256f8efab --- /dev/null +++ b/public/sass/components/_drop.scss @@ -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); diff --git a/public/sass/components/_tether_drop.scss b/public/sass/components/_tether_drop.scss deleted file mode 100644 index 28b563383b0..00000000000 --- a/public/sass/components/_tether_drop.scss +++ /dev/null @@ -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); diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss new file mode 100644 index 00000000000..b4bd2f1a51e --- /dev/null +++ b/public/sass/mixins/_drop_element.scss @@ -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%; + } + } +} + From 773a13dc2686795705721a1fd8673d8223780361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 11:45:10 +0100 Subject: [PATCH 7/7] fix(): fixed systemjs config for test --- public/test/test-main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/test/test-main.js b/public/test/test-main.js index 17971f1a43f..608305e46e7 100644 --- a/public/test/test-main.js +++ b/public/test/test-main.js @@ -10,6 +10,8 @@ baseURL: '/base/', defaultJSExtensions: true, 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',