Skip to content

N
nexpie-grafana-theme
Commit a99c81d2 by Rashid Khan
Options

Added new popover positioning

parent 61d0b58c
Showing with 423 additions and 5 deletions
src/app/panels/query/module.html
......@@ -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" />
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
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;
}
src/vendor/bootstrap/bootstrap.js
......@@ -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)
......
src/vendor/bootstrap/less/overrides.less
......@@ -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;
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment