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() { onQuoteClick: function() {
dis.dispatch({ dis.dispatch({
action: 'quote', action: 'quote_event',
text: this.props.eventTileOps.getInnerText(), event: this.props.mxEvent,
}); });
this.closeMenu(); this.closeMenu();
}, },

View file

@ -1,4 +1,17 @@
.mx_Autocomplete { .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; position: absolute;
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
@ -11,7 +24,7 @@
overflow: auto overflow: auto
} }
.mx_Autocomplete_ProviderSection { .mx_Autocomplete_ProviderSection, .mx_Quoting_section {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
} }
@ -74,13 +87,25 @@
outline: none; outline: none;
} }
.mx_Autocomplete_provider_name { .mx_Autocomplete_provider_name, .mx_Quoting_header {
margin: 12px; margin: 12px;
color: $primary-fg-color; color: $primary-fg-color;
font-weight: 400; font-weight: 400;
opacity: 0.4; opacity: 0.4;
} }
.mx_Quoting_title {
float: left;
}
.mx_Quoting_cancel {
float: right;
}
.mx_Quoting_clear {
clear: both;
}
/* styling for common completion elements */ /* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle { .mx_Autocomplete_Completion_subtitle {
font-style: italic; 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. /* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here. * 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; border-left: $accent-color 5px solid;
padding-left: 60px; padding-left: 60px;
background-color: $event-selected-color; background-color: $event-selected-color;
@ -209,7 +209,7 @@ limitations under the License.
visibility: visible; visibility: visible;
} }
.mx_EventTile_selected .mx_MessageTimestamp { .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px; left: 3px;
width: auto; width: auto;
} }