fixed check behavior and added cancel button to checkbox functions menu

changedetectionio/static/js/tbltools.js

@@ -218,7 +218,13 @@ function checkChange(e) {
 	var i;
 	var totalCheckbox = document.querySelectorAll('input[name="check"]').length;
 	var totalChecked = document.querySelectorAll('input[name="check"]:checked').length;
-	var checkboxFunctions = document.getElementById('checkbox-functions'); //document.querySelectorAll('[id=checkbox-functions]');
+	var checkboxFunctions = document.getElementById('checkbox-functions');
+	if(totalCheckbox == totalChecked) {
+		document.getElementsByName("showhide")[0].checked=true;
+	}
+	else {
+		document.getElementsByName("showhide")[0].checked=false;
+	}
 	if (totalChecked > 0) {
 		checkboxFunctions.style.display = "";
 		checkboxFunctions.style.left = offsetLeft + 30 + "px";
@@ -389,3 +395,12 @@ function getSort() {
 		}
 	}
 }
+
+function closeGridDisplay() {
+	document.getElementsByName("showhide")[0].checked = false;
+	var checkboxes = document.getElementsByName('check');
+	for (i = 0; i < checkboxes.length; i++) {
+		checkboxes[i].checked = false;
+	}
+	document.getElementById("checkbox-functions").style.display = "none";
+}

changedetectionio/static/styles/styles.css

@@ -179,18 +179,18 @@ section.content {
 #post-list-buttons li {
 	display:inline-block
 }
+#post-list-buttons a {
+	border-top-left-radius:initial;
+	border-top-right-radius:initial;
+	border-bottom-left-radius:5px;
+	border-bottom-right-radius:5px;
+}
 #post-list-buttons-top-grid {
 	margin: 0px;
 }
 #post-list-buttons-top-grid li {
 	list-style-type: none;
 }
-#post-list-buttons a {
-	border-top-left-radius:initial;
-	border-top-right-radius:initial;
-	border-bottom-left-radius:5px;
-	border-bottom-right-radius:5px
-}
 #checkbox-functions ul {
 	padding-left: 0px;
 }
@@ -219,10 +219,14 @@ section.content {
 	-ms-grid-column: 1;
 	-ms-grid-row: 4;
 }
+#grid-item-5 { /* IE grid support */
+	-ms-grid-column: 1;
+	-ms-grid-row: 5;
+}
 #checkbox-functions .pure-button  {
 	background: #0078e7;
-	border-top-left-radius: 0px;
-	border-bottom-left-radius: 0px;
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
 	border-top-right-radius: 5px;
 	border-bottom-right-radius: 5px;
 }

changedetectionio/templates/watch-overview.html

@@ -42,6 +42,9 @@
 					<li id="grid-item-4">
 						<a href="javascript:processChecked('delete_selected', '{{ active_tag }}');" class="pure-button button-tag danger " title="Delete Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Delete&nbsp;&nbsp;</a>
 					</li>
+					<li id="grid-item-5">
+					   <a href="javascript:closeGridDisplay();" class="pure-button button-tag ">Cancel&nbsp;&nbsp;</a>
+					</li>
 				</ul>
 			</div>
 		</div>