Newer
Older
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -62,6 +62,7 @@
@import "./structures/_NonUrgentToastContainer.pcss";
@import "./structures/_NotificationPanel.pcss";
@import "./structures/_QuickSettingsButton.pcss";
+@import "./structures/_LiiibreHomeButton.pcss";
@import "./structures/_RightPanel.pcss";
@import "./structures/_RoomDirectory.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;
+ background: $secondary-content;
+ }
+
+ &: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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
diff --git a/src/components/views/spaces/LiiibreHomeButton.tsx b/src/components/views/spaces/LiiibreHomeButton.tsx
new file mode 100644
index 0000000000..49b506b9d0
--- /dev/null
+++ b/src/components/views/spaces/LiiibreHomeButton.tsx
@@ -0,0 +1,32 @@
+import React, { useCallback } from "react";
+import classNames from "classnames";
+
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import SdkConfig from "../../../SdkConfig";
+
+const LABEL = "Retour au nuage";
+
+const LiiibreHomeButton = ({ isPanelCollapsed }) => {
+ const home_url = SdkConfig.get("liiibre_home_url");
+
+ 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 e26a78b5a3..af234e94ed 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, () => {
@@ -381,6 +382,7 @@ const SpacePanel = () => {
) }
</Droppable>
+ <LiiibreHomeButton isPanelCollapsed={isPanelCollapsed} />
<QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
</div>
) }