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

style: module ui revamp (#2548)

Browse source 
* chore: module constant and helper function added

* style: module card ui revamp

* chore: custom media query added

* chore: circular progress indicator added

* chore: module card item ui improvement

* chore: module list view added

* chore: module sidebar added in list and card view

* chore: module list and card ui improvement

* chore: module sidebar select, avatar and link list component improvement

* chore: sidebar improvement and refactor

* style: module sidebar revamp

* style: module sidebar ui improvement

* chore: module sidebar lead and member select improvement

* style: module sidebar progress section empty state added

* chore: module card issue count validation added

* style: module card and list item ui improvement
This commit is contained in:
Anmol Singh Bhatia 2023-10-27 18:45:10 +05:30 • committed by GitHub
parent 080b5a29ae
commit fc82d6fc23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 1159 additions and 623 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View file

@ -27,7 +27,7 @@ const ModuleIssuesPage: NextPage = () => {
const { module: moduleStore } = useMobxStore();
const { storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
const { error } = useSWR(
@ -60,6 +60,10 @@ const ModuleIssuesPage: NextPage = () => {
// setModuleIssuesListModal(true);
// };
const toggleSidebar = () => {
setValue(`${!isSidebarCollapsed}`);
};
return (
<>
<AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
@ -82,10 +86,20 @@ const ModuleIssuesPage: NextPage = () => {
/>
) : (
<div className="flex h-full w-full">
<div className={`h-full w-full ${isSidebarCollapsed ? "" : "mr-[24rem]"} duration-300`}>
<div className="h-full w-full">
<ModuleLayoutRoot />
</div>
{moduleId && <ModuleDetailsSidebar isOpen={!isSidebarCollapsed} moduleId={moduleId.toString()} />}
{moduleId && !isSidebarCollapsed && (
<div
className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
style={{
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
}}
>
<ModuleDetailsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
</div>
)}
</div>
)}
</AppLayout>