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

Merge pull request #29142 from iamejaaz/child-table-ui-29106

Browse source
This commit is contained in:
Suraj Shetty 2025-01-16 16:19:06 +05:30 • committed by GitHub
commit 9a1eab7512
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 142 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
frappe/public/js/frappe/form/grid.js
View file

@ -74,11 +74,11 @@ export default class Grid {
<div class="grid-empty text-center text-extra-muted">
${__("No rows")}
</div>
<div class="grid-scroll-bar">
<div class="grid-scroll-bar-rows"></div>
</div>
</div>
</div>
<div class="grid-scroll-bar">
<div class="grid-scroll-bar-rows"></div>
</div>
</div>
<div class="small form-clickable-section grid-footer">
<div class="flex justify-between">
@ -123,6 +123,56 @@ export default class Grid {
this.form_grid = this.wrapper.find(".form-grid");
if (this.form_grid) {
this.form_grid.on("wheel", (e) => {
const isTrackpad = Math.abs(e.originalEvent.wheelDeltaY) < 50;
const delta = e.originalEvent.deltaX;
const scroll_bar = this.wrapper.find(".grid-scroll-bar");
if (isTrackpad) {
scroll_bar.scrollLeft(scroll_bar.scrollLeft() + delta);
} else {
scroll_bar.scrollLeft(scroll_bar.scrollLeft() + delta * 4);
}
// prevent default behaviour when it is scrolled horizontally
if (e.originalEvent.deltaX != 0) {
e.preventDefault();
}
});
let touchStartX = 0;
let touchMoveX = 0;
let isTouchScrolling = false;
// Handle touch start
this.form_grid.on("touchstart", (e) => {
const touch = e.originalEvent.touches[0];
touchStartX = touch.pageX;
isTouchScrolling = true;
});
// Handle touch move
this.form_grid.on("touchmove", (e) => {
if (!isTouchScrolling) return;
const touch = e.originalEvent.touches[0];
touchMoveX = touch.pageX;
const scrollBar = this.wrapper.find(".grid-scroll-bar");
const deltaX = touchStartX - touchMoveX;
scrollBar.scrollLeft(scrollBar.scrollLeft() + deltaX);
touchStartX = touchMoveX;
e.preventDefault();
});
// Handle touch end
this.form_grid.on("touchend", () => {
isTouchScrolling = false;
});
}
this.setup_add_row();
this.setup_grid_pagination();

75
frappe/public/js/frappe/form/grid_row.js
View file

@ -10,6 +10,7 @@ export default class GridRow {
this.columns_list = [];
this.row_check_html = '<input type="checkbox" class="grid-row-check">';
this.make();
this.setup_tab_listeners();
}
make() {
let me = this;
@ -269,11 +270,15 @@ export default class GridRow {
}
});
} else if (this.show_search) {
this.row_check = $(`<div class="row-check col search"></div>`).appendTo(this.row);
this.row_check = $(`
<div class="row-check col search">
<input type="text" class="form-control input-xs text-center invisible">
</div>`).appendTo(this.row);
this.row_index = $(
`<div class="row-index col search">
<input type="text" class="form-control input-xs text-center" >
<span style="width: 33px;" class="d-block"></span>
</div>`
).appendTo(this.row);
@ -982,29 +987,7 @@ export default class GridRow {
$col.field_area = $('<div class="field-area"></div>').appendTo($col).toggle(false);
$col.static_area = $('<div class="static-area ellipsis"></div>').appendTo($col).html(txt);
$(document).ready(function () {
let $scrollBar = $(".grid-scroll-bar");
let form_grid = $(".form-grid");
let grid_container = $(".form-grid-container");
let grid_scroll_bar_rows = $(".grid-scroll-bar-rows");
// Make sure the grid container is scrollable
$scrollBar.on("scroll", function (event) {
grid_container = $(event.currentTarget).closest(".form-grid-container");
form_grid = $(event.currentTarget).closest(".form-grid");
grid_scroll_bar_rows = $(event.currentTarget).closest(".grid-scroll-bar-rows");
var scroll_left = $(this).scrollLeft();
// Sync the form grid's left position with the scroll bar
form_grid.css("position", "relative");
form_grid.css("left", -scroll_left + "px");
$(this).css("margin-left", scroll_left + "px");
});
$scrollBar.css("width", grid_container.width());
grid_scroll_bar_rows.css("width", form_grid[0].scrollWidth);
});
this.handle_scroll_bar();
// set title attribute to see full label for columns in the heading row
if (!this.doc) {
@ -1021,6 +1004,50 @@ export default class GridRow {
return $col;
}
handle_scroll_bar() {
$(document).ready(function () {
let $scrollBar = $(".grid-scroll-bar");
let form_grid = $(".form-grid");
let grid_scroll_bar_rows = $(".grid-scroll-bar-rows");
let parent_field_name = "";
let grid_width = 0;
let grid_body_width = 0;
form_grid.each((grid_index, grid) => {
parent_field_name = $(grid)
.closest("[data-fieldname][data-fieldtype]")
.attr("data-fieldname");
grid_width = $($(grid)[0]).width();
grid_body_width = $(
'div[data-fieldname="' + parent_field_name + '"] .grid-body'
).width();
$('div[data-fieldname="' + parent_field_name + '"] .grid-scroll-bar').width(
grid_width
);
$('div[data-fieldname="' + parent_field_name + '"] .grid-scroll-bar-rows').width(
grid_body_width
);
});
// Make sure the grid container is scrollable
$scrollBar.on("scroll", function (event) {
grid_scroll_bar_rows = $(event.currentTarget).closest(".grid-scroll-bar-rows");
var scroll_left = $(this).scrollLeft();
// Sync the form grid's left position with the scroll bar
form_grid.css("position", "relative");
form_grid.css("left", -scroll_left + "px");
});
});
}
setup_tab_listeners() {
$(".nav-link").on("shown.bs.tab", () => {
this.handle_scroll_bar();
});
}
activate() {
this.toggle_editable_row(true);
return this;

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

@ -2,6 +2,7 @@
border: 1px solid var(--table-border-color);
border-radius: var(--border-radius-md);
color: var(--text-color);
min-height: 150px;
background-color: var(--subtle-accent);
}
@ -25,7 +26,7 @@
}
&.with-filter {
height: 64px;
height: 66px;
}
.filter-row {
background-color: var(--bg-color);
@ -33,7 +34,6 @@
.search {
// TODO: Align with table grid without overwriting padding if possible
padding: 4px 7px 4px 7px !important;
border-bottom: 1px solid var(--table-border-color);
}
}
@ -190,6 +190,7 @@
.row-index {
text-align: center;
flex-grow: 0;
}
.grid-row > .row {
@ -230,7 +231,9 @@
--input-disabled-bg: var(--gray-50);
.grid-static-col {
padding: 0px !important;
height: 32px;
}
.grid-static-col.row-index {
padding: var(--grid-padding) !important;
}
.frappe-control[data-fieldtype="Select"].form-group .select-icon {
@ -328,6 +331,9 @@
line-height: 1.3 !important;
}
}
.data-row div[data-fieldname="options"] {
height: 40px;
}
}
@media (max-width: 767px) {
@ -600,44 +606,58 @@
background-color: var(--subtle-accent);
border-top-left-radius: var(--border-radius-md);
border-top-right-radius: var(--border-radius-md);
border: 1px solid var(--table-border-color);
.form-grid {
display: grid;
grid-auto-rows: min-content;
border: unset;
.grid-static-col.col-xs-1 {
flex: 1 0 60px;
width: 60px;
}
.grid-static-col.col-xs-2 {
flex: 1 0 90px;
flex: 1 0 100px;
width: 100px;
}
.grid-static-col.col-xs-3 {
flex: 1 0 120px;
flex: 1 0 140px;
width: 140px;
}
.grid-static-col.col-xs-4 {
flex: 1 0 150px;
flex: 1 0 200px;
width: 200;
}
.grid-static-col.col-xs-5 {
flex: 1 0 200px;
flex: 1 0 250px;
width: 250px;
}
.grid-static-col.col-xs-6 {
flex: 1 0 250px;
flex: 1 0 300px;
width: 300px;
}
.grid-static-col.col-xs-7 {
flex: 1 0 300px;
flex: 1 0 350px;
width: 350px;
}
.grid-static-col.col-xs-8 {
flex: 1 0 350px;
flex: 1 0 400px;
width: 400px;
}
.grid-static-col.col-xs-9 {
flex: 1 0 400px;
flex: 1 0 450px;
width: 450px;
}
.grid-static-col.col-xs-10 {
flex: 1 0 450px;
flex: 1 0 500px;
width: 500px;
}
.grid-static-col.col-xs-11 {
flex: 1 0 500px;
flex: 1 0 550px;
width: 550px;
}
.grid-static-col.col-xs-12 {
flex: 1 0 550px;
flex: 1 0 600px;
width: 600px;
}
.grid-row > .row .col:last-child,
.grid-row > .dialog-assignment-row .col:first-child,
@ -650,10 +670,13 @@
max-width: 40px;
min-width: 40px;
}
.grid-heading-row .grid-row .data-row.row,
.grid-body .rows .grid-row .data-row.row {
justify-content: space-between;
}
}
}
.grid-scroll-bar {
display: none;
overflow-x: auto;
height: 12px;
position: relative;
@ -670,10 +693,6 @@
}
@media (max-width: map-get($grid-breakpoints, "md")) {
.grid-scroll-bar {
display: block;
}
.form-column.col-sm-6 .form-grid {
.row-index {
display: block;