Two-states buttons are now using opacity instead of two icons.

This commit is contained in:
Bonbadil 2014-10-16 00:06:00 +02:00
parent 8b0cc42075
commit de93b8059a
3 changed files with 28 additions and 28 deletions

View file

@ -125,8 +125,8 @@ section > header h1 {
margin-left: 10px; margin-left: 10px;
} }
#setpublished { display: none;} .invisible { display: none; }
#setpublished.active { display: inline;} .inactive { opacity: 0.4; }
.settings, .list { .settings, .list {
float: left; float: left;

View file

@ -23,7 +23,7 @@
<header class="bar"> <header class="bar">
<a class="button icon settings" href="#settings">&#9881;</a> <a class="button icon settings" href="#settings">&#9881;</a>
<a class="button icon reload" href="#reload">&#128260;</a> <a class="button icon reload" href="#reload">&#128260;</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> <canvas width="40" height="40"></canvas>
</header> </header>
<article> <article>
@ -87,9 +87,9 @@
<section id="full"> <section id="full">
<header class="bar"> <header class="bar">
<a class="button icon list" href="#list">&#57349;</a> <a class="button icon list" href="#list">&#57349;</a>
<a id="setpublished" class="button icon" href="#published">&#9729;</a> <a id="setpublished" class="button icon inactive invisible" href="#published">&#59194;</a>
<a id="setstarred" class="button icon" href="#starred">&#9734;</a> <a id="setstarred" class="button icon inactive" href="#starred">&#9733;</a>
<a id="setunread" class="button icon" href="#unread"></a> <a id="setunread" class="button icon inactive" href="#unread"></a>
<canvas width="40" height="40"></canvas> <canvas width="40" height="40"></canvas>
</header> </header>
<article> <article>

View file

@ -111,7 +111,7 @@ App.prototype.after_login = function(backend) {
this.backend = new Pond(this, localStorage.server_url, localStorage.session_id) this.backend = new Pond(this, localStorage.server_url, localStorage.session_id)
} else { } else {
this.backend = new TinyTinyRSS(this, localStorage.server_url, localStorage.session_id); this.backend = new TinyTinyRSS(this, localStorage.server_url, localStorage.session_id);
$("#setpublished").addClass("active"); $("#setpublished").removeClass("invisible");
} }
var numArticles = localStorage.numArticles; var numArticles = localStorage.numArticles;
@ -158,7 +158,7 @@ App.prototype.setColor = function(color) {
App.prototype.reload = function() { App.prototype.reload = function() {
this.unread_articles = []; this.unread_articles = [];
$("#all-read").innerHTML = "❌"; $("#all-read").addClass('inactive');
var number=parseInt(localStorage.numArticles); var number=parseInt(localStorage.numArticles);
this.backend.reload(this.gotUnreadFeeds.bind(this),number); this.backend.reload(this.gotUnreadFeeds.bind(this),number);
}; };
@ -251,9 +251,9 @@ App.prototype.updateList = function() {
}, this); }, this);
if(unread > 0) { if(unread > 0) {
$("#all-read").innerHTML = "❌"; $("#all-read").addClass('inactive');
} else { } else {
$("#all-read").innerHTML = "✓"; $("#all-read").removeClass('inactive');
} }
this.updatePieChart(); this.updatePieChart();
@ -338,21 +338,21 @@ App.prototype.showFull = function(article, slide_back) {
}); });
if(article.unread) { if(article.unread) {
$("#setunread").innerHTML = "❌"; $("#setunread").addClass('inactive');
} else { } else {
$("#setunread").innerHTML = "✓"; $("#setunread").removeClass('inactive');
} }
if(article.marked) { if(!article.marked) {
$("#setstarred").innerHTML = "&#9733;"; $("#setstarred").addClass('inactive');
} else { } else {
$("#setstarred").innerHTML = "&#9734;"; $("#setstarred").removeClass('inactive');
} }
if(article.published) { if(!article.published) {
$("#setpublished").innerHTML = "&#59153;"; $("#setpublished").addClass('inactive');
} else { } else {
$("#setpublished").innerHTML = "&#9729;"; $("#setpublished").removeClass('inactive');
} }
}; };
@ -390,7 +390,7 @@ App.prototype.setCurrentRead = function() {
article.set_unread = false; article.set_unread = false;
$("#setunread").innerHTML = "✓"; $("#setunread").removeClass('inactive');
this.updatePieChart(); this.updatePieChart();
}; };
@ -400,11 +400,11 @@ App.prototype.toggleCurrentUnread = function() {
if(article.unread) { if(article.unread) {
article.unread = false; article.unread = false;
article.set_unread = false; article.set_unread = false;
$("#setunread").innerHTML = "✓"; $("#setunread").removeClass('inactive');
} else { } else {
article.unread = true; article.unread = true;
article.set_unread = true; article.set_unread = true;
$("#setunread").innerHTML = "❌"; $("#setunread").addClass('inactive');
} }
this.updateList(); this.updateList();
@ -413,7 +413,7 @@ App.prototype.toggleCurrentUnread = function() {
App.prototype.toggleAllRead = function() { App.prototype.toggleAllRead = function() {
if($("#all-read").innerHTML == "❌") { // set all read if($("#all-read").hasClass('inactive')) { // set all read
var articles = []; var articles = [];
for (var i = 0; i < this.unread_articles.length; i++) { for (var i = 0; i < this.unread_articles.length; i++) {
@ -422,7 +422,7 @@ App.prototype.toggleAllRead = function() {
article.set_unread = false; article.set_unread = false;
articles.push(article); articles.push(article);
} }
$("#all-read").innerHTML = "&#10003;"; $("#all-read").removeClass('inactive');
this.updateList(); this.updateList();
@ -437,7 +437,7 @@ App.prototype.toggleAllRead = function() {
article.set_unread = false; article.set_unread = false;
articles.push(article); articles.push(article);
} }
$("#all-read").innerHTML = "&#10060;"; $("#all-read").addClass('inactive');
this.updateList(); this.updateList();
this.backend.setArticlesUnread(articles); this.backend.setArticlesUnread(articles);
@ -453,13 +453,13 @@ App.prototype.toggleStarred = function() {
article.marked = true; article.marked = true;
this.updateList(); this.updateList();
this.backend.setArticleStarred(article); this.backend.setArticleStarred(article);
$("#setstarred").innerHTML = "&#9733;"; $("#setstarred").removeClass('inactive');
} }
else { else {
article.marked = false; article.marked = false;
this.updateList(); this.updateList();
this.backend.setArticleUnstarred(article); this.backend.setArticleUnstarred(article);
$("#setstarred").innerHTML = "&#9734;"; $("#setstarred").addClass('inactive');
} }
}; };
@ -471,12 +471,12 @@ App.prototype.togglePublished = function() {
if(!article.published) { if(!article.published) {
article.published = true; article.published = true;
this.backend.setArticlePublished(article); this.backend.setArticlePublished(article);
$("#setpublished").innerHTML = "&#59153;"; $("#setpublished").removeClass('inactive');
} }
else { else {
article.published = false; article.published = false;
this.backend.setArticleUnpublished(article); this.backend.setArticleUnpublished(article);
$("#setpublished").innerHTML = "&#9729;"; $("#setpublished").addClass('inactive');
} }
}; };