Newer
Older
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@import "./structures/_NonUrgentToastContainer.pcss";
@import "./structures/_QuickSettingsButton.pcss";
+@import "./structures/_LiiibreHomeButton.pcss";
@import "./structures/_RightPanel.pcss";
@import "./structures/_RoomSearch.pcss";
diff --git a/res/css/structures/_LiiibreHomeButton.pcss b/res/css/structures/_LiiibreHomeButton.pcss
new file mode 100644
--- /dev/null
+++ b/res/css/structures/_LiiibreHomeButton.pcss
+.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 {
+ 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
--- a/src/IConfigOptions.ts
+++ b/src/IConfigOptions.ts
description: string;
show_once?: boolean;
diff --git a/src/components/views/spaces/LiiibreHomeButton.tsx b/src/components/views/spaces/LiiibreHomeButton.tsx
new file mode 100644
--- /dev/null
+++ b/src/components/views/spaces/LiiibreHomeButton.tsx
+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}
+ {!isPanelCollapsed ? label : null}
+ </AccessibleTooltipButton>
+ );
+};
+
+export default LiiibreHomeButton;
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
--- 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, () => {
</Droppable>
+ <LiiibreHomeButton isPanelCollapsed={isPanelCollapsed} />
<QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
</div>