|
|
@@ -9,6 +9,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
|
|
import dynamic from 'next/dynamic';
|
|
|
import Head from 'next/head';
|
|
|
|
|
|
+import { useCurrentGrowiLayoutFluidClassName } from '~/client/services/layout';
|
|
|
import CountBadge from '~/components/Common/CountBadge';
|
|
|
import PageListIcon from '~/components/Icons/PageListIcon';
|
|
|
import { ShareLinkLayout } from '~/components/Layout/ShareLinkLayout';
|
|
|
@@ -64,6 +65,8 @@ const SharedPage: NextPage<Props> = (props: Props) => {
|
|
|
const { open: openDescendantPageListModal } = useDescendantsPageListModal();
|
|
|
const { t } = useTranslation();
|
|
|
|
|
|
+ const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
|
|
|
+
|
|
|
const isNotFound = props.shareLink == null || props.shareLink.relatedPage == null || props.shareLink.relatedPage.isEmpty;
|
|
|
const isShowSharedPage = !props.disableLinkSharing && !isNotFound && !props.isExpired;
|
|
|
const shareLink = props.shareLink;
|
|
|
@@ -79,7 +82,7 @@ const SharedPage: NextPage<Props> = (props: Props) => {
|
|
|
<DrawioViewerScript />
|
|
|
|
|
|
<ShareLinkLayout>
|
|
|
- <div className="h-100 d-flex flex-column justify-content-between">
|
|
|
+ <div className={`dynamic-layout-root ${growiLayoutFluidClass} h-100 d-flex flex-column justify-content-between`}>
|
|
|
<header className="py-0 position-relative">
|
|
|
{isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}
|
|
|
</header>
|
|
|
@@ -87,73 +90,71 @@ const SharedPage: NextPage<Props> = (props: Props) => {
|
|
|
<div id="grw-fav-sticky-trigger" className="sticky-top"></div>
|
|
|
|
|
|
<div className="flex-grow-1">
|
|
|
- <div id="content-main" className="content-main">
|
|
|
- <div className="grw-container-convertible">
|
|
|
- { props.disableLinkSharing && (
|
|
|
- <div className="mt-4">
|
|
|
- <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- { (isNotFound && !props.disableLinkSharing) && (
|
|
|
- <div className="container-lg">
|
|
|
- <h2 className="text-muted mt-4">
|
|
|
- <i className="icon-ban" aria-hidden="true" />
|
|
|
- <span> Page is not found</span>
|
|
|
- </h2>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
|
|
|
- <div className="container-lg">
|
|
|
- <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
|
|
|
- <h2 className="text-muted mt-4">
|
|
|
- <i className="icon-ban" aria-hidden="true" />
|
|
|
- <span> Page is expired</span>
|
|
|
- </h2>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- {(isShowSharedPage && shareLink != null) && (
|
|
|
- <>
|
|
|
- <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
|
|
|
- <div className="d-flex flex-column flex-lg-row-reverse">
|
|
|
-
|
|
|
- <div className="grw-side-contents-container">
|
|
|
- <div className="grw-side-contents-sticky-container">
|
|
|
-
|
|
|
- {/* Page list */}
|
|
|
- <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
|
|
|
- { shareLink.relatedPage.path != null && (
|
|
|
- <button
|
|
|
- type="button"
|
|
|
- className="btn btn-block btn-outline-secondary grw-btn-page-accessories
|
|
|
- rounded-pill d-flex justify-content-between align-items-center"
|
|
|
- onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
|
|
|
- data-testid="pageListButton"
|
|
|
- >
|
|
|
- <div className="grw-page-accessories-control-icon">
|
|
|
- <PageListIcon />
|
|
|
- </div>
|
|
|
- {t('page_list')}
|
|
|
- <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
|
|
|
- </button>
|
|
|
- ) }
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="d-none d-lg-block">
|
|
|
- <TableOfContents />
|
|
|
- </div>
|
|
|
+ <div id="content-main" className="content-main grw-container-convertible">
|
|
|
+ { props.disableLinkSharing && (
|
|
|
+ <div className="mt-4">
|
|
|
+ <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ { (isNotFound && !props.disableLinkSharing) && (
|
|
|
+ <div className="container-lg">
|
|
|
+ <h2 className="text-muted mt-4">
|
|
|
+ <i className="icon-ban" aria-hidden="true" />
|
|
|
+ <span> Page is not found</span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
|
|
|
+ <div className="container-lg">
|
|
|
+ <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
|
|
|
+ <h2 className="text-muted mt-4">
|
|
|
+ <i className="icon-ban" aria-hidden="true" />
|
|
|
+ <span> Page is expired</span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {(isShowSharedPage && shareLink != null) && (
|
|
|
+ <>
|
|
|
+ <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
|
|
|
+ <div className="d-flex flex-column flex-lg-row-reverse">
|
|
|
+
|
|
|
+ <div className="grw-side-contents-container">
|
|
|
+ <div className="grw-side-contents-sticky-container">
|
|
|
+
|
|
|
+ {/* Page list */}
|
|
|
+ <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
|
|
|
+ { shareLink.relatedPage.path != null && (
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ className="btn btn-block btn-outline-secondary grw-btn-page-accessories
|
|
|
+ rounded-pill d-flex justify-content-between align-items-center"
|
|
|
+ onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
|
|
|
+ data-testid="pageListButton"
|
|
|
+ >
|
|
|
+ <div className="grw-page-accessories-control-icon">
|
|
|
+ <PageListIcon />
|
|
|
+ </div>
|
|
|
+ {t('page_list')}
|
|
|
+ <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
|
|
|
+ </button>
|
|
|
+ ) }
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div className="flex-grow-1 flex-basis-0 mw-0">
|
|
|
- <Page />
|
|
|
+ <div className="d-none d-lg-block">
|
|
|
+ <TableOfContents />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </>
|
|
|
- )}
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div className="flex-grow-1 flex-basis-0 mw-0">
|
|
|
+ <Page />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
Taichi Masuyama