github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: bug fixes and ui improvement (#2674)

Browse Source 
* chore: peekoverview edit permission updated

* chore: tab index added in create project modal

* chore: project card improvement

* style: avatar component improvement

* chore: create issue modal improvement

* style: global style sidebar border variable name fix
This commit is contained in:
Anmol Singh Bhatia 2023-11-06 21:08:01 +05:30 committed by GitHub
parent b372ccfdb3
commit d8c96536f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/avatar/avatar-group.tsx
View File

@ -57,7 +57,10 @@ export const AvatarGroup: React.FC<Props> = (props) => {
return ( return (
<div className={`flex ${sizeInfo.spacing}`}> <div className={`flex ${sizeInfo.spacing}`}>
{avatarsWithUpdatedProps.map((avatar, index) => ( {avatarsWithUpdatedProps.map((avatar, index) => (
<div key={index} className="ring-1 ring-custom-border-200 rounded-full"> <div
key={index}
className="ring-1 ring-custom-background-100 rounded-full"
>
{avatar} {avatar}
</div> </div>
))} ))}
@ -69,7 +72,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
<div <div
className={`${ className={`${
!isAValidNumber(size) ? sizeInfo.avatarSize : "" !isAValidNumber(size) ? sizeInfo.avatarSize : ""
} ring-1 ring-custom-border-200 bg-custom-primary-500 text-white rounded-full grid place-items-center text-[9px]`} } ring-1 ring-custom-background-100 bg-custom-primary-10 text-custom-primary-100 rounded-full grid place-items-center text-[9px]`}
style={ style={
isAValidNumber(size) isAValidNumber(size)
? { ? {

6
space/styles/globals.css
View File

@ -199,9 +199,9 @@
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */ --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */ --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */ --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
} }
} }

2
web/components/issues/issue-peek-overview/issue-detail.tsx
View File

@ -32,7 +32,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
// store // store
const { user: userStore } = useMobxStore(); const { user: userStore } = useMobxStore();
const { currentProjectRole } = userStore; const { currentProjectRole } = userStore;
const isAllowed = [5, 10].includes(currentProjectRole || 0); const isAllowed = [15, 20].includes(currentProjectRole || 0);
// states // states
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
const [characterLimit, setCharacterLimit] = useState(false); const [characterLimit, setCharacterLimit] = useState(false);

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

@ -324,7 +324,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-3xl"> <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-4xl">
<IssueForm <IssueForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
initialData={data ?? prePopulateData} initialData={data ?? prePopulateData}

2
web/components/project/card.tsx
View File

@ -211,7 +211,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
<div className="flex items-center"> <div className="flex items-center">
<Button <Button
variant="link-primary" variant="link-primary"
className="!p-0" className="!p-0 font-semibold"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

11
web/components/project/create-project-modal.tsx
View File

@ -261,6 +261,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
name="name" name="name"
type="text" type="text"
value={value} value={value}
tabIndex={1}
onChange={handleNameChange(onChange)} onChange={handleNameChange(onChange)}
hasError={Boolean(errors.name)} hasError={Boolean(errors.name)}
placeholder="Project Title" placeholder="Project Title"
@ -293,6 +294,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
name="identifier" name="identifier"
type="text" type="text"
value={value} value={value}
tabIndex={2}
onChange={handleIdentifierChange(onChange)} onChange={handleIdentifierChange(onChange)}
hasError={Boolean(errors.identifier)} hasError={Boolean(errors.identifier)}
placeholder="Identifier" placeholder="Identifier"
@ -311,6 +313,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
id="description" id="description"
name="description" name="description"
value={value} value={value}
tabIndex={3}
placeholder="Description..." placeholder="Description..."
onChange={onChange} onChange={onChange}
className="text-sm !h-24" className="text-sm !h-24"
@ -322,7 +325,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
</div> </div>
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<div className="flex-shrink-0"> <div className="flex-shrink-0" tabIndex={4}>
<Controller <Controller
name="network" name="network"
control={control} control={control}
@ -359,7 +362,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
)} )}
/> />
</div> </div>
<div className="flex-shrink-0"> <div className="flex-shrink-0" tabIndex={5}>
<Controller <Controller
name="project_lead_member" name="project_lead_member"
control={control} control={control}
@ -377,10 +380,10 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
</div> </div>
<div className="flex justify-end gap-2 pt-5"> <div className="flex justify-end gap-2 pt-5">
<Button variant="neutral-primary" onClick={handleClose}> <Button variant="neutral-primary" onClick={handleClose} tabIndex={6}>
Cancel Cancel
</Button> </Button>
<Button variant="primary" type="submit" size="sm" loading={isSubmitting}> <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
{isSubmitting ? "Creating..." : "Create Project"} {isSubmitting ? "Creating..." : "Create Project"}
</Button> </Button>
</div> </div>

6
web/styles/globals.css
View File

@ -211,9 +211,9 @@
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */ --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */ --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */ --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
} }
} }