Two-states buttons are now using opacity instead of two icons.
This commit is contained in:
parent
8b0cc42075
commit
de93b8059a
3 changed files with 28 additions and 28 deletions
|
@ -125,8 +125,8 @@ section > header h1 {
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#setpublished { display: none;}
|
||||
#setpublished.active { display: inline;}
|
||||
.invisible { display: none; }
|
||||
.inactive { opacity: 0.4; }
|
||||
|
||||
.settings, .list {
|
||||
float: left;
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
<header class="bar">
|
||||
<a class="button icon settings" href="#settings">⚙</a>
|
||||
<a class="button icon reload" href="#reload">🔄</a>
|
||||
<a class="button icon all-read" href="#all-read" id="all-read">❌</a>
|
||||
<a class="button icon all-read inactive" href="#all-read" id="all-read">✓</a>
|
||||
<canvas width="40" height="40"></canvas>
|
||||
</header>
|
||||
<article>
|
||||
|
@ -87,9 +87,9 @@
|
|||
<section id="full">
|
||||
<header class="bar">
|
||||
<a class="button icon list" href="#list"></a>
|
||||
<a id="setpublished" class="button icon" href="#published">☁</a>
|
||||
<a id="setstarred" class="button icon" href="#starred">☆</a>
|
||||
<a id="setunread" class="button icon" href="#unread">✓</a>
|
||||
<a id="setpublished" class="button icon inactive invisible" href="#published"></a>
|
||||
<a id="setstarred" class="button icon inactive" href="#starred">★</a>
|
||||
<a id="setunread" class="button icon inactive" href="#unread">✓</a>
|
||||
<canvas width="40" height="40"></canvas>
|
||||
</header>
|
||||
<article>
|
||||
|
|
44
js/App.js
44
js/App.js
|
@ -111,7 +111,7 @@ App.prototype.after_login = function(backend) {
|
|||
this.backend = new Pond(this, localStorage.server_url, localStorage.session_id)
|
||||
} else {
|
||||
this.backend = new TinyTinyRSS(this, localStorage.server_url, localStorage.session_id);
|
||||
$("#setpublished").addClass("active");
|
||||
$("#setpublished").removeClass("invisible");
|
||||
}
|
||||
|
||||
var numArticles = localStorage.numArticles;
|
||||
|
@ -158,7 +158,7 @@ App.prototype.setColor = function(color) {
|
|||
|
||||
App.prototype.reload = function() {
|
||||
this.unread_articles = [];
|
||||
$("#all-read").innerHTML = "❌";
|
||||
$("#all-read").addClass('inactive');
|
||||
var number=parseInt(localStorage.numArticles);
|
||||
this.backend.reload(this.gotUnreadFeeds.bind(this),number);
|
||||
};
|
||||
|
@ -251,9 +251,9 @@ App.prototype.updateList = function() {
|
|||
}, this);
|
||||
|
||||
if(unread > 0) {
|
||||
$("#all-read").innerHTML = "❌";
|
||||
$("#all-read").addClass('inactive');
|
||||
} else {
|
||||
$("#all-read").innerHTML = "✓";
|
||||
$("#all-read").removeClass('inactive');
|
||||
}
|
||||
|
||||
this.updatePieChart();
|
||||
|
@ -338,21 +338,21 @@ App.prototype.showFull = function(article, slide_back) {
|
|||
});
|
||||
|
||||
if(article.unread) {
|
||||
$("#setunread").innerHTML = "❌";
|
||||
$("#setunread").addClass('inactive');
|
||||
} else {
|
||||
$("#setunread").innerHTML = "✓";
|
||||
$("#setunread").removeClass('inactive');
|
||||
}
|
||||
|
||||
if(article.marked) {
|
||||
$("#setstarred").innerHTML = "★";
|
||||
if(!article.marked) {
|
||||
$("#setstarred").addClass('inactive');
|
||||
} else {
|
||||
$("#setstarred").innerHTML = "☆";
|
||||
$("#setstarred").removeClass('inactive');
|
||||
}
|
||||
|
||||
if(article.published) {
|
||||
$("#setpublished").innerHTML = "";
|
||||
if(!article.published) {
|
||||
$("#setpublished").addClass('inactive');
|
||||
} else {
|
||||
$("#setpublished").innerHTML = "☁";
|
||||
$("#setpublished").removeClass('inactive');
|
||||
}
|
||||
|
||||
};
|
||||
|
@ -390,7 +390,7 @@ App.prototype.setCurrentRead = function() {
|
|||
|
||||
article.set_unread = false;
|
||||
|
||||
$("#setunread").innerHTML = "✓";
|
||||
$("#setunread").removeClass('inactive');
|
||||
|
||||
this.updatePieChart();
|
||||
};
|
||||
|
@ -400,11 +400,11 @@ App.prototype.toggleCurrentUnread = function() {
|
|||
if(article.unread) {
|
||||
article.unread = false;
|
||||
article.set_unread = false;
|
||||
$("#setunread").innerHTML = "✓";
|
||||
$("#setunread").removeClass('inactive');
|
||||
} else {
|
||||
article.unread = true;
|
||||
article.set_unread = true;
|
||||
$("#setunread").innerHTML = "❌";
|
||||
$("#setunread").addClass('inactive');
|
||||
}
|
||||
|
||||
this.updateList();
|
||||
|
@ -413,7 +413,7 @@ App.prototype.toggleCurrentUnread = function() {
|
|||
|
||||
App.prototype.toggleAllRead = function() {
|
||||
|
||||
if($("#all-read").innerHTML == "❌") { // set all read
|
||||
if($("#all-read").hasClass('inactive')) { // set all read
|
||||
|
||||
var articles = [];
|
||||
for (var i = 0; i < this.unread_articles.length; i++) {
|
||||
|
@ -422,7 +422,7 @@ App.prototype.toggleAllRead = function() {
|
|||
article.set_unread = false;
|
||||
articles.push(article);
|
||||
}
|
||||
$("#all-read").innerHTML = "✓";
|
||||
$("#all-read").removeClass('inactive');
|
||||
|
||||
this.updateList();
|
||||
|
||||
|
@ -437,7 +437,7 @@ App.prototype.toggleAllRead = function() {
|
|||
article.set_unread = false;
|
||||
articles.push(article);
|
||||
}
|
||||
$("#all-read").innerHTML = "❌";
|
||||
$("#all-read").addClass('inactive');
|
||||
this.updateList();
|
||||
|
||||
this.backend.setArticlesUnread(articles);
|
||||
|
@ -453,13 +453,13 @@ App.prototype.toggleStarred = function() {
|
|||
article.marked = true;
|
||||
this.updateList();
|
||||
this.backend.setArticleStarred(article);
|
||||
$("#setstarred").innerHTML = "★";
|
||||
$("#setstarred").removeClass('inactive');
|
||||
}
|
||||
else {
|
||||
article.marked = false;
|
||||
this.updateList();
|
||||
this.backend.setArticleUnstarred(article);
|
||||
$("#setstarred").innerHTML = "☆";
|
||||
$("#setstarred").addClass('inactive');
|
||||
}
|
||||
|
||||
};
|
||||
|
@ -471,12 +471,12 @@ App.prototype.togglePublished = function() {
|
|||
if(!article.published) {
|
||||
article.published = true;
|
||||
this.backend.setArticlePublished(article);
|
||||
$("#setpublished").innerHTML = "";
|
||||
$("#setpublished").removeClass('inactive');
|
||||
}
|
||||
else {
|
||||
article.published = false;
|
||||
this.backend.setArticleUnpublished(article);
|
||||
$("#setpublished").innerHTML = "☁";
|
||||
$("#setpublished").addClass('inactive');
|
||||
}
|
||||
|
||||
};
|
||||
|
|
Reference in a new issue