diff --git a/apple/OmnivoreKit/Sources/Utils/File.swift b/apple/OmnivoreKit/Sources/Utils/File.swift new file mode 100644 index 000000000..5fe634890 --- /dev/null +++ b/apple/OmnivoreKit/Sources/Utils/File.swift @@ -0,0 +1,8 @@ +// +// File.swift +// +// +// Created by Jackson Harper on 7/31/23. +// + +import Foundation diff --git a/apple/OmnivoreKit/Sources/Utils/Theme.swift b/apple/OmnivoreKit/Sources/Utils/Theme.swift new file mode 100644 index 000000000..5fe634890 --- /dev/null +++ b/apple/OmnivoreKit/Sources/Utils/Theme.swift @@ -0,0 +1,8 @@ +// +// File.swift +// +// +// Created by Jackson Harper on 7/31/23. +// + +import Foundation diff --git a/packages/api/src/resolvers/article/index.ts b/packages/api/src/resolvers/article/index.ts index 388425518..11c6c86a4 100644 --- a/packages/api/src/resolvers/article/index.ts +++ b/packages/api/src/resolvers/article/index.ts @@ -545,7 +545,7 @@ export const getArticlesResolver = authorized< return { node: { ...a, - image: a.image && createImageProxyUrl(a.image, 260, 260), + image: a.image && createImageProxyUrl(a.image, 320, 320), isArchived: !!a.archivedAt, }, cursor: endCursor, @@ -953,7 +953,7 @@ export const searchResolver = authorized< return { node: { ...r, - image: r.image && createImageProxyUrl(r.image, 260, 260), + image: r.image && createImageProxyUrl(r.image, 320, 320), isArchived: !!r.archivedAt, contentReader: contentReaderForPage(r.pageType, r.uploadFileId), originalArticleUrl: r.url, @@ -1051,7 +1051,7 @@ export const updatesSinceResolver = authorized< return { node: { ...p, - image: p.image && createImageProxyUrl(p.image, 260, 260), + image: p.image && createImageProxyUrl(p.image, 320, 320), isArchived: !!p.archivedAt, contentReader: contentReaderForPage(p.pageType, p.uploadFileId), } as SearchItem, diff --git a/packages/api/src/resolvers/function_resolvers.ts b/packages/api/src/resolvers/function_resolvers.ts index 56035f7f9..173a86fa4 100644 --- a/packages/api/src/resolvers/function_resolvers.ts +++ b/packages/api/src/resolvers/function_resolvers.ts @@ -502,7 +502,7 @@ export const functionResolvers = { ) }, image(article: { image?: string }): string | undefined { - return article.image && createImageProxyUrl(article.image, 260, 260) + return article.image && createImageProxyUrl(article.image, 320, 320) }, wordsCount(article: { wordsCount?: number; content?: string }) { if (article.wordsCount) return article.wordsCount diff --git a/packages/web/components/elements/InfoLink.tsx b/packages/web/components/elements/InfoLink.tsx index 44c0a7bc2..2dfc2d6db 100644 --- a/packages/web/components/elements/InfoLink.tsx +++ b/packages/web/components/elements/InfoLink.tsx @@ -2,6 +2,7 @@ import { Info } from 'phosphor-react' import { VStack } from '../elements/LayoutPrimitives' import { theme } from '../tokens/stitches.config' import { TooltipWrapped } from './Tooltip' +import { EditInfoIcon } from './icons/EditInfoIcon' type InfoLinkProps = { href: string @@ -29,7 +30,7 @@ export function InfoLink(props: InfoLinkProps): JSX.Element { style={TooltipStyle} arrowStyles={{ fill: '#F9D354' }} > - + diff --git a/packages/web/components/elements/icons/ArchiveIcon.tsx b/packages/web/components/elements/icons/ArchiveIcon.tsx new file mode 100644 index 000000000..b9978d9f4 --- /dev/null +++ b/packages/web/components/elements/icons/ArchiveIcon.tsx @@ -0,0 +1,54 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class ArchiveIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/CircleUtilityMenuIcon.tsx b/packages/web/components/elements/icons/CircleUtilityMenuIcon.tsx new file mode 100644 index 000000000..3221f305b --- /dev/null +++ b/packages/web/components/elements/icons/CircleUtilityMenuIcon.tsx @@ -0,0 +1,38 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class CircleUtilityMenuIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/EditInfoIcon.tsx b/packages/web/components/elements/icons/EditInfoIcon.tsx new file mode 100644 index 000000000..e9218be2a --- /dev/null +++ b/packages/web/components/elements/icons/EditInfoIcon.tsx @@ -0,0 +1,54 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class EditInfoIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/GridViewIcon.tsx b/packages/web/components/elements/icons/GridViewIcon.tsx new file mode 100644 index 000000000..73e7e5169 --- /dev/null +++ b/packages/web/components/elements/icons/GridViewIcon.tsx @@ -0,0 +1,56 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class GridViewIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/IconProps.tsx b/packages/web/components/elements/icons/IconProps.tsx new file mode 100644 index 000000000..4172afe28 --- /dev/null +++ b/packages/web/components/elements/icons/IconProps.tsx @@ -0,0 +1,4 @@ +export type IconProps = { + color?: string + size?: number +} diff --git a/packages/web/components/elements/icons/LabelIcon.tsx b/packages/web/components/elements/icons/LabelIcon.tsx new file mode 100644 index 000000000..7db4c913f --- /dev/null +++ b/packages/web/components/elements/icons/LabelIcon.tsx @@ -0,0 +1,48 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class LabelIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/ListViewIcon.tsx b/packages/web/components/elements/icons/ListViewIcon.tsx new file mode 100644 index 000000000..b97ec5546 --- /dev/null +++ b/packages/web/components/elements/icons/ListViewIcon.tsx @@ -0,0 +1,75 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class ListViewIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/NotebookIcon.tsx b/packages/web/components/elements/icons/NotebookIcon.tsx new file mode 100644 index 000000000..120c13f1a --- /dev/null +++ b/packages/web/components/elements/icons/NotebookIcon.tsx @@ -0,0 +1,54 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class NotebookIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/ReaderSettingsIcon.tsx b/packages/web/components/elements/icons/ReaderSettingsIcon.tsx new file mode 100644 index 000000000..721bcc12a --- /dev/null +++ b/packages/web/components/elements/icons/ReaderSettingsIcon.tsx @@ -0,0 +1,75 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class ReaderSettingsIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/TrashIcon.tsx b/packages/web/components/elements/icons/TrashIcon.tsx new file mode 100644 index 000000000..c286995a6 --- /dev/null +++ b/packages/web/components/elements/icons/TrashIcon.tsx @@ -0,0 +1,68 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class TrashIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/UnarchiveIcon.tsx b/packages/web/components/elements/icons/UnarchiveIcon.tsx new file mode 100644 index 000000000..361d734f5 --- /dev/null +++ b/packages/web/components/elements/icons/UnarchiveIcon.tsx @@ -0,0 +1,61 @@ +import { IconProps } from './IconProps' + +import React from 'react' + +export class UnarchiveIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/images/TrashIcon.tsx b/packages/web/components/elements/images/TrashIcon.tsx deleted file mode 100644 index 72281dac9..000000000 --- a/packages/web/components/elements/images/TrashIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -type TrashIconProps = { - size: number - strokeColor: string -} - -export function TrashIcon(props: TrashIconProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx index ba6fe5983..0888b82cd 100644 --- a/packages/web/components/patterns/HighlightBar.tsx +++ b/packages/web/components/patterns/HighlightBar.tsx @@ -7,6 +7,8 @@ import { Button } from '../elements/Button' import { HStack, Box } from '../elements/LayoutPrimitives' import { PenWithColorIcon } from '../elements/images/PenWithColorIcon' import { Note, Tag, Trash, Copy } from 'phosphor-react' +import { TrashIcon } from '../elements/icons/TrashIcon' +import { LabelIcon } from '../elements/icons/LabelIcon' type PageCoordinates = { pageX: number @@ -134,7 +136,10 @@ function BarContent(props: HighlightBarProps): JSX.Element { text="Delete" title="Remove Highlight" iconElement={ - + } onClick={() => props.handleButtonClick('delete')} /> @@ -143,7 +148,7 @@ function BarContent(props: HighlightBarProps): JSX.Element { text="Labels" title="Set Labels" iconElement={ - + } onClick={() => props.handleButtonClick('setHighlightLabels')} /> diff --git a/packages/web/components/patterns/HighlightHoverActions.tsx b/packages/web/components/patterns/HighlightHoverActions.tsx index 4d3c9ae5e..0599bd4c2 100644 --- a/packages/web/components/patterns/HighlightHoverActions.tsx +++ b/packages/web/components/patterns/HighlightHoverActions.tsx @@ -18,6 +18,8 @@ import { import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery' import { Highlight } from '../../lib/networking/fragments/highlightFragment' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' +import { TrashIcon } from '../elements/icons/TrashIcon' +import { LabelIcon } from '../elements/icons/LabelIcon' type HighlightHoverActionsProps = { viewer: UserBasicData @@ -50,7 +52,7 @@ export const HighlightHoverActions = (props: HighlightHoverActionsProps) => { gap: '5px', px: '5px', - visibility: props.isHovered || menuOpen ? 'unset' : 'hidden', + visibility: props.isHovered || menuOpen ? 'visible' : 'hidden', '&:hover': { boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);', @@ -88,7 +90,7 @@ export const HighlightHoverActions = (props: HighlightHoverActionsProps) => { event.preventDefault() }} > - + ) diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx index 3bd6a497b..361f6c131 100644 --- a/packages/web/components/patterns/HighlightView.tsx +++ b/packages/web/components/patterns/HighlightView.tsx @@ -73,7 +73,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element { const hover = useHover(context) const { getReferenceProps, getFloatingProps } = useInteractions([hover]) - const highlightAlpha = isDark ? 1.0 : 0.35 return ( diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 06600b315..e4cb6e32a 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -160,8 +160,6 @@ const Fallback = (props: FallbackProps): JSX.Element => { const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1 const color = Colors[idx] - console.log('idx: ', idx, 'color', color, Colors.length) - return ( { const [menuOpen, setMenuOpen] = useState(false) + console.log(' props.isHovered || menuOpen', props.isHovered, menuOpen) + return ( { gap: '5px', px: '5px', - visibility: props.isHovered || menuOpen ? 'unset' : 'hidden', + visibility: props.isHovered || menuOpen ? 'visible' : 'hidden', '&:hover': { boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);', @@ -58,8 +65,14 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => { props.handleAction('open-notebook') event.preventDefault() }} + css={{ + visibility: props.isHovered || menuOpen ? 'visible' : 'hidden', + }} > - + - diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index 71fd01d78..e289e2fec 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -7,6 +7,12 @@ import { TooltipWrapped } from '../../elements/Tooltip' import { styled, theme } from '../../tokens/stitches.config' import { ReaderSettings } from '../../../lib/hooks/useReaderSettings' import { useRef } from 'react' +import { ArchiveIcon } from '../../elements/icons/ArchiveIcon' +import { NotebookIcon } from '../../elements/icons/NotebookIcon' +import { TrashIcon } from '../../elements/icons/TrashIcon' +import { LabelIcon } from '../../elements/icons/LabelIcon' +import { EditInfoIcon } from '../../elements/icons/EditInfoIcon' +import { UnarchiveIcon } from '../../elements/icons/UnarchiveIcon' export type ArticleActionsMenuLayout = 'top' | 'side' @@ -69,7 +75,7 @@ export function ArticleActionsMenu( tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - @@ -87,7 +93,10 @@ export function ArticleActionsMenu( }, }} > - + )} @@ -103,7 +112,7 @@ export function ArticleActionsMenu( }, }} > - + @@ -163,7 +175,10 @@ export function ArticleActionsMenu( tooltipContent="Remove (#)" tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - + @@ -180,7 +195,7 @@ export function ArticleActionsMenu( tooltipContent="Archive (e)" tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - @@ -195,7 +210,10 @@ export function ArticleActionsMenu( tooltipContent="Unarchive (u)" tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - + )} diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index 2506bef24..671b342ee 100644 --- a/packages/web/components/templates/article/Notebook.tsx +++ b/packages/web/components/templates/article/Notebook.tsx @@ -14,7 +14,7 @@ import { nanoid } from 'nanoid' import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation' import { HighlightViewItem } from './HighlightViewItem' import { ConfirmationModal } from '../../patterns/ConfirmationModal' -import { TrashIcon } from '../../elements/images/TrashIcon' +import { TrashIcon } from '../../elements/icons/TrashIcon' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery' import { SetHighlightLabelsModalPresenter } from './SetLabelsModalPresenter' @@ -60,8 +60,9 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { const [noteText, setNoteText] = useState('') const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] = useState(undefined) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const noteState = useRef({ isCreating: false, note: undefined, @@ -347,7 +348,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { icon={ } /> diff --git a/packages/web/components/templates/article/VerticalArticleActions.tsx b/packages/web/components/templates/article/VerticalArticleActions.tsx index 7025b9b83..079564f81 100644 --- a/packages/web/components/templates/article/VerticalArticleActions.tsx +++ b/packages/web/components/templates/article/VerticalArticleActions.tsx @@ -1,19 +1,18 @@ -import { - ArchiveBox, - DotsThreeOutline, - Info, - TextAa, - Trash, - Tray, - Notebook, - Tag, -} from 'phosphor-react' +import { Tray } from 'phosphor-react' import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery' import { Button } from '../../elements/Button' import { HStack } from '../../elements/LayoutPrimitives' import { TooltipWrapped } from '../../elements/Tooltip' import { theme } from '../../tokens/stitches.config' import { ReaderDropdownMenu } from '../../patterns/ReaderDropdownMenu' +import { ArchiveIcon } from '../../elements/icons/ArchiveIcon' +import { NotebookIcon } from '../../elements/icons/NotebookIcon' +import { TrashIcon } from '../../elements/icons/TrashIcon' +import { LabelIcon } from '../../elements/icons/LabelIcon' +import { EditInfoIcon } from '../../elements/icons/EditInfoIcon' +import { ReaderSettingsIcon } from '../../elements/icons/ReaderSettingsIcon' +import { CircleUtilityMenuIcon } from '../../elements/icons/CircleUtilityMenuIcon' +import { UnarchiveIcon } from '../../elements/icons/UnarchiveIcon' export type ArticleActionsMenuLayout = 'top' | 'side' @@ -48,7 +47,7 @@ export function VerticalArticleActionsMenu( }, }} > - + @@ -109,7 +111,10 @@ export function VerticalArticleActionsMenu( tooltipContent="Remove (#)" tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - + @@ -129,7 +134,7 @@ export function VerticalArticleActionsMenu( tooltipContent="Archive (e)" tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - @@ -151,7 +156,10 @@ export function VerticalArticleActionsMenu( tooltipContent="Unarchive (e)" tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - + )} @@ -167,13 +175,16 @@ export function VerticalArticleActionsMenu( tooltipContent="Edit Info (i)" tooltipSide={props.layout == 'side' ? 'right' : 'bottom'} > - + diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx index 8bfd84d34..a77d468cf 100644 --- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx +++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx @@ -6,15 +6,10 @@ import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShor import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts' import { Button, IconButton } from '../../elements/Button' import { - ArchiveBox, CaretDown, FunnelSimple, - ListBullets, MagnifyingGlass, Prohibit, - SquaresFour, - Tag, - TrashSimple, X, } from 'phosphor-react' import { LayoutType } from './HomeFeedContainer' @@ -28,6 +23,11 @@ import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation import { ConfirmationModal } from '../../patterns/ConfirmationModal' import { AddBulkLabelsModal } from '../article/AddBulkLabelsModal' import { Label } from '../../../lib/networking/fragments/labelFragment' +import { ArchiveIcon } from '../../elements/icons/ArchiveIcon' +import { TrashIcon } from '../../elements/icons/TrashIcon' +import { LabelIcon } from '../../elements/icons/LabelIcon' +import { ListViewIcon } from '../../elements/icons/ListViewIcon' +import { GridViewIcon } from '../../elements/icons/GridViewIcon' export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search' @@ -392,9 +392,8 @@ function MultiSelectControlButtonBox( e.preventDefault() }} > - Archive @@ -406,11 +405,7 @@ function MultiSelectControlButtonBox( e.preventDefault() }} > - + Add Labels - + -