PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Integrate thread panel's header style declarations with those of BaseCard (#8651)

Browse source 
* Variable on mx_BaseCard_Header

- Use a variable for margin of buttons on mx_BaseCard_header
- Reduce default margin instead of setting negative left and right values
- Set margin to span in order to ensure spacing between the back button and the span (6px: 30px - 24px)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use the same variable to the mask button

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete declarations - mx_ThreadPanel_button

mx_ThreadPanel_button does not seem to be used anywhere.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-23 07:42:48 +00:00 committed by GitHub
parent 5446d5d6ba
commit 67b0078b33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/right_panel/_BaseCard.scss
View file

@ -25,7 +25,9 @@ limitations under the License.
flex: 1;
.mx_BaseCard_header {
margin: 4px 0;
--BaseCard_header_button-margin: $spacing-12;
margin: $spacing-4 0;
> h2 {
margin: 0 44px;
@ -36,12 +38,13 @@ limitations under the License.
white-space: nowrap;
}
.mx_BaseCard_back, .mx_BaseCard_close {
.mx_BaseCard_back,
.mx_BaseCard_close {
position: absolute;
background-color: rgba(141, 151, 165, 0.2);
height: 20px;
width: 20px;
margin: 12px;
margin: var(--BaseCard_header_button-margin);
top: 0;
border-radius: 50%;

50
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -15,32 +15,38 @@ limitations under the License.
*/
.mx_ThreadPanel {
--ThreadPanel_header-button-size: 24px;
display: flex;
flex-direction: column;
height: 100px;
overflow: visible;
.mx_BaseCard_header {
margin-bottom: 12px;
margin-bottom: $spacing-12;
.mx_BaseCard_close,
.mx_BaseCard_back {
width: 24px;
height: 24px;
width: var(--ThreadPanel_header-button-size);
height: var(--ThreadPanel_header-button-size);
}
.mx_BaseCard_back {
left: -4px;
margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
}
.mx_BaseCard_close {
right: -4px;
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
}
}
.mx_BaseCard_back ~ .mx_ThreadPanel__header {
width: calc(100% - 60px);
margin-left: 30px;
margin-inline-start: var(--ThreadPanel_header-button-size);
span {
margin-inline-start: 6px;
}
}
.mx_ThreadPanel__header {
@ -68,42 +74,16 @@ limitations under the License.
}
.mx_MessageActionBar_maskButton {
--size: 24px;
width: var(--size);
height: var(--size);
width: var(--ThreadPanel_header-button-size);
height: var(--ThreadPanel_header-button-size);
&::after {
mask-size: var(--size);
mask-size: var(--ThreadPanel_header-button-size);
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
}
}
}
.mx_ThreadPanel_button {
width: 20px;
height: 20px;
margin-top: -3px;
margin-bottom: auto;
position: relative;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
}
&.mx_ThreadPanel_OptionsButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
}
.mx_AutoHideScrollbar,
.mx_RoomView_messagePanelSpinner {
background-color: $background;