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

Force style rules of buttons on MessageActionBar used with maskButton selector (#8780)

Browse source 
* Include mx_MessageActionBar_maskButton::after in mx_MessageActionBar_maskButton

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

* Include mx_MessageActionBar_maskButton:hover::after in mx_MessageActionBar_maskButton

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

* Ensure buttons on message action bar used only with mx_MessageActionBar_maskButton as expected

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

* yarn run lint:style --fix

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

* Include mx_Indicator in mx_MessageActionBar_threadButton

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

* yarn run lint:style --fix

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

* Include mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton in mx_MessageActionBar_downloadButton

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

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-08 09:08:49 +00:00 • committed by GitHub
parent 8362174039
commit 66daaf0748
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

126
res/css/views/messages/_MessageActionBar.scss
View file

@ -75,81 +75,85 @@ limitations under the License.
cursor: not-allowed; cursor: not-allowed;
opacity: .75; opacity: .75;
} }
}
.mx_MessageActionBar_maskButton::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
mask-size: 18px; mask-size: 18px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $secondary-content; background-color: $secondary-content;
} }
.mx_MessageActionBar_maskButton:hover::after { &:hover::after {
background-color: $primary-content; background-color: $primary-content;
} }
.mx_MessageActionBar_reactButton::after { &.mx_MessageActionBar_reactButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
} }
.mx_MessageActionBar_replyButton::after { &.mx_MessageActionBar_replyButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
} }
.mx_MessageActionBar_threadButton::after { &.mx_MessageActionBar_threadButton {
mask-image: url('$(res)/img/element-icons/message/thread.svg'); &::after {
} mask-image: url('$(res)/img/element-icons/message/thread.svg');
}
.mx_MessageActionBar_threadButton .mx_Indicator { .mx_Indicator {
background: $links; background: $links;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
}
.mx_MessageActionBar_editButton::after { &.mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
} }
.mx_MessageActionBar_optionsButton::after { &.mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/element-icons/context-menu.svg'); mask-image: url('$(res)/img/element-icons/context-menu.svg');
} }
.mx_MessageActionBar_resendButton::after { &.mx_MessageActionBar_resendButton::after {
mask-image: url('$(res)/img/element-icons/retry.svg'); mask-image: url('$(res)/img/element-icons/retry.svg');
} }
.mx_MessageActionBar_cancelButton::after { &.mx_MessageActionBar_cancelButton::after {
mask-image: url('$(res)/img/element-icons/trashcan.svg'); mask-image: url('$(res)/img/element-icons/trashcan.svg');
} }
.mx_MessageActionBar_downloadButton::after { &.mx_MessageActionBar_downloadButton {
mask-size: 14px; &::after {
mask-image: url('$(res)/img/download.svg'); mask-size: 14px;
} mask-image: url('$(res)/img/download.svg');
.mx_MessageActionBar_expandMessageButton::after { &.mx_MessageActionBar_downloadSpinnerButton::after {
mask-size: 12px; background-color: transparent; // hide the download icon mask
mask-image: url('$(res)/img/element-icons/expand-message.svg'); }
} }
}
.mx_MessageActionBar_collapseMessageButton::after { &.mx_MessageActionBar_expandMessageButton::after {
mask-size: 12px; mask-size: 12px;
mask-image: url('$(res)/img/element-icons/collapse-message.svg'); mask-image: url('$(res)/img/element-icons/expand-message.svg');
} }
.mx_MessageActionBar_viewInRoom::after { &.mx_MessageActionBar_collapseMessageButton::after {
mask-image: url('$(res)/img/element-icons/view-in-room.svg'); mask-size: 12px;
} mask-image: url('$(res)/img/element-icons/collapse-message.svg');
}
.mx_MessageActionBar_copyLinkToThread::after { &.mx_MessageActionBar_viewInRoom::after {
mask-image: url('$(res)/img/element-icons/link.svg'); mask-image: url('$(res)/img/element-icons/view-in-room.svg');
} }
.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after { &.mx_MessageActionBar_copyLinkToThread::after {
background-color: transparent; // hide the download icon mask mask-image: url('$(res)/img/element-icons/link.svg');
}
} }