From 22bf6e7969a6897712e1c1230b144c8a27f1b6d5 Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Wed, 7 Sep 2016 22:52:37 +0530
Subject: [PATCH] RTE format bar enhancements

---
 .../views/elements/RichText.css               | 13 ++++++++++
 .../views/rooms/MessageComposer.css           | 23 ++++++++++++++---
 src/skins/vector/img/button-text-code-o-n.svg | 25 +++++++++++++++++++
 src/skins/vector/img/button-text-code.svg     | 25 +++++++++++++++++++
 .../vector/img/button-text-underline-o-n.svg  | 18 +++++++++++++
 .../vector/img/button-text-underline.svg      | 18 +++++++++++++
 6 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 src/skins/vector/img/button-text-code-o-n.svg
 create mode 100644 src/skins/vector/img/button-text-code.svg
 create mode 100644 src/skins/vector/img/button-text-underline-o-n.svg
 create mode 100644 src/skins/vector/img/button-text-underline.svg

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
index 171482a362..3d8d8f3bbd 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
@@ -20,3 +20,16 @@
 .mx_Markdown_ITALIC {
     font-style: italic;
 }
+
+.mx_Markdown_CODE {
+    padding: .2em 0;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(0,0,0,.04);
+    border-radius: 3px;
+}
+
+.mx_Markdown_HR {
+    color: rgba(0, 0, 0, 0.5);
+    text-decoration: #e7e7e7 double line-through;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
index b1cd3ce0e6..45bc39cf3b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
@@ -60,6 +60,7 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     min-height: 60px;
+    justify-content: center;
     align-items: flex-start;
     font-size: 14px;
     margin-right: 6px;
@@ -138,19 +139,26 @@ limitations under the License.
     margin: 0 11px;
 }
 
-.mx_MessageComposer_formatbar {
-    display: flex;
-
-    height: 30px;
+.mx_MessageComposer_formatbar_wrapper {
     width: 100%;
     background-color: #f7f7f7;
     box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+
+.mx_MessageComposer_formatbar {
+    margin: auto;
+    max-width: 960px;
+    display: flex;
+
+    height: 30px;
 
     box-sizing: border-box;
     padding-left: 62px;
 
     flex-direction: row;
     align-items: center;
+    font-size: 10px;
+    color: #888;
 }
 
 .mx_MessageComposer_formatbar * {
@@ -163,6 +171,11 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_MessageComposer_format_button_disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
 .mx_MessageComposer_formatbar_cancel {
     margin-right: 22px;
 }
@@ -172,6 +185,8 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input_markdownIndicator {
+    cursor: pointer;
+    height: 10px;
     padding: 4px 4px 4px 0;
     opacity: 0.8;
 }
diff --git a/src/skins/vector/img/button-text-code-o-n.svg b/src/skins/vector/img/button-text-code-o-n.svg
new file mode 100644
index 0000000000..8d1439c97b
--- /dev/null
+++ b/src/skins/vector/img/button-text-code-o-n.svg
@@ -0,0 +1,25 @@
+<?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.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>B76754AB-42E6-48D2-9443-80CBC0DE02ED</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(-422.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_code_ON" transform="translate(128.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <polygon id="/" fill="#FFFFFF" points="15.9262695 4.14746094 12.9990234 12 12.1074219 12 15.034668 4.14746094"></polygon>
+                    <g id="Group-5" opacity="0.5" transform="translate(17.000000, 5.000000)" stroke="#FFFFFF" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                    <g id="Group-5-Copy" opacity="0.5" transform="translate(9.500000, 8.000000) scale(-1, 1) translate(-9.500000, -8.000000) translate(8.000000, 5.000000)" stroke="#FFFFFF" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-code.svg b/src/skins/vector/img/button-text-code.svg
new file mode 100644
index 0000000000..24026cb709
--- /dev/null
+++ b/src/skins/vector/img/button-text-code.svg
@@ -0,0 +1,25 @@
+<?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.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>4CAFF494-61AE-4916-AFE8-D1E62F7CF0DE</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_on" transform="translate(-422.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_code" transform="translate(128.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <polygon id="/" fill-opacity="0.7" fill="#000000" points="15.9262695 4.14746094 12.9990234 12 12.1074219 12 15.034668 4.14746094"></polygon>
+                    <g id="Group-5" opacity="0.5" transform="translate(17.000000, 5.000000)" stroke="#4A4A4A" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                    <g id="Group-5-Copy" opacity="0.5" transform="translate(9.500000, 8.000000) scale(-1, 1) translate(-9.500000, -8.000000) translate(8.000000, 5.000000)" stroke="#4A4A4A" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-underline-o-n.svg b/src/skins/vector/img/button-text-underline-o-n.svg
new file mode 100644
index 0000000000..870be3ce6a
--- /dev/null
+++ b/src/skins/vector/img/button-text-underline-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.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>FD84FF7C-43E4-4312-90AB-5A59AD018377</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(-390.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_underline_ON" transform="translate(96.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M17.0092773,4.14746094 L17.0092773,9.22851562 C17.0092773,10.1237024 16.738935,10.8273086 16.1982422,11.3393555 C15.6575494,11.8514023 14.9145555,12.1074219 13.9692383,12.1074219 C13.0239211,12.1074219 12.2925644,11.849612 11.7751465,11.3339844 C11.2577285,10.8183568 10.9990234,10.1093795 10.9990234,9.20703125 L10.9990234,4.14746094 L11.9121094,4.14746094 L11.9121094,9.27148438 C11.9121094,9.92676109 12.091144,10.4298485 12.4492188,10.7807617 C12.8072935,11.1316749 13.3336554,11.3071289 14.0283203,11.3071289 C14.6907585,11.3071289 15.2010073,11.1307798 15.559082,10.7780762 C15.9171567,10.4253726 16.0961914,9.91959965 16.0961914,9.26074219 L16.0961914,4.14746094 L17.0092773,4.14746094 Z" id="U" fill="#FFFFFF"></path>
+                    <path d="M9.5,13.5 L18.7195444,13.5" id="Line" stroke="#4A4A4A" stroke-linecap="round" opacity="0.5" transform="translate(14.109772, 13.500000) scale(1, -1) translate(-14.109772, -13.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-underline.svg b/src/skins/vector/img/button-text-underline.svg
new file mode 100644
index 0000000000..26f448539c
--- /dev/null
+++ b/src/skins/vector/img/button-text-underline.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.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>13E7EE68-9B16-4A3D-8F9F-31E4BAB7E438</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_on" transform="translate(-390.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_underline" transform="translate(96.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M17.0092773,4.14746094 L17.0092773,9.22851562 C17.0092773,10.1237024 16.738935,10.8273086 16.1982422,11.3393555 C15.6575494,11.8514023 14.9145555,12.1074219 13.9692383,12.1074219 C13.0239211,12.1074219 12.2925644,11.849612 11.7751465,11.3339844 C11.2577285,10.8183568 10.9990234,10.1093795 10.9990234,9.20703125 L10.9990234,4.14746094 L11.9121094,4.14746094 L11.9121094,9.27148438 C11.9121094,9.92676109 12.091144,10.4298485 12.4492188,10.7807617 C12.8072935,11.1316749 13.3336554,11.3071289 14.0283203,11.3071289 C14.6907585,11.3071289 15.2010073,11.1307798 15.559082,10.7780762 C15.9171567,10.4253726 16.0961914,9.91959965 16.0961914,9.26074219 L16.0961914,4.14746094 L17.0092773,4.14746094 Z" id="U" fill-opacity="0.7" fill="#000000"></path>
+                    <path d="M9.5,13.5 L18.7195444,13.5" id="Line" stroke="#4A4A4A" stroke-linecap="round" opacity="0.5" transform="translate(14.109772, 13.500000) scale(1, -1) translate(-14.109772, -13.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file