mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Close modal with esc (#10929)
* added var to check if modal is open and an if for escape fullview * moved showconfirmmodal to utils, showconfirmmodal now uses showmodal, esc works in textinput * made esc global
This commit is contained in:
Patrick O'Carroll
Torkel Ödegaard
parent
2c5f3fbc5b
commit
244ae555d9
@ -150,6 +150,7 @@
|
||||
"mobx-state-tree": "^1.3.1",
|
||||
"moment": "^2.18.1",
|
||||
"mousetrap": "^1.6.0",
|
||||
"mousetrap-global-bind": "^1.1.0",
|
||||
"perfect-scrollbar": "^1.2.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^16.2.0",
|
||||
|
||||
@ -7,7 +7,7 @@ export class AlertSrv {
|
||||
list: any[];
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $timeout, private $rootScope, private $modal) {
|
||||
constructor(private $timeout, private $rootScope) {
|
||||
this.list = [];
|
||||
}
|
||||
|
||||
@ -39,7 +39,6 @@ export class AlertSrv {
|
||||
appEvents.on('alert-warning', options => this.set(options[0], options[1], 'warning', 5000));
|
||||
appEvents.on('alert-success', options => this.set(options[0], options[1], 'success', 3000));
|
||||
appEvents.on('alert-error', options => this.set(options[0], options[1], 'error', 7000));
|
||||
appEvents.on('confirm-modal', this.showConfirmModal.bind(this));
|
||||
}
|
||||
|
||||
getIconForSeverity(severity) {
|
||||
@ -96,45 +95,6 @@ export class AlertSrv {
|
||||
clearAll() {
|
||||
this.list = [];
|
||||
}
|
||||
|
||||
showConfirmModal(payload) {
|
||||
var scope = this.$rootScope.$new();
|
||||
|
||||
scope.onConfirm = function() {
|
||||
payload.onConfirm();
|
||||
scope.dismiss();
|
||||
};
|
||||
|
||||
scope.updateConfirmText = function(value) {
|
||||
scope.confirmTextValid = payload.confirmText.toLowerCase() === value.toLowerCase();
|
||||
};
|
||||
|
||||
scope.title = payload.title;
|
||||
scope.text = payload.text;
|
||||
scope.text2 = payload.text2;
|
||||
scope.confirmText = payload.confirmText;
|
||||
|
||||
scope.onConfirm = payload.onConfirm;
|
||||
scope.onAltAction = payload.onAltAction;
|
||||
scope.altActionText = payload.altActionText;
|
||||
scope.icon = payload.icon || 'fa-check';
|
||||
scope.yesText = payload.yesText || 'Yes';
|
||||
scope.noText = payload.noText || 'Cancel';
|
||||
scope.confirmTextValid = scope.confirmText ? false : true;
|
||||
|
||||
var confirmModal = this.$modal({
|
||||
template: 'public/app/partials/confirm_modal.html',
|
||||
persist: false,
|
||||
modalClass: 'confirm-modal',
|
||||
show: false,
|
||||
scope: scope,
|
||||
keyboard: false,
|
||||
});
|
||||
|
||||
confirmModal.then(function(modalEl) {
|
||||
modalEl.modal('show');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
coreModule.service('alertSrv', AlertSrv);
|
||||
|
||||
@ -5,9 +5,11 @@ import coreModule from 'app/core/core_module';
|
||||
import appEvents from 'app/core/app_events';
|
||||
|
||||
import Mousetrap from 'mousetrap';
|
||||
import 'mousetrap-global-bind';
|
||||
|
||||
export class KeybindingSrv {
|
||||
helpModal: boolean;
|
||||
modalOpen = false;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $rootScope, private $location) {
|
||||
@ -19,6 +21,7 @@ export class KeybindingSrv {
|
||||
});
|
||||
|
||||
this.setupGlobal();
|
||||
appEvents.on('show-modal', () => (this.modalOpen = true));
|
||||
}
|
||||
|
||||
setupGlobal() {
|
||||
@ -30,6 +33,7 @@ export class KeybindingSrv {
|
||||
this.bind('s o', this.openSearch);
|
||||
this.bind('s t', this.openSearchTags);
|
||||
this.bind('f', this.openSearch);
|
||||
this.bindGlobal('esc', this.exit);
|
||||
}
|
||||
|
||||
openSearchStarred() {
|
||||
@ -60,6 +64,28 @@ export class KeybindingSrv {
|
||||
appEvents.emit('show-modal', { templateHtml: '<help-modal></help-modal>' });
|
||||
}
|
||||
|
||||
exit() {
|
||||
var popups = $('.popover.in');
|
||||
if (popups.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
appEvents.emit('hide-modal');
|
||||
|
||||
if (!this.modalOpen) {
|
||||
appEvents.emit('panel-change-view', { fullscreen: false, edit: false });
|
||||
} else {
|
||||
this.modalOpen = false;
|
||||
}
|
||||
|
||||
// close settings view
|
||||
var search = this.$location.search();
|
||||
if (search.editview) {
|
||||
delete search.editview;
|
||||
this.$location.search(search);
|
||||
}
|
||||
}
|
||||
|
||||
bind(keyArg, fn) {
|
||||
Mousetrap.bind(
|
||||
keyArg,
|
||||
@ -73,6 +99,19 @@ export class KeybindingSrv {
|
||||
);
|
||||
}
|
||||
|
||||
bindGlobal(keyArg, fn) {
|
||||
Mousetrap.bindGlobal(
|
||||
keyArg,
|
||||
evt => {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
evt.returnValue = false;
|
||||
return this.$rootScope.$apply(fn.bind(this));
|
||||
},
|
||||
'keydown'
|
||||
);
|
||||
}
|
||||
|
||||
showDashEditView() {
|
||||
var search = _.extend(this.$location.search(), { editview: 'settings' });
|
||||
this.$location.search(search);
|
||||
@ -204,23 +243,6 @@ export class KeybindingSrv {
|
||||
this.bind('d v', () => {
|
||||
appEvents.emit('toggle-view-mode');
|
||||
});
|
||||
|
||||
this.bind('esc', () => {
|
||||
var popups = $('.popover.in');
|
||||
if (popups.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
scope.appEvent('hide-modal');
|
||||
scope.appEvent('panel-change-view', { fullscreen: false, edit: false });
|
||||
|
||||
// close settings view
|
||||
var search = this.$location.search();
|
||||
if (search.editview) {
|
||||
delete search.editview;
|
||||
this.$location.search(search);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@ export class UtilSrv {
|
||||
init() {
|
||||
appEvents.on('show-modal', this.showModal.bind(this), this.$rootScope);
|
||||
appEvents.on('hide-modal', this.hideModal.bind(this), this.$rootScope);
|
||||
appEvents.on('confirm-modal', this.showConfirmModal.bind(this), this.$rootScope);
|
||||
}
|
||||
|
||||
hideModal() {
|
||||
@ -47,6 +48,38 @@ export class UtilSrv {
|
||||
modalEl.modal('show');
|
||||
});
|
||||
}
|
||||
|
||||
showConfirmModal(payload) {
|
||||
var scope = this.$rootScope.$new();
|
||||
|
||||
scope.onConfirm = function() {
|
||||
payload.onConfirm();
|
||||
scope.dismiss();
|
||||
};
|
||||
|
||||
scope.updateConfirmText = function(value) {
|
||||
scope.confirmTextValid = payload.confirmText.toLowerCase() === value.toLowerCase();
|
||||
};
|
||||
|
||||
scope.title = payload.title;
|
||||
scope.text = payload.text;
|
||||
scope.text2 = payload.text2;
|
||||
scope.confirmText = payload.confirmText;
|
||||
|
||||
scope.onConfirm = payload.onConfirm;
|
||||
scope.onAltAction = payload.onAltAction;
|
||||
scope.altActionText = payload.altActionText;
|
||||
scope.icon = payload.icon || 'fa-check';
|
||||
scope.yesText = payload.yesText || 'Yes';
|
||||
scope.noText = payload.noText || 'Cancel';
|
||||
scope.confirmTextValid = scope.confirmText ? false : true;
|
||||
|
||||
appEvents.emit('show-modal', {
|
||||
src: 'public/app/partials/confirm_modal.html',
|
||||
scope: scope,
|
||||
modalClass: 'confirm-modal',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
coreModule.service('utilSrv', UtilSrv);
|
||||
|
||||
82
yarn.lock
82
yarn.lock
@ -224,14 +224,6 @@
|
||||
version "16.0.25"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.25.tgz#bf696b83fe480c5e0eff4335ee39ebc95884a1ed"
|
||||
|
||||
"@types/strip-bom@^3.0.0":
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
|
||||
|
||||
"@types/strip-json-comments@0.0.30":
|
||||
version "0.0.30"
|
||||
resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
|
||||
|
||||
JSONStream@~1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.1.tgz#707f761e01dae9e16f1bcf93703b78c70966579a"
|
||||
@ -1641,14 +1633,6 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
|
||||
escape-string-regexp "^1.0.5"
|
||||
supports-color "^4.0.0"
|
||||
|
||||
chalk@^2.3.1:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
|
||||
dependencies:
|
||||
ansi-styles "^3.2.0"
|
||||
escape-string-regexp "^1.0.5"
|
||||
supports-color "^5.2.0"
|
||||
|
||||
chalk@~0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
|
||||
@ -2799,7 +2783,7 @@ diff@^2.0.2:
|
||||
version "2.2.3"
|
||||
resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
|
||||
|
||||
diff@^3.1.0, diff@^3.2.0:
|
||||
diff@^3.2.0:
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
|
||||
|
||||
@ -4414,10 +4398,6 @@ has-flag@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
|
||||
|
||||
has-flag@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
|
||||
|
||||
has-symbols@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
|
||||
@ -4546,12 +4526,6 @@ home-or-tmp@^2.0.0:
|
||||
os-homedir "^1.0.0"
|
||||
os-tmpdir "^1.0.1"
|
||||
|
||||
homedir-polyfill@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
|
||||
dependencies:
|
||||
parse-passwd "^1.0.0"
|
||||
|
||||
hooker@^0.2.3, hooker@~0.2.3:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/hooker/-/hooker-0.2.3.tgz#b834f723cc4a242aa65963459df6d984c5d3d959"
|
||||
@ -6250,10 +6224,6 @@ make-dir@^1.0.0:
|
||||
dependencies:
|
||||
pify "^3.0.0"
|
||||
|
||||
make-error@^1.1.1:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.3.tgz#a97ae14ffd98b05f543e83ddc395e1b2b6e4cc6a"
|
||||
|
||||
make-fetch-happen@^2.4.13, make-fetch-happen@^2.5.0:
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-2.6.0.tgz#8474aa52198f6b1ae4f3094c04e8370d35ea8a38"
|
||||
@ -6555,6 +6525,10 @@ moment@^2.18.1:
|
||||
version "2.19.2"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.2.tgz#8a7f774c95a64550b4c7ebd496683908f9419dbe"
|
||||
|
||||
mousetrap-global-bind@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/mousetrap-global-bind/-/mousetrap-global-bind-1.1.0.tgz#cd7de9222bd0646fa2e010d54c84a74c26a88edd"
|
||||
|
||||
mousetrap@^1.6.0:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
|
||||
@ -7414,10 +7388,6 @@ parse-json@^3.0.0:
|
||||
dependencies:
|
||||
error-ex "^1.3.1"
|
||||
|
||||
parse-passwd@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
|
||||
|
||||
parse5@^3.0.1, parse5@^3.0.2:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
|
||||
@ -9648,7 +9618,7 @@ strip-json-comments@1.0.x, strip-json-comments@~1.0.1, strip-json-comments@~1.0.
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
|
||||
|
||||
strip-json-comments@^2.0.0, strip-json-comments@~2.0.1:
|
||||
strip-json-comments@~2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||
|
||||
@ -9680,12 +9650,6 @@ supports-color@^4.0.0, supports-color@^4.2.1, supports-color@^4.4.0:
|
||||
dependencies:
|
||||
has-flag "^2.0.0"
|
||||
|
||||
supports-color@^5.2.0:
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.2.0.tgz#b0d5333b1184dd3666cbe5aa0b45c5ac7ac17a4a"
|
||||
dependencies:
|
||||
has-flag "^3.0.0"
|
||||
|
||||
svgo@^0.7.0:
|
||||
version "0.7.2"
|
||||
resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
|
||||
@ -9994,30 +9958,6 @@ ts-loader@^3.2.0:
|
||||
loader-utils "^1.0.2"
|
||||
semver "^5.0.1"
|
||||
|
||||
ts-node@^4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-4.1.0.tgz#36d9529c7b90bb993306c408cd07f7743de20712"
|
||||
dependencies:
|
||||
arrify "^1.0.0"
|
||||
chalk "^2.3.0"
|
||||
diff "^3.1.0"
|
||||
make-error "^1.1.1"
|
||||
minimist "^1.2.0"
|
||||
mkdirp "^0.5.1"
|
||||
source-map-support "^0.5.0"
|
||||
tsconfig "^7.0.0"
|
||||
v8flags "^3.0.0"
|
||||
yn "^2.0.0"
|
||||
|
||||
tsconfig@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-7.0.0.tgz#84538875a4dc216e5c4a5432b3a4dec3d54e91b7"
|
||||
dependencies:
|
||||
"@types/strip-bom" "^3.0.0"
|
||||
"@types/strip-json-comments" "0.0.30"
|
||||
strip-bom "^3.0.0"
|
||||
strip-json-comments "^2.0.0"
|
||||
|
||||
tslib@^1.7.1:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.0.tgz#dc604ebad64bcbf696d613da6c954aa0e7ea1eb6"
|
||||
@ -10379,12 +10319,6 @@ uuid@^3.0.0, uuid@^3.1.0, uuid@~3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
|
||||
|
||||
v8flags@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.0.1.tgz#dce8fc379c17d9f2c9e9ed78d89ce00052b1b76b"
|
||||
dependencies:
|
||||
homedir-polyfill "^1.0.1"
|
||||
|
||||
validate-npm-package-license@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
|
||||
@ -10849,10 +10783,6 @@ yeast@0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
|
||||
yn@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
|
||||
|
||||
zip-stream@^1.1.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user