diff --git a/app/assets/icons/ic-authenticator.svg b/app/assets/icons/ic-authenticator.svg index e8dd720cf..9a1193919 100644 --- a/app/assets/icons/ic-authenticator.svg +++ b/app/assets/icons/ic-authenticator.svg @@ -1,4 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/app/assets/icons/ic-code.svg b/app/assets/icons/ic-code.svg index 79df4be8d..4a871e270 100644 --- a/app/assets/icons/ic-code.svg +++ b/app/assets/icons/ic-code.svg @@ -1,4 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/app/assets/icons/ic-lock-filled.svg b/app/assets/icons/ic-lock-filled.svg deleted file mode 100644 index a71db2794..000000000 --- a/app/assets/icons/ic-lock-filled.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/icons/ic-markdown.svg b/app/assets/icons/ic-markdown.svg index 1efac5876..bceed54b3 100644 --- a/app/assets/icons/ic-markdown.svg +++ b/app/assets/icons/ic-markdown.svg @@ -1,4 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/app/assets/icons/ic-pin-filled.svg b/app/assets/icons/ic-pin-filled.svg deleted file mode 100644 index 4e5ae92a5..000000000 --- a/app/assets/icons/ic-pin-filled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/icons/ic-spreadsheets.svg b/app/assets/icons/ic-spreadsheets.svg index 2566d69bb..70f175be2 100644 --- a/app/assets/icons/ic-spreadsheets.svg +++ b/app/assets/icons/ic-spreadsheets.svg @@ -1,4 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/app/assets/icons/ic-tasks.svg b/app/assets/icons/ic-tasks.svg index c6b89554f..0f8ef0587 100644 --- a/app/assets/icons/ic-tasks.svg +++ b/app/assets/icons/ic-tasks.svg @@ -1,4 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/app/assets/icons/ic-text-paragraph.svg b/app/assets/icons/ic-text-paragraph.svg index 376e8ad46..4f43cdc0c 100644 --- a/app/assets/icons/ic-text-paragraph.svg +++ b/app/assets/icons/ic-text-paragraph.svg @@ -1,3 +1,4 @@ - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/app/assets/icons/ic-text-rich.svg b/app/assets/icons/ic-text-rich.svg index d895ca8c4..87f57dd41 100644 --- a/app/assets/icons/ic-text-rich.svg +++ b/app/assets/icons/ic-text-rich.svg @@ -1,4 +1,3 @@ - - \ No newline at end of file + + diff --git a/app/assets/icons/ic-trash-filled.svg b/app/assets/icons/ic-trash-filled.svg deleted file mode 100644 index 63f9575bf..000000000 --- a/app/assets/icons/ic-trash-filled.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx index 5ec2e2932..e06994bae 100644 --- a/app/assets/javascripts/components/Dropdown.tsx +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -13,7 +13,6 @@ import { useState } from 'preact/hooks'; export type DropdownItem = { icon?: IconType; - iconClassName?: string; label: string; value: string; }; @@ -26,7 +25,10 @@ type DropdownProps = { onChange: (value: string) => void; }; -type ListboxButtonProps = DropdownItem & { +type ListboxButtonProps = { + icon?: IconType; + value: string | null; + label: string; isExpanded: boolean; }; @@ -34,13 +36,12 @@ const CustomDropdownButton: FunctionComponent = ({ label, isExpanded, icon, - iconClassName = '', }) => ( <>
{icon ? (
- +
) : null}
{label}
@@ -84,13 +85,11 @@ export const Dropdown: FunctionComponent = ({ children={({ value, label, isExpanded }) => { const current = items.find((item) => item.value === value); const icon = current ? current?.icon : null; - const iconClassName = current ? current?.iconClassName : null; return CustomDropdownButton({ - value: value ? value : label.toLowerCase(), + value, label, isExpanded, ...(icon ? { icon } : null), - ...(iconClassName ? { iconClassName } : null), }); }} /> @@ -105,10 +104,7 @@ export const Dropdown: FunctionComponent = ({ > {item.icon ? (
- +
) : null}
{item.label}
diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx index bb82794cf..96eee992f 100644 --- a/app/assets/javascripts/components/Icon.tsx +++ b/app/assets/javascripts/components/Icon.tsx @@ -3,9 +3,7 @@ import PencilOffIcon from '../../icons/ic-pencil-off.svg'; import PlainTextIcon from '../../icons/ic-text-paragraph.svg'; import RichTextIcon from '../../icons/ic-text-rich.svg'; import TrashIcon from '../../icons/ic-trash.svg'; -import TrashFilledIcon from '../../icons/ic-trash-filled.svg'; import PinIcon from '../../icons/ic-pin.svg'; -import PinFilledIcon from '../../icons/ic-pin-filled.svg'; import UnpinIcon from '../../icons/ic-pin-off.svg'; import ArchiveIcon from '../../icons/ic-archive.svg'; import UnarchiveIcon from '../../icons/ic-unarchive.svg'; @@ -54,7 +52,6 @@ import ServerIcon from '../../icons/ic-server.svg'; import EyeIcon from '../../icons/ic-eye.svg'; import EyeOffIcon from '../../icons/ic-eye-off.svg'; import LockIcon from '../../icons/ic-lock.svg'; -import LockFilledIcon from '../../icons/ic-lock-filled.svg'; import ArrowsSortUpIcon from '../../icons/ic-arrows-sort-up.svg'; import ArrowsSortDownIcon from '../../icons/ic-arrows-sort-down.svg'; import WindowIcon from '../../icons/ic-window.svg'; @@ -72,7 +69,6 @@ const ICONS = { 'arrows-sort-up': ArrowsSortUpIcon, 'arrows-sort-down': ArrowsSortDownIcon, lock: LockIcon, - 'lock-filled': LockFilledIcon, eye: EyeIcon, 'eye-off': EyeOffIcon, server: ServerIcon, @@ -93,9 +89,7 @@ const ICONS = { spreadsheets: SpreadsheetsIcon, tasks: TasksIcon, trash: TrashIcon, - 'trash-filled': TrashFilledIcon, pin: PinIcon, - 'pin-filled': PinFilledIcon, unpin: UnpinIcon, archive: ArchiveIcon, unarchive: UnarchiveIcon, @@ -136,22 +130,11 @@ export type IconType = keyof typeof ICONS; type Props = { type: IconType; className?: string; - ariaLabel?: string; }; -export const Icon: FunctionalComponent = ({ - type, - className = '', - ariaLabel, -}) => { +export const Icon: FunctionalComponent = ({ type, className = '' }) => { const IconComponent = ICONS[type]; - return ( - - ); + return ; }; export const IconDirective = toDirective(Icon, { diff --git a/app/assets/javascripts/components/NotesList.tsx b/app/assets/javascripts/components/NotesList.tsx index 4b505bb58..e443393aa 100644 --- a/app/assets/javascripts/components/NotesList.tsx +++ b/app/assets/javascripts/components/NotesList.tsx @@ -1,4 +1,3 @@ -import { WebApplication } from '@/ui_models/application'; import { KeyboardKey } from '@/services/ioService'; import { AppState } from '@/ui_models/app_state'; import { DisplayOptions } from '@/ui_models/app_state/notes_view_state'; @@ -8,7 +7,6 @@ import { FunctionComponent } from 'preact'; import { NotesListItem } from './NotesListItem'; type Props = { - application: WebApplication; appState: AppState; notes: SNNote[]; selectedNotes: Record; @@ -20,30 +18,23 @@ const FOCUSABLE_BUT_NOT_TABBABLE = -1; const NOTES_LIST_SCROLL_THRESHOLD = 200; export const NotesList: FunctionComponent = observer( - ({ - application, - appState, - notes, - selectedNotes, - displayOptions, - paginate, - }) => { + ({ appState, notes, selectedNotes, displayOptions, paginate }) => { const { selectPreviousNote, selectNextNote } = appState.notesView; const { hideTags, hideDate, hideNotePreview, sortBy } = displayOptions; - const tagsForNote = (note: SNNote): string[] => { + const tagsStringForNote = (note: SNNote): string => { if (hideTags) { - return []; + return ''; } const selectedTag = appState.selectedTag; if (!selectedTag) { - return []; + return ''; } const tags = appState.getNoteTags(note); if (!selectedTag.isSmartTag && tags.length === 1) { - return []; + return ''; } - return tags.map((tag) => tag.title); + return tags.map((tag) => `#${tag.title}`).join(' '); }; const openNoteContextMenu = (posX: number, posY: number) => { @@ -55,9 +46,11 @@ export const NotesList: FunctionComponent = observer( appState.notes.setContextMenuOpen(true); }; - const onContextMenu = (note: SNNote, posX: number, posY: number) => { - appState.notes.selectNote(note.uuid, true); - openNoteContextMenu(posX, posY); + const onContextMenu = async (note: SNNote, posX: number, posY: number) => { + await appState.notes.selectNote(note.uuid, true); + if (selectedNotes[note.uuid]) { + openNoteContextMenu(posX, posY); + } }; const onScroll = (e: Event) => { @@ -91,10 +84,9 @@ export const NotesList: FunctionComponent = observer( > {notes.map((note) => ( { const flags = [] as NoteFlag[]; + if (note.pinned) { + flags.push({ + text: 'Pinned', + class: 'info', + }); + } + if (note.archived) { + flags.push({ + text: 'Archived', + class: 'warning', + }); + } + if (note.locked) { + flags.push({ + text: 'Editing Disabled', + class: 'neutral', + }); + } + if (note.trashed) { + flags.push({ + text: 'Deleted', + class: 'danger', + }); + } if (note.conflictOf) { flags.push({ text: 'Conflicted Copy', @@ -57,7 +77,6 @@ const flagsForNote = (note: SNNote) => { }; export const NotesListItem: FunctionComponent = ({ - application, hideDate, hidePreview, hideTags, @@ -70,9 +89,6 @@ export const NotesListItem: FunctionComponent = ({ }) => { const flags = flagsForNote(note); const showModifiedDate = sortedBy === CollectionSort.UpdatedAt; - const editorForNote = application.componentManager.editorForNote(note); - const editorName = editorForNote?.name ?? 'Plain editor'; - const [icon, tint] = getIconAndTintForEditor(editorForNote?.identifier); return (
= ({ onClick={onClick} onContextMenu={onContextMenu} > -
- -
-
-
-
{note.title}
-
- {note.locked && ( - - - - )} - {note.trashed && ( - - - - )} - {note.archived && ( - - - - )} - {note.pinned && ( - - - - )} -
+ {flags && flags.length > 0 ? ( +
+ {flags.map((flag) => ( +
+
{flag.text}
+
+ ))}
- {!hidePreview && !note.hidePreview && !note.protected && ( -
- {note.preview_html && ( -
- )} - {!note.preview_html && note.preview_plain && ( -
{note.preview_plain}
- )} - {!note.preview_html && !note.preview_plain && note.text && ( -
{note.text}
- )} -
- )} - {!hideDate || note.protected ? ( -
- {note.protected && Protected {hideDate ? '' : ' • '}} - {!hideDate && showModifiedDate && ( - Modified {note.updatedAtString || 'Now'} - )} - {!hideDate && !showModifiedDate && ( - {note.createdAtString || 'Now'} - )} -
- ) : null} - {!hideTags && tags.length ? ( -
- {tags.map((tag) => ( - - - {tag} - - ))} -
- ) : null} - {flags.length ? ( -
- {flags.map((flag) => ( -
-
{flag.text}
-
- ))} -
- ) : null} -
+ ) : null} +
{note.title}
+ {!hidePreview && !note.hidePreview && !note.protected ? ( +
+ {note.preview_html ? ( +
+ ) : null} + {!note.preview_html && note.preview_plain ? ( +
{note.preview_plain}
+ ) : null} + {!note.preview_html && !note.preview_plain ? ( +
{note.text}
+ ) : null} +
+ ) : null} + {!hideDate || note.protected ? ( +
+ {note.protected ? ( + Protected {hideDate ? '' : ' • '} + ) : null} + {!hideDate && showModifiedDate ? ( + Modified {note.updatedAtString || 'Now'} + ) : null} + {!hideDate && !showModifiedDate ? ( + {note.createdAtString || 'Now'} + ) : null} +
+ ) : null} + {!hideTags && ( +
+
{tags}
+
+ )}
); }; diff --git a/app/assets/javascripts/components/NotesView.tsx b/app/assets/javascripts/components/NotesView.tsx index 6c1b8e0df..004a54e1d 100644 --- a/app/assets/javascripts/components/NotesView.tsx +++ b/app/assets/javascripts/components/NotesView.tsx @@ -230,7 +230,6 @@ const NotesView: FunctionComponent = observer( { +const getEditorIconType = (identifier: string): IconType | null => { switch (identifier) { case FeatureIdentifier.BoldEditor: case FeatureIdentifier.PlusEditor: - return ['rich-text', 1]; + return 'rich-text'; case FeatureIdentifier.MarkdownBasicEditor: case FeatureIdentifier.MarkdownMathEditor: case FeatureIdentifier.MarkdownMinimistEditor: case FeatureIdentifier.MarkdownProEditor: - return ['markdown', 2]; + return 'markdown'; case FeatureIdentifier.TokenVaultEditor: - return ['authenticator', 6]; + return 'authenticator'; case FeatureIdentifier.SheetsEditor: - return ['spreadsheets', 5]; + return 'spreadsheets'; case FeatureIdentifier.TaskEditor: - return ['tasks', 3]; + return 'tasks'; case FeatureIdentifier.CodeEditor: - return ['code', 4]; - default: - return ['plain-text', 1]; + return 'code'; } + return null; }; const makeEditorDefault = ( @@ -92,19 +91,17 @@ export const Defaults: FunctionComponent = ({ application }) => { .componentsForArea(ComponentArea.Editor) .map((editor): EditorOption => { const identifier = editor.package_info.identifier; - const [iconType, tint] = getIconAndTintForEditor(identifier); + const iconType = getEditorIconType(identifier); return { label: editor.name, value: identifier, ...(iconType ? { icon: iconType } : null), - ...(tint ? { iconClassName: `color-accessory-tint-${tint}` } : null), }; }) .concat([ { icon: 'plain-text', - iconClassName: `color-accessory-tint-1`, label: 'Plain Editor', value: 'plain-editor', }, diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss index cf4a3a365..6ec937804 100644 --- a/app/assets/stylesheets/_notes.scss +++ b/app/assets/stylesheets/_notes.scss @@ -123,95 +123,42 @@ notes-view { } .note { - display: flex; - align-items: stretch; - width: 100%; + padding: 15px; + border-bottom: 1px solid var(--sn-stylekit-border-color); cursor: pointer; - &:hover { - background-color: var(--sn-stylekit-grey-5); + > .name { + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; } - .icon { - display: flex; - flex-flow: column; - align-items: center; - justify-content: space-between; - padding: 0.9rem; - padding-right: 0.75rem; - margin-right: 0; - } - - .meta { - flex-grow: 1; - min-width: 0; - padding: 0.9rem; - padding-left: 0; - border-bottom: 1px solid var(--sn-stylekit-border-color); - - .name { - display: flex; - align-items: center; - justify-content: space-between; - font-weight: 600; - font-size: 1rem; - line-height: 1.3; - overflow: hidden; - text-overflow: ellipsis; - } - - .flag-icons { - &, - & > * { - display: flex; - align-items: center; - } - - & > * + * { - margin-left: 0.375rem; - } - } - - .bottom-info { - font-size: 12px; - line-height: 1.4; - margin-top: 0.25rem; - } + > .bottom-info { + font-size: 12px; + margin-top: 4px; } .tags-string { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: 0.345rem; - font-size: 0.725rem; - - .tag { - display: inline-flex; - align-items: center; - padding: 0.25rem 0.375rem 0.25rem 0.325rem; - background-color: var(--sn-stylekit-grey-4-opacity-variant); - border-radius: 0.125rem; - } + margin-top: 4px; + font-size: 12px; } .note-preview { font-size: var(--sn-stylekit-font-size-h3); + margin-top: 2px; + overflow: hidden; text-overflow: ellipsis; - & > * { - margin-top: 0.15rem; - } - .default-preview, .plain-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* number of lines to show */ - line-height: 1.3; - overflow: hidden; + $line-height: 18px; + line-height: $line-height; /* fallback */ + max-height: calc(#{$line-height} * 1); /* fallback */ } .html-preview { @@ -228,7 +175,8 @@ notes-view { display: flex; flex-direction: row; align-items: center; - margin-top: 0.125rem; + margin-bottom: 8px; + margin-top: -4px; .flag { padding: 4px; @@ -290,8 +238,13 @@ notes-view { } &.selected { - background-color: var(--sn-stylekit-grey-5); - border-left: 2px solid var(--sn-stylekit-info-color); + background-color: var(--sn-stylekit-info-color); + color: var(--sn-stylekit-info-contrast-color); + + .note-flags .flag { + background-color: var(--sn-stylekit-info-contrast-color); + color: var(--sn-stylekit-info-color); + } progress { background-color: var(--sn-stylekit-secondary-foreground-color); @@ -302,7 +255,7 @@ notes-view { } &::-webkit-progress-value { - background-color: var(--sn-stylekit-info-color); + background-color: var(--sn-stylekit-secondary-background-color); } &::-moz-progress-bar { diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index 48198c039..5ba5161c0 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -40,11 +40,6 @@ @extend .h-3\.5; @extend .w-3\.5; } - - &.sn-icon--mid { - @extend .w-4; - @extend .h-4; - } } .sn-dropdown { @@ -782,7 +777,6 @@ } &:hover { - background-color: var(--sn-stylekit-contrast-background-color) !important; @extend .color-info; @extend .border-info; } diff --git a/package.json b/package.json index fef47586f..087a79eed 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "pug-loader": "^2.4.0", "sass-loader": "^12.2.0", "serve-static": "^1.14.1", - "sn-stylekit": "5.2.21", + "sn-stylekit": "5.2.20", "svg-jest": "^1.0.1", "ts-jest": "^27.0.7", "ts-loader": "^9.2.6", diff --git a/yarn.lock b/yarn.lock index 3a4040c30..08588f4fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9264,10 +9264,10 @@ slice-ansi@^5.0.0: ansi-styles "^6.0.0" is-fullwidth-code-point "^4.0.0" -sn-stylekit@5.2.21: - version "5.2.21" - resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.21.tgz#5aec6c329949bda64a1e3c563ee594b141295d27" - integrity sha512-rjlgo42A/kx+M4iY7HYRpnQyp4dLb2HQpEMHz+CYumOzTf/lsRy0Up5HI1haNK4/JMmpq36Eb/7BMDmvLpdXnQ== +sn-stylekit@5.2.20: + version "5.2.20" + resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.20.tgz#c18f40ff3aaf4c59af89152439a8efbdde35f2dd" + integrity sha512-JymHBiZOzQPfCqHYgnVPSA2PwJqiKR268qqQoEMqI85MMAWSG3WYzuKEbd0LgfIQAKLElCxJjeZkrhejyRg+2A== dependencies: "@reach/listbox" "^0.15.0" "@reach/menu-button" "^0.15.1"