diff --git a/res/css/_components.pcss b/res/css/_components.pcss index fe50417c00..42c986ef05 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -65,6 +65,7 @@ @import "./structures/_MatrixChat.pcss"; @import "./structures/_NonUrgentToastContainer.pcss"; @import "./structures/_QuickSettingsButton.pcss"; +@import "./structures/_LiiibreHomeButton.pcss"; @import "./structures/_RightPanel.pcss"; @import "./structures/_RoomSearch.pcss"; @import "./structures/_RoomStatusBar.pcss"; diff --git a/res/css/structures/_LiiibreHomeButton.pcss b/res/css/structures/_LiiibreHomeButton.pcss new file mode 100644 index 0000000000..7f6ae5edf8 --- /dev/null +++ b/res/css/structures/_LiiibreHomeButton.pcss @@ -0,0 +1,32 @@ +.mx_LiiibreHomeButton { + flex: 0 0 auto; + border-radius: 8px; + position: relative; + margin: 12px auto; + color: $secondary-content; + min-width: 32px; + min-height: 32px; + line-height: 32px; + + &.expanded { + margin-left: 20px; + padding-left: 44px; /* align with toggle collapse button text */ + padding-right: 8px; + } + + &::before { + content: " "; + position: absolute; + width: 32px; + height: 32px; + left: 0; + background-image: url("$(res)/img/liiibre-icons/liiibre.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 24px; + } + + &:not(.expanded):hover { + background-color: $quaternary-content; + } +} diff --git a/res/img/liiibre-icons/liiibre.svg b/res/img/liiibre-icons/liiibre.svg new file mode 100644 index 0000000000..18d11fc213 --- /dev/null +++ b/res/img/liiibre-icons/liiibre.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 607.32 502.5"><defs><style>.cls-1{fill:#f27722;stroke:#f27722;}.cls-1,.cls-6{stroke-miterlimit:10;}.cls-1,.cls-4,.cls-5,.cls-6,.cls-7{stroke-width:20px;}.cls-2{fill:#f5da78;}.cls-3{fill:#398187;}.cls-4,.cls-7{fill:none;}.cls-4,.cls-5,.cls-7{stroke:#00b6c6;stroke-linejoin:round;}.cls-5{fill:#00b6c6;}.cls-6{fill:#f3b935;stroke:#f3b935;}.cls-7{stroke-linecap:round;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M182.09,321.91a104.1,104.1,0,1,1,0-157.61"/><path class="cls-2" d="M182.09,498.38v-348a126,126,0,0,1,126-126h0a126,126,0,0,1,126,126V295.27H355.78v98.61H256.3V492.5Z"/><polygon class="cls-3" points="258.79 492.5 434.09 492.5 434.09 295.27 357.4 295.27 357.4 393.88 258.79 393.88 258.79 492.5"/><path class="cls-4" d="M182.09,498.38v-348a126,126,0,0,1,126-126h0a126,126,0,0,1,126,126V492.5h-252"/><path class="cls-5" d="M509.47,181.61V68.3A43.93,43.93,0,0,1,553.4,24.38h0A43.93,43.93,0,0,1,597.32,68.3V181.61Z"/><circle class="cls-6" cx="81.35" cy="32.48" r="22.48"/><polyline class="cls-7" points="592.3 295.27 357.4 295.27 357.4 393.88 258.79 393.88 258.79 492.5 10 492.5"/></g></g></svg> \ No newline at end of file diff --git a/src/IConfigOptions.ts b/src/IConfigOptions.ts index 8234f5bc75..7885e4f205 100644 --- a/src/IConfigOptions.ts +++ b/src/IConfigOptions.ts @@ -191,6 +191,9 @@ export interface IConfigOptions { description: string; show_once?: boolean; }; + + liiibre_home_url?: string; + liiibre_home_label?: string; } export interface ISsoRedirectOptions { diff --git a/src/components/views/spaces/LiiibreHomeButton.tsx b/src/components/views/spaces/LiiibreHomeButton.tsx new file mode 100644 index 0000000000..0341c70c40 --- /dev/null +++ b/src/components/views/spaces/LiiibreHomeButton.tsx @@ -0,0 +1,31 @@ +import React, { useCallback } from "react"; +import classNames from "classnames"; + +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import SdkConfig from "../../../SdkConfig"; + +const LiiibreHomeButton = ({ isPanelCollapsed }) => { + const home_url = SdkConfig.get("liiibre_home_url"); + const label = SdkConfig.get("liiibre_home_label") || "Retour au nuage"; + + const goBackHome = useCallback(() => { + window.open(home_url, "_self"); + }, [home_url]); + + if (!home_url) return null; + + return ( + <AccessibleTooltipButton + className={classNames("mx_LiiibreHomeButton", { + expanded: !isPanelCollapsed, + })} + onClick={goBackHome} + title={label} + forceHide={!isPanelCollapsed} + > + {!isPanelCollapsed ? label : null} + </AccessibleTooltipButton> + ); +}; + +export default LiiibreHomeButton; diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index 7d3bd5bd22..0f47cdd2e9 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -72,6 +72,7 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; +import LiiibreHomeButton from "./LiiibreHomeButton"; const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => { const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => { @@ -392,6 +393,7 @@ const SpacePanel: React.FC = () => { )} </Droppable> + <LiiibreHomeButton isPanelCollapsed={isPanelCollapsed} /> <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} /> </div> )}