fix bootstrap dialogs

2013-11-28 09:40:50 +01:00
parent b8f0af5b2e
commit 8f6aa0896b
10 changed files with 104 additions and 127 deletions
--- a/src/main/resources/i18n/en.properties
+++ b/src/main/resources/i18n/en.properties
@@ -87,6 +87,8 @@ details.queued_for_refresh=Queued for refresh
 details.feed_url=Feed URL
 details.generate_api_key_first=Generate an API key in your profile first.
 details.unsubscribe=Unsubscribe
+details.unsubscribe_confirmation=Are you sure you want to unsubscribe from this feed?
+details.delete_category_confirmation=Are you sure you want to delete this category?
 details.category_details=Category details
 details.tag_details=Tag details
 details.parent_category=Parent category
@@ -103,6 +105,7 @@ profile.generate_new_api_key=Generate new API key
 profile.generate_new_api_key_info=Changing password will generate a new API key
 profile.opml_export=OPML export
 profile.delete_account=Delete account
+profile.delete_account_confirmation=Delete your acount? There's no turning back!

 about.rest_api=REST API
 about.keyboard_shortcuts=Keyboard shortcuts
--- a/src/main/webapp/js/controllers.js
+++ b/src/main/webapp/js/controllers.js
@@ -268,8 +268,8 @@ module.controller('CategoryTreeCtrl', ['$scope', '$timeout', '$stateParams', '$w
 			});
 		}]);

-module.controller('FeedDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedService', 'CategoryService', 'ProfileService', '$dialog',
-		function($scope, $state, $stateParams, FeedService, CategoryService, ProfileService, $dialog) {
+module.controller('FeedDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedService', 'CategoryService', 'ProfileService',
+		function($scope, $state, $stateParams, FeedService, CategoryService, ProfileService) {

 			$scope.CategoryService = CategoryService;
 			$scope.user = ProfileService.get();
@@ -290,30 +290,15 @@ module.controller('FeedDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedS

 			$scope.unsubscribe = function() {
 				var sub = $scope.sub;
-				var title = 'Unsubscribe';
-				var msg = 'Unsubscribe from ' + sub.name + '?';
-				var btns = [{
-					result : 'cancel',
-					label : 'Cancel'
-				}, {
-					result : 'ok',
-					label : 'OK',
-					cssClass : 'btn-primary'
-				}];
-
-				$dialog.messageBox(title, msg, btns).open().then(function(result) {
-					if (result == 'ok') {
-						var data = {
-							id : sub.id
-						};
-						FeedService.unsubscribe(data, function() {
-							CategoryService.init();
-						});
-						$state.transitionTo('feeds.view', {
-							_id : 'all',
-							_type : 'category'
-						});
-					}
+				var data = {
+					id : sub.id
+				};
+				FeedService.unsubscribe(data, function() {
+					CategoryService.init();
+				});
+				$state.transitionTo('feeds.view', {
+					_id : 'all',
+					_type : 'category'
 				});
 			};

@@ -335,7 +320,7 @@ module.controller('FeedDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedS
 		}]);

 module.controller('CategoryDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedService', 'CategoryService', 'ProfileService',
-		'$dialog', function($scope, $state, $stateParams, FeedService, CategoryService, ProfileService, $dialog) {
+		function($scope, $state, $stateParams, FeedService, CategoryService, ProfileService) {
 			$scope.CategoryService = CategoryService;
 			$scope.user = ProfileService.get();

@@ -382,29 +367,14 @@ module.controller('CategoryDetailsCtrl', ['$scope', '$state', '$stateParams', 'F

 			$scope.deleteCategory = function() {
 				var category = $scope.category;
-				var title = 'Delete category';
-				var msg = 'Delete category ' + category.name + ' ?';
-				var btns = [{
-					result : 'cancel',
-					label : 'Cancel'
-				}, {
-					result : 'ok',
-					label : 'OK',
-					cssClass : 'btn-primary'
-				}];
-
-				$dialog.messageBox(title, msg, btns).open().then(function(result) {
-					if (result == 'ok') {
-						CategoryService.remove({
-							id : category.id
-						}, function() {
-							CategoryService.init();
-						});
-						$state.transitionTo('feeds.view', {
-							_id : 'all',
-							_type : 'category'
-						});
-					}
+				CategoryService.remove({
+					id : category.id
+				}, function() {
+					CategoryService.init();
+				});
+				$state.transitionTo('feeds.view', {
+					_id : 'all',
+					_type : 'category'
 				});
 			};

@@ -425,8 +395,8 @@ module.controller('CategoryDetailsCtrl', ['$scope', '$state', '$stateParams', 'F
 			};
 		}]);

-module.controller('TagDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedService', 'CategoryService', 'ProfileService', '$dialog',
-		function($scope, $state, $stateParams, FeedService, CategoryService, ProfileService, $dialog) {
+module.controller('TagDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedService', 'CategoryService', 'ProfileService',
+		function($scope, $state, $stateParams, FeedService, CategoryService, ProfileService) {
 			$scope.CategoryService = CategoryService;
 			$scope.user = ProfileService.get();

@@ -1334,8 +1304,8 @@ module.controller('ManageUsersCtrl', ['$scope', '$state', '$location', 'AdminUse
 			};
 		}]);

-module.controller('ManageUserCtrl', ['$scope', '$state', '$stateParams', '$dialog', 'AdminUsersService',
-		function($scope, $state, $stateParams, $dialog, AdminUsersService) {
+module.controller('ManageUserCtrl', ['$scope', '$state', '$stateParams', 'AdminUsersService',
+		function($scope, $state, $stateParams, AdminUsersService) {
 			$scope.user = $stateParams._id ? AdminUsersService.get({
 				id : $stateParams._id
 			}) : {
@@ -1362,26 +1332,11 @@ module.controller('ManageUserCtrl', ['$scope', '$state', '$stateParams', '$dialo
 				}, alertFunction);
 			};
 			$scope.remove = function() {
-				var title = 'Delete user';
-				var msg = 'Delete user ' + $scope.user.name + ' ?';
-				var btns = [{
-					result : 'cancel',
-					label : 'Cancel'
-				}, {
-					result : 'ok',
-					label : 'OK',
-					cssClass : 'btn-primary'
-				}];
-
-				$dialog.messageBox(title, msg, btns).open().then(function(result) {
-					if (result == 'ok') {
-						AdminUsersService.remove({
-							id : $scope.user.id
-						}, function() {
-							$state.transitionTo('admin.userlist');
-						}, alertFunction);
-					}
-				});
+				AdminUsersService.remove({
+					id : $scope.user.id
+				}, function() {
+					$state.transitionTo('admin.userlist');
+				}, alertFunction);
 			};
 		}]);

@@ -1412,8 +1367,8 @@ module.controller('SettingsCtrl', ['$scope', '$location', 'SettingsService', 'An
 			};
 		}]);

-module.controller('ProfileCtrl', ['$scope', '$location', '$dialog', 'ProfileService', 'AnalyticsService',
-		function($scope, $location, $dialog, ProfileService, AnalyticsService) {
+module.controller('ProfileCtrl', ['$scope', '$location', 'ProfileService', 'AnalyticsService',
+		function($scope, $location, ProfileService, AnalyticsService) {

 			AnalyticsService.track();

@@ -1437,23 +1392,8 @@ module.controller('ProfileCtrl', ['$scope', '$location', '$dialog', 'ProfileServ
 				});
 			};
 			$scope.deleteAccount = function() {
-				var title = 'Delete account';
-				var msg = 'Delete your acount? There\'s no turning back!';
-				var btns = [{
-					result : 'cancel',
-					label : 'Cancel'
-				}, {
-					result : 'ok',
-					label : 'OK',
-					cssClass : 'btn-primary'
-				}];
-
-				$dialog.messageBox(title, msg, btns).open().then(function(result) {
-					if (result == 'ok') {
-						ProfileService.deleteAccount({});
-						window.location.href = 'logout';
-					}
-				});
+				ProfileService.deleteAccount({});
+				window.location.href = 'logout';
 			};
 		}]);

--- a/src/main/webapp/js/directives.js
+++ b/src/main/webapp/js/directives.js
@@ -15,6 +15,22 @@ module.directive('focus', ['$timeout', function($timeout) {
 	};
 }]);

+module.directive('confirmClick', [function() {
+	return {
+		priority : -1,
+		restrict : 'A',
+		link : function(scope, element, attrs) {
+			element.bind('click', function(e) {
+				var message = attrs.confirmClick;
+				if (message && !confirm(message)) {
+					e.stopImmediatePropagation();
+					e.preventDefault();
+				}
+			});
+		}
+	};
+}]);
+
 /**
 * Open a popup window pointing to the url in the href attribute
 */
@@ -154,8 +170,8 @@ module.directive('category', [function() {
 		restrict : 'E',
 		replace : true,
 		templateUrl : 'templates/_category.html',
-		controller : ['$scope', '$state', '$dialog', 'FeedService', 'CategoryService', 'SettingsService', 'MobileService',
-				function($scope, $state, $dialog, FeedService, CategoryService, SettingsService, MobileService) {
+		controller : ['$scope', '$state', 'FeedService', 'CategoryService', 'SettingsService', 'MobileService',
+				function($scope, $state, FeedService, CategoryService, SettingsService, MobileService) {
 					$scope.settingsService = SettingsService;

 					$scope.getClass = function(level) {
--- a/src/main/webapp/sass/generic/_misc.scss
+++ b/src/main/webapp/sass/generic/_misc.scss
@@ -6,6 +6,14 @@
 	padding-left: 20px;
 }

+body .modal {
+	display: block;
+}
+
+body .modal-backdrop {
+	opacity: 0.5;
+}
+
 .pointer {
 	cursor: pointer;
 }
--- a/src/main/webapp/templates/_feedsearch.html
+++ b/src/main/webapp/templates/_feedsearch.html
@@ -1,25 +1,29 @@
 <div ng-controller="FeedSearchCtrl">
 	<div modal="feedSearchModal" close="close()" options="{dialogClass: 'modal feed-search-dialog'}">
-		<div class="modal-header">
-			<button type="button" class="close" ng-click="close()">&times;</button>
-			<h4>
-				<input ng-model="filter" class="filter-input"
-					ui-keydown="{'up': 'focusPrevious($event)', 'down': 'focusNext($event)', 'enter': 'openFocused()' }" placeholder="${feedsearch.hint}"
-					focus="feedSearchModal">
-			</h4>
-			<small>${feedsearch.help}</small>
-		</div>
-		<div class="modal-body">
-			<strong>${feedsearch.result_prefix}</strong>
-			<span ng-repeat="feed in (filtered = (CategoryService.feeds | filter:{name: filter} | limitTo:40))">
-				<span ng-class="{block: filter, focus: focus.id == feed.id}" class="feed-link">
-					<a class=" pointer" ng-click="goToFeed(feed.id)">
-						<favicon url="feed.iconUrl" />
-						&nbsp;{{feed.name}}
-					</a>
-					<span ng-show="!filter && !$last">&bull;</span>
-				</span>
-			</span>
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" ng-click="close()">&times;</button>
+					<h4>
+						<input ng-model="filter" class="filter-input"
+							ui-keydown="{'up': 'focusPrevious($event)', 'down': 'focusNext($event)', 'enter': 'openFocused()' }" placeholder="${feedsearch.hint}"
+							focus="feedSearchModal">
+					</h4>
+					<small>${feedsearch.help}</small>
+				</div>
+				<div class="modal-body">
+					<strong>${feedsearch.result_prefix}</strong>
+					<span ng-repeat="feed in (filtered = (CategoryService.feeds | filter:{name: filter} | limitTo:40))">
+						<span ng-class="{block: filter, focus: focus.id == feed.id}" class="feed-link">
+							<a class=" pointer" ng-click="goToFeed(feed.id)">
+								<favicon url="feed.iconUrl" />
+								&nbsp;{{feed.name}}
+							</a>
+							<span ng-show="!filter && !$last">&bull;</span>
+						</span>
+					</span>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
--- a/src/main/webapp/templates/admin.useredit.html
+++ b/src/main/webapp/templates/admin.useredit.html
@@ -40,7 +40,7 @@
 		<div class="form-group">
 			<div class="col-sm-offset-2 col-sm-10">
 				<button type="submit" class="btn btn-primary">Save</button>
-				<button type="button" class="btn btn-danger" ng-click="remove()">Delete</button>
+				<button type="button" class="btn btn-danger" ng-click="remove()" confirm-click="Are you sure you want to delete this user?">Delete</button>
 				<button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
 			</div>
 		</div>
--- a/src/main/webapp/templates/feeds.category_details.html
+++ b/src/main/webapp/templates/feeds.category_details.html
@@ -39,7 +39,8 @@
 		<div class="form-group">
 			<div class="col-sm-offset-2 col-sm-10">
 				<button type="submit" class="btn btn-primary" ng-if="!isMeta()">${global.save}</button>
-				<button type="button" class="btn btn-danger" ng-click="deleteCategory()" ng-if="!isMeta()">${global.delete}</button>
+				<button type="button" class="btn btn-danger" ng-click="deleteCategory()" ng-show="!isMeta()"
+					confirm-click="${details.delete_category_confirmation}">${global.delete}</button>
 				<button type="button" class="btn btn-default" ng-click="back()">${global.cancel}</button>
 			</div>
 		</div>
--- a/src/main/webapp/templates/feeds.feed_details.html
+++ b/src/main/webapp/templates/feeds.feed_details.html
@@ -18,8 +18,8 @@
 		<div class="form-group" ng-class="{error : !form.name.$valid}">
 			<label class="col-sm-2 control-label">${details.name}</label>
 			<div class="col-sm-10">
-				<input type="text" name="name" ng-model="sub.name" class="form-control" required></input> <span class="help-block"
-					ng-show="!form.name.$valid">${global.required}</span>
+				<input type="text" name="name" ng-model="sub.name" class="form-control" required></input>
+				<span class="help-block" ng-show="!form.name.$valid">${global.required}</span>
 			</div>
 		</div>

@@ -28,7 +28,8 @@
 			<div class="col-sm-10">
 				<select name="category" class="form-control" ng-model="sub.categoryId"
 					ng-options="cat.id as cat.name for cat in CategoryService.flatCategories">
-				</select> <span class="help-block" ng-show="!form.category.$valid">${global.required}</span>
+				</select>
+				<span class="help-block" ng-show="!form.category.$valid">${global.required}</span>
 			</div>
 		</div>

@@ -70,8 +71,8 @@

 		<div class="form-group">
 			<div class="col-sm-offset-2 col-sm-10">
-				<button type="submit" class="btn btn-primary">${global.save}</button> 
-				<button type="button" class="btn btn-danger" ng-click="unsubscribe()">${details.unsubscribe}</button>
+				<button type="submit" class="btn btn-primary">${global.save}</button>
+				<button type="button" class="btn btn-danger" ng-click="unsubscribe()" confirm-click="${details.unsubscribe_confirmation}">${details.unsubscribe}</button>
 				<button type="button" class="btn btn-default" ng-click="back()">${global.cancel}</button>
 			</div>
 		</div>
--- a/src/main/webapp/templates/feeds.view.html
+++ b/src/main/webapp/templates/feeds.view.html
@@ -126,11 +126,15 @@
 			<span ng-hide="keywords">"{{name}}" ${view.no_unread_items}</span>
 		</div>
 		<div modal="shortcutsModal" close="shortcutsModal=false" options="shortcutsOpts">
-			<div class="modal-header">
-				<button type="button" class="close" ng-click="shortcutsModal=false">&times;</button>
-				<h4>${about.keyboard_shortcuts}</h4>
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+						<button type="button" class="close" ng-click="shortcutsModal=false">&times;</button>
+						<h4>${about.keyboard_shortcuts}</h4>
+					</div>
+					<div class="modal-body" ng-include="'templates/_shortcuts.html'"></div>
+				</div>
 			</div>
-			<div ng-include="'templates/_shortcuts.html'"></div>
 		</div>
 	</div>
 	<div style="height: 30px" ng-if="settingsService.settings.viewMode != 'expanded' && entries.length != 0"></div>
--- a/src/main/webapp/templates/profile.html
+++ b/src/main/webapp/templates/profile.html
@@ -57,7 +57,7 @@
 		<div class="form-group">
 			<div class="col-sm-offset-2 col-sm-10">
 				<button type="submit" class="btn btn-primary">${global.save}</button>
-				<button type="button" class="btn btn-danger" ng-click="deleteAccount()">${profile.delete_account}</button>
+				<button type="button" class="btn btn-danger" ng-click="deleteAccount()" confirm-click="${profile.delete_account_confirmation}">${profile.delete_account}</button>
 				<button type="button" class="btn btn-default" ng-click="cancel()">${global.cancel}</button>
 			</div>
 		</div>