[design] Application Installer

frappe/desk/page/applications/application_row.html

@@ -0,0 +1,19 @@
+<div class="app-listing padding" data-title="{%= app.app_title %}">
+	<div class="media">
+		<div class="pull-right">
+			{% if (app.installed) { %}
+			<button class="btn btn-success" disabled=disabled>{%= __("Installed") %}</button>
+			{% } else { %}
+			<button class="btn btn-primary install" data-app="{%= app.app_name %}">{%= __("Install") %}</button>
+			{% } %}
+		</div>
+		<div class="pull-left app-icon-wrapper">{%= app.app_icon %}</div>
+		<div class="media-body">
+			<h5 class="media-heading">{%= app.app_title %}</h5>
+			<div class="text-muted">
+				{%= app.app_description %}<br>
+				{%= __("Publisher") %}: {%= app.app_publisher %} | {%= __("Version") %}: {%= app.app_version %}
+			</div>
+		</div>
+	</div>
+</div>

frappe/desk/page/applications/applications.css

@@ -0,0 +1,16 @@
+.app-listing {
+	border-top: 1px solid #d1d8dd;
+}
+
+#page-applications .media-body {
+	margin-top: 3px;
+}
+
+#page-applications .app-icon {
+	width: 70px;
+	height: 70px;
+}
+
+#page-applications .form-group {
+	margin-bottom: 0px;
+}

frappe/desk/page/applications/applications.js

@@ -1,83 +1,102 @@
-frappe.pages['applications'].onload = function(wrapper) {
-	frappe.ui.make_app_page({
-		parent: wrapper,
-		title: __('Application Installer'),
-		icon: "icon-download",
-		single_column: true
-	});
-
-	frappe.call({
-		method:"frappe.desk.page.messages.applications.get_app_list",
-		callback: function(r) {
-			var $main = $(wrapper).find(".layout-main");
-
-			if(!keys(r.message).length) {
-				$main.html('<div class="alert alert-info">No Apps Installed</div>');
-				return;
-			}
-			$main.empty();
-
-			// search
-			$('<div class="row">\
-				<div class="col-md-6">\
-					<input type="text" class="form-control app-search" placeholder="Search" name="search"/>\
-				</div>\
-			</div><hr>').appendTo($main).find(".app-search").on("keyup", function() {
-				var val = ($(this).val() || "").toLowerCase();
-				$main.find(".app-listing").each(function() {
-					$(this).toggle($(this).attr("data-title").toLowerCase().indexOf(val)!==-1);
-				});
-			});
-
-			$.each(Object.keys(r.message).sort(), function(i, app_key) {
-				var app = r.message[app_key];
-				frappe.modules[app_key] = {
-					label: app.app_title,
-					icon: app.app_icon,
-					color: app.app_color,
-					is_app: true
+frappe.provide("frappe.applications");
+
+frappe.pages['applications'].onload = function(parent) {
+	frappe.applications.installer = new frappe.applications.Installer(parent);
+};
+
+frappe.applications.Installer = Class.extend({
+	init: function(parent) {
+		this.parent = parent;
+		this.get_app_list();
+	},
+
+	get_app_list: function() {
+		var me = this;
+		return frappe.call({
+			method: "frappe.desk.page.applications.applications.get_app_list",
+			callback: function(r) {
+				var apps = r.message;
+
+				me.make_page();
+
+				// no apps
+				if(!keys(apps).length) {
+					me.wrapper.html('<div class="text-muted app-listing padding">' + __("No Apps Installed") + '</div>');
+					return;
 				}
-				app.app_icon = frappe.ui.app_icon.get_html(app_key);
-				$app = $($r('<div style="border-bottom: 1px solid #c7c7c7; margin-bottom: 10px;" \
-					class="app-listing" data-title="%(app_title)s">\
-						<div style="float: left; width: 80px;">\
-							%(app_icon)s\
-						</div>\
-						<div style="margin-left: 95px;">\
-							<div class="row">\
-								<div class="col-xs-10">\
-									<p><b class="title">%(app_title)s</b></p>\
-									<p class="text-muted">%(app_description)s\
-										<br>Publisher: %(app_publisher)s; Version: %(app_version)s</p>\
-								</div>\
-								<div class="col-xs-2 button-area"></div>\
-							</div>\
-						</div>\
-					</div>', app))
-				$app.appendTo($main)
-
-				if(app.installed) {
-					$btn = $('<button class="btn btn-success" disabled=disabled>\
-						<i class="icon-ok"></i> Installed</button>');
-				} else {
-					$btn = $('<button class="btn btn-primary">Install</button>')
-						.attr("data-app", app.app_name)
-						.on("click", function() {
-						frappe.call({
-							method:"frappe.desk.page.messages.applications.install_app",
-							args: {name: $(this).attr("data-app")},
-							callback: function(r) {
-								if(!r.exc) {
-									msgprint("<i class='icon-ok'></i>" + __("Installed"));
-									msgprint(__("Refreshing..."));
-									setTimeout(function() { window.location.reload() }, 2000)
-								}
-							}
-						})
+
+				me.wrapper.empty();
+				me.make_search();
+				me.make_app_list(apps);
+			}
+		});
+	},
+
+	make_search: function() {
+		var me = this;
+		$('<div class="padding search-wrapper"><div class="form-group">\
+			<input type="text" class="form-control app-search" placeholder="Search" name="search"/></div></div>')
+			.appendTo(this.wrapper)
+			.find(".app-search")
+				.on("keyup", function() {
+					var val = ($(this).val() || "").toLowerCase();
+					me.wrapper.find(".app-listing").each(function() {
+						$(this).toggle($(this).attr("data-title").toLowerCase().indexOf(val)!==-1);
 					});
+				});
+	},
+
+	make_app_list: function(apps) {
+		var me = this;
+
+		$.each(Object.keys(apps).sort(), function(i, app_key) {
+			var app = apps[app_key];
+
+			frappe.modules[app_key] = {
+				label: app.app_title,
+				icon: app.app_icon,
+				color: app.app_color,
+				is_app: true
+			};
+
+			app.app_icon = frappe.ui.app_icon.get_html(app_key);
+
+			$(frappe.render_template("application_row", {app: app})).appendTo(me.wrapper);
+		});
+
+		this.wrapper.find(".install").on("click", function() {
+			me.install_app($(this).attr("data-app"));
+		});
+
+	},
+
+	install_app: function(app_name) {
+		frappe.call({
+			method: "frappe.desk.page.applications.applications.install_app",
+			args: { name: app_name },
+			callback: function(r) {
+				if(!r.exc) {
+					msgprint("<i class='icon-ok'></i>" + __("Installed"));
+					msgprint(__("Refreshing..."));
+					setTimeout(function() { window.location.reload() }, 2000)
 				}
-				$btn.appendTo($app.find(".button-area"))
-			})
-		}
-	})
-}
+			}
+		});
+	},
+
+	make_page: function() {
+		if (this.page)
+			return;
+
+		frappe.ui.make_app_page({
+			parent: this.parent,
+			title: __('Application Installer'),
+			icon: "icon-download",
+			single_column: true
+		});
+
+		this.page = this.parent.page;
+		this.wrapper = $('<div></div>').appendTo(this.page.main);
+
+	}
+});

frappe/public/css/app_icon.css

@@ -27,12 +27,17 @@
 }
 
 .app-icon svg, .app-icon img {
-	height: 30px;
-	width: 30px;
+	height: 40px;
+	width: 40px;
+	margin-top: -3px;
 }
 
 .app-icon path {
-	fill: #f8f8f8;
+	fill: #8D99A6;
+}
+
+.app-icon:hover path {
+	fill: inherit;
 }
 
 .app-icon-small {

frappe/public/css/desk.css

@@ -801,3 +801,6 @@ th.fc-widget-header {
   margin: 10px;
   display: none;
 }
+.padding {
+  padding: 15px;
+}

frappe/public/js/frappe/views/container.js

@@ -106,10 +106,6 @@ frappe.views.Container = Class.extend({
 			divider();
 			$('<li><a href="#List/'+ breadcrumbs.doctype +'">'+ __(breadcrumbs.doctype) +'</a></li>').appendTo($breadcrumbs);
 		}
-	},
-	set_full_width: function() {
-		// limit max-width to 970px for most pages
-		$("body").toggleClass("limit-container-width", !$(frappe.container.page).find(".app-page.full-width").length);
 	}
 });
 

frappe/public/less/desk.less

@@ -962,3 +962,7 @@ th.fc-widget-header {
 	margin: 10px;
 	display: none
 }
+
+.padding {
+	padding: 15px;
+}