Acasă Explorează Ajutor
Autentificare
wiki
/
weseek__growi
oglindă de https://github.com/weseek/growi
2
0
Bifurcare 0
Fisiere Probleme 0 Wiki
Răsfoiți Sursa

Merge pull request #6447 from weseek/feat/apply-bg-image-fot-themes

feat: Apply background image and navbar image for themes
Yuki Takei 3 ani în urmă
părinte
6f5131c4dd 6a7e91af4b
comite
bc4345aa57
18 a modificat fișierele cu 201 adăugiri și 15 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 1 1
      packages/app/src/components/Layout/AdminLayout.tsx
  2. 15 1
      packages/app/src/components/Layout/RawLayout.tsx
  3. 12 1
      packages/app/src/components/Theme/ThemeAntarctic.module.scss
  4. 9 0
      packages/app/src/components/Theme/ThemeAntarctic.tsx
  5. 12 1
      packages/app/src/components/Theme/ThemeChristmas.module.scss
  6. 9 0
      packages/app/src/components/Theme/ThemeChristmas.tsx
  7. 12 5
      packages/app/src/components/Theme/ThemeHalloween.module.scss
  8. 9 0
      packages/app/src/components/Theme/ThemeHalloween.tsx
  9. 13 2
      packages/app/src/components/Theme/ThemeHufflepuff.module.scss
  10. 13 0
      packages/app/src/components/Theme/ThemeHufflepuff.tsx
  11. 8 1
      packages/app/src/components/Theme/ThemeIsland.module.scss
  12. 9 0
      packages/app/src/components/Theme/ThemeIsland.tsx
  13. 13 1
      packages/app/src/components/Theme/ThemeSpring.module.scss
  14. 9 0
      packages/app/src/components/Theme/ThemeSpring.tsx
  15. 13 1
      packages/app/src/components/Theme/ThemeWood.module.scss
  16. 9 0
      packages/app/src/components/Theme/ThemeWood.tsx
  17. 34 0
      packages/app/src/components/Theme/utils/ThemeImageProvider.tsx
  18. 1 1
      packages/app/src/pages/[[...path]].page.tsx

+ 1 - 1
packages/app/src/components/Layout/AdminLayout.tsx
Vizualizați fișierul 

@@ -33,7 +33,7 @@ const AdminLayout = ({
 
       <div className={`admin-page ${styles['admin-page']}`}>
 
         <GrowiNavbar />
 
 
-        <header className="py-0">
 
+        <header className="py-0 position-relative">
 
           <h1 className="title">{title}</h1>
 
         </header>
 
         <div id="main" className="main">

+ 15 - 1
packages/app/src/components/Layout/RawLayout.tsx
Vizualizați fișierul 

@@ -1,10 +1,14 @@
 
-import React, { ReactNode, useEffect, useState } from 'react';
 
+import React, {
 
+  ReactNode, useCallback, useEffect, useState,
 
+} from 'react';
 
 
 import Head from 'next/head';
 
+import Image from 'next/image';
 
 
 import { useGrowiTheme } from '~/stores/context';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
 
+import { getBackgroundImageSrc } from '../Theme/utils/ThemeImageProvider';
 
 import { ThemeProvider } from '../Theme/utils/ThemeProvider';
 
 
 type Props = {
 
@@ -25,12 +29,19 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
 
   const { resolvedTheme } = useNextThemes();
 
 
   const [colorScheme, setColorScheme] = useState<Themes|undefined>(undefined);
 
+  const [backgroundImageSrc, setBackgroundImageSrc] = useState<string | undefined>(undefined);
 
 
   // set colorScheme in CSR
 
   useEffect(() => {
 
     setColorScheme(resolvedTheme as Themes);
 
   }, [resolvedTheme]);
 
 
+  // set background image
 
+  useEffect(() => {
 
+    const imgSrc = getBackgroundImageSrc(growiTheme, colorScheme);
 
+    setBackgroundImageSrc(imgSrc);
 
+  }, [growiTheme, colorScheme]);
 
+
 
   return (
 
     <>
 
       <Head>
 
@@ -40,6 +51,9 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
 
       </Head>
 
       <ThemeProvider theme={growiTheme}>
 
         <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
 
+          {backgroundImageSrc != null && <div className="grw-bg-image-wrapper">
 
+            <Image className='grw-bg-image' alt='background-image' src={backgroundImageSrc} layout='fill' quality="100" />
 
+          </div>}
 
           {children}
 
         </div>
 
       </ThemeProvider>

+ 12 - 1
packages/app/src/components/Theme/ThemeAntarctic.module.scss
Vizualizați fișierul 

@@ -16,7 +16,6 @@
 
 
 .growi:not(.login-page) {
 
   // add background-image
 
-  #page-wrapper,
 
   .page-editor-preview-container {
 
     background-image: url('/images/themes/antarctic/bg.svg');
 
     background-attachment: fixed;
 
@@ -34,6 +33,18 @@
 
   }
 
 }
 
 
+.theme :global {
 
+  .grw-bg-image-wrapper {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  .grw-bg-image {
 
+    object-fit: cover;
 
+  }
 
+}
 
+
 
 $themecolor: #000080;
 
 $themelight: #f0f8ff;
 
 $accentcolor: #ffd700;

+ 9 - 0
packages/app/src/components/Theme/ThemeAntarctic.tsx
Vizualizați fișierul 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 import styles from './ThemeAntarctic.module.scss';
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/antarctic/bg.svg';
 
+  }
 
+};
 
+
 
 const ThemeAntarctic = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };

+ 12 - 1
packages/app/src/components/Theme/ThemeChristmas.module.scss
Vizualizați fișierul 

@@ -27,7 +27,6 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
 
 
 .growi:not(.login-page) {
 
   // add background-image
 
-  #page-wrapper,
 
   .page-editor-preview-container {
 
     background-image: url('/images/themes/christmas/christmas.jpg');
 
     background-attachment: fixed;
 
@@ -36,6 +35,18 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
 
   }
 
 }
 
 
+.theme :global {
 
+  .grw-bg-image-wrapper {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  .grw-bg-image {
 
+    object-fit: cover;
 
+  }
 
+}
 
+
 
 //== Light Mode
 
 //
 
 .theme :global {

+ 9 - 0
packages/app/src/components/Theme/ThemeChristmas.tsx
Vizualizați fișierul 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 import styles from './ThemeChristmas.module.scss';
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/christmas/christmas.jpg';
 
+  }
 
+};
 
+
 
 const ThemeChristmas = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };

+ 12 - 5
packages/app/src/components/Theme/ThemeHalloween.module.scss
Vizualizați fișierul 

@@ -21,17 +21,24 @@ $light: lighten($secondary, 10%);
 
 // $dark: #;
 
 
 .growi:not(.login-page) {
 
-  #wrapper > .navbar {
 
-    background-image: url(/images/themes/halloween/halloween-navbar.jpg);
 
-  }
 
-
 
   // add background-image
 
-  #page-wrapper,
 
   .page-editor-preview-container {
 
     background-image: url('/images/themes/halloween/halloween.jpg');
 
   }
 
 }
 
 
+.theme :global {
 
+  .grw-bg-image-wrapper {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  .grw-navbar {
 
+    background-image: url('/images/themes/halloween/halloween-navbar.jpg') !important;
 
+  }
 
+}
 
+
 
 //== Light Mode
 
 //
 
 .theme :global {

+ 9 - 0
packages/app/src/components/Theme/ThemeHalloween.tsx
Vizualizați fișierul 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 import styles from './ThemeHalloween.module.scss';
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/halloween/halloween.jpg';
 
+  }
 
+};
 
+
 
 const ThemeHalloween = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };

+ 13 - 2
packages/app/src/components/Theme/ThemeHufflepuff.module.scss
Vizualizați fișierul 

@@ -18,6 +18,19 @@
 
 //   border-bottom: $accentcolor 4px solid;
 
 // }
 
 
+.theme :global {
 
+  .grw-bg-image-wrapper {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  .grw-bg-image {
 
+    object-fit: cover;
 
+    object-position: bottom;
 
+  }
 
+}
 
+
 
 //== Light Mode
 
 //
 
 .theme[data-color-scheme='light'] :global {
 
@@ -107,7 +120,6 @@
 
 
   .growi:not(.login-page) {
 
     // add background-image
 
-    #page-wrapper,
 
     .page-editor-preview-container {
 
       background-image: url('/images/themes/hufflepuff/badger-light3.png');
 
       background-attachment: fixed;
 
@@ -275,7 +287,6 @@
 
 
   .growi:not(.login-page) {
 
     // add background-image
 
-    #page-wrapper,
 
     .page-editor-preview-container {
 
       background-image: url('/images/themes/hufflepuff/badger-dark.jpg');
 
       background-attachment: fixed;

+ 13 - 0
packages/app/src/components/Theme/ThemeHufflepuff.tsx
Vizualizați fișierul 

@@ -1,7 +1,20 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 import styles from './ThemeHufflepuff.module.scss';
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    case Themes.light:
 
+      return '/images/themes/hufflepuff/badger-light3.png';
 
+    case Themes.dark:
 
+      return '/images/themes/hufflepuff/badger-dark.jpg';
 
+    default:
 
+      return '/images/themes/hufflepuff/badger-light3.png';
 
+  }
 
+};
 
+
 
 const ThemeHufflepuff = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };

+ 8 - 1
packages/app/src/components/Theme/ThemeIsland.module.scss
Vizualizați fișierul 

@@ -6,6 +6,14 @@
 
 $color-primary: #97cbc3;
 
 $color-themelight: rgba(183, 226, 219, 1);
 
 
+.theme :global {
 
+  .grw-bg-image-wrapper {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+}
 
+
 
 .theme :global {
 
   $primary: $color-primary;
 
   // Background colors
 
@@ -89,7 +97,6 @@ $color-themelight: rgba(183, 226, 219, 1);
 
     background: lighten($color-themelight, 5%);
 
   }
 
 
-  #wrapper > #page-wrapper,
 
   .page-editor-preview-container {
 
     background-image: url('/images/themes/island/island.png');
 
     background-attachment: fixed;

+ 9 - 0
packages/app/src/components/Theme/ThemeIsland.tsx
Vizualizați fișierul 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 import styles from './ThemeIsland.module.scss';
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/island/island.png';
 
+  }
 
+};
 
+
 
 const ThemeIsland = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };

+ 13 - 1
packages/app/src/components/Theme/ThemeSpring.module.scss
Vizualizați fișierul 

@@ -25,6 +25,19 @@ $accentcolor: #e08dbc;
 
   border-bottom: $accentcolor 4px solid;
 
 }
 
 
+.theme :global {
 
+  .grw-bg-image-wrapper {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  .grw-bg-image {
 
+    object-fit: cover;
 
+    object-position: bottom;
 
+  }
 
+}
 
+
 
 //== Light Mode
 
 //
 
 .theme :global {
 
@@ -107,7 +120,6 @@ $accentcolor: #e08dbc;
 
 
   .growi:not(.login-page) {
 
     // add background-image
 
-    #page-wrapper,
 
     .page-editor-preview-container {
 
       background-image: url('/images/themes/spring/spring02.svg');
 
       background-attachment: fixed;

+ 9 - 0
packages/app/src/components/Theme/ThemeSpring.tsx
Vizualizați fișierul 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 import styles from './ThemeSpring.module.scss';
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/spring/spring02.svg';
 
+  }
 
+};
 
+
 
 const ThemeSpring = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };

+ 13 - 1
packages/app/src/components/Theme/ThemeWood.module.scss
Vizualizați fișierul 

@@ -14,7 +14,6 @@
 
 
 .growi:not(.login-page) {
 
   // add background-image
 
-  #page-wrapper,
 
   .page-editor-preview-container {
 
     background-image: url('/images/themes/wood/wood.jpg');
 
     background-attachment: fixed;
 
@@ -35,6 +34,19 @@
 
 $themecolor: #b9b177;
 
 $themelight: #f5f3ee;
 
 
+.theme :global {
 
+  .grw-bg-image-wrapper {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  .grw-bg-image {
 
+    object-fit: cover;
 
+    object-position: center center;
 
+  }
 
+}
 
+
 
 //== Light Mode
 
 //
 
 .theme :global {

+ 9 - 0
packages/app/src/components/Theme/ThemeWood.tsx
Vizualizați fișierul 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 import styles from './ThemeWood.module.scss';
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/wood/wood.jpg';
 
+  }
 
+};
 
+
 
 const ThemeWood = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };

+ 34 - 0
packages/app/src/components/Theme/utils/ThemeImageProvider.tsx
Vizualizați fișierul 

@@ -0,0 +1,34 @@
 
+import { GrowiThemes } from '~/interfaces/theme';
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
+import { getBackgroundImageSrc as getAntarcticBackgroundImageSrc } from '../ThemeAntarctic';
 
+import { getBackgroundImageSrc as getChristmasBackgroundImageSrc } from '../ThemeChristmas';
 
+import { getBackgroundImageSrc as getHalloweenBackgroundImageSrc } from '../ThemeHalloween';
 
+import { getBackgroundImageSrc as getHuffulePuffBackgroundImageSrc } from '../ThemeHufflepuff';
 
+import { getBackgroundImageSrc as getIslandBackgroundImageSrc } from '../ThemeIsland';
 
+import { getBackgroundImageSrc as getSpringBackgroundImageSrc } from '../ThemeSpring';
 
+import { getBackgroundImageSrc as getWoodBackgroundImageSrc } from '../ThemeWood';
 
+
 
+export const getBackgroundImageSrc = (theme: GrowiThemes | undefined, colorScheme: Themes | undefined): string | undefined => {
 
+  if (theme == null || colorScheme == null) {
 
+    return undefined;
 
+  }
 
+  switch (theme) {
 
+    case GrowiThemes.ANTARCTIC:
 
+      return getAntarcticBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.CHRISTMAS:
 
+      return getChristmasBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.HALLOWEEN:
 
+      return getHalloweenBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.ISLAND:
 
+      return getIslandBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.HUFFLEPUFF:
 
+      return getHuffulePuffBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.SPRING:
 
+      return getSpringBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.WOOD:
 
+      return getWoodBackgroundImageSrc(colorScheme);
 
+    default:
 
+      return undefined;
 
+  }
 
+};

+ 1 - 1
packages/app/src/pages/[[...path]].page.tsx
Vizualizați fișierul 

@@ -283,7 +283,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
 
       </Head>
 
       {/* <BasicLayout title={useCustomTitle(props, t('GROWI'))} className={classNames.join(' ')}> */}
 
       <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')} expandContainer={props.isContainerFluid}>
 
-        <header className="py-0">
 
+        <header className="py-0 position-relative">
 
           <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
 
         </header>
 
         <div className="d-edit-none">