OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert Markdown button to SVG mask 

This makes it easier to theme via CSS, which helps with the dark theme.
pull/21833/head
J. Ryan Stinnett 2019-02-18 18:26:40 +00:00
parent 09ed795c79
commit 5fb990eb5f
12 changed files with 39 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
res/css/views/rooms/_MessageComposer.scss
View File

@ -255,14 +255,29 @@ limitations under the License.
}
.mx_MessageComposer_formatbar_markdown {
height: 17px;
width: 30px;
margin-right: 64px;
}
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
height: 10px;
width: 12px;
padding: 4px 4px 4px 0;
opacity: 0.8;
}
.mx_MessageComposer_formatbar_markdown,
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
mask-image: url('$(res)/img/markdown.svg');
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: $composer-button-color;
&.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
}
}
.mx_MatrixChat_useCompactLayout {

BIN
res/img/button-md-false.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 569 B

29
res/img/button-md-false.svg
View File

@ -1,29 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>D335F9E8-C813-47D7-B1BE-C8DEF2C8214F</title>
<desc>Created with sketchtool.</desc>
<defs>
<text id="text-1" font-family="markdown" font-size="14" font-weight="normal" fill="#DDDDDD">
<tspan x="829.125" y="759"></tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
<g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-829.000000, -745.000000)" fill="#DDDDDD">
<g id="button_md_off">
<use filter="url(#filter-2)" xlink:href="#text-1"></use>
<use filter="url(#filter-3)" xlink:href="#text-1"></use>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
res/img/button-md-false@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
res/img/button-md-false@3x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
res/img/button-md-true.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 483 B

14
res/img/button-md-true.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>2A63B135-4281-4FBB-A88C-012AE22E9594</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="14" font-family="markdown" font-weight="normal">
<g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-829.000000, -745.000000)" fill="#4A4A4A">
<text id="button_markdown_on">
<tspan x="829.125" y="759"></tspan>
</text>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 820 B

BIN
res/img/button-md-true@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 906 B

BIN
res/img/button-md-true@3x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

3
res/img/markdown.svg Normal file
View File

@ -0,0 +1,3 @@
<svg height="45" viewBox="0 0 69 45" width="69" xmlns="http://www.w3.org/2000/svg">
<path d="m6 0h57c3.3137085 0 6 2.6862915 6 6v33c0 3.3137085-2.6862915 6-6 6h-57c-3.3137085 0-6-2.6862915-6-6v-33c0-3.3137085 2.6862915-6 6-6zm23.3703704 11c-.6518551 0-1.1841955.3860101-1.5970371 1.158042l-7.7244444 14.7006993-7.7896296-14.7006993c-.4128416-.7720319-.9560461-1.158042-1.6296297-1.158042-.4780271 0-.86913425.1554763-1.1733333.4664336-.30419906.3109572-.4562963.7130511-.4562963 1.2062937v19.7510489c0 .4717973.13580111.8524461.40740741 1.1419581.27160629.2895119.63555329.4342657 1.09185189.4342657.478027 0 .8474061-.1393925 1.1081481-.4181818.2607421-.2787893.3911111-.6647994.3911111-1.158042v-14.8293706l6.4207408 11.8699301c.4128415.7505865.9451819 1.1258741 1.597037 1.1258741s1.1841955-.3752876 1.597037-1.1258741l6.3881482-11.9986014v14.9580419c0 .4932426.130369.8792527.3911111 1.158042.260742.2787893.619257.4181818 1.0755555.4181818.4780271 0 .8528382-.1393925 1.1244445-.4181818s.4074074-.6647994.4074074-1.158042v-19.7510489c0-.4932426-.1520972-.8953365-.4562963-1.2062937-.304199-.3109573-.6953062-.4664336-1.1733333-.4664336zm18.1296296 17.8786797-7.3180195-7.3180195c-.5857864-.5857865-1.5355339-.5857865-2.1213203 0-.5857865.5857864-.5857865 1.5355339 0 2.1213203l9.8994949 9.899495c.3056756.3056756.7104567.4518432 1.1109127.438503.400456.0133402.8052371-.1328274 1.1109127-.438503l9.899495-9.899495c.5857864-.5857864.5857864-1.5355339 0-2.1213203-.5857865-.5857865-1.535534-.5857865-2.1213204 0l-7.4601551 7.4601551v-16.5208153c0-.8284271-.6715729-1.5-1.5-1.5s-1.5.6715729-1.5 1.5z" fill="#d8d8d8" fill-rule="evenodd"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

17
src/components/views/rooms/MessageComposer.js
View File

@ -499,15 +499,16 @@ export default class MessageComposer extends React.Component {
<div className="mx_MessageComposer_formatbar_wrapper">
<div className="mx_MessageComposer_formatbar">
{ formatButtons }
<div style={{flex: 1}}></div>
<img title={this.state.inputState.isRichTextEnabled ? _t("Turn Markdown on") : _t("Turn Markdown off")}
onMouseDown={this.onToggleMarkdownClicked}
className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
src={require(`../../../../res/img/button-md-${!this.state.inputState.isRichTextEnabled}.png`)} />
<div style={{ flex: 1 }}></div>
<AccessibleButton className="mx_MessageComposer_formatbar_markdown mx_MessageComposer_markdownDisabled"
onMouseDown={this.onToggleMarkdownClicked}
title={_t("Markdown is disabled")}
/>
<AccessibleButton element="img" title={_t("Hide Text Formatting Toolbar")}
onClick={this.onToggleFormattingClicked}
className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
src={require("../../../../res/img/icon-text-cancel.svg")} />
onClick={this.onToggleFormattingClicked}
className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
src={require("../../../../res/img/icon-text-cancel.svg")}
/>
</div>
</div>;
}

14
src/components/views/rooms/MessageComposerInput.js
View File

@ -60,6 +60,7 @@ import ReplyPreview from "./ReplyPreview";
import RoomViewStore from '../../../stores/RoomViewStore';
import ReplyThread from "../elements/ReplyThread";
import {ContentHelpers} from 'matrix-js-sdk';
import AccessibleButton from '../elements/AccessibleButton';
const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
const REGEX_EMOJI_WHITESPACE = new RegExp('(?:^|\\s)(' + asciiRegexp + ')\\s$');
@ -1582,6 +1583,11 @@ export default class MessageComposerInput extends React.Component {
placeholder = undefined;
}
const markdownClasses = classNames({
mx_MessageComposer_input_markdownIndicator: true,
mx_MessageComposer_markdownDisabled: this.state.isRichTextEnabled,
});
return (
<div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}>
<div className="mx_MessageComposer_autocomplete_wrapper">
@ -1596,10 +1602,10 @@ export default class MessageComposerInput extends React.Component {
/>
</div>
<div className={className}>
<img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
onMouseDown={this.onMarkdownToggleClicked}
title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
src={require(`../../../../res/img/button-md-${!this.state.isRichTextEnabled}.png`)} />
<AccessibleButton className={markdownClasses}
onMouseDown={this.onMarkdownToggleClicked}
title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
/>
<Editor ref={this._collectEditor}
dir="auto"
className="mx_MessageComposer_editor"