mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Added new popover positioning
This commit is contained in:
Rashid Khan
parent
61d0b58c1d
commit
a99c81d201
@ -2,7 +2,7 @@
|
||||
<div ng-repeat="id in (unPinnedQueries = (querySrv.ids|pinnedQuery:false))" ng-class="{'short-query': unPinnedQueries.length>1}">
|
||||
<form class="form-search" style="position:relative;margin-bottom:5px;" ng-submit="refresh()">
|
||||
<span class="begin-query">
|
||||
<i class="icon-circle pointer" data-unique="1" bs-popover="'app/panels/query/meta.html'" data-placement="right" ng-style="{color: querySrv.list[id].color}"></i>
|
||||
<i class="icon-circle pointer" data-unique="1" bs-popover="'app/panels/query/meta.html'" data-placement="rightTop" ng-style="{color: querySrv.list[id].color}"></i>
|
||||
<i class="icon-remove-sign pointer remove-query" ng-show="querySrv.ids.length > 1" ng-click="querySrv.remove(id);refresh()"></i>
|
||||
</span>
|
||||
<input class="search-query panel-query" ng-class="{ 'input-block-level': unPinnedQueries.length==1, 'last-query': $last, 'has-remove': querySrv.ids.length > 1 }" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="querySrv.list[id].query" />
|
||||
|
||||
2
src/css/bootstrap.dark.min.css
vendored
2
src/css/bootstrap.dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
src/css/bootstrap.light.min.css
vendored
2
src/css/bootstrap.light.min.css
vendored
File diff suppressed because one or more lines are too long
207
src/css/main.css
207
src/css/main.css
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
.row-close {
|
||||
color: #bbb;
|
||||
color: #bbb;
|
||||
position: absolute;
|
||||
font-size: 9pt;
|
||||
font-weight: 200;
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
.row-open {
|
||||
text-align: right;
|
||||
color: #bbb;
|
||||
color: #bbb;
|
||||
margin-top:30px;
|
||||
position: absolute;
|
||||
font-size: 13pt;
|
||||
@ -58,8 +58,8 @@
|
||||
-webkit-transform-origin: 40px;
|
||||
transform-origin: 40px;
|
||||
transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
@ -191,3 +191,202 @@
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
* popover-extra-placements.css v0.1
|
||||
* http://twitter.github.com/bootstrap-popover-extra-placements
|
||||
* ===================================================
|
||||
* Copyright 2012 Daniel Kleehammer
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================== */
|
||||
|
||||
|
||||
/*************************
|
||||
* Top Positions
|
||||
*************************/
|
||||
|
||||
/** Top Left **/
|
||||
.popover.topLeft {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.topLeft .arrow {
|
||||
bottom: -10px;
|
||||
left: 25%;
|
||||
margin-left: -10px;
|
||||
border-width: 10px 10px 0;
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.topLeft .arrow:after {
|
||||
border-width: 11px 11px 0;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
/** Top Right **/
|
||||
.popover.topRight {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.topRight .arrow {
|
||||
bottom: -10px;
|
||||
left: 75%;
|
||||
margin-left: -10px;
|
||||
border-width: 10px 10px 0;
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.topRight .arrow:after {
|
||||
border-width: 11px 11px 0;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
|
||||
/*************************
|
||||
* Right Positions
|
||||
*************************/
|
||||
|
||||
/** Right Top **/
|
||||
.popover.rightTop {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.popover.rightTop .arrow {
|
||||
top: 25%;
|
||||
left: -10px;
|
||||
margin-top: -10px;
|
||||
border-width: 10px 10px 10px 0;
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.rightTop .arrow:after {
|
||||
border-width: 11px 11px 11px 0;
|
||||
border-right-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -11px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
/** Right Bottom **/
|
||||
.popover.rightBottom {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.popover.rightBottom .arrow {
|
||||
top: 75%;
|
||||
left: -10px;
|
||||
margin-top: -10px;
|
||||
border-width: 10px 10px 10px 0;
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.rightBottom .arrow:after {
|
||||
border-width: 11px 11px 11px 0;
|
||||
border-right-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -11px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Bottom Positions
|
||||
*************************/
|
||||
|
||||
/** Bottom Left **/
|
||||
.popover.bottomLeft {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.popover.bottomLeft .arrow {
|
||||
top: -10px;
|
||||
left: 25%;
|
||||
margin-left: -10px;
|
||||
border-width: 0 10px 10px;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.bottomLeft .arrow:after {
|
||||
border-width: 0 11px 11px;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.25);
|
||||
top: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
|
||||
/** Bottom Right **/
|
||||
.popover.bottomRight {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.popover.bottomRight .arrow {
|
||||
top: -10px;
|
||||
left: 75%;
|
||||
margin-left: -10px;
|
||||
border-width: 0 10px 10px;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.bottomRight .arrow:after {
|
||||
border-width: 0 11px 11px;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.25);
|
||||
top: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Left Positions
|
||||
*************************/
|
||||
|
||||
/** Left Top **/
|
||||
.popover.leftTop {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popover.leftTop .arrow {
|
||||
top: 25%;
|
||||
right: -10px;
|
||||
margin-top: -10px;
|
||||
border-width: 10px 0 10px 10px;
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.leftTop .arrow:after {
|
||||
border-width: 11px 0 11px 11px;
|
||||
border-left-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -11px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
|
||||
/** Left Bottom **/
|
||||
.popover.leftBottom {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popover.leftBottom .arrow {
|
||||
top: 75%;
|
||||
right: -10px;
|
||||
margin-top: -10px;
|
||||
border-width: 10px 0 10px 10px;
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
|
||||
.popover.leftBottom .arrow:after {
|
||||
border-width: 11px 0 11px 11px;
|
||||
border-left-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -11px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
|
||||
34
src/vendor/bootstrap/bootstrap.js
vendored
34
src/vendor/bootstrap/bootstrap.js
vendored
@ -1207,6 +1207,40 @@
|
||||
case 'right':
|
||||
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
|
||||
break
|
||||
|
||||
// extend placements (top)
|
||||
case 'topLeft':
|
||||
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .10)};
|
||||
break;
|
||||
case 'topRight':
|
||||
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .90)};
|
||||
break;
|
||||
|
||||
// extend placements (right)
|
||||
case 'rightTop':
|
||||
tp = {top: pos.top + pos.height / 2 - (actualHeight *.10), left: pos.left + pos.width};
|
||||
break;
|
||||
case 'rightBottom':
|
||||
tp = {top: pos.top + pos.height / 2 - (actualHeight * .90), left: pos.left + pos.width};
|
||||
break;
|
||||
|
||||
// extend placements (bottom)
|
||||
case 'bottomLeft':
|
||||
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .10)};
|
||||
break;
|
||||
case 'bottomRight':
|
||||
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .90)};
|
||||
break;
|
||||
|
||||
// extend placements (left)
|
||||
case 'leftTop':
|
||||
tp = {top: pos.top + pos.height / 2 - (actualHeight *.10), left: pos.left - actualWidth};
|
||||
break;
|
||||
case 'leftBottom':
|
||||
tp = {top: pos.top + pos.height / 2 - (actualHeight * .90), left: pos.left - actualWidth};
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.applyPlacement(tp, placement)
|
||||
|
||||
184
src/vendor/bootstrap/less/overrides.less
vendored
184
src/vendor/bootstrap/less/overrides.less
vendored
@ -234,4 +234,188 @@ div.flot-text {
|
||||
width:100%;
|
||||
color: @textColor;
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
* popover-extra-placements.css v0.1
|
||||
* http://twitter.github.com/bootstrap-popover-extra-placements
|
||||
* ===================================================
|
||||
* Copyright 2012 Daniel Kleehammer
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================== */
|
||||
|
||||
|
||||
/*************************
|
||||
* Top Positions
|
||||
*************************/
|
||||
|
||||
/** Top Left **/
|
||||
.popover.topLeft {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.topLeft .arrow {
|
||||
bottom: -10px;
|
||||
left: 25%;
|
||||
margin-left: -10px;
|
||||
border-width: 10px 10px 0;
|
||||
border-top-color: @popoverTitleBackground;
|
||||
}
|
||||
|
||||
.popover.topLeft .arrow:after {
|
||||
border-width: 11px 11px 0;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
/** Top Right **/
|
||||
.popover.topRight {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.topRight .arrow {
|
||||
bottom: -10px;
|
||||
left: 75%;
|
||||
margin-left: -10px;
|
||||
border-width: 10px 10px 0;
|
||||
border-top-color: @popoverTitleBackground;;
|
||||
}
|
||||
|
||||
.popover.topRight .arrow:after {
|
||||
border-width: 11px 11px 0;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
|
||||
/*************************
|
||||
* Right Positions
|
||||
*************************/
|
||||
|
||||
.popover {
|
||||
&.rightTop .arrow {
|
||||
top: 10%;
|
||||
left: -@popoverArrowOuterWidth;
|
||||
margin-top: -@popoverArrowOuterWidth;
|
||||
border-left-width: 0;
|
||||
border-right-color: #999; // IE8 fallback
|
||||
border-right-color: @popoverArrowOuterColor;
|
||||
&:after {
|
||||
left: 1px;
|
||||
bottom: -@popoverArrowWidth;
|
||||
border-left-width: 0;
|
||||
border-right-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
&.rightBottom .arrow {
|
||||
top: 90%;
|
||||
left: -@popoverArrowOuterWidth;
|
||||
margin-top: -@popoverArrowOuterWidth;
|
||||
border-left-width: 0;
|
||||
border-right-color: #999; // IE8 fallback
|
||||
border-right-color: @popoverArrowOuterColor;
|
||||
&:after {
|
||||
left: 1px;
|
||||
bottom: -@popoverArrowWidth;
|
||||
border-left-width: 0;
|
||||
border-right-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
&.bottomLeft .arrow {
|
||||
left: 10%;
|
||||
margin-left: -@popoverArrowOuterWidth;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #999; // IE8 fallback
|
||||
border-bottom-color: @popoverArrowOuterColor;
|
||||
top: -@popoverArrowOuterWidth;
|
||||
&:after {
|
||||
top: 1px;
|
||||
margin-left: -@popoverArrowWidth;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
&.bottomRight .arrow {
|
||||
left: 90%;
|
||||
margin-left: -@popoverArrowOuterWidth;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #999; // IE8 fallback
|
||||
border-bottom-color: @popoverArrowOuterColor;
|
||||
top: -@popoverArrowOuterWidth;
|
||||
&:after {
|
||||
top: 1px;
|
||||
margin-left: -@popoverArrowWidth;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
&.leftTop .arrow {
|
||||
top: 10%;
|
||||
right: -@popoverArrowOuterWidth;
|
||||
margin-top: -@popoverArrowOuterWidth;
|
||||
border-right-width: 0;
|
||||
border-left-color: #999; // IE8 fallback
|
||||
border-left-color: @popoverArrowOuterColor;
|
||||
&:after {
|
||||
right: 1px;
|
||||
border-right-width: 0;
|
||||
border-left-color: @popoverArrowColor;
|
||||
bottom: -@popoverArrowWidth;
|
||||
}
|
||||
}
|
||||
&.leftBottom .arrow {
|
||||
top: 90%;
|
||||
right: -@popoverArrowOuterWidth;
|
||||
margin-top: -@popoverArrowOuterWidth;
|
||||
border-right-width: 0;
|
||||
border-left-color: #999; // IE8 fallback
|
||||
border-left-color: @popoverArrowOuterColor;
|
||||
&:after {
|
||||
right: 1px;
|
||||
border-right-width: 0;
|
||||
border-left-color: @popoverArrowColor;
|
||||
bottom: -@popoverArrowWidth;
|
||||
}
|
||||
}
|
||||
&.topLeft .arrow {
|
||||
left: 10%;
|
||||
margin-left: -@popoverArrowOuterWidth;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #999; // IE8 fallback
|
||||
border-top-color: @popoverArrowOuterColor;
|
||||
bottom: -@popoverArrowOuterWidth;
|
||||
&:after {
|
||||
bottom: 1px;
|
||||
margin-left: -@popoverArrowWidth;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
&.topRight .arrow {
|
||||
left: 90%;
|
||||
margin-left: -@popoverArrowOuterWidth;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #999; // IE8 fallback
|
||||
border-top-color: @popoverArrowOuterColor;
|
||||
bottom: -@popoverArrowOuterWidth;
|
||||
&:after {
|
||||
bottom: 1px;
|
||||
margin-left: -@popoverArrowWidth;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user