Reordering of settings
This commit is contained in:
Ruud committed
1 parent
ca67370b44
commit
f160bfe779
36 files changed
+370
-176
No files matched your search
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,54 @@
|
||||
Block.More = new Class({
|
||||
|
||||
Extends: BlockBase,
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.el = new Element('div.more_menu').adopt(
|
||||
self.more_option_ul = new Element('ul').adopt(
|
||||
new Element('li').adopt(
|
||||
new Element('a.orange', {
|
||||
'text': 'Restart',
|
||||
'events': {
|
||||
'click': App.restart.bind(App)
|
||||
}
|
||||
})
|
||||
),
|
||||
new Element('li').adopt(
|
||||
new Element('a.red', {
|
||||
'text': 'Shutdown',
|
||||
'events': {
|
||||
'click': App.shutdown.bind(App)
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
new Element('a.button.onlay', {
|
||||
'events': {
|
||||
'click': function(){
|
||||
self.more_option_ul.toggleClass('show')
|
||||
|
||||
if(self.more_option_ul.hasClass('show'))
|
||||
this.addEvent('outerClick', function(){
|
||||
self.more_option_ul.removeClass('show')
|
||||
this.removeEvents('outerClick');
|
||||
})
|
||||
else
|
||||
this.removeEvents('outerClick');
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
},
|
||||
|
||||
addLink: function(tab, position){
|
||||
var self = this
|
||||
|
||||
return new Element('li').adopt(tab).inject(self.more_option_ul, position || 'bottom')
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@@ -59,13 +59,14 @@ var CouchPotato = new Class({
|
||||
$(self.block.header).addClass('header').adopt(
|
||||
new Element('div').adopt(
|
||||
self.block.navigation = new Block.Navigation(self, {}),
|
||||
self.block.search = new Block.Search(self, {})
|
||||
self.block.search = new Block.Search(self, {}),
|
||||
self.block.more = new Block.More(self, {})
|
||||
)
|
||||
),
|
||||
self.content = new Element('div.content'),
|
||||
self.block.footer = new Block.Footer(self, {})
|
||||
);
|
||||
|
||||
|
||||
new ScrollSpy({
|
||||
min: 10,
|
||||
onLeave: function(){
|
||||
@@ -108,7 +109,7 @@ var CouchPotato = new Class({
|
||||
|
||||
try {
|
||||
var page = self.pages[page_name] || self.pages.Wanted;
|
||||
page.open(action, params);
|
||||
page.open(action, params, current_url);
|
||||
page.show();
|
||||
}
|
||||
catch(e){
|
||||
@@ -150,7 +151,7 @@ var CouchPotato = new Class({
|
||||
var self = this;
|
||||
|
||||
(function(){
|
||||
|
||||
|
||||
Api.request('app.available', {
|
||||
'onFailure': function(){
|
||||
self.checkAvailable.delay(1000, self);
|
||||
@@ -161,7 +162,7 @@ var CouchPotato = new Class({
|
||||
self.fireEvent('load');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}).delay(delay || 0)
|
||||
},
|
||||
|
||||
@@ -214,7 +215,7 @@ var Route = new Class({
|
||||
self.page = (url.length > 0) ? url.shift() : self.defaults.page
|
||||
self.action = (url.length > 0) ? url.shift() : self.defaults.action
|
||||
|
||||
self.params = self.defaults.params
|
||||
self.params = Object.merge({}, self.defaults.params);
|
||||
if(url.length > 1){
|
||||
var key
|
||||
url.each(function(el, nr){
|
||||
@@ -226,6 +227,9 @@ var Route = new Class({
|
||||
}
|
||||
})
|
||||
}
|
||||
else if(url.length == 1){
|
||||
self.params[url] = true;
|
||||
}
|
||||
|
||||
return self
|
||||
},
|
||||
|
||||
@@ -38,6 +38,36 @@ var AboutSettingTab = new Class({
|
||||
today = new Date(),
|
||||
one_day = 1000*60*60*24;
|
||||
|
||||
self.settings.createGroup({
|
||||
'label': 'About This CouchPotato',
|
||||
'name': 'variables'
|
||||
}).inject(self.content).adopt(
|
||||
new Element('dl.info').adopt(
|
||||
new Element('dt[text=Version]'),
|
||||
self.version_text = new Element('dd.version', {
|
||||
'text': 'Getting version...',
|
||||
'events': {
|
||||
'click': self.checkForUpdate.bind(self),
|
||||
'mouseenter': function(){
|
||||
this.set('text', 'Check for updates')
|
||||
},
|
||||
'mouseleave': function(){
|
||||
self.fillVersion(Updater.getInfo())
|
||||
}
|
||||
}
|
||||
}),
|
||||
new Element('dt[text=Directories]'),
|
||||
new Element('dd', {'text': App.getOption('app_dir')}),
|
||||
new Element('dd', {'text': App.getOption('data_dir')}),
|
||||
new Element('dt[text=Startup Args]'),
|
||||
new Element('dd', {'html': App.getOption('args')}),
|
||||
new Element('dd', {'html': App.getOption('options')})
|
||||
)
|
||||
);
|
||||
|
||||
if(!self.fillVersion(Updater.getInfo()))
|
||||
Updater.addEvent('loaded', self.fillVersion.bind(self))
|
||||
|
||||
self.settings.createGroup({
|
||||
'name': 'Help Support CouchPotato'
|
||||
}).inject(self.content).adopt(
|
||||
@@ -78,56 +108,6 @@ var AboutSettingTab = new Class({
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
self.settings.createGroup({
|
||||
'label': 'About This CouchPotato',
|
||||
'name': 'variables'
|
||||
}).inject(self.content).adopt(
|
||||
new Element('dl.info').adopt(
|
||||
new Element('dt[text=Version]'),
|
||||
self.version_text = new Element('dd.version', {
|
||||
'text': 'Getting version...',
|
||||
'events': {
|
||||
'click': self.checkForUpdate.bind(self),
|
||||
'mouseenter': function(){
|
||||
this.set('text', 'Check for updates')
|
||||
},
|
||||
'mouseleave': function(){
|
||||
self.fillVersion(Updater.getInfo())
|
||||
}
|
||||
}
|
||||
}),
|
||||
new Element('dt[text=Directories]'),
|
||||
new Element('dd', {'text': App.getOption('app_dir')}),
|
||||
new Element('dd', {'text': App.getOption('data_dir')}),
|
||||
new Element('dt[text=Startup Args]'),
|
||||
new Element('dd', {'html': App.getOption('args')}),
|
||||
new Element('dd', {'html': App.getOption('options')})
|
||||
)
|
||||
);
|
||||
|
||||
if(!self.fillVersion(Updater.getInfo()))
|
||||
Updater.addEvent('loaded', self.fillVersion.bind(self))
|
||||
|
||||
self.settings.createGroup({
|
||||
'name': 'actions'
|
||||
}).inject(self.content).adopt(
|
||||
new Element('div').adopt(
|
||||
new Element('a.button.red', {
|
||||
'text': 'Shutdown',
|
||||
'events': {
|
||||
'click': App.shutdown.bind(App)
|
||||
}
|
||||
}),
|
||||
new Element('a.button.orange', {
|
||||
'text': 'Restart',
|
||||
'events': {
|
||||
'click': App.restart.bind(App)
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
},
|
||||
|
||||
fillVersion: function(json){
|
||||
|
||||
@@ -8,6 +8,21 @@ Page.Settings = new Class({
|
||||
|
||||
tabs: {},
|
||||
current: 'about',
|
||||
has_tab: false,
|
||||
|
||||
initialize: function(options){
|
||||
var self = this;
|
||||
self.parent(options);
|
||||
|
||||
// Add to more menu
|
||||
if(self.name == 'settings')
|
||||
App.getBlock('more').addLink(new Element('a', {
|
||||
'href': App.createUrl(self.name),
|
||||
'text': self.name.capitalize(),
|
||||
'title': self.title
|
||||
}), 'top')
|
||||
|
||||
},
|
||||
|
||||
open: function(action, params){
|
||||
var self = this;
|
||||
@@ -40,8 +55,26 @@ Page.Settings = new Class({
|
||||
var c = 'active';
|
||||
|
||||
var t = self.tabs[tab_name] || self.tabs[self.action] || self.tabs.general;
|
||||
|
||||
// Subtab
|
||||
var subtab = null
|
||||
Object.each(self.params, function(param, subtab_name){
|
||||
subtab = subtab_name;
|
||||
})
|
||||
|
||||
self.el.getElements('li.'+c+' , .tab_content.'+c).each(function(active){
|
||||
active.removeClass(c);
|
||||
});
|
||||
|
||||
if (t.subtabs[subtab]){
|
||||
t.tab[a](c);
|
||||
t.subtabs[subtab].tab[a](c);
|
||||
t.subtabs[subtab].content[a](c);
|
||||
}
|
||||
else {
|
||||
t.tab[a](c);
|
||||
t.content[a](c);
|
||||
}
|
||||
|
||||
return t
|
||||
},
|
||||
@@ -107,10 +140,20 @@ Page.Settings = new Class({
|
||||
new Form.Check(self.advanced_toggle);
|
||||
|
||||
// Add content to tabs
|
||||
var options = [];
|
||||
Object.each(json.options, function(section, section_name){
|
||||
section['section_name'] = section_name;
|
||||
options.include(section);
|
||||
})
|
||||
|
||||
options.sort(function(a, b){
|
||||
return (a.order || 100) - (b.order || 100)
|
||||
}).each(function(section){
|
||||
var section_name = section.section_name;
|
||||
|
||||
// Add groups to content
|
||||
section.groups.sortBy('order').each(function(group){
|
||||
if(group.hidden) return;
|
||||
|
||||
if(self.wizard_only && !group.wizard)
|
||||
return;
|
||||
@@ -118,17 +161,28 @@ Page.Settings = new Class({
|
||||
// Create tab
|
||||
if(!self.tabs[group.tab] || !self.tabs[group.tab].groups)
|
||||
self.createTab(group.tab, {});
|
||||
var content_container = self.tabs[group.tab].content
|
||||
|
||||
// Create subtab
|
||||
if(group.subtab){
|
||||
if (!self.tabs[group.tab].subtabs[group.subtab])
|
||||
self.createSubTab(group.subtab, {}, self.tabs[group.tab], group.tab);
|
||||
var content_container = self.tabs[group.tab].subtabs[group.subtab].content
|
||||
}
|
||||
|
||||
// Create the group
|
||||
if(!self.tabs[group.tab].groups[group.name]){
|
||||
var group_el = self.createGroup(group)
|
||||
.inject(self.tabs[group.tab].content)
|
||||
.inject(content_container)
|
||||
.addClass('section_'+section_name);
|
||||
self.tabs[group.tab].groups[group.name] = group_el
|
||||
}
|
||||
|
||||
// Add options to group
|
||||
group.options.sortBy('order').each(function(option){
|
||||
group.options.sort(function(a, b){
|
||||
return (a.order || 100) - (b.order || 100)
|
||||
}).each(function(option){
|
||||
if(option.hidden) return;
|
||||
var class_name = (option.type || 'string').capitalize();
|
||||
var input = new Option[class_name](section_name, option.name, self.getValue(section_name, option.name), option);
|
||||
input.inject(self.tabs[group.tab].groups[group.name]);
|
||||
@@ -164,6 +218,7 @@ Page.Settings = new Class({
|
||||
|
||||
self.tabs[tab_name] = Object.merge(self.tabs[tab_name], {
|
||||
'tab': tab_el,
|
||||
'subtabs': {},
|
||||
'content': new Element('div.tab_content.tab_'+tab_name).inject(self.containers),
|
||||
'groups': {}
|
||||
})
|
||||
@@ -172,11 +227,43 @@ Page.Settings = new Class({
|
||||
|
||||
},
|
||||
|
||||
createSubTab: function(tab_name, tab, parent_tab, parent_tab_name){
|
||||
var self = this;
|
||||
|
||||
if(parent_tab.subtabs[tab_name])
|
||||
return parent_tab.subtabs[tab_name]
|
||||
|
||||
if(!parent_tab.subtabs_el)
|
||||
parent_tab.subtabs_el = new Element('ul.subtabs').inject(parent_tab.tab);
|
||||
|
||||
var label = (tab.label || tab.name || tab_name).capitalize()
|
||||
var tab_el = new Element('li.t_'+tab_name).adopt(
|
||||
new Element('a', {
|
||||
'href': App.createUrl(self.name+'/'+parent_tab_name+'/'+tab_name),
|
||||
'text': label
|
||||
}).adopt()
|
||||
).inject(parent_tab.subtabs_el);
|
||||
|
||||
if(!parent_tab.subtabs[tab_name])
|
||||
parent_tab.subtabs[tab_name] = {
|
||||
'label': label
|
||||
}
|
||||
|
||||
parent_tab.subtabs[tab_name] = Object.merge(parent_tab.subtabs[tab_name], {
|
||||
'tab': tab_el,
|
||||
'content': new Element('div.tab_content.tab_'+tab_name).inject(self.containers),
|
||||
'groups': {}
|
||||
});
|
||||
|
||||
return parent_tab.subtabs[tab_name]
|
||||
|
||||
},
|
||||
|
||||
createGroup: function(group){
|
||||
var self = this;
|
||||
|
||||
var group_el = new Element('fieldset', {
|
||||
'class': (group.advanced ? 'inlineLabels advanced' : 'inlineLabels') + ' group_' + (group.name || '')
|
||||
'class': (group.advanced ? 'inlineLabels advanced' : 'inlineLabels') + ' group_' + (group.name || '') + ' subtab_' + (group.subtab || '')
|
||||
}).adopt(
|
||||
new Element('h2', {
|
||||
'text': (group.label || group.name).capitalize()
|
||||
|
||||
@@ -175,7 +175,7 @@ body > .spinner, .mask{
|
||||
}
|
||||
.header .navigation {
|
||||
display: inline-block;
|
||||
width: 75%;
|
||||
width: 66.7%;
|
||||
}
|
||||
.header .navigation ul {
|
||||
margin: 0;
|
||||
@@ -196,10 +196,12 @@ body > .spinner, .mask{
|
||||
}
|
||||
.header .navigation li:first-child a { padding-left: 10px; }
|
||||
.header .navigation li a.logLink { font-size: 13px; padding: 23px 20px 15px; }
|
||||
.header .navigation li a#showConfig {
|
||||
background: url('../../media/images/gear.png') no-repeat center;
|
||||
height: 35px;
|
||||
width: 10px;
|
||||
.header .navigation li.tab_settings {
|
||||
}
|
||||
.header .navigation li.tab_settings a {
|
||||
background: url('../images/gear.png') no-repeat center;
|
||||
width: 35px;
|
||||
text-indent: -1000px;
|
||||
}
|
||||
|
||||
.header .navigation li span {
|
||||
@@ -236,6 +238,14 @@ body > .spinner, .mask{
|
||||
}
|
||||
.header:hover .navigation .backtotop { color: #fff; }
|
||||
|
||||
.header .more_menu {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.header .more_menu .red { color: red; }
|
||||
.header .more_menu .orange { color: orange; }
|
||||
|
||||
.header .message.update {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
@@ -436,3 +446,70 @@ body > .spinner, .mask{
|
||||
margin-top: 20px;
|
||||
background-color: #4c5766;
|
||||
}
|
||||
|
||||
|
||||
.more_menu > a {
|
||||
display: block;
|
||||
background: url('../images/sprite.png') no-repeat center -137px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.more_menu ul {
|
||||
display: none;
|
||||
border: 1px solid #333;
|
||||
background: rgba(0,0,0,0.8);
|
||||
border-radius: 3px;
|
||||
padding: 4px !important;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
margin: 32px 0 0 -145px;
|
||||
width: 185px;
|
||||
box-shadow: 0 10px 20px -10px rgba(0,0,0,0.4);
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more_menu ul:before {
|
||||
content: ' ';
|
||||
height: 0;
|
||||
position: relative;
|
||||
width: 0;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: rgba(0,0,0,0.8);
|
||||
display: block;
|
||||
top: -16px;
|
||||
left: 146px;
|
||||
}
|
||||
.more_menu ul.show {
|
||||
display: block;
|
||||
}
|
||||
.more_menu ul li {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.more_menu ul li a {
|
||||
display: block;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
box-shadow: none;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 3px 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.more_menu ul li:first-child {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.more_menu ul li:last-child a {
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
.more_menu ul li a:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
@@ -16,7 +16,7 @@
|
||||
.page.settings .tabs {
|
||||
float: left;
|
||||
width: 20%;
|
||||
font-size: 25px;
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
list-style: none;
|
||||
padding: 40px 0;
|
||||
@@ -39,11 +39,41 @@
|
||||
.page.settings .tabs a {
|
||||
display: block;
|
||||
padding: 11px 15px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
transition: all 0.1s ease-in-out;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.page.settings .tabs .active a {
|
||||
background: #4e5969;
|
||||
.page.settings .tabs a:hover, .page.settings .tabs .active a {
|
||||
background: rgb(78, 89, 105);
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page.settings .tabs .subtabs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
transition: all 1s ease-in-out;
|
||||
max-height: 0;
|
||||
}
|
||||
.page.settings .tabs > .active .subtabs {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.page.settings .tabs .subtabs a {
|
||||
font-size: 15px;
|
||||
padding: 1px 15px;
|
||||
font-weight: normal;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(78, 89, 105, 0.4);
|
||||
}
|
||||
|
||||
.page.settings .tabs .subtabs .active a {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background: rgb(78, 89, 105);
|
||||
}
|
||||
|
||||
|
||||
.page.settings .containers {
|
||||
|
||||
Reference in new issue
Block a user