Fixed Share button position and icon
This commit is contained in:
parent
501bcaeb65
commit
89e7469032
6 changed files with 30 additions and 19 deletions
|
|
@ -4,13 +4,20 @@ import { nodeIconsLucide } from "../../utils/styleUtils";
|
||||||
|
|
||||||
const ForwardedIconComponent = forwardRef(
|
const ForwardedIconComponent = forwardRef(
|
||||||
(
|
(
|
||||||
{ name, className, iconColor, stroke, id = "" }: IconComponentProps,
|
{
|
||||||
|
name,
|
||||||
|
className,
|
||||||
|
iconColor,
|
||||||
|
stroke,
|
||||||
|
strokeWidth,
|
||||||
|
id = "",
|
||||||
|
}: IconComponentProps,
|
||||||
ref
|
ref
|
||||||
) => {
|
) => {
|
||||||
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
|
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
|
||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
strokeWidth: 1.5,
|
strokeWidth: strokeWidth ?? 1.5,
|
||||||
...(stroke && { stroke: stroke }),
|
...(stroke && { stroke: stroke }),
|
||||||
...(iconColor && { color: iconColor, stroke: stroke }),
|
...(iconColor && { color: iconColor, stroke: stroke }),
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -209,7 +209,7 @@ export default function ShareModal({
|
||||||
>
|
>
|
||||||
<span className="pr-2">Share</span>
|
<span className="pr-2">Share</span>
|
||||||
<IconComponent
|
<IconComponent
|
||||||
name="Share"
|
name="Forward"
|
||||||
className="h-6 w-6 pl-1 text-foreground"
|
className="h-6 w-6 pl-1 text-foreground"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -193,14 +193,15 @@ export default function ExtraSidebar(): JSX.Element {
|
||||||
<button
|
<button
|
||||||
disabled={!hasApiKey || !validApiKey || !hasStore}
|
disabled={!hasApiKey || !validApiKey || !hasStore}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"extra-side-bar-buttons gap-2 text-sm",
|
"extra-side-bar-buttons gap-1.5 text-sm font-semibold",
|
||||||
!hasApiKey || !validApiKey || !hasStore
|
!hasApiKey || !validApiKey || !hasStore
|
||||||
? "button-disable cursor-default text-muted-foreground"
|
? "button-disable cursor-default text-muted-foreground"
|
||||||
: ""
|
: ""
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<IconComponent
|
<IconComponent
|
||||||
name="Share"
|
name="Forward"
|
||||||
|
strokeWidth={2.5}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"side-bar-button-size",
|
"side-bar-button-size",
|
||||||
!hasApiKey || !validApiKey || !hasStore
|
!hasApiKey || !validApiKey || !hasStore
|
||||||
|
|
@ -231,6 +232,19 @@ export default function ExtraSidebar(): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div className="side-bar-arrangement">
|
<div className="side-bar-arrangement">
|
||||||
<div className="side-bar-buttons-arrangement">
|
<div className="side-bar-buttons-arrangement">
|
||||||
|
{hasStore && (
|
||||||
|
<ShadTooltip
|
||||||
|
content={
|
||||||
|
!hasApiKey || !validApiKey
|
||||||
|
? "Please review your API key."
|
||||||
|
: "Share"
|
||||||
|
}
|
||||||
|
side="top"
|
||||||
|
styleClasses="cursor-default"
|
||||||
|
>
|
||||||
|
<div className="side-bar-button">{ModalMemo}</div>
|
||||||
|
</ShadTooltip>
|
||||||
|
)}
|
||||||
<div className="side-bar-button">
|
<div className="side-bar-button">
|
||||||
<ShadTooltip content="Import" side="top">
|
<ShadTooltip content="Import" side="top">
|
||||||
<button
|
<button
|
||||||
|
|
@ -300,19 +314,6 @@ export default function ExtraSidebar(): JSX.Element {
|
||||||
</ShadTooltip>
|
</ShadTooltip>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{hasStore && (
|
|
||||||
<ShadTooltip
|
|
||||||
content={
|
|
||||||
!hasApiKey || !validApiKey
|
|
||||||
? "Please review your API key."
|
|
||||||
: "Share"
|
|
||||||
}
|
|
||||||
side="top"
|
|
||||||
styleClasses="cursor-default"
|
|
||||||
>
|
|
||||||
<div className="side-bar-button">{ModalMemo}</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<Separator />
|
<Separator />
|
||||||
<div className="side-bar-search-div-placement">
|
<div className="side-bar-search-div-placement">
|
||||||
|
|
|
||||||
|
|
@ -250,7 +250,7 @@ export default function NodeToolbarComponent({
|
||||||
>
|
>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<IconComponent
|
<IconComponent
|
||||||
name="Share"
|
name="Forward"
|
||||||
className="relative top-0.5 mr-2 h-4 w-4"
|
className="relative top-0.5 mr-2 h-4 w-4"
|
||||||
/>{" "}
|
/>{" "}
|
||||||
Share{" "}
|
Share{" "}
|
||||||
|
|
|
||||||
|
|
@ -233,6 +233,7 @@ export type IconComponentProps = {
|
||||||
iconColor?: string;
|
iconColor?: string;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
stroke?: string;
|
stroke?: string;
|
||||||
|
strokeWidth?: number;
|
||||||
id?: string;
|
id?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@ import {
|
||||||
FileUp,
|
FileUp,
|
||||||
Fingerprint,
|
Fingerprint,
|
||||||
FolderPlus,
|
FolderPlus,
|
||||||
|
Forward,
|
||||||
Gift,
|
Gift,
|
||||||
GitBranchPlus,
|
GitBranchPlus,
|
||||||
GitFork,
|
GitFork,
|
||||||
|
|
@ -358,6 +359,7 @@ export const nodeIconsLucide: iconsType = {
|
||||||
Minimize2,
|
Minimize2,
|
||||||
Maximize2,
|
Maximize2,
|
||||||
SaveAll,
|
SaveAll,
|
||||||
|
Forward,
|
||||||
Share2,
|
Share2,
|
||||||
Share,
|
Share,
|
||||||
GitBranchPlus,
|
GitBranchPlus,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue