IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Began work on modal css polish, #1554

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-03-05 18:01:41 +01:00
parent 79be106711
commit 259d330822
6 changed files with 78 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/features/dashboard/partials/shareModal.html
View File

@ -17,6 +17,7 @@
<div class="gf-box-body"> <div class="gf-box-body">
<br>
<div class="gf-form"> <div class="gf-form">
<div class="gf-form-row"> <div class="gf-form-row">
<editor-checkbox text="Current time range" model="forCurrent" change="buildUrl()"></editor-checkbox> <editor-checkbox text="Current time range" model="forCurrent" change="buildUrl()"></editor-checkbox>
@ -43,7 +44,7 @@
</div> </div>
<div> <div>
<div class="editor-row" style="margin-top: 15px;" ng-if="toPanel"> <div class="editor-row" style="margin-top: 5px;" ng-if="toPanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image<a> <a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image<a>
</div> </div>
</div> </div>

58
src/app/partials/confirm_modal.html
View File

@ -1,23 +1,45 @@
<div class="modal-body gf-box gf-box-no-margin"> <div class="modal-body">
<div class="gf-box-header">
<div class="gf-box-title"> <a class="modal-close" ng-click="dismiss();">
<i class="fa {{icon}}"></i> <i class="fa fa-remove"></i>
{{title}} </a>
</div>
<div class="confirm-modal-icon">
<i class="fa {{icon}}"></i>
</div> </div>
<div class="gf-box-body" style="min-height: 0px;"> <div class="confirm-modal-title">
<p class="row-fluid text-center large"> {{title}}
{{text}} </div>
<br>
<br> <div class="confirm-modal-text">
</p> {{text}}
<div class="row-fluid"> </div>
<span class="span4"></span>
<button type="button" class="btn btn-primary span2" ng-click="dismiss()">No</button> <div class="confirm-modal-buttons">
<button type="button" class="btn btn-danger span2" ng-click="onConfirm();dismiss();">Yes</button> <button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
<span class="span4"></span> <button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">Save &amp; Overwrite</button>
</div> </div>
<!-- <div class="gf&#45;box&#45;header"> -->
<!-- <div class="gf&#45;box&#45;title"> -->
<!-- <i class="fa {{icon}}"></i> -->
<!-- {{title}} -->
<!-- </div> -->
<!-- </div> -->
<!-- -->
<!-- <div class="gf&#45;box&#45;body" style="min&#45;height: 0px;"> -->
<!-- <p class="row&#45;fluid text&#45;center large"> -->
<!-- {{text}} -->
<!-- <br> -->
<!-- <br> -->
<!-- </p> -->
<!-- <div class="row&#45;fluid"> -->
<!-- <span class="span4"></span> -->
<!-- <button type="button" class="btn btn&#45;primary span2" ng&#45;click="dismiss()">No</button> -->
<!-- <button type="button" class="btn btn&#45;danger span2" ng&#45;click="onConfirm();dismiss();">Yes</button> -->
<!-- <span class="span4"></span> -->
<!-- </div> -->
</div> </div>

2
src/css/less/forms.less
View File

@ -13,7 +13,7 @@ input[type="checkbox"].cr1 {
input[type="checkbox"]+.cr1 { input[type="checkbox"]+.cr1 {
display: inline-block; display: inline-block;
height: 19px; height: 20px;
clear: none; clear: none;
text-indent: 2px; text-indent: 2px;
margin: 0; margin: 0;

30
src/css/less/grafana.less
View File

@ -257,5 +257,35 @@
} }
.confirm-modal { .confirm-modal {
border: 1px solid @grafanaTargetFuncBackground;
max-width: 500px; max-width: 500px;
background-color: @modalBackground;
text-align: center;
.modal-close {
float: right;
font-size: 140%;
padding: 10px;
}
.confirm-modal-icon {
padding-top: 41px;
font-size: 280%;
color: @green;
padding-bottom: 20px;
}
.confirm-modal-title {
font-size: 18px;
color: @linkColor;
margin-bottom: 15px;
}
.confirm-modal-text {
font-size: 16px;
margin-bottom: 25px;
}
.confirm-modal-buttons {
margin-bottom: 35px;
button {
margin-right: 5px
}
}
} }

4
src/css/less/variables.dark.less
View File

@ -41,6 +41,8 @@
@grafanaTargetFuncBackground: #333; @grafanaTargetFuncBackground: #333;
@grafanaTargetFuncHightlight: #444; @grafanaTargetFuncHightlight: #444;
@modalBackground: @black;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: rgb(22,22,22); @bodyBackground: rgb(22,22,22);
@ -71,6 +73,7 @@
@headingsColor: @white; // empty to use BS default, @textColor @headingsColor: @white; // empty to use BS default, @textColor
@inputText: @black; @inputText: @black;
// Component sizing // Component sizing
// ------------------------- // -------------------------
// Based on 14px font-size and 20px line-height // Based on 14px font-size and 20px line-height
@ -178,7 +181,6 @@
@zindexModalBackdrop: 1040; @zindexModalBackdrop: 1040;
@zindexModal: 1050; @zindexModal: 1050;
// Sprite icons path // Sprite icons path
// ------------------------- // -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png"; @iconSpritePath: "../img/glyphicons-halflings.png";

2
src/css/less/variables.light.less
View File

@ -54,6 +54,8 @@
@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%); @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%); @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
@modalBackground: @white;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: #EAEAEA; @bodyBackground: #EAEAEA;