PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add legend and style it

Browse source
This commit is contained in:
Bruno Windels 2019-08-30 18:09:23 +02:00
parent b16f983a1f
commit b7768f34f2
2 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
res/css/views/rooms/_SendMessageComposer.scss
View file

@ -30,7 +30,7 @@ limitations under the License.
flex-direction: column; flex-direction: column;
// min-height at this level so the mx_BasicMessageComposer_input // min-height at this level so the mx_BasicMessageComposer_input
// still stays vertically centered when less than 50px // still stays vertically centered when less than 50px
min-height: 50px; min-height: 42px;
.mx_BasicMessageComposer_input { .mx_BasicMessageComposer_input {
padding: 3px 0; padding: 3px 0;
@ -38,7 +38,7 @@ limitations under the License.
// in it's parent vertically // in it's parent vertically
// while keeping the autocomplete at the top // while keeping the autocomplete at the top
// of the composer. The parent needs to be a flex container for this to work. // of the composer. The parent needs to be a flex container for this to work.
margin: auto 0; margin: auto 0 0 0;
// max-height at this level so autocomplete doesn't get scrolled too // max-height at this level so autocomplete doesn't get scrolled too
max-height: 140px; max-height: 140px;
overflow-y: auto; overflow-y: auto;
@ -49,5 +49,31 @@ limitations under the License.
position: relative; position: relative;
height: 0; height: 0;
} }
.mx_SendMessageComposer_legend {
height: 16px;
box-sizing: content-box;
font-size: 8px;
line-height: 10px;
padding: 0 0 2px 0;
color: $light-fg-color;
user-select: none;
visibility: hidden;
* {
display: inline-block;
margin: 0 10px 0 0;
padding: 1px;
}
code {
border-radius: 2px;
background-color: $focus-bg-color;
}
&.mx_SendMessageComposer_legend_shown {
visibility: visible;
}
}
} }

1
src/components/views/rooms/SendMessageComposer.js
View file

@ -343,6 +343,7 @@ export default class SendMessageComposer extends React.Component {
placeholder={this.props.placeholder} placeholder={this.props.placeholder}
onChange={this._saveStoredEditorState} onChange={this._saveStoredEditorState}
/> />
<div className="mx_SendMessageComposer_legend"><strong>**bold**</strong><em>_italic_</em><span>~strikethrough~</span><code>`code`</code><span>&gt; quote</span></div>
</div> </div>
); );
} }