added basic styling

Author: Gyran

index.html

@@ -6,6 +6,7 @@
 	<script src="javascript/package.js" type="text/javascript"></script>
 
 	<!-- <link href="enyo.css" rel="stylesheet" type="text/css" /> -->
+	<link href="style/main.css" rel="stylesheet" type="text/css" />
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
 </style>

javascript/kinds/AddTorrentPref.js

@@ -3,10 +3,11 @@ enyo.kind({
 	kind: enyo.Control,
 	tag: "div",
 	content: "AddTorrentPref",
+	classes: "addTorrentPref",
 
 	components: [
 		{ name: "downloadPath", kind: "SelectFolderInput" },
-		{ name: "link", kind: enyo.Input, placeholder: "URL to torrent" },
+		{ name: "link", kind: enyo.Input, placeholder: "URL to torrent", type: "text" },
 		{ kind: enyo.Button, content: "Add torrent", ontap: "addTorrentTap" }
 	],
 

javascript/kinds/App.js

@@ -3,14 +3,12 @@ enyo.kind({
 	kind: enyo.Control,
 	tag: "div",
 
-	published: {
-		plugins: []
-	},
+	classes: "app",
 
 	components: [
 		{ name: "smallLoading", kind: "SmallLoading", showing: false },
 		{ name: "toolbar", kind: "Toolbar" },
-		{ name: "torrentsList", kind: "TorrentTable" },
+		{ name: "torrentTable", kind: "TorrentTableHolder" },
 		{ name: "preferenceHolder", kind: "PreferenceHolder", showing: false },
 		{ name: "detailsHolder", kind: "DetailsHolder" }
 		//{ kind: enyo.Signals, onkeydown: "keydown", onkeyup: "keyup" }

javascript/kinds/DetailsHolder.js

@@ -1,15 +1,20 @@
+console.log(enyo);
 enyo.kind({
 	name: "DetailsHolder",
 	kind: enyo.Control,
 	tag: "div",
 
-	content: "detailsholder",
+	classes: "detailsHolder",
 
     components: [
         /* Maybe add some tabs */
         { name: "holder", tag: "div" }
     ],
 
+    published: {
+    	torrent: null
+    },
+
 	handlers: {
 		onShowDetails: "showDetails",
         onUpdate: "update"

javascript/kinds/SelectFolderInput.js

@@ -7,9 +7,10 @@ enyo.kind({
 	},
 
 	components: [
-		{ name: "path", kind: enyo.Input },
+		{ name: "path", kind: enyo.Input, type: "text" },
 		{ name: "browse", kind: enyo.Button, content: "...", ontap: "browseTap" },
-		{ name: "browser", tag: "ul", content: "loading", showing: false }
+		{ tag: "br" },
+		{ name: "browser", tag: "ul", content: "loading", showing: false, classes: "browser" }
 	],
 
 	create: function( ) {

javascript/kinds/Toolbar.js

@@ -3,6 +3,8 @@ enyo.kind({
 	kind: enyo.Control,
 	tag: "div",
 
+	classes: "toolbar",
+
 	components: [
 		{ kind: "AddTorrentToolbarButton" },
 		{ kind: "StartTorrentToolbarButton" },

javascript/kinds/Torrent.js

@@ -5,6 +5,8 @@ enyo.kind({
 	kind: enyo.Control,
 	tag: "tr",
 
+	classes: "torrent",
+
 	components: [
 		{ name: "status", kind: "TorrentTableBodyCell" },
 		{ name: "torrentName", kind: "TorrentTableBodyCell" },

javascript/kinds/TorrentTable.js

@@ -3,6 +3,8 @@ enyo.kind({
 	kind: enyo.Control,
 	tag: "table",
 
+	classes: "torrentTable",
+
 	components: [
 		{ kind: "TorrentTableHead" }
 	],

javascript/kinds/package.js

@@ -4,6 +4,7 @@ enyo.depends(
 	"Torrent.js",
 	"TorrentTableHead.js",
 	"TorrentTable.js",
+	"TorrentTableHolder.js",
 	"SelectFolderInput.js",
 	"SmallLoading.js",
 	"AddTorrentPref.js",

style/main.css

@@ -0,0 +1,64 @@
+body {
+	margin: 0;
+	padding: 0;
+}
+
+
+
+/**** Toolbar ****/
+.toolbar {
+	border: 1px solid #000;
+}
+
+/**** TorrentTableHolder ****/
+.torrentTableHolder {
+	width 80%;
+	height: 300px;
+	overflow: auto;
+}
+
+/**** Torrent ****/
+.torrent {
+	width: 100px;
+	overflow: hidden;
+}
+
+/**** DetailsHolder ****/
+.detailsHolder {
+	border: 1px solid #0F0;
+}
+
+/**** AddTorrentPref ****/
+.addTorrentPref {
+	border: 1px solid #000;
+	background-color: #CCC;
+	position: absolute;
+	height: 200px;
+	width: 400px;
+	left: 50%;
+	margin-left: -200px;
+	top: 100px;
+}
+
+.addTorrentPref input[type="text"] {
+	width: 70%;
+	margin-left: 10px;
+}
+
+/**** SelectFolderInput ****/
+.browser {
+	position: absolute;
+	top: 25px;
+	left: 10px;
+	height: 200px;
+	width: 300px;
+	background-color: #CCC;
+	border: 1px solid #000;
+	overflow: auto;
+	margin: 0;
+	padding: 0;
+}
+
+.browser li {
+	margin-left: 5px;
+}