[ui] desktop with wallpaper

This commit is contained in:
Rushabh Mehta 2015-01-19 15:12:02 +05:30
parent 0ea2316adb
commit 3e953b0e2c
21 changed files with 136 additions and 6642 deletions

View file

@ -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

View file

@ -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)}));
});

View file

@ -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",

View file

@ -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>\

View file

@ -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"],
}

View file

@ -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>
{% } %}

View file

@ -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)
}

File diff suppressed because one or more lines are too long

View file

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

View file

@ -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;

View file

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 194 KiB

View file

@ -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;

View file

@ -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");

View file

@ -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>'
}
}

View file

@ -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;
});

View file

@ -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"

View file

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

View file

@ -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 {

View file

@ -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;
}

View file

@ -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: