New: close modal dialogs by clicking outside of modal

10 years ago · 9f52daf78e
parent 9ffdf18935
commit 9f52daf78e
23 changed files with 624 additions and 666 deletions
--- a/src/UI/AddSeries/RootFolders/RootFolderLayoutTemplate.html
+++ b/src/UI/AddSeries/RootFolders/RootFolderLayoutTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Select Folder</h3>
@ -28,5 +27,4 @@
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">close</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Calendar/CalendarFeedViewTemplate.html
+++ b/src/UI/Calendar/CalendarFeedViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>NzbDrone Calendar feed</h3>
@ -26,5 +25,4 @@
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">close</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Episode/EpisodeDetailsLayoutTemplate.html
+++ b/src/UI/Episode/EpisodeDetailsLayoutTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="episode-detail-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@ -32,6 +31,4 @@
            <button class="btn btn-default" data-dismiss="modal">close</button>
        </div>
    </div>
-    </div>
 </div>
-
--- a/src/UI/History/Details/HistoryDetailsLayoutTemplate.html
+++ b/src/UI/History/Details/HistoryDetailsLayoutTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="history-detail-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@ -19,5 +18,4 @@
            <button class="btn" data-dismiss="modal">close</button>
        </div>
    </div>
-    </div>
 </div>
--- a/src/UI/Hotkeys/HotkeysViewTemplate.html
+++ b/src/UI/Hotkeys/HotkeysViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Keyboard Shortcuts</h3>
@ -43,5 +42,4 @@
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">close</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Rename/RenamePreviewLayoutTemplate.html
+++ b/src/UI/Rename/RenamePreviewLayoutTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="rename-preview-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@ -25,5 +24,4 @@
            <button class="btn btn-primary x-organize">Organize</button>
        </div>
    </div>
-    </div>
 </div>
--- a/src/UI/Series/Delete/DeleteSeriesTemplate.html
+++ b/src/UI/Series/Delete/DeleteSeriesTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Delete {{title}}</h3>
@ -44,5 +43,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-danger x-confirm-delete">delete</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Series/Edit/EditSeriesViewTemplate.html
+++ b/src/UI/Series/Edit/EditSeriesViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>{{title}}</h3>
@ -93,5 +92,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-primary x-save">save</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Series/Editor/Organize/OrganizeFilesViewTemplate.html
+++ b/src/UI/Series/Editor/Organize/OrganizeFilesViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Organize of Selected Series</h3>
@ -23,5 +22,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-danger x-confirm-organize">organize</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/DownloadClient/Add/DownloadClientAddCollectionViewTemplate.html
+++ b/src/UI/Settings/DownloadClient/Add/DownloadClientAddCollectionViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Add Download Client</h3>
@ -12,5 +11,4 @@
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">close</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/DownloadClient/Delete/DownloadClientDeleteViewTemplate.html
+++ b/src/UI/Settings/DownloadClient/Delete/DownloadClientDeleteViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Delete Download Client</h3>
@ -11,5 +10,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-danger x-confirm-delete">delete</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/DownloadClient/Edit/DownloadClientEditViewTemplate.html
+++ b/src/UI/Settings/DownloadClient/Edit/DownloadClientEditViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        {{#if id}}
@ -62,5 +61,4 @@
            </ul>
        </div>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Indexers/Add/IndexerAddCollectionViewTemplate.html
+++ b/src/UI/Settings/Indexers/Add/IndexerAddCollectionViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Add Indexer</h3>
@ -12,5 +11,4 @@
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">close</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Indexers/Delete/IndexerDeleteViewTemplate.html
+++ b/src/UI/Settings/Indexers/Delete/IndexerDeleteViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Delete Indexer</h3>
@ -11,5 +10,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-danger x-confirm-delete">delete</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html
+++ b/src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close x-close" aria-hidden="true">&times;</button>
        {{#if id}}
@ -61,5 +60,4 @@
            </ul>
        </div>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Metadata/MetadataEditViewTemplate.html
+++ b/src/UI/Settings/Metadata/MetadataEditViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Edit</h3>
@ -41,5 +40,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-primary x-save">save</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Notifications/Add/NotificationAddCollectionViewTemplate.html
+++ b/src/UI/Settings/Notifications/Add/NotificationAddCollectionViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Add Notification</h3>
@ -12,5 +11,4 @@
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">close</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Notifications/Delete/NotificationDeleteViewTemplate.html
+++ b/src/UI/Settings/Notifications/Delete/NotificationDeleteViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Delete Notification</h3>
@ -11,5 +10,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-danger x-confirm-delete">delete</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html
+++ b/src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close x-cancel" data-dismiss="modal" aria-hidden="true">&times;</button>
        {{#if id}}
@ -110,5 +109,4 @@
            </ul>
        </div>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Profile/DeleteProfileViewTemplate.html
+++ b/src/UI/Settings/Profile/DeleteProfileViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Delete: {{name}}</h3>
@ -11,5 +10,4 @@
        <button class="btn" data-dismiss="modal">cancel</button>
        <button class="btn btn-danger x-confirm-delete">delete</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html
+++ b/src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close x-cancel" aria-hidden="true">&times;</button>
    {{#if id}}
@ -7,7 +6,7 @@
    {{else}}
    <h3>Add</h3>
    {{/if}}
-    </div>
+</div>
    <div class="modal-body">
        <div class="form-horizontal">
            <div id="x-fields"></div>
@ -33,5 +32,4 @@
        <button class="btn x-cancel">cancel</button>
        <button class="btn btn-primary x-save">save</button>
    </div>
-    </div>
 </div>
--- a/src/UI/Shared/Modal/ModalRegion.js
+++ b/src/UI/Shared/Modal/ModalRegion.js
@ -5,7 +5,7 @@ define(
        'backbone',
        'marionette',
        'bootstrap'
-    ], function ($,Backbone, Marionette) {
+    ], function ($, Backbone, Marionette) {
        var region = Marionette.Region.extend({
            el: '#modal-region',

@ -27,9 +27,12 @@ define(
                //https://github.com/twitter/bootstrap/issues/4663
                this.$el.attr('tabindex', '-1');
                this.$el.modal({
-                    'show'    : true,
-                    'keyboard': true,
-                    'backdrop': 'static'});
+                    show     : true,
+                    keyboard : true,
+                    backdrop : true
+                });
+
+                this.currentView.$el.addClass('modal-dialog');
            },

            closeModal: function () {
--- a/src/UI/System/Logs/Table/Details/LogDetailsViewTemplate.html
+++ b/src/UI/System/Logs/Table/Details/LogDetailsViewTemplate.html
@ -1,5 +1,4 @@
-<div class="modal-dialog">
-    <div class="modal-content">
+<div class="modal-content">
    <div class="log-details-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@ -21,5 +20,4 @@
            <button class="btn" data-dismiss="modal">close</button>
        </div>
    </div>
-    </div>
 </div>