Stowage/tutanota
2
0
Fork 0
mirror of https://github.com/tutao/tutanota.git synced 2025-10-19 16:03:43 +00:00
Code Issues Projects Releases Packages Wiki Activity

finalize margin classes

Browse source
This commit is contained in:
yoy 2025-10-10 14:14:45 +02:00
parent 3d1487ef4a
commit b79e64f8a3
27 changed files with 44 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/common/gui/base/ActionBar.ts
View file

@ -13,7 +13,7 @@ export type ActionBarAttrs = {
export class ActionBar implements Component<ActionBarAttrs> {
view(vnode: Vnode<ActionBarAttrs>): Children {
return m(
".action-bar.flex-end.items-center.ml-between-s",
".action-bar.flex-end.items-center.ml-between-4",
vnode.attrs.buttons.map((b) => m(IconButton, b)),
)
}

4
src/common/gui/base/DialogHeaderBar.ts
View file

@ -42,7 +42,7 @@ export class DialogHeaderBar implements Component<DialogHeaderBarAttrs> {
},
[
m(
columnClass + ".ml-negative-s",
columnClass + ".ml-negative-8",
resolveMaybeLazy(a.left).map((a) => m(Button, a)),
), // ellipsis is not working if the text is directly in the flex element, so create a child div for it
a.middle
@ -55,7 +55,7 @@ export class DialogHeaderBar implements Component<DialogHeaderBarAttrs> {
)
: null,
m(
columnClass + ".mr-negative-s.flex.justify-end",
columnClass + ".mr-negative-8.flex.justify-end",
resolveMaybeLazy(a.right).map((a) => m(Button, a)),
),
],

2
src/common/gui/base/InfoBanner.ts
View file

@ -58,7 +58,7 @@ export class InfoBanner implements Component<InfoBannerAttrs> {
{ style: { "margin-left": px(size.icon_24 + 1) } }, // allow room for the icon
[
m(".mr-12.pt-s.pb-s", typeof message === "function" ? message() : m(".small.text-break", lang.get(message))),
m(".flex.ml-negative-s", { style: buttonContainerStyle }, [this.renderButtons(buttons), this.renderHelpLink(helpLink)]),
m(".flex.ml-negative-8", { style: buttonContainerStyle }, [this.renderButtons(buttons), this.renderHelpLink(helpLink)]),
],
),
],

2
src/common/gui/base/RadioSelector.ts
View file

@ -56,7 +56,7 @@ export class RadioSelector<T> implements Component<RadioSelectorAttrs<T>> {
},
},
[
m("input[type=radio].m-0.mr-button.content-accent-accent", {
m("input[type=radio].m-0.mr-8.content-accent-accent", {
/* The `name` attribute defines the group the radio button belongs to. Not the name/label of the radio button itself.
* See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group
*/

2
src/common/gui/base/RecipientButton.ts
View file

@ -10,7 +10,7 @@ export type Attrs = {
export class RecipientButton implements Component<Attrs> {
view({ attrs }: Vnode<Attrs>): Children {
return m(
"button.mr-button.content-accent-fg.print.small",
"button.mr-8.content-accent-fg.print.small",
{
style: Object.assign(
{

2
src/common/gui/base/RichTextToolbar.ts
View file

@ -58,7 +58,7 @@ export class RichTextToolbar implements Component<RichTextToolbarAttrs> {
},
[
m(
".flex-end.wrap.items-center.mb-4.mt-4.ml-between-s",
".flex-end.wrap.items-center.mb-4.mt-4.ml-between-4",
this.renderStyleButtons(attrs),
this.renderCustomButtons(attrs),
this.renderAlignDropDown(attrs),

4
src/common/gui/base/buttons/RowButton.ts
View file

@ -44,12 +44,12 @@ export class RowButton implements Component<RowButtonAttrs> {
? m(Icon, {
icon: attrs.icon,
container: "div",
class: "mr-button",
class: "mr-8",
style: { fill: color },
size: IconSize.PX24,
})
: attrs.icon === "none"
? m(".icon-24.mr-button")
? m(".icon-24.mr-8")
: null,
class: "flex items-center state-bg button-content plr-button " + attrs.class,
style: {

2
src/common/gui/dialogs/ProgressDialog.ts
View file

@ -32,7 +32,7 @@ export async function showProgressDialog<T>(
headerBarAttrs
? m(DialogHeaderBar, {
...headerBarAttrs,
class: "mb-32 mt-negative-l mr-negative-l ml-negative-l",
class: "mb-32 mt-negative-24 mr-negative-24 ml-negative-24",
})
: null,
m(

45
src/common/gui/main-styles.ts
View file

@ -591,54 +591,32 @@ styles.registerStyle("main", () => {
".pl-button": {
"padding-left": px(size.spacing_8),
},
".mr-button": {
"margin-right": px(size.spacing_8),
},
".ml-button": {
"margin-left": px(size.spacing_8),
},
".mt-negative-hpad-button": {
".mt-negative-8": {
"margin-top": px(-size.spacing_8),
},
".mt-negative-s": {
"margin-top": px(-size.spacing_8),
},
".mt-negative-m": {
"margin-top": px(-size.spacing_16),
},
".mt-negative-l": {
".mt-negative-24": {
"margin-top": px(-size.spacing_24),
},
".mr-negative-s": {
".mr-negative-8": {
"margin-right": px(-size.spacing_8),
},
".mr-negative-l": {
".mr-negative-24": {
"margin-right": px(-size.spacing_24),
},
".ml-negative-s": {
".ml-negative-8": {
"margin-left": px(-size.spacing_8),
},
// negative margin to handle the default padding of a button
".ml-negative-l": {
".ml-negative-24": {
"margin-left": px(-size.spacing_24),
},
".ml-negative-xs": {
"margin-left": px(-3),
},
".ml-negative-bubble": {
"margin-left": px(-7),
},
".mr-negative-m": {
"margin-right": px(-(size.spacing_8 + size.spacing_8)),
},
// negative margin to handle the padding of a nav button
".fixed-bottom-right": {
position: "fixed",
bottom: px(size.spacing_12),
right: px(size.spacing_24),
},
".mr-negative-xs": {
"margin-right": px(-3),
".mr-negative-4": {
"margin-right": px(-size.base_4),
},
// common setting
".text-ellipsis": {
@ -1858,15 +1836,12 @@ styles.registerStyle("main", () => {
width: "initial",
"margin-left": "auto",
},
".ml-between-s > :not(:first-child)": {
".ml-between-4 > :not(:first-child)": {
"margin-left": px(size.spacing_4),
},
".mt-between-s > :not(:first-child)": {
".mt-between-4 > :not(:first-child)": {
"margin-top": px(size.spacing_4),
},
".mt-between-m > :not(:first-child)": {
"margin-top": px(size.spacing_12),
},
// dropdown
".dropdown-panel": {
position: "absolute",

2
src/common/login/LoginView.ts
View file

@ -320,7 +320,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
}
_renderAppButtons(): Children {
return m(".flex-center.pt-l.ml-between-s", [
return m(".flex-center.pt-l.ml-between-4", [
client.isDesktopDevice() || client.device === DeviceType.ANDROID
? m(IconButton, {
title: "appInfoAndroidImageAlt_alt",

2
src/common/misc/ErrorReporter.ts
View file

@ -234,7 +234,7 @@ export async function showErrorDialogNotLoggedIn(e: ErrorInfo): Promise<void> {
},
[
m(
"div.mr-negative-xs",
"div.mr-negative-4",
m(ExpanderButton, {
expanded: expanded(),
onExpandedChange: expanded,

2
src/common/settings/IdentifierRow.ts
View file

@ -53,6 +53,6 @@ export class IdentifierRow implements Component<IdentifierRowAttrs> {
const identifierText = formatIdentifier
? neverNull(identifier.match(/.{2}/g)).map((el, i) => m("span.pr-s" + (i % 2 === 0 ? ".b" : ""), el))
: identifier
return m(".text-break.small.monospace.mt-negative-hpad-button.selectable", identifierText)
return m(".text-break.small.monospace.mt-negative-8.selectable", identifierText)
}
}

2
src/common/settings/UserListView.ts
View file

@ -107,7 +107,7 @@ export class UserListView implements UpdatableSettingsViewer {
placeholder: lang.get("searchUsers_placeholder"),
} satisfies BaseSearchBarAttrs),
m(
".mr-negative-s",
".mr-negative-8",
m(IconButton, {
title: "addUsers_action",
icon: Icons.Add,

2
src/common/settings/whitelabel/WhitelabelBrandingDomainSettings.ts
View file

@ -36,7 +36,7 @@ export class WhitelabelBrandingDomainSettings implements Component<WhitelabelBra
helpLabel: this.renderWhitelabelInfo(certificateInfo),
isReadOnly: true,
injectionsRight: () =>
m(".ml-between-s", [
m(".ml-between-4", [
whitelabelDomain ? this.renderDeactivateButton(whitelabelDomain) : null,
customerInfo ? this._renderEditButton(customerInfo, certificateInfo, isWhitelabelFeatureEnabled) : null,
]),

4
src/mail-app/mail/editor/MailEditor.ts
View file

@ -401,7 +401,7 @@ export class MailEditor implements Component<MailEditorAttrs> {
m.render(
quoteIndicator,
m(
".ml-button.fit-content",
".ml-8.fit-content",
{
style: {
borderRadius: "25%",
@ -502,7 +502,7 @@ export class MailEditor implements Component<MailEditorAttrs> {
value: model.getSubject(),
oninput: (val) => model.setSubject(val),
injectionsRight: () =>
m(".flex.end.ml-between-s.items-center", [
m(".flex.end.ml-between-4.items-center", [
isDarkTheme()
? m(IconButton, {
title: "viewInLightMode_action",

2
src/mail-app/mail/view/CollapsedMailView.ts
View file

@ -45,7 +45,7 @@ export class CollapsedMailView implements Component<CollapsedMailViewAttrs> {
viewModel.isUnread() ? this.renderUnreadDot() : null,
viewModel.isDraftMail() ? m(".mr-4", this.renderIcon(Icons.Edit, lang.get("draft_label"))) : null,
this.renderSender(viewModel),
m(".flex.ml-between-s.items-center", [
m(".flex.ml-between-4.items-center", [
mail.attachments.length > 0 ? this.renderIcon(Icons.Attachment, lang.get("attachment_label")) : null,
viewModel.isConfidential() ? this.renderIcon(getConfidentialIcon(mail), lang.get("confidential_label")) : null,
this.renderIcon(getFolderIconByType(folderInfo.folderType), folderInfo.name),

2
src/mail-app/mail/view/MailListView.ts
View file

@ -395,7 +395,7 @@ export class MailListView implements Component<MailListViewAttrs> {
? [
m(".flex.flex-column.plr-l", [
m(".small.flex-grow.pt", lang.get("storageDeletion_msg")),
m(".mr-negative-s.align-self-end", m(Button, purgeButtonAttrs)),
m(".mr-negative-8.align-self-end", m(Button, purgeButtonAttrs)),
]),
]
: null,

10
src/mail-app/mail/view/MailViewerHeader.ts
View file

@ -164,12 +164,12 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
m(".flex", [
this.getRecipientEmailAddress(attrs),
m(".flex-grow"),
m(".flex.items-center.white-space-pre.ml-8.ml-between-s", {
m(".flex.items-center.white-space-pre.ml-8.ml-between-4", {
// Orca refuses to read ut unless it's not focusable
tabindex: TabIndex.Default,
"aria-label": lang.get(viewModel.isConfidential() ? "confidential_action" : "nonConfidential_action") + ", " + dateTime,
}),
m(".flex.ml-between-s.items-center", [
m(".flex.ml-between-4.items-center", [
viewModel.isConfidential()
? m(Icon, {
icon: getConfidentialIcon(viewModel.mail),
@ -254,7 +254,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
],
),
m(
".flex-end.items-start.ml-between-s",
".flex-end.items-start.ml-between-4",
{
class: styles.isSingleColumnLayout() ? "" : "mt-4",
style: {
@ -425,7 +425,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
? [
m(".small.b", lang.get("to_label")),
m(
".flex.col.mt-between-s",
".flex.col.mt-between-4",
viewModel.getToRecipients().map((recipient) =>
m(
".flex",
@ -880,7 +880,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
if (relevantRecipient) {
const numberOfAllRecipients = viewModel.getNumberOfRecipients()
return m(
".flex.click.small.ml-between-s.items-center",
".flex.click.small.ml-between-4.items-center",
{
style: {
// use this to allow the container to shrink, otherwise it doesn't want to cut the recipient address

2
src/mail-app/mail/view/MailViewerToolbar.ts
View file

@ -34,7 +34,7 @@ export class MailViewerActions implements Component<MailViewerToolbarAttrs> {
view(vnode: Vnode<MailViewerToolbarAttrs>) {
const singleMailActions = this.renderSingleMailActions(vnode.attrs)
return m(".flex.ml-between-s.items-center", { "data-testid": "nav:action_bar" }, [
return m(".flex.ml-between-4.items-center", { "data-testid": "nav:action_bar" }, [
singleMailActions,
singleMailActions != null ? m(".nav-bar-spacer") : null,
this.renderActions(vnode.attrs),

4
src/mail-app/search/SearchBarOverlay.ts
View file

@ -93,7 +93,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
_renderProgress(state: SearchBarState): Children {
return m(".flex.col.rel", [
m(
".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-s",
".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-8",
{
style: {
height: px(52),
@ -146,7 +146,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
return m(".flex.rel", [
m(
".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-s",
".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-8",
{
style: {
height: px(52),

2
src/mail-app/search/view/SearchView.ts
View file

@ -480,7 +480,7 @@ export class SearchView extends BaseTopLevelView implements TopLevelView<SearchV
if (searchText == null) {
return null
}
return m("div.ml-button.mt-12.small.plr-button.content-fg.mb-16", m(Card, searchText))
return m("div.ml-8.mt-12.small.plr-button.content-fg.mb-16", m(Card, searchText))
}
oncreate(): void {

2
src/mail-app/settings/DummyTemplateListView.ts
View file

@ -31,7 +31,7 @@ export class DummyTemplateListView implements Component<DummyTemplateListViewAtt
placeholder: lang.get("searchTemplates_placeholder"),
} satisfies BaseSearchBarAttrs),
m(
".mr-negative-s",
".mr-negative-8",
m(IconButton, {
title: "addTemplate_label",
icon: Icons.Add,

2
src/mail-app/settings/KnowledgeBaseListView.ts
View file

@ -129,7 +129,7 @@ export class KnowledgeBaseListView implements UpdatableSettingsViewer {
} satisfies BaseSearchBarAttrs),
this.userCanEdit()
? m(
".mr-negative-s",
".mr-negative-8",
m(IconButton, {
title: "addEntry_label",
icon: Icons.Add,

2
src/mail-app/settings/MailSettingsViewer.ts
View file

@ -430,7 +430,7 @@ export class MailSettingsViewer implements UpdatableSettingsViewer {
m(TextField, {
label: "emptyString_msg",
// Negative upper margin to make up for no label
class: "mt-negative-s",
class: "mt-negative-8",
value: textFieldValue,
isReadOnly: true,
helpLabel: () => lang.get("localDataSection_msg"),

2
src/mail-app/settings/TemplateEditor.ts
View file

@ -102,7 +102,7 @@ class TemplateEditor implements Component<TemplateEditorAttrs> {
label: "language_label",
value: this.model.selectedContent() ? lang.getTranslationText(getLanguageName(this.model.selectedContent())) : "",
injectionsRight: () =>
m(".flex.ml-between-s", [
m(".flex.ml-between-4", [
this.model.getAddedLanguages().length > 1 ? [this.renderRemoveLangButton(), this.renderSelectLangButton()] : null,
this.renderAddLangButton(),
]),

2
src/mail-app/settings/TemplateListView.ts
View file

@ -128,7 +128,7 @@ export class TemplateListView implements UpdatableSettingsViewer {
} satisfies BaseSearchBarAttrs),
this.userCanEdit()
? m(
".mr-negative-s",
".mr-negative-8",
m(IconButton, {
title: "addTemplate_label",
icon: Icons.Add,

2
src/mail-app/settings/groups/GroupListView.ts
View file

@ -94,7 +94,7 @@ export class GroupListView implements UpdatableSettingsViewer {
placeholder: lang.get("searchMailboxes_placeholder"),
} satisfies BaseSearchBarAttrs),
m(
".mr-negative-s",
".mr-negative-8",
m(IconButton, {
title: "createSharedMailbox_label",
icon: Icons.Add,