tweak styles
This commit is contained in:
parent
23388c11b4
commit
4f5d07ecd9
@ -16,6 +16,11 @@
|
||||
min-width: -webkit-fill-available;
|
||||
min-width: -moz-available;
|
||||
min-width: fill-available;
|
||||
transition: min-height .5s;
|
||||
}
|
||||
|
||||
.note-creator .textarea--focused {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.note-creator .actions {
|
||||
|
@ -29,6 +29,7 @@ export function NoteCreator(props) {
|
||||
if (typeof onSend === "function") {
|
||||
onSend();
|
||||
}
|
||||
setActive(false)
|
||||
}
|
||||
|
||||
async function attachFile() {
|
||||
@ -50,16 +51,21 @@ export function NoteCreator(props) {
|
||||
return (
|
||||
<>
|
||||
{replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
|
||||
<div className="flex note-creator" onClick={() => setActive(true)}>
|
||||
<div className="flex note-creator">
|
||||
<div className="flex f-col mr10 f-grow">
|
||||
<Textarea className="textarea" users={users} onChange={(ev) => setNote(ev.target.value)} />
|
||||
{active ? <div className="actions flex f-row">
|
||||
<Textarea
|
||||
className={`textarea ${active ? "textarea--focused" : ""}`}
|
||||
users={users}
|
||||
onChange={(ev) => setNote(ev.target.value)}
|
||||
onFocus={() => setActive(true)}
|
||||
/>
|
||||
<div className="actions flex f-row">
|
||||
<div className="attachment flex f-row">
|
||||
{error.length > 0 ? <b className="error">{error}</b> : null}
|
||||
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
|
||||
</div>
|
||||
<div className="btn" onClick={() => sendNote()}>Send</div>
|
||||
</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
@ -1,79 +1,30 @@
|
||||
.rta {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-width: -webkit-fill-available;
|
||||
min-width: -moz-available;
|
||||
min-width: fill-available;
|
||||
}
|
||||
.rta__loader.rta__loader--empty-suggestion-data {
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
.rta--loading .rta__loader.rta__loader--suggestion-data {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rta--loading .rta__loader.rta__loader--suggestion-data > * {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
}
|
||||
.rta__textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1em;
|
||||
}
|
||||
.rta__autocomplete {
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
border: 1px solid var(--gray-tertiary);
|
||||
}
|
||||
.rta__autocomplete--top {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.rta__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
list-style: none;
|
||||
max-height: 120px;
|
||||
overflow: scroll;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rta__entity {
|
||||
background: var(--gray-secondary);
|
||||
color: var(--font-color);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
min-width: 300px;
|
||||
}
|
||||
.rta__entity:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.rta__item:not(:last-child) {
|
||||
border-bottom: 1px solid var(--gray);
|
||||
}
|
||||
.rta__entity > * {
|
||||
padding: 4px;
|
||||
background: var(--gray);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.rta__entity--selected {
|
||||
color: var(--font-color);
|
||||
text-decoration: none;
|
||||
background: var(--gray-tertiary);
|
||||
background: var(--gray-secondary);
|
||||
}
|
||||
|
||||
.rta__list {
|
||||
border: 1px solid var(--gray-tertiary);
|
||||
}
|
||||
|
||||
.rta__item:not(:last-child) {
|
||||
border-bottom: 1px solid var(--gray-tertiary);
|
||||
}
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-item .picture {
|
||||
@ -94,3 +45,7 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.nip05 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
@ -3,24 +3,26 @@ import { Component } from "react";
|
||||
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
|
||||
|
||||
import Nip05, { useIsVerified } from "./Nip05";
|
||||
import "@webscopeio/react-textarea-autocomplete/style.css";
|
||||
import "./Textarea.css";
|
||||
import Nostrich from "../nostrich.jpg";
|
||||
|
||||
function searchUsers(query, users) {
|
||||
return Object.values(users).filter(({ name, display_name }) => {
|
||||
return name.toLowerCase().includes(query.toLowerCase()) || display_name?.includes(query.toLowerCase())
|
||||
})
|
||||
const q = query.toLowerCase()
|
||||
return Object.values(users).filter(({ name, display_name, about }) => {
|
||||
return name.toLowerCase().includes(q) || display_name?.includes(q) || about?.includes(q)
|
||||
}).slice(0, 3)
|
||||
}
|
||||
|
||||
const UserItem = ({ pubkey, display_name, picture, nip05 }) => {
|
||||
const UserItem = ({ pubkey, display_name, picture, nip05, ...rest }) => {
|
||||
const { isVerified, couldNotVerify, name, domain } = useIsVerified(nip05, pubkey)
|
||||
return (
|
||||
<div className="user-item">
|
||||
<div key={pubkey} className="user-item">
|
||||
<div className="user-picture">
|
||||
{picture && <img src={picture ? picture : Nostrich} className="picture" />}
|
||||
</div>
|
||||
<div className="user-details">
|
||||
<strong>{display_name ? display_name : name !== '_' ? name : domain}</strong>
|
||||
<strong>{display_name || rest.name}</strong>
|
||||
<Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />
|
||||
</div>
|
||||
</div>
|
||||
@ -41,6 +43,7 @@ export default class Textarea extends Component {
|
||||
onChange={onChange}
|
||||
trigger={{
|
||||
"@": {
|
||||
afterWhitespace: true,
|
||||
dataProvider: token => searchUsers(token, users),
|
||||
component: ({ entity }) => <UserItem {...entity} />,
|
||||
output: (item, trigger) => `@${item.pubkey}`
|
||||
|
Loading…
Reference in New Issue
Block a user