Group providers together

couchpotato/static/scripts/page/settings.js

@@ -7,6 +7,7 @@ Page.Settings = new Class({
 	wizard_only: false,
 
 	tabs: {},
+	lists: {},
 	current: 'about',
 	has_tab: false,
 
@@ -178,12 +179,24 @@ Page.Settings = new Class({
 					var content_container = self.tabs[group.tab].subtabs[group.subtab].content
 				}
 
+				if(group.list && !self.lists[group.list]){
+					self.lists[group.list] = self.createList(content_container);
+				}
+
 				// Create the group
 				if(!self.tabs[group.tab].groups[group.name]){
 					var group_el = self.createGroup(group)
-						.inject(content_container)
+						.inject(group.list ? self.lists[group.list] : content_container)
 						.addClass('section_'+section_name);
-					self.tabs[group.tab].groups[group.name] = group_el
+					self.tabs[group.tab].groups[group.name] = group_el;
+				}
+
+				// Create list if needed
+				if(group.type && group.type == 'list'){
+					if(!self.lists[group.name])
+						self.lists[group.name] = self.createList(content_container);
+					else
+						self.lists[group.name].inject(self.tabs[group.tab].groups[group.name]);
 				}
 
 				// Add options to group
@@ -283,6 +296,14 @@ Page.Settings = new Class({
 		)
 
 		return group_el
+	},
+	
+	createList: function(content_container){
+		return new Element('div.option_list').grab(
+			new Element('h3', {
+				'text': 'Enable more providers'
+			})
+		).inject(content_container)
 	}
 
 });
@@ -550,15 +571,21 @@ Option.Enabler = new Class({
 	},
 
 	checkState: function(){
-		var self = this;
+		var self = this,
+			enabled = self.getValue();
+
+		self.parentFieldset[ enabled ? 'removeClass' : 'addClass']('disabled');
+
+		if(self.parentList)
+			self.parentFieldset.inject(self.parentList.getElement('h3'), enabled ? 'before' : 'after');
 
-		self.parentFieldset[ self.getValue() ? 'removeClass' : 'addClass']('disabled');
 	},
 
 	afterInject: function(){
 		var self = this;
 
-		self.parentFieldset = self.el.getParent('fieldset')
+		self.parentFieldset = self.el.getParent('fieldset').addClass('enabler')
+		self.parentList = self.parentFieldset.getParent('.option_list');
 		self.el.inject(self.parentFieldset, 'top')
 		self.checkState()
 	}

couchpotato/static/style/page/settings.css

@@ -92,6 +92,10 @@
 				font-size: 12px;
 				margin-left: 10px;
 			}
+				.page fieldset h2 .hint a {
+					margin: 0 !important;
+					padding: 0;
+				}
 
 			.page fieldset.disabled .ctrlHolder {
 				display: none;
@@ -102,7 +106,7 @@
 				width: auto;
 				margin: 0;
 				position: relative;
-				margin-bottom: -25px;
+				margin-bottom: -23px;
 				border: none;
 				width: 20px;
 			}
@@ -148,6 +152,73 @@
 		}
 
 		.page .xsmall { width: 20px !important; text-align: center; }
+		
+	.page .enabler {
+		display: block;
+	}
+	
+	.page .option_list {
+		margin-bottom: 20px;
+	}
+	
+		.page .option_list .enabler {
+			padding: 0;
+		}
+		
+			.page .option_list .enabler:not(.disabled) {
+				margin: 0 0 0 30px;
+			}
+			
+				.page .option_list .enabler:not(.disabled) .ctrlHolder:first-child {
+					margin: 10px 0 -33px 0;
+				}
+	
+		.page .option_list h3 {
+			padding: 0;
+			margin: 10px 0 0 0;
+			text-align: center;
+			font-weight: normal;
+			text-shadow: none;
+			text-transform: uppercase;
+			font-size: 12px;
+			background: rgba(255,255,255,0.03);
+		}
+	
+	.page .option_list .enabler.disabled {
+		display: inline-block;
+		margin: 3px 3px 3px 20px;
+		padding: 4px 0;
+		width: 159px;
+		vertical-align: top;
+	}
+		
+		.page .option_list .enabler.disabled h2 {
+			border: none;
+			box-shadow: none;
+			padding: 0 10px 0 25px;
+			font-size: 16px;
+		}
+		
+			.page .option_list .enabler:not(.disabled) h2 {
+				font-size: 16px;
+				font-weight: bold;
+				border: none;
+				border-top: 1px solid rgba(255,255,255, 0.15);
+				box-shadow: 0 -1px 0px #333;
+				margin: 0;
+				padding: 10px 0 5px 25px;
+			}
+				.page .option_list .enabler:not(.disabled):first-child h2 {
+					border: none;
+					box-shadow: none;
+				}
+		
+		.page .option_list .enabler.disabled h2 .hint {
+			display: none;
+		}
+			.page .option_list .enabler h2 .hint {
+				font-weight: normal;
+			}
 
 	.page input[type=text], .page input[type=password] {
 		padding: 5px 3px;