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

refactor(UI): Single card design for form

Browse source
This commit is contained in:
Shariq Ansari 2021-12-24 14:42:32 +05:30
parent 074d0b498b
commit a2a6e112ee
4 changed files with 35 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frappe/public/js/frappe/form/form.js
View file

@ -190,7 +190,7 @@ frappe.ui.form.Form = class FrappeForm {
setup_std_layout() {
this.form_wrapper = $('<div></div>').appendTo(this.layout_main);
this.body = $('<div></div>').appendTo(this.form_wrapper);
this.body = $('<div class="std-form-layout"></div>').appendTo(this.form_wrapper);
// only tray
this.meta.section_style='Simple'; // always simple!
@ -226,7 +226,7 @@ frappe.ui.form.Form = class FrappeForm {
this.layout.tabs[0].wrapper.prepend(dashboard_parent);
}
} else {
dashboard_parent.insertAfter(this.layout.wrapper.find('.form-message'));
this.layout.wrapper.find('.form-page').prepend(dashboard_parent);
}
this.dashboard = new frappe.ui.form.Dashboard(dashboard_parent, this);

4
frappe/public/scss/common/form.scss
View file

@ -1,4 +1,5 @@
.form-control {
height: inherit;
border: none;
font-size: var(--text-md);
position: relative;
@ -13,10 +14,9 @@
font-weight: normal;
font-size: var(--text-sm);
}
min-height: var(--input-height);
border-radius: $border-radius;
font-weight: 400;
padding: 8px 12px;
padding: 6px 12px;
cursor: default;
color: var(--disabled-text-color);
background-color: var(--disabled-control-bg);

14
frappe/public/scss/common/grid.scss
View file

@ -79,10 +79,9 @@
.grid-static-col,
.row-index {
height: 39px;
padding: var(--padding-sm) var(--padding-md);
height: 34px;
padding: 8px;
max-height: 200px;
// border-right: 1px solid var(--border-color);
}
.grid-row-check {
@ -108,6 +107,7 @@
.grid-row > .row {
.col:last-child {
margin-right: calc(-1 * var(--margin-sm));
border-right: none;
}
.col {
@ -149,7 +149,7 @@
}
textarea {
height: 40px !important;
height: 37px !important;
}
.form-control {
@ -157,7 +157,7 @@
border: 0px;
padding-top: 8px;
padding-bottom: 9px;
height: 40px;
height: 34px;
}
.link-btn {
@ -196,6 +196,10 @@
}
}
.grid-static-col[data-fieldtype="Check"] .static-area {
padding-top: 2px;
}
.grid-static-col[data-fieldtype="Rating"] .field-area {
margin-top: 1rem;
margin-left: 1rem;

34
frappe/public/scss/desk/form.scss
View file

@ -1,6 +1,12 @@
@import "../common/form.scss";
@import '~cropperjs/dist/cropper.min';
.std-form-layout > .form-layout > .form-page {
border-radius: var(--border-radius-md);
box-shadow: var(--card-shadow);
background-color: var(--card-bg);
}
.form-section, .form-dashboard-section {
margin: 0px;
@ -12,6 +18,7 @@
.section-head {
@extend .head-title;
font-size: var(--text-base);
width: 100%;
padding: var(--padding-sm) var(--padding-md);
margin: 0;
@ -47,8 +54,12 @@
.form-section.card-section,
.form-dashboard-section {
margin-bottom: var(--margin-lg);
@extend .frappe-card;
border-bottom: 1px solid var(--gray-200);
padding: var(--padding-xs);
}
.row.form-section.card-section.visible-section:last-child {
border-bottom: none;
}
.form-dashboard-section {
@ -57,9 +68,8 @@
}
.section-body {
display: block;
padding-left: var(--padding-md);
padding-right: var(--padding-md);
padding-bottom: var(--padding-md);
padding: var(--padding-md);
padding-top: 0;
}
}
@ -85,7 +95,8 @@
.comment-box {
@include card();
padding: 25px var(--padding-xl);
margin-top: var(--margin-lg);
padding: var(--padding-lg);
.comment-input-header {
@extend .head-title;
margin-bottom: var(--margin-sm);
@ -304,19 +315,18 @@
}
.form-tabs-list {
margin-bottom: var(--margin-lg);
padding-left: var(--padding-xs);
border-bottom: 1px solid var(--gray-200);
.form-tabs {
.nav-item {
.nav-link {
padding-bottom: var(--padding-md);
color: var(--gray-700);
padding-left: 0;
padding-right: 0;
margin-right: var(--margin-xl);
padding: var(--padding-md) 0;
margin: 0 var(--margin-md);
&.active {
font-weight: 500;
font-weight: 600;
border-bottom: 1px solid var(--primary);
color: var(--text-color);
}