From fb29cfa9521b08b775a84b975e44fdd6d4716f01 Mon Sep 17 00:00:00 2001 From: Kieran Date: Wed, 23 Aug 2023 13:19:48 +0100 Subject: [PATCH] Note creator V2 styles --- packages/app/public/icons.svg | 16 +- packages/app/src/Element/AsyncIcon.tsx | 37 ++++ packages/app/src/Element/Modal.css | 13 +- packages/app/src/Element/Note.tsx | 27 ++- packages/app/src/Element/NoteCreator.css | 126 +++++-------- packages/app/src/Element/NoteCreator.tsx | 203 +++++++++------------ packages/app/src/Element/NoteFooter.tsx | 31 +--- packages/app/src/Element/ProfileImage.tsx | 48 +++-- packages/app/src/Element/Reactions.css | 2 +- packages/app/src/Element/SendSats.css | 4 +- packages/app/src/Element/Textarea.css | 2 +- packages/app/src/Element/Thread.css | 6 +- packages/app/src/Pages/new/NewUserFlow.tsx | 6 + packages/app/src/SnortUtils/index.ts | 16 +- packages/app/src/index.css | 19 +- packages/system/src/note-collection.ts | 5 +- 16 files changed, 285 insertions(+), 276 deletions(-) create mode 100644 packages/app/src/Element/AsyncIcon.tsx diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg index 15f2acaa..15371630 100644 --- a/packages/app/public/icons.svg +++ b/packages/app/public/icons.svg @@ -169,15 +169,6 @@ - - - - - - - - - @@ -298,6 +289,13 @@ + + + + + + + \ No newline at end of file diff --git a/packages/app/src/Element/AsyncIcon.tsx b/packages/app/src/Element/AsyncIcon.tsx new file mode 100644 index 00000000..08d9a922 --- /dev/null +++ b/packages/app/src/Element/AsyncIcon.tsx @@ -0,0 +1,37 @@ +import Icon from "Icons/Icon"; +import Spinner from "Icons/Spinner"; +import { HTMLProps, useState } from "react"; + +export interface AsyncIconProps extends HTMLProps { + iconName: string; + iconSize?: number; + loading?: boolean; + onClick?: (e: React.MouseEvent) => Promise; +} + +export function AsyncIcon(props: AsyncIconProps) { + const [loading, setLoading] = useState(props.loading ?? false); + + async function handleClick(e: React.MouseEvent) { + setLoading(true); + try { + if (props.onClick) { + await props.onClick(e); + } + } catch (ex) { + console.error(ex); + } + setLoading(false); + } + + const mergedProps = { ...props } as Record; + delete mergedProps["iconName"]; + delete mergedProps["iconSize"]; + delete mergedProps["loading"]; + return ( +
handleClick(e)}> + {loading ? : } + {props.children} +
+ ); +} diff --git a/packages/app/src/Element/Modal.css b/packages/app/src/Element/Modal.css index c26c5d9f..0b52ee1f 100644 --- a/packages/app/src/Element/Modal.css +++ b/packages/app/src/Element/Modal.css @@ -12,11 +12,16 @@ } .modal-body { - background-color: var(--note-bg); - padding: 10px; - border-radius: 10px; + background-color: var(--gray-superdark); + padding: 16px 24px; + border-radius: 12px; + display: flex; + flex-direction: column; width: 500px; - border: 1px solid var(--font-tertiary-color); margin-top: auto; margin-bottom: auto; } + +.modal-body button:hover { + background-color: var(--gray); +} diff --git a/packages/app/src/Element/Note.tsx b/packages/app/src/Element/Note.tsx index 8f98679d..ce23c38b 100644 --- a/packages/app/src/Element/Note.tsx +++ b/packages/app/src/Element/Note.tsx @@ -48,11 +48,13 @@ export interface NoteProps { depth?: number; options?: { showHeader?: boolean; + showContextMenu?: boolean; showTime?: boolean; showPinned?: boolean; showBookmarked?: boolean; showFooter?: boolean; showReactionsLink?: boolean; + showMedia?: boolean; canUnpin?: boolean; canUnbookmark?: boolean; canClick?: boolean; @@ -151,6 +153,7 @@ export default function Note(props: NoteProps) { showFooter: true, canUnpin: false, canUnbookmark: false, + showContextMenu: true, ...opt, }; @@ -209,7 +212,15 @@ export default function Note(props: NoteProps) { ); } - return ; + return ( + + ); }; function goToEvent( @@ -355,12 +366,14 @@ export default function Note(props: NoteProps) { )} - {}} - onTranslated={t => setTranslated(t)} - setShowReactions={setShowReactions} - /> + {options.showContextMenu && ( + {}} + onTranslated={t => setTranslated(t)} + setShowReactions={setShowReactions} + /> + )} )} diff --git a/packages/app/src/Element/NoteCreator.css b/packages/app/src/Element/NoteCreator.css index 7f7d1072..17719ca7 100644 --- a/packages/app/src/Element/NoteCreator.css +++ b/packages/app/src/Element/NoteCreator.css @@ -1,22 +1,43 @@ .note-creator { - margin-bottom: 10px; - background-color: var(--note-bg); - border: none; - border-radius: 10px; - padding: 6px; - position: relative; + border: 1px solid transparent; + border-radius: 12px; + box-shadow: 0px 0px 6px 1px rgba(182, 108, 156, 0.3); + background: linear-gradient(var(--gray-superdark), var(--gray-superdark)) padding-box, + linear-gradient(90deg, #ef9644, #fd7c49, #ff5e58, #ff3b70, #ff088e, #eb00b1, #c31ed5, #7b41f6) border-box; } -.note-reply { - margin: 10px; +.note-creator-modal .modal-body { + gap: 16px; +} + +.note-creator-modal .note.card { + padding: 8px 12px; + border-radius: 12px; + background-color: var(--gray-dark); +} + +.note-creator-modal h4 { + font-size: 11px; + font-weight: 600; + letter-spacing: 1.21px; + text-transform: uppercase; + color: var(--gray-light); + margin: 0; +} + +.note-creator-relay { + background-color: var(--gray-dark); + border-radius: 12px; } .note-creator textarea { border: none; outline: none; resize: none; - background-color: var(--note-bg); - border-radius: 10px 10px 0 0; + padding: 0; + border-radius: 0; + margin: 8px 12px; + background-color: var(--gray-superdark); min-height: 100px; width: stretch; width: -webkit-fill-available; @@ -30,67 +51,9 @@ line-height: 24px; } -@media (min-width: 520px) { - .note-creator textarea { - min-height: 210px; - } -} - -@media (min-width: 720px) { - .note-creator textarea { - min-height: 321px; - } -} - .note-creator.poll textarea { min-height: 120px; } -.note-creator-actions { - width: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - margin-bottom: 5px; -} - -.note-creator .insert { - display: flex; - justify-content: flex-end; - width: stretch; - width: -webkit-fill-available; - width: -moz-available; -} - -.note-creator .insert > button { - width: 48px; - height: 36px; - background: var(--gray-dark); - color: white; - border-radius: 17px; - margin-right: 5px; - display: flex; - justify-content: center; - align-items: center; -} - -.note-creator .attachment:hover { - background: var(--font-color); - color: var(--gray-dark); -} - -.light .note-creator .attachment { - background: var(--gray-light); -} - -.light .note-creator .attachment:hover { - background: var(--gray-dark); - color: white; -} - -.note-creator-actions button:not(:last-child) { - margin-right: 4px; -} .note-creator .error { position: absolute; @@ -101,6 +64,19 @@ font-size: 16px; } +.note-creator-icon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; +} + +.note-creator-icon.pfp .avatar { + width: 32px; + height: 32px; +} + .note-create-button { width: 48px; height: 48px; @@ -120,17 +96,3 @@ right: 16px; } } - -.note-creator-modal .modal-body { - background: var(--modal-bg-color); -} - -.note-preview { - word-break: break-all; -} - -.note-preview-body { - text-overflow: ellipsis; - padding: 4px 4px 0 56px; - font-size: 14px; -} diff --git a/packages/app/src/Element/NoteCreator.tsx b/packages/app/src/Element/NoteCreator.tsx index 5b379253..d9a5ab85 100644 --- a/packages/app/src/Element/NoteCreator.tsx +++ b/packages/app/src/Element/NoteCreator.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import "./NoteCreator.css"; import { FormattedMessage, useIntl } from "react-intl"; import { useDispatch, useSelector } from "react-redux"; @@ -37,22 +38,7 @@ import { getCurrentSubscription } from "Subscription"; import useLogin from "Hooks/useLogin"; import { System } from "index"; import AsyncButton from "Element/AsyncButton"; - -interface NotePreviewProps { - note: TaggedNostrEvent; -} - -function NotePreview({ note }: NotePreviewProps) { - return ( -
- -
- {note.content.slice(0, 136)} - {note.content.length > 140 && "..."} -
-
- ); -} +import { AsyncIcon } from "Element/AsyncIcon"; export function NoteCreator() { const { formatMessage } = useIntl(); @@ -72,7 +58,6 @@ export function NoteCreator() { selectedCustomRelays, error, } = useSelector((s: RootState) => s.noteCreator); - const [uploadInProgress, setUploadInProgress] = useState(false); const dispatch = useDispatch(); const sub = getCurrentSubscription(LoginStore.allSubscriptions()); const login = useLogin(); @@ -138,7 +123,6 @@ export function NoteCreator() { } async function uploadFile(file: File | Blob) { - setUploadInProgress(true); try { if (file) { const rx = await uploader.upload(file, file.name); @@ -156,8 +140,6 @@ export function NoteCreator() { if (error instanceof Error) { dispatch(setError(error?.message)); } - } finally { - setUploadInProgress(false); } } @@ -198,8 +180,10 @@ export function NoteCreator() { data={preview as TaggedNostrEvent} related={[]} options={{ + showContextMenu: false, showFooter: false, canClick: false, + showTime: false, }} /> ); @@ -254,14 +238,12 @@ export function NoteCreator() { function renderRelayCustomisation() { return ( -
+
{Object.keys(relays.item || {}) .filter(el => relays.item[el].write) .map((r, i, a) => ( -
-
-
{r}
-
+
+
{r}
{show && ( dispatch(setShow(false))}> - {replyTo && } + {replyTo && ( + + )} {preview && getPreviewNote()} {!preview && ( -
-
-