gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-08 06:44:24 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

feat(mobile/note_icon): bigger touch area

Browse Source
This commit is contained in:
Elian Doran 2026-02-02 13:31:29 +02:00
parent 0382a4b30e
commit 90bb162a88
No known key found for this signature in database
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/widgets/note_icon.css
View File

@ -143,5 +143,9 @@ body.mobile .modal.icon-switcher {
margin: auto;
flex-grow: 1;
height: 100%;
span {
padding: 12px;
}
}
}

12
apps/client/src/widgets/note_icon.tsx
View File

@ -4,7 +4,7 @@ import { IconRegistry } from "@triliumnext/commons";
import { Dropdown as BootstrapDropdown } from "bootstrap";
import clsx from "clsx";
import { t } from "i18next";
import { CSSProperties, RefObject } from "preact";
import { CSSProperties } from "preact";
import { createPortal } from "preact/compat";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import type React from "react";
@ -21,6 +21,8 @@ import FormTextBox from "./react/FormTextBox";
import { useNoteContext, useNoteLabel, useStaticTooltip, useWindowSize } from "./react/hooks";
import Modal from "./react/Modal";
const ICON_SIZE = isMobile() ? 56 : 48;
interface IconToCountCache {
iconClassToCountMap: Record<string, number>;
}
@ -84,7 +86,7 @@ function MobileNoteIconSwitcher({ note, icon }: {
className="icon-switcher note-icon-widget"
scrollable
>
{note && <NoteIconList note={note} onHide={() => setModalShown(false)} columnCount={Math.floor(windowWidth / 48)} />}
{note && <NoteIconList note={note} onHide={() => setModalShown(false)} columnCount={Math.floor(windowWidth / ICON_SIZE)} />}
</Modal>
), document.body)}
</div>
@ -160,7 +162,7 @@ function NoteIconList({ note, onHide, columnCount }: {
class="icon-list"
ref={iconListRef}
style={{
width: (columnCount * 48 + 10),
width: (columnCount * ICON_SIZE + 10),
}}
onClick={(e) => {
// Make sure we are not clicking on something else than a button.
@ -178,9 +180,9 @@ function NoteIconList({ note, onHide, columnCount }: {
{filteredIcons.length ? (
<Grid
columnCount={columnCount}
columnWidth={48}
columnWidth={ICON_SIZE}
rowCount={Math.ceil(filteredIcons.length / columnCount)}
rowHeight={48}
rowHeight={ICON_SIZE}
cellComponent={IconItemCell}
cellProps={{
filteredIcons