ui-imporovement adjustments

changedetectionio/__init__.py

@@ -335,7 +335,9 @@ def changedetection_app(config=None, datastore_o=None):
                                  tags=existing_tags,
                                  active_tag=limit_tag,
                                  app_rss_token=datastore.data['settings']['application']['rss_access_token'],
-                                 has_unviewed=datastore.data['has_unviewed'])
+                                 has_unviewed=datastore.data['has_unviewed'],
+                                 extra_title="{}".format(" ({})".format(str(datastore.data['unviewed_count'])) if datastore.data['unviewed_count'] > 0 else "")
+                                )
 
         return output
 

changedetectionio/static/js/tbltools.js

@@ -38,8 +38,10 @@ function load_functions() {
 	checkChange();
 	// retrieve saved sorting
 	getSort();
-	// sort
+	// sort if not default
+	//if (sort_column != 9 || sort_order != 1) {
 	sortTable(sort_column);
+	//}
 	// search
 	if (isSessionStorageSupported()) {
 		// retrieve search
@@ -58,7 +60,6 @@ function sortTable(n) {
   //Set the sorting direction, either default 9, 1 or saved
   if (loading) {
 	getSort();
-	n = sort_column;
 	dir = (sort_order == 0) ? "asc" : "desc";
 	loading = false;
   }
@@ -82,11 +83,18 @@ function sortTable(n) {
       y = rows[i + 1].getElementsByTagName("TD")[n];
       x = x.innerHTML.toLowerCase();
       y = y.innerHTML.toLowerCase();
-	  /* handle # columns */
-	  if (!isNaN(x)) { 
+	  if (!isNaN(x)) { // handle numeric columns
 		x = parseFloat(x);
 		y = parseFloat(y);
 	  }
+	  if (n == 1) { // handle the checkbox column
+		  x = rows[i].querySelector('input[type=checkbox]').checked;
+		  y = rows[i + 1].querySelector('input[type=checkbox]').checked;
+	  }
+	  if (n == 2 || n == 3) { // handle the play/pause and viewed/unviewed columns
+		x = rows[i].getElementsByTagName("TD")[n].getElementsByTagName("img")[0].src;
+		y = rows[i + 1].getElementsByTagName("TD")[n].getElementsByTagName("img")[0].src;
+	  }
 	  /*check if the two rows should switch place,
       based on the direction, asc or desc:*/
       if (dir == "asc") {
@@ -216,13 +224,13 @@ function tblSearch(evt) {
   restripe();
 }
 
-// restripe after searching
+// restripe after searching or sorting
 function restripe () {
 	var visrows = [];
 	var table = document.getElementById("watch-table");
 	var rows = table.getElementsByTagName("tr");
 	
-	for (i = 0; i < rows.length; i++) {
+	for (i = 0; i < rows.length; i++) { // skip thead row 0
  		if (rows[i].style.display !== "none") {
 			visrows.push(rows[i]);
 		}
@@ -237,6 +245,7 @@ function restripe () {
 				cells[j].style.background = "#f2f2f2";
 			}
 		}
+		//cells[0].innerText = i+1;
 	}
 }
 

changedetectionio/static/styles/styles.css

@@ -91,7 +91,7 @@ section.content {
 	color: #333;
 }
 .box {
-    width: 80%; /*changed to width to prevent resizing during search */
+    width: 80%;
 	flex-direction: column;
     display: flex;
     justify-content: center;
@@ -117,11 +117,23 @@ section.content {
 #play-pause {
 	line-height: .8em;
 }
-#checkbox-functions .pure-button  {
+#checkbox-functions {
+	position: fixed;
+	left: 10%;
+ 	text-align: left;
+	display: inline-grid;
+}
+#checkbox-functions	.pure-button  {
 	background:  #0078e7;
+	border-top-left-radius: 0px;
+	border-bottom-left-radius: 0px;
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+#danger .pure-button {
+	background: #e7096e;
 }
 .watch-table td.title-col, #actions {
-	/*text-align: left;*/
 	text-align: center;
 }
 .watch-table #clickable {
@@ -681,9 +693,6 @@ footer {
 	#watch-actions {
 		margin-top: 3px;
 	}
-	#checkbox-functions {
-		display: inline-block;
-	}
 }
 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
     input[type="text"] {
@@ -707,28 +716,20 @@ footer {
         color: #555;
         content: "Changed ";
     }
-/*    .watch-table td.inline {
-        display: inline-block;
-    }
-    .watch-table thead tr {
-        position: absolute;
-        top: -9999px;
-        left: -9999px;
-    }*/
 	.watch-table th:nth-child(0) {
-		display: none;
+		display: inline-block;
 	}
 	.watch-table th:nth-child(1) {
-		display: none;
+		display: inline-block;
 	}
 	.watch-table th:nth-child(2) {
-		display: none;
+		display: inline-block;
 	}
 	.watch-table th:nth-child(3) {
-		display: none;
+		display: inline-block;
 	}
 	.watch-table th:nth-child(4) {
-		display: none;
+		display: inline-block;
 	}
 	.watch-table th:nth-child(5) {
 		display: inline-block;
@@ -766,9 +767,6 @@ footer {
         padding-right: 10px;
         white-space: nowrap;
     }
-    .watch-table.pure-table-striped tr {
-        background-color: #fff;
-    }
     .watch-table.pure-table-striped tr:nth-child(2n-1) {
         background-color: #eee;
     }

changedetectionio/store.py

@@ -201,6 +201,7 @@ class ChangeDetectionStore:
     @property
     def data(self):
         has_unviewed = False
+        unviewed_count = 0
         for uuid, v in self.__data['watching'].items():
             self.__data['watching'][uuid]['newest_history_key'] = self.get_newest_history_key(uuid)
             if int(v['newest_history_key']) <= int(v['last_viewed']):
@@ -209,6 +210,7 @@ class ChangeDetectionStore:
             else:
                 self.__data['watching'][uuid]['viewed'] = False
                 has_unviewed = True
+                unviewed_count += 1
 
             # #106 - Be sure this is None on empty string, False, None, etc
             # Default var for fetch_backend
@@ -221,6 +223,7 @@ class ChangeDetectionStore:
           self.__data['settings']['application']['base_url'] = env_base_url.strip('" ')
 
         self.__data['has_unviewed'] = has_unviewed
+        self.__data['unviewed_count'] = unviewed_count
 
         return self.__data
 

changedetectionio/templates/watch-overview.html

@@ -27,31 +27,27 @@
 					{% endif %}
 				{% endfor %}
 			</div>
-			&nbsp;
-			&nbsp;
-			<div id="controls-top">
+ -->			<div id="controls-top">
 				<ul id="post-list-buttons-top">
 					<span id="checkbox-functions" style="display: none;">
 						<li>
-						   <a href="javascript:processChecked('recheck_selected', '{{ active_tag }}');" class="pure-button button-tag ">Recheck
-							Selected {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
+							<a href="javascript:processChecked('recheck_selected', '{{ active_tag }}');" class="pure-button button-tag " title="Recheck Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Recheck</a>
 						</li>
 						<li>
-						   <a href="javascript:processChecked('mark_selected_notviewed', '{{ active_tag }}');" class="pure-button button-tag ">Mark
-							Selected as Unviewed {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
+							<a href="javascript:processChecked('mark_selected_notviewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Unviewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Unviewed</a>
 						</li>
 						<li>
-						   <a href="javascript:processChecked('mark_selected_viewed', '{{ active_tag }}');" class="pure-button button-tag ">Mark
-							Selected as Viewed {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
-						</li>
-						<li>
-						   <a href="javascript:processChecked('delete_selected', '{{ active_tag }}');" class="pure-button button-tag ">Delete
-							Selected {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
+							<a href="javascript:processChecked('mark_selected_viewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Viewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Viewed</a>
 						</li>
+						<span id="danger">
+							<li>
+								<a href="javascript:processChecked('delete_selected', '{{ active_tag }}');" class="pure-button button-tag " title="Delete Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Delete</a>
+							</li>
+						</span>
 					</span>
 					<span id="recheck-and-rss">
 						<li>
-						   <a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
+							<a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
 							All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
 						</li>
 						<li>
@@ -66,16 +62,10 @@
 			<table class="pure-table pure-table-striped watch-table" id="watch-table">
 				<thead>
 				<tr id="header">
-					<th onclick="sortTable(0)"><span id="clickable" title="Sort by Index">#&nbsp;&nbsp;<span id="sortable-0"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-0a" style="display:none;">&#9650;</span><span id="sort-0d" style="display:none;">&#9660;</span></span></span></th>
-					<th><input type="checkbox" name="showhide" onchange="checkAll(this)" title="Check/Uncheck All"></th>
-					<th id="play-pause">
-						<a href="{{url_for('index', pause='pause-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>
-						<a href="{{url_for('index', pause='resume-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>
-					</th>
-					<th>
-						<a href="javascript:processChecked('mark_all_notviewed', '{{ active_tag }}');"><img src="{{url_for('static_content', group='images', filename='notviewed.svg')}}" alt="Uniewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Unviewed"/></a>
-						<a href="{{url_for('mark_all_viewed', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='viewed.svg')}}" alt="Viewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Viewed"/></a>
-					</th>
+					<th>#</th>
+					<th onclick="sortTable(1)"><span id="clickable" title="Sort by Checked"><input type="checkbox" name="showhide" onchange="checkAll(this)" title="Check/Uncheck All">&nbsp;&nbsp;<span id="sortable-1"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-1a" style="display:none;">&#9650;</span><span id="sort-1d" style="display:none;">&#9660;</span></span></span></th>
+					<th id="play-pause" onclick="sortTable(2)"><span id="clickable" title="Sort by Pause/Resume"><a href="{{url_for('index', pause='pause-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;<a href="{{url_for('index', pause='resume-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;&nbsp;<span id="sortable-2"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-2a" style="display:none;">&#9650;</span><span id="sort-2d" style="display:none;">&#9660;</span></span></span></th>
+					<th id="play-pause" onclick="sortTable(3)"><span id="clickable" title="Sort by Viewed/Unviewed"><a href="javascript:processChecked('mark_all_notviewed', '{{ active_tag }}');"><img src="{{url_for('static_content', group='images', filename='notviewed.svg')}}" alt="Uniewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Unviewed"/></a>&nbsp;<a href="{{url_for('mark_all_viewed', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='viewed.svg')}}" alt="Viewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Viewed"/></a>&nbsp;&nbsp;<span id="sortable-3"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-3a" style="display:none;">&#9650;</span><span id="sort-3d" style="display:none;">&#9660;</span></span></span></th>
 					<th onclick="sortTable(5)"><span id="clickable" title="Sort by Title">Title&nbsp;&nbsp;<span id="sortable-5"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-5a" style="display:none;">&#9650;</span><span id="sort-5d" style="display:none;">&#9660;</span></span></span></th>
 					<th id="hidden"></th>
 					<th onclick="sortTable(7)"><span id="clickable" title="Sort by Last Checked">Checked&nbsp;&nbsp;<span id="sortable-7"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-7a" style="display:none;">&#9650;</span><span id="sort-7d" style="display:none;">&#9660;</span></span></span></th>
@@ -158,24 +148,6 @@
 					All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
 				</li>
 				</span>
-				<span id="checkbox-functions" style="display: none;">
-				<li>
-				   <a href="javascript:processChecked('delete_selected', '{{ active_tag }}');" class="pure-button button-tag ">Delete
-					Selected {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
-				</li>
-				<li>
-				   <a href="javascript:processChecked('mark_selected_viewed', '{{ active_tag }}');" class="pure-button button-tag ">Mark
-					Selected as Viewed {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
-				</li>
-				<li>
-				   <a href="javascript:processChecked('mark_selected_notviewed', '{{ active_tag }}');" class="pure-button button-tag ">Mark
-					Selected as Unviewed {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
-				</li>
-				<li>
-				   <a href="javascript:processChecked('recheck_selected', '{{ active_tag }}');" class="pure-button button-tag ">Recheck
-					Selected {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
-				</li>
-				</span>
 			</ul>
 		</div>
 	</div>