From 1c8f1ae98d2cebfa456b81a9724b5d7c1d212609 Mon Sep 17 00:00:00 2001 From: Ruud Date: Tue, 6 Sep 2011 20:53:27 +0200 Subject: [PATCH] Profile settings css --- couchpotato/core/plugins/profile/static/handle.png | Bin 0 -> 160 bytes .../core/plugins/profile/static/profile.css | 96 +++++++++++--- couchpotato/core/plugins/profile/static/profile.js | 145 +++++++++++++-------- couchpotato/core/plugins/quality/static/quality.js | 13 +- couchpotato/static/images/handle.png | Bin 206 -> 0 bytes couchpotato/static/scripts/library/question.js | 81 ++++++++++++ couchpotato/static/style/main.css | 56 ++++++++ couchpotato/static/style/page/settings.css | 2 + couchpotato/templates/_desktop.html | 1 + 9 files changed, 319 insertions(+), 75 deletions(-) create mode 100644 couchpotato/core/plugins/profile/static/handle.png delete mode 100644 couchpotato/static/images/handle.png create mode 100644 couchpotato/static/scripts/library/question.js diff --git a/couchpotato/core/plugins/profile/static/handle.png b/couchpotato/core/plugins/profile/static/handle.png new file mode 100644 index 0000000000000000000000000000000000000000..adff5b2975d044c5f3285813f82fc467ddf240d5 GIT binary patch literal 160 zcmeAS@N?(olHy`uVBq!ia0vp^;y^6M!3HF?%h*|glw^r(L`iUdT1k0gQ7VIDN`6wR zf@f}GdTLN=VoGJ<$y6JlA}3E5$B>F!Nq_$Tw`X3 .delete { - background-position: center; - height: 20px; - width: 20px; -} +/* @override http://192.168.1.20:5000/static/profile_plugin/profile.css */ -.profile .types .type .handle { - background: url('../../images/handle.png') center; - display: inline-block; - height: 20px; - width: 20px; +.add_new_profile { + padding: 20px; + display: block; + text-align: center; + font-size: 20px; + border-bottom: 1px solid rgba(255,255,255,0.2); } -.profile .types .type .delete { - background-position: center; - height: 20px; - width: 20px; -} \ No newline at end of file +.profile { border-bottom: 1px solid rgba(255,255,255,0.2) } + + .profile > .delete { + height: 20px; + width: 20px; + position: absolute; + margin-left: 690px; + padding: 14px; + background-position: center; + } + + .profile .formHint { + width: 250px !important; + } + + .profile .wait_for { + position: absolute; + margin: -45px 0 0 437px; + } + + .profile .wait_for input { + margin: 0 5px !important; + } + + .profile .types { + padding: 0; + margin: 0 20px 0 -4px; + display: inline-block; + } + + .profile .types li { + padding: 3px 5px; + border-bottom: 1px solid rgba(255,255,255,0.2); + } + .profile .types li:last-child { border: 0; } + + .profile .types li > * { + display: inline-block; + vertical-align: middle; + line-height: 0; + margin-right: 10px; + } + + .profile .quality_type select { + width: 186px; + margin-left: -1px; + } + + .profile .types li.is_empty .check, .profile .types li.is_empty .delete, .profile .types li.is_empty .handle { + visibility: hidden; + } + + .profile .types .type .handle { + background: url('./handle.png') center; + display: inline-block; + height: 20px; + width: 20px; + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + margin: 0; + } + + .profile .types .type .delete { + background-position: left center; + height: 20px; + width: 20px; + visibility: hidden; + cursor: pointer; + } + + .profile .types .type:hover:not(.is_empty) .delete { + visibility: visible; + } \ No newline at end of file diff --git a/couchpotato/core/plugins/profile/static/profile.js b/couchpotato/core/plugins/profile/static/profile.js index 080f971..5bf268a 100644 --- a/couchpotato/core/plugins/profile/static/profile.js +++ b/couchpotato/core/plugins/profile/static/profile.js @@ -24,47 +24,32 @@ var Profile = new Class({ var data = self.data; self.el = new Element('div.profile').adopt( - self.header = new Element('h4', {'text': data.label}), new Element('span.delete.icon', { 'events': { 'click': self.del.bind(self) } }), - new Element('div', { - 'class': 'ctrlHolder' - }).adopt( + new Element('.quality_label.ctrlHolder').adopt( new Element('label', {'text':'Name'}), - new Element('input.label.textInput.large', { + new Element('input.inlay', { 'type':'text', 'value': data.label, - 'events': { - 'keyup': function(){ - self.header.set('text', this.get('value')) - } - } + 'placeholder': 'Profile name' }) ), - new Element('div.ctrlHolder').adopt( - new Element('label', {'text':'Wait'}), - new Element('input.wait_for.textInput.xsmall', { + new Element('div.wait_for.ctrlHolder').adopt( + new Element('span', {'text':'Wait'}), + new Element('input.inlay.xsmall', { 'type':'text', 'value': data.types && data.types.length > 0 ? data.types[0].wait_for : 0 }), - new Element('span', {'text':' day(s) for better quality.'}) + new Element('span', {'text':'day(s) for a better quality.'}) ), - new Element('div.ctrlHolder').adopt( - new Element('label', {'text': 'Qualities'}), - new Element('div.head').adopt( - new Element('span.quality_type', {'text': 'Search for'}), - new Element('span.finish', {'html': 'Finish'}) - ), + new Element('div.qualities.ctrlHolder').adopt( + new Element('label', {'text': 'Search for'}), self.type_container = new Element('ol.types'), - new Element('a.addType', { - 'text': 'Add another quality to search for.', - 'href': '#', - 'events': { - 'click': self.addType.bind(self) - } + new Element('div.formHint', { + 'html': "Search these qualities, from top to bottom.
Use the checkbox, if I don't have to search any further." }) ) ); @@ -73,6 +58,8 @@ var Profile = new Class({ if(data.types) Object.each(data.types, self.addType.bind(self)) + + self.addType(); }, save: function(delay){ @@ -96,6 +83,9 @@ var Profile = new Class({ } } }); + + self.addType(); + }).delay(delay, self) }, @@ -105,8 +95,8 @@ var Profile = new Class({ var data = { 'id' : self.data.id, - 'label' : self.el.getElement('.label').get('value'), - 'wait_for' : self.el.getElement('.wait_for').get('value'), + 'label' : self.el.getElement('.quality_label input').get('value'), + 'wait_for' : self.el.getElement('.wait_for input').get('value'), 'types': [] } @@ -124,8 +114,19 @@ var Profile = new Class({ addType: function(data){ var self = this; - var t = new Profile.Type(data); + var has_empty = false; + self.types.each(function(type){ + if($(type).hasClass('is_empty')) + has_empty = true; + }); + + if(has_empty) return; + + var t = new Profile.Type(data, { + 'onChange': self.save.bind(self, 0) + }); $(t).inject(self.type_container); + self.sortable.addItems($(t)); self.types.include(t); @@ -135,23 +136,35 @@ var Profile = new Class({ del: function(){ var self = this; - if(!confirm('Are you sure you want to delete this profile?')) return - - Api.request('profile.delete', { - 'data': { - 'id': self.data.id - }, - 'useSpinner': true, - 'spinnerOptions': { - 'target': self.el - }, - 'onComplete': function(json){ - if(json.success) - self.el.destroy(); - else - alert(json.message) + var label = self.el.getElement('.quality_label input').get('value'); + new Question('Are you sure you want to delete "'+label+'"?', 'Items using this profile, will be set to the default quality.', [{ + 'text': 'Delete "'+label+'"', + 'class': 'delete', + 'events': { + 'click': function(e){ + (e).stop(); + Api.request('profile.delete', { + 'data': { + 'id': self.data.id + }, + 'useSpinner': true, + 'spinnerOptions': { + 'target': self.el + }, + 'onComplete': function(json){ + if(json.success) + self.el.destroy(); + else + alert(json.message) + } + }); + } } - }); + }, { + 'text': 'Cancel', + 'cancel': true + }]); + }, makeSortable: function(){ @@ -180,16 +193,24 @@ var Profile = new Class({ }); -Profile.Type = Class({ +Profile.Type = new Class({ + + Implements: [Events, Options], deleted: false, - initialize: function(data){ + initialize: function(data, options){ var self = this; + self.setOptions(options); - self.data = data; + self.data = data || {}; self.create(); + self.addEvent('change', function(){ + self.el[self.qualities.get('value') == '-1' ? 'addClass' : 'removeClass']('is_empty'); + self.deleted = self.qualities.get('value') == '-1'; + }); + }, create: function(){ @@ -201,10 +222,11 @@ Profile.Type = Class({ self.fillQualities() ), new Element('span.finish').adopt( - self.finish = new Element('input', { - 'type':'checkbox', - 'class':'finish', - 'checked': data.finish + self.finish = new Element('input.inlay.finish[type=checkbox]', { + 'checked': data.finish, + 'events': { + 'change': self.fireEvent.bind(self, 'change') + } }) ), new Element('span.delete.icon', { @@ -213,14 +235,27 @@ Profile.Type = Class({ } }), new Element('span.handle') - ) + ); + + self.el[self.data.quality_id > 0 ? 'removeClass' : 'addClass']('is_empty'); + + new Form.Check(self.finish); }, fillQualities: function(){ var self = this; - self.qualities = new Element('select'); + self.qualities = new Element('select', { + 'events': { + 'change': self.fireEvent.bind(self, 'change') + } + }).adopt( + new Element('option', { + 'text': '+ Add another quality', + 'value': -1 + }) + ); Object.each(Quality.qualities, function(q){ new Element('option', { @@ -250,6 +285,8 @@ Profile.Type = Class({ self.el.addClass('deleted'); self.el.hide(); self.deleted = true; + + self.fireEvent('change'); }, toElement: function(){ diff --git a/couchpotato/core/plugins/quality/static/quality.js b/couchpotato/core/plugins/quality/static/quality.js index f11334c..71646aa 100644 --- a/couchpotato/core/plugins/quality/static/quality.js +++ b/couchpotato/core/plugins/quality/static/quality.js @@ -31,7 +31,7 @@ var QualityBase = new Class({ self.settings = App.getPage('Settings') self.settings.addEvent('create', function(){ var tab = self.settings.createTab('profile', { - 'label': 'Profile', + 'label': 'Profiles', 'name': 'profile' }); @@ -52,10 +52,11 @@ var QualityBase = new Class({ var self = this; self.settings.createGroup({ - 'label': 'Custom', - 'description': 'Discriptions' + 'label': 'Quality Profiles', + 'description': 'Create your own profiles with multiple qualities.', + 'class': 'test123' }).inject(self.content).adopt( - new Element('a.add_new', { + new Element('a.add_new_profile', { 'text': 'Create a new quality profile', 'events': { 'click': function(){ @@ -96,11 +97,11 @@ var QualityBase = new Class({ var group = self.settings.createGroup({ 'label': 'Sizes', - 'description': 'Discriptions', + 'description': 'Edit the minimal and maximum sizes (in MB) for each quality.', 'advanced': true }).inject(self.content) - new Element('div.item.header').adopt( + new Element('div.item.head').adopt( new Element('span.label', {'text': 'Quality'}), new Element('span.min', {'text': 'Min'}), new Element('span.max', {'text': 'Max'}) diff --git a/couchpotato/static/images/handle.png b/couchpotato/static/images/handle.png deleted file mode 100644 index f78e248d5f24a4f4609de1afcb272c5699477ad9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 206 zcmV;<05SiGP)~@jcP;W{zle?Hl`@=&L +