fix: layout height and overflow (#1004)

* fix: kanban height issue * dev: Layout fixes * dev: layout changes * fix: layout overflow settings and fixed header * style: filters padding fixed * fix: hide filters if none are applied --------- Co-authored-by: gurusainath <gurusainath007@gmail.com>
2023-05-05 17:07:29 +05:30 · 2023-05-05 17:07:29 +05:30 · a1de3f581f
commit a1de3f581f
parent 443878994a
41 changed files with 1080 additions and 1035 deletions
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@ -44,7 +44,7 @@ export const AllBoards: React.FC<Props> = ({
  return (
    <>
      {groupedByIssues ? (
-        <div className="horizontal-scroll-enable flex h-[calc(100vh-140px)] gap-x-4">
+        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
          {Object.keys(groupedByIssues).map((singleGroup, index) => {
            const currentState =
              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@ -392,7 +392,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                  <div className="flex items-center gap-1 text-brand-secondary">
-                    <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                    <LinkIcon className="h-3.5 w-3.5" />
                    {issue.link_count}
                  </div>
                </Tooltip>
@ -402,7 +402,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                  <div className="flex items-center gap-1 text-brand-secondary">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
+                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                    {issue.attachment_count}
                  </div>
                </Tooltip>
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@ -229,7 +229,7 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {

  return calendarIssues ? (
    <DragDropContext onDragEnd={onDragEnd}>
-      <div className="-m-2 h-full overflow-y-auto rounded-lg text-brand-secondary">
+      <div className="-m-2 h-full overflow-y-auto rounded-lg p-8 text-brand-secondary">
        <div className="mb-4 flex items-center justify-between">
          <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
            <Popover className="flex h-full items-center justify-start rounded-lg">
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@ -353,7 +353,7 @@ export const IssuesView: React.FC<Props> = ({
          console.log(e);
        });
    },
-    [workspaceSlug, projectId, cycleId, params]
+    [workspaceSlug, projectId, cycleId, params, selectedGroup, setToastAlert]
  );

  const removeIssueFromModule = useCallback(
@ -396,7 +396,7 @@ export const IssuesView: React.FC<Props> = ({
          console.log(e);
        });
    },
-    [workspaceSlug, projectId, moduleId, params]
+    [workspaceSlug, projectId, moduleId, params, selectedGroup, setToastAlert]
  );

  const handleTrashBox = useCallback(
@ -442,39 +442,35 @@ export const IssuesView: React.FC<Props> = ({
        handleClose={() => setTransferIssuesModal(false)}
        isOpen={transferIssuesModal}
      />
-      <>
-        <div
-          className={`flex items-center justify-between gap-2 ${
-            issueView === "list" ? (areFiltersApplied ? "mt-6 px-8" : "") : "-mt-2"
-          }`}
-        >
-          <FilterList filters={filters} setFilters={setFilters} />
-          {areFiltersApplied && (
-            <PrimaryButton
-              onClick={() => {
-                if (viewId) {
-                  setFilters({}, true);
-                  setToastAlert({
-                    title: "View updated",
-                    message: "Your view has been updated",
-                    type: "success",
-                  });
-                } else
-                  setCreateViewModal({
-                    query: filters,
-                  });
-              }}
-              className="flex items-center gap-2 text-sm"
-            >
-              {!viewId && <PlusIcon className="h-4 w-4" />}
-              {viewId ? "Update" : "Save"} view
-            </PrimaryButton>
-          )}
-        </div>
-        {areFiltersApplied && (
-          <div className={`${issueView === "list" ? "mt-4" : "my-4"} border-t border-brand-base`} />
-        )}
-      </>
+      {areFiltersApplied && (
+        <>
+          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
+            <FilterList filters={filters} setFilters={setFilters} />
+            {areFiltersApplied && (
+              <PrimaryButton
+                onClick={() => {
+                  if (viewId) {
+                    setFilters({}, true);
+                    setToastAlert({
+                      title: "View updated",
+                      message: "Your view has been updated",
+                      type: "success",
+                    });
+                  } else
+                    setCreateViewModal({
+                      query: filters,
+                    });
+                }}
+                className="flex items-center gap-2 text-sm"
+              >
+                {!viewId && <PlusIcon className="h-4 w-4" />}
+                {viewId ? "Update" : "Save"} view
+              </PrimaryButton>
+            )}
+          </div>
+          {<div className="mt-3 border-t border-brand-base" />}
+        </>
+      )}

      <DragDropContext onDragEnd={handleOnDragEnd}>
        <StrictModeDroppable droppableId="trashBox">
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@ -314,7 +314,7 @@ export const SingleListIssue: React.FC<Props> = ({
            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
              <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                <div className="flex items-center gap-1 text-brand-secondary">
-                  <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                  <LinkIcon className="h-3.5 w-3.5" />
                  {issue.link_count}
                </div>
              </Tooltip>
@ -324,7 +324,7 @@ export const SingleListIssue: React.FC<Props> = ({
            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
              <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                <div className="flex items-center gap-1 text-brand-secondary">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                  {issue.attachment_count}
                </div>
              </Tooltip>
--- a/apps/app/components/integration/github/select-repository.tsx
+++ b/apps/app/components/integration/github/select-repository.tsx
@ -81,7 +81,7 @@ export const SelectRepository: React.FC<Props> = ({
          {userRepositories && options.length < totalCount && (
            <button
              type="button"
-              className="w-full p-1 text-center text-[0.6rem] text-gray-500 hover:bg-hover-gray"
+              className="w-full p-1 text-center text-[0.6rem] text-brand-secondary hover:bg-brand-surface-2"
              onClick={() => setSize(size + 1)}
              disabled={isValidating}
            >
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@ -82,8 +82,8 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
  const isNotAllowed = false;

  return (
-    <div className="mx-6 border-b border-brand-base last:border-b-0">
-      <div key={issue.id} className="flex items-center justify-between gap-2 py-3">
+    <div className="border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0">
+      <div key={issue.id} className="flex items-center justify-between gap-2">
        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
          <a className="group relative flex items-center gap-2">
            {properties?.key && (
@ -171,7 +171,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
            </Tooltip>
          )}
          {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
              <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                <div className="flex items-center gap-1 text-brand-secondary">
                  <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
@ -181,7 +181,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
            </div>
          )}
          {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
              <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                <div className="flex items-center gap-1 text-brand-secondary">
                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
--- a/apps/app/components/project/index.ts
+++ b/apps/app/components/project/index.ts
@ -1,6 +1,7 @@
 export * from "./create-project-modal";
 export * from "./delete-project-modal";
 export * from "./sidebar-list";
+export * from "./settings-header"
 export * from "./single-integration-card";
 export * from "./single-project-card";
 export * from "./single-sidebar-project";
--- a/apps/app/components/project/settings-header.tsx
+++ b/apps/app/components/project/settings-header.tsx
@ -0,0 +1,13 @@
+import SettingsNavbar from "layouts/settings-navbar";
+
+export const SettingsHeader = () => (
+  <div className="mb-12 space-y-6">
+    <div>
+      <h3 className="text-3xl font-semibold">Project Settings</h3>
+      <p className="mt-1 text-brand-secondary">
+        This information will be displayed to every member of the project.
+      </p>
+    </div>
+    <SettingsNavbar />
+  </div>
+);
--- a/apps/app/components/workspace/index.ts
+++ b/apps/app/components/workspace/index.ts
@ -6,5 +6,6 @@ export * from "./help-section";
 export * from "./issues-list";
 export * from "./issues-pie-chart";
 export * from "./issues-stats";
+export * from "./settings-header";
 export * from "./sidebar-dropdown";
 export * from "./sidebar-menu";
--- a/apps/app/components/workspace/settings-header.tsx
+++ b/apps/app/components/workspace/settings-header.tsx
@ -0,0 +1,13 @@
+import SettingsNavbar from "layouts/settings-navbar";
+
+export const SettingsHeader = () => (
+  <div className="mb-12 space-y-6">
+    <div>
+      <h3 className="text-3xl font-semibold">Workspace Settings</h3>
+      <p className="mt-1 text-brand-secondary">
+        This information will be displayed to every member of the workspace.
+      </p>
+    </div>
+    <SettingsNavbar />
+  </div>
+);