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

Merge pull request #3232 from makeplane/release-0.15

Browse source 
fix: moving patch fixes from release 0.15 to 0.14.2
This commit is contained in:
sriram veeraghanta 2023-12-22 18:19:47 +05:30 • committed by GitHub
commit dc131ee05b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
142 changed files with 650 additions and 1674 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/components/account/sign-in-forms/create-password.tsx
View file

@ -101,7 +101,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>

2
web/components/account/sign-in-forms/email-form.tsx
View file

@ -100,7 +100,7 @@ export const EmailForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
web/components/account/sign-in-forms/optional-set-password.tsx
View file

@ -61,7 +61,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
disabled
/>

2
web/components/account/sign-in-forms/password.tsx
View file

@ -155,7 +155,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
web/components/account/sign-in-forms/self-hosted-sign-in.tsx
View file

@ -97,7 +97,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
web/components/account/sign-in-forms/set-password-link.tsx
View file

@ -87,7 +87,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>

2
web/components/account/sign-in-forms/unique-code.tsx
View file

@ -181,7 +181,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
}}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

120
web/components/common/new-empty-state.tsx
View file

@ -41,69 +41,71 @@ export const NewEmptyState: React.FC<Props> = ({
setIsHovered(false);
};
return (
<div className=" flex h-full w-full flex-col items-center justify-center ">
<div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
<h3 className="text-2xl font-semibold">{title}</h3>
{description && <p className=" text-lg">{description}</p>}
<div className="relative w-full max-w-6xl">
<Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
</div>
<div className="flex items-center justify-center overflow-y-auto">
<div className=" flex h-full w-full flex-col items-center justify-center ">
<div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
<h3 className="text-2xl font-semibold">{title}</h3>
{description && <p className=" text-lg">{description}</p>}
<div className="relative w-full max-w-6xl">
<Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
</div>
<div className="relative flex items-start justify-center">
{primaryButton && (
<Button
className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
size="lg"
variant="primary"
onClick={primaryButton.onClick}
disabled={disabled}
>
{primaryButton.text}
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={`absolute bg-blue-300 ${
comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
} z-10 h-2.5 w-2.5 animate-ping rounded-full`}
/>
<div
className={`absolute bg-blue-400/40 ${
comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
} h-1.5 w-1.5 rounded-full`}
/>
</Button>
)}
{comicBox &&
isHovered &&
(comicBox.direction === "right" ? (
<div
className={`absolute left-1/2 top-0 flex max-w-sm ${
comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
} pb-5`}
<div className="relative flex items-start justify-center">
{primaryButton && (
<Button
className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
size="lg"
variant="primary"
onClick={primaryButton.onClick}
disabled={disabled}
>
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
{primaryButton.text}
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={`absolute bg-blue-300 ${
comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
} z-10 h-2.5 w-2.5 animate-ping rounded-full`}
/>
<div
className={`absolute bg-blue-400/40 ${
comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
} h-1.5 w-1.5 rounded-full`}
/>
</Button>
)}
{comicBox &&
isHovered &&
(comicBox.direction === "right" ? (
<div
className={`absolute left-1/2 top-0 flex max-w-sm ${
comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
} pb-5`}
>
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
</div>
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
) : (
<div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
</div>
</div>
</div>
) : (
<div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
</div>
</div>
))}
))}
</div>
</div>
</div>
</div>

11
web/components/instance/email-form.tsx
View file

@ -67,7 +67,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
return (
<>
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
<div className="flex flex-col gap-1">
<h4 className="text-sm">Host</h4>
<Controller
@ -110,7 +110,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
/>
</div>
</div>
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
<div className="flex flex-col gap-1">
<h4 className="text-sm">Username</h4>
<Controller
@ -170,7 +170,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
</div>
</div>
</div>
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
<div className="flex flex-col gap-1">
<h4 className="text-sm">From address</h4>
<Controller
@ -191,12 +191,13 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
)}
/>
<p className="text-xs text-custom-text-400">
You will have to verify your email address to being sending emails.
This is the email address your users will see when getting emails from this instance. You will need to
verify this address.
</p>
</div>
</div>
<div className="flex w-full max-w-md flex-col gap-y-8 px-1">
<div className="flex w-full max-w-md flex-col gap-y-10 px-1">
<div className="mr-8 flex items-center gap-10 pt-4">
<div className="grow">
<div className="text-sm font-medium text-custom-text-100">

2
web/components/instance/setup-form/sign-in-form.tsx
View file

@ -90,7 +90,7 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
type="email"
value={value}
onChange={onChange}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
View file

@ -22,7 +22,7 @@ const Inputs = (props: any) => {
}, [setFocus]);
return (
<div>
<div className="w-full">
<h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetail?.identifier ?? "..."}</h4>
<input
autoComplete="off"

2
web/components/issues/modal.tsx
View file

@ -187,7 +187,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
*/
const onDiscardClose = () => {
if (formDirtyState !== null) {
if (formDirtyState !== null && formDirtyState.name.trim() !== "") {
setShowConfirmDiscard(true);
} else {
handleClose();

20
web/components/onboarding/invite-members.tsx
View file

@ -70,16 +70,16 @@ const workspaceService = new WorkspaceService();
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const placeholderEmails = [
"charlie.taylor@frstflit.com",
"octave.chanute@frstflit.com",
"george.spratt@frstflit.com",
"frank.coffyn@frstflit.com",
"amos.root@frstflit.com",
"edward.deeds@frstflit.com",
"charles.m.manly@frstflit.com",
"glenn.curtiss@frstflit.com",
"thomas.selfridge@frstflit.com",
"albert.zahm@frstflit.com",
"charlie.taylor@frstflt.com",
"octave.chanute@frstflt.com",
"george.spratt@frstflt.com",
"frank.coffyn@frstflt.com",
"amos.root@frstflt.com",
"edward.deeds@frstflt.com",
"charles.m.manly@frstflt.com",
"glenn.curtiss@frstflt.com",
"thomas.selfridge@frstflt.com",
"albert.zahm@frstflt.com",
];
const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
const {

8
web/components/profile/sidebar.tsx
View file

@ -89,8 +89,8 @@ export const ProfileSidebar = () => {
className="h-full w-full rounded object-cover"
/>
) : (
<div className="flex h-[52px] w-[52px] items-center justify-center rounded bg-custom-background-90 text-custom-text-100">
{userProjectsData.user_data.display_name?.[0]}
<div className="flex h-[52px] w-[52px] items-center justify-center rounded bg-custom-background-90 text-custom-text-100 capitalize">
{userProjectsData.user_data.first_name?.[0]}
</div>
)}
</div>
@ -149,8 +149,8 @@ export const ProfileSidebar = () => {
completedIssuePercentage <= 35
? "bg-red-500/10 text-red-500"
: completedIssuePercentage <= 70
? "bg-yellow-500/10 text-yellow-500"
: "bg-green-500/10 text-green-500"
? "bg-yellow-500/10 text-yellow-500"
: "bg-green-500/10 text-green-500"
}`}
>
{completedIssuePercentage}%

7
web/components/project/create-project-modal.tsx
View file

@ -182,7 +182,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
setValue(
"identifier",
e.target.value
.replace(/[^a-zA-Z0-9]/g, "")
.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "")
.toUpperCase()
.substring(0, 5)
);
@ -191,7 +191,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
const { value } = e.target;
const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
const alphanumericValue = value.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "");
setIsChangeInIdentifierRequired(false);
onChange(alphanumericValue.toUpperCase());
};
@ -301,8 +301,9 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
name="identifier"
rules={{
required: "Identifier is required",
// allow only alphanumeric & non-latin characters
validate: (value) =>
/^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
/^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
minLength: {
value: 1,
message: "Identifier must at least be of 1 character",

8
web/components/workspace/send-workspace-invitation-modal.tsx
View file

@ -68,6 +68,12 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
append({ email: "", role: 15 });
};
const onSubmitForm = async (data: FormValues) => {
await onSubmit(data)?.then(() => {
reset(defaultValues);
});
};
useEffect(() => {
if (fields.length === 0) append([{ email: "", role: 15 }]);
}, [fields, append]);
@ -100,7 +106,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
>
<Dialog.Panel className="relative translate-y-0 transform rounded-lg bg-custom-background-100 p-5 text-left opacity-100 shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl sm:scale-100">
<form
onSubmit={handleSubmit(onSubmit)}
onSubmit={handleSubmit(onSubmitForm)}
onKeyDown={(e) => {
if (e.code === "Enter") e.preventDefault();
}}

2
web/pages/_app.tsx
View file

@ -3,8 +3,6 @@ import Head from "next/head";
import { AppProps } from "next/app";
// styles
import "styles/globals.css";
import "styles/editor.css";
import "styles/table.css";
import "styles/command-pallette.css";
import "styles/nprogress.css";
import "styles/react-datepicker.css";

2
web/pages/accounts/password.tsx
View file

@ -108,7 +108,7 @@ const HomePage: NextPageWithLayout = () => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>

333
web/styles/editor.css
View file

@ -1,333 +0,0 @@
.ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: rgb(var(--color-text-400));
pointer-events: none;
height: 0;
}
/* block quotes */
.ProseMirror blockquote p::before,
.ProseMirror blockquote p::after {
display: none;
}
.ProseMirror .is-empty::before {
content: attr(data-placeholder);
float: left;
color: rgb(var(--color-text-400));
pointer-events: none;
height: 0;
}
/* Custom image styles */
.ProseMirror img {
transition: filter 0.1s ease-in-out;
&:hover {
cursor: pointer;
filter: brightness(90%);
}
&.ProseMirror-selectednode {
outline: 3px solid #5abbf7;
filter: brightness(90%);
}
}
.ProseMirror-gapcursor:after {
border-top: 1px solid rgb(var(--color-text-100)) !important;
}
/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
ul[data-type="taskList"] li > label {
margin-right: 0.2rem;
user-select: none;
}
@media screen and (max-width: 768px) {
ul[data-type="taskList"] li > label {
margin-right: 0.5rem;
}
}
ul[data-type="taskList"] li > label input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
background-color: rgb(var(--color-background-100));
margin: 0;
cursor: pointer;
width: 0.8rem;
height: 0.8rem;
position: relative;
border: 1.5px solid rgb(var(--color-text-100));
margin-right: 0.2rem;
margin-top: 0.15rem;
display: grid;
place-content: center;
&:hover {
background-color: rgb(var(--color-background-80));
}
&:active {
background-color: rgb(var(--color-background-90));
}
&::before {
content: "";
width: 0.5em;
height: 0.5em;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em;
transform-origin: center;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
&:checked::before {
transform: scale(1);
}
}
ul[data-type="taskList"] li[data-checked="true"] > div > p {
color: rgb(var(--color-text-200));
text-decoration: line-through;
text-decoration-thickness: 2px;
}
/* Overwrite tippy-box original max-width */
.tippy-box {
max-width: 400px !important;
}
.ProseMirror {
position: relative;
word-wrap: break-word;
white-space: pre-wrap;
-moz-tab-size: 4;
tab-size: 4;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
outline: none;
cursor: text;
line-height: 1.2;
font-family: inherit;
font-size: 14px;
color: inherit;
-moz-box-sizing: border-box;
box-sizing: border-box;
appearance: textfield;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
.fadeIn {
opacity: 1;
transition: opacity 0.3s ease-in;
}
.fadeOut {
opacity: 0;
transition: opacity 0.2s ease-out;
}
.img-placeholder {
position: relative;
width: 35%;
&:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 45%;
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid rgba(var(--color-text-200));
border-top-color: rgba(var(--color-text-800));
animation: spinning 0.6s linear infinite;
}
}
@keyframes spinning {
to {
transform: rotate(360deg);
}
}
#editor-container {
table {
border-collapse: collapse;
table-layout: fixed;
margin: 0;
border: 1px solid rgb(var(--color-border-200));
width: 100%;
td,
th {
min-width: 1em;
border: 1px solid rgb(var(--color-border-200));
padding: 10px 15px;
vertical-align: top;
box-sizing: border-box;
position: relative;
transition: background-color 0.3s ease;
> * {
margin-bottom: 0;
}
}
th {
font-weight: bold;
text-align: left;
background-color: rgb(var(--color-primary-100));
}
td:hover {
background-color: rgba(var(--color-primary-300), 0.1);
}
.selectedCell:after {
z-index: 2;
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(var(--color-primary-300), 0.1);
pointer-events: none;
}
.column-resize-handle {
position: absolute;
right: -2px;
top: 0;
bottom: -2px;
width: 2px;
background-color: rgb(var(--color-primary-400));
pointer-events: none;
}
}
}
.tableWrapper {
overflow-x: auto;
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
.ProseMirror table * p {
padding: 0px 1px;
margin: 6px 2px;
}
.ProseMirror table * .is-empty::before {
opacity: 0;
}
.ProseMirror pre {
background: rgba(var(--color-background-80));
border-radius: 0.5rem;
color: rgba(var(--color-text-100));
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
}
.ProseMirror pre code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
/* .ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-image):not(pre) { */
/* outline: none !important; */
/* border-radius: 0.2rem; */
/* background-color: rgb(var(--color-background-90)); */
/* border: 1px solid #5abbf7; */
/* padding: 4px 2px 4px 2px; */
/* transition: background-color 0.2s; */
/* box-shadow: none; */
/* } */
.drag-handle {
position: fixed;
opacity: 1;
transition: opacity ease-in 0.2s;
height: 18px;
width: 15px;
display: grid;
place-items: center;
z-index: 10;
cursor: grab;
border-radius: 2px;
background-color: rgb(var(--color-background-90));
}
.drag-handle:hover {
background-color: rgb(var(--color-background-80));
transition: background-color 0.2s;
}
.drag-handle.hidden {
opacity: 0;
pointer-events: none;
}
@media screen and (max-width: 600px) {
.drag-handle {
display: none;
pointer-events: none;
}
}
.drag-handle-container {
height: 15px;
width: 15px;
cursor: grab;
display: grid;
place-items: center;
}
.drag-handle-dots {
height: 100%;
width: 12px;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.drag-handle-dot {
height: 2.75px;
width: 3px;
background-color: rgba(var(--color-text-200));
border-radius: 50%;
}
div[data-type="horizontalRule"] {
line-height: 0;
padding: 0.25rem 0;
margin-top: 0;
margin-bottom: 0;
& > div {
border-bottom: 1px solid rgb(var(--color-text-100));
}
}
/* image resizer */
.moveable-control-box {
z-index: 10 !important;
}

206
web/styles/table.css
View file

@ -1,206 +0,0 @@
.tableWrapper {
overflow-x: auto;
padding: 2px;
width: fit-content;
max-width: 100%;
}
.tableWrapper table {
border-collapse: collapse;
table-layout: fixed;
margin: 0;
margin-bottom: 3rem;
border: 1px solid rgba(var(--color-border-200));
width: 100%;
}
.tableWrapper table td,
.tableWrapper table th {
min-width: 1em;
border: 1px solid rgba(var(--color-border-200));
padding: 10px 15px;
vertical-align: top;
box-sizing: border-box;
position: relative;
transition: background-color 0.3s ease;
> * {
margin-bottom: 0;
}
}
.tableWrapper table td > *,
.tableWrapper table th > * {
margin: 0 !important;
padding: 0.25rem 0 !important;
}
.tableWrapper table td.has-focus,
.tableWrapper table th.has-focus {
box-shadow: rgba(var(--color-primary-300), 0.1) 0px 0px 0px 2px inset !important;
}
.tableWrapper table th {
font-weight: bold;
text-align: left;
background-color: rgba(var(--color-primary-100));
}
.tableWrapper table th * {
font-weight: 600;
}
.tableWrapper table .selectedCell:after {
z-index: 2;
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(var(--color-primary-300), 0.1);
pointer-events: none;
}
.tableWrapper table .column-resize-handle {
position: absolute;
right: -2px;
top: 0;
bottom: -2px;
width: 4px;
z-index: 99;
background-color: rgba(var(--color-primary-400));
pointer-events: none;
}
.tableWrapper .tableControls {
position: absolute;
}
.tableWrapper .tableControls .columnsControl,
.tableWrapper .tableControls .rowsControl {
transition: opacity ease-in 100ms;
position: absolute;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
}
.tableWrapper .tableControls .columnsControl {
height: 20px;
transform: translateY(-50%);
}
.tableWrapper .tableControls .columnsControl .columnsControlDiv {
color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
width: 30px;
height: 15px;
}
.tableWrapper .tableControls .rowsControl {
width: 20px;
transform: translateX(-50%);
}
.tableWrapper .tableControls .rowsControl .rowsControlDiv {
color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
height: 30px;
width: 15px;
}
.tableWrapper .tableControls .rowsControlDiv {
background-color: rgba(var(--color-primary-100));
border: 1px solid rgba(var(--color-border-200));
border-radius: 2px;
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: center;
transition: transform ease-out 100ms, background-color ease-out 100ms;
outline: none;
box-shadow: #000 0px 2px 4px;
cursor: pointer;
}
.tableWrapper .tableControls .columnsControlDiv {
background-color: rgba(var(--color-primary-100));
border: 1px solid rgba(var(--color-border-200));
border-radius: 2px;
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: center;
transition: transform ease-out 100ms, background-color ease-out 100ms;
outline: none;
box-shadow: #000 0px 2px 4px;
cursor: pointer;
}
.tableWrapper .tableControls .tableToolbox,
.tableWrapper .tableControls .tableColorPickerToolbox {
border: 1px solid rgba(var(--color-border-300));
background-color: rgba(var(--color-background-100));
padding: 0.25rem;
display: flex;
flex-direction: column;
width: 200px;
gap: 0.25rem;
}
.tableWrapper .tableControls .tableToolbox .toolboxItem,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
background-color: rgba(var(--color-background-100));
display: flex;
align-items: center;
gap: 0.5rem;
border: none;
padding: 0.1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
background-color: rgba(var(--color-background-100), 0.5);
}
.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
border: 1px solid rgba(var(--color-border-300));
border-radius: 3px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
}
.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer svg,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer svg,
.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer svg,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer svg {
width: 2rem;
height: 2rem;
}
.tableToolbox {
background-color: rgba(var(--color-background-100));
}
.tableWrapper .tableControls .tableToolbox .toolboxItem .label,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
font-size: 0.85rem;
color: rgba(var(--color-text-300));
}
.resize-cursor .tableWrapper .tableControls .rowsControl,
.tableWrapper.controls--disabled .tableControls .rowsControl,
.resize-cursor .tableWrapper .tableControls .columnsControl,
.tableWrapper.controls--disabled .tableControls .columnsControl {
opacity: 0;
pointer-events: none;
}