[ui] desktop with wallpaper

attributions.md

@@ -42,6 +42,10 @@
 
 - GeoIP: (c) 2014 MaxMind, http://dev.maxmind.com/geoip/geoip2/downloadable/
 
+### Wallpaper
+
+- Version 5 Wallpaper: http://magdeleine.co/photo-nick-west-n-139/ (Public Domain)
+
 ---
 
 Last updated: 1st Jan 2015

frappe/core/doctype/user/user.js

@@ -137,7 +137,7 @@ frappe.RoleEditor = Class.extend({
 			$(me.wrapper).append(repl('<div class="user-role" \
 				data-user-role="%(role_value)s">\
 				<input type="checkbox" style="margin-top:0px;"> \
-				<a href="#">%(role_display)s</a>\
+				<a href="#" class="grey">%(role_display)s</a>\
 			</div>', {role_value: role,role_display:__(role)}));
 		});
 

frappe/core/doctype/user/user.json

@@ -149,6 +149,28 @@
    "options": "user_image", 
    "permlevel": 0
   }, 
+  {
+   "fieldname": "background", 
+   "fieldtype": "Section Break", 
+   "label": "Background", 
+   "permlevel": 0, 
+   "precision": ""
+  }, 
+  {
+   "fieldname": "background_image", 
+   "fieldtype": "Attach", 
+   "label": "Background Image", 
+   "permlevel": 0, 
+   "precision": ""
+  }, 
+  {
+   "fieldname": "background_style", 
+   "fieldtype": "Select", 
+   "label": "Background Style", 
+   "options": "Fill Screen\nTile", 
+   "permlevel": 0, 
+   "precision": ""
+  }, 
   {
    "fieldname": "short_bio", 
    "fieldtype": "Section Break", 
@@ -447,7 +469,7 @@
  "issingle": 0, 
  "istable": 0, 
  "max_attachments": 5, 
- "modified": "2015-01-08 14:54:46.298736", 
+ "modified": "2015-01-19 15:01:19.227860", 
  "modified_by": "Administrator", 
  "module": "Core", 
  "name": "User", 

frappe/core/page/desktop/desktop.js

@@ -1,7 +1,7 @@
 frappe.provide('frappe.desktop');
 
 frappe.pages['desktop'].onload = function(wrapper) {
-	$('<div style="min-height: 400px; background: none; text-align: center; \
+	frappe.desktop.background = $('<div style="background: none; text-align: center; \
 			margin: 0px auto;">	\
 			<div id="icon-grid">\
 			</div>\
@@ -10,6 +10,16 @@ frappe.pages['desktop'].onload = function(wrapper) {
 
 	// load desktop
 	frappe.desktop.refresh();
+
+	$(window).on("resize", function() {
+		frappe.desktop.resize();
+	})
+
+	frappe.desktop.resize = function() {
+		$("#page-desktop").css({"min-height": ($(window).height() - 48) + "px" });
+	}
+
+	frappe.desktop.resize();
 }
 
 frappe.pages['desktop'].refresh = function(wrapper) {
@@ -122,7 +132,7 @@ frappe.desktop.show_all_modules = function() {
 					$(this).toggle($(this).attr("data-label").toLowerCase().indexOf(val)!==-1);
 				})
 			});
-		$('<hr><p class="text-right text-muted text-small">'+__("Checked items shown on desktop")+'</p>')
+		$('<p class="text-right text-muted text-small">'+__("Checked items shown on desktop")+'</p>')
 			.appendTo(d.body);
 		$wrapper = $('<div class="list-group">').appendTo(d.body);
 
@@ -137,7 +147,7 @@ frappe.desktop.show_all_modules = function() {
 				<div class="row">\
 					<div class="col-xs-2"><a href="#%(link)s">%(app_icon)s</a></div>\
 					<div class="col-xs-10" style="padding-top: 14px;">\
-						<a href="#%(link)s">%(label)s</a>\
+						<a class="grey" href="#%(link)s">%(label)s</a>\
 						<input class="pull-right" type="checkbox" data-name="%(name)s" />\
 					</div>\
 				</div>\

frappe/desk/doctype/todo/todo_list.js

@@ -4,7 +4,7 @@ frappe.listview_settings['ToDo'] = {
 			"owner": user,
 			"status": "Open"
 		};
-		me.page.set_title(__("To Do"), frappe.get_module("To Do").icon);
+		me.page.set_title(__("To Do"));
 	},
 	add_fields: ["reference_type", "reference_name"],
 }

frappe/desk/page/applications/application_row.html

@@ -2,7 +2,7 @@
 	<div class="media">
 		<div class="pull-right">
 			{% if (app.installed) { %}
-			<button class="btn btn-success" disabled=disabled>{%= __("Installed") %}</button>
+			<button class="btn btn-default" disabled=disabled>{%= __("Installed") %}</button>
 			{% } else { %}
 			<button class="btn btn-primary install" data-app="{%= app.app_name %}">{%= __("Install") %}</button>
 			{% } %}

frappe/desk/page/applications/applications.js

@@ -34,7 +34,7 @@ frappe.applications.Installer = Class.extend({
 
 	make_search: function() {
 		var me = this;
-		$('<div class="padding search-wrapper"><div class="form-group">\
+		$('<div class="padding search-wrapper panel-bg"><div class="form-group">\
 			<input type="text" class="form-control app-search" placeholder="Search" name="search"/></div></div>')
 			.appendTo(this.wrapper)
 			.find(".app-search")
@@ -76,7 +76,7 @@ frappe.applications.Installer = Class.extend({
 			args: { name: app_name },
 			callback: function(r) {
 				if(!r.exc) {
-					msgprint("<i class='icon-ok'></i>" + __("Installed"));
+					msgprint(__("Installed"));
 					msgprint(__("Refreshing..."));
 					setTimeout(function() { window.location.reload() }, 2000)
 				}

frappe/public/css/desk.css

@@ -177,6 +177,9 @@ ul.linked-with-list li {
     border-right: 1px solid #d1d8dd;
   }
 }
+.panel-bg {
+  background-color: #f7fafc;
+}
 .modal-backdrop {
   opacity: 0.5;
 }

frappe/public/css/desktop.css

@@ -15,39 +15,41 @@
 }
 .case-label {
   font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.4px;
+  color: #fff;
   text-align: center;
   margin-top: -10px;
   transition: 0.2s;
   -webkit-transition: 0.2s;
-  /*text-shadow: 1px 1px 3px rgba(0, 0, 0, 1), 0px 3px 15px rgba(0, 0, 0, 0.5);*/
+  text-shadow: 1px 1px 1px #000000, 0px 1px 5px rgba(0, 0, 0, 0.5);
 }
 .app-icon {
   /*	border-radius: 5px;*/
   overflow: hidden;
-  padding: 15px;
+  padding: 20px;
   display: inline-block;
   margin: auto;
   margin-bottom: 7px;
   text-align: center;
-  background-color: #f0f4f7;
   border-radius: 5px;
 }
 .app-icon i {
-  font-size: 48px;
-  min-width: 48px;
-  color: #8d99a6;
+  font-size: 32px;
+  min-width: 32px;
+  color: #fafbfc;
   display: inline-block;
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
 .app-icon svg,
 .app-icon img {
-  height: 48px;
-  width: 48px;
+  height: 32px;
+  width: 32px;
   margin-top: -3px;
 }
 .app-icon path {
-  fill: #8d99a6;
+  fill: #fafbfc;
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
@@ -57,19 +59,20 @@
   top: -10px;
   color: #fff;
   background-color: #ff5858;
-  padding: 5px;
+  padding: 6px;
   border-radius: 50%;
   font-size: 12px;
   line-height: 1;
-  min-width: 22px;
+  min-width: 25px;
   text-align: center;
+  text-shadow: none;
 }
-.case-wrapper:hover path {
-  fill: #36414c;
+.app-icon:hover path {
+  fill: #ffffff;
 }
-.case-wrapper:hover i,
-.case-wrapper:hover {
-  color: #36414c;
+.app-icon:hover i,
+.app-icon:hover {
+  color: #ffffff;
 }
 .app-icon-small {
   padding: 12px;
@@ -112,6 +115,10 @@
   }
   .case-label {
     font-size: 80%;
+    font-weight: normal;
+  }
+  .app-icon {
+    padding: 10px;
   }
   .app-icon i {
     font-size: 32px;

frappe/public/css/list.css

@@ -19,6 +19,14 @@
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
+.list-row .h6 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.list-row-head {
+  background-color: #f7fafc;
+  border-bottom: 1px solid #d1d8dd !important;
+}
 .list-row:hover,
 .grid-row:hover {
   background: #f7fafc;
@@ -44,6 +52,9 @@
   padding: 10px 15px;
   border-top: 1px solid #d1d8dd;
 }
+.list-value {
+  vertical-align: middle;
+}
 .progress {
   height: 10px;
 }

frappe/public/js/frappe/desk.js

@@ -32,21 +32,13 @@ frappe.Application = Class.extend({
 		}
 	},
 	startup: function() {
-		// load boot info
 		this.load_bootinfo();
-
-		// navbar
+		this.set_user_display_settings();
 		this.make_nav_bar();
-
-		// favicon
 		this.set_favicon();
-
 		this.setup_keyboard_shortcuts();
-
-		// control panel startup code
 		this.run_startup_js();
 
-
 		if(frappe.boot) {
 			if(localStorage.getItem("session_lost_route")) {
 				window.location.hash = localStorage.getItem("session_lost_route");
@@ -69,6 +61,10 @@ frappe.Application = Class.extend({
 		$(document).trigger('app_ready');
 	},
 
+	set_user_display_settings: function() {
+		frappe.ui.set_user_background(frappe.boot.user.background_image, null,
+			frappe.boot.user.background_style);
+	},
 	load_bootinfo: function() {
 		if(frappe.boot) {
 			frappe.modules = frappe.boot.modules;

frappe/public/js/frappe/misc/user.js

@@ -34,10 +34,9 @@ frappe.get_gravatar = function(email_id) {
 }
 
 frappe.ui.set_user_background = function(src, selector, style) {
-	return;
 	if(!selector) selector = "#page-desktop";
 	if(!style) style = "Fill Screen";
-	if(!src) src = "assets/frappe/images/ui/random-polygons.jpg";
+	if(!src) src = "assets/frappe/images/ui/wallpaper-5.jpg";
 
 	// hack! load background image asap, before page is rendered
 	$('<img src="'+src+'" style="height: 1px; width: 1px; margin-bottom: -1px;">').appendTo("body");

frappe/public/js/frappe/ui/app_icon.js

@@ -21,6 +21,6 @@ frappe.ui.app_icon = {
 			icon = '<i class="'+icon+'"></i>';
 		}
 		return '<div class="app-icon'+ (small ? " app-icon-small" : "")
-			+'">'+icon+'</div>'
+			+'" style="background-color: '+ color +'">'+icon+'</div>'
 	}
 }

frappe/public/js/frappe/ui/toolbar/awesome_bar.js

@@ -186,7 +186,7 @@ frappe.search.verbs = [
 			if(frappe.modules[match].link) {
 				ret.route = [frappe.modules[match].link];
 			} else {
-				ret.route = ["Module", "<b>"+match+"</b>"];
+				ret.route = ["Module", match];
 			}
 			return ret;
 		});

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -1,4 +1,4 @@
-<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 	<div class="container">
 		<div class="navbar-header">
 			<button type="button" class="navbar-toggle" data-toggle="collapse"

frappe/public/less/desk.less

@@ -206,6 +206,10 @@ ul.linked-with-list li {
 	}
 }
 
+.panel-bg {
+	background-color: @panel-bg;
+}
+
 .modal-backdrop {
   opacity: 0.5;
 }

frappe/public/less/desktop.less

@@ -1,6 +1,7 @@
 @import "variables.less";
 
-@icon-color: @text-muted;
+@icon-color: @light-bg;
+@icon-hover: #fff;
 
 #page-desktop {
 	position: absolute;
@@ -21,28 +22,31 @@
 
 .case-label {
 	font-size: 12px;
+	font-weight: bold;
+	letter-spacing: 0.4px;
+	color: #fff;
 	text-align: center;
 	margin-top: -10px;
 	transition: 0.2s;
 	-webkit-transition: 0.2s;
-	/*text-shadow: 1px 1px 3px rgba(0, 0, 0, 1), 0px 3px 15px rgba(0, 0, 0, 0.5);*/
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 0px 1px 5px rgba(0, 0, 0, 0.5);
 }
 
 .app-icon {
 /*	border-radius: 5px;*/
 	overflow: hidden;
-	padding: 15px;
+	padding: 20px;
 	display: inline-block;
 	margin: auto;
 	margin-bottom: 7px;
 	text-align: center;
-	background-color: @btn-bg;
+	// background-color: @btn-bg;
 	border-radius: 5px;
 }
 
 .app-icon i {
-	font-size: 48px;
-	min-width: 48px;
+	font-size: 32px;
+	min-width: 32px;
 	color: @icon-color;
 	display: inline-block;
 	transition: 0.2s;
@@ -50,8 +54,8 @@
 }
 
 .app-icon svg, .app-icon img {
-	height: 48px;
-	width: 48px;
+	height: 32px;
+	width: 32px;
 	margin-top: -3px;
 }
 
@@ -67,21 +71,22 @@
 	top: -10px;
 	color: #fff;
 	background-color: @indicator-red;
-	padding: 5px;
+	padding: 6px;
 	border-radius: 50%;
 	font-size: 12px;
 	line-height: 1;
-	min-width: 22px;
+	min-width: 25px;
 	text-align: center;
+	text-shadow: none;
 }
 
-.case-wrapper:hover path {
-	fill: @text-color;
+.app-icon:hover path {
+	fill: @icon-hover;
 }
 
-.case-wrapper:hover i,
-.case-wrapper:hover {
-	color: @text-color;
+.app-icon:hover i,
+.app-icon:hover {
+	color: @icon-hover;
 }
 
 .app-icon-small {
@@ -138,6 +143,11 @@
 
 	.case-label {
 		font-size: 80%;
+		font-weight: normal;
+	}
+
+	.app-icon {
+		padding: 10px;
 	}
 
 	.app-icon i {

frappe/public/less/list.less

@@ -26,6 +26,16 @@
 	-webkit-transition: 0.2s;
 }
 
+.list-row .h6 {
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
+
+.list-row-head {
+	background-color: @panel-bg;
+	border-bottom: 1px solid @border-color !important;
+}
+
 .list-row:hover, .grid-row:hover {
 	background: @panel-bg;
 }
@@ -56,6 +66,10 @@
 	border-top: 1px solid @border-color;
 }
 
+.list-value {
+	vertical-align: middle;
+}
+
 .progress {
 	height: 10px;
 }

frappe/utils/user.py

@@ -134,7 +134,7 @@ class User:
 
 	def load_user(self):
 		d = frappe.db.sql("""select email, first_name, last_name, time_zone,
-			email_signature, user_type, language
+			email_signature, user_type, language, background_image, background_style
 			from tabUser where name = %s""", (self.name,), as_dict=1)[0]
 
 		if not self.can_read: