vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[design] desktop

Browse source
This commit is contained in:
Anand Doshi 2015-01-14 12:53:11 +05:30
parent 0b6ad9b269
commit 2d3b17aac8
11 changed files with 346 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
frappe/core/page/desktop/desktop.css
View file

@ -1,69 +0,0 @@
#page-desktop {
position: absolute;
min-width: 100%;
min-height: 100%;
overflow: auto;
padding-top: 14px;
padding-bottom: 50px;
margin-bottom: -50px;
border: 0px;
background-color: transparent;
background-color: #fcfdfe;
}
#icon-grid {
padding-top: 15px;
padding-bottom: 30px;
}
.case-wrapper {
position: relative;
margin: 0px;
float: left;
width: 100px;
height: 120px;
}
.case-label {
font-size: 90%;
line-height: 1.1;
text-align: center;
/*text-shadow: 1px 1px 3px rgba(0, 0, 0, 1), 0px 3px 15px rgba(0, 0, 0, 0.5);*/
}
.circle {
position: absolute;
top: 0px;
right: 15px;
width: 10px;
height: 10px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
line-height: none;
background: #FF5858;
z-index: 5;
}
/*.circle-text {
color: white;
display: inline-block;
min-width: 15px;
}*/
@media (max-width: 768px) {
.case-wrapper {
margin: 9px;
width: 70px;
height: 90px;
}
.case-label {
padding-top: 2px;
font-size: 85%;
}
.circle {
right: 3px;
}
}

13
frappe/core/page/desktop/desktop.js
View file

@ -1,9 +1,9 @@
frappe.provide('frappe.desktop');
frappe.pages['desktop'].onload = function(wrapper) {
$('<div style="min-height: 500px; background: none; text-align: center; \
$('<div style="min-height: 400px; background: none; text-align: center; \
margin: 0px auto;"> \
<div id="icon-grid" class="container">\
<div id="icon-grid">\
</div>\
</div>\
<div style="clear: both"></div>').appendTo(wrapper);
@ -49,11 +49,12 @@ frappe.desktop.render = function() {
$module_icon = $(repl('<div id="module-icon-%(_id)s" class="case-wrapper" \
data-name="%(name)s" data-link="%(link)s">\
<div id="module-count-%(_id)s" class="circle" style="display: None">\
<span class="circle-text"></span>\
</div>\
%(app_icon)s\
<div class="case-label">%(_label)s</div>\
<div class="case-label text-ellipsis">\
<span id="module-count-%(_id)s" class="octicon octicon-primitive-dot circle" style="display: None">\
</span>\
%(_label)s\
</div>\
</div>', module)).click(module.link ? function() {
var link = $(this).attr("data-link");
if(link) {

2
frappe/public/build.json
View file

@ -33,7 +33,7 @@
"public/css/octicons/octicons.css",
"public/css/desk.css",
"public/css/mobile.css",
"public/css/app_icon.css",
"public/css/desktop.css",
"public/css/avatar.css",
"public/css/navbar.css",
"public/css/slickgrid.css",

87
frappe/public/css/app_icon.css
View file

@ -1,69 +1,56 @@
.app-icon {
border-radius: 5px;
overflow: hidden;
padding: 15px;
display: inline-block;
margin: auto;
text-align: center;
/*border: 1px solid #36414C;*/
border: 1px solid #d1d8dd;
background-color: #fff;
/* border-radius: 5px;*/
overflow: hidden;
padding: 15px;
display: inline-block;
margin: auto;
text-align: center;
background-color: #fff;
}
.app-icon:hover {
background-color: #f5f7fa;
}
.app-icon i {
font-size: 40px;
min-width: 40px;
color: #36414C;
display: inline-block;
}
.app-icon:hover i {
color: inherit;
color: #8d99a6;
}
.app-icon svg, .app-icon img {
height: 40px;
width: 40px;
margin-top: -3px;
.app-icon i {
font-size: 48px;
min-width: 48px;
color: #36414c;
display: inline-block;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.app-icon svg,
.app-icon img {
height: 40px;
width: 40px;
margin-top: -3px;
}
.app-icon path {
fill: #36414C;
fill: #36414c;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.app-icon:hover path {
fill: inherit;
fill: #8d99a6;
}
.app-icon-small {
padding: 12px;
padding: 12px;
}
.app-icon-img.app-icon-small {
padding: 0px;
height: 54px;
width: 54px;
padding: 0px;
height: 54px;
width: 54px;
}
.app-icon-img {
padding: 0px;
height: 70px;
width: 70px;
padding: 0px;
height: 70px;
width: 70px;
}
.app-icon-img img {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.app-icon {
padding: 12px;
}
.app-icon {
padding: 12px;
}
}

14
frappe/public/css/desk.css
View file

@ -301,16 +301,21 @@ em.link-option {
color: #ffdb4c;
}
/* module */
.module-section {
margin-bottom: 15px;
}
.module-item {
margin: 0px;
padding: 5px 0px;
padding: 7px;
border-bottom: 1px solid #d1d8dd;
cursor: pointer;
}
.module-item h4 {
margin-bottom: 2px;
display: inline-block;
}
.module-item .module-item-description {
margin-top: -5px;
}
.module-item .badge {
margin-top: -2px;
margin-left: 3px;
@ -589,9 +594,8 @@ ul.linked-with-list li {
border-top: 1px solid #d1d8dd;
}
/* form footer */
.form-footer {
padding-bottom: 60px;
/*box-shadow: 0px -1px 6px rgba(0,0,0,0.3);*/
.layout-main-section-wrapper {
margin-bottom: 60px;
}
.form-footer h5 {
margin: 15px 0px;

125
frappe/public/css/desktop.css Normal file
View file

@ -0,0 +1,125 @@
#page-desktop {
position: absolute;
min-width: 100%;
min-height: 100%;
padding-top: 14px;
padding-bottom: 50px;
margin-bottom: -50px;
border: 0px;
}
.case-wrapper {
position: relative;
margin: 0px;
float: left;
width: 138px;
height: 120px;
}
.case-label {
font-size: 90%;
line-height: 1.1;
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);*/
}
.circle {
color: #ff5858;
margin-top: -2px;
margin-left: -16px;
margin-right: 2px;
font-size: 14px;
}
.app-icon {
/* border-radius: 5px;*/
overflow: hidden;
padding: 15px;
display: inline-block;
margin: auto;
text-align: center;
background-color: #fff;
}
.app-icon i {
font-size: 48px;
min-width: 48px;
color: #4b5661;
display: inline-block;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.app-icon svg,
.app-icon img {
height: 48px;
width: 48px;
margin-top: -3px;
}
.app-icon path {
fill: #4b5661;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.case-wrapper:hover path {
fill: #36414c;
}
.case-wrapper:hover i,
.case-wrapper:hover {
color: #36414c;
}
.app-icon-small {
padding: 12px;
}
.app-icon-img.app-icon-small {
padding: 0px;
height: 54px;
width: 54px;
}
.app-icon-img {
padding: 0px;
height: 70px;
width: 70px;
}
.app-icon-img img {
width: 100%;
height: 100%;
}
#icon-grid {
padding-top: 15px;
padding-bottom: 30px;
max-width: 970px;
margin: auto;
}
@media (min-width: 768px) and (max-width: 991px) {
#icon-grid {
max-width: 690px;
}
}
@media (max-width: 767px) {
#icon-grid {
max-width: 320px;
}
.case-wrapper {
width: 80px;
height: 90px;
}
.case-label {
font-size: 80%;
}
.app-icon i {
font-size: 32px;
min-width: 32px;
}
.app-icon svg,
.app-icon img {
height: 32px;
width: 32px;
}
}
@media (max-width: 320px) {
#icon-grid {
max-width: 280px;
}
.case-wrapper {
width: 70px;
height: 90px;
}
}

2
frappe/public/js/frappe/ui/page.js
View file

@ -45,7 +45,7 @@ frappe.ui.Page = Class.extend({
} else {
var main = this.add_view("main", '<div class="row layout-main">\
<div class="col-sm-2 layout-side-section"></div>\
<div class="col-sm-10">\
<div class="col-sm-10 layout-main-section-wrapper">\
<div class="layout-main-section"></div>\
</div>\
</div>');

4
frappe/public/js/frappe/views/module/module_section.html
View file

@ -7,7 +7,7 @@
{% if (item.type==="doctype") { %}
<span class="open-notification hide" data-doctype="{%= item.name %}"></span>
{% } %}
<p class="text-muted small">{%= item.description %}</p>
<p class="text-muted small module-item-description">{%= item.description %}</p>
</div>
<div class="col-xs-4 text-muted text-right small" style="padding-top: 5px;">
{% if (item.last_modified) { %}
@ -16,7 +16,7 @@
</div>
{% } else { %}
<div class="col-xs-12">
<h5>{%= item.label || item.name %}</h5>
<h4>{%= item.label || item.name %}</h4>
</div>
{% } %}
</div>

16
frappe/public/less/desk.less
View file

@ -367,18 +367,25 @@ em.link-option {
/* module */
.module-section {
margin-bottom: 15px;
}
.module-item {
margin: 0px;
padding: 5px 0px;
padding: 7px;
border-bottom: 1px solid @border-color;
cursor: pointer;
}
.module-item h4 {
margin-bottom: 2px;
display: inline-block;
}
.module-item .module-item-description {
margin-top: -5px;
}
.module-item .badge {
margin-top: -2px;
margin-left: 3px;
@ -723,9 +730,8 @@ ul.linked-with-list li {
/* form footer */
.form-footer {
padding-bottom: 60px;
/*box-shadow: 0px -1px 6px rgba(0,0,0,0.3);*/
.layout-main-section-wrapper {
margin-bottom: 60px;
}
.form-footer h5 {

152
frappe/public/less/desktop.less Normal file
View file

@ -0,0 +1,152 @@
@import "variables.less";
@icon-color: #4b5661;
#page-desktop {
position: absolute;
min-width: 100%;
min-height: 100%;
padding-top: 14px;
padding-bottom: 50px;
margin-bottom: -50px;
border: 0px;
}
.case-wrapper {
position: relative;
margin: 0px;
float: left;
width: 138px;
height: 120px;
}
.case-label {
font-size: 90%;
line-height: 1.1;
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);*/
}
.circle {
color: #ff5858;
margin-top: -2px;
margin-left : -16px;
margin-right: 2px;
font-size: 14px;
}
.app-icon {
/* border-radius: 5px;*/
overflow: hidden;
padding: 15px;
display: inline-block;
margin: auto;
text-align: center;
background-color: #fff;
}
.app-icon i {
font-size: 48px;
min-width: 48px;
color: @icon-color;
display: inline-block;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.app-icon svg, .app-icon img {
height: 48px;
width: 48px;
margin-top: -3px;
}
.app-icon path {
fill: @icon-color;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.case-wrapper:hover path {
fill: @text-color;
}
.case-wrapper:hover i,
.case-wrapper:hover {
color: @text-color;
}
.app-icon-small {
padding: 12px;
}
.app-icon-img.app-icon-small {
padding: 0px;
height: 54px;
width: 54px;
}
.app-icon-img {
padding: 0px;
height: 70px;
width: 70px;
}
.app-icon-img img {
width: 100%;
height: 100%;
}
#icon-grid {
padding-top: 15px;
padding-bottom: 30px;
max-width: 970px;
margin: auto;
}
// mobile
@media (min-width: 768px) and (max-width: 991px) {
#icon-grid {
max-width: 690px;
}
}
@media (max-width: 767px) {
#icon-grid {
max-width: 320px;
}
.case-wrapper {
width: 80px;
height: 90px;
}
.case-label {
font-size: 80%;
}
.app-icon i {
font-size: 32px;
min-width: 32px;
}
.app-icon svg, .app-icon img {
height: 32px;
width: 32px;
}
}
@media (max-width: 320px) {
#icon-grid {
max-width: 280px;
}
.case-wrapper {
width: 70px;
height: 90px;
}
}

1
frappe/public/less/variables.less
View file

@ -1,3 +1,4 @@
@brand-primary: #5E64FF;
@border-color: #d1d8dd;
@text-color: #36414C;
@text-muted: #8D99A6;