nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Michael Telatynski
2024-07-31 10:38:25 +01:00
committed by GitHub
parent fae5bf1612
commit b55653ddf0
25 changed files with 820 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
res/css/views/right_panel/_RoomSummaryCard.pcss
View File

@@ -33,24 +33,6 @@ limitations under the License.
text-overflow: ellipsis;
}
.mx_RoomSummaryCard_aboutGroup {
.mx_RoomSummaryCard_Button {
padding-left: 44px;
&::before {
content: "";
position: absolute;
top: 8px;
left: 10px;
height: 24px;
width: 24px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $icon-button-color;
}
}
}
.mx_RoomSummaryCard_topic {
padding: 0 12px;
color: var(--cpd-color-text-secondary);
@@ -99,131 +81,6 @@ limitations under the License.
}
}
.mx_RoomSummaryCard_appsGroup {
.mx_RoomSummaryCard_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;
.mx_RoomSummaryCard_icon_app {
padding: 10px 48px 10px 12px; /* based on typical mx_RoomSummaryCard_Button padding */
text-overflow: ellipsis;
overflow: hidden;
display: flex;
justify-content: center;
span {
/* Center aligned and Spacing matched with the About section above the Widgets section */
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
color: $primary-content;
}
}
.mx_RoomSummaryCard_app_pinToggle,
.mx_RoomSummaryCard_app_maximiseToggle,
.mx_RoomSummaryCard_app_options {
position: absolute;
top: 0;
height: 100%; /* to give bigger interactive zone */
width: 24px;
padding: 12px 4px;
box-sizing: border-box;
min-width: 24px; /* prevent flexbox crushing */
&:hover {
&::after {
content: "";
position: absolute;
height: 24px;
width: 24px;
top: 8px; /* 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_RoomSummaryCard_app_pinToggle {
right: 8px;
&::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
}
}
.mx_RoomSummaryCard_app_maximiseToggle {
right: 32px; /* 24 + 8 */
&::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}
}
.mx_RoomSummaryCard_app_options {
right: 56px; /* 2*24 + 8 */
display: none;
&::before {
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
}
}
&.mx_RoomSummaryCard_Button_pinned {
&::after {
opacity: 0.2;
}
.mx_RoomSummaryCard_app_pinToggle::before {
background-color: $accent;
}
}
&.mx_RoomSummaryCard_Button_maximised {
&::after {
opacity: 0.2;
}
.mx_RoomSummaryCard_app_maximiseToggle::before {
background-color: $accent;
}
}
&:hover {
.mx_RoomSummaryCard_icon_app {
padding-right: 72px;
}
.mx_RoomSummaryCard_app_options {
display: unset;
}
}
&::before {
content: unset;
}
&::after {
top: 8px; /* re-align based on the height change */
pointer-events: none; /* pass through to the real button */
}
}
}
.mx_AccessibleButton_kind_link {
margin-top: 12px;
margin-bottom: 12px;