From e94785b403ca52467b0c43a5476b0bcc746f1ccb Mon Sep 17 00:00:00 2001 From: Anand Doshi Date: Thu, 8 Jan 2015 00:06:39 +0530 Subject: [PATCH] [design] Application Installer --- .../page/applications/application_row.html | 19 ++ .../desk/page/applications/applications.css | 16 ++ frappe/desk/page/applications/applications.js | 179 ++++++++++-------- frappe/public/css/app_icon.css | 11 +- frappe/public/css/desk.css | 3 + frappe/public/js/frappe/views/container.js | 4 - frappe/public/less/desk.less | 4 + 7 files changed, 149 insertions(+), 87 deletions(-) create mode 100644 frappe/desk/page/applications/application_row.html create mode 100644 frappe/desk/page/applications/applications.css diff --git a/frappe/desk/page/applications/application_row.html b/frappe/desk/page/applications/application_row.html new file mode 100644 index 0000000000..b046954feb --- /dev/null +++ b/frappe/desk/page/applications/application_row.html @@ -0,0 +1,19 @@ +
+
+
+ {% if (app.installed) { %} + + {% } else { %} + + {% } %} +
+
{%= app.app_icon %}
+
+
{%= app.app_title %}
+
+ {%= app.app_description %}
+ {%= __("Publisher") %}: {%= app.app_publisher %} | {%= __("Version") %}: {%= app.app_version %} +
+
+
+
diff --git a/frappe/desk/page/applications/applications.css b/frappe/desk/page/applications/applications.css new file mode 100644 index 0000000000..50490fb6b6 --- /dev/null +++ b/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; +} diff --git a/frappe/desk/page/applications/applications.js b/frappe/desk/page/applications/applications.js index 1bb68f60d8..673e729371 100644 --- a/frappe/desk/page/applications/applications.js +++ b/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('
No Apps Installed
'); - return; - } - $main.empty(); - - // search - $('
\ -
\ - \ -
\ -
').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('
' + __("No Apps Installed") + '
'); + return; } - app.app_icon = frappe.ui.app_icon.get_html(app_key); - $app = $($r('
\ -
\ - %(app_icon)s\ -
\ -
\ -
\ -
\ -

%(app_title)s

\ -

%(app_description)s\ -
Publisher: %(app_publisher)s; Version: %(app_version)s

\ -
\ -
\ -
\ -
\ -
', app)) - $app.appendTo($main) - - if(app.installed) { - $btn = $(''); - } else { - $btn = $('') - .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("" + __("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; + $('
\ +
') + .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("" + __("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 = $('
').appendTo(this.page.main); + + } +}); diff --git a/frappe/public/css/app_icon.css b/frappe/public/css/app_icon.css index 35f288e551..719ece808d 100644 --- a/frappe/public/css/app_icon.css +++ b/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 { diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index 6c847a7b17..9fd791e17f 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -801,3 +801,6 @@ th.fc-widget-header { margin: 10px; display: none; } +.padding { + padding: 15px; +} diff --git a/frappe/public/js/frappe/views/container.js b/frappe/public/js/frappe/views/container.js index eb09ea9ade..71e61bc22e 100644 --- a/frappe/public/js/frappe/views/container.js +++ b/frappe/public/js/frappe/views/container.js @@ -106,10 +106,6 @@ frappe.views.Container = Class.extend({ divider(); $('
  • '+ __(breadcrumbs.doctype) +'
    • ').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); } }); diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index 28b89f111a..a09ed96c3c 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -962,3 +962,7 @@ th.fc-widget-header { margin: 10px; display: none } + +.padding { + padding: 15px; +}