forked from Kieran/snort
note creator style, rm hashtags
This commit is contained in:
parent
18beed13c3
commit
8216cb8741
@ -1,12 +1,3 @@
|
|||||||
.note-creator {
|
|
||||||
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-creator-modal .modal-body > div {
|
.note-creator-modal .modal-body > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -86,17 +77,6 @@
|
|||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light .note-creator textarea {
|
|
||||||
background-color: var(--gray-superdark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.light .note-creator {
|
|
||||||
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-creator-modal .rti--container {
|
.note-creator-modal .rti--container {
|
||||||
background-color: unset !important;
|
background-color: unset !important;
|
||||||
box-shadow: unset !important;
|
box-shadow: unset !important;
|
||||||
|
@ -5,12 +5,10 @@ import { EventBuilder, EventKind, NostrLink, NostrPrefix, TaggedNostrEvent, tryP
|
|||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { ClipboardEventHandler, DragEvent, useEffect } from "react";
|
import { ClipboardEventHandler, DragEvent, useEffect } from "react";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
import { TagsInput } from "react-tag-input-component";
|
|
||||||
|
|
||||||
import AsyncButton from "@/Components/Button/AsyncButton";
|
import AsyncButton from "@/Components/Button/AsyncButton";
|
||||||
import { AsyncIcon } from "@/Components/Button/AsyncIcon";
|
import { AsyncIcon } from "@/Components/Button/AsyncIcon";
|
||||||
import CloseButton from "@/Components/Button/CloseButton";
|
import CloseButton from "@/Components/Button/CloseButton";
|
||||||
import { TrendingHashTagsLine } from "@/Components/Event/Create/TrendingHashTagsLine";
|
|
||||||
import { sendEventToRelays } from "@/Components/Event/Create/util";
|
import { sendEventToRelays } from "@/Components/Event/Create/util";
|
||||||
import Note from "@/Components/Event/EventComponent";
|
import Note from "@/Components/Event/EventComponent";
|
||||||
import Icon from "@/Components/Icons/Icon";
|
import Icon from "@/Components/Icons/Icon";
|
||||||
@ -22,7 +20,7 @@ import ProfileImage from "@/Components/User/ProfileImage";
|
|||||||
import useEventPublisher from "@/Hooks/useEventPublisher";
|
import useEventPublisher from "@/Hooks/useEventPublisher";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import { useNoteCreator } from "@/State/NoteCreator";
|
import { useNoteCreator } from "@/State/NoteCreator";
|
||||||
import { appendDedupe, openFile, trackEvent } from "@/Utils";
|
import { openFile, trackEvent } from "@/Utils";
|
||||||
import useFileUpload from "@/Utils/Upload";
|
import useFileUpload from "@/Utils/Upload";
|
||||||
import { GetPowWorker } from "@/Utils/wasm";
|
import { GetPowWorker } from "@/Utils/wasm";
|
||||||
import { ZapTarget } from "@/Utils/Zapper";
|
import { ZapTarget } from "@/Utils/Zapper";
|
||||||
@ -636,7 +634,6 @@ export function NoteCreator() {
|
|||||||
onDragLeave={handleDragLeave}
|
onDragLeave={handleDragLeave}
|
||||||
onDrop={handleDrop}
|
onDrop={handleDrop}
|
||||||
autoFocus
|
autoFocus
|
||||||
className={classNames("textarea", { "textarea--focused": note.active })}
|
|
||||||
onChange={c => onChange(c)}
|
onChange={c => onChange(c)}
|
||||||
value={note.note}
|
value={note.note}
|
||||||
onFocus={() => note.update(v => (v.active = true))}
|
onFocus={() => note.update(v => (v.active = true))}
|
||||||
@ -648,23 +645,6 @@ export function NoteCreator() {
|
|||||||
/>
|
/>
|
||||||
{renderPollOptions()}
|
{renderPollOptions()}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col g4">
|
|
||||||
<TagsInput
|
|
||||||
value={note.hashTags}
|
|
||||||
onChange={e => note.update(s => (s.hashTags = e))}
|
|
||||||
placeHolder={formatMessage({
|
|
||||||
defaultMessage: "Add up to 4 hashtags",
|
|
||||||
id: "AIgmDy",
|
|
||||||
})}
|
|
||||||
separators={["Enter", ","]}
|
|
||||||
/>
|
|
||||||
{note.hashTags.length > 4 && (
|
|
||||||
<small className="warning">
|
|
||||||
<FormattedMessage defaultMessage="Try to use less than 5 hashtags to stay on topic 🙏" id="d8gpCh" />
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
<TrendingHashTagsLine onClick={t => note.update(s => (s.hashTags = appendDedupe(s.hashTags, [t])))} />
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{uploader.progress.length > 0 && <FileUploadProgress progress={uploader.progress} />}
|
{uploader.progress.length > 0 && <FileUploadProgress progress={uploader.progress} />}
|
||||||
|
@ -1,37 +0,0 @@
|
|||||||
import { FormattedMessage } from "react-intl";
|
|
||||||
|
|
||||||
import { ErrorOrOffline } from "@/Components/ErrorOrOffline";
|
|
||||||
import NostrBandApi from "@/External/NostrBand";
|
|
||||||
import useCachedFetch from "@/Hooks/useCachedFetch";
|
|
||||||
import { useLocale } from "@/IntlProvider";
|
|
||||||
|
|
||||||
export function TrendingHashTagsLine(props: { onClick: (tag: string) => void }) {
|
|
||||||
const { lang } = useLocale();
|
|
||||||
const api = new NostrBandApi();
|
|
||||||
const trendingHashtagsUrl = api.trendingHashtagsUrl(lang);
|
|
||||||
const storageKey = `nostr-band-${trendingHashtagsUrl}`;
|
|
||||||
|
|
||||||
const { data: hashtags, isLoading, error } = useCachedFetch(trendingHashtagsUrl, storageKey, data => data.hashtags);
|
|
||||||
|
|
||||||
if (error && !hashtags) return <ErrorOrOffline error={error} className="p" />;
|
|
||||||
|
|
||||||
if (isLoading || hashtags.length === 0) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col g4">
|
|
||||||
<small>
|
|
||||||
<FormattedMessage defaultMessage="Popular Hashtags" id="ddd3JX" />
|
|
||||||
</small>
|
|
||||||
<div className="flex g4 flex-wrap">
|
|
||||||
{hashtags.slice(0, 5).map(a => (
|
|
||||||
<span
|
|
||||||
key={a.hashtag}
|
|
||||||
className="px-2 py-1 bg-dark rounded-full pointer nowrap"
|
|
||||||
onClick={() => props.onClick(a.hashtag)}>
|
|
||||||
#{a.hashtag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user