Merge pull request #36759 from iamejaaz/v16-list-fixes

feat(mobile): new list view design

frappe/public/js/frappe/list/base_list.js

@@ -646,11 +646,18 @@ class FilterArea {
 		this.setup();
 		if (frappe.is_mobile()) this.setup_mobile(list_view);
 	}
+
 	setup_mobile(list_view) {
 		const me = this;
 		this.standard_filters_visible = false;
 		this.standard_filters_wrapper?.hide();
 		this.list_view.page.page_form.css("justify-content", "flex-end");
+		list_view.page.page_form.addClass("flex-column");
+		this.$filter_list_wrapper.addClass("justify-between p-0");
+
+		// added this to manage spaceing between filter and sorf area
+		this.$filter_list_wrapper.find(".filter-selector").css("margin", "0 0 0 auto");
+
 		$(`<button class="filter-toggle btn btn-default btn-sm filter-button">
 					<span class="filter-icon button-icon">
 						${frappe.utils.icon("funnel-plus")}
@@ -1126,13 +1133,22 @@ class FilterArea {
 		let fields = [];
 
 		if (!this.list_view.settings.hide_name_filter) {
-			fields.push({
+			let field = {
 				fieldtype: "Data",
 				label: "ID",
 				condition: "like",
 				fieldname: "name",
 				onchange: () => this.debounced_refresh_list_view(),
-			});
+			};
+
+			if (frappe.is_mobile()) {
+				let mobile_id_filter = this.$filter_list_wrapper.append(
+					`<div class="mobile-id-filter"></div>`
+				);
+				this.list_view.page.add_field(field, mobile_id_filter.find(".mobile-id-filter"));
+			} else {
+				fields.push(field);
+			}
 		}
 
 		if (

frappe/public/js/frappe/ui/page.html

@@ -52,6 +52,7 @@
 					{% } %}
 					<div class="filters flex"></div>
 					<div class="custom-actions hide hidden-xs hidden-md"></div>
+					<div class="custom-mobile-actions"></div>
 					<div class="standard-actions flex">
 						<span class="page-icon-group hide hidden-xs hidden-sm"></span>
 						<div class="menu-btn-group hide">

frappe/public/js/frappe/ui/page.js

@@ -159,6 +159,7 @@ frappe.ui.Page = class Page {
 
 		this.standard_actions = this.page_actions.find(".standard-actions");
 		this.custom_actions = this.page_actions.find(".custom-actions");
+		this.custom_mobile_actions = this.page_actions.find(".custom-mobile-actions");
 
 		this.page_form = $('<div class="page-form row hide"></div>').prependTo(this.main);
 		this.inner_toolbar = this.custom_actions;
@@ -202,7 +203,17 @@ frappe.ui.Page = class Page {
 	}
 
 	set_indicator(label, color) {
-		this.clear_indicator().removeClass("hide").html(`<span>${label}</span>`).addClass(color);
+		let indicator_html = `<span>${label}</span>`;
+		const is_mobile = frappe.is_mobile();
+		if (is_mobile) {
+			indicator_html = `<span class="indicator-doc-html" style="background-color: var(--${color}-400)"></span>`;
+		}
+		this.clear_indicator().removeClass("hide").html(indicator_html).addClass(color);
+
+		if (is_mobile) {
+			this.indicator.attr("title", label);
+			this.indicator.tooltip();
+		}
 	}
 
 	add_action_icon(icon, click, css_class = "", tooltip_label) {
@@ -794,7 +805,8 @@ frappe.ui.Page = class Page {
 			</div>
 		`);
 
-		if (!parent) parent = this.custom_actions;
+		if (!parent)
+			parent = frappe.is_mobile() ? this.custom_mobile_actions : this.custom_actions;
 		parent.removeClass("hide").append(custom_btn_group);
 
 		return custom_btn_group.find(".dropdown-menu");

frappe/public/js/frappe/ui/sort_selector.html

@@ -10,7 +10,8 @@
 			</span>
 		</button>
 		<button type="button" class="btn btn-default btn-sm sort-selector-button text-nowrap" data-toggle="dropdown">
-			<span class="dropdown-text">{{ __(sort_by_label) }}</span>
+			<span class="dropdown-text hidden-sm">{{ __(sort_by_label) }}</span>
+			<span>{{ frappe.utils.icon("chevron-down") }}</span>
 			<ul class="dropdown-menu dropdown-menu-right">
 				{% for value in options %}
 				<li>

frappe/public/js/frappe/views/reports/report_view.js

@@ -17,7 +17,9 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
 
 	setup_defaults() {
 		super.setup_defaults();
-		this.page_title = __("Report:") + " " + this.page_title;
+		if (!frappe.is_mobile()) {
+			this.page_title = __("Report:") + " " + this.page_title;
+		}
 		this.view = "Report";
 
 		this.link_title_doctype_fields = [];

frappe/public/scss/desk/mobile.scss

@@ -320,9 +320,17 @@ body {
 }
 
 @media (max-width: 480px) {
+	.mobile-id-filter .form-group {
+		width: 120px;
+	}
+
+	.list-subject a {
+		line-height: 0;
+	}
+
 	body[data-route^="Form"] {
 		.navbar-breadcrumbs {
-			max-width: 165px;
+			max-width: 125px;
 		}
 		.page-title {
 			width: 100%;

frappe/public/scss/desk/page.scss

@@ -38,6 +38,11 @@
 		align-items: center;
 		.indicator-pill {
 			margin-left: var(--margin-sm);
+			.indicator-doc-html {
+				height: 8px;
+				width: 8px;
+				border-radius: inherit;
+			}
 		}
 		.sub-heading {
 			@include get_textstyle("sm", "regular");