CSS and Context Menu tweaks for Rich Quoting/Replies

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2017-12-10 12:46:12 +00:00
parent 9835e2e0b4
commit 10c6f24a83
No known key found for this signature in database
GPG Key ID: 3F879DA5AD802A5E
3 changed files with 31 additions and 6 deletions

View File

@ -171,8 +171,8 @@ module.exports = React.createClass({
onQuoteClick: function() {
dis.dispatch({
action: 'quote',
text: this.props.eventTileOps.getInnerText(),
action: 'quote_event',
event: this.props.mxEvent,
});
this.closeMenu();
},

View File

@ -1,4 +1,17 @@
.mx_Autocomplete {
position: absolute;
bottom: 0;
z-index: 1001;
width: 100%;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
overflow: auto
}
.mx_Quoting {
position: absolute;
bottom: 0;
z-index: 1000;
@ -11,7 +24,7 @@
overflow: auto
}
.mx_Autocomplete_ProviderSection {
.mx_Autocomplete_ProviderSection, .mx_Quoting_section {
border-bottom: 1px solid $primary-hairline-color;
}
@ -74,13 +87,25 @@
outline: none;
}
.mx_Autocomplete_provider_name {
.mx_Autocomplete_provider_name, .mx_Quoting_header {
margin: 12px;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}
.mx_Quoting_title {
float: left;
}
.mx_Quoting_cancel {
float: right;
}
.mx_Quoting_clear {
clear: both;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;

View File

@ -109,7 +109,7 @@ limitations under the License.
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected .mx_EventTile_line {
.mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 5px solid;
padding-left: 60px;
background-color: $event-selected-color;
@ -209,7 +209,7 @@ limitations under the License.
visibility: visible;
}
.mx_EventTile_selected .mx_MessageTimestamp {
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}