Icon replacements

This commit is contained in:
Ruud
2013-05-10 15:14:47 +02:00
parent f3c60e8fa6
commit fede348fbd
8 changed files with 125 additions and 72 deletions
@@ -1,6 +1,6 @@
var MovieAction = new Class({ var MovieAction = new Class({
class_name: 'action icon', class_name: 'action icon2',
initialize: function(movie){ initialize: function(movie){
var self = this; var self = this;
@@ -82,7 +82,7 @@ MA.Release = new Class({
create: function(){ create: function(){
var self = this; var self = this;
self.el = new Element('a.releases.icon.download', { self.el = new Element('a.releases.download', {
'title': 'Show the releases that are available for ' + self.movie.getTitle(), 'title': 'Show the releases that are available for ' + self.movie.getTitle(),
'events': { 'events': {
'click': self.show.bind(self) 'click': self.show.bind(self)
@@ -147,11 +147,11 @@ MA.Release = new Class({
new Element('span.age', {'text': self.get(release, 'age')}), new Element('span.age', {'text': self.get(release, 'age')}),
new Element('span.score', {'text': self.get(release, 'score')}), new Element('span.score', {'text': self.get(release, 'score')}),
new Element('span.provider', { 'text': provider, 'title': provider }), new Element('span.provider', { 'text': provider, 'title': provider }),
release.info['detail_url'] ? new Element('a.info.icon', { release.info['detail_url'] ? new Element('a.info.icon2', {
'href': release.info['detail_url'], 'href': release.info['detail_url'],
'target': '_blank' 'target': '_blank'
}) : null, }) : new Element('a'),
new Element('a.download.icon', { new Element('a.download.icon2', {
'events': { 'events': {
'click': function(e){ 'click': function(e){
(e).preventDefault(); (e).preventDefault();
@@ -160,7 +160,7 @@ MA.Release = new Class({
} }
} }
}), }),
new Element('a.delete.icon', { new Element('a.delete.icon2', {
'events': { 'events': {
'click': function(e){ 'click': function(e){
(e).preventDefault(); (e).preventDefault();
@@ -243,13 +243,13 @@ MA.Release = new Class({
self.trynext_container = new Element('div.buttons.trynext').inject(self.movie.info_container); self.trynext_container = new Element('div.buttons.trynext').inject(self.movie.info_container);
self.trynext_container.adopt( self.trynext_container.adopt(
self.next_release ? [new Element('a.icon.readd', { self.next_release ? [new Element('a.icon2.readd', {
'text': self.last_release ? 'Download another release' : 'Download the best release', 'text': self.last_release ? 'Download another release' : 'Download the best release',
'events': { 'events': {
'click': self.tryNextRelease.bind(self) 'click': self.tryNextRelease.bind(self)
} }
}), }),
new Element('a.icon.download', { new Element('a.icon2.download', {
'text': 'pick one yourself', 'text': 'pick one yourself',
'events': { 'events': {
'click': function(){ 'click': function(){
@@ -257,7 +257,7 @@ MA.Release = new Class({
} }
} }
})] : null, })] : null,
new Element('a.icon.completed', { new Element('a.icon2.completed', {
'text': 'mark this movie done', 'text': 'mark this movie done',
'events': { 'events': {
'click': function(){ 'click': function(){
@@ -293,7 +293,7 @@ MA.Release = new Class({
var self = this; var self = this;
var release_el = self.release_container.getElement('#release_'+release.id), var release_el = self.release_container.getElement('#release_'+release.id),
icon = release_el.getElement('.download.icon'); icon = release_el.getElement('.download.icon2');
self.movie.busy(true); self.movie.busy(true);
+37 -18
View File
@@ -412,13 +412,14 @@
.movies .data .actions { .movies .data .actions {
position: absolute; position: absolute;
bottom: 20px; bottom: 17px;
right: 20px; right: 20px;
line-height: 0; line-height: 0;
top: 0; top: 0;
display: block;
width: auto;
opacity: 0; opacity: 0;
display: none; display: none;
width: 0;
} }
@media all and (max-width: 480px) { @media all and (max-width: 480px) {
.movies .data .actions { .movies .data .actions {
@@ -429,7 +430,6 @@
.movies .movie:hover .data .actions { .movies .movie:hover .data .actions {
opacity: 1; opacity: 1;
display: inline-block; display: inline-block;
width: auto;
} }
.movies.details_list .data .actions { .movies.details_list .data .actions {
@@ -451,13 +451,23 @@
.movies .movie:hover .action:hover { opacity: 1; } .movies .movie:hover .action:hover { opacity: 1; }
.movies .data .action { .movies .data .action {
background-repeat: no-repeat;
background-position: center;
display: inline-block; display: inline-block;
width: 26px; height: 22px;
height: 26px; min-width: 33px;
padding: 3px; padding: 0 5px;
line-height: 26px;
text-align: center;
font-size: 13px;
color: #FFF;
margin-left: 1px;
} }
.movies .data .action.trailer { color: #FFF; }
.movies .data .action.download { color: #b9dec0; }
.movies .data .action.edit { color: #c6b589; }
.movies .data .action.refresh { color: #cbeecc; }
.movies .data .action.delete { color: #e9b0b0; }
.movies .data .action.directory { color: #ffed92; }
.movies .data .action.readd { color: #c2fac5; }
.movies.mass_edit_list .movie .data .actions { .movies.mass_edit_list .movie .data .actions {
display: none; display: none;
@@ -524,8 +534,10 @@
text-decoration: line-through; text-decoration: line-through;
color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.4);
} }
.movies .options .table .item.ignored .delete { .movies .options .table .item.ignored .delete:before {
background-image: url('../images/icon.undo.png'); display: inline-block;
content: "\e04b";
transform: scale(-1, 1);
} }
.movies .options .table .item:last-child { border: 0; } .movies .options .table .item:last-child { border: 0; }
@@ -571,10 +583,12 @@
width: 30px !important; width: 30px !important;
height: 20px; height: 20px;
opacity: 0.8; opacity: 0.8;
line-height: 25px;
} }
.movies .options .table a:hover { .movies .options .table a:hover { opacity: 1; }
opacity: 1; .movies .options .table a.download { color: #a7fbaf; }
} .movies .options .table a.delete { color: #fda3a3; }
.movies .options .table .ignored a.delete { color: #b5fda3; }
.movies .options .table .head > * { .movies .options .table .head > * {
font-weight: bold; font-weight: bold;
@@ -642,11 +656,10 @@
.movies .movie .trynext { .movies .movie .trynext {
display: inline; display: inline;
position: absolute; position: absolute;
right: 145px; right: 180px;
z-index: 2; z-index: 2;
opacity: 0; opacity: 0;
background: #4e5969; background: #4e5969;
min-width: 300px;
text-align: right; text-align: right;
height: 100%; height: 100%;
top: 0; top: 0;
@@ -659,7 +672,7 @@
} }
.movies.mass_edit_list .trynext { display: none; } .movies.mass_edit_list .trynext { display: none; }
.wanted .movies .movie .trynext { .wanted .movies .movie .trynext {
padding-right: 50px; padding-right: 30px;
} }
.movies .movie:hover .trynext { .movies .movie:hover .trynext {
opacity: 1; opacity: 1;
@@ -667,7 +680,7 @@
.movies.details_list .movie .trynext { .movies.details_list .movie .trynext {
background: #47515f; background: #47515f;
padding: 2px 0; padding: 0;
right: 0; right: 0;
height: 25px; height: 25px;
} }
@@ -678,8 +691,14 @@
margin-right: 10px; margin-right: 10px;
color: #FFF; color: #FFF;
height: 100%; height: 100%;
line-height: 30px; line-height: 27px;
font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
} }
.movies .movie .trynext a:before {
margin: 2px 0 0 -20px;
position: absolute;
font-family: 'Elusive-Icons';
}
.movies.details_list .movie .trynext a { .movies.details_list .movie .trynext a {
line-height: 23px; line-height: 23px;
} }
@@ -139,9 +139,6 @@ var Movie = new Class({
'text': self.data.library.year || 'n/a' 'text': self.data.library.year || 'n/a'
}) })
), ),
self.rating = new Element('div.rating.icon', {
'text': self.data.library.rating
}),
self.description = new Element('div.description', { self.description = new Element('div.description', {
'text': self.data.library.plot 'text': self.data.library.plot
}), }),
@@ -199,9 +196,6 @@ var Movie = new Class({
self.actions.adopt(action) self.actions.adopt(action)
}); });
if(!self.data.library.rating)
self.rating.hide();
}, },
addQuality: function(quality_id){ addQuality: function(quality_id){
@@ -13,11 +13,11 @@
.profile > .delete { .profile > .delete {
position: absolute; position: absolute;
padding: 25px 20px; padding: 16px;
background-position: center;
right: 0; right: 0;
cursor: pointer; cursor: pointer;
opacity: 0.6; opacity: 0.6;
color: #fd5353;
} }
.profile > .delete:hover { .profile > .delete:hover {
opacity: 1; opacity: 1;
@@ -29,6 +29,7 @@
.profile .qualities { .profile .qualities {
min-height: 80px; min-height: 80px;
padding-top: 0;
} }
.profile .formHint { .profile .formHint {
@@ -97,11 +98,13 @@
} }
.profile .types .type .delete { .profile .types .type .delete {
background-position: left center;
height: 20px; height: 20px;
width: 20px; width: 20px;
line-height: 20px;
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
font-size: 13px;
color: #fd5353;
} }
.profile .types .type:hover:not(.is_empty) .delete { .profile .types .type:hover:not(.is_empty) .delete {
@@ -24,7 +24,7 @@ var Profile = new Class({
var data = self.data; var data = self.data;
self.el = new Element('div.profile').adopt( self.el = new Element('div.profile').adopt(
self.delete_button = new Element('span.delete.icon', { self.delete_button = new Element('span.delete.icon2', {
'events': { 'events': {
'click': self.del.bind(self) 'click': self.del.bind(self)
} }
@@ -256,7 +256,7 @@ Profile.Type = new Class({
} }
}) })
), ),
new Element('span.delete.icon', { new Element('span.delete.icon2', {
'events': { 'events': {
'click': self.del.bind(self) 'click': self.del.bind(self)
} }
+2 -2
View File
@@ -862,7 +862,7 @@ Option.Directories = new Class({
$(dir).addClass('is_empty'); $(dir).addClass('is_empty');
// Add remove button // Add remove button
new Element('a.icon.delete', { new Element('a.icon2.delete', {
'events': { 'events': {
'click': self.delItem.bind(self, dir) 'click': self.delItem.bind(self, dir)
} }
@@ -1371,7 +1371,7 @@ Option.Combined = new Class({
item[value_empty == value_count ? 'addClass' : 'removeClass']('is_empty'); item[value_empty == value_count ? 'addClass' : 'removeClass']('is_empty');
new Element('a.icon.delete', { new Element('a.icon2.delete', {
'events': { 'events': {
'click': self.deleteCombinedItem.bind(self) 'click': self.deleteCombinedItem.bind(self)
} }
+28 -12
View File
@@ -108,7 +108,7 @@ body > .spinner, .mask{
} }
.button { .button {
background: #5082bc url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi/v//vwMTAwPDfzjBgMpFI/7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA+CugAAAAAElFTkSuQmCC") repeat-x; background: #5082bc;
padding: 5px 10px 6px; padding: 5px 10px 6px;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
@@ -154,6 +154,7 @@ body > .spinner, .mask{
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: 15px; font-size: 15px;
color: #FFF;
} }
.icon2.cog:before { content: "\e109"; } .icon2.cog:before { content: "\e109"; }
@@ -161,6 +162,30 @@ body > .spinner, .mask{
.icon2.search:before { content: "\e03e"; } .icon2.search:before { content: "\e03e"; }
.icon2.return-key:before { content: "\e111"; } .icon2.return-key:before { content: "\e111"; }
.icon2.close:before { content: "\e04e"; } .icon2.close:before { content: "\e04e"; }
.icon2.trailer:before { content: "\e0e9"; }
.icon2.download:before { content: "\e0c3"; }
.icon2.edit:before { content: "\e068"; }
.icon2.refresh:before { content: "\e04f"; font-weight: bold; }
.icon2.delete:before { content: "\e04e"; }
.icon2.directory:before { content: "\e097"; }
.icon2.completed:before { content: "\e070"; }
.icon2.info:before { content: "\e089"; }
.icon2.attention:before { content: "\e009"; }
.icon2.readd:before {
display: inline-block;
content: "\e04b";
transform: scale(-1, 1);
}
.icon2.imdb:before {
content: "IMDb";
color: #444;
padding: 2px;
border-radius: 3px;
background-color: #fbec98;
font: bold 8px Arial;
position: relative;
top: -3px;
}
.icon2.menu:before { .icon2.menu:before {
content: "\e076 \e076 \e076"; content: "\e076 \e076 \e076";
line-height: 6px; line-height: 6px;
@@ -502,14 +527,7 @@ body > .spinner, .mask{
.select .selection { .select .selection {
display: inline-block; display: inline-block;
padding: 0 30px 0 20px; padding: 0 30px 0 20px;
border-radius:30px; background: #5b9bd1 url('../images/sprite.png') no-repeat 94% -53px;
box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
background: url('../images/sprite.png') no-repeat 94% -53px, linear-gradient(
180deg,
#5b9bd1 0%,
#406db8 100%
);
} }
.select .selection .selectionDisplay { .select .selection .selectionDisplay {
@@ -529,11 +547,9 @@ body > .spinner, .mask{
.select .list { .select .list {
display: none; display: none;
background: #282d34; background: #282d34;
border: 1px solid #1f242b;
position: absolute; position: absolute;
margin: 28px 0 0 0; margin: 25px 0 0 0;
box-shadow: 0 20px 20px -10px rgba(0,0,0,0.4); box-shadow: 0 20px 20px -10px rgba(0,0,0,0.4);
border-radius:3px;
z-index: 3; z-index: 3;
} }
.select.active .list { .select.active .list {
+39 -18
View File
@@ -252,7 +252,7 @@
display: block; display: block;
text-align: right; text-align: right;
height: 20px; height: 20px;
margin: 0 0 -37px; margin: 0 0 -38px;
} }
.page .advanced_toggle .check { .page .advanced_toggle .check {
margin: 0; margin: 0;
@@ -262,18 +262,24 @@
color: #edc07f; color: #edc07f;
} }
.page .directory { .page form .directory {
display: inline-block; display: inline-block;
padding: 0 4% 0 4px; padding: 0 4% 0 4px;
font-size: 13px; font-size: 13px;
width: 30%; width: 30%;
background-image: url('../images/icon.folder.gif');
background-repeat: no-repeat;
background-position: 97% center;
overflow: hidden; overflow: hidden;
vertical-align: top; vertical-align: top;
position: relative;
} }
.page .directory > span { .page form .directory:after {
content: "\e097";
position: absolute;
right: 7px;
top: 2px;
font-family: 'Elusive-Icons';
color: #f5e39c;
}
.page form .directory > span {
height: 25px; height: 25px;
display: inline-block; display: inline-block;
float: right; float: right;
@@ -281,15 +287,19 @@
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.page form .directory span:empty:before {
content: 'No folder selected';
font-style: italic;
opacity: .3;
}
.page .directory_list { .page .directory_list {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
width: 450px; width: 450px;
margin: 28px 0 20px 18%; margin: 28px 0 20px 18.4%;
background: #5c697b; background: #5c697b;
border-radius: 3px; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.55);
box-shadow: 0 0 50px rgba(0,0,0,0.55);
} }
.page .directory_list .pointer { .page .directory_list .pointer {
@@ -299,7 +309,7 @@
display: block; display: block;
position: absolute; position: absolute;
width: 0px; width: 0px;
margin: -6px 0 0 22%; margin: -6px 0 0 45%;
} }
.page .directory_list ul { .page .directory_list ul {
@@ -311,11 +321,14 @@
} }
.page .directory_list li { .page .directory_list li {
padding: 4px 10px; padding: 4px 30px 4px 10px;
cursor: pointer; cursor: pointer;
margin: 0 !important; margin: 0 !important;
border-top: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.1);
background: url('../images/right.arrow.png') no-repeat 98% center; background: url('../images/right.arrow.png') no-repeat 98% center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.page .directory_list li:last-child { .page .directory_list li:last-child {
border-bottom: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
@@ -341,7 +354,10 @@
.page .directory_list .actions { .page .directory_list .actions {
clear: both; clear: both;
padding: 4% 4% 2%; padding: 4% 4% 2%;
min-height: 25px; min-height: 45px;
position: relative;
width: 100%;
text-align: right;
} }
.page .directory_list .actions label { .page .directory_list .actions label {
@@ -350,7 +366,7 @@
padding: 0; padding: 0;
} }
.page .directory_list .actions .inlay { .page .directory_list .actions .inlay {
margin: -2px 0 0 7px; margin: 0 0 0 7px;
} }
.page .directory_list .actions .back { .page .directory_list .actions .back {
@@ -360,6 +376,9 @@
padding: 0; padding: 0;
line-height: 120%; line-height: 120%;
vertical-align: top; vertical-align: top;
position: absolute;
text-align: left;
left: 4%;
} }
.page .directory_list .actions:last-child { .page .directory_list .actions:last-child {
@@ -373,10 +392,10 @@
} }
.page .directory_list .actions:last-child > .clear { .page .directory_list .actions:last-child > .clear {
left: -90%; left: 4%;
position: relative; position: absolute;
background-color: #af3128; background-color: #af3128;
} }
.page .directory_list .actions:last-child > .cancel { .page .directory_list .actions:last-child > .cancel {
font-weight: bold; font-weight: bold;
@@ -563,8 +582,10 @@
display: none; display: none;
width: 22px; width: 22px;
height: 22px; height: 22px;
line-height: 22px;
text-align: center;
vertical-align: middle; vertical-align: middle;
background-position: left center; color: #fe3d3d;
} }
.page .combined_table .ctrlHolder:hover .delete { .page .combined_table .ctrlHolder:hover .delete {
display: inline-block; display: inline-block;