From 7e563b89c73523627532b464a2e688c5b8f00b15 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Fri, 27 May 2016 10:17:01 +0530 Subject: [PATCH 1/4] initial version of rich text editor --- package.json | 1 + src/vector/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/package.json b/package.json index c2400ced..8a47fbee 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "dependencies": { "babel-polyfill": "^6.5.0", "classnames": "^2.1.2", + "draft-js": "^0.7.0", "extract-text-webpack-plugin": "^0.9.1", "filesize": "^3.1.2", "flux": "~2.0.3", diff --git a/src/vector/index.js b/src/vector/index.js index 0ca1c698..6d966d2f 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -26,6 +26,7 @@ require('../../vector/components.css'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); +require('draft-js/dist/Draft.css'); // add React and ReactPerf to the global namespace, to make them easier to From 819e06e2cd66540e58ba0afece2f8d28de1eea2c Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Fri, 10 Jun 2016 04:41:59 +0530 Subject: [PATCH 2/4] MessageComposer styling for Draft --- .../views/elements/RichText.css | 14 ++++++++++ .../views/rooms/MessageComposer.css | 27 ++++++++++++------- 2 files changed, 31 insertions(+), 10 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css 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 new file mode 100644 index 00000000..8b8d3bd9 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css @@ -0,0 +1,14 @@ +.mx_UserPill { + color: white; + background-color: #76cfa6; + padding: 2px 8px; + border-radius: 16px; +} + +.mx_RoomPill { + background-color: white; + color: #76cfa6; + border: 1px solid #76cfa6; + padding: 2px 8px; + border-radius: 16px; +} 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 daf15001..a6d30b37 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 @@ -22,15 +22,16 @@ limitations under the License. } .mx_MessageComposer_row { - display: table-row; + display: flex; + flex-direction: row; + align-items: center; width: 100%; } .mx_MessageComposer .mx_MessageComposer_avatar { - display: table-cell; + /*display: table-cell;*/ padding-left: 10px; padding-right: 28px; - vertical-align: middle; } .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { @@ -42,9 +43,8 @@ limitations under the License. } .mx_MessageComposer_noperm_error { - display: table-cell; + /*display: table-cell;*/ width: 100%; - vertical-align: middle; height: 60px; text-align: center; font-style: italic; @@ -52,10 +52,17 @@ limitations under the License. } .mx_MessageComposer_input { - display: table-cell; - width: 100%; + /*display: table-cell;*/ + flex: 1; vertical-align: middle; - height: 60px; + min-height: 60px; + max-height: 120px; + display: flex; + align-items: center; +} + +.mx_MessageComposer_input .DraftEditor-root { + flex: 1; } .mx_MessageComposer_input textarea { @@ -92,8 +99,8 @@ limitations under the License. .mx_MessageComposer_hangup, .mx_MessageComposer_voicecall, .mx_MessageComposer_videocall { - display: table-cell; - vertical-align: middle; + /*display: table-cell;*/ + /*vertical-align: middle;*/ padding-left: 10px; padding-right: 10px; cursor: pointer; From f6ed21559a0d298cec76a9ed9f3638f3b0ffc86a Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Sat, 11 Jun 2016 15:54:43 +0530 Subject: [PATCH 3/4] RTE mode switch styling & cleanup --- .../css/matrix-react-sdk/views/rooms/MessageComposer.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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 a6d30b37..8cced52c 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 @@ -29,7 +29,6 @@ limitations under the License. } .mx_MessageComposer .mx_MessageComposer_avatar { - /*display: table-cell;*/ padding-left: 10px; padding-right: 28px; } @@ -43,7 +42,6 @@ limitations under the License. } .mx_MessageComposer_noperm_error { - /*display: table-cell;*/ width: 100%; height: 60px; text-align: center; @@ -52,13 +50,18 @@ limitations under the License. } .mx_MessageComposer_input { - /*display: table-cell;*/ flex: 1; vertical-align: middle; min-height: 60px; max-height: 120px; display: flex; align-items: center; + overflow: auto; + transition: 0.6s border-top ease; + border-top: 2px solid rgba(255, 255, 255, 0); +} +.mx_MessageComposer_input_rte { + border-top: 2px solid #76cfa6; /* placeholder RTE indicator */ } .mx_MessageComposer_input .DraftEditor-root { From eb37032d8a92292c2ed9b9734b101aa60696f8ae Mon Sep 17 00:00:00 2001 From: Pedro Ferreira Date: Sun, 12 Jun 2016 01:04:22 +0200 Subject: [PATCH 4/4] Markdown: styles for bold/italics --- .../css/matrix-react-sdk/views/elements/RichText.css | 8 ++++++++ 1 file changed, 8 insertions(+) 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 8b8d3bd9..171482a3 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 @@ -12,3 +12,11 @@ padding: 2px 8px; border-radius: 16px; } + +.mx_Markdown_BOLD { + font-weight: bold; +} + +.mx_Markdown_ITALIC { + font-style: italic; +}