Extract message options button to action bar

This adds a new action bar component to hold multiple per-message actions. This
existing options button has moved to this new component, and is currently the
only action.
This commit is contained in:
J. Ryan Stinnett 2019-04-26 12:14:30 +01:00
parent 530c92e03d
commit ed8bbc7082
6 changed files with 148 additions and 61 deletions

View file

@ -121,7 +121,7 @@ limitations under the License.
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.menu .mx_EventTile_line
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
{
background-color: $event-selected-color;
}
@ -206,7 +206,7 @@ limitations under the License.
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.menu > div > a > .mx_MessageTimestamp {
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
visibility: visible;
}
@ -219,21 +219,8 @@ limitations under the License.
width: auto;
}
.mx_EventTile_optionsButton {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
background-image: url($edit-button-url);
user-select: none;
}
.mx_EventTile:hover .mx_EventTile_optionsButton,
.mx_EventTile.menu .mx_EventTile_optionsButton {
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
visibility: visible;
}
@ -551,10 +538,6 @@ limitations under the License.
top: 3px;
}
.mx_EventTile_optionsButton {
top: 3px;
}
.mx_EventTile_readAvatars {
top: 27px;
}