Visuelt løft og endringer på footer (#1290)

* Update Konfigurasjon page * Add new icons to iconCatalog * Add editorconfig to all solutions * Update footer and buttons * Finish install version popover * Add tooltip to version button * Update information in version popover --------- Co-authored-by: Ole Martin Pettersen <[email protected]>
Puzzlepart · Oct 31, 2023 · 88b5fad · 88b5fad
1 parent 80d9c95
commit 88b5fad
Show file tree

Hide file tree

Showing 28 changed files with 461 additions and 286 deletions.
diff --git a/SharePointFramework/PortfolioExtensions/.editorconfig b/SharePointFramework/PortfolioExtensions/.editorconfig
@@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/Configuration/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/Configuration/index.tsx
@@ -0,0 +1,23 @@
+import strings from 'PortfolioExtensionsStrings'
+import React, { FC, useContext } from 'react'
+import { FooterContext } from '../context'
+import { Button, Tooltip } from '@fluentui/react-components'
+import { getFluentIcon } from 'pp365-shared-library'
+
+export const Configuration: FC = () => {
+  const context = useContext(FooterContext)
+  return (
+    <Tooltip relationship='description' withArrow content={strings.ConfigurationDescription}>
+      <Button
+        size='small'
+        appearance='subtle'
+        onClick={() =>
+          window.open(`${context.props.portalUrl}/SitePages/Konfigurasjon.aspx`, '_blank')
+        }
+        icon={getFluentIcon('ContentSettings')}
+      >
+        {strings.ConfigurationLabel}
+      </Button>
+    </Tooltip>
+  )
+}
diff --git a/...PortfolioExtensions/src/components/Footer/ConfigurationLink/ConfigurationLink.module.scss b/...PortfolioExtensions/src/components/Footer/ConfigurationLink/ConfigurationLink.module.scss
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/ConfigurationLink/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/ConfigurationLink/index.tsx
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/Footer.module.scss b/SharePointFramework/PortfolioExtensions/src/components/Footer/Footer.module.scss
@@ -1,24 +1,17 @@
-.root {
-    padding: 25px;
-    height: 25px;
+.footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     box-sizing: border-box;
+    min-height: 65px;
+    padding: 25px;
+    background-color: var(--colorNeutralBackground1);
+    border-top: 1px solid var(--colorNeutralBackground3);
 
-    .content {
-        .left {
-            float: left;
-
-            .configurationLink, .siteSettingsLink {
-                font-size: 12px;
-                margin: 0 8px 0 0;
-            }
-        }
-        .right {
-            float: right;
-
-            .installVersion {
-                font-size: 12px;
-                cursor: help;
-            }
-        }
-    }
+  .left, .right {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
 }
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/Footer.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/Footer.tsx
@@ -0,0 +1,36 @@
+import React, { FC } from 'react'
+import { Configuration } from './Configuration'
+import styles from './Footer.module.scss'
+import { InstallVersion } from './InstallVersion'
+import { PromotedLinks } from './PromotedLinks'
+import { FooterContext } from './context'
+import { IFooterProps } from './types'
+import { useFooter } from './useFooter'
+import { SiteSettings } from './SiteSettings'
+import { HelpContent } from './HelpContent'
+import { FluentProvider, useId, webLightTheme } from '@fluentui/react-components'
+
+export const Footer: FC<IFooterProps> = (props) => {
+  const fluentProviderId = useId('fp-footer')
+  const footer = useFooter(props)
+
+  return (
+    <FooterContext.Provider value={{ ...footer, props }}>
+      <FluentProvider id={fluentProviderId} theme={webLightTheme}>
+        <div className={styles.footer}>
+          <section className={styles.left}>
+            <SiteSettings />
+            <Configuration />
+            <PromotedLinks />
+          </section>
+          <section className={styles.right}>
+            <InstallVersion />
+            <HelpContent />
+          </section>
+        </div>
+      </FluentProvider>
+    </FooterContext.Provider>
+  )
+}
+
+export * from './types'
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/index.tsx
@@ -1,22 +1,37 @@
-import { ActionButton } from '@fluentui/react'
 import strings from 'PortfolioExtensionsStrings'
 import React, { FC, useContext, useState } from 'react'
 import { HelpContentModal } from './HelpContentModal'
 import { FooterContext } from '../context'
+import { Button, Tooltip } from '@fluentui/react-components'
+import { getFluentIcon } from 'pp365-shared-library'
 
 export const HelpContent: FC = () => {
   const context = useContext(FooterContext)
   const [showModal, setShowModal] = useState(false)
-  const isHidden = context.props.helpContent.length === 0
+  const isUnavailable = context.props.helpContent.length === 0
+
   return (
-    <div style={{ display: isHidden ? 'none' : 'inline-block' }}>
-      <ActionButton
-        text={strings.HelpContentLinkText}
-        iconProps={{ iconName: 'Help' }}
-        styles={{ root: { fontSize: 12, height: 25 }, icon: { fontSize: 12 } }}
-        onClick={() => setShowModal(true)}
-      />
+    <>
+      <Tooltip
+        relationship='description'
+        withArrow
+        content={
+          isUnavailable
+            ? strings.HelpContentUnavailableDescription
+            : strings.HelpContentAvailableDescription
+        }
+      >
+        <Button
+          size='small'
+          appearance='subtle'
+          onClick={() => setShowModal(true)}
+          disabled={isUnavailable}
+          icon={getFluentIcon('QuestionCircle')}
+        >
+          {isUnavailable ? strings.HelpContentUnavailableLabel : strings.HelpContentAvailableLabel}
+        </Button>
+      </Tooltip>
       <HelpContentModal isOpen={showModal} onDismiss={() => setShowModal(false)} />
-    </div>
+    </>
   )
 }
diff --git a/...ework/PortfolioExtensions/src/components/Footer/InstallVersion/InstallVersion.module.scss b/...ework/PortfolioExtensions/src/components/Footer/InstallVersion/InstallVersion.module.scss
diff --git a/...oter/InstallVersion/InstallVersionTooltipContent/InstallVersionTooltipContent.module.scss b/...oter/InstallVersion/InstallVersionTooltipContent/InstallVersionTooltipContent.module.scss
@@ -1,12 +1,33 @@
-.root {
-    padding: 10px;
-    width: 450px;
-    box-sizing: border-box;
-
-    .footer {
-        margin: 20px 0 0 0;
-        .seeAllInstallationsLink {
-            color: inherit;
-        }
+.lastInstall {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: fit-content;
+  box-sizing: border-box;
+
+  .content {
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+  }
+
+  .divider {
+    padding: 12px 0;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .button {
+      justify-content: flex-start;
+      width: fit-content;
+
+      .label {
+        font-weight: var(--fontWeightRegular);
+        margin: 0;
+      }
     }
+  }
 }
diff --git a/...lVersion/InstallVersionTooltipContent/LatestGitHubRelease/LatestGitHubRelease.module.scss b/...lVersion/InstallVersionTooltipContent/LatestGitHubRelease/LatestGitHubRelease.module.scss
@@ -1,16 +1,37 @@
-.root {
-    margin: 15px 0 0 0;
+.latestRelease {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 
-    .label {
-        font-weight: 600;
-    }
-
-    .latestGitHubReleaseLink {
+  .content {
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+
+    .version {
+      display: flex;
+      gap: 4px;
+
+      .latestGitHubReleaseLink {
         color: inherit;
-    }
+      }
 
-    .versionComparisonIcon {
+      .versionComparisonIcon {
         margin: 0 3px;
         vertical-align: middle;
+        cursor: default;
+      }
+
+    }
+  }
+
+  .button {
+    justify-content: flex-start;
+    width: fit-content;
+
+    .label {
+      font-weight: var(--fontWeightRegular);
+      margin: 0;
     }
+  }
 }
diff --git a/...mponents/Footer/InstallVersion/InstallVersionTooltipContent/LatestGitHubRelease/index.tsx b/...mponents/Footer/InstallVersion/InstallVersionTooltipContent/LatestGitHubRelease/index.tsx
@@ -1,9 +1,11 @@
-import { ActionButton, Icon, Link } from '@fluentui/react'
+import { Icon } from '@fluentui/react'
 import strings from 'PortfolioExtensionsStrings'
 import React, { FC } from 'react'
 import { ILatestGitHubReleaseProps } from './types'
 import styles from './LatestGitHubRelease.module.scss'
 import { useLatestGitHubRelease } from './useLatestGitHubRelease'
+import { Button, Label, Link, Tooltip } from '@fluentui/react-components'
+import { getFluentIcon } from 'pp365-shared-library'
 
 /**
  * Component for displaying the latest GitHub release and a
@@ -14,30 +16,37 @@ export const LatestGitHubRelease: FC<ILatestGitHubReleaseProps> = (props) => {
     useLatestGitHubRelease(props)
 
   return (
-    <div className={styles.root}>
-      <div>
-        <span className={styles.label}>{strings.LatestGitHubReleaseLabel}</span>
-        <span
-          className={styles.latestGitHubReleaseLink}
-          title={strings.LatestGitHubReleaseLinkTitle}
-        >
-          <Link href={latestGitHubRelease.html_url} target='_blank' rel='noopener noreferrer'>
-            {latestGitHubVersion.toString()}
-          </Link>
-        </span>
-        <span className={styles.versionComparisonIcon}>
-          <Icon {...versionComparisonIconProps} />
+    <div className={styles.latestRelease}>
+      <div className={styles.content}>
+        <span>
+          <Label weight='semibold'>{strings.LatestGitHubReleaseLabel}</Label>:
         </span>
+        <div className={styles.version}>
+          <span
+            className={styles.latestGitHubReleaseLink}
+            title={strings.LatestGitHubReleaseLinkTitle}
+          >
+            <Link href={latestGitHubRelease.html_url} target='_blank' rel='noopener noreferrer'>
+              <b>{latestGitHubVersion.toString()}</b>
+            </Link>
+          </span>
+          <Tooltip relationship='description' withArrow content={versionComparisonIconProps.title}>
+            <span className={styles.versionComparisonIcon}>
+              <Icon {...versionComparisonIconProps} />
+            </span>
+          </Tooltip>
+        </div>
       </div>
       <div hidden={!latestGitHubVersion.greaterThan(installedVersion)}>
-        <ActionButton
-          text={strings.LatestGitHubReleaseDownloadButtonText}
-          iconProps={{ iconName: 'Download', styles: { root: { fontSize: 12 } } }}
-          styles={{ root: { fontSize: 12 } }}
-          href={latestGitHubRelease.assets[0].browser_download_url}
-          target='_blank'
-          rel='noopener noreferrer'
-        />
+        <Button
+          className={styles.button}
+          size='medium'
+          appearance='primary'
+          onClick={() => window.open(latestGitHubRelease.assets[0].browser_download_url, '_blank')}
+          icon={getFluentIcon('ArrowDownload')}
+        >
+          <span className={styles.label}>{strings.LatestGitHubReleaseDownloadButtonText}</span>
+        </Button>
       </div>
     </div>
   )