Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Update header buttons of RoomHeaderButtons #10495

Closed
wants to merge 7 commits into from
Closed

Update header buttons of RoomHeaderButtons #10495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d5f3505
Conform the style rule to the style guide naming policy
luixxiul Apr 2, 2023
48643e1
Conform the rules to the style guide naming policy and move declarations
luixxiul Apr 2, 2023
3ea43ae
Nesting - mx_RoomHeader_button
luixxiul Apr 2, 2023
4eea2d1
Conform more buttons class name to our naming policy: mx_RoomHeader_b…
luixxiul Apr 2, 2023
e2acaf9
Nesting - mx_RoomHeader_button--*
luixxiul Apr 2, 2023
3a328a2
Edit CSS rules
luixxiul Apr 2, 2023
a08f3c6
Remove a FIXME comment as factoring has completed
luixxiul Apr 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 0 additions & 30 deletions res/css/structures/_RightPanel.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,36 +32,6 @@ limitations under the License.
}
}

/** Fixme - factor this out with the main header **/

.mx_RightPanel_threadsButton::before {
mask-image: url("$(res)/img/element-icons/room/thread.svg");
}

.mx_RightPanel_notifsButton::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
mask-position: center;
}

.mx_RightPanel_roomSummaryButton::before {
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-position: center;
}

.mx_RightPanel_pinnedMessagesButton {
&::before {
mask-image: url("$(res)/img/element-icons/room/pin.svg");
mask-position: center;
}
}

.mx_RightPanel_timelineCardButton {
&::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
mask-position: center;
}
}

.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo {
order: 2;
Expand Down
292 changes: 159 additions & 133 deletions res/css/views/rooms/_RoomHeader.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,165 @@ limitations under the License.
}
}

.mx_RoomHeader_button {
cursor: pointer;
flex: 0 0 auto;
margin-left: 1px;
margin-right: 1px;
height: 32px;
width: 32px;
position: relative;
border-radius: 100%;

&::before {
content: "";
position: absolute;
top: 4px; /* center with parent of 32px */
left: 4px; /* center with parent of 32px */
height: 24px;
width: 24px;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}

&:hover {
background: rgba($accent, 0.1);

&::before {
background-color: $accent;
}
}

&.mx_RoomHeader_button--unread::before {
background-color: $room-icon-unread-color !important;
}

&.mx_RoomHeader_button--threads::before {
mask-image: url("$(res)/img/element-icons/room/thread.svg");
}

&.mx_RoomHeader_button--notifs::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
mask-position: center;
}

&.mx_RoomHeader_button--roomSummary::before {
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-position: center;
}

&.mx_RoomHeader_button--pinnedMessages::before {
mask-image: url("$(res)/img/element-icons/room/pin.svg");
mask-position: center;
}

&.mx_RoomHeader_button--timelineCard::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
mask-position: center;
}

&.mx_RoomHeader_button--forget::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
width: 26px;
}

&.mx_RoomHeader_button--apps::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
}

&.mx_RoomHeader_button--apps--highlight::before {
background-color: $accent;
}

&.mx_RoomHeader_button--search::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}

&.mx_RoomHeader_button--invite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}

&.mx_RoomHeader_button--call--voice::before {
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");

/* The call button SVG is padded slightly differently, so match it up to the size */
/* of the other icons */
mask-size: 20px;
mask-position: center;
}

&.mx_RoomHeader_button--call--video::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}

&.mx_RoomHeader_button--close::before {
&::before {
mask-image: url("$(res)/img/cancel.svg");
mask-size: 20px;
mask-position: center;
}

&:hover {
background: unset; /* remove background color on hover */

&::before {
background-color: $icon-button-color; /* set the default background color */
}
}
}

.mx_RoomHeader_button--minimise::before {
mask-image: url("$(res)/img/element-icons/reduce.svg");
}

&.mx_RoomHeader_button--unread::before {
background-color: $room-icon-unread-color !important;
}

&.mx_RoomHeader_button--highlight::before {
background-color: $accent !important;
}

&:hover::before {
background-color: $accent !important;
}

.mx_RoomHeader_button_unreadIndicator_bg,
.mx_RoomHeader_button_unreadIndicator {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-dot-offset);
margin: 4px;
}

.mx_RoomHeader_button_unreadIndicator_bg {
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1.6);
transform-origin: center center;
background: rgba($background, 1);
}

.mx_RoomHeader_button_unreadIndicator {
&.mx_Indicator_red {
background: rgba($alert, 1);
box-shadow: rgba($alert, 1);
}

&.mx_Indicator_gray {
background: rgba($room-icon-unread-color, 1);
box-shadow: rgba($room-icon-unread-color, 1);
}

&.mx_Indicator_bold {
background: rgba($primary-content, 1);
box-shadow: rgba($primary-content, 1);
}
}
}

.mx_CallDuration {
margin-top: calc(($font-15px - $font-13px) / 2); /* To align with the name */
font-size: $font-13px;
Expand Down Expand Up @@ -168,119 +327,6 @@ limitations under the License.
object-fit: cover;
}

.mx_RoomHeader_button {
cursor: pointer;
flex: 0 0 auto;
margin-left: 1px;
margin-right: 1px;
height: 32px;
width: 32px;
position: relative;
border-radius: 100%;

&::before {
content: "";
position: absolute;
top: 4px; /* center with parent of 32px */
left: 4px; /* center with parent of 32px */
height: 24px;
width: 24px;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}

&:hover {
background: rgba($accent, 0.1);

&::before {
background-color: $accent;
}
}
}

.mx_RoomHeader_button_unreadIndicator_bg {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-dot-offset);
margin: 4px;
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1.6);
transform-origin: center center;
background: rgba($background, 1);
}

.mx_RoomHeader_button_unreadIndicator {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-dot-offset);
margin: 4px;

&.mx_Indicator_red {
background: rgba($alert, 1);
box-shadow: rgba($alert, 1);
}

&.mx_Indicator_gray {
background: rgba($room-icon-unread-color, 1);
box-shadow: rgba($room-icon-unread-color, 1);
}

&.mx_Indicator_bold {
background: rgba($primary-content, 1);
box-shadow: rgba($primary-content, 1);
}
}

.mx_RoomHeader_button--unread {
&::before {
background-color: $room-icon-unread-color !important;
}
}

.mx_RoomHeader_button--highlight,
.mx_RoomHeader_button:hover {
&::before {
background-color: $accent !important;
}
}

.mx_RoomHeader_forgetButton::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
width: 26px;
}

.mx_RoomHeader_appsButton::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
}

.mx_RoomHeader_appsButton_highlight::before {
background-color: $accent;
}

.mx_RoomHeader_searchButton::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}

.mx_RoomHeader_inviteButton::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}

.mx_RoomHeader_voiceCallButton::before {
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");

/* The call button SVG is padded slightly differently, so match it up to the size */
/* of the other icons */
mask-size: 20px;
mask-position: center;
}

.mx_RoomHeader_videoCallButton::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}

.mx_RoomHeader_layoutButton--freedom::before,
.mx_RoomHeader_freedomIcon::before {
mask-image: url("$(res)/img/element-icons/call/freedom.svg");
Expand All @@ -291,26 +337,6 @@ limitations under the License.
mask-image: url("$(res)/img/element-icons/call/spotlight.svg");
}

.mx_RoomHeader_closeButton {
&::before {
mask-image: url("$(res)/img/cancel.svg");
mask-size: 20px;
mask-position: center;
}

&:hover {
background: unset; /* remove background color on hover */

&::before {
background-color: $icon-button-color; /* set the default background color */
}
}
}

.mx_RoomHeader_minimiseButton::before {
mask-image: url("$(res)/img/element-icons/reduce.svg");
}

.mx_RoomHeader_layoutMenu .mx_IconizedContextMenu_icon::before {
content: "";
width: 16px;
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/right_panel/HeaderButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default class HeaderButton extends React.Component<IProps> {
"mx_RoomHeader_button": true,
"mx_RoomHeader_button--highlight": isHighlighted,
"mx_RoomHeader_button--unread": isUnread,
[`mx_RightPanel_${name}`]: true,
[`mx_RoomHeader_button--${name}`]: true,
});

return (
Expand Down
Loading