mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-05 21:32:02 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

feat: generalisedropdown menu item and content

Browse Source
This commit is contained in:
devcodes9
2024-10-10 23:58:46 +05:30
parent 666f699858
commit 8adf9be9d3
15 changed files with 98 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
View File

@@ -141,37 +141,33 @@ export function ConditionalLogic({
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => {
duplicateLogic(logicItemIdx);
}}>
<CopyIcon className="h-4 w-4" />
}}
icon={<CopyIcon className="h-4 w-4" />}>
Duplicate
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
disabled={logicItemIdx === 0}
onClick={() => {
moveLogic(logicItemIdx, logicItemIdx - 1);
}}>
<ArrowUpIcon className="h-4 w-4" />
}}
icon={<ArrowUpIcon className="h-4 w-4" />}>
Move up
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
disabled={logicItemIdx === (question.logic ?? []).length - 1}
onClick={() => {
moveLogic(logicItemIdx, logicItemIdx + 1);
}}>
<ArrowDownIcon className="h-4 w-4" />
}}
icon={<ArrowDownIcon className="h-4 w-4" />}>
Move down
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => {
handleRemoveLogic(logicItemIdx);
}}>
<TrashIcon className="h-4 w-4" />
}}
icon={<TrashIcon className="h-4 w-4" />}>
Remove
</DropdownMenuItem>
</DropdownMenuContent>

29
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
View File

@@ -162,7 +162,7 @@ export const EditorCardMenu = ({
<EllipsisIcon className="h-4 w-4 text-slate-500 hover:text-slate-600" />
</DropdownMenuTrigger>
<DropdownMenuContent className="border border-slate-200">
<DropdownMenuContent>
<div className="flex flex-col">
{cardType === "question" && (
<DropdownMenuSub>
@@ -170,13 +170,12 @@ export const EditorCardMenu = ({
Change question type
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="ml-2 border border-slate-200 text-slate-600 hover:text-slate-700">
<DropdownMenuSubContent className="ml-2">
{Object.entries(availableQuestionTypes).map(([type, name]) => {
if (type === card.type) return null;
return (
<DropdownMenuItem
key={type}
className="min-h-8 cursor-pointer"
onClick={() => {
setChangeToType(type as TSurveyQuestionTypeEnum);
if ((card as TSurveyQuestion).logic) {
@@ -185,8 +184,8 @@ export const EditorCardMenu = ({
}
changeQuestionType(type as TSurveyQuestionTypeEnum);
}}>
{QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}
}}
icon={QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}>
<span className="ml-2">{name}</span>
</DropdownMenuItem>
);
@@ -196,7 +195,7 @@ export const EditorCardMenu = ({
)}
{cardType === "ending" && (
<DropdownMenuItem
className="flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700"
className="min-h-8 justify-between"
onClick={(e) => {
e.preventDefault();
addEndingCardBelow();
@@ -211,12 +210,12 @@ export const EditorCardMenu = ({
Add question below
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="ml-4 border border-slate-200">
<DropdownMenuSubContent className="ml-2">
{Object.entries(availableQuestionTypes).map(([type, name]) => {
return (
<DropdownMenuItem
key={type}
className="min-h-8 cursor-pointer"
className="min-h-8"
onClick={(e) => {
e.stopPropagation();
if (cardType === "question") {
@@ -232,33 +231,27 @@ export const EditorCardMenu = ({
</DropdownMenuSub>
)}
<DropdownMenuItem
className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
cardIdx === 0 ? "opacity-50" : ""
}`}
onClick={(e) => {
if (cardIdx !== 0) {
e.stopPropagation();
moveCard(cardIdx, true);
}
}}
icon={<ArrowUpIcon className="h-4 w-4" />}
disabled={cardIdx === 0}>
<span className="text-sm">Move up</span>
<ArrowUpIcon className="h-4 w-4" />
<span>Move up</span>
</DropdownMenuItem>
<DropdownMenuItem
className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
lastCard ? "opacity-50" : ""
}`}
onClick={(e) => {
if (!lastCard) {
e.stopPropagation();
moveCard(cardIdx, false);
}
}}
icon={<ArrowDownIcon className="h-4 w-4" />}
disabled={lastCard}>
<span className="text-sm text-slate-600 hover:text-slate-700">Move down</span>
<ArrowDownIcon className="h-4 w-4" />
<span>Move down</span>
</DropdownMenuItem>
</div>
</DropdownMenuContent>

15
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorActions.tsx
View File

@@ -200,30 +200,27 @@ export function LogicEditorActions({
<DropdownMenuContent>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => {
handleActionsChange("addBelow", idx);
}}>
<PlusIcon className="h-4 w-4" />
}}
icon={<PlusIcon className="h-4 w-4" />}>
Add action below
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
disabled={actions.length === 1}
onClick={() => {
handleActionsChange("remove", idx);
}}>
<TrashIcon className="h-4 w-4" />
}}
icon={<TrashIcon className="h-4 w-4" />}>
Remove
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => {
handleActionsChange("duplicate", idx);
}}>
<CopyIcon className="h-4 w-4" />
}}
icon={<CopyIcon className="h-4 w-4" />}>
Duplicate
</DropdownMenuItem>
</DropdownMenuContent>

30
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorConditions.tsx
View File

@@ -216,18 +216,16 @@ export function LogicEditorConditions({
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => {
handleAddConditionBelow(condition.id);
}}>
<PlusIcon className="h-4 w-4" />
}}
icon={<PlusIcon className="h-4 w-4" />}>
Add condition below
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
disabled={depth === 0 && conditions.conditions.length === 1}
onClick={() => handleRemoveCondition(condition.id)}>
<TrashIcon className="h-4 w-4" />
onClick={() => handleRemoveCondition(condition.id)}
icon={<TrashIcon className="h-4 w-4" />}>
Remove
</DropdownMenuItem>
</DropdownMenuContent>
@@ -307,30 +305,26 @@ export function LogicEditorConditions({
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => {
handleAddConditionBelow(condition.id);
}}>
<PlusIcon className="h-4 w-4" />
}}
icon={<PlusIcon className="h-4 w-4" />}>
Add condition below
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
disabled={depth === 0 && conditions.conditions.length === 1}
onClick={() => handleRemoveCondition(condition.id)}>
<TrashIcon className="h-4 w-4" />
onClick={() => handleRemoveCondition(condition.id)}
icon={<TrashIcon className="h-4 w-4" />}>
Remove
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => handleDuplicateCondition(condition.id)}>
<CopyIcon className="h-4 w-4" />
onClick={() => handleDuplicateCondition(condition.id)}
icon={<CopyIcon className="h-4 w-4" />}>
Duplicate
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
onClick={() => handleCreateGroup(condition.id)}>
<WorkflowIcon className="h-4 w-4" />
onClick={() => handleCreateGroup(condition.id)}
icon={<WorkflowIcon className="h-4 w-4" />}>
Create group
</DropdownMenuItem>
</DropdownMenuContent>

24
apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
View File

@@ -323,7 +323,10 @@ export const MainNavigation = ({
)}
<DropdownMenu>
<DropdownMenuTrigger asChild id="productDropdownTrigger">
<DropdownMenuTrigger
asChild
id="productDropdownTrigger"
className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
<div
tabIndex={0}
className={cn(
@@ -403,8 +406,9 @@ export const MainNavigation = ({
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
{isOwnerOrAdmin && (
<DropdownMenuItem onClick={() => handleAddProduct(organization.id)}>
<PlusIcon className="mr-2 h-4 w-4" />
<DropdownMenuItem
onClick={() => handleAddProduct(organization.id)}
icon={<PlusIcon className="mr-2 h-4 w-4" />}>
<span>Add product</span>
</DropdownMenuItem>
)}
@@ -463,8 +467,9 @@ export const MainNavigation = ({
target={link.target}
key={link.label}
className="flex items-center">
<DropdownMenuItem key={link.label}>
<link.icon className="h-4 w-4" strokeWidth={1.5} />
<DropdownMenuItem
key={link.label}
icon={<link.icon className="h-4 w-4" strokeWidth={1.5} />}>
{link.label}
</DropdownMenuItem>
</Link>
@@ -477,8 +482,8 @@ export const MainNavigation = ({
onClick={async () => {
await signOut({ callbackUrl: "/auth/login" });
await formbricksLogout();
}}>
<LogOutIcon className="h-4 w-4" strokeWidth={1.5} />
}}
icon={<LogOutIcon className="h-4 w-4" strokeWidth={1.5} />}>
Logout
</DropdownMenuItem>
@@ -510,8 +515,9 @@ export const MainNavigation = ({
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
{isMultiOrgEnabled && (
<DropdownMenuItem onClick={() => setShowCreateOrganizationModal(true)}>
<PlusIcon className="mr-2 h-4 w-4" />
<DropdownMenuItem
onClick={() => setShowCreateOrganizationModal(true)}
icon={<PlusIcon className="mr-2 h-4 w-4" />}>
<span>Create new organization</span>
</DropdownMenuItem>
)}

8
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx
View File

@@ -223,7 +223,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
setFilterRange(FilterDropDownLabels.ALL_TIME);
setDateRange({ from: undefined, to: getTodayDate() });
@@ -231,7 +230,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
<p className="text-slate-700">All time</p>
</DropdownMenuItem>
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
setFilterRange(FilterDropDownLabels.LAST_7_DAYS);
setDateRange({ from: startOfDay(subDays(new Date(), 7)), to: getTodayDate() });
@@ -239,7 +237,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
<p className="text-slate-700">Last 7 days</p>
</DropdownMenuItem>
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
setFilterRange(FilterDropDownLabels.LAST_30_DAYS);
setDateRange({ from: startOfDay(subDays(new Date(), 30)), to: getTodayDate() });
@@ -247,7 +244,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
<p className="text-slate-700">Last 30 days</p>
</DropdownMenuItem>
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
setIsDatePickerOpen(true);
setFilterRange(FilterDropDownLabels.CUSTOM_RANGE);
@@ -274,28 +270,24 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
<DropdownMenuContent align="start">
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
handleDowndloadResponses(FilterDownload.ALL, "csv");
}}>
<p className="text-slate-700">All responses (CSV)</p>
</DropdownMenuItem>
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
handleDowndloadResponses(FilterDownload.ALL, "xlsx");
}}>
<p className="text-slate-700">All responses (Excel)</p>
</DropdownMenuItem>
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
handleDowndloadResponses(FilterDownload.FILTER, "csv");
}}>
<p className="text-slate-700">Current selection (CSV)</p>
</DropdownMenuItem>
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
handleDowndloadResponses(FilterDownload.FILTER, "xlsx");
}}>

21
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton.tsx
View File

@@ -98,34 +98,29 @@ export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProp
<DropdownMenuContent align="start">
{survey.resultShareKey ? (
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
navigator.clipboard.writeText(surveyUrl);
toast.success("Link to public results copied");
}}>
<p className="text-slate-700">
Copy link to public results <CopyIcon className="ml-1.5 inline h-4 w-4" />
</p>
}}
icon={<CopyIcon className="ml-1.5 inline h-4 w-4" />}>
<p className="text-slate-700">Copy link to public results</p>
</DropdownMenuItem>
) : (
<DropdownMenuItem
className="text-slate-700 hover:ring-0"
onClick={() => {
copyUrlToClipboard();
}}>
<p className="flex items-center text-slate-700">
Copy link <CopyIcon className="ml-1.5 h-4 w-4" />
</p>
}}
icon={<CopyIcon className="ml-1.5 h-4 w-4" />}>
<p className="flex items-center text-slate-700">Copy link</p>
</DropdownMenuItem>
)}
<DropdownMenuItem
className="hover:ring-0"
onClick={() => {
setShowResultsLinkModal(true);
}}>
}}
icon={<GlobeIcon className="ml-1.5 h-4 w-4" />}>
<p className="flex items-center text-slate-700">
{survey.resultShareKey ? "Unpublish from web" : "Publish to web"}
<GlobeIcon className="ml-1.5 h-4 w-4" />
</p>
</DropdownMenuItem>
</DropdownMenuContent>

8
packages/ee/advanced-targeting/components/segment-editor.tsx
View File

@@ -1,4 +1,4 @@
import { MoreVertical, Trash2 } from "lucide-react";
import { ArrowDownIcon, ArrowUpIcon, MoreVertical, Trash2 } from "lucide-react";
import { useState } from "react";
import { cn } from "@formbricks/lib/cn";
import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
@@ -224,7 +224,8 @@ export function SegmentEditor({
<DropdownMenuItem
onClick={() => {
handleMoveResource(groupId, "up");
}}>
}}
icon={<ArrowUpIcon className="h-4 w-4" />}>
Move up
</DropdownMenuItem>
@@ -232,7 +233,8 @@ export function SegmentEditor({
onClick={() => {
if (viewOnly) return;
handleMoveResource(groupId, "down");
}}>
}}
icon={<ArrowDownIcon className="h-4 w-4" />}>
Move down
</DropdownMenuItem>
</DropdownMenuContent>

8
packages/ee/advanced-targeting/components/segment-filter.tsx
View File

@@ -1,4 +1,6 @@
import {
ArrowDownIcon,
ArrowUpIcon,
FingerprintIcon,
MonitorSmartphoneIcon,
MoreVertical,
@@ -161,13 +163,15 @@ function SegmentFilterItemContextMenu({
<DropdownMenuItem
onClick={() => {
onMoveFilter(filterId, "up");
}}>
}}
icon={<ArrowUpIcon className="h-4 w-4" />}>
Move up
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
onMoveFilter(filterId, "down");
}}>
}}
icon={<ArrowDownIcon className="h-4 w-4" />}>
Move down
</DropdownMenuItem>
</DropdownMenuContent>

14
packages/ui/components/BasicSegmentEditor/components/SegmentFilterItemContextMenu.tsx
View File

@@ -1,4 +1,4 @@
import { EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
import { cn } from "@formbricks/lib/cn";
import { Button } from "../../Button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../DropdownMenu";
@@ -24,8 +24,16 @@ export const SegmentFilterItemContextMenu = ({
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => onMoveFilter(filterId, "up")}>Move up</DropdownMenuItem>
<DropdownMenuItem onClick={() => onMoveFilter(filterId, "down")}>Move down</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onMoveFilter(filterId, "up")}
icon={<ArrowUpIcon className="h-4 w-4" />}>
Move up
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onMoveFilter(filterId, "down")}
icon={<ArrowDownIcon className="h-4 w-4" />}>
Move down
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

10
packages/ui/components/DataTable/components/ColumnSettingsDropdown.tsx
View File

@@ -23,15 +23,17 @@ export const ColumnSettingsDropdown = <T,>({
className="capitalize"
onClick={() => {
column.toggleVisibility(false);
}}>
}}
icon={<EyeOffIcon className="h-4 w-4" />}>
<div className="flex items-center space-x-2">
<EyeOffIcon className="h-4 w-4" />
<span>Hide column</span>
</div>
</DropdownMenuItem>
<DropdownMenuItem className="capitalize" onClick={() => setIsTableSettingsModalOpen(true)}>
<DropdownMenuItem
className="capitalize"
onClick={() => setIsTableSettingsModalOpen(true)}
icon={<SettingsIcon className="h-4 w-4" />}>
<div className="flex items-center space-x-2">
<SettingsIcon className="h-4 w-4" />
<span>Table settings</span>
</div>
</DropdownMenuItem>

12
packages/ui/components/DropdownMenu/index.tsx
View File

@@ -67,7 +67,7 @@ const DropdownMenuContent: React.ComponentType<DropdownMenuPrimitive.DropdownMen
ref={ref}
sideOffset={sideOffset}
className={cn(
"animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-56 min-w-[8rem] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 text-slate-700 shadow-sm",
"animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 text-slate-700 shadow-sm",
className
)}
{...props}
@@ -80,13 +80,15 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem: React.ForwardRefExoticComponent<
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean;
icon?: React.ReactNode;
} & React.RefAttributes<React.ElementRef<typeof DropdownMenuPrimitive.Item>>
> = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean;
icon?: React.ReactNode;
}
>(({ className, inset, ...props }, ref) => (
>(({ className, children, inset, icon, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
@@ -94,8 +96,10 @@ const DropdownMenuItem: React.ForwardRefExoticComponent<
inset && "pl-8",
className
)}
{...props}
/>
{...props}>
{icon}
{children}
</DropdownMenuPrimitive.Item>
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;

2
packages/ui/components/Editor/components/AddVariablesDropdown.tsx
View File

@@ -35,7 +35,7 @@ export const AddVariablesDropdown: React.FC<IAddVariablesDropdown> = (props) =>
</div>
<div className="h-64 overflow-scroll md:h-80">
{props.variables.map((variable) => (
<DropdownMenuItem key={variable} className="hover:ring-0">
<DropdownMenuItem key={variable}>
<button
key={variable}
type="button"

2
packages/ui/components/Editor/components/ToolbarPlugin.tsx
View File

@@ -468,7 +468,7 @@ export const ToolbarPlugin = (props: TextEditorProps) => {
<DropdownMenuContent align="start">
{Object.keys(blockTypeToBlockName).map((key) => {
return (
<DropdownMenuItem key={key} className="outline-none hover:ring-0 focus:ring-0">
<DropdownMenuItem key={key}>
<Button
color="minimal"
type="button"

1
packages/ui/components/QuestionFormInput/components/RecallItemSelect.tsx
View File

@@ -213,7 +213,6 @@ export const RecallItemSelect = ({
setShowRecallItemSelect(false);
}}
autoFocus={false}
className="flex w-full cursor-pointer rounded-md p-2 focus:bg-slate-200 focus:outline-none"
onKeyDown={(e) => {
if (e.key === "ArrowUp" && index === 0) {
document.getElementById("recallItemSearchInput")?.focus();