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

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

@ -15,32 +15,38 @@ limitations under the License.
*/ */
.mx_ThreadPanel { .mx_ThreadPanel {
--ThreadPanel_header-button-size: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100px; height: 100px;
overflow: visible; overflow: visible;
.mx_BaseCard_header { .mx_BaseCard_header {
margin-bottom: 12px; margin-bottom: $spacing-12;
.mx_BaseCard_close, .mx_BaseCard_close,
.mx_BaseCard_back { .mx_BaseCard_back {
width: 24px; width: var(--ThreadPanel_header-button-size);
height: 24px; height: var(--ThreadPanel_header-button-size);
} }
.mx_BaseCard_back { .mx_BaseCard_back {
left: -4px; margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
} }
.mx_BaseCard_close { .mx_BaseCard_close {
right: -4px; margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
} }
} }
.mx_BaseCard_back ~ .mx_ThreadPanel__header { .mx_BaseCard_back ~ .mx_ThreadPanel__header {
width: calc(100% - 60px); width: calc(100% - 60px);
margin-left: 30px; margin-inline-start: var(--ThreadPanel_header-button-size);
span {
margin-inline-start: 6px;
}
} }
.mx_ThreadPanel__header { .mx_ThreadPanel__header {
@ -68,42 +74,16 @@ limitations under the License.
} }
.mx_MessageActionBar_maskButton { .mx_MessageActionBar_maskButton {
--size: 24px; width: var(--ThreadPanel_header-button-size);
width: var(--size); height: var(--ThreadPanel_header-button-size);
height: var(--size);
&::after { &::after {
mask-size: var(--size); mask-size: var(--ThreadPanel_header-button-size);
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); 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_AutoHideScrollbar,
.mx_RoomView_messagePanelSpinner { .mx_RoomView_messagePanelSpinner {
background-color: $background; background-color: $background;