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

ux(): update all confirm modals to new design

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-03-04 20:56:53 +01:00
parent ad6837ee47
commit fcd75422d5
14 changed files with 79 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/core/services/alert_srv.js
View File

@ -66,6 +66,7 @@ function (angular, _, coreModule) {
scope.title = payload.title;
scope.text = payload.text;
scope.text2 = payload.text2;
scope.onConfirm = payload.onConfirm;
scope.icon = payload.icon || "fa-check";
scope.yesText = payload.yesText || "Yes";
@ -74,7 +75,7 @@ function (angular, _, coreModule) {
var confirmModal = $modal({
template: 'public/app/partials/confirm_modal.html',
persist: false,
modalClass: 'modal-no-header confirm-modal',
modalClass: 'confirm-modal',
show: false,
scope: scope,
keyboard: false

5
public/app/features/admin/adminListOrgsCtrl.js
View File

@ -20,8 +20,9 @@ function (angular) {
$scope.deleteOrg = function(org) {
$scope.appEvent('confirm-modal', {
title: 'Do you want to delete organization ' + org.name + '?',
text: 'All dashboards for this organization will be removed!',
title: 'Delete',
text: 'Do you want to delete organization ' + org.name + '?',
text2: 'All dashboards for this organization will be removed!',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: function() {

3
public/app/features/admin/adminListUsersCtrl.js
View File

@ -20,7 +20,8 @@ function (angular) {
$scope.deleteUser = function(user) {
$scope.appEvent('confirm-modal', {
title: 'Do you want to delete ' + user.login + '?',
title: 'Delete',
text: 'Do you want to delete ' + user.login + '?',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: function() {

14
public/app/features/dashboard/dashnav/dashnav.ts
View File

@ -108,8 +108,9 @@ export class DashNavCtrl {
err.isHandled = true;
$scope.appEvent('confirm-modal', {
title: 'Someone else has updated this dashboard!',
text: "Would you still like to save this dashboard?",
title: 'Conflict',
text: 'Someone else has updated this dashboard.',
text2: 'Would you still like to save this dashboard?',
yesText: "Save & Overwrite",
icon: "fa-warning",
onConfirm: function() {
@ -122,8 +123,9 @@ export class DashNavCtrl {
err.isHandled = true;
$scope.appEvent('confirm-modal', {
title: 'Another dashboard with the same name exists',
text: "Would you still like to save this dashboard?",
title: 'Conflict',
text: 'Dashboard with the same name exists.',
text2: 'Would you still like to save this dashboard?',
yesText: "Save & Overwrite",
icon: "fa-warning",
onConfirm: function() {
@ -135,7 +137,9 @@ export class DashNavCtrl {
$scope.deleteDashboard = function() {
$scope.appEvent('confirm-modal', {
title: 'Do you want to delete dashboard ' + $scope.dashboard.title + '?',
title: 'Delete dashboard',
text: 'Do you want to delete dashboard?',
text2: $scope.dashboard.title,
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: function() {

3
public/app/features/dashboard/rowCtrl.js
View File

@ -52,7 +52,8 @@ function (angular, _, config) {
}
$scope.appEvent('confirm-modal', {
title: 'Are you sure you want to delete this row?',
title: 'Delete',
text: 'Are you sure you want to delete this row?',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: function() {

2
public/app/features/dashboard/unsavedChangesSrv.js
View File

@ -140,7 +140,7 @@ function(angular, _) {
$rootScope.appEvent('show-modal', {
src: 'public/app/partials/unsaved-changes.html',
modalClass: 'modal-no-header confirm-modal',
modalClass: 'confirm-modal',
scope: modalScope,
});
};

4
public/app/features/datasources/list_ctrl.ts
View File

@ -37,10 +37,10 @@ export class DataSourcesCtrl {
removeDataSource(ds) {
this.$scope.appEvent('confirm-modal', {
title: 'Confirm delete datasource',
title: 'Delete',
text: 'Are you sure you want to delete datasource ' + ds.name + '?',
yesText: "Delete",
icon: "fa-warning",
icon: "fa-trash",
onConfirm: () => {
this.removeDataSourceConfirmed(ds);
}

2
public/app/features/org/org_users_ctrl.ts
View File

@ -38,7 +38,7 @@ export class OrgUsersCtrl {
removeUser(user) {
this.$scope.appEvent('confirm-modal', {
title: 'Confirm delete user',
title: 'Delete',
text: 'Are you sure you want to delete user ' + user.login + '?',
yesText: "Delete",
icon: "fa-warning",

5
public/app/features/panel/panel_ctrl.ts
View File

@ -136,9 +136,10 @@ export class PanelCtrl {
removePanel() {
this.publishAppEvent('confirm-modal', {
title: 'Are you sure you want to remove this panel?',
title: 'Remove Panel',
text: 'Are you sure you want to remove this panel?',
icon: 'fa-trash',
yesText: 'Delete',
yesText: 'Remove',
onConfirm: () => {
this.row.panels = _.without(this.row.panels, this.panel);
}

4
public/app/features/playlist/playlists_ctrl.ts
View File

@ -30,10 +30,10 @@ export class PlaylistsCtrl {
removePlaylist(playlist) {
this.$scope.appEvent('confirm-modal', {
title: 'Confirm delete playlist',
title: 'Delete',
text: 'Are you sure you want to delete playlist ' + playlist.name + '?',
yesText: "Delete",
icon: "fa-warning",
icon: "fa-trash",
onConfirm: () => {
this.removePlaylistConfirmed(playlist);
}

4
public/app/features/snapshot/snapshot_ctrl.ts
View File

@ -27,10 +27,10 @@ export class SnapshotsCtrl {
removeSnapshot(snapshot) {
this.$rootScope.appEvent('confirm-modal', {
title: 'Confirm delete snapshot',
title: 'Delete',
text: 'Are you sure you want to delete snapshot ' + snapshot.name + '?',
yesText: "Delete",
icon: "fa-warning",
icon: "fa-trash",
onConfirm: () => {
this.removeSnapshotConfirmed(snapshot);
}

36
public/app/partials/confirm_modal.html
View File

@ -1,24 +1,30 @@
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa {{icon}}"></i>
<span class="p-l-1">
{{title}}
</span>
</h2>
<a class="modal-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
<div class="confirm-modal-icon">
<i class="fa {{icon}}"></i>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="confirm-modal-title">
{{title}}
</div>
<div class="modal-content text-center">
<div class="modal-tagline">
{{text}}
</div>
<div class="confirm-modal-text">
{{text}}
<div class="confirm-modal-text2" ng-show="text2">
{{text2}}
</div>
</div>
<div class="confirm-modal-buttons">
<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 class="confirm-modal-buttons">
<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>
</div>

31
public/app/partials/unsaved-changes.html
View File

@ -1,21 +1,26 @@
<div class="modal-body">
<a class="modal-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
<div class="confirm-modal-icon">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-exclamation"></i>
<span class="p-l-1">Unsaved changes</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="confirm-modal-title">
Unsaved changes
</div>
<div class="modal-content text-center">
<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 class="confirm-modal-title">
What do you want to do?
</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>
</div>

36
public/sass/components/_modals.scss
View File

@ -83,25 +83,6 @@
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
}
.modal-no-header {
border: 1px solid $tight-form-func-bg;
text-align: center;
h3 {
margin-top: 30px;
}
.modal-close {
float: right;
font-size: 140%;
padding: 10px;
}
.modal-tagline {
font-size: 16px;
}
}
.modal--narrow {
max-width: 500px;
}
@ -116,17 +97,22 @@
padding-bottom: 20px;
}
.confirm-modal-title {
font-size: 18px;
.confirm-modal-text {
font-size: $font-size-h4;
color: $link-color;
margin-bottom: 15px;
margin-bottom: $spacer*2;
padding-top: $spacer;
}
.confirm-modal-text2 {
font-size: $font-size-h5;
padding-top: $spacer;
}
.confirm-modal-buttons {
margin-top: 35px;
margin-bottom: 35px;
margin-bottom: $spacer;
button {
margin-right: 5px
margin-right: $spacer/2;
}
}
}