fix: cypress, dark mode, grid search, timeline

fixes for Espresso
* due to have fixed height of the grid heading, the search bar was not visible now
  added class that will double the height of the grid heading row if filter row is present.
* dark mode fixes: button active state, Awesomeplete dropdown, Quill editor.
* timeline style fixes

frappe/public/js/frappe/form/controls/comment.js

@@ -15,7 +15,7 @@ frappe.ui.form.ControlComment = class ControlComment extends frappe.ui.form.Cont
 				${frappe.avatar(frappe.session.user, "avatar-medium")}
 					<div class="frappe-control col"></div>
 				</div>
-				<button class="btn hidden btn-comment btn-xs" style="margin-left:43px;">
+				<button class="btn hidden btn-comment btn-xs" style="margin-left:48px;">
 					${__("Comment")}
 				</button>
 			</div>

frappe/public/js/frappe/form/controls/link.js

@@ -285,7 +285,7 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
 								// new item
 								r.results.push({
 									html:
-										"<span class='text-primary link-option'>" +
+										"<span class='link-option'>" +
 										"<i class='fa fa-plus' style='margin-right: 5px;'></i> " +
 										__("Create a new {0}", [__(me.get_options())]) +
 										"</span>",
@@ -309,7 +309,7 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
 								// not applicable in web forms
 								r.results.push({
 									html:
-										"<span class='text-primary link-option'>" +
+										"<span class='link-option'>" +
 										"<i class='fa fa-search' style='margin-right: 5px;'></i> " +
 										__("Advanced Search") +
 										"</span>",

frappe/public/js/frappe/form/footer/form_timeline.js

@@ -55,15 +55,16 @@ class FormTimeline extends BaseTimeline {
 		};
 		let me = this;
 		this.timeline_wrapper.remove(this.timeline_actions_wrapper);
-		this.timeline_wrapper
-				.prepend(`
+		this.timeline_wrapper.prepend(`
 				<div class="timeline-item activity-title">
 				<h4>${__("Activity")}</h4>
 				</div>
-			`)
+			`);
 		if (has_communications()) {
-			this.timeline_wrapper.find(".timeline-item.activity-title")
-				.append(`
+			this.timeline_wrapper
+				.find(".timeline-item.activity-title")
+				.append(
+					`
 					<div class="d-flex align-items-center show-all-activity">
 						<span style="color: var(--text-light); margin:0px 6px;">Show all activity</span>
 						<label class="switch">
@@ -71,7 +72,8 @@ class FormTimeline extends BaseTimeline {
 							<span class="slider round"></span>
 						</label>
 					</div>
-				`)
+				`
+				)
 				.find("input[type=checkbox]")
 				.prop("checked", !me.only_communication)
 				.on("click", function (e) {
@@ -80,7 +82,9 @@ class FormTimeline extends BaseTimeline {
 					$(this).tab("show");
 				});
 		}
-		this.timeline_wrapper.find(".timeline-item.activity-title").append(this.timeline_actions_wrapper);
+		this.timeline_wrapper
+			.find(".timeline-item.activity-title")
+			.append(this.timeline_actions_wrapper);
 	}
 
 	setup_document_email_link() {
@@ -100,7 +104,7 @@ class FormTimeline extends BaseTimeline {
 					</div>
 				</div>
 			`);
-			this.timeline_actions_wrapper.append(this.document_email_link_wrapper);
+			this.timeline_items_wrapper.before(this.document_email_link_wrapper);
 
 			this.document_email_link_wrapper.find(".document-email-link").on("click", (e) => {
 				let text = $(e.target).text();
@@ -153,9 +157,7 @@ class FormTimeline extends BaseTimeline {
 		this.timeline_items.push(this.get_modified_message());
 		this.timeline_items.push(...this.get_communication_timeline_contents());
 		this.timeline_items.push(...this.get_comment_timeline_contents());
-		this.timeline_wrapper.addClass("only_communication_timeline");
 		if (!this.only_communication) {
-			this.timeline_wrapper.removeClass("only_communication_timeline");
 			this.timeline_items.push(...this.get_view_timeline_contents());
 			this.timeline_items.push(...this.get_energy_point_timeline_contents());
 			this.timeline_items.push(...this.get_version_timeline_contents());
@@ -168,8 +170,6 @@ class FormTimeline extends BaseTimeline {
 			this.timeline_items.push(...this.get_info_timeline_contents());
 			this.timeline_items.push(...this.get_milestone_timeline_contents());
 		}
-		
-		
 	}
 
 	get_view_timeline_contents() {

frappe/public/js/frappe/form/grid.js

@@ -362,6 +362,12 @@ export default class Grid {
 			grid: this,
 			show_search: true,
 		});
+		this.header_search.row.addClass("filter-row")
+		if (this.header_search.show_search || this.header_search.show_search_row()){
+			$(this.parent).find(".grid-heading-row").addClass("with-filter");
+		} else{
+			$(this.parent).find(".grid-heading-row").removeClass("with-filter");
+		} 
 
 		this.filter_applied && this.update_search_columns();
 	}

frappe/public/js/frappe/form/sidebar/attachments.js

@@ -162,7 +162,7 @@ frappe.ui.form.Attachments = class Attachments {
 		}
 
 		const icon = `<a href="/app/file/${fileid}">
-				${frappe.utils.icon(attachment.is_private ? "lock" : "unlock", "sm ml-0")}
+				${frappe.utils.icon(attachment.is_private ? "es-line-lock" : "es-line-unlock", "sm ml-0")}
 			</a>`;
 
 		$(`<li class="attachment-row">`)

frappe/public/js/frappe/form/templates/timeline_message_box.html

@@ -67,7 +67,7 @@
 			{% } %}
 			<div class="custom-actions"></div>
 			<div class="more-actions">
-				<a type="button" class="	"
+				<a type="button" class="action-btn"
 					data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<svg class="icon icon-sm">
 						<use href="#icon-dot-horizontal"></use>

frappe/public/js/frappe/ui/alt_keyboard_shortcuts.js

@@ -164,6 +164,7 @@ frappe.ui.keys.AltShortcutGroup = class AltShortcutGroup {
 				return letter;
 			})
 			.join("");
+		text_html = `<span>${text_html}</span>`;
 		let original_text_html = shortcut.$text_el.html();
 		text_html = original_text_html.replace(shortcut.text.trim(), text_html.trim());
 		shortcut.$text_el.html(text_html);

frappe/public/scss/common/awesomeplete.scss

@@ -20,7 +20,7 @@
 		position: absolute;
 		width: 100%;
 		list-style: none;
-		background-color: var(--fg-color);
+		background-color: var(--bg-color);
 		max-height: unquote("min(60vh, 300px)");
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -56,6 +56,7 @@
 
 		&> li .link-option {
 			font-weight: normal;
+			color: var(--text-color);
 		}
 
 		&> li:hover, &> li[aria-selected=true] {

frappe/public/scss/common/buttons.scss

@@ -13,7 +13,9 @@
 
 	&:active {
 		// override #dadada that comes from bootstrap (probably) to support dark theme.
-		background-color: var(--bg-color) !important;
+		color: var(--text-color) !important;
+		background-color: var(--control-bg) !important;
+		box-shadow: var(--focus-default) !important;
 	}
 
 	&.icon-btn {
@@ -90,6 +92,11 @@
 	white-space: nowrap;
 	--icon-stroke: currentColor;
 	--icon-fill-bg: var(--btn-primary);
+
+	&:active {
+		color: var(--gray-100) !important;
+		background-color: var(--invert-neutral) !important;
+	}
 }
 
 .btn.btn-danger {
@@ -110,4 +117,8 @@
 		background-color: var(--bg-dark-gray);
 		box-shadow: none;
 	}
+	.btn-primary:active {
+			color: var(--gray-900) !important;
+			background-color: var(--invert-neutral) !important;
+	}
 }

frappe/public/scss/common/grid.scss

@@ -18,6 +18,18 @@
 	border-top-left-radius: var(--border-radius-md);
 	border-top-right-radius: var(--border-radius-md);
 
+	&.with-filter {
+		height: 64px;
+	}
+	.filter-row {
+		background-color: var(--bg-color);
+
+		.search {
+			// TODO: Align with table grid without overwriting padding if possible
+			padding: 4px 7px 4px 7px !important;
+		}
+	}
+
 	.grid-static-col, .row-check, .row-index {
 		height: 32px;
 		padding: 6px 8px !important;
@@ -123,7 +135,7 @@
 	}
 
 	&.search {
-		padding: 0 !important;
+		padding: var(--grid-padding) !important;
 	}
 }
 

frappe/public/scss/common/quill.scss

@@ -333,4 +333,6 @@
 
 .comment-input-wrapper .ql-editor.ql-blank::before {
 	left: 8px;
+	color: var(--text-muted);
+	font-style: normal;
 }

frappe/public/scss/desk/dark.scss

@@ -34,7 +34,7 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 	--control-bg: var(--gray-800);
 	--control-bg-on-gray: var(--gray-800);
 	--awesomebar-focus-bg: var(--control-bg);
-	--awesomplete-hover-bg: var(--gray-700);
+	--awesomplete-hover-bg: var(--gray-800);
 	--modal-bg: var(--gray-900);
 	--toast-bg: var(--modal-bg);
 	--popover-bg: var(--bg-color);
@@ -185,7 +185,7 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 		}
 	}
 	.comment-input-wrapper .ql-editor.ql-blank::before {
-		color: var(--text-on-gray);
+		color: var(--text-muted);
 	}
 	// --appreciation-color: var(--dark-green-100);
 	// --appreciation-bg: var(--dark-green-600);

frappe/public/scss/desk/global.scss

@@ -344,7 +344,7 @@ select.input-xs {
 	}
 
 	.divider, .dropdown-divider {
-		margin: 0px;
+		margin: 4px;
 	}
 
 	:last-child {

frappe/public/scss/desk/page.scss

@@ -58,6 +58,9 @@
 		height: var(--btn-height);
 		margin-left: var(--margin-sm, 8px);
 		border-radius: var(--border-radius);
+		display: flex;
+		align-items: center;
+		gap: 8px;
 	}
 	.btn:not(.icon-btn) {
 		padding: 4px 8px;

frappe/public/scss/desk/timeline.scss

@@ -31,9 +31,6 @@ $threshold: 34;
 		border-left: 1px solid var(--dark-border-color);
 		bottom: calc(-1 * var(--timeline-item-bottom-margin) + 25px);
 	}
-	&.only_communication_timeline::before {
-		top: 130px;
-	}
 	.timeline-dot {
 		@include timeline-badge(16px);
 		left: calc(-1.25 * var(--timeline-item-left-margin) / 2);