Skip to content

Commit 8184129

Browse files
YohYamasakiYohYamasaki
committed
chore!: Update size tokens and classes
- Update the size tokens to use multiple of 4px - Update the spacing related classes' suffix to use the px sizes (i.e. mt-s -> mt-4, pb-l -> pb-32)
1 parent ff856f8 commit 8184129

File tree

330 files changed

+1979
-1966
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

330 files changed

+1979
-1966
lines changed

‎src/calendar-app/calendar/gui/CalendarGuiUtils.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import { DateTime, Duration } from "luxon"
6868
import { CalendarEventTimes, CalendarViewType, cleanMailAddress, isAllDayEvent } from "../../../common/api/common/utils/CommonCalendarUtils.js"
6969
import { AdvancedRepeatRule, CalendarEvent } from "../../../common/api/entities/tutanota/TypeRefs.js"
7070
import { ProgrammingError } from "../../../common/api/common/error/ProgrammingError.js"
71-
import { size } from "../../../common/gui/size.js"
71+
import { layout_size, size } from "../../../common/gui/size.js"
7272
import { hslToHex, MAX_HUE_ANGLE } from "../../../common/gui/base/Color.js"
7373
import { GroupColors } from "../view/CalendarView.js"
7474
import { CalendarInfo } from "../model/CalendarModel.js"
@@ -694,7 +694,7 @@ export const createCustomRepeatRuleUnitValues = (): SelectorItemList<AlarmInterv
694694
},
695695
]
696696
}
697-
export const CALENDAR_EVENT_HEIGHT: number = size.calendar_line_height + 2
697+
export const CALENDAR_EVENT_HEIGHT: number = layout_size.calendar_line_height + 2
698698
export const TEMPORARY_EVENT_OPACITY = 0.7
699699

700700
export const enum EventLayoutMode {
@@ -845,8 +845,8 @@ function visuallyOverlaps(firstEventStart: Date, firstEventEnd: Date, secondEven
845845
const firstEventStartOnSameDay = isSameDay(firstEventStart, firstEventEnd) ? firstEventStart.getTime() : getStartOfDay(firstEventEnd).getTime()
846846
const eventDurationMs = firstEventEnd.getTime() - firstEventStartOnSameDay
847847
const eventDurationHours = eventDurationMs / (1000 * 60 * 60)
848-
const height = eventDurationHours * size.calendar_hour_height - size.calendar_event_border
849-
return firstEventEnd.getTime() === secondEventStart.getTime() && height < size.calendar_line_height
848+
const height = eventDurationHours * layout_size.calendar_hour_height - layout_size.calendar_event_border
849+
return firstEventEnd.getTime() === secondEventStart.getTime() && height < layout_size.calendar_line_height
850850
}
851851

852852
export function expandEvent(ev: CalendarEvent, columnIndex: number, columns: Array<Array<CalendarEvent>>): number {
@@ -1068,7 +1068,7 @@ export function generateRandomColor(): ColorString {
10681068

10691069
export function renderCalendarColor(selectedCalendar: CalendarInfo | null, groupColors: Map<Id, string>) {
10701070
const color = selectedCalendar ? (groupColors.get(selectedCalendar.groupInfo.group) ?? defaultCalendarColor) : null
1071-
return m(".mt-xs", {
1071+
return m(".mt-4", {
10721072
style: {
10731073
width: "100px",
10741074
height: "10px",

‎src/calendar-app/calendar/gui/CalendarRow.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export class CalendarRow implements VirtualRow<CalendarEvent> {
6666
},
6767
} satisfies SelectableRowContainerAttrs,
6868
m(
69-
".flex.items-center.gap-vpad.click.border-radius",
69+
".flex.items-center.gap-16.click.border-radius",
7070
{
7171
class: (styles.isDesktopLayout() ? "" : "state-bg") + "limit-width full-width",
7272
style: {

‎src/calendar-app/calendar/gui/CalendarSidebarRow.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export type CalendarSidebarRowAttrs = Omit<CalendarInfoBase, "type"> & {
2222
export class CalendarSidebarRow implements Component<CalendarSidebarRowAttrs> {
2323
view(vnode: Vnode<CalendarSidebarRowAttrs>) {
2424
const { id, name, color, isHidden, toggleHiddenCalendar, rightIcon, actions } = vnode.attrs
25-
return m(".folder-row.flex-start.plr-button", [
25+
return m(".folder-row.flex-start.plr-8", [
2626
m(".flex.flex-grow.center-vertically.button-height", [
2727
m(".calendar-checkbox", {
2828
role: "checkbox",
@@ -42,11 +42,11 @@ export class CalendarSidebarRow implements Component<CalendarSidebarRowAttrs> {
4242
background: isHidden ? "" : `#${color}`,
4343
transition: "all 0.3s",
4444
cursor: "pointer",
45-
marginLeft: px(size.hpad_button),
45+
marginLeft: px(size.spacing_4),
4646
},
4747
}),
4848
m(
49-
".pl-m.b.flex-grow.text-ellipsis",
49+
".pl-12.b.flex-grow.text-ellipsis",
5050
{
5151
style: {
5252
width: 0,
@@ -59,8 +59,8 @@ export class CalendarSidebarRow implements Component<CalendarSidebarRowAttrs> {
5959
? m(Icon, {
6060
title: rightIcon.title,
6161
icon: rightIcon.icon,
62-
size: IconSize.Medium,
63-
class: "pr-s",
62+
size: IconSize.PX24,
63+
class: "pr-4",
6464
style: {
6565
fill: theme.on_surface_variant,
6666
},

‎src/calendar-app/calendar/gui/EditCalendarDialog.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function sourceUrlInputField(urlStream: Stream<string>, errorMessageStream: Stre
5050
if (urlStream().trim() === "") helperMessage = "E.g: https://tuta.com/ics/example.ics - webcals://example.com/calendar.ics"
5151
else if (isNotNull(errorMessage) && errorMessage !== DEFAULT_ERROR) helperMessage = errorMessage
5252
return m(TextField, {
53-
class: `pt pb ${helperMessage.length ? "" : "mb-small-line-height"}`,
53+
class: `pt-16 pb-16 ${helperMessage.length ? "" : "mb-small-line-height"}`,
5454
value: urlStream(),
5555
oninput: (url: string, inputElement: HTMLInputElement) => {
5656
const assertionResult = checkURLString(url)
@@ -78,7 +78,7 @@ function createEditCalendarComponent(
7878
const currentColor = colorStream() ? `#${colorStream()}` : ""
7979
return m.fragment({}, [
8080
m(GroupSettingNameInputFields, { groupNameData: nameData }),
81-
m(".small.mt.mb-xs", lang.get("color_label")),
81+
m(".small.mt-16.mb-4", lang.get("color_label")),
8282
m(ColorPickerView, {
8383
value: currentColor,
8484
onselect: (color: string) => {
@@ -164,7 +164,7 @@ export function showCreateEditCalendarDialog({
164164
child: {
165165
view: () =>
166166
m(".flex.col", [
167-
m(".mt.mb.h6.b", lang.get(titleTextId)),
167+
m(".mt-16.mb-16.h6.b", lang.get(titleTextId)),
168168
warningMessage ? warningMessage() : null,
169169
sourceUrlInputField(urlStream, errorMessageStream),
170170
m(LoginButton, {
@@ -180,7 +180,7 @@ export function showCreateEditCalendarDialog({
180180
})
181181
.catch((e) => Dialog.message(lang.makeTranslation("error_message", e.message)))
182182
},
183-
class: errorMessageStream().trim() !== "" ? "mt-s no-hover disabled-button" : "mt-s",
183+
class: errorMessageStream().trim() !== "" ? "mt-8 no-hover disabled-button" : "mt-8",
184184
disabled: errorMessageStream().trim() !== "",
185185
}),
186186
]),
@@ -233,7 +233,7 @@ export function showEditBirthdayCalendarDialog(editBirthdayCalendarAttrs: EditBi
233233
value: lang.get("birthdayCalendar_label"),
234234
isReadOnly: true,
235235
}),
236-
m(".small.mt.mb-xs", lang.get("color_label")),
236+
m(".small.mt-16.mb-4", lang.get("color_label")),
237237
m(ColorPickerView, {
238238
value: colorStream(),
239239
onselect: (color: string) => {

‎src/calendar-app/calendar/gui/RemindersEditor.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
9393
textFieldAttrs[0].label = vnode.attrs.label
9494

9595
return m(
96-
".flex.col.flex-half.pl-s",
96+
".flex.col.flex-half.pl-4",
9797
textFieldAttrs.map((a) => m(TextField, a)),
9898
)
9999
}
@@ -125,9 +125,9 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
125125
ariaValue: lang.get("addReminder_label"),
126126
}
127127

128-
return m("ul.unstyled-list.flex.col.flex-grow.gap-vpad-s", [
128+
return m("ul.unstyled-list.flex.col.flex-grow.gap-8", [
129129
alarms.map((alarm) =>
130-
m("li.flex.justify-between.flew-grow.items-center.gap-vpad-s", [
130+
m("li.flex.justify-between.flew-grow.items-center.gap-8", [
131131
m("span.flex.justify-between", humanDescriptionForAlarmInterval(alarm, lang.languageTag)),
132132
m(
133133
BaseButton,
@@ -142,7 +142,7 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
142142
},
143143
m(Icon, {
144144
icon: Icons.Cancel,
145-
size: IconSize.Medium,
145+
size: IconSize.PX24,
146146
style: {
147147
fill: getColors(ButtonColor.Content).button,
148148
},
@@ -185,7 +185,7 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
185185
"button.items-center.flex-grow",
186186
{
187187
tabIndex: isDisplay ? TabIndex.Programmatic : undefined,
188-
class: isDisplay ? `flex ${hasAlarms ? "text-fade" : ""}` : "state-bg button-content button-min-height dropdown-button pt-s pb-s",
188+
class: isDisplay ? `flex ${hasAlarms ? "text-fade" : ""}` : "state-bg button-content button-min-height dropdown-button pt-8 pb-8",
189189
},
190190
option.text,
191191
)
@@ -201,7 +201,7 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
201201
child: {
202202
view: () => {
203203
const unitItems = createCustomRepeatRuleUnitValues() ?? []
204-
return m(".flex full-width pt-s", [
204+
return m(".flex full-width pt-8", [
205205
m(TextField, {
206206
type: TextFieldType.Number,
207207
min: 0,
@@ -218,7 +218,7 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
218218
label: "emptyString_msg",
219219
selectedValue: timeReminderUnit,
220220
items: unitItems,
221-
class: "flex-half pl-s",
221+
class: "flex-half pl-4",
222222
selectionChangedHandler: (selectedValue: AlarmIntervalUnit) => (timeReminderUnit = selectedValue as AlarmIntervalUnit),
223223
disabled: false,
224224
}),

‎src/calendar-app/calendar/gui/day-selector/DaySelector.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export class DaySelector implements Component<DaySelectorAttrs> {
200200
color: theme.on_secondary_container,
201201
height: px(styles.isDesktopLayout() ? 19 : 25),
202202
borderRadius: px(styles.isDesktopLayout() ? 6 : 25),
203-
width: `calc(100% - ${px(size.hpad_small)})`,
203+
width: `calc(100% - ${px(size.spacing_4)})`,
204204
}
205205
} else {
206206
style = {}

‎src/calendar-app/calendar/gui/day-selector/DaySelectorPopup.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class DaySelectorPopup implements ModalComponent {
4242

4343
view(): Children {
4444
return m(
45-
".abs.elevated-bg.plr.pt-s.pb-m.border-radius.dropdown-shadow.flex.flex-column",
45+
".abs.elevated-bg.plr-12.pt-8.pb-12.border-radius.dropdown-shadow.flex.flex-column",
4646
{
4747
style: {
4848
opacity: "0",
@@ -88,7 +88,7 @@ export class DaySelectorPopup implements ModalComponent {
8888
}
8989

9090
private renderPickerHeader(date: Date): Children {
91-
return m(".flex.flex-space-between.pb-s.items-center", [
91+
return m(".flex.flex-space-between.pb-8.items-center", [
9292
m(
9393
".b",
9494
{

‎src/calendar-app/calendar/gui/day-selector/DaySelectorSidebar.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ export class DaySelectorSidebar implements Component<DaySelectorSidebarAttrs> {
3333
const disableHighlight = !isSameDay(vnode.attrs.selectedDate, this.currentDate)
3434

3535
return m(
36-
isDesktop() ? ".plr-m.mt-form" : ".plr-m.mt-s",
37-
m(".elevated-bg.pt-s.pb-m.border-radius.flex.flex-column", [
36+
isDesktop() ? ".plr-12.mt-24" : ".plr-12.mt-8",
37+
m(".elevated-bg.pt-8.pb-12.border-radius.flex.flex-column", [
3838
this.renderPickerHeader(this.currentDate),
3939
m(".flex-grow.overflow-hidden", [
4040
m(DaySelector, {
@@ -59,10 +59,10 @@ export class DaySelectorSidebar implements Component<DaySelectorSidebarAttrs> {
5959
}
6060

6161
private renderPickerHeader(date: Date): Children {
62-
return m(".flex.flex-space-between.pb.items-center.mlr-xs", [
62+
return m(".flex.flex-space-between.pb-16.items-center.mlr-4", [
6363
renderSwitchMonthArrowIcon(false, 24, () => this.onMonthChange(false)),
6464
m(
65-
".b.mlr-s",
65+
".b.mlr-4",
6666
{
6767
style: {
6868
fontSize: "14px",

‎src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { RecipientsSearchModel } from "../../../../common/misc/RecipientsSearchM
99
import { Guest } from "../../view/CalendarInvites.js"
1010
import { theme } from "../../../../common/gui/theme.js"
1111
import { IconButton } from "../../../../common/gui/base/IconButton.js"
12-
import { px, size } from "../../../../common/gui/size.js"
12+
import { component_size, px, size } from "../../../../common/gui/size.js"
1313
import { CalendarEventWhoModel } from "../eventeditor-model/CalendarEventWhoModel.js"
1414
import { LoginController } from "../../../../common/api/main/LoginController.js"
1515
import { CalendarEventModel, CalendarOperation } from "../eventeditor-model/CalendarEventModel.js"
@@ -49,9 +49,9 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
4949
const { whoModel } = attrs.model.editModels
5050
const organizer = whoModel.organizer
5151
return [
52-
m(".flex-grow.flex.flex-column.gap-vpad.pb.pt.fit-height", { style: { width: px(attrs.width) } }, [
52+
m(".flex-grow.flex.flex-column.gap-16.pb-16.pt-16.fit-height", { style: { width: px(attrs.width) } }, [
5353
this.renderOrganizer(attrs.model, organizer),
54-
m(".flex.flex-column.gap-vpad-s", [
54+
m(".flex.flex-column.gap-8", [
5555
m("small.uppercase.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("guests_label")),
5656
whoModel.canModifyGuests ? this.renderGuestsInput(whoModel, attrs.logins, attrs.recipientsSearch) : null,
5757
this.renderSendUpdateCheckbox(attrs.model.editModels.whoModel),
@@ -84,17 +84,15 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
8484
guestItems.push(() => this.renderGuest(ownGuest, attrs))
8585
}
8686

87-
const verticalPadding = guestItems.length > 0 ? size.vpad_small : 0
87+
const verticalPadding = guestItems.length > 0 ? size.spacing_8 : 0
8888

8989
return guestItems.length === 0
9090
? m(
9191
Card,
9292
{
93-
classes: ["min-h-s flex flex-column gap-vpad-s"],
93+
classes: ["min-h-s flex flex-column gap-8"],
9494
style: {
95-
padding: `${px(verticalPadding)} ${px(guestItems.length === 0 ? size.vpad_small : 0)} ${px(size.vpad_small)} ${px(
96-
verticalPadding,
97-
)}`,
95+
padding: `${px(verticalPadding)} ${px(guestItems.length === 0 ? size.spacing_8 : 0)} ${px(size.spacing_8)} ${px(verticalPadding)}`,
9896
},
9997
},
10098
m(".flex.items-center.justify-center.min-h-s", [
@@ -112,7 +110,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
112110
const guests = whoModel.guests
113111
const hasExternalGuests = guests.some((a) => a.type === RecipientType.EXTERNAL)
114112

115-
return m(".flex.items-center.flex-grow.gap-vpad-s", [
113+
return m(".flex.items-center.flex-grow.gap-8", [
116114
m(Card, { style: { padding: "0" }, classes: ["flex-grow"] }, [
117115
m(".flex.flex-grow.rel.button-height", [
118116
m(GuestPicker, {
@@ -165,7 +163,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
165163
const attendingOptions = createAttendingItems().filter((option) => option.selectable !== false)
166164
const attendingStatus = attendingOptions.find((option) => option.value === status)
167165

168-
return m(".flex.flex-column.pl-vpad-s.pr-vpad-s", [
166+
return m(".flex.flex-column.pl-8.pr-8", [
169167
m(Select<AttendingItem, CalendarAttendeeStatus>, {
170168
onchange: (option) => {
171169
if (option.selectable === false) return
@@ -177,7 +175,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
177175
ariaLabel: lang.get("attending_label"),
178176
renderOption: (option) =>
179177
m(
180-
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-s.pb-s.button-min-height",
178+
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-8.pb-8.button-min-height",
181179
{
182180
class: option.selectable === false ? `no-hover` : "",
183181
style: { color: option.value === status ? theme.primary : undefined },
@@ -218,10 +216,10 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
218216
const selected = options.find((option) => option.address === address) ?? options[0]
219217

220218
return m(".flex.col", [
221-
m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("organizer_label")),
219+
m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("organizer_label")),
222220
m(Card, { style: { padding: `0` } }, [
223221
m(".flex.flex-column", [
224-
m(".flex.pl-vpad-s.pr-vpad-s", [
222+
m(".flex.pl-8.pr-8", [
225223
m(Select<OrganizerSelectItem, string>, {
226224
classes: ["flex-grow", "button-min-height"],
227225
onchange: (option) => {
@@ -235,7 +233,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
235233
ariaLabel: lang.get("organizer_label"),
236234
renderOption: (option) =>
237235
m(
238-
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-s.pb-s.button-min-height",
236+
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-8.pb-8.button-min-height",
239237
{ style: { color: selected.address === option.address ? theme.primary : undefined } },
240238
option.address,
241239
),
@@ -307,7 +305,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
307305
let rightContent: Children = null
308306

309307
if (isMe) {
310-
rightContent = m("", { style: { paddingRight: px(size.vpad_small) } }, this.renderAttendeeStatus(model.editModels.whoModel, guest))
308+
rightContent = m("", { style: { paddingRight: px(size.spacing_8) } }, this.renderAttendeeStatus(model.editModels.whoModel, guest))
311309
} else if (whoModel.canModifyGuests) {
312310
rightContent = m(IconButton, {
313311
title: "remove_action",
@@ -320,13 +318,13 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
320318
Card,
321319
{
322320
style: {
323-
padding: `${px(size.vpad_small)} ${px(0)} ${px(size.vpad_small)} ${px(size.vpad_small)}`,
321+
padding: `${px(size.spacing_8)} ${px(0)} ${px(size.spacing_8)} ${px(size.spacing_8)}`,
324322
},
325323
},
326324
m(".flex.flex-column.items-center", [
327325
m(".flex.items-center.flex-grow.full-width", [
328326
m(".flex.flex-column.flex-grow.min-width-0", [
329-
m(".small", { style: { lineHeight: px(size.vpad_small) } }, guestStatusAndRole),
327+
m(".small", { style: { lineHeight: px(size.spacing_8) } }, guestStatusAndRole),
330328
m(".text-ellipsis", name.length > 0 ? `${name} ${address}` : address),
331329
]),
332330
rightContent,
@@ -337,7 +335,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
337335
".flex.full-width",
338336
{
339337
style: {
340-
padding: `0 0 ${px(size.vpad_xsm)} ${px(size.vpad_small + size.icon_size_medium_large)}`,
338+
padding: `0 0 ${px(size.spacing_4)} ${px(size.spacing_8 + 20)}`,
341339
},
342340
},
343341
m(Divider, {
@@ -361,8 +359,8 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
361359
".flex.flex-column.full-width",
362360
{
363361
style: {
364-
paddingLeft: px(size.hpad_medium + size.vpad_small),
365-
paddingRight: px((size.button_height - size.button_height_compact) / 2),
362+
paddingLeft: px(size.spacing_24 + size.spacing_8),
363+
paddingRight: px((component_size.button_height - component_size.button_height_compact) / 2),
366364
},
367365
},
368366
[

0 commit comments

Comments
 (0)