Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: peek overview and issue details properties #3447

Merged
merged 6 commits into from
Jan 24, 2024
Merged

style: peek overview and issue details properties #3447

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cc50012
style: peek overview and issue details properties
aaryan610 Jan 24, 2024
4506a38
fix: cycle and module remove function
aaryan610 Jan 24, 2024
0b9081c
style: update placeholder text color
aaryan610 Jan 24, 2024
e01551e
fix: relation constant
aaryan610 Jan 24, 2024
6e9bd93
chore: added todos to fix later
aaryan610 Jan 24, 2024
8b262d6
fix: merge conflicts resolved from develop
aaryan610 Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/ui/src/dropdowns/custom-search-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
<Combobox.Options className="fixed z-10" static>
<div
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap",
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
optionsClassName
)}
ref={setPopperElement}
Expand Down
26 changes: 11 additions & 15 deletions web/components/core/modals/existing-issues-list-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,9 @@ type Props = {

const projectService = new ProjectService();

export const ExistingIssuesListModal: React.FC<Props> = ({
isOpen,
handleClose: onClose,
searchParams,
handleOnSubmit,
workspaceLevelToggle = false,
}) => {
export const ExistingIssuesListModal: React.FC<Props> = (props) => {
const { isOpen, handleClose: onClose, searchParams, handleOnSubmit, workspaceLevelToggle = false } = props;
// states
const [searchTerm, setSearchTerm] = useState("");
const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
const [isSearching, setIsSearching] = useState(false);
Expand Down Expand Up @@ -92,7 +88,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
return (
<>
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Dialog as="div" className="relative z-20" onClose={() => {}}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
Expand Down Expand Up @@ -260,16 +256,16 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
)}
</Combobox.Options>
</Combobox>
{selectedIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
Cancel
</Button>
<div className="flex items-center justify-end gap-2 p-3">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
Cancel
</Button>
{selectedIssues.length > 0 && (
<Button variant="primary" size="sm" onClick={onSubmit} loading={isSubmitting}>
{isSubmitting ? "Adding..." : "Add selected issues"}
</Button>
</div>
)}
)}
</div>
</Dialog.Panel>
</Transition.Child>
</div>
Expand Down
83 changes: 68 additions & 15 deletions web/components/dropdowns/cycle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { TDropdownProps } from "./types";
type Props = TDropdownProps & {
button?: ReactNode;
dropdownArrow?: boolean;
dropdownArrowClassName?: string;
onChange: (val: string | null) => void;
projectId: string;
value: string | null;
Expand All @@ -26,8 +27,11 @@ type Props = TDropdownProps & {
type ButtonProps = {
className?: string;
cycle: ICycle | null;
hideIcon: boolean;
hideText?: boolean;
dropdownArrow: boolean;
dropdownArrowClassName: string;
placeholder: string;
};

type DropdownOptions =
Expand All @@ -39,7 +43,15 @@ type DropdownOptions =
| undefined;

const BorderButton = (props: ButtonProps) => {
const { className, cycle, dropdownArrow, hideText = false } = props;
const {
className,
cycle,
dropdownArrow,
dropdownArrowClassName,
hideIcon = false,
hideText = false,
placeholder,
} = props;

return (
<div
Expand All @@ -48,29 +60,49 @@ const BorderButton = (props: ButtonProps) => {
className
)}
>
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}{" "}
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
);
};

const BackgroundButton = (props: ButtonProps) => {
const { className, cycle, dropdownArrow, hideText = false } = props;
const {
className,
cycle,
dropdownArrow,
dropdownArrowClassName,
hideIcon = false,
hideText = false,
placeholder,
} = props;

return (
<div
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
>
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
);
};

const TransparentButton = (props: ButtonProps) => {
const { className, cycle, dropdownArrow, hideText = false } = props;
const {
className,
cycle,
dropdownArrow,
dropdownArrowClassName,
hideIcon = false,
hideText = false,
placeholder,
} = props;

return (
<div
Expand All @@ -79,9 +111,11 @@ const TransparentButton = (props: ButtonProps) => {
className
)}
>
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
);
};
Expand All @@ -95,7 +129,10 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
className = "",
disabled = false,
dropdownArrow = false,
dropdownArrowClassName = "",
hideIcon = false,
onChange,
placeholder = "Cycle",
placement,
projectId,
value,
Expand Down Expand Up @@ -178,9 +215,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
as="div"
ref={dropdownRef}
tabIndex={tabIndex}
className={cn("h-full flex-shrink-0", {
className,
})}
className={cn("h-full", className)}
value={value}
onChange={onChange}
disabled={disabled}
Expand Down Expand Up @@ -215,39 +250,57 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
cycle={selectedCycle}
className={buttonClassName}
dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName}
hideIcon={hideIcon}
placeholder={placeholder}
/>
) : buttonVariant === "border-without-text" ? (
aaryan610 marked this conversation as resolved.
Show resolved Hide resolved
<BorderButton
cycle={selectedCycle}
className={buttonClassName}
dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName}
hideIcon={hideIcon}
hideText
placeholder={placeholder}
/>
) : buttonVariant === "background-with-text" ? (
<BackgroundButton
cycle={selectedCycle}
className={buttonClassName}
dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName}
hideIcon={hideIcon}
placeholder={placeholder}
/>
) : buttonVariant === "background-without-text" ? (
<BackgroundButton
cycle={selectedCycle}
className={buttonClassName}
dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName}
hideIcon={hideIcon}
hideText
placeholder={placeholder}
/>
) : buttonVariant === "transparent-with-text" ? (
<TransparentButton
cycle={selectedCycle}
className={buttonClassName}
dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName}
hideIcon={hideIcon}
placeholder={placeholder}
/>
) : buttonVariant === "transparent-without-text" ? (
<TransparentButton
cycle={selectedCycle}
className={buttonClassName}
dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName}
hideIcon={hideIcon}
hideText
placeholder={placeholder}
/>
) : null}
</button>
Expand Down
Loading
Loading