Skip to content

fix(slides): stop rename input clipping, add cancel, shrink header bu… #2223

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

Open
samark231 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(slides): stop rename input clipping, add cancel, shrink header bu… #2223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions ...rses/course-details/subjects/modules/chapters/slides/-components/slide-history-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,16 +157,16 @@ export const SlideHistoryDialog = ({
<MyButton
buttonType="secondary"
scale="medium"
layoutVariant="default"
layoutVariant="icon"
title="View and restore previous versions"
aria-label="History"
onClick={() => {
setSelectedId(null);
setConfirmingRestore(false);
setOpen(true);
}}
>
<ClockCounterClockwise size={18} />
<span className="hidden md:inline">History</span>
</MyButton>
<MyDialog
heading="Version history"
Expand Down
81 changes: 61 additions & 20 deletions ...ry/courses/course-details/subjects/modules/chapters/slides/-components/slide-material.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {
useSlidesMutations,
} from '@/routes/study-library/courses/course-details/subjects/modules/chapters/slides/-hooks/use-slides';
import { toast } from 'sonner';
import { Check, DownloadSimple, PencilSimpleLine, Trash, FloppyDisk, LinkSimple, Warning } from '@phosphor-icons/react';
import { Check, DownloadSimple, PencilSimpleLine, Trash, FloppyDisk, LinkSimple, Warning, X } from '@phosphor-icons/react';
import { AlertCircle } from 'lucide-react';
import {
converDataToAssignmentFormat,
Expand Down Expand Up @@ -3570,6 +3570,26 @@ export const SlideMaterial = ({
(editableVideoSourceType === 'VIDEO' || editableVideoSourceType === 'VIMEO') &&
!activeItem?.splitScreenMode;

const saveHeading = () => {
if (!activeItem) return;
updateHeading(
activeItem,
addUpdateVideoSlide,
SaveDraft,
heading,
setIsEditing,
addUpdateDocumentSlide,
addUpdateQuizSlide,
updateAssignmentOrder,
updateQuestionOrder
);
};

const cancelHeadingEdit = () => {
setHeading(activeItem?.title || '');
setIsEditing(false);
};

return (
<div
// Bounded-height scroll container so the `sticky top-0` header below
Expand Down Expand Up @@ -3652,30 +3672,45 @@ export const SlideMaterial = ({
<div className="flex w-full flex-wrap items-center justify-between gap-x-3 gap-y-2">
<div className="w-full min-w-0 md:w-auto md:flex-1">
{isEditing ? (
<div className="flex items-center justify-center gap-2 duration-200 animate-in fade-in">
<div className="flex min-w-0 items-center gap-2 duration-200 animate-in fade-in">
<input
type="text"
value={heading}
onChange={handleHeadingChange}
className="w-fit border-b border-neutral-300 bg-transparent text-lg font-semibold text-neutral-700 transition-colors duration-200 focus:border-primary-500 focus:outline-none"
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
saveHeading();
} else if (e.key === 'Escape') {
e.preventDefault();
cancelHeadingEdit();
}
}}
className="min-w-0 flex-1 border-b border-neutral-300 bg-transparent text-lg font-semibold text-neutral-700 transition-colors duration-200 focus:border-primary-500 focus:outline-none"
autoFocus
/>
<Check
onClick={() =>
updateHeading(
activeItem,
addUpdateVideoSlide,
SaveDraft,
heading,
setIsEditing,
addUpdateDocumentSlide,
addUpdateQuizSlide, // <-- pass this for QUIZ support
updateAssignmentOrder, // <-- pass for ASSIGNMENT
updateQuestionOrder // <-- pass for QUESTION
)
}
className="cursor-pointer hover:text-primary-500"
/>
<MyButton
type="button"
buttonType="text"
layoutVariant="icon"
scale="small"
className="shrink-0"
aria-label="Save title"
onClick={saveHeading}
>
<Check size={16} />
</MyButton>
<MyButton
type="button"
buttonType="text"
layoutVariant="icon"
scale="small"
className="shrink-0 text-neutral-500 hover:text-danger-500"
aria-label="Cancel rename"
onClick={cancelHeadingEdit}
>
<X size={16} />
</MyButton>
</div>
) : (
<div className="flex min-w-0 items-center gap-1.5">
Expand Down Expand Up @@ -3743,6 +3778,7 @@ export const SlideMaterial = ({
buttonType="secondary"
scale="medium"
layoutVariant="default"
className="sm:min-w-0"
onClick={() => setIsEditLinkDialogOpen(true)}
>
<LinkSimple size={18} />
Expand Down Expand Up @@ -3773,7 +3809,10 @@ export const SlideMaterial = ({
layoutVariant="default"
onClick={handleSaveDraftClick}
disabled={isSaving}
className={cn(isSaving && 'pointer-events-none')}
className={cn(
'sm:min-w-0',
isSaving && 'pointer-events-none'
)}
>
{isSaving ? (
<>
Expand Down Expand Up @@ -3803,6 +3842,7 @@ export const SlideMaterial = ({
buttonType="secondary"
scale="medium"
layoutVariant="default"
className="sm:min-w-0"
onClick={() => setIsUnpublishDialogOpen(true)}
>
<span className="hidden sm:inline">Unpublish</span>
Expand Down Expand Up @@ -3836,6 +3876,7 @@ export const SlideMaterial = ({
buttonType="primary"
scale="medium"
layoutVariant="default"
className="sm:min-w-0"
onClick={() => setIsPublishDialogOpen(true)}
>
<span className="hidden sm:inline">Publish</span>
Expand Down
6 changes: 3 additions & 3 deletions ...se-details/subjects/modules/chapters/slides/-components/stats-dialog/activity-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,11 +169,11 @@ export const ActivityStatsSidebar = () => {
<MyButton
buttonType="secondary"
scale="medium"
layoutVariant="default"
layoutVariant="icon"
title="Activity Stats"
aria-label="Activity Stats"
>
<ChartBar className="size-4 md:hidden" />
<span className="hidden md:inline">Activity Stats</span>
<ChartBar size={18} />
</MyButton>
</DialogTrigger>
<DialogContent className="flex h-[680px] max-h-[92vh] w-[760px] max-w-[95vw] flex-col gap-0 overflow-hidden p-0 font-normal">
Expand Down