feature/confirmation_dialogs

* Added confirmation dialogs back in that were missed due to new UI changes
11 years ago · 91c004c990
7 changed files with 296 additions and 50 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@ -35,6 +35,7 @@
 * Removed superfish-1.4.8.js and supersubs-0.2b.js as they no longer break provider sorting with qtip removed and is no longer required due to new UI
 * Overhaul Config Search Settings in line with General Configuration
 * Fixes errors occurring when a show folder is deleted outside of SickRage
+* Added confirmation dialogs back in that were missed due to new UI changes


 ### 0.2.1 (2014-10-22 06:41:00 UTC)
--- a/gui/slick/css/dark.css
+++ b/gui/slick/css/dark.css
@ -2958,4 +2958,99 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {

 span.token-input-delete-token {
    margin: 0 1px;
+}
+
+/* =======================================================================
+jquery.confirm.css
+========================================================================== */
+
+#confirmOverlay{
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: url('../images/bg.gif');
+	background: -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) repeat-x rgba(0,0,0,0.5);
+	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))) repeat-x rgba(0,0,0,0.5);
+	z-index: 100000;
+}
+
+#confirmBox{
+	background: #222;
+	width: 460px;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	margin: -130px 0 0 -230px;
+	border: 1px solid #111;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.175);
+}
+
+#confirmBox h1,
+#confirmBox p{
+	padding: 6px 10px;
+}
+
+#confirmBox h1 {
+    background-color: #15528F;
+	border-bottom: 1px solid #111;
+	color: #fff;
+    margin: 0;
+    font-size: 22px;
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+}
+
+#confirmBox p {
+	padding-top: 20px;
+    color: #fff;
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+}
+
+#confirmButtons {
+	padding: 15px 0;
+	text-align: center;
+}
+
+#confirmBox .button {
+	margin-right: 15px;
+	padding: 2px 20px;
+	text-decoration: none;
+	display: inline-block;
+	color: #fff;
+	text-align:center;
+	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+	background-clip: padding-box;
+	border: 1px solid #111;
+	border-radius: 3px;
+	cursor: pointer;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: -o-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: linear-gradient(to bottom, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1),inset 0 -1px 3px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(255,255,255,0.08),0 1px 2px rgba(0,0,0,0.15);
+	box-shadow: inset 0 1px rgba(255,255,255,0.1),inset 0 -1px 3px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(255,255,255,0.08),0 1px 2px rgba(0,0,0,0.15);
+}
+
+#confirmBox .button:last-child {	
+	margin-right:0;
+}
+
+#confirmBox .green {
+	background-color: #3F7636;
+}
+
+#confirmBox .green:hover {
+	background-color: #48873E;
+}
+
+#confirmBox .red {
+	background-color: #8D2D2B;
+}
+
+#confirmBox .red:hover {
+	background-color: #A13331;
 }
--- a/gui/slick/css/light.css
+++ b/gui/slick/css/light.css
@ -2895,4 +2895,99 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {

 span.token-input-delete-token {
    margin: 0 1px;
+}
+
+/* =======================================================================
+jquery.confirm.css
+========================================================================== */
+
+#confirmOverlay{
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: url('../images/bg.gif');
+	background: -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) repeat-x rgba(0,0,0,0.5);
+	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))) repeat-x rgba(0,0,0,0.5);
+	z-index: 100000;
+}
+
+#confirmBox{
+	background: #F5F1E4;
+	width: 460px;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	margin: -130px 0 0 -230px;
+	border: 1px solid #111;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.175);
+}
+
+#confirmBox h1,
+#confirmBox p{
+	padding: 6px 10px;
+}
+
+#confirmBox h1 {
+    background-color: #333;
+	border-bottom: 1px solid #111;
+	color: #fff;
+    margin: 0;
+    font-size: 22px;
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+}
+
+#confirmBox p {
+	padding-top: 20px;
+    color: #000;
+    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
+}
+
+#confirmButtons {
+	padding: 15px 0;
+	text-align: center;
+}
+
+#confirmBox .button {
+	margin-right: 15px;
+	padding: 2px 20px;
+	text-decoration: none;
+	display: inline-block;
+	color: #fff;
+	text-align:center;
+	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+	background-clip: padding-box;
+	border: 1px solid #111;
+	border-radius: 3px;
+	cursor: pointer;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: -o-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: linear-gradient(to bottom, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1),inset 0 -1px 3px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(255,255,255,0.08),0 1px 2px rgba(0,0,0,0.15);
+	box-shadow: inset 0 1px rgba(255,255,255,0.1),inset 0 -1px 3px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(255,255,255,0.08),0 1px 2px rgba(0,0,0,0.15);
+}
+
+#confirmBox .button:last-child {	
+	margin-right:0;
+}
+
+#confirmBox .green {
+	background-color: #3F7636;
+}
+
+#confirmBox .green:hover {
+	background-color: #48873E;
+}
+
+#confirmBox .red {
+	background-color: #8D2D2B;
+}
+
+#confirmBox .red:hover {
+	background-color: #A13331;
 }
--- a/gui/slick/css/style.css
+++ b/gui/slick/css/style.css
@ -3000,4 +3000,99 @@ span.token-input-delete-token {
 }

 .red-text {color:#d33}
-.clear-left {clear:left}
+.clear-left {clear:left}
+
+/* =======================================================================
+jquery.confirm.css
+========================================================================== */
+
+#confirmOverlay{
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: url('../images/bg.gif');
+	background: -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) repeat-x rgba(0,0,0,0.5);
+	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.5))) repeat-x rgba(0,0,0,0.5);
+	z-index: 100000;
+}
+
+#confirmBox{
+	background: #F5F1E4;
+	width: 460px;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	margin: -130px 0 0 -230px;
+	border: 1px solid #111;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.175);
+}
+
+#confirmBox h1,
+#confirmBox p{
+	padding: 6px 10px;
+}
+
+#confirmBox h1 {
+    background-color: #333;
+	border-bottom: 1px solid #111;
+	color: #fff;
+    margin: 0;
+    font-size: 22px;
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+}
+
+#confirmBox p {
+	padding-top: 20px;
+    color: #000;
+    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
+}
+
+#confirmButtons {
+	padding: 15px 0;
+	text-align: center;
+}
+
+#confirmBox .button {
+	margin-right: 15px;
+	padding: 2px 20px;
+	text-decoration: none;
+	display: inline-block;
+	color: #fff;
+	text-align:center;
+	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+	background-clip: padding-box;
+	border: 1px solid #111;
+	border-radius: 3px;
+	cursor: pointer;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: -o-linear-gradient(top, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	background-image: linear-gradient(to bottom, rgba(255,255,255,0.08),rgba(255,255,255,0) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0.25));
+	-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1),inset 0 -1px 3px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(255,255,255,0.08),0 1px 2px rgba(0,0,0,0.15);
+	box-shadow: inset 0 1px rgba(255,255,255,0.1),inset 0 -1px 3px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(255,255,255,0.08),0 1px 2px rgba(0,0,0,0.15);
+}
+
+#confirmBox .button:last-child {	
+	margin-right:0;
+}
+
+#confirmBox .green {
+	background-color: #3F7636;
+}
+
+#confirmBox .green:hover {
+	background-color: #48873E;
+}
+
+#confirmBox .red {
+	background-color: #8D2D2B;
+}
+
+#confirmBox .red:hover {
+	background-color: #A13331;
+}
--- a/gui/slick/interfaces/default/inc_top.tmpl
+++ b/gui/slick/interfaces/default/inc_top.tmpl
@ -90,14 +90,14 @@
 		<script type="text/javascript">
 		<!--
 			function initActions() {
-				\$("#SubMenu a[href*='/home/restart/']").addClass('btn').html('<span class="submenu-icon-restart pull-left"></span> Restart');
-				\$("#SubMenu a[href*='/home/shutdown/']").addClass('btn').html('<span class="submenu-icon-shutdown pull-left"></span> Shutdown');
+				\$("#SubMenu a[href*='/home/restart/']").addClass('btn restart').html('<span class="submenu-icon-restart pull-left"></span> Restart');
+				\$("#SubMenu a[href*='/home/shutdown/']").addClass('btn shutdown').html('<span class="submenu-icon-shutdown pull-left"></span> Shutdown');
 				\$("#SubMenu a[href*='/home/logout/']").addClass('btn').html('<span class="ui-icon ui-icon-power pull-left"></span> Logout');
 				\$("#SubMenu a:contains('Edit')").addClass('btn').html('<span class="ui-icon ui-icon-pencil pull-left"></span> Edit');
-				\$("#SubMenu a:contains('Delete')").addClass('btn').html('<span class="ui-icon ui-icon-trash pull-left"></span> Delete');
-				\$("#SubMenu a:contains('Remove')").addClass('btn').html('<span class="ui-icon ui-icon-trash pull-left"></span> Remove');
-				\$("#SubMenu a:contains('Clear History')").addClass('btn confirm').html('<span class="ui-icon ui-icon-trash pull-left"></span> Clear History');
-				\$("#SubMenu a:contains('Trim History')").addClass('btn confirm').html('<span class="ui-icon ui-icon-trash pull-left"></span> Trim History');
+				\$("#SubMenu a:contains('Delete')").addClass('btn delete').html('<span class="ui-icon ui-icon-trash pull-left"></span> Delete');
+				\$("#SubMenu a:contains('Remove')").addClass('btn remove').html('<span class="ui-icon ui-icon-trash pull-left"></span> Remove');
+				\$("#SubMenu a:contains('Clear History')").addClass('btn clearhistory').html('<span class="ui-icon ui-icon-trash pull-left"></span> Clear History');
+				\$("#SubMenu a:contains('Trim History')").addClass('btn trimhistory').html('<span class="ui-icon ui-icon-trash pull-left"></span> Trim History');
 				\$("#SubMenu a[href$='/errorlogs/clearerrors/']").addClass('btn').html('<span class="ui-icon ui-icon-trash pull-left"></span> Clear Errors');
 				\$("#SubMenu a:contains('Re-scan')").addClass('btn').html('<span class="ui-icon ui-icon-refresh pull-left"></span> Re-scan');
 				\$("#SubMenu a:contains('Backlog Overview')").addClass('btn').html('<span class="ui-icon ui-icon-refresh pull-left"></span> Backlog Overview');
@ -129,19 +129,12 @@
 				
 				\$("#NAV$topmenu").addClass("active");
 				
-				\$("a.confirm").bind("click",function(e) {
-					e.preventDefault();
-					var target = \$( this ).attr('href');
-					if ( confirm("Are you sure you want to " + \$(this).text() + "?") )
-						location.href = target;
-					return false;
-				});
-				
 				\$('.dropdown-toggle').dropdownHover();
 				
 			});
 		//-->
 		</script>
+        <script type="text/javascript" src="$sbRoot/js/confirmations.js?$sbPID"></script>
 	</head>

 	<body>
--- a/gui/slick/js/confirmations.js
+++ b/gui/slick/js/confirmations.js
@ -47,7 +47,7 @@ $(document).ready(function () {
 		var showname = document.getElementById("showtitle").getAttribute('data-showname');
 		$.confirm({
 			'title'		: 'Delete Show',
-			'message'	: 'Are you sure you want to permanently delete <font color="#09A2FF">' + showname + '</font> ? <br /><br /> <font color="red">WARNING - This process will also delete all stored files. <br /> This process cannot be un-done.</font>',
+			'message'	: 'Are you sure you want to permanently delete <span class="footerhighlight">' + showname + '</span> ? <br /><br /> <font color="red">WARNING - This process will also delete all stored files. <br /> This process cannot be un-done.</font>',
 			'buttons'	: {
 				'Yes'	: {
 					'class'	: 'green',
@ -69,7 +69,7 @@ $(document).ready(function () {
 		var showname = document.getElementById("showtitle").getAttribute('data-showname');
 		$.confirm({
 			'title'		: 'Remove Show',
-			'message'	: 'Are you sure you want to remove <font color="#09A2FF">' + showname + '</font> from the database ?',
+			'message'	: 'Are you sure you want to remove <span class="footerhighlight">' + showname + '</span> from the database ?',
 			'buttons'	: {
 				'Yes'	: {
 					'class'	: 'green',
--- a/gui/slick/js/submenu.js
+++ b/gui/slick/js/submenu.js
@ -1,33 +0,0 @@
-function initActions() {
-    $("#SubMenu a[href*='/home/restart/']").addClass('btn restart').html('<span class="ui-icon ui-icon-restart pull-left"></span> Restart');
-    $("#SubMenu a[href*='/home/shutdown/']").addClass('btn shutdown').html('<span class="ui-icon ui-icon-shutdown pull-left"></span> Shutdown');
-    $("#SubMenu a[href*='/home/logout/']").addClass('btn').html('<span class="ui-icon ui-icon-power pull-left"></span> Logout');
-    $("#SubMenu a:contains('Edit')").addClass('btn').html('<span class="ui-icon ui-icon-pencil pull-left"></span> Edit');
-    $("#SubMenu a:contains('Delete')").addClass('btn delete').html('<span class="ui-icon ui-icon-trash pull-left"></span> Delete');
-    $("#SubMenu a:contains('Remove')").addClass('btn remove').html('<span class="ui-icon ui-icon-trash pull-left"></span> Remove');
-    $("#SubMenu a:contains('Clear History')").addClass('btn clearhistory').html('<span class="ui-icon ui-icon-trash pull-left"></span> Clear History');
-    $("#SubMenu a:contains('Trim History')").addClass('btn trimhistory').html('<span class="ui-icon ui-icon-trash pull-left"></span> Trim History');
-    $("#SubMenu a[href$='/errorlogs/clearerrors/']").addClass('btn').html('<span class="ui-icon ui-icon-trash pull-left"></span> Clear Errors');
-    $("#SubMenu a:contains('Re-scan')").addClass('btn').html('<span class="ui-icon ui-icon-refresh pull-left"></span> Re-scan');
-    $("#SubMenu a:contains('Backlog Overview')").addClass('btn').html('<span class="ui-icon ui-icon-refresh pull-left"></span> Backlog Overview');
-    $("#SubMenu a[href$='/home/updatePLEX/']").addClass('btn').html('<span class="ui-icon ui-icon-refresh pull-left"></span> Update PLEX');
-    $("#SubMenu a:contains('Force')").addClass('btn').html('<span class="ui-icon ui-icon-transfer-e-w pull-left"></span> Force Full Update');
-    $("#SubMenu a:contains('Rename')").addClass('btn').html('<span class="ui-icon ui-icon-tag pull-left"></span> Preview Rename');
-    $("#SubMenu a[href$='/config/subtitles/']").addClass('btn').html('<span class="ui-icon ui-icon-comment pull-left"></span> Search Subtitles');
-    $("#SubMenu a[href*='/home/subtitleShow']").addClass('btn').html('<span class="ui-icon ui-icon-comment pull-left"></span> Download Subtitles');
-    $("#SubMenu a:contains('Anime')").addClass('btn').html('<span class="ui-icon ui-icon-anime pull-left"></span> Anime');
-    $("#SubMenu a:contains('Settings')").addClass('btn').html('<span class="ui-icon ui-icon-search pull-left"></span> Search Settings');
-    $("#SubMenu a:contains('Provider')").addClass('btn').html('<span class="ui-icon ui-icon-search pull-left"></span> Search Providers');
-    $("#SubMenu a:contains('Backup/Restore')").addClass('btn').html('<span class="ui-icon ui-icon-gear pull-left"></span> Backup/Restore');
-    $("#SubMenu a:contains('General')").addClass('btn').html('<span class="ui-icon ui-icon-gear pull-left"></span> General');
-    $("#SubMenu a:contains('Episode Status')").addClass('btn').html('<span class="ui-icon ui-icon-transferthick-e-w pull-left"></span> Episode Status Management');
-    $("#SubMenu a:contains('Missed Subtitle')").addClass('btn').html('<span class="ui-icon ui-icon-transferthick-e-w pull-left"></span> Missed Subtitles');
-    $("#SubMenu a[href$='/home/addShows/']").addClass('btn').html('<span class="ui-icon ui-icon-video pull-left"></span> Add Show');
-    $("#SubMenu a:contains('Processing')").addClass('btn').html('<span class="ui-icon ui-icon-folder-open pull-left"></span> Post-Processing');
-    $("#SubMenu a:contains('Manage Searches')").addClass('btn').html('<span class="ui-icon ui-icon-search pull-left"></span> Manage Searches');
-    $("#SubMenu a:contains('Manage Torrents')").addClass('btn').html('<img width="16" height="16" alt="" src="../images/menu/bittorrent.png"> Manage Torrents');
-    $("#SubMenu a[href$='/manage/failedDownloads/']").addClass('btn').html('<img width="16" height="16" alt="" src="../images/menu/failed_download.png"> Failed Downloads');
-    $("#SubMenu a:contains('Notification')").addClass('btn').html('<span class="ui-icon ui-icon-note pull-left"></span> Notification');
-    $("#SubMenu a:contains('Update show in XBMC')").addClass('btn').html('<span class="ui-icon ui-icon-refresh pull-left"></span> Update show in XBMC');
-    $("#SubMenu a[href$='/home/updateXBMC/']").addClass('btn').html('<span class="ui-icon ui-icon-refresh pull-left"></span> Update XBMC');
-}