zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feat-560] added description text and default button tooltip

Browse Source 
added tooltip support in BsmButton component
This commit is contained in:
silentrald
2024-08-25 11:57:03 +08:00
parent d3c797041f
commit 6258de5b06
10 changed files with 73 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/modal/modal-types/ask-install-path.component.tsx
+9 -12
View File
@@ -59,18 +59,14 @@ export const AskInstallPathModal: ModalComponent<{ installPath: string }, {}> =
onConfirmButtonPressed();
}}>
<h1 className="
tracking-wide w-full
uppercase text-3xl text-center text-gray-800 dark:text-gray-200
">
<h1 className="tracking-wide w-full uppercase text-3xl text-center text-gray-800 dark:text-gray-200">
{t("modals.ask-install-path.title")}
</h1>
<div className="
relative rounded-md pl-2 py-1 my-3
flex items-center justify-between
w-full h-8 bg-light-main-color-1 dark:bg-main-color-1
">
<p className="my-3 text-sm text-gray-600 dark:text-gray-400">
{t("modals.ask-install-path.choose-folder-description")}
</p>
<div className="relative rounded-md pl-2 py-1 my-3 flex items-center justify-between w-full h-8 bg-light-main-color-1 dark:bg-main-color-1">
<span className="block text-ellipsis overflow-hidden min-w-0" title={installPath}>
{installPath}
</span>
@@ -82,17 +78,18 @@ export const AskInstallPathModal: ModalComponent<{ installPath: string }, {}> =
/>
</div>
<div className="grid grid-flow-col grid-cols-4 row-start-3 gap-4">
<div className="grid grid-flow-col grid-cols-3 gap-4">
<BsmButton
typeColor="cancel"
className="col-start-3 rounded-md text-center transition-all"
className="h-8 col-start-2 rounded-md text-center transition-all"
onClick={onDefaultButtonPressed}
withBar={false}
text="modals.ask-install-path.default"
tooltip="modals.ask-install-path.default-tooltip"
/>
<BsmButton
typeColor="primary"
className="col-start-4 z-0 px-1 rounded-md text-center transition-all"
className="h-8 col-start-3 z-0 px-1 rounded-md text-center transition-all"
type="submit"
withBar={false}
text="misc.confirm"
src/renderer/components/shared/bsm-button.component.tsx
+31 -5
View File
@@ -5,6 +5,7 @@ import { useTranslation } from "renderer/hooks/use-translation.hook";
import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { getCorrectTextColor } from "renderer/helpers/correct-text-color";
import Tippy from "@tippyjs/react";
export type BsmButtonType = "primary" | "secondary" | "success" | "cancel" | "error" | "none";
@@ -28,9 +29,17 @@ type Props = {
title?: string;
iconColor?: string;
textClassName?: string;
tooltip?: string;
tooltipIcon?: BsmIconType;
};
export const BsmButton = forwardRef<unknown, Props>(({ className, style, iconStyle, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color, title, iconColor, textClassName }, forwardedRef) => {
export const BsmButton = forwardRef<unknown, Props>(({
className, style, iconStyle, imgClassName, iconClassName,
icon, image, text, type, active, withBar = true, disabled,
onClickOutside, onClick,
typeColor, color, title, iconColor, textClassName,
tooltip, tooltipIcon
}, forwardedRef) => {
const t = useTranslation();
const { firstColor, secondColor } = useThemeColor();
const ref = useRef<HTMLDivElement>(null);
@@ -84,18 +93,35 @@ export const BsmButton = forwardRef<unknown, Props>(({ className, style, iconSty
const handleClick = (e: MouseEvent<HTMLDivElement>) => !disabled && onClick?.(e);
const renderTooltip = () => {
return (
<Tippy
className="!bg-main-color-1"
content={t(tooltip)}
delay={[300, 0]}
arrow={false}
>
<div className="h-[20px] w-[20px] p-1.5 rounded-full cursor-help bg-light-main-color-1 dark:bg-main-color-3 hover:brightness-110">
<BsmIcon className="w-full h-full" icon={tooltipIcon || "info"} />
</div>
</Tippy>
);
}
return (
<div ref={setRef} onClick={handleClick} title={t(title)} className={`${className} overflow-hidden group ${!withBar && !disabled && (!!typeColor || !!color) && "hover:brightness-[1.15]"} ${disabled ? "brightness-75 cursor-not-allowed" : "cursor-pointer"} ${renderTypeColor}`} style={{ ...style, backgroundColor: primaryColor || color }}>
{image && <BsmImage image={image} className={imgClassName} />}
{icon && <BsmIcon icon={icon} className={iconClassName ?? "size-full text-gray-800 dark:text-white"} style={{ ...(iconStyle ?? {}), color: (iconColor || textColor) }} />}
{text &&
(type === "submit" ? (
<button type="submit" className={textClassName || "size-full"} style={{ ...(!!textColor && { color: textColor }) }}>
{t(text)}
<button type="submit" className={`h-full flex items-center justify-center gap-x-2 ${!textClassName && "size-full"}`} style={{ ...(!!textColor && { color: textColor }) }}>
<span className={textClassName}>{t(text)}</span>
{tooltip && renderTooltip()}
</button>
) : (
<span className={textClassName} style={{ ...(!!textColor && { color: `${textColor}` }) }}>
{t(text)}
<span className="h-full flex items-center justify-center gap-x-2" style={{ ...(!!textColor && { color: `${textColor}` }) }}>
<span className={textClassName}>{t(text)}</span>
{tooltip && renderTooltip()}
</span>
))}
{withBar && (