dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Simplify the wizard

old/redesign
Ruud 10 years ago
parent
2a2d05e203
commit
ba5483cb6c
5 changed files with 266 additions and 372 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 448
      couchpotato/core/plugins/wizard/static/wizard.js
  2. 116
      couchpotato/core/plugins/wizard/static/wizard.scss
  3. 2
      couchpotato/static/scripts/combined.base.min.js
  4. 46
      couchpotato/static/scripts/combined.plugins.min.js
  5. 26
      couchpotato/static/style/combined.min.css

448
couchpotato/core/plugins/wizard/static/wizard.js
View File

@ -1,246 +1,202 @@
Page.Wizard = new Class({
Extends: Page.Settings,
order: 70,
name: 'wizard',
has_tab: false,
wizard_only: true,
headers: {
'welcome': {
'title': 'Welcome to the new CouchPotato',
'description': 'To get started, fill in each of the following settings as much as you can.',
'content': new Element('div', {
'styles': {
'margin': '0 0 0 30px'
}
})
},
'general': {
'title': 'General',
'description': 'If you want to access CP from outside your local network, you better secure it a bit with a username & password.'
},
'downloaders': {
'title': 'What download apps are you using?',
'description': 'CP needs an external download app to work with. Choose one below. For more downloaders check settings after you have filled in the wizard. If your download app isn\'t in the list, use the default Blackhole.'
},
'searcher': {
'label': 'Providers',
'title': 'Are you registered at any of these sites?',
'description': 'CP uses these sites to search for movies. A few free are enabled by default, but it\'s always better to have more.'
},
'renamer': {
'title': 'Move & rename the movies after downloading?',
'description': 'The coolest part of CP is that it can move and organize your downloaded movies automagically. Check settings and you can even download trailers, subtitles and other data when it has finished downloading. It\'s awesome!'
},
'automation': {
'title': 'Easily add movies to your wanted list!',
'description': 'You can easily add movies from your favorite movie site, like IMDB, Rotten Tomatoes, Apple Trailers and more. Just install the extension or drag the bookmarklet to your bookmarks.' +
'<br />Once installed, just click the bookmarklet on a movie page and watch the magic happen ;)',
'content': function(){
return App.createUserscriptButtons().setStyles({
'background-image': "url('https://couchpota.to/media/images/userscript.gif')"
});
}
},
'finish': {
'title': 'Finishing Up',
'description': 'Are you done? Did you fill in everything as much as possible?' +
'<br />Be sure to check the settings to see what more CP can do!<br /><br />' +
'<div class="wizard_support">After you\'ve used CP for a while, and you like it (which of course you will), consider supporting CP. Maybe even by writing some code. <br />Or by getting a subscription at <a href="https://usenetserver.com/partners/?a_aid=couchpotato&a_bid=3f357c6f">Usenet Server</a> or <a href="http://www.newshosting.com/partners/?a_aid=couchpotato&a_bid=a0b022df">Newshosting</a>.</div>',
'content': new Element('div').adopt(
new Element('a.button.green', {
'styles': {
'margin-top': 20
},
'text': 'I\'m ready to start the awesomeness, wow this button is big and green!',
'events': {
'click': function(e){
(e).preventDefault();
Api.request('settings.save', {
'data': {
'section': 'core',
'name': 'show_wizard',
'value': 0
},
'useSpinner': true,
'spinnerOptions': {
'target': self.el
},
'onComplete': function(){
window.location = App.createUrl('wanted');
}
});
}
}
})
)
}
},
groups: ['welcome', 'general', 'downloaders', 'searcher', 'renamer', 'automation', 'finish'],
open: function(action, params){
var self = this;
if(!self.initialized){
App.fireEvent('unload');
App.getBlock('header').hide();
self.parent(action, params);
self.addEvent('create', function(){
self.orderGroups();
});
self.initialized = true;
self.scroll = new Fx.Scroll(document.body, {
'transition': 'quint:in:out'
});
}
else
(function(){
var sc = self.el.getElement('.wgroup_'+action);
self.scroll.start(0, sc.getCoordinates().top-80);
}).delay(1);
},
orderGroups: function(){
var self = this;
var form = self.el.getElement('.uniForm');
var tabs = self.el.getElement('.tabs');
self.groups.each(function(group){
var group_container;
if(self.headers[group]){
group_container = new Element('.wgroup_'+group, {
'styles': {
'opacity': 0.2
},
'tween': {
'duration': 350
}
});
if(self.headers[group].include){
self.headers[group].include.each(function(inc){
group_container.addClass('wgroup_'+inc);
});
}
var content = self.headers[group].content;
group_container.adopt(
new Element('h1', {
'text': self.headers[group].title
}),
self.headers[group].description ? new Element('span.description', {
'html': self.headers[group].description
}) : null,
content ? (typeOf(content) == 'function' ? content() : content) : null
).inject(form);
}
var tab_navigation = tabs.getElement('.t_'+group);
if(!tab_navigation && self.headers[group] && self.headers[group].include){
tab_navigation = [];
self.headers[group].include.each(function(inc){
tab_navigation.include(tabs.getElement('.t_'+inc));
});
}
if(tab_navigation && group_container){
tabs.adopt(tab_navigation); // Tab navigation
if(self.headers[group] && self.headers[group].include){
self.headers[group].include.each(function(inc){
self.el.getElement('.tab_'+inc).inject(group_container);
});
new Element('li.t_'+group).adopt(
new Element('a', {
'href': App.createUrl('wizard/'+group),
'text': (self.headers[group].label || group).capitalize()
})
).inject(tabs);
}
else
self.el.getElement('.tab_'+group).inject(group_container); // Tab content
if(tab_navigation.getElement && self.headers[group]){
var a = tab_navigation.getElement('a');
a.set('text', (self.headers[group].label || group).capitalize());
var url_split = a.get('href').split('wizard')[1].split('/');
if(url_split.length > 3)
a.set('href', a.get('href').replace(url_split[url_split.length-3]+'/', ''));
}
}
else {
new Element('li.t_'+group).adopt(
new Element('a', {
'href': App.createUrl('wizard/'+group),
'text': (self.headers[group].label || group).capitalize()
})
).inject(tabs);
}
if(self.headers[group] && self.headers[group].event)
self.headers[group].event.call();
});
// Remove toggle
self.el.getElement('.advanced_toggle').destroy();
// Hide retention
self.el.getElement('.section_nzb').hide();
// Add pointer
new Element('.tab_wrapper').wraps(tabs);
// Add nav
var minimum = self.el.getSize().y-window.getSize().y;
self.groups.each(function(group, nr){
var g = self.el.getElement('.wgroup_'+group);
if(!g || !g.isVisible()) return;
var t = self.el.getElement('.t_'+group);
if(!t) return;
var func = function(){
// Activate all previous ones
self.groups.each(function(groups2, nr2){
var t2 = self.el.getElement('.t_'+groups2);
t2[nr2 > nr ? 'removeClass' : 'addClass' ]('done');
});
g.tween('opacity', 1);
};
if(nr === 0)
func();
new ScrollSpy( {
min: function(){
var c = g.getCoordinates();
var top = c.top-(window.getSize().y/2);
return top > minimum ? minimum : top;
},
max: function(){
var c = g.getCoordinates();
return c.top+(c.height/2);
},
onEnter: func,
onLeave: function(){
g.tween('opacity', 0.2);
}
});
});
}
});
Page.Wizard = new Class({
Extends: Page.Settings,
order: 70,
name: 'wizard',
current: 'welcome',
has_tab: false,
wizard_only: true,
headers: {
'welcome': {
'title': 'Welcome to the new CouchPotato',
'description': 'To get started, fill in each of the following settings as much as you can.',
'content': new Element('div', {
'styles': {
'margin': '0 0 0 30px'
}
})
},
'general': {
'title': 'General',
'description': 'If you want to access CP from outside your local network, you better secure it a bit with a username & password.'
},
'downloaders': {
'title': 'What download apps are you using?',
'description': 'CP needs an external download app to work with. Choose one below. For more downloaders check settings after you have filled in the wizard. If your download app isn\'t in the list, use the default Blackhole.'
},
'searcher': {
'label': 'Providers',
'title': 'Are you registered at any of these sites?',
'description': 'CP uses these sites to search for movies. A few free are enabled by default, but it\'s always better to have more.'
},
'renamer': {
'title': 'Move & rename the movies after downloading?',
'description': 'The coolest part of CP is that it can move and organize your downloaded movies automagically. Check settings and you can even download trailers, subtitles and other data when it has finished downloading. It\'s awesome!'
},
'automation': {
'title': 'Easily add movies to your wanted list!',
'description': 'You can easily add movies from your favorite movie site, like IMDB, Rotten Tomatoes, Apple Trailers and more. Just install the extension or drag the bookmarklet to your bookmarks.' +
'<br />Once installed, just click the bookmarklet on a movie page and watch the magic happen ;)',
'content': function(){
return App.createUserscriptButtons().setStyles({
'background-image': "url('https://couchpota.to/media/images/userscript.gif')"
});
}
},
'finish': {
'title': 'Finishing Up',
'description': 'Are you done? Did you fill in everything as much as possible?' +
'<br />Be sure to check the settings to see what more CP can do!<br /><br />' +
'<div class="wizard_support">After you\'ve used CP for a while, and you like it (which of course you will), consider supporting CP. Maybe even by writing some code. <br />Or by getting a subscription at <a href="https://usenetserver.com/partners/?a_aid=couchpotato&a_bid=3f357c6f">Usenet Server</a> or <a href="http://www.newshosting.com/partners/?a_aid=couchpotato&a_bid=a0b022df">Newshosting</a>.</div>',
'content': new Element('div').adopt(
new Element('a.button.green', {
'styles': {
'margin-top': 20
},
'text': 'I\'m ready to start the awesomeness!',
'events': {
'click': function(e){
(e).preventDefault();
Api.request('settings.save', {
'data': {
'section': 'core',
'name': 'show_wizard',
'value': 0
},
'useSpinner': true,
'spinnerOptions': {
'target': self.el
},
'onComplete': function(){
window.location = App.createUrl('wanted');
}
});
}
}
})
)
}
},
groups: ['welcome', 'general', 'downloaders', 'searcher', 'renamer', 'automation', 'finish'],
open: function(action, params){
var self = this;
if(!self.initialized){
App.fireEvent('unload');
App.getBlock('header').hide();
self.parent(action, params);
self.el.addClass('settings');
self.addEvent('create', function(){
self.orderGroups();
});
self.initialized = true;
self.scroll = new Fx.Scroll(document.body, {
'transition': 'quint:in:out'
});
}
else
(function(){
var sc = self.el.getElement('.wgroup_'+action);
self.scroll.start(0, sc.getCoordinates().top-80);
}).delay(1);
},
orderGroups: function(){
var self = this;
var form = self.el.getElement('.uniForm');
var tabs = self.el.getElement('.tabs').hide();
self.groups.each(function(group){
var group_container;
if(self.headers[group]){
group_container = new Element('.wgroup_'+group);
if(self.headers[group].include){
self.headers[group].include.each(function(inc){
group_container.addClass('wgroup_'+inc);
});
}
var content = self.headers[group].content;
group_container.adopt(
new Element('h1', {
'text': self.headers[group].title
}),
self.headers[group].description ? new Element('span.description', {
'html': self.headers[group].description
}) : null,
content ? (typeOf(content) == 'function' ? content() : content) : null
).inject(form);
}
var tab_navigation = tabs.getElement('.t_'+group);
if(!tab_navigation && self.headers[group] && self.headers[group].include){
tab_navigation = [];
self.headers[group].include.each(function(inc){
tab_navigation.include(tabs.getElement('.t_'+inc));
});
}
if(tab_navigation && group_container){
tabs.adopt(tab_navigation); // Tab navigation
if(self.headers[group] && self.headers[group].include){
self.headers[group].include.each(function(inc){
self.el.getElement('.tab_'+inc).inject(group_container);
});
new Element('li.t_'+group).adopt(
new Element('a', {
'href': App.createUrl('wizard/'+group),
'text': (self.headers[group].label || group).capitalize()
})
).inject(tabs);
}
else
self.el.getElement('.tab_'+group).inject(group_container); // Tab content
if(tab_navigation.getElement && self.headers[group]){
var a = tab_navigation.getElement('a');
a.set('text', (self.headers[group].label || group).capitalize());
var url_split = a.get('href').split('wizard')[1].split('/');
if(url_split.length > 3)
a.set('href', a.get('href').replace(url_split[url_split.length-3]+'/', ''));
}
}
else {
new Element('li.t_'+group).adopt(
new Element('a', {
'href': App.createUrl('wizard/'+group),
'text': (self.headers[group].label || group).capitalize()
})
).inject(tabs);
}
if(self.headers[group] && self.headers[group].event)
self.headers[group].event.call();
});
// Remove toggle
self.el.getElement('.advanced_toggle').destroy();
// Hide retention
self.el.getElement('.section_nzb').hide();
}
});

116
couchpotato/core/plugins/wizard/static/wizard.scss
View File

@ -1,84 +1,62 @@
.page.wizard .uniForm {
margin: 0 0 30px;
width: 83%;
}
.page.wizard h1 {
padding: 10px 0;
display: block;
font-size: 30px;
margin: 80px 5px 0;
}
@import "_mixins";
.page.wizard .description {
padding: 10px 5px;
font-size: 1.45em;
line-height: 1.4em;
display: block;
}
.page.wizard {
.page.wizard .tab_wrapper {
background: #5c697b;
height: 65px;
font-size: 1.75em;
position: fixed;
top: 0;
margin: 0;
width: 100%;
left: 0;
z-index: 2;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.navigation.navigation {
display: none;
}
.page.wizard .tab_wrapper .tabs {
padding: 0;
margin: 0 auto;
.tab_content.tab_content {
display: block;
height: 100%;
width: 100%;
max-width: 960px;
}
.page.wizard .tabs li {
display: inline-block;
height: 100%;
}
.page.wizard .tabs li a {
padding: 20px 10px;
height: 100%;
display: block;
color: #FFF;
font-weight: normal;
border-bottom: 4px solid transparent;
fieldset {
.ctrlHolder, h2 {
padding: $padding/4;
}
}
}
.page.wizard .tabs li:hover a { border-color: #047792; }
.page.wizard .tabs li.done a { border-color: #04bce6; }
h1 {
padding: 10px 0;
display: block;
font-size: 30px;
margin: 80px 5px 0;
font-weight: 300;
}
.page.wizard .tab_wrapper .pointer {
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid #5c697b;
.description {
padding: $padding/2 $padding/4;
font-size: 1.45em;
line-height: 1.4em;
display: block;
position: absolute;
top: 44px;
}
.page.wizard .tab_content {
margin: 20px 0 160px;
}
form.uniForm.containers {
margin: 0;
}
.page.wizard form > div {
min-height: 300px;
}
form > div {
min-height: 300px;
max-width: $mq-desktop;
padding: $padding;
margin: 0 auto;
.page.wizard .button.green {
padding: 20px;
font-size: 25px;
margin: 10px 0 80px;
display: block;
}
@include media-phablet {
padding: $padding/2;
}
}
.button.green {
padding: 20px;
font-size: 25px;
margin: 10px 0 80px;
display: inline-block;
}
.tab_nzb_providers {
margin: 20px 0 0 0;
}
.page.wizard .tab_nzb_providers {
margin: 20px 0 0 0;
}

2
couchpotato/static/scripts/combined.base.min.js
View File

@ -667,7 +667,7 @@ var PageBase = new Class({
}).grab(self.content = new Element("div.scroll_content"));
App.addEvent("load", function() {
setTimeout(function() {
if (!App.mobile_screen) {
if (!App.mobile_screen && !App.getOption("dev")) {
self.content.addEvent("scroll", self.preventHover.bind(self));
}
}, 100);

46
couchpotato/static/scripts/combined.plugins.min.js
View File

@ -3707,6 +3707,7 @@ Page.Wizard = new Class({
Extends: Page.Settings,
order: 70,
name: "wizard",
current: "welcome",
has_tab: false,
wizard_only: true,
headers: {
@ -3752,7 +3753,7 @@ Page.Wizard = new Class({
styles: {
"margin-top": 20
},
text: "I'm ready to start the awesomeness, wow this button is big and green!",
text: "I'm ready to start the awesomeness!",
events: {
click: function(e) {
e.preventDefault();
@ -3782,6 +3783,7 @@ Page.Wizard = new Class({
App.fireEvent("unload");
App.getBlock("header").hide();
self.parent(action, params);
self.el.addClass("settings");
self.addEvent("create", function() {
self.orderGroups();
});
@ -3797,18 +3799,11 @@ Page.Wizard = new Class({
orderGroups: function() {
var self = this;
var form = self.el.getElement(".uniForm");
var tabs = self.el.getElement(".tabs");
var tabs = self.el.getElement(".tabs").hide();
self.groups.each(function(group) {
var group_container;
if (self.headers[group]) {
group_container = new Element(".wgroup_" + group, {
styles: {
opacity: .2
},
tween: {
duration: 350
}
});
group_container = new Element(".wgroup_" + group);
if (self.headers[group].include) {
self.headers[group].include.each(function(inc) {
group_container.addClass("wgroup_" + inc);
@ -3855,36 +3850,5 @@ Page.Wizard = new Class({
});
self.el.getElement(".advanced_toggle").destroy();
self.el.getElement(".section_nzb").hide();
new Element(".tab_wrapper").wraps(tabs);
var minimum = self.el.getSize().y - window.getSize().y;
self.groups.each(function(group, nr) {
var g = self.el.getElement(".wgroup_" + group);
if (!g || !g.isVisible()) return;
var t = self.el.getElement(".t_" + group);
if (!t) return;
var func = function() {
self.groups.each(function(groups2, nr2) {
var t2 = self.el.getElement(".t_" + groups2);
t2[nr2 > nr ? "removeClass" : "addClass"]("done");
});
g.tween("opacity", 1);
};
if (nr === 0) func();
new ScrollSpy({
min: function() {
var c = g.getCoordinates();
var top = c.top - window.getSize().y / 2;
return top > minimum ? minimum : top;
},
max: function() {
var c = g.getCoordinates();
return c.top + c.height / 2;
},
onEnter: func,
onLeave: function() {
g.tween("opacity", .2);
}
});
});
}
});

26
couchpotato/static/style/combined.min.css
View File

@ -1,8 +1,9 @@
.movies>.description a:hover,.page.movie_details .releases .buttons a:hover{text-decoration:underline}
.messages .message,.more_menu .wrapper,.search_form .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
.search_form{display:inline-block;z-index:11;width:44px;position:relative}
.search_form *{-webkit-transform:translateZ(0);transform:translateZ(0)}
.search_form .icon-search{position:absolute;z-index:2;top:50%;left:0;height:100%;text-align:center;color:#FFF;font-size:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.search_form .wrapper{position:absolute;left:44px;bottom:0;background:#ac0000;border-radius:3px 0 0 3px;display:none;box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
.search_form .wrapper{position:absolute;left:44px;bottom:0;background:#ac0000;border-radius:3px 0 0 3px;display:none}
.search_form .wrapper:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';display:block;position:absolute;height:10px;width:10px;background:#ac0000;left:-6px;bottom:16px;z-index:1}
.search_form .input{background:#FFF;border-radius:3px 0 0 3px;position:relative;left:4px;height:44px;overflow:hidden;width:100%}
.search_form .input input{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1}
@ -431,28 +432,23 @@
#profile_ordering li .handle:hover{opacity:1}
.group_sizes .item .label{min-width:150px}
.group_sizes .item .max,.group_sizes .item .min{display:inline-block;width:70px!important;min-width:0!important;margin-right:10px;text-align:center}
.page.userscript .media_result .year,.page.wizard .navigation.navigation{display:none}
.page.userscript{position:absolute;width:100%;top:0;bottom:0;left:0;right:0;padding:0}
.page.userscript .frame.loading{text-align:center;font-size:20px;padding:20px}
.page.userscript .media_result{height:140px}
.page.userscript .media_result .thumbnail{width:90px}
.page.userscript .media_result .options{left:90px;padding:54px 15px}
.page.userscript .media_result .year{display:none}
.page.userscript .media_result .options select[name=title]{width:190px}
.page.userscript .media_result .options select[name=profile]{width:70px}
.page.wizard .uniForm{margin:0 0 30px;width:83%}
.page.wizard h1{padding:10px 0;display:block;font-size:30px;margin:80px 5px 0}
.page.wizard .tab_content.tab_content{display:block}
.page.wizard .tab_content.tab_content fieldset .ctrlHolder,.page.wizard .tab_content.tab_content fieldset h2{padding:5px}
.page.wizard h1{padding:10px 0;display:block;font-size:30px;margin:80px 5px 0;font-weight:300}
.page.wizard .description{padding:10px 5px;font-size:1.45em;line-height:1.4em;display:block}
.page.wizard .tab_wrapper{background:#5c697b;height:65px;font-size:1.75em;position:fixed;top:0;margin:0;width:100%;left:0;z-index:2;box-shadow:0 0 10px rgba(0,0,0,.1)}
.messages .message,.more_menu .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
.page.wizard .tab_wrapper .tabs{padding:0;margin:0 auto;display:block;height:100%;width:100%;max-width:960px}
.page.wizard .tabs li{display:inline-block;height:100%}
.page.wizard .tabs li a{padding:20px 10px;height:100%;display:block;color:#FFF;font-weight:400;border-bottom:4px solid transparent}
.page.wizard .tabs li:hover a{border-color:#047792}
.page.wizard .tabs li.done a{border-color:#04bce6}
.page.wizard .tab_wrapper .pointer{border-right:10px solid transparent;border-left:10px solid transparent;border-top:10px solid #5c697b;display:block;position:absolute;top:44px}
.page.wizard .tab_content{margin:20px 0 160px}
.page.wizard form>div{min-height:300px}
.page.wizard .button.green{padding:20px;font-size:25px;margin:10px 0 80px;display:block}
.page.wizard form.uniForm.containers{margin:0}
.page.wizard form>div{min-height:300px;max-width:1024px;padding:20px;margin:0 auto}
@media (max-width:480px){.page.wizard form>div{padding:10px}
}
.page.wizard .button.green{padding:20px;font-size:25px;margin:10px 0 80px;display:inline-block}
.page.wizard .tab_nzb_providers{margin:20px 0 0}
.api_docs h1{font-size:25px;padding:20px 40px}
.api_docs pre{background:#eee;font-family:monospace;margin:0;padding:10px;width:100%;display:block;font-size:12px}

Write Preview
Loading…
Cancel
Save