imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deprecate mx_RightPanel_headerButton class (#10821)

Browse source 
* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g

* Conform the selectors to our naming policy: with flag (--)

- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g

* Update a Jest snapshot

* Move the declarations and Sass variables

- Move Sass variables to the place where they are used
This commit is contained in:
Suguru Hirahara 2023-05-16 15:42:58 +00:00 • committed by GitHub
parent 6f1020bb92
commit e01d47923d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 61 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

82
res/css/structures/_RightPanel.pcss
View file

@ -34,40 +34,6 @@ limitations under the License.
/** Fixme - factor this out with the main header **/
/* See: mx_RoomHeader_button, of which this is a copy.
* TODO: factor out a common component to avoid this duplication.
*/
.mx_RightPanel_headerButton {
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_RightPanel_threadsButton::before {
mask-image: url("$(res)/img/element-icons/room/thread.svg");
}
@ -89,41 +55,6 @@ limitations under the License.
}
}
.mx_RightPanel_headerButton_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_RightPanel_headerButton_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_RightPanel_timelineCardButton {
&::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
@ -131,19 +62,6 @@ limitations under the License.
}
}
.mx_RightPanel_headerButton_unread {
&::before {
background-color: $room-icon-unread-color !important;
}
}
.mx_RightPanel_headerButton_highlight,
.mx_RightPanel_headerButton:hover {
&::before {
background-color: $accent !important;
}
}
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo {
order: 2;

48
res/css/views/rooms/_RoomHeader.pcss
View file

@ -194,6 +194,54 @@ limitations under the License.
}
}
.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;