IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Worked on styling for confirm dialogs, #1554

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-03-05 20:04:54 +01:00
parent 259d330822
commit f5f4689e7c
8 changed files with 36 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/features/admin/adminUsersCtrl.js
View File

@ -20,8 +20,7 @@ function (angular) {
$scope.deleteUser = function(user) {
$scope.appEvent('confirm-modal', {
title: 'Delete user',
text: 'Are you sure you want to delete user: ' + user.login,
title: 'Do you want to delete ' + user.login + '?',
onConfirm: function() {
backendSrv.delete('/api/admin/users/' + user.id).then(function() {
$scope.getUsers();

9
src/app/features/dashboard/dashboardNavCtrl.js
View File

@ -78,7 +78,8 @@ function (angular, _, moment) {
$scope.appEvent('confirm-modal', {
title: 'Someone else has updated this dashboard!',
text: "Do you STILL want to save?",
text: "Would you still like to save this dashboard?",
yesText: "Save & Overwrite",
icon: "fa-warning",
onConfirm: function() {
$scope.saveDashboard({overwrite: true});
@ -91,7 +92,8 @@ function (angular, _, moment) {
$scope.appEvent('confirm-modal', {
title: 'Another dashboard with the same name exists',
text: "Do you STILL want to save and ovewrite it?",
text: "Would you still like to save this dashboard?",
yesText: "Save & Overwrite",
icon: "fa-warning",
onConfirm: function() {
$scope.saveDashboard({overwrite: true});
@ -102,8 +104,7 @@ function (angular, _, moment) {
$scope.deleteDashboard = function() {
$scope.appEvent('confirm-modal', {
title: 'Delete dashboard',
text: 'Do you want to delete dashboard ' + $scope.dashboard.title + '?',
title: 'Do you want to delete dashboard ' + $scope.dashboard.title + '?',
onConfirm: function() {
$scope.deleteDashboardConfirmed();
}

6
src/app/features/dashboard/rowCtrl.js
View File

@ -49,8 +49,7 @@ function (angular, app, _, config) {
$scope.delete_row = function() {
$scope.appEvent('confirm-modal', {
title: 'Delete row',
text: 'Are you sure you want to delete this row?',
title: 'Are you sure you want to delete this row?',
onConfirm: function() {
$scope.dashboard.rows = _.without($scope.dashboard.rows, $scope.row);
}
@ -82,8 +81,7 @@ function (angular, app, _, config) {
$scope.remove_panel_from_row = function(row, panel) {
$scope.appEvent('confirm-modal', {
title: 'Remove panel',
text: 'Are you sure you want to remove this panel?',
title: 'Are you sure you want to remove this panel?',
onConfirm: function() {
row.panels = _.without(row.panels, panel);
}

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

@ -17,29 +17,9 @@
</div>
<div class="confirm-modal-buttons">
<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">Save &amp; Overwrite</button>
<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button>
<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">{{yesText}}</button>
</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>

32
src/app/partials/unsaved-changes.html
View File

@ -1,20 +1,22 @@
<div class="modal-body gf-box gf-box-no-margin">
<div class="gf-box-header text-center">
<span class="gf-box-title">
<i class="fa fa-exclamation"></i>
Unsaved changes
</span>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
<div class="modal-body">
<a class="modal-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
<div class="confirm-modal-icon">
<i class="fa fa-exclamation"></i>
</div>
<div class="gf-box-body" style="min-height: 0;">
<div class="row-fluid text-center">
<button type="button" class="btn btn-success span4" ng-click="save();dismiss();">Save</button>
<button type="button" class="btn btn-danger span4" ng-click="ignore();dismiss();">Ignore</button>
<button type="button" class="btn btn-inverse span4" ng-click="dismiss()">Cancel</button>
</div>
<div class="confirm-modal-title">
Unsaved changes
</div>
<div class="confirm-modal-buttons">
<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">Ignore</button>
<button type="button" class="btn btn-success" ng-click="save();dismiss();">Save</button>
</div>
</div>

2
src/app/services/alertSrv.js
View File

@ -65,6 +65,8 @@ function (angular, _) {
scope.text = payload.text;
scope.onConfirm = payload.onConfirm;
scope.icon = payload.icon || "fa-check";
scope.yesText = payload.yesText || "Yes";
scope.noText = payload.noText || "Cancel";
var confirmModal = $modal({
template: './app/partials/confirm_modal.html',

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

@ -259,7 +259,7 @@
.confirm-modal {
border: 1px solid @grafanaTargetFuncBackground;
max-width: 500px;
background-color: @modalBackground;
background-color: @grafanaPanelBackground;
text-align: center;
.modal-close {
@ -267,22 +267,26 @@
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-top: 35px;
margin-bottom: 35px;
button {
margin-right: 5px

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

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