add stapp

assets/css/style.css

@@ -16,35 +16,49 @@ body {
   -webkit-user-select: none;
 }
 
+
 /*Colors*/
+
 body {
   background-color: #202b33;
 }
 
+
 /*---------DASHBOARD---------*/
 
+
 /*Trail Color*/
+
 svg path:first-child {
   stroke: #202b33;
 }
 
-.cont, .line-cont {
+.cont,
+.line-cont {
   background-color: #293945;
   color: #eee;
 }
 
 .cont h3,
 .line-cont h3,
-.system-info h3{
+.system-info h3 {
   color: #eee;
 }
 
 .system-info ul li {
   color: #748390;
 }
-
 /*---------DASHBOARD---------*/
 
+.item-list ul li {
+  background-color: #293945;
+  color: #aeb5bf;
+}
+
+/*---------STARTUP APPS---------*/
+
+
+/*---------STARTUP APPS---------*/
 
 button {
   cursor: pointer;
@@ -66,7 +80,9 @@ button {
   width: 100%;
 }
 
+
 /*---------DASHBOARD---------*/
+
 .cont,
 .line-cont {
   width: 200px;
@@ -74,7 +90,7 @@ button {
   font-size: 16px;
   text-align: center;
   margin: 15px;
-  padding: 10px 30px;
+  padding: 20px 30px;
   font-weight: 500;
 }
 
@@ -84,7 +100,7 @@ button {
   display: block;
   letter-spacing: 1px;
   padding: 0;
-  margin:0px 0px 8px 0px;
+  margin: 0px 0px 8px 0px;
   font-size: 16px;
   font-weight: 500;
 }
@@ -131,6 +147,37 @@ button {
 }
 /*---------DASHBOARD---------*/
 
+/*---------STARTUP APPS---------*/
+
+.item-list {
+  width: 700px;
+  height: 530px;
+  margin: 15px auto 50px auto;
+}
+
+.item-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item-list ul li {
+  position: relative;
+  float: left;
+  display: block;
+  cursor: pointer;
+  font-size: 15px;
+  margin: 6px 3px;
+  width: calc(100% - 68px);
+  border-radius: 4px;
+  padding: 10px 15px 10px 50px;
+  background: url(../img/package.png) no-repeat 13px 8px;
+}
+
+
+/*---------STARTUP APPS---------*/
+
+
 .tdl-holder {
   color: #748390;
   font-size: 12px;
@@ -212,9 +259,7 @@ button {
   padding: 180px 0px;
   color: #748390;
   display: block;
-  background-image: url(../img/not-found.png);
-  background-repeat: no-repeat;
-  background-position: 186px 15px;
+  background: url(../img/not-found.png) no-repeat 186px 15px;
 }
 
 #system-service-table .empty-list,

src/components/startup-apps/STApp.js

@@ -0,0 +1,33 @@
+export default {
+	template: `<li>
+					<span>{{ name }}</span>
+					<input type="checkbox" class="switch" :id="file" :checked="isStart" @change="statusChange" />
+					<label :for="file"></label>
+					<button :name="file" @click="removeApp" class="remove-startup-app"></button>
+				</li>`,
+	props: ['name', 'file', 'is-start'],
+	methods: {
+		removeApp(e) {
+			fs.unlinkSync(commands.autostartApps + e.target.name)
+		},
+		statusChange(e) {
+			let fileName = e.target.id
+			let isStart = e.target.checked
+
+			try {
+				let data = fs.readFileSync(commands.autostartApps + '/' + fileName).toString()
+				let check = data.match(/\X-GNOME-Autostart-enabled=.*/g)
+
+				if (check)
+					data = data.replace(/\X-GNOME-Autostart-enabled=.*/gi, 'X-GNOME-Autostart-enabled=' + isStart)
+				else
+					data += ('X-GNOME-Autostart-enabled=' + isStart + '\n')
+
+				fs.writeFileSync(commands.autostartApps + '/' + fileName, data)
+			} catch (err) {
+				console.log(err)
+				showMessage('Operation failed.', 'error')
+			}
+		}
+	}
+}

src/components/startup-apps/StartupApps.js

@@ -1,31 +1,27 @@
 import {
 	commands
-} from '../utils/config'
+} from '../../utils/config'
 import {
 	showMessage
-} from '../utils/helpers'
+} from '../../utils/helpers'
+import properties from 'properties-reader'
 import chokidar from 'chokidar'
 import fs from 'fs'
-import properties from 'properties-reader'
+import STApp from './STApp'
 
 export default {
-	template: `<div id="startup-apps-table">
+	template: `<div id="startup-apps-tabl">
 					<div id="startup-apps-title">
 						<span style="padding:0;">System Startup Applications ({{ apps.length }})</span>
 					</div>
-					<div class="tdl-content scroll">
-						<span class="fl w100 empty-list" v-show="! apps.length">
+					<div class="item-list scroll">
+						<span class="empty-list" v-show="! apps.length">
 							No startup apps found.
 						</span>
 						<ul v-show="apps.length">
-							<li v-for="app in apps">
-								<span>{{ app.name }}</span>
-								<input type="checkbox" class="switch" :id="app.file" :checked="app.isStart" @change="statusChange" />
-								<label :for="app.file"></label>
-								<button :name="app.file" @click="removeApp" class="remove-startup-app"></button>
-							</li>
+							<app v-for="app in apps" :name="app.name" :file="app.file" :is-start="app.isStart"></app>
 						</ul>
-					</div>
+					</div>					
 					<button @click="showPrompt = true" class="add-startup-app">Add Startup App</button>
 					
 					<div class="promptDialog" v-show="showPrompt">
@@ -41,6 +37,10 @@ export default {
 						</div>
 					</div>
 				</div>`,
+
+	components: {
+		'app': STApp
+	},
 	data() {
 		return ({
 			apps: [],
@@ -61,9 +61,6 @@ export default {
 			.on('unlink', path => this.getApps())
 	},
 	methods: {
-		removeApp(e) {
-			fs.unlinkSync(commands.autostartApps + e.target.name)
-		},
 		saveApp() {
 			if (this.appName && this.appComment && this.appExec) {
 				let desktopFile = `[Desktop Entry]
@@ -117,26 +114,6 @@ export default {
 			} catch (error) {
 				console.log(error)
 			}
-		},
-		statusChange(e) {
-			let fileName = e.target.id
-			let isStart = e.target.checked
-
-			try {
-				let data = fs.readFileSync(commands.autostartApps + '/' + fileName).toString()
-				let check = data.match(/\X-GNOME-Autostart-enabled=.*/g)
-
-				if (check) {
-					data = data.replace(/\X-GNOME-Autostart-enabled=.*/gi, 'X-GNOME-Autostart-enabled=' + isStart)
-				} else {
-					data += ('X-GNOME-Autostart-enabled=' + isStart + '\n')
-				}
-
-				fs.writeFileSync(commands.autostartApps + '/' + fileName, data)
-			} catch (err) {
-				console.log(err)
-				showMessage('Operation failed.', 'error')
-			}
 		}
 	}