From 9e1963f49e2d663ef37ebbeff577f2a720f6d00e Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Sat, 7 Dec 2019 21:10:26 +0500 Subject: [PATCH] fix editor theme for android. --- .../app/src/main/assets/texteditor.html | 338 +++++++++++++----- apps/mobile/src/views/Editor/index.js | 4 + .../src/views/Editor/web/texteditor.html | 1 - 3 files changed, 262 insertions(+), 81 deletions(-) diff --git a/apps/mobile/android/app/src/main/assets/texteditor.html b/apps/mobile/android/app/src/main/assets/texteditor.html index 788998ef0..0e2575da2 100644 --- a/apps/mobile/android/app/src/main/assets/texteditor.html +++ b/apps/mobile/android/app/src/main/assets/texteditor.html @@ -418,7 +418,7 @@ text-align: right; } .ql-editor.ql-blank::before { - color: rgba(0, 0, 0, 0.6); + content: attr(data-placeholder); left: 15px; @@ -456,82 +456,7 @@ .ql-snow .ql-toolbar input.ql-image[type='file'] { display: none; } - .ql-snow.ql-toolbar button:hover, - .ql-snow .ql-toolbar button:hover, - .ql-snow.ql-toolbar button:focus, - .ql-snow .ql-toolbar button:focus, - .ql-snow.ql-toolbar button.ql-active, - .ql-snow .ql-toolbar button.ql-active, - .ql-snow.ql-toolbar .ql-picker-label:hover, - .ql-snow .ql-toolbar .ql-picker-label:hover, - .ql-snow.ql-toolbar .ql-picker-label.ql-active, - .ql-snow .ql-toolbar .ql-picker-label.ql-active, - .ql-snow.ql-toolbar .ql-picker-item:hover, - .ql-snow .ql-toolbar .ql-picker-item:hover, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected { - color: #06c; - } - .ql-snow.ql-toolbar button:hover .ql-fill, - .ql-snow .ql-toolbar button:hover .ql-fill, - .ql-snow.ql-toolbar button:focus .ql-fill, - .ql-snow .ql-toolbar button:focus .ql-fill, - .ql-snow.ql-toolbar button.ql-active .ql-fill, - .ql-snow .ql-toolbar button.ql-active .ql-fill, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, - .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, - .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, - .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, - .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, - .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, - .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { - fill: #06c; - } - .ql-snow.ql-toolbar button:hover .ql-stroke, - .ql-snow .ql-toolbar button:hover .ql-stroke, - .ql-snow.ql-toolbar button:focus .ql-stroke, - .ql-snow .ql-toolbar button:focus .ql-stroke, - .ql-snow.ql-toolbar button.ql-active .ql-stroke, - .ql-snow .ql-toolbar button.ql-active .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, - .ql-snow.ql-toolbar button:hover .ql-stroke-miter, - .ql-snow .ql-toolbar button:hover .ql-stroke-miter, - .ql-snow.ql-toolbar button:focus .ql-stroke-miter, - .ql-snow .ql-toolbar button:focus .ql-stroke-miter, - .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, - .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { - stroke: #06c; - } + @media (pointer: coarse) { .ql-snow.ql-toolbar button:hover:not(.ql-active), @@ -1064,6 +989,9 @@ function(require, module, exports) { const Quill = require('quill'); + const pageTheme = { + colors: {} + } // specify the fonts you would var fonts = ['Quicksand']; // generate code friendly names @@ -1202,6 +1130,258 @@ // Receber mensagens do RN document.addEventListener('message', data => { + if (data.data.substr(0,9) === '{"night":') { + pageTheme.colors = JSON.parse(data.data); + + + + let css = document.createElement('style'); + css.type = 'text/css'; + + let node = ` + .ql-snow.ql-toolbar button:hover, + .ql-snow .ql-toolbar button:hover, + .ql-snow.ql-toolbar button:focus, + .ql-snow .ql-toolbar button:focus, + .ql-snow.ql-toolbar button.ql-active, + .ql-snow .ql-toolbar button.ql-active, + .ql-snow.ql-toolbar .ql-picker-label:hover, + .ql-snow .ql-toolbar .ql-picker-label:hover, + .ql-snow.ql-toolbar .ql-picker-label.ql-active, + .ql-snow .ql-toolbar .ql-picker-label.ql-active, + .ql-snow.ql-toolbar .ql-picker-item:hover, + .ql-snow .ql-toolbar .ql-picker-item:hover, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected { + color: ${pageTheme.colors.accent}; + } + .ql-snow.ql-toolbar button:hover .ql-fill, + .ql-snow .ql-toolbar button:hover .ql-fill, + .ql-snow.ql-toolbar button:focus .ql-fill, + .ql-snow .ql-toolbar button:focus .ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { + fill: ${pageTheme.colors.accent}; + } + .ql-snow.ql-toolbar button:hover .ql-stroke, + .ql-snow .ql-toolbar button:hover .ql-stroke, + .ql-snow.ql-toolbar button:focus .ql-stroke, + .ql-snow .ql-toolbar button:focus .ql-stroke, + .ql-snow.ql-toolbar button.ql-active .ql-stroke, + .ql-snow .ql-toolbar button.ql-active .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow.ql-toolbar button:hover .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover .ql-stroke-miter, + .ql-snow.ql-toolbar button:focus .ql-stroke-miter, + .ql-snow .ql-toolbar button:focus .ql-stroke-miter, + .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { + stroke: ${pageTheme.colors.accent}; + } + + + .ql-editor ul[data-checked='true'] > li::before, + .ql-editor ul[data-checked='false'] > li::before { + color: #777; + cursor: pointer; + pointer-events: all; + } + + @media (pointer: coarse) { + .ql-snow.ql-toolbar button:hover:not(.ql-active), + .ql-snow .ql-toolbar button:hover:not(.ql-active) { + color: ${pageTheme.colors.icon}; + } + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { + fill: ${pageTheme.colors.icon}; + } + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { + stroke: ${pageTheme.colors.icon}; + } + } + + .ql-snow .ql-stroke { + fill: none; + stroke: ${pageTheme.colors.icon}; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 2; + } + .ql-snow .ql-stroke-miter { + fill: none; + stroke: ${pageTheme.colors.icon}; + stroke-miterlimit: 10; + stroke-width: 2; + } + .ql-snow .ql-fill, + .ql-snow .ql-stroke.ql-fill { + fill: ${pageTheme.colors.icon}; + } + + .ql-snow .ql-editor blockquote { + border-left: 4px solid ${pageTheme.colors.navbg}; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 16px; + } + .ql-snow .ql-editor code, + .ql-snow .ql-editor pre { + background-color: ${pageTheme.colors.nav}; + border-radius: 3px; + } + + .ql-snow .ql-editor pre.ql-syntax { + background-color: ${pageTheme.colors.icon}; + color: 'black'; + overflow: visible; + } + + .ql-snow .ql-picker { + color: ${pageTheme.colors.icon}; + display: inline-block; + float: left; + font-size: 16px; + font-weight: 500; + height: 24px; + position: relative; + vertical-align: middle; + } + + .ql-snow .ql-picker-options { + background-color: ${pageTheme.colors.nav}; + display: none; + min-width: inherit; + padding: 4px 8px; + position: fixed; + } + + .ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: ${pageTheme.colors.nav}; + z-index: 2; + } + .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: ${pageTheme.colors.nav}; + } + .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: ${pageTheme.colors.nav}; + } + + .ql-snow .ql-color-picker.ql-background .ql-picker-item { + background-color: ${pageTheme.colors.bg}; + } + .ql-snow .ql-color-picker.ql-color .ql-picker-item { + background-color: ${pageTheme.colors.sec}; + } + + .ql-toolbar.ql-snow .ql-picker-options { + border: 1px solid transparent; + box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px; + } + .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + border-color: ${pageTheme.colors.nav}; + } + .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + border-color: ${pageTheme.colors.nav}; + } + .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, + .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { + border-color: ${pageTheme.colors.pri}; + } + + .ql-snow .ql-tooltip { + background-color: ${pageTheme.colors.bg}; + box-shadow: 0px 0px 5px #000; + color: ${pageTheme.colors.icon}; + padding: 5px 12px; + white-space: nowrap; + position: absolute; + font-size: 12px; + } + + .ql-snow .ql-tooltip a.ql-action::after { + border-right: 1px solid ${pageTheme.colors.nav}; + content: 'Edit'; + margin-left: 16px; + padding-right: 8px; + } + .ql-snow a { + color: ${pageTheme.colors.accent}; + } + .ql-container.ql-snow { + border: 1px solid ${pageTheme.colors.nav}; + } + .ql-toolbar { + overflow-x: auto; + width: 100vw; + white-space: nowrap; + position: fixed; + height:50px; + bottom: 0px; + left: 0px; + background-color:${pageTheme.colors.bg}; + border-top: 1px solid ${pageTheme.colors.nav}; + } + + + + ` + css.appendChild(document.createTextNode(node)); + document.getElementsByTagName("head")[0].appendChild(css); + + + + $('.ql-picker-options').css('background-color',pageTheme.colors.nav); + $('.ql-picker-options').css('border-color',pageTheme.colors.nav); + $('.ql-container').css('background-color',pageTheme.colors.bg ); + $('.ql-container').css('color',pageTheme.colors.pri ); + $('.ql-editor.ql-blank').before(function() { + $(this).css('color',pageTheme.colors.icon); + }) + return; + } if (data.data.substr(0, 7) === '$image$') { const base64 = data.data.substr(7); // TODO: Should add image to end if editor doesn't have focus @@ -1268,9 +1448,6 @@ default: break; } - } else if (data.data.includes('night')) { - let pageTheme = JSON.parse(data.data); - editor.setContent(pageTheme); } else if (data.data[0] === '{') { const content = JSON.parse(data.data); editor.setContents(content); @@ -1282,6 +1459,7 @@ editor.focus(); } }); + diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index 355e6c8fd..488e03cab 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -86,6 +86,10 @@ const Editor = ({navigation}) => { } }; + useEffect(() => { + titleRef.current.focus(); + }, []); + const _renderEditor = () => { return (