Add attachments name when printing an email.

If the attachments list is expanded show the list otherwise show the
attachments count as indication while printing an email

close #10218

Author: BijinDev

src/common/gui/base/Expander.ts

@@ -21,6 +21,7 @@ export type ExpanderAttrs = {
 	showWarning?: boolean
 	color?: string
 	style?: Record<string, any>
+	isPrintable?: boolean
 }
 export type ExpanderPanelAttrs = {
 	expanded: boolean
@@ -33,7 +34,8 @@ export class ExpanderButton implements Component<ExpanderAttrs> {
 		return m(
 			".limit-width",
 			m(
-				"button.expander.bg-transparent.pt-8.hover-ul.limit-width.flex.items-center.b.text-ellipsis.flash",
+				"button.expander.bg-transparent.pt-8.hover-ul.limit-width.flex.items-center.b.text-ellipsis.flash" +
+					`${!a.expanded && a.isPrintable ? ".print" : ""}`,
 				{
 					style: a.style,
 					onclick: (event: MouseEvent) => {

src/common/gui/base/buttons/BaseButton.ts

@@ -22,6 +22,7 @@ export interface BaseButtonAttrs {
 	class?: string
 	role?: AriaRole
 	iconWrapperSelector?: string
+	isPrintable?: boolean
 }
 
 export class BaseButton implements ClassComponent<BaseButtonAttrs> {
@@ -32,7 +33,7 @@ export class BaseButton implements ClassComponent<BaseButtonAttrs> {
 		const pressed = booleanToAttributeValue(attrs.pressed)
 		const selected = booleanToAttributeValue(attrs.selected)
 		return m(
-			"button",
+			attrs.isPrintable ? "button.print" : "button",
 			{
 				title: lang.getTranslationText(attrs.label),
 				disabled,

src/common/gui/base/buttons/BubbleButton.ts

@@ -4,7 +4,7 @@ import { lang, MaybeTranslation } from "../../../misc/LanguageViewModel.js"
 import { AllIcons, Icon } from "../Icon.js"
 import { theme } from "../../theme.js"
 import { styles } from "../../styles.js"
-import { component_size, px, size } from "../../size.js"
+import { component_size, px } from "../../size.js"
 
 export interface BubbleButtonAttrs {
 	label: MaybeTranslation
@@ -49,6 +49,7 @@ export class BubbleButton implements Component<BubbleButtonAttrs> {
 				style: { height: px(bubbleButtonHeight()), maxHeight: px(bubbleButtonHeight()) },
 				class: `smaller bubble flex center-vertically limit-width ${bubbleButtonPadding()} flash`,
 				onclick: attrs.onclick,
+				isPrintable: true,
 			},
 			children,
 		)

src/common/gui/main-styles.ts

@@ -2807,7 +2807,6 @@ styles.registerStyle("main", () => {
 			".print": {
 				color: "black",
 				"background-color": "white",
-				display: "block",
 			},
 			"html, body": {
 				position: "initial",

src/mail-app/mail/view/MailViewerHeader.ts

@@ -628,6 +628,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 								onExpandedChange: (change) => {
 									this.filesExpanded = change
 								},
+								isPrintable: true,
 							}),
 				]),