Extract Extensions into their own right panel tab (#12844)

* Extract useIsVideoRoom hook Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Move useWidgets hook to WidgetUtils Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Extract Extensions into their own right panel tab Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused components & classes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-07-31 10:38:25 +01:00 · 2024-07-31 10:38:25 +01:00 · b55653ddf0
commit b55653ddf0
parent fae5bf1612
25 changed files with 820 additions and 475 deletions
--- a/res/css/views/right_panel/_ExtensionsCard.pcss
+++ b/res/css/views/right_panel/_ExtensionsCard.pcss
@ -0,0 +1,145 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ExtensionsCard {
+    --cpd-separator-inset: var(--cpd-space-4x);
+    --cpd-separator-spacing: var(--cpd-space-4x);
+
+    .mx_BaseCard_header {
+        /* Hide the line between the header and the body of the card */
+        border-block-end: none;
+
+        /* Styling for the "Add extensions" button */
+        button {
+            width: 100%;
+        }
+    }
+
+    .mx_AutoHideScrollbar {
+        padding: 0 var(--cpd-space-4x);
+        box-sizing: border-box;
+    }
+
+    .mx_ExtensionsCard_container {
+        text-align: center;
+        margin: $spacing-20 var(--cpd-space-4x) 0;
+    }
+
+    .mx_ExtensionsCard_Button {
+        /* this button is special so we have to override some of the original styling */
+        /* as we will be applying it in its children */
+        padding: 0;
+        height: auto;
+        color: $tertiary-content;
+        position: relative;
+
+        .mx_WidgetAvatar {
+            flex-shrink: 0;
+        }
+
+        .mx_ExtensionsCard_icon_app {
+            padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+
+            p {
+                margin: 0 var(--cpd-space-3x);
+                color: $primary-content;
+            }
+        }
+
+        .mx_ExtensionsCard_app_pinToggle,
+        .mx_ExtensionsCard_app_options {
+            position: absolute;
+            top: 0;
+            height: 100%; /* to give bigger interactive zone */
+            width: 24px;
+            padding: var(--cpd-space-3x) var(--cpd-space-1x);
+            box-sizing: border-box;
+            min-width: 24px; /* prevent flexbox crushing */
+
+            &:hover {
+                &::after {
+                    content: "";
+                    position: absolute;
+                    height: 24px;
+                    width: 24px;
+                    top: var(--cpd-space-2x); /* equal to padding-top of parent */
+                    left: 0;
+                    border-radius: 12px;
+                    background-color: rgba(141, 151, 165, 0.1);
+                }
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: 16px;
+                width: 16px;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 16px;
+                background-color: $icon-button-color;
+            }
+        }
+
+        .mx_ExtensionsCard_app_pinToggle {
+            right: 8px;
+
+            &::before {
+                mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
+            }
+        }
+
+        .mx_ExtensionsCard_app_options {
+            right: 32px; /* 24 + 8 */
+            &::before {
+                mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+            }
+        }
+
+        &.mx_ExtensionsCard_Button_pinned {
+            &::after {
+                opacity: 0.2;
+            }
+
+            .mx_ExtensionsCard_app_pinToggle::before {
+                background-color: $accent;
+            }
+        }
+
+        &::before {
+            content: unset;
+        }
+
+        &::after {
+            top: var(--cpd-space-2x); /* re-align based on the height change */
+            pointer-events: none; /* pass through to the real button */
+        }
+    }
+
+    /* Set layout for everyone button */
+    a[data-kind="primary"] {
+        margin-top: var(--cpd-space-10x);
+    }
+
+    .mx_EmptyState::before {
+        /* Overlap the Add extensions button */
+        top: -76px;
+    }
+}