From e28d953ae6c66237913772ad4bd48c9ec2f6fbad Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Thu, 2 Dec 2021 21:28:34 +0500 Subject: [PATCH] merge changes from develop branch --- apps/mobile/App.js | 1 - .../android/app/src/main/assets/index.css | 67 +++------ apps/mobile/html/Web.bundle/site/constants.js | 12 +- apps/mobile/html/Web.bundle/site/index.css | 39 +---- apps/mobile/html/Web.bundle/site/index.html | 12 +- apps/mobile/html/Web.bundle/site/init.js | 104 +------------- apps/mobile/html/Web.bundle/site/listeners.js | 134 +++++++++++------- 7 files changed, 114 insertions(+), 255 deletions(-) diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 49d729960..eab4d10ea 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -112,7 +112,6 @@ const App = () => { useEffect(() => { databaseHasLoaded = false; - useMessageStore.getState().setAnnouncement(); (async () => { try { await SettingsService.init(); diff --git a/apps/mobile/android/app/src/main/assets/index.css b/apps/mobile/android/app/src/main/assets/index.css index 8886696f5..779b91ce0 100644 --- a/apps/mobile/android/app/src/main/assets/index.css +++ b/apps/mobile/android/app/src/main/assets/index.css @@ -1,21 +1,22 @@ body { margin: 0px !important; - font-family:"Open Sans"; + font-family: 'Open Sans'; } .app-main { overflow: visible; } -#formBox textarea { - font-family: "Open Sans"; +#formBox input { + font-family: 'Open Sans'; font-weight: 600 !important; background-color: transparent; border: none; width: 100%; outline: none; resize: none; - font-size: 32px; + font-size: 25px; + height: 45x; } #formBox { @@ -27,47 +28,30 @@ body { background-color: transparent; padding-left: 12px; padding-right: 12px; - min-height: 45px; display: flex; flex-direction: column; justify-content: flex-end; } #formBox > div, -#formBox > textarea { +#formBox > input { word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */ box-sizing: border-box; width: 100%; } -#formBox > textarea { - overflow: hidden; - position: absolute; - height: 100%; - padding-top: 4px; - padding-bottom: 5px; -} - -#textCopy { - font-family: "Open Sans"; - visibility: hidden; - font-weight: 600 !important; - font-size: 32px; - padding-top: 4px; - padding-bottom: 5px; -} - -#formBox > div { - min-height: 45px; +#titlebar input:focus { + outline: none; } .info-bar { - font-family: "Open Sans"; + font-family: 'Open Sans'; color: gray; - font-size: 11px; - height: 15px; + font-size: 11.5px; + height: 13px; display: flex; padding-left: 4px !important; justify-content: space-between; + margin-top:5px; } .info-bar a { @@ -75,29 +59,16 @@ body { color: gray; } -#titlebar textarea:focus { - outline: none; -} -#infowords { - font-family: "Open Sans"; +#infowords,#infodate,#infosaved { + font-family: 'Open Sans'; margin-right: 5px; margin-left: 0px; - border-radius: 5; + border-radius: 5px; margin-top: 0; + height:16px; + padding-top:2.5px; } -#infodate { - font-family: "Open Sans"; - margin-right: 5px; - margin-left: 5px; - margin-top: 0; - border-radius: 5; -} - -#infosaved { - font-family: "Open Sans"; - margin-right: 5px; - margin-left: 5px; - border-radius: 5; - margin-top: 0; +.visible { + display: inline-flex !important; } diff --git a/apps/mobile/html/Web.bundle/site/constants.js b/apps/mobile/html/Web.bundle/site/constants.js index c292f6511..59f3ba6fd 100755 --- a/apps/mobile/html/Web.bundle/site/constants.js +++ b/apps/mobile/html/Web.bundle/site/constants.js @@ -126,13 +126,9 @@ function setTheme() { let node = ` #titleInput { color:${pageTheme.colors.heading}; - font-size:${32 * pageTheme.colors.factor}; + font-size:${25 * pageTheme.colors.factor}; } - #textCopy { - color:${pageTheme.colors.pri}; - font-size:${32 * pageTheme.colors.factor}; - } #titleInput::-webkit-input-placeholder { color:${pageTheme.colors.icon} } @@ -140,6 +136,7 @@ function setTheme() { .info-bar { color:${pageTheme.colors.icon}; } + #titlebar { display:flex !important; } @@ -368,9 +365,8 @@ code { `; - let editorHead = tinymce.activeEditor.contentDocument.getElementsByTagName( - 'head' - )[0]; + let editorHead = + tinymce.activeEditor.contentDocument.getElementsByTagName('head')[0]; let css2 = document.createElement('style'); css2.appendChild(document.createTextNode(node2)); editorHead.appendChild(css2); diff --git a/apps/mobile/html/Web.bundle/site/index.css b/apps/mobile/html/Web.bundle/site/index.css index a63a1ea07..3a9173e4d 100644 --- a/apps/mobile/html/Web.bundle/site/index.css +++ b/apps/mobile/html/Web.bundle/site/index.css @@ -1,7 +1,6 @@ body { - margin:0px !important; - overflow: visible; - font-family:"Open Sans"; + margin: 0px !important; + font-family: 'Open Sans'; } .app-main { @@ -74,34 +73,6 @@ body { padding-top: 2.5px; } - .info-bar a { - text-decoration: none; - color: gray - } - - #titlebar textarea:focus { - outline: none; - } - #infowords { - font-family: "Open Sans"; - margin-right: 5px; - margin-left: 0px; - border-radius: 5; - margin-top: 0; - } - - #infodate { - font-family: "Open Sans"; - margin-right: 5px; - margin-left: 5px; - margin-top: 0; - border-radius: 5; - } - - #infosaved { - font-family: "Open Sans"; - margin-right: 5px; - margin-left: 5px; - border-radius: 5; - margin-top: 0; - } +.visible { + display: inline-flex !important; +} diff --git a/apps/mobile/html/Web.bundle/site/index.html b/apps/mobile/html/Web.bundle/site/index.html index 16facc194..436fb719f 100644 --- a/apps/mobile/html/Web.bundle/site/index.html +++ b/apps/mobile/html/Web.bundle/site/index.html @@ -14,15 +14,15 @@
-
- -
-
+
+ +

-

-

+ +
diff --git a/apps/mobile/html/Web.bundle/site/init.js b/apps/mobile/html/Web.bundle/site/init.js index 7b3f184e9..83692caa7 100755 --- a/apps/mobile/html/Web.bundle/site/init.js +++ b/apps/mobile/html/Web.bundle/site/init.js @@ -380,9 +380,7 @@ function init_tiny(size) { }); editor.on('init', function (e) { - setTimeout(function () { - reactNativeEventHandler('status', true); - }, 300); + reactNativeEventHandler('status', true); }); editor.ui.registry.addButton('deletevideo', { @@ -465,106 +463,6 @@ function init_tiny(size) { }, onclick: function () {} }); - }, - init_instance_callback: function (_editor) { - editor = _editor; - setTheme(); - - editor.on('SelectionChange', function (e) { - selectchange(); - }); - - editor.on('ClearUndos', onUndoChange); - editor.on('Undo', onUndoChange); - editor.on('Redo', onUndoChange); - editor.on('TypingUndos', onUndoChange); - editor.on('BeforeAddUndo', onUndoChange); - editor.on('AddUndo', onUndoChange); - editor.on('cut', function () { - onChange({type: 'cut'}); - onUndoChange(); - }); - editor.on('copy', onUndoChange); - editor.on('paste', function () { - onChange({type: 'paste'}); - }); - - editor.on('tap', e => { - if (e.target.classList.contains('mce-content-body')) { - e.preventDefault(); - } - }); - - editor.on('focus', function () { - reactNativeEventHandler('focus', 'editor'); - }); - - editor.on('SetContent', function (event) { - if (globalThis.isClearingNoteData) { - globalThis.isClearingNoteData = false; - return; - } - setTimeout(function() { - editor.undoManager.transact(function () {}); - },1000); - if (!event.paste) { - reactNativeEventHandler('noteLoaded', true); - } - if (event.paste) { - isLoading = false; - onChange(event); - } - }); - - editor.on('NewBlock', function (e) { - console.log('New Block'); - const {newBlock} = e; - let target; - if (newBlock) { - target = newBlock.previousElementSibling; - } - if (target && target.classList.contains(COLLAPSED_KEY)) { - target.classList.remove(COLLAPSED_KEY); - collapseElement(target); - } - }); - - editor.on('touchstart mousedown', function (e) { - const {target} = e; - if ( - e.offsetX < 6 && - collapsibleTags[target.tagName] && - target.parentElement && - target.parentElement.tagName === 'BODY' - ) { - e.preventDefault(); - e.stopImmediatePropagation(); - e.stopPropagation(); - editor.undoManager.transact(function () { - if (target.classList.contains(COLLAPSED_KEY)) { - target.classList.remove(COLLAPSED_KEY); - } else { - target.classList.add(COLLAPSED_KEY); - } - collapseElement(target); - editor.getHTML().then(function (html) { - reactNativeEventHandler('tiny', html); - }); - }); - } - }); - - editor.on('ScrollIntoView', function (e) { - e.preventDefault(); - e.elm.scrollIntoView({ - behavior: 'smooth', - block: 'nearest' - }); - }); - editor.on('input', onChange); - editor.on('keyup', onChange); - editor.on('NodeChange', onChange); - editor.on('compositionend', onChange); } }); } diff --git a/apps/mobile/html/Web.bundle/site/listeners.js b/apps/mobile/html/Web.bundle/site/listeners.js index 28cfbebcb..6a792ece0 100755 --- a/apps/mobile/html/Web.bundle/site/listeners.js +++ b/apps/mobile/html/Web.bundle/site/listeners.js @@ -2,38 +2,31 @@ let titleInput = document.getElementById('titleInput'); let infoBar = '.info-bar'; let info = null; let scrollTimer = null; + +function onDomContentLoaded() { + document.body.onscroll = function (event) { + if (scrollTimer) { + clearTimeout(scrollTimer); + scrollTimer = null; + } + updateInfoBar(); + scrollTimer = setTimeout(function () { + + window.ReactNativeWebView.postMessage( + JSON.stringify({ + visible: event.target.documentElement.scrollTop, + title: document.getElementById('titleInput').value, + type: 'scroll' + }) + + ); + }, 100); + }; +} + function attachTitleInputListeners() { infoBar = '.info-bar'; - document.addEventListener( - 'DOMContentLoaded', - function () { - autosize(); - document.body.onscroll = function (event) { - if (scrollTimer) { - clearTimeout(scrollTimer); - scrollTimer = null; - } - scrollTimer = setTimeout(function () { - window.ReactNativeWebView.postMessage( - JSON.stringify({ - visible: event.target.documentElement.scrollTop, - title: document.getElementById('titleInput').value, - type: 'scroll' - }) - ); - }, 100); - }; - }, - false - ); - - document.getElementById('formBox').onsubmit = function (evt) { - evt.preventDefault(); - if (tinymce.activeEditor) { - tinymce.activeEditor && tinymce.activeEditor.focus(); - } - onTitleChange(); - }; + document.addEventListener('DOMContentLoaded', onDomContentLoaded, false); document.getElementById('titleInput').onkeypress = function (evt) { if (evt.keyCode === 13 || evt.which === 13) { @@ -49,7 +42,6 @@ function attachTitleInputListeners() { document .getElementById('titleInput') .addEventListener('focus', function (evt) { - autosize(); if (window.ReactNativeWebView) { window.ReactNativeWebView.postMessage( JSON.stringify({ @@ -69,10 +61,10 @@ function attachTitleInputListeners() { onTitleChange(); }; } - +let titleTimeout = 0; function onTitleChange() { - setTimeout(() => { - autosize(); + clearTimeout(titleTimeout); + titleTimeout = setTimeout(() => { if (isLoading) { return; } @@ -84,7 +76,8 @@ function onTitleChange() { info = document.querySelector(infoBar); if (tinymce.activeEditor) { info.querySelector('#infowords').innerText = - editor.countWords() + ' words'; + editor.countWords() + ' words'; + updateInfoBar() } if (titleMessage && typeof titleMessage.value === 'string') { @@ -92,24 +85,51 @@ function onTitleChange() { window.ReactNativeWebView.postMessage(JSON.stringify(titleMessage)); } } - }, 500); + }, 300); } function autosize() { - let ele = document.getElementById('textCopy'); - ele.innerHTML = document - .getElementById('titleInput') - .value.replace(/\n/g, '
'); - let newHeight = document.getElementById('titlebar').scrollHeight; - let css = document.createElement('style'); - css.type = 'text/css'; - let node = ` - .tox-tinymce { - min-height:calc(100vh - ${newHeight}px) !important; - }; - `; - css.appendChild(document.createTextNode(node)); - document.getElementsByTagName('head')[0].appendChild(css); + // let ele = document.getElementById('textCopy'); + // ele.innerHTML = document + // .getElementById('titleInput') + // .value.replace(/\n/g, '
'); + // let newHeight = document.getElementById('titlebar').scrollHeight; + // let css = document.createElement('style'); + // css.type = 'text/css'; + // let node = ` + // .tox-tinymce { + // min-height:calc(100vh - ${newHeight}px) !important; + // }; + // `; + // css.appendChild(document.createTextNode(node)); + // document.getElementsByTagName('head')[0].appendChild(css); +} + +function isInvalidValue(value) { + return ( + value === '' || + value === '

' || + value === '


' || + value === '

 

' + ); +} + +function updateInfoBar() { + let ids = ['infodate', 'infosaved']; + ids.forEach(id => { + let element = document.getElementById(id); + if (!element) return; + if (element.textContent && element.textContent !== '') { + if (!element.classList.contains("visible")) { + element.classList.add('visible'); + } + } else { + if (element.classList.contains("visible")) { + element.classList.remove('visible'); + } + + } + }); } function attachMessageListener() { @@ -118,6 +138,7 @@ function attachMessageListener() { if (isSafari) { listenerHandler = window; } + listenerHandler.addEventListener('message', function (data) { let message = JSON.parse(data.data); let type = message.type; @@ -131,7 +152,12 @@ function attachMessageListener() { isLoading = true; globalThis.isClearingNoteData = false; tinymce.activeEditor.mode.set('readonly'); - tinymce.activeEditor.setContent(value); + if (isInvalidValue(value)) { + tinymce.activeEditor.setContent(''); + } else { + tinymce.activeEditor.setContent(value); + } + setTimeout(function () { document.activeElement.blur(); window.blur(); @@ -141,7 +167,8 @@ function attachMessageListener() { }, 300); info = document.querySelector(infoBar); info.querySelector('#infowords').innerText = - editor.countWords() + ' words'; + editor.countWords() + ' words'; + updateInfoBar() break; case 'htmldiff': document.getElementsByClassName('htmldiff_div')[0].innerHTML = value; @@ -155,9 +182,6 @@ function attachMessageListener() { break; case 'title': document.getElementById('titleInput').value = value; - setTimeout(function () { - autosize(); - }, 100); break; default: break;