Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index cc7c6a2e2a..63abde51ba 100644
--- 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
index 0000000000..935e25023e
--- /dev/null
+++ b/res/css/structures/_LiiibreHomeButton.pcss
@@ -0,0 +1,37 @@
+.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: url("$(res)/img/liiibre-icons/liiibre.svg");
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ left: 0;
+ mask-image: url("$(res)/img/liiibre-icons/liiibre.svg");
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 24px;
+ background: $secondary-content;
+ }
+
+ &:not(.expanded):hover {
+ background-color: $quaternary-content;
+
+ &::before {
+ background-color: $primary-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 b45461618e..420f7cf3b8 100644
--- a/src/IConfigOptions.ts
+++ b/src/IConfigOptions.ts
@@ -183,6 +183,8 @@ export interface IConfigOptions {
// length per voice chunk in seconds
chunk_length?: number;
};
+
+ liiibre_home_url?: 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..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>
) }