binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: minor pages UI (#695)

Browse source 
* chore: fix minor ui bugs in pages

* chore: shortcut to add new block

* chore: keyboard accessibility

* chore: block options position
This commit is contained in:
Aaryan Khandelwal 2023-04-04 16:21:46 +05:30 • committed by GitHub
parent dad36b404d
commit 2660d646ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 165 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
@ -54,9 +54,10 @@ import {
} from "constants/fetch-keys";
const SinglePage: NextPage<UserAuth> = (props) => {
const [isAddingBlock, setIsAddingBlock] = useState(false);
const [createBlockForm, setCreateBlockForm] = useState(false);
const scrollToRef = useRef<HTMLDivElement>(null);
const router = useRouter();
const { workspaceSlug, projectId, pageId } = router.query;
@ -238,6 +239,13 @@ const SinglePage: NextPage<UserAuth> = (props) => {
);
};
const handleNewBlock = () => {
setCreateBlockForm(true);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
};
const options =
labels?.map((label) => ({
value: label.id,
@ -449,14 +457,15 @@ const SinglePage: NextPage<UserAuth> = (props) => {
<DragDropContext onDragEnd={handleOnDragEnd}>
{pageBlocks.length !== 0 && (
<StrictModeDroppable droppableId="blocks-list">
{(provided, snapshot) => (
<div className="" ref={provided.innerRef} {...provided.droppableProps}>
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{pageBlocks.map((block, index) => (
<SinglePageBlock
key={block.id}
block={block}
projectDetails={projectDetails}
index={index}
handleNewBlock={handleNewBlock}
/>
))}
{provided.placeholder}
@ -469,20 +478,19 @@ const SinglePage: NextPage<UserAuth> = (props) => {
<button
type="button"
className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 text-xs hover:bg-gray-200 mt-4"
onClick={() => setCreateBlockForm(true)}
onClick={handleNewBlock}
>
{isAddingBlock ? (
"Adding block..."
) : (
<>
<PlusIcon className="h-3 w-3" />
Add new block
</>
)}
<PlusIcon className="h-3 w-3" />
Add new block
</button>
)}
{createBlockForm && (
<CreateUpdateBlockInline handleClose={() => setCreateBlockForm(false)} />
<div ref={scrollToRef}>
<CreateUpdateBlockInline
handleClose={() => setCreateBlockForm(false)}
focus="name"
/>
</div>
)}
</>
) : (

8
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View file

@ -46,7 +46,7 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const scollToRef = useRef<HTMLDivElement>(null);
const scrollToRef = useRef<HTMLDivElement>(null);
const { data: projectDetails } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
@ -130,7 +130,7 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
setLabelForm={setLabelForm}
isUpdating={isUpdating}
labelToUpdate={labelToUpdate}
ref={scollToRef}
ref={scrollToRef}
/>
)}
<>
@ -147,7 +147,7 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
addLabelToGroup={() => addLabelToGroup(label)}
editLabel={(label) => {
editLabel(label);
scollToRef.current?.scrollIntoView({
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
@ -163,7 +163,7 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
addLabelToGroup={addLabelToGroup}
editLabel={(label) => {
editLabel(label);
scollToRef.current?.scrollIntoView({
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}