feat:(faq): add faq button in space panel

linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpacePanel.tsx

@@ -73,6 +73,7 @@ import { ThreadsActivityCentre } from "./threads-activity-centre/";
 import AccessibleButton from "../elements/AccessibleButton";
 import TchapUIFeature from "../../../../../../src/tchap/util/TchapUIFeature"; // :TCHAP: extend-remove-thread-buttons
 import TchapGaufre from "../../../../../../src/tchap/components/views/common/Gaufre";
+import QuickFaqButton from "../../../../../../src/tchap/components/views/common/QuickFaq"; // :TCHAP: improve-faq-visibility
 import { KeyboardShortcut } from "../settings/KeyboardShortcut";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
@@ -419,8 +420,10 @@ const SpacePanel: React.FC = () => {
                         {/* :TCHAP: extend-remove-thread-buttons <ThreadsActivityCentre displayButtonLabel={!isPanelCollapsed} /> */}
                         {TchapUIFeature.isFeatureActiveForHomeserver("feature_thread") ? <ThreadsActivityCentre displayButtonLabel={!isPanelCollapsed} /> : null}
                         {/** end :TCHAP: */}
-                        <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
-
+
+                        {/* :TCHAP: improve-faq-visibility <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} /> */}
+                        <QuickFaqButton isPanelCollapsed={isPanelCollapsed}></QuickFaqButton>
+                        {/* end :TCHAP: */}
                         {/* :TCHAP: lasuite-gaufre-integration */}
                         <TchapGaufre isPanelCollapsed={isPanelCollapsed}></TchapGaufre>
                         {/* end :TCHAP: */}

modules/tchap-translations/tchap_translations.json

@@ -757,5 +757,17 @@
     "lasuite_numerique": {
         "en": "La suite numérique",
         "fr": "La suite numérique"
+    },
+    "quick_faq|faq": {
+        "en": "Frequently Asked Questions",
+        "fr": "Foire Aux Questions"
+    },
+    "quick_faq|contact": {
+        "en": "Contact us",
+        "fr": "Contacter le support"
+    },
+    "quick_faq|guides": {
+        "en": "Get started",
+        "fr": "Prise en main"
     }
 }

patches/subtree-modifications.json

@@ -43,5 +43,11 @@
         "files": [
             "src/components/views/dialogs/InviteDialog.tsx"
         ]
+    },
+    "improve-faq-visibility": {
+        "issue": "https://github.com/tchapgouv/tchap-web-v4/issues/395",
+        "files": [
+            "src/components/views/spaces/SpacePanel.tsx"
+        ]
     }
 }

res/css/common/_TchapLeftPanel.pcss

@@ -0,0 +1,20 @@
+.lasuite-gaufre-tchap {
+    border: solid 1px var(--sidebar-button-color);
+    color: var(--sidebar-button-color); 
+
+    &::before {
+        background: var(--sidebar-button-color);
+    }
+}
+
+#tchap-gaufre {
+    overflow: scroll;
+    height: 300px;
+}
+
+.tc_sidebar_quick_faq {
+    color: var(--sidebar-button-color); 
+    &::before {
+        background: var(--sidebar-button-color);
+    }
+}

res/themes/tchap-dark/css/_tchap_custom_vars.pcss

@@ -4,4 +4,5 @@ should be loaded before res/themes/light-custom/css/_custom.pcss */
     --private-color: #eb5757;
     --external-color: #f07a12;
     --forum-color: #27ae60;
+    --sidebar-button-color: #9999fc;
 }

res/themes/tchap-light/css/_tchap_custom_vars.pcss

@@ -11,6 +11,7 @@ body {
     --forum-color: #27ae60;
     --sidebar-color: #222777;
     --sidebar-color-50pct: #030c1b4d; // used by the modal backdrop
+    --sidebar-button-color: #ffffff;
     --roomlist-background-color: #edf1f7;
     --roomlist-text-color: #2e2f32;
     --roomlist-text-secondary-color: #61708b;

src/tchap/components/views/common/Gaufre.tsx

@@ -6,7 +6,7 @@ import ContextMenu, { ChevronFace, alwaysAboveRightOf, useContextMenu } from 'ma
 import AccessibleButton from 'matrix-react-sdk/src/components/views/elements/AccessibleButton';
 import classNames from 'classnames';
 import { _t } from '../../../../languageHandler';
-import "../../../../../res/css/common/_TchapGaufre.pcss";
+import "../../../../../res/css/common/_TchapLeftPanel.pcss";
 
 const TchapGaufre: React.FC<{
     isPanelCollapsed: boolean;

src/tchap/components/views/common/QuickFaq.tsx

@@ -0,0 +1,72 @@
+
+import React from 'react'
+
+import { ChevronFace, alwaysAboveRightOf, useContextMenu } from 'matrix-react-sdk/src/components/structures/ContextMenu';
+import AccessibleButton from 'matrix-react-sdk/src/components/views/elements/AccessibleButton';
+import classNames from 'classnames';
+import { _t } from '../../../../languageHandler';
+import "../../../../../res/css/common/_TchapLeftPanel.pcss";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from 'matrix-react-sdk/src/components/views/context_menus/IconizedContextMenu';
+
+const QuickFaqButton: React.FC<{
+    isPanelCollapsed: boolean;
+}> = ({ isPanelCollapsed = false }) => {
+
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
+
+    let contextMenu: JSX.Element | undefined;
+
+    if (menuDisplayed && handle.current) {
+        contextMenu = (
+            <IconizedContextMenu
+                {...alwaysAboveRightOf(handle.current.getBoundingClientRect(), ChevronFace.None, 16)}
+                className="mx_UserMenu_contextMenu"
+                onFinished={closeMenu}
+                compact
+            >
+                <IconizedContextMenuOptionList>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_UserMenu_iconInfo"
+                        label={_t("quick_faq|faq")}
+                        onClick={(e) => {
+                            window.open("https://www.tchap.gouv.fr/faq", '_blank')
+                        }}
+                    />
+                    <IconizedContextMenuOption
+                        iconClassName="mx_UserMenu_iconMessage"
+                        label={_t("quick_faq|contact")}
+                        onClick={(e) => {
+                            window.open("mailto:[email protected]", '_blank')
+                        }}
+                    />
+                    <IconizedContextMenuOption
+                        iconClassName="mx_UserMenu_iconHome"
+                        label={_t("quick_faq|guides")}
+                        onClick={(e) => {
+                            window.open("https://aide.tchap.beta.gouv.fr/fr/article/guide-de-prise-en-main-de-tchap-oswyn1/", '_blank')
+                        }}
+                    />
+                </IconizedContextMenuOptionList>
+            </IconizedContextMenu>
+        );
+    }
+
+    return (
+        <>
+            <AccessibleButton
+                className={classNames(["mx_QuickSettingsButton", { expanded: !isPanelCollapsed }, "mx_UserSettingsDialog_helpIcon", "tc_sidebar_quick_faq"])}
+                onClick={openMenu}
+                aria-label={_t("common|help")}
+                title={isPanelCollapsed ? _t("common|help") : undefined}
+                ref={handle}
+                aria-expanded={!isPanelCollapsed}
+            >
+                {!isPanelCollapsed ? _t("common|help") : null}
+            </AccessibleButton>
+
+            {contextMenu}
+        </>
+    );
+};
+
+export default QuickFaqButton;