diff --git a/linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpacePanel.tsx b/linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpacePanel.tsx index 72f19098a4..89ebed98ed 100644 --- a/linked-dependencies/matrix-react-sdk/src/components/views/spaces/SpacePanel.tsx +++ b/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 */} {TchapUIFeature.isFeatureActiveForHomeserver("feature_thread") ? : null} {/** end :TCHAP: */} - - + + {/* :TCHAP: improve-faq-visibility */} + + {/* end :TCHAP: */} {/* :TCHAP: lasuite-gaufre-integration */} {/* end :TCHAP: */} diff --git a/modules/tchap-translations/tchap_translations.json b/modules/tchap-translations/tchap_translations.json index b05895e6e8..1f155fa31f 100644 --- a/modules/tchap-translations/tchap_translations.json +++ b/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" } } diff --git a/patches/subtree-modifications.json b/patches/subtree-modifications.json index ee232a1cfc..dd132a6500 100644 --- a/patches/subtree-modifications.json +++ b/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" + ] } } \ No newline at end of file diff --git a/res/css/common/_TchapGaufre.pcss b/res/css/common/_TchapGaufre.pcss deleted file mode 100644 index 2cfc1959ae..0000000000 --- a/res/css/common/_TchapGaufre.pcss +++ /dev/null @@ -1,15 +0,0 @@ -.lasuite-gaufre-tchap { - --gaufre-color: #9999fc; - - border: solid 1px var(--gaufre-color); - color: var(--gaufre-color); - - &::before { - background: var(--gaufre-color); - } -} - -#tchap-gaufre { - overflow: scroll; - height: 300px; -} \ No newline at end of file diff --git a/res/css/common/_TchapLeftPanel.pcss b/res/css/common/_TchapLeftPanel.pcss new file mode 100644 index 0000000000..91ca40073f --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/res/themes/tchap-dark/css/_tchap_custom_vars.pcss b/res/themes/tchap-dark/css/_tchap_custom_vars.pcss index 81df2cfbac..b3af29fde1 100644 --- a/res/themes/tchap-dark/css/_tchap_custom_vars.pcss +++ b/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; } diff --git a/res/themes/tchap-light/css/_tchap_custom_vars.pcss b/res/themes/tchap-light/css/_tchap_custom_vars.pcss index 88d97c6666..6e2bfa797c 100644 --- a/res/themes/tchap-light/css/_tchap_custom_vars.pcss +++ b/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; diff --git a/src/tchap/components/views/common/Gaufre.tsx b/src/tchap/components/views/common/Gaufre.tsx index ed6db5c75e..97e4c56437 100644 --- a/src/tchap/components/views/common/Gaufre.tsx +++ b/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; diff --git a/src/tchap/components/views/common/QuickFaq.tsx b/src/tchap/components/views/common/QuickFaq.tsx new file mode 100644 index 0000000000..2c962c3c33 --- /dev/null +++ b/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(); + + let contextMenu: JSX.Element | undefined; + + if (menuDisplayed && handle.current) { + contextMenu = ( + + + { + window.open("https://www.tchap.gouv.fr/faq", '_blank') + }} + /> + { + window.open("mailto:support@tchap.beta.gouv.fr", '_blank') + }} + /> + { + window.open("https://aide.tchap.beta.gouv.fr/fr/article/guide-de-prise-en-main-de-tchap-oswyn1/", '_blank') + }} + /> + + + ); + } + + return ( + <> + + {!isPanelCollapsed ? _t("common|help") : null} + + + {contextMenu} + + ); +}; + +export default QuickFaqButton; \ No newline at end of file