mirror of
https://github.com/StanGirard/quivr.git
synced 2024-09-11 13:15:41 +03:00
fix(frontend): tooltip on folder line (#2650)
…isabled state # Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
This commit is contained in:
parent
ca6c0a86dc
commit
aac7c15151
@ -2,6 +2,7 @@ import { useState } from "react";
|
|||||||
|
|
||||||
import { Checkbox } from "@/lib/components/ui/Checkbox/Checkbox";
|
import { Checkbox } from "@/lib/components/ui/Checkbox/Checkbox";
|
||||||
import Icon from "@/lib/components/ui/Icon/Icon";
|
import Icon from "@/lib/components/ui/Icon/Icon";
|
||||||
|
import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
|
||||||
|
|
||||||
import styles from "./SyncElementLine.module.scss";
|
import styles from "./SyncElementLine.module.scss";
|
||||||
|
|
||||||
@ -64,7 +65,7 @@ export const SyncElementLine = ({
|
|||||||
setChecked((prevChecked) => !prevChecked);
|
setChecked((prevChecked) => !prevChecked);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const content = (
|
||||||
<div
|
<div
|
||||||
className={`${styles.sync_element_line_wrapper} ${
|
className={`${styles.sync_element_line_wrapper} ${
|
||||||
isCheckboxHovered || !isFolder || checked ? styles.no_hover : ""
|
isCheckboxHovered || !isFolder || checked ? styles.no_hover : ""
|
||||||
@ -85,11 +86,6 @@ export const SyncElementLine = ({
|
|||||||
checked={checked}
|
checked={checked}
|
||||||
setChecked={handleSetChecked}
|
setChecked={handleSetChecked}
|
||||||
disabled={!selectable}
|
disabled={!selectable}
|
||||||
tooltip={
|
|
||||||
!selectable
|
|
||||||
? "Only premium members can sync folders. This feature automatically adds new files from your folders to your brain, keeping it up-to-date without manual effort."
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -97,4 +93,12 @@ export const SyncElementLine = ({
|
|||||||
<span className={styles.element_name}>{name}</span>
|
<span className={styles.element_name}>{name}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return selectable ? (
|
||||||
|
content
|
||||||
|
) : (
|
||||||
|
<Tooltip tooltip="Only premium members can sync folders. This feature automatically adds new files from your folders to your brain, keeping it up-to-date without manual effort.">
|
||||||
|
{content}
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
@ -48,13 +48,13 @@ export const BrainRecapStep = (): JSX.Element => {
|
|||||||
return (
|
return (
|
||||||
<div className={styles.brain_recap_wrapper}>
|
<div className={styles.brain_recap_wrapper}>
|
||||||
<div className={styles.content_wrapper}>
|
<div className={styles.content_wrapper}>
|
||||||
<span className={styles.title}>Brain Recap</span>
|
|
||||||
<MessageInfoBox type="warning">
|
<MessageInfoBox type="warning">
|
||||||
<span className={styles.warning_message}>
|
<span className={styles.warning_message}>
|
||||||
Depending on the number of knowledge, the upload can take
|
Depending on the number of knowledge, the upload can take
|
||||||
<strong> few minutes</strong>.
|
<strong> few minutes</strong>.
|
||||||
</span>
|
</span>
|
||||||
</MessageInfoBox>
|
</MessageInfoBox>
|
||||||
|
<span className={styles.title}>Brain Recap</span>
|
||||||
<div className={styles.brain_info_wrapper}>
|
<div className={styles.brain_info_wrapper}>
|
||||||
<div className={styles.name_field}>
|
<div className={styles.name_field}>
|
||||||
<Controller
|
<Controller
|
||||||
|
@ -3,14 +3,12 @@ import { useEffect, useState } from "react";
|
|||||||
import styles from "./Checkbox.module.scss";
|
import styles from "./Checkbox.module.scss";
|
||||||
|
|
||||||
import { Icon } from "../Icon/Icon";
|
import { Icon } from "../Icon/Icon";
|
||||||
import Tooltip from "../Tooltip/Tooltip";
|
|
||||||
|
|
||||||
interface CheckboxProps {
|
interface CheckboxProps {
|
||||||
label?: string;
|
label?: string;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
setChecked: (value: boolean) => void;
|
setChecked: (value: boolean) => void;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
tooltip?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Checkbox = ({
|
export const Checkbox = ({
|
||||||
@ -18,7 +16,6 @@ export const Checkbox = ({
|
|||||||
checked,
|
checked,
|
||||||
setChecked,
|
setChecked,
|
||||||
disabled,
|
disabled,
|
||||||
tooltip,
|
|
||||||
}: CheckboxProps): JSX.Element => {
|
}: CheckboxProps): JSX.Element => {
|
||||||
const [currentChecked, setCurrentChecked] = useState<boolean>(checked);
|
const [currentChecked, setCurrentChecked] = useState<boolean>(checked);
|
||||||
|
|
||||||
@ -26,7 +23,7 @@ export const Checkbox = ({
|
|||||||
setCurrentChecked(checked);
|
setCurrentChecked(checked);
|
||||||
}, [checked]);
|
}, [checked]);
|
||||||
|
|
||||||
const checkboxElement = (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`${styles.checkbox_wrapper} ${
|
className={`${styles.checkbox_wrapper} ${
|
||||||
disabled ? styles.disabled : ""
|
disabled ? styles.disabled : ""
|
||||||
@ -47,10 +44,4 @@ export const Checkbox = ({
|
|||||||
{label && <span>{label}</span>}
|
{label && <span>{label}</span>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return tooltip ? (
|
|
||||||
<Tooltip tooltip={tooltip}>{checkboxElement}</Tooltip>
|
|
||||||
) : (
|
|
||||||
checkboxElement
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user