Skip to content

dev: profile page, issue details page design #3

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

Merged
vamsi merged 3 commits into from
Nov 24, 2022
Merged

dev: profile page, issue details page design #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dbf2a13
dev: profile page, issue details page design
aaryan610 Nov 24, 2022
8c7885c
fix: Merge conflicts resolved
aaryan610 Nov 24, 2022
e5e1b08
fix: resolved merge conflicts
aaryan610 Nov 24, 2022
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
6 changes: 5 additions & 1 deletion components/project/issues/BoardView/SingleBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ type Props = {
>;
bgColor?: string;
stateId?: string;
createdBy?: string;
};

const SingleBoard: React.FC<Props> = ({
Expand All @@ -48,6 +49,7 @@ const SingleBoard: React.FC<Props> = ({
setPreloadedData,
bgColor = "#0f2b16",
stateId,
createdBy,
}) => {
// Collapse/Expand
const [show, setState] = useState<any>(true);
Expand Down Expand Up @@ -118,6 +120,8 @@ const SingleBoard: React.FC<Props> = ({
>
{groupTitle === null || groupTitle === "null"
? "None"
: createdBy
? createdBy
: addSpaceIfCamelCase(groupTitle)}
</h2>
<span className="text-gray-500 text-sm ml-0.5">
Expand Down Expand Up @@ -280,7 +284,7 @@ const SingleBoard: React.FC<Props> = ({
</div>
) : (
<div
className={`h-5 w-5 bg-gray-500 text-white border-2 border-white grid place-items-center rounded-full`}
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
>
{assignee.first_name.charAt(0)}
</div>
Expand Down
15 changes: 11 additions & 4 deletions components/project/issues/BoardView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,20 @@ import SingleBoard from "components/project/issues/BoardView/SingleBoard";
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
// ui
import { Spinner, Button } from "ui";
import { Spinner } from "ui";
// types
import type { IState, IIssue, Properties, NestedKeyOf } from "types";
import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";

type Props = {
properties: Properties;
selectedGroup: NestedKeyOf<IIssue> | null;
groupedByIssues: {
[key: string]: IIssue[];
};
members: ProjectMember[] | undefined;
};

const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues }) => {
const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues, members }) => {
const [isOpen, setIsOpen] = useState(false);

const [isIssueOpen, setIsIssueOpen] = useState(false);
Expand Down Expand Up @@ -164,7 +165,7 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
/>
{groupedByIssues ? (
groupedByIssues ? (
<div className="h-full w-full">
<div className="w-full" style={{ height: "calc(82vh - 1.5rem)" }}>
<DragDropContext onDragEnd={handleOnDragEnd}>
<div className="h-full w-full overflow-hidden">
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
Expand All @@ -180,6 +181,12 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
key={singleGroup}
selectedGroup={selectedGroup}
groupTitle={singleGroup}
createdBy={
members
? members?.find((m) => m.member.id === singleGroup)?.member
.first_name
: undefined
}
groupedByIssues={groupedByIssues}
index={index}
setIsIssueOpen={setIsIssueOpen}
Expand Down
12 changes: 1 addition & 11 deletions components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{sprints?.map((sprint) => (
<Listbox.Option
Expand All @@ -63,16 +63,6 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
<span className={`block ${selected && "font-semibold"}`}>
{sprint.name}
</span>

{selected && (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
)}
</>
)}
</Listbox.Option>
Expand Down
14 changes: 1 addition & 13 deletions components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const SelectLabels: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{issueLabels?.map((label) => (
<Listbox.Option
Expand All @@ -121,18 +121,6 @@ const SelectLabels: React.FC<Props> = ({ control }) => {
>
{label.name}
</span>

{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active || (value ?? []).some((i) => i === label.id)
? "text-white"
: "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
Expand Down
14 changes: 2 additions & 12 deletions components/project/issues/CreateUpdateIssueModal/SelectPriority.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const SelectPriority: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 w-full bg-white shadow-lg max-h-28 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-xs">
<Listbox.Options className="absolute z-10 mt-1 w-full w-[5rem] bg-white shadow-lg max-h-28 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-xs">
<div className="p-1">
{PRIORITIES.map((priority) => (
<Listbox.Option
Expand All @@ -55,21 +55,11 @@ const SelectPriority: React.FC<Props> = ({ control }) => {
<>
<span
className={`block capitalize ${
selected ? "font-semibold" : "font-normal"
selected ? "font-medium" : "font-normal"
}`}
>
{priority}
</span>

{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
Expand Down
2 changes: 1 addition & 1 deletion components/project/issues/CreateUpdateIssueModal/SelectProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const SelectProject: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{projects ? (
projects.length > 0 ? (
Expand Down
4 changes: 2 additions & 2 deletions components/project/issues/CreateUpdateIssueModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
setToastAlert({
title: "Success",
type: "success",
message: "Issue added to sprint successfully",
message: "Issue added to cycle successfully",
});
})
.catch((err) => {
Expand Down Expand Up @@ -394,7 +394,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
register={register}
/>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center flex-wrap gap-2">
<SelectState control={control} setIsOpen={setIsStateModalOpen} />
<SelectCycles control={control} setIsOpen={setIsCycleModalOpen} />
<SelectPriority control={control} />
Expand Down
Loading