صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
wiki
/
weseek__growi
mirrorاز https://github.com/weseek/growi
2
0
انشعاب 0
پرونده‌ها مشکلات 0 ویکی
فهرست منبع

Merge pull request #7353 from weseek/imprv/classname-for-fluid-layout

imprv: classname for fluid layout
Yuki Takei 3 سال پیش
والد
01c829df30 cd169066b2
کامیت
23d3b7f844
7فایلهای تغییر یافته به همراه22 افزوده شده و 39 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 5 11
      packages/app/src/client/services/layout.ts
  2. 1 5
      packages/app/src/components/PageEditor/Preview.tsx
  3. 1 1
      packages/app/src/pages/[[...path]].page.tsx
  4. 1 1
      packages/app/src/pages/share/[[...path]].page.tsx
  5. 1 3
      packages/app/src/pages/trash.page.tsx
  6. 10 13
      packages/app/src/styles/_editor.scss
  7. 3 5
      packages/app/src/styles/theme/_apply-colors.scss

+ 5 - 11
packages/app/src/client/services/layout.ts
مشاهده فایل 

@@ -1,3 +1,4 @@
 
+import type { IPage } from '~/interfaces/page';
 
 import { useIsContainerFluid } from '~/stores/context';
 
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import { useEditorMode } from '~/stores/ui';
 
@@ -5,25 +6,18 @@ import { useEditorMode } from '~/stores/ui';
 
 export const useEditorModeClassName = (): string => {
 
   const { getClassNamesByEditorMode } = useEditorMode();
 
 
-  // TODO: Enable `editing-sidebar` class somehow
 
-  // https://redmine.weseek.co.jp/issues/111527
 
-  // const classNames: string[] = [];
 
-  // if (currentPage != null) {
 
-  //   const isSidebar = currentPage.path === '/Sidebar';
 
-  //   classNames.push(...getClassNamesByEditorMode(/* isSidebar */));
 
-  // }
 
-
 
   return `${getClassNamesByEditorMode().join(' ') ?? ''}`;
 
 };
 
 
-export const useCurrentGrowiLayoutFluidClassName = (): string => {
 
+export const useCurrentGrowiLayoutFluidClassName = (initialPage?: IPage): string => {
 
   const { data: currentPage } = useSWRxCurrentPage();
 
 
   const { data: dataIsContainerFluid } = useIsContainerFluid();
 
 
-  const isContainerFluidEachPage = currentPage == null || !('expandContentWidth' in currentPage)
 
+  const page = currentPage ?? initialPage;
 
+  const isContainerFluidEachPage = page == null || !('expandContentWidth' in page)
 
     ? null
 
-    : currentPage.expandContentWidth;
 
+    : page.expandContentWidth;
 
   const isContainerFluidDefault = dataIsContainerFluid;
 
   const isContainerFluid = isContainerFluidEachPage ?? isContainerFluidDefault;

+ 1 - 5
packages/app/src/components/PageEditor/Preview.tsx
مشاهده فایل 

@@ -3,7 +3,6 @@ import React, {
 
 } from 'react';
 
 
 import { RendererOptions } from '~/services/renderer/renderer';
 
-import { useEditorSettings } from '~/stores/editor';
 
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
 
@@ -22,12 +21,9 @@ const Preview = React.forwardRef((props: Props, ref: RefObject<HTMLDivElement>):
 
     markdown, pagePath,
 
   } = props;
 
 
-  const { data: editorSettings } = useEditorSettings();
 
-
 
-
 
   return (
 
     <div
 
-      className="page-editor-preview-body"
 
+      className={`page-editor-preview-body ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''}`}
 
       ref={ref}
 
       onScroll={(event: SyntheticEvent<HTMLDivElement>) => {
 
         if (props.onScroll != null) {

+ 1 - 1
packages/app/src/pages/[[...path]].page.tsx
مشاهده فایل 

@@ -268,7 +268,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
 
   useSetupGlobalSocket();
 
   useSetupGlobalSocketForPage(pageId);
 
 
-  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
 
+  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName(pageWithMeta?.data);
 
 
   const shouldRenderPutbackPageModal = pageWithMeta != null
 
     ? _isTrashPage(pageWithMeta.data.path)

+ 1 - 1
packages/app/src/pages/share/[[...path]].page.tsx
مشاهده فایل 

@@ -93,7 +93,7 @@ const SharedPage: NextPageWithLayout<Props> = (props: Props) => {
 
   useIsContainerFluid(props.isContainerFluid);
 
 
 
-  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
 
+  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName(props.shareLinkRelatedPage);
 
 
   const pagePath = props.shareLinkRelatedPage?.path ?? '';

+ 1 - 3
packages/app/src/pages/trash.page.tsx
مشاهده فایل 

@@ -72,8 +72,6 @@ const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
 
   const { data: isDrawerMode } = useDrawerMode();
 
   const { data: isGuestUser } = useIsGuestUser();
 
 
-  const growiLayoutFluidClass = useCurrentGrowiLayoutFluidClassName();
 
-
 
   const title = generateCustomTitleForPage(props, '/trash');
 
 
   return (
 
@@ -81,7 +79,7 @@ const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
 
       <Head>
 
         <title>{title}</title>
 
       </Head>
 
-      <div className={`dynamic-layout-root ${growiLayoutFluidClass}`}>
 
+      <div className="dynamic-layout-root">
 
         <header className="py-0 position-relative">
 
           <GrowiSubNavigation
 
             pagePath="/trash"

+ 10 - 13
packages/app/src/styles/_editor.scss
مشاهده فایل 

@@ -219,6 +219,16 @@
 
       padding: 18px 15px 0;
 
       overflow-y: scroll;
 
     }
 
+    // editing /Sidebar
 
+    .page-editor-preview-body.preview-sidebar {
 
+      width: 320px;
 
+      margin-right: auto;
 
+      margin-left: auto;
 
+
 
+      .wiki {
 
+        @extend %grw-custom-sidebar-content;
 
+      }
 
+    }
 
 
     .grw-editor-configuration-dropdown {
 
       .icon-container {
 
@@ -232,19 +242,6 @@
 
 
   // .builtin-editor .tab-pane#edit
 
 
-  // editing /Sidebar
 
-  &.editing-sidebar {
 
-    .page-editor-preview-body {
 
-      width: 320px;
 
-      margin-right: auto;
 
-      margin-left: auto;
 
-
 
-      .wiki {
 
-        @extend %grw-custom-sidebar-content;
 
-      }
 
-    }
 
-  }
 
-
 
   &.hackmd {
 
     .hackmd-preinit,
 
     #iframe-hackmd-container > iframe {

+ 3 - 5
packages/app/src/styles/theme/_apply-colors.scss
مشاهده فایل 

@@ -518,11 +518,9 @@ ul.pagination {
 
 /*
 
  * Preview for editing /Sidebar
 
  */
 
-body.editing-sidebar {
 
-  .page-editor-preview-body {
 
-    color: var(--color-sidebar-context);
 
-    background-color: var(--bgcolor-sidebar-context);
 
-  }
 
+.page-editor-preview-body.preview-sidebar {
 
+  color: var(--color-sidebar-context);
 
+  background-color: var(--bgcolor-sidebar-context);
 
 }
 
 
 /*