Self-Hosted
/
changedetection.io
mirror of https://github.com/dgtlmoon/changedetection.io.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui-imporovement adjustments

Browse Source
pull/317/head
ntmmfts 3 years ago
parent 66064efce3
commit a2568129f6
5 changed files with 55 additions and 71 deletions
Show Stats Download Patch File Download Diff File

4
changedetectionio/__init__.py
Unescape View File

@ -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

21
changedetectionio/static/js/tbltools.js
Unescape View File

@ -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;
}
}

42
changedetectionio/static/styles/styles.css
Unescape View File

@ -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;
}

3
changedetectionio/store.py
Unescape View File

@ -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

56
changedetectionio/templates/watch-overview.html
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save