Formatting toggle, markdown indicator, quoting

src/components/views/context_menus/MessageContextMenu.js

@@ -84,6 +84,14 @@ module.exports = React.createClass({
         if (this.props.onFinished) this.props.onFinished();
     },
 
+    onQuoteClick: function () {
+        console.log(this.props.mxEvent);
+        dis.dispatch({
+            action: 'quote',
+            event: this.props.mxEvent,
+        });
+    },
+
     render: function() {
         var eventStatus = this.props.mxEvent.status;
         var resendButton;
@@ -141,6 +149,12 @@ module.exports = React.createClass({
             </div>
         );
 
+        const quoteButton = (
+            <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
+                Quote
+            </div>
+        );
+
         return (
             <div>
                 {resendButton}
@@ -149,6 +163,7 @@ module.exports = React.createClass({
                 {viewSourceButton}
                 {unhidePreviewButton}
                 {permalinkButton}
+                {quoteButton}
             </div>
         );
     }

src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css

@@ -57,11 +57,10 @@ limitations under the License.
 .mx_MessageComposer_input {
     flex: 1;
     vertical-align: middle;
-    min-height: 60px;
-    max-height: 120px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    overflow: auto;
+    min-height: 60px;
+    align-items: flex-start;
     font-size: 14px;
     margin-right: 6px;
 }
@@ -71,7 +70,17 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input .DraftEditor-root {
+    width: 100%;
     flex: 1;
+    max-height: 120px;
+    overflow: auto;
+}
+
+.mx_MessageComposer_input blockquote {
+    color: rgb(119, 119, 119);
+    margin: 0 0 16px;
+    padding: 0 15px;
+    border-left: 4px solid rgb(221, 221, 221);
 }
 
 .mx_MessageComposer_input textarea {
@@ -89,7 +98,8 @@ limitations under the License.
     color: #454545;
     background-color: #fff;
     font-size: 14px;
-
+    max-height: 120px;
+    overflow: auto;
     /* needed for FF */
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
 }
@@ -123,6 +133,11 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_MessageComposer_formatting {
+    cursor: pointer;
+    margin: 0 11px;
+}
+
 .mx_MessageComposer_formatbar {
     display: flex;
 
@@ -142,6 +157,21 @@ limitations under the License.
     margin-right: 4px;
 }
 
-.mx_MessageComposer_format_button {
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
     cursor: pointer;
 }
+
+.mx_MessageComposer_formatbar_cancel {
+    margin-right: 22px;
+}
+
+.mx_MessageComposer_formatbar_markdown {
+    margin-right: 64px;
+}
+
+.mx_MessageComposer_input_markdownIndicator {
+    padding: 4px 4px 4px 0;
+    opacity: 0.8;
+}

src/skins/vector/img/button-md-false.svg

@@ -0,0 +1,29 @@
+<?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>

src/skins/vector/img/button-md-true.svg

@@ -0,0 +1,14 @@
+<?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>

src/skins/vector/img/button-text-strike-o-n.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" 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>69B11088-0F3A-4E14-BD9F-4FEF4115E99B</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-358.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_strike_ON" transform="translate(64.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M16.5107422,9.68842231 C16.5107422,10.3795065 16.2600937,10.9184008 15.7587891,11.3051215 C15.2574845,11.6918422 14.5771527,11.8851997 13.7177734,11.8851997 C12.7867792,11.8851997 12.0706405,11.7652464 11.5693359,11.5253364 L11.5693359,10.644477 C11.8916032,10.7805454 12.2425111,10.8879662 12.6220703,10.9667426 C13.0016295,11.0455191 13.3776023,11.0849067 13.75,11.0849067 C14.358727,11.0849067 14.8170558,10.9694293 15.125,10.7384711 C15.4329442,10.507513 15.5869141,10.1861457 15.5869141,9.77435981 C15.5869141,9.50222303 15.5323085,9.27932487 15.4230957,9.10565864 C15.3138829,8.9319924 15.1312676,8.77175638 14.8752441,8.62494575 C14.6192207,8.47813512 14.2298203,8.31163288 13.7070312,8.12543403 C12.9765588,7.86403949 12.4546728,7.55430952 12.1413574,7.19623481 C11.8280421,6.8381601 11.6713867,6.37087962 11.6713867,5.79437934 C11.6713867,5.18923309 11.8987607,4.70762983 12.3535156,4.34955512 C12.8082705,3.99148041 13.409827,3.81244575 14.1582031,3.81244575 C14.938806,3.81244575 15.656735,3.95567348 16.3120117,4.24213325 L16.0273438,5.03705512 C15.3792285,4.76491834 14.7490265,4.628852 14.1367188,4.628852 C13.6533179,4.628852 13.2755547,4.7326921 13.003418,4.94037543 C12.7312812,5.14805876 12.5952148,5.43630458 12.5952148,5.80512153 C12.5952148,6.07725831 12.6453446,6.30015647 12.7456055,6.4738227 C12.8458664,6.64748893 13.0150541,6.80682979 13.2531738,6.95185004 C13.4912935,7.0968703 13.8556291,7.25710633 14.3461914,7.43256293 C15.1697632,7.72618419 15.736408,8.04128521 16.0461426,8.37787543 C16.3558772,8.71446566 16.5107422,9.15131025 16.5107422,9.68842231 L16.5107422,9.68842231 Z" id="S-" fill="#FFFFFF"></path>
+                    <path d="M9.5,8.5 L18.7195444,7.5" id="Line" stroke="#FFFFFF" stroke-linecap="round" opacity="0.5" transform="translate(14.109772, 8.000000) scale(1, -1) translate(-14.109772, -8.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-text-cancel.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="9px" viewBox="0 0 11 9" 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>28D80248-63BA-4A5F-9216-4CFE72784BAC</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-915.000000, -749.000000)" stroke="#000000">
+            <g id="icon_text_cancel" transform="translate(916.000000, 749.000000)">
+                <path d="M0.45,0.45 L8.55,8.55" id="Line"></path>
+                <path d="M0.45,0.45 L8.55,8.55" id="Line-Copy-2" transform="translate(4.500000, 4.500000) scale(-1, 1) translate(-4.500000, -4.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>