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

fix: minor bugs and ux improvements (#322)

Browse source 
* fix: ellipsis added to issue title

* feat: toolttip added

* feat: assignees tooltip added

* fix: build fix

* fix: build fix

* fix: build error

* fix: minor bugs and ux improvements

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
This commit is contained in:
Aaryan Khandelwal 2023-02-23 10:54:54 +05:30 • committed by GitHub
parent 702cfeb4ee
commit 92f717962c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 317 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/app/components/rich-text-editor/toolbar/index.tsx
View file

@ -4,14 +4,13 @@ import {
ToggleItalicButton,
ToggleUnderlineButton,
ToggleStrikeButton,
ToggleOrderedListButton,
ToggleBulletListButton,
RedoButton,
UndoButton,
} from "@remirror/react";
// headings
import HeadingControls from "./heading-controls";
// list
import { OrderedListButton } from "./ordered-list";
import { UnorderedListButton } from "./unordered-list";
export const RichTextToolbar: React.FC = () => (
<div className="flex items-center gap-y-2 divide-x">
@ -29,11 +28,8 @@ export const RichTextToolbar: React.FC = () => (
<ToggleStrikeButton />
</div>
<div className="flex items-center gap-x-1 px-2">
<OrderedListButton />
<UnorderedListButton />
<ToggleOrderedListButton />
<ToggleBulletListButton />
</div>
{/* <div className="flex items-center gap-x-1 px-2">
<LinkButton />
</div> */}
</div>
);

14
apps/app/components/rich-text-editor/toolbar/link.tsx
View file

@ -138,8 +138,10 @@ const DelayAutoFocusInput = ({ autoFocus, ...rest }: HTMLProps<HTMLInputElement>
export const FloatingLinkToolbar = () => {
const { isEditing, linkPositioner, clickEdit, onRemove, submitHref, href, setHref, cancelHref } =
useFloatingLinkState();
const active = useActive();
const activeLink = active.link();
const { empty } = useCurrentSelection();
const handleClickEdit = useCallback(() => {
@ -148,6 +150,14 @@ export const FloatingLinkToolbar = () => {
const linkEditButtons = activeLink ? (
<>
<CommandButton
commandName="openLink"
onSelect={() => {
window.open(href, "_blank");
}}
icon="externalLinkFill"
enabled
/>
<CommandButton
commandName="updateLink"
onSelect={handleClickEdit}
@ -164,7 +174,9 @@ export const FloatingLinkToolbar = () => {
<>
{!isEditing && <FloatingToolbar>{linkEditButtons}</FloatingToolbar>}
{!isEditing && empty && (
<FloatingToolbar positioner={linkPositioner}>{linkEditButtons}</FloatingToolbar>
<FloatingToolbar positioner={linkPositioner} className="shadow-lg rounded bg-white p-1">
{linkEditButtons}
</FloatingToolbar>
)}
<FloatingWrapper

28
apps/app/components/rich-text-editor/toolbar/ordered-list.tsx
View file

@ -1,28 +0,0 @@
import { useCommands, useActive } from "@remirror/react";
export const OrderedListButton = () => {
const { toggleOrderedList, focus } = useCommands();
const active = useActive();
return (
<button
type="button"
onClick={() => {
toggleOrderedList();
focus();
}}
className={`${active.orderedList() ? "bg-gray-200" : "hover:bg-gray-100"} rounded p-1`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 48 48"
fill="black"
>
<path d="M6 40v-1.7h4.2V37H8.1v-1.7h2.1V34H6v-1.7h5.9V40Zm10.45-2.45v-3H42v3ZM6 27.85v-1.6l3.75-4.4H6v-1.7h5.9v1.6l-3.8 4.4h3.8v1.7Zm10.45-2.45v-3H42v3ZM8.1 15.8V9.7H6V8h3.8v7.8Zm8.35-2.55v-3H42v3Z" />
</svg>
</button>
);
};

28
apps/app/components/rich-text-editor/toolbar/unordered-list.tsx
View file

@ -1,28 +0,0 @@
import { useCommands, useActive } from "@remirror/react";
export const UnorderedListButton = () => {
const { toggleBulletList, focus } = useCommands();
const active = useActive();
return (
<button
type="button"
onClick={() => {
toggleBulletList();
focus();
}}
className={`${active.bulletList() ? "bg-gray-200" : "hover:bg-gray-100"} rounded p-1`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
width="18"
fill="black"
viewBox="0 0 48 48"
>
<path d="M8.55 39q-1.05 0-1.8-.725T6 36.55q0-1.05.75-1.8t1.8-.75q1 0 1.725.75.725.75.725 1.8 0 1-.725 1.725Q9.55 39 8.55 39ZM16 38v-3h26v3ZM8.55 26.5q-1.05 0-1.8-.725T6 24q0-1.05.75-1.775.75-.725 1.8-.725 1 0 1.725.75Q11 23 11 24t-.725 1.75q-.725.75-1.725.75Zm7.45-1v-3h26v3ZM8.5 14q-1.05 0-1.775-.725Q6 12.55 6 11.5q0-1.05.725-1.775Q7.45 9 8.5 9q1.05 0 1.775.725Q11 10.45 11 11.5q0 1.05-.725 1.775Q9.55 14 8.5 14Zm7.5-1v-3h26v3Z" />
</svg>
</button>
);
};