Skip to content

N
nexpie-grafana-theme
Commit fcd75422 by Torkel Ödegaard
Options

ux(): update all confirm modals to new design

parent ad6837ee
Showing with 79 additions and 73 deletions
public/app/core/services/alert_srv.js
...@@ -66,6 +66,7 @@ function (angular, _, coreModule) { ...@@ -66,6 +66,7 @@ function (angular, _, coreModule) {
scope.title = payload.title; scope.title = payload.title;
scope.text = payload.text; scope.text = payload.text;
scope.text2 = payload.text2;
scope.onConfirm = payload.onConfirm; scope.onConfirm = payload.onConfirm;
scope.icon = payload.icon || "fa-check"; scope.icon = payload.icon || "fa-check";
scope.yesText = payload.yesText || "Yes"; scope.yesText = payload.yesText || "Yes";
...@@ -74,7 +75,7 @@ function (angular, _, coreModule) { ...@@ -74,7 +75,7 @@ function (angular, _, coreModule) {
var confirmModal = $modal({ var confirmModal = $modal({
template: 'public/app/partials/confirm_modal.html', template: 'public/app/partials/confirm_modal.html',
persist: false, persist: false,
modalClass: 'modal-no-header confirm-modal', modalClass: 'confirm-modal',
show: false, show: false,
scope: scope, scope: scope,
keyboard: false keyboard: false
......
public/app/features/admin/adminListOrgsCtrl.js
...@@ -20,8 +20,9 @@ function (angular) { ...@@ -20,8 +20,9 @@ function (angular) {
$scope.deleteOrg = function(org) { $scope.deleteOrg = function(org) {
$scope.appEvent('confirm-modal', { $scope.appEvent('confirm-modal', {
title: 'Do you want to delete organization ' + org.name + '?', title: 'Delete',
text: 'All dashboards for this organization will be removed!', text: 'Do you want to delete organization ' + org.name + '?',
text2: 'All dashboards for this organization will be removed!',
icon: 'fa-trash', icon: 'fa-trash',
yesText: 'Delete', yesText: 'Delete',
onConfirm: function() { onConfirm: function() {
......
public/app/features/admin/adminListUsersCtrl.js
...@@ -20,7 +20,8 @@ function (angular) { ...@@ -20,7 +20,8 @@ function (angular) {
$scope.deleteUser = function(user) { $scope.deleteUser = function(user) {
$scope.appEvent('confirm-modal', { $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', icon: 'fa-trash',
yesText: 'Delete', yesText: 'Delete',
onConfirm: function() { onConfirm: function() {
......
public/app/features/dashboard/dashnav/dashnav.ts
...@@ -108,8 +108,9 @@ export class DashNavCtrl { ...@@ -108,8 +108,9 @@ export class DashNavCtrl {
err.isHandled = true; err.isHandled = true;
$scope.appEvent('confirm-modal', { $scope.appEvent('confirm-modal', {
title: 'Someone else has updated this dashboard!', title: 'Conflict',
text: "Would you still like to save this dashboard?", text: 'Someone else has updated this dashboard.',
text2: 'Would you still like to save this dashboard?',
yesText: "Save & Overwrite", yesText: "Save & Overwrite",
icon: "fa-warning", icon: "fa-warning",
onConfirm: function() { onConfirm: function() {
...@@ -122,8 +123,9 @@ export class DashNavCtrl { ...@@ -122,8 +123,9 @@ export class DashNavCtrl {
err.isHandled = true; err.isHandled = true;
$scope.appEvent('confirm-modal', { $scope.appEvent('confirm-modal', {
title: 'Another dashboard with the same name exists', title: 'Conflict',
text: "Would you still like to save this dashboard?", text: 'Dashboard with the same name exists.',
text2: 'Would you still like to save this dashboard?',
yesText: "Save & Overwrite", yesText: "Save & Overwrite",
icon: "fa-warning", icon: "fa-warning",
onConfirm: function() { onConfirm: function() {
...@@ -135,7 +137,9 @@ export class DashNavCtrl { ...@@ -135,7 +137,9 @@ export class DashNavCtrl {
$scope.deleteDashboard = function() { $scope.deleteDashboard = function() {
$scope.appEvent('confirm-modal', { $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', icon: 'fa-trash',
yesText: 'Delete', yesText: 'Delete',
onConfirm: function() { onConfirm: function() {
......
public/app/features/dashboard/rowCtrl.js
...@@ -52,7 +52,8 @@ function (angular, _, config) { ...@@ -52,7 +52,8 @@ function (angular, _, config) {
} }
$scope.appEvent('confirm-modal', { $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', icon: 'fa-trash',
yesText: 'Delete', yesText: 'Delete',
onConfirm: function() { onConfirm: function() {
......
public/app/features/dashboard/unsavedChangesSrv.js
...@@ -140,7 +140,7 @@ function(angular, _) { ...@@ -140,7 +140,7 @@ function(angular, _) {
$rootScope.appEvent('show-modal', { $rootScope.appEvent('show-modal', {
src: 'public/app/partials/unsaved-changes.html', src: 'public/app/partials/unsaved-changes.html',
modalClass: 'modal-no-header confirm-modal', modalClass: 'confirm-modal',
scope: modalScope, scope: modalScope,
}); });
}; };
......
public/app/features/datasources/list_ctrl.ts
...@@ -37,10 +37,10 @@ export class DataSourcesCtrl { ...@@ -37,10 +37,10 @@ export class DataSourcesCtrl {
removeDataSource(ds) { removeDataSource(ds) {
this.$scope.appEvent('confirm-modal', { this.$scope.appEvent('confirm-modal', {
title: 'Confirm delete datasource', title: 'Delete',
text: 'Are you sure you want to delete datasource ' + ds.name + '?', text: 'Are you sure you want to delete datasource ' + ds.name + '?',
yesText: "Delete", yesText: "Delete",
icon: "fa-warning", icon: "fa-trash",
onConfirm: () => { onConfirm: () => {
this.removeDataSourceConfirmed(ds); this.removeDataSourceConfirmed(ds);
} }
......
public/app/features/org/org_users_ctrl.ts
...@@ -38,7 +38,7 @@ export class OrgUsersCtrl { ...@@ -38,7 +38,7 @@ export class OrgUsersCtrl {
removeUser(user) { removeUser(user) {
this.$scope.appEvent('confirm-modal', { this.$scope.appEvent('confirm-modal', {
title: 'Confirm delete user', title: 'Delete',
text: 'Are you sure you want to delete user ' + user.login + '?', text: 'Are you sure you want to delete user ' + user.login + '?',
yesText: "Delete", yesText: "Delete",
icon: "fa-warning", icon: "fa-warning",
......
public/app/features/panel/panel_ctrl.ts
...@@ -136,9 +136,10 @@ export class PanelCtrl { ...@@ -136,9 +136,10 @@ export class PanelCtrl {
removePanel() { removePanel() {
this.publishAppEvent('confirm-modal', { 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', icon: 'fa-trash',
yesText: 'Delete', yesText: 'Remove',
onConfirm: () => { onConfirm: () => {
this.row.panels = _.without(this.row.panels, this.panel); this.row.panels = _.without(this.row.panels, this.panel);
} }
......
public/app/features/playlist/playlists_ctrl.ts
...@@ -30,10 +30,10 @@ export class PlaylistsCtrl { ...@@ -30,10 +30,10 @@ export class PlaylistsCtrl {
removePlaylist(playlist) { removePlaylist(playlist) {
this.$scope.appEvent('confirm-modal', { this.$scope.appEvent('confirm-modal', {
title: 'Confirm delete playlist', title: 'Delete',
text: 'Are you sure you want to delete playlist ' + playlist.name + '?', text: 'Are you sure you want to delete playlist ' + playlist.name + '?',
yesText: "Delete", yesText: "Delete",
icon: "fa-warning", icon: "fa-trash",
onConfirm: () => { onConfirm: () => {
this.removePlaylistConfirmed(playlist); this.removePlaylistConfirmed(playlist);
} }
......
public/app/features/snapshot/snapshot_ctrl.ts
...@@ -27,10 +27,10 @@ export class SnapshotsCtrl { ...@@ -27,10 +27,10 @@ export class SnapshotsCtrl {
removeSnapshot(snapshot) { removeSnapshot(snapshot) {
this.$rootScope.appEvent('confirm-modal', { this.$rootScope.appEvent('confirm-modal', {
title: 'Confirm delete snapshot', title: 'Delete',
text: 'Are you sure you want to delete snapshot ' + snapshot.name + '?', text: 'Are you sure you want to delete snapshot ' + snapshot.name + '?',
yesText: "Delete", yesText: "Delete",
icon: "fa-warning", icon: "fa-trash",
onConfirm: () => { onConfirm: () => {
this.removeSnapshotConfirmed(snapshot); this.removeSnapshotConfirmed(snapshot);
} }
......
public/app/partials/confirm_modal.html
<div class="modal-body"> <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();"> <a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
<div class="confirm-modal-icon">
<i class="fa {{icon}}"></i>
</div> </div>
<div class="confirm-modal-title"> <div class="modal-content text-center">
{{title}}
</div>
<div class="modal-tagline"> <div class="confirm-modal-text">
{{text}} {{text}}
</div> <div class="confirm-modal-text2" ng-show="text2">
{{text2}}
</div>
</div>
<div class="confirm-modal-buttons"> <div class="confirm-modal-buttons">
<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</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> <button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">{{yesText}}</button>
</div>
</div> </div>
</div> </div>
......
public/app/partials/unsaved-changes.html
<div class="modal-body"> <div class="modal-body">
<div class="modal-header">
<a class="modal-close" ng-click="dismiss();"> <h2 class="modal-header-title">
<i class="fa fa-remove"></i>
</a>
<div class="confirm-modal-icon">
<i class="fa fa-exclamation"></i> <i class="fa fa-exclamation"></i>
</div> <span class="p-l-1">Unsaved changes</span>
</h2>
<div class="confirm-modal-title"> <a class="modal-header-close" ng-click="dismiss();">
Unsaved changes <i class="fa fa-remove"></i>
</a>
</div> </div>
<div class="confirm-modal-buttons"> <div class="modal-content text-center">
<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> <div class="confirm-modal-title">
<button type="button" class="btn btn-success" ng-click="save();dismiss();">Save</button> 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>
</div> </div>
......
public/sass/components/_modals.scss
...@@ -83,25 +83,6 @@ ...@@ -83,25 +83,6 @@
@include clearfix(); // clear it in case folks use .pull-* classes on buttons @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 { .modal--narrow {
max-width: 500px; max-width: 500px;
} }
...@@ -116,17 +97,22 @@ ...@@ -116,17 +97,22 @@
padding-bottom: 20px; padding-bottom: 20px;
} }
.confirm-modal-title { .confirm-modal-text {
font-size: 18px; font-size: $font-size-h4;
color: $link-color; 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 { .confirm-modal-buttons {
margin-top: 35px; margin-bottom: $spacer;
margin-bottom: 35px;
button { button {
margin-right: 5px margin-right: $spacer/2;
} }
} }
} }
......
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