fix: print format builder sidebar style
This commit is contained in:
prssanna
parent
ed1b265f6e
commit
611d5d2d10
5 changed files with 61 additions and 58 deletions
|
|
@ -67,19 +67,28 @@
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.field-label.data-pill {
|
||||
border: 1px solid var(--dark-border-color);
|
||||
padding: 4px 8px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.print-format-builder-sidebar {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
vertical-align: top;
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
bottom: 0px;
|
||||
padding: 5px;
|
||||
top: var(--navbar-height);
|
||||
height: 85vh;
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.filter-searchbox {
|
||||
padding: 10px;
|
||||
padding-left: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.print-format-builder-main {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-top: 0px;
|
||||
margin-left: 160px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,14 +42,12 @@ frappe.PrintFormatBuilder = Class.extend({
|
|||
this.page = frappe.ui.make_app_page({
|
||||
parent: this.parent,
|
||||
title: __("Print Format Builder"),
|
||||
single_column: true
|
||||
});
|
||||
|
||||
this.page.main.css({"border-color": "transparent"});
|
||||
|
||||
this.page.sidebar = $('<div class="print-format-builder-sidebar"></div>').appendTo(this.page.main);
|
||||
this.page.main = $('<div class="border print-format-builder-main frappe-card" \
|
||||
style="width: calc(100% - 160px);"></div>').appendTo(this.page.main);
|
||||
this.page.sidebar = $('<div class="print-format-builder-sidebar"></div>').appendTo(this.page.sidebar);
|
||||
this.page.main = $('<div class="col-md-12 border print-format-builder-main frappe-card"></div>').appendTo(this.page.main);
|
||||
|
||||
// future-bindings for buttons on sections / fields
|
||||
// bind only once
|
||||
|
|
@ -61,7 +59,6 @@ frappe.PrintFormatBuilder = Class.extend({
|
|||
},
|
||||
show_start: function() {
|
||||
this.page.main.html(frappe.render_template("print_format_builder_start", {}));
|
||||
this.page.sidebar.html("");
|
||||
this.page.clear_actions();
|
||||
this.page.set_title(__("Print Format Builder"));
|
||||
this.start_edit_print_format();
|
||||
|
|
@ -168,16 +165,11 @@ frappe.PrintFormatBuilder = Class.extend({
|
|||
});
|
||||
},
|
||||
setup_sidebar: function() {
|
||||
var me = this;
|
||||
this.page.sidebar.empty();
|
||||
|
||||
// prepend custom HTML field
|
||||
var fields = [this.get_custom_html_field()].concat(this.meta.fields);
|
||||
|
||||
$(frappe.render_template("print_format_builder_sidebar",
|
||||
{fields: fields}))
|
||||
.appendTo(this.page.sidebar);
|
||||
|
||||
this.setup_field_filter();
|
||||
},
|
||||
get_custom_html_field: function() {
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
<div class="print-format-builder-field"
|
||||
{% if(field.print_hide) { %}style="background-color: #F7FAFC; color: #8D99A6;"
|
||||
title="{{ __("Hidden") }}"{% } %}
|
||||
data-fieldname="{%= field.fieldname %}"
|
||||
data-label="{{ __(field.label) }}"
|
||||
{% if(field.print_hide) { %}style="background-color: #F7FAFC; color: #8D99A6;"
|
||||
title="{{ __("Hidden") }}"{% } %}
|
||||
data-fieldname="{%= field.fieldname %}"
|
||||
data-label="{{ __(field.label) }}"
|
||||
|
||||
{% if field.align %}data-align="{{ field.align }}"{% endif %}
|
||||
data-fieldtype="{%= field.fieldtype %}"
|
||||
{% if(field.fieldtype==="Table") { %}
|
||||
data-columns="{%= me.get_visible_columns_string(field) %}"
|
||||
data-doctype="{%= field.options %}"
|
||||
{% } %}>
|
||||
data-fieldtype="{%= field.fieldtype %}"
|
||||
{% if(field.fieldtype==="Table") { %}
|
||||
data-columns="{%= me.get_visible_columns_string(field) %}"
|
||||
data-doctype="{%= field.options %}"
|
||||
{% } %}>
|
||||
{% if !in_list(["Table", "HTML", "Custom HTML"], field.fieldtype) %}
|
||||
<a class="field-settings pull-right
|
||||
btn-default btn-xs" style="padding-top: 3px">
|
||||
<span class="octicon octicon-gear text-muted"></span></a>
|
||||
<a class="field-settings pull-right
|
||||
btn-default btn-xs" style="padding-top: 3px">
|
||||
<span class="octicon octicon-gear text-muted"></span></a>
|
||||
{% endif %}
|
||||
{% if(field.fieldtype==="Custom HTML") { %}
|
||||
<div class="text-right">
|
||||
<a class="edit-html btn btn-default btn-xs">
|
||||
{%= __("Edit HTML") %}</a>
|
||||
</div>
|
||||
<div class="html-content"
|
||||
{% if(field.fieldtype==="Custom HTML") { %}
|
||||
<div class="text-right">
|
||||
<a class="edit-html btn btn-default btn-xs">
|
||||
{%= __("Edit HTML") %}</a>
|
||||
</div>
|
||||
<div class="html-content"
|
||||
{% if field.custom_html_id!==undefined %}
|
||||
data-custom-html-id={{ field.custom_html_id }}{% endif %}>
|
||||
{{ field.options || me.get_no_content() }}</div>
|
||||
{% } else { %}
|
||||
<span class="field-label">{{ __(field.label) }}</span>
|
||||
{% if(field.fieldtype==="Table") { %}
|
||||
<span> ({%= __("Table") %})</span>
|
||||
<a class="pull-right select-columns btn btn-default btn-xs">
|
||||
{%= __("Select Columns") %}</a>
|
||||
{% } %}
|
||||
{% } %}
|
||||
{% } else { %}
|
||||
<div class="field-label">{{ __(field.label) }}</div>
|
||||
{% if(field.fieldtype==="Table") { %}
|
||||
<span> ({%= __("Table") %})</span>
|
||||
<a class="pull-right select-columns btn btn-default btn-xs">
|
||||
{%= __("Select Columns") %}</a>
|
||||
{% } %}
|
||||
{% } %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<div class="panel-bg" style="padding: 10px; margin-bottom: 10px;">
|
||||
<input type="text" class="form-control input-sm filter-fields" name="filter-fields"
|
||||
placeholder="{%= __("Filter...") %}">
|
||||
<div class="panel-bg filter-searchbox">
|
||||
<input type="text" class="form-control input-sm filter-fields" name="filter-fields"
|
||||
placeholder="{%= __("Filter...") %}">
|
||||
</div>
|
||||
<div class="print-format-builder-fields">
|
||||
{% for (var i=0, l=fields.length; i < l; i++) { var f = fields[i]; %}
|
||||
{% if(!in_list(["Section Break", "Column Break", "Fold"], f.fieldtype)) { %}
|
||||
<div class="print-format-builder-field-placeholder ellipsis"
|
||||
data-fieldname="{%= f.fieldname %}">
|
||||
<span class="btn btn-xs field-label
|
||||
{%= (f.fieldtype==="Custom HTML") ? "btn-info" : "btn-default" %}"
|
||||
style="cursor: grab; display: inline-block">
|
||||
{%= __(f.label) %}
|
||||
</span>
|
||||
</div>
|
||||
{% } %}
|
||||
{% } %}
|
||||
{% for (var i=0, l=fields.length; i < l; i++) { var f = fields[i]; %}
|
||||
{% if(!in_list(["Section Break", "Column Break", "Fold"], f.fieldtype)) { %}
|
||||
<div class="print-format-builder-field-placeholder"
|
||||
data-fieldname="{%= f.fieldname %}">
|
||||
<div title="{{f.label}}" class="field-label data-pill ellipsis
|
||||
{%= (f.fieldtype==="Custom HTML") ? "btn-secondary-dark" : "btn-default" %}"
|
||||
style="cursor: grab; display: inline-block">
|
||||
{%= __(f.label) %}
|
||||
</div>
|
||||
</div>
|
||||
{% } %}
|
||||
{% } %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -141,6 +141,8 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
|
|||
--text-xl: 18px;
|
||||
--text-2xl: 20px;
|
||||
|
||||
--navbar-height: 60px;
|
||||
|
||||
--text-bold: 500;
|
||||
|
||||
--shadow-xs: 0px 0px 0.5px rgba(0,0,0,0.75), 0px 1px 2px rgba(0,0,0,0.13);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue