[Fix] Preformatted text style

AlphaWong · Oct 16, 2019 · 72bdd27 · 72bdd27
1 parent ac66ee5
commit 72bdd27
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "homepage": "http://evgeny-nadymov.github.io/telegram-react",
   "name": "telegram_react",
-  "version": "0.0.470",
+  "version": "0.0.471",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.9.2",

diff --git a/src/Components/ColumnMiddle/InputBoxControl.js b/src/Components/ColumnMiddle/InputBoxControl.js
@@ -627,16 +627,14 @@ class InputBoxControl extends Component {
                             <div
                                 id='inputbox-message'
                                 ref={this.newMessageRef}
-                                key={new Date()}
                                 placeholder={t('Message')}
                                 contentEditable
                                 suppressContentEditableWarning
                                 onKeyDown={this.handleKeyDown}
                                 onKeyUp={this.handleKeyUp}
                                 onPaste={this.handlePaste}
-                                onInput={this.handleInput}>
-                                {content}
-                            </div>
+                                onInput={this.handleInput}
+                            />
                         </div>
                         <div className='inputbox-right-column'>
                             <input

diff --git a/src/Components/InstantView/Article.css b/src/Components/InstantView/Article.css
@@ -103,11 +103,8 @@ article > p {
     margin: 0 0 12px;
 }
 article pre {
-    font-family: Menlo;
-    margin: 14px 0;
-    padding: 7px 12px;
-    background: #f5f8fc;
-    font-size: 16px;
+    margin: 12px 0;
+    padding: 6px 12px;
     white-space: pre-wrap;
     word-wrap: break-word;
 }

diff --git a/src/Components/Message/Message.css b/src/Components/Message/Message.css
@@ -29,20 +29,19 @@ code {
 }
 
 pre {
+    font-size: 90%;
+    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+
+    margin-top: 6px;
     margin-bottom: 0;
-    overflow: auto;
-    padding: 3px;
-    border: 1px solid #eee;
-    max-height: none;
-    font-size: inherit;
+    padding: 6px 12px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
 
-    display: block;
-    line-height: 1.42857143;
-    word-break: break-all;
+    white-space: pre-wrap;
     word-wrap: break-word;
-    color: #333;
-    background-color: #f5f5f5;
-    border-radius: 4px;
+    word-break: break-word;
 }
 
 pre code {

diff --git a/src/TelegramApp.js b/src/TelegramApp.js
@@ -39,6 +39,15 @@ const styles = theme => ({
         },
         code: {
             color: theme.palette.primary.dark
+        },
+        pre: {
+            borderColor: theme.palette.divider,
+            color: theme.palette.primary.dark,
+            // background: theme.palette.primary.main + '11'
+            '&::selection': {
+                color: theme.palette.text.primary,
+                backgroundColor: 'highlight'
+            }
         }
     }
 });

diff --git a/src/Utils/Message.js b/src/Utils/Message.js
@@ -207,12 +207,7 @@ function getFormattedText(text) {
             }
             case 'textEntityTypePhoneNumber': {
                 result.push(
-                    <a
-                        key={text.entities[i].offset}
-                        href={`tel:${entityText}`}
-                        onClick={stopPropagation}
-                        target='_blank'
-                        rel='noopener noreferrer'>
+                    <a key={text.entities[i].offset} href={`tel:${entityText}`} onClick={stopPropagation}>
                         {entityText}
                     </a>
                 );