HTML auto direction for specific textual content #286
@ -22,19 +22,11 @@ const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps)
|
|||||||
|
|
||||||
interface CollapsedIconProps {
|
interface CollapsedIconProps {
|
||||||
icon: ReactNode;
|
icon: ReactNode;
|
||||||
children: ReactNode;
|
|
||||||
collapsed: boolean;
|
collapsed: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CollapsedIcon = ({ icon, children, collapsed }: CollapsedIconProps) => {
|
export const CollapsedIcon = ({ icon, collapsed }: CollapsedIconProps) => {
|
||||||
return collapsed ? (
|
return collapsed ? <div className="collapsed">{icon}</div> : <div className="uncollapsed">{icon}</div>;
|
||||||
<div className="collapsed">{icon}</div>
|
|
||||||
) : (
|
|
||||||
<div className="uncollapsed">
|
|
||||||
{icon}
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
interface CollapsedSectionProps {
|
interface CollapsedSectionProps {
|
||||||
@ -50,12 +42,14 @@ export const CollapsedSection = ({ title, children }: CollapsedSectionProps) =>
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<div className="collapsable-section">
|
<div className="collapsable-section">
|
||||||
<h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
|
<h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
|
||||||
<CollapsedIcon icon={icon} collapsed={collapsed}>
|
<CollapsedIcon icon={icon} collapsed={collapsed} />
|
||||||
{children}
|
|
||||||
</CollapsedIcon>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{collapsed ? null : children}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -128,7 +128,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
|
|||||||
function transformParagraph(frag: TextFragment) {
|
function transformParagraph(frag: TextFragment) {
|
||||||
const fragments = transformText(frag);
|
const fragments = transformText(frag);
|
||||||
if (fragments.every(f => typeof f === "string")) {
|
if (fragments.every(f => typeof f === "string")) {
|
||||||
return <p>{fragments}</p>;
|
return <p dir="auto">{fragments}</p>;
|
||||||
}
|
}
|
||||||
return <>{fragments}</>;
|
return <>{fragments}</>;
|
||||||
}
|
}
|
||||||
|
@ -72,6 +72,7 @@ const Textarea = (props: TextareaProps) => {
|
|||||||
return (
|
return (
|
||||||
// @ts-expect-error If anybody can figure out how to type this, please do
|
// @ts-expect-error If anybody can figure out how to type this, please do
|
||||||
<ReactTextareaAutocomplete
|
<ReactTextareaAutocomplete
|
||||||
|
dir="auto"
|
||||||
{...props}
|
{...props}
|
||||||
loadingComponent={() => <span>Loading...</span>}
|
loadingComponent={() => <span>Loading...</span>}
|
||||||
placeholder={formatMessage(messages.NotePlaceholder)}
|
placeholder={formatMessage(messages.NotePlaceholder)}
|
||||||
|
@ -150,10 +150,10 @@ export default function ProfilePage() {
|
|||||||
|
|
||||||
function bio() {
|
function bio() {
|
||||||
return (
|
return (
|
||||||
aboutText.length > 0 && (
|
aboutText.length && (
|
||||||
<>
|
<div dir="auto" className="details">
|
||||||
<div className="details">{about}</div>
|
{about}
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -13,7 +13,7 @@ export default function DiscoverFollows() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content new-user">
|
<div className="main-content new-user" dir="auto">
|
||||||
<div className="progress-bar">
|
<div className="progress-bar">
|
||||||
<div className="progress"></div>
|
<div className="progress"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -26,7 +26,7 @@ export default function DiscoverFollows() {
|
|||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage {...messages.PopularAccounts} />
|
<FormattedMessage {...messages.PopularAccounts} />
|
||||||
</h3>
|
</h3>
|
||||||
{sortedReccomends.length > 0 && <FollowListBase pubkeys={sortedReccomends} />}
|
<div dir="ltr">{sortedReccomends.length > 0 && <FollowListBase pubkeys={sortedReccomends} />}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -24,7 +24,7 @@ export default function GetVerified() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content new-user">
|
<div className="main-content new-user" dir="auto">
|
||||||
<div className="progress-bar">
|
<div className="progress-bar">
|
||||||
<div className="progress progress-third"></div>
|
<div className="progress progress-third"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -49,7 +49,7 @@ export default function ImportFollows() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content new-user">
|
<div className="main-content new-user" dir="auto">
|
||||||
<div className="progress-bar">
|
<div className="progress-bar">
|
||||||
<div className="progress progress-last"></div>
|
<div className="progress progress-last"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -84,6 +84,7 @@ export default function ImportFollows() {
|
|||||||
</AsyncButton>
|
</AsyncButton>
|
||||||
</div>
|
</div>
|
||||||
{error.length > 0 && <b className="error">{error}</b>}
|
{error.length > 0 && <b className="error">{error}</b>}
|
||||||
|
<div dir="ltr">
|
||||||
{sortedTwitterFollows.length > 0 && (
|
{sortedTwitterFollows.length > 0 && (
|
||||||
<FollowListBase
|
<FollowListBase
|
||||||
title={
|
title={
|
||||||
@ -94,6 +95,7 @@ export default function ImportFollows() {
|
|||||||
pubkeys={sortedTwitterFollows}
|
pubkeys={sortedTwitterFollows}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="next-actions">
|
<div className="next-actions">
|
||||||
<button className="secondary" type="button" onClick={() => navigate("/new/discover")}>
|
<button className="secondary" type="button" onClick={() => navigate("/new/discover")}>
|
||||||
|
@ -71,7 +71,7 @@ export default function NewUserFlow() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content new-user">
|
<div className="main-content new-user" dir="auto">
|
||||||
<div className="progress-bar">
|
<div className="progress-bar">
|
||||||
<div className="progress progress-first"></div>
|
<div className="progress progress-first"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -22,7 +22,7 @@ export default function NewUserName() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content new-user">
|
<div className="main-content new-user" dir="auto">
|
||||||
<div className="progress-bar">
|
<div className="progress-bar">
|
||||||
<div className="progress progress-second"></div>
|
<div className="progress progress-second"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -551,7 +551,10 @@ button.tall {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.collapsable-section {
|
.collapsable-section {
|
||||||
position: relative;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsable-section h3,
|
.collapsable-section h3,
|
||||||
@ -560,9 +563,6 @@ button.tall {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.collapsable-section .collapse-icon {
|
.collapsable-section .collapse-icon {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transition: transform 300ms ease-in-out;
|
transition: transform 300ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user