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 1e41732cf..d6ac5522e 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; } @@ -225,7 +222,6 @@ function setTheme() { background: none !important; border-bottom: 1px solid ${pageTheme.colors.nav} !important; }`; - let node2 = ` .mce-content-body table[data-mce-selected], { @@ -342,9 +338,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 e3be60f8f..1061feb58 100644 --- a/apps/mobile/html/Web.bundle/site/index.css +++ b/apps/mobile/html/Web.bundle/site/index.css @@ -1,102 +1,76 @@ body { - margin:0px !important; - overflow: visible; - font-family:"Open Sans"; + margin: 0px !important; + font-family: 'Open Sans'; } -#formBox textarea { - font-family: "Open Sans"; - font-weight: 600 !important; - background-color: transparent; - border: none; - width: 100%; - outline: none; - resize: none; - font-size: 32px; - } - - #formBox { - margin-block-end: 0px; - position: relative; - } - - #titlebar { - background-color: transparent; - padding-left: 0px; - padding-right: 12px; - min-height: 45px; - display: flex; - flex-direction: column; - justify-content: flex-end; - } - #formBox > div, - #formBox > textarea { - 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%; +.app-main { + overflow: visible; +} - padding-top: 4px; - padding-bottom: 5px; - } - - #textCopy { - font-family: "Open Sans"; - font-weight: 600 !important; - font-size: 32px; - padding-top: 4px; - padding-bottom: 5px; - padding-right: 0.5em; - padding-left: 0.5em; - } - - #formBox > div { - min-height: 45px; - } - - .info-bar { - font-family: "Open Sans"; - color: gray; - font-size: 11px; - height: 15px; - display: flex; - padding-left: 14px !important; - justify-content: space-between; - } +#formBox input { + font-family: 'Open Sans'; + font-weight: 600 !important; + background-color: transparent; + border: none; + width: 100%; + outline: none; + resize: none; + font-size: 25px; + height: 45x; +} - .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; - } +#formBox { + margin-block-end: 0px; + position: relative; +} + +#titlebar { + background-color: transparent; + padding-left: 0px; + padding-right: 12px; + display: flex; + flex-direction: column; + justify-content: flex-end; +} +#formBox > div, +#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%; +} + +#titlebar input:focus { + outline: none; +} + +.info-bar { + font-family: 'Open Sans'; + color: gray; + font-size: 11.5px; + height: 13px; + display: flex; + padding-left: 4px !important; + justify-content: space-between; + margin-top: 5px; +} + +.info-bar a { + text-decoration: none; + color: gray; +} + +#infowords, +#infodate, +#infosaved { + font-family: 'Open Sans'; + margin-right: 5px; + margin-left: 0px; + border-radius: 5px; + margin-top: 0; + height: 16px; + padding-top: 2.5px; +} + +.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 a81e7c7a6..8a49b3667 100755 --- a/apps/mobile/html/Web.bundle/site/init.js +++ b/apps/mobile/html/Web.bundle/site/init.js @@ -263,6 +263,109 @@ function init_tiny(size) { console.error(e); } }, + 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('focus', function () { + reactNativeEventHandler('focus', 'editor'); + }); + + editor.on('SetContent', function (event) { + console.log('content set', event.paste, globalThis.isClearingNoteData); + 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('tap', function (e) { + if ( + e.target.classList.contains('mce-content-body') && + !e.target.innerText.length > 0 + ) { + e.preventDefault(); + } + }); + 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); + }, setup: function (_editor) { editor = _editor; editor.ui.registry.addButton('deleteimage', { @@ -281,9 +384,7 @@ function init_tiny(size) { }); editor.on('init', function (e) { - setTimeout(function () { - reactNativeEventHandler('status', true); - }, 300); + reactNativeEventHandler('status', true); }); editor.ui.registry.addButton('deletevideo', { @@ -366,106 +467,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; diff --git a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js index d2cddfc81..08fbf5994 100644 --- a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js +++ b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js @@ -5,13 +5,14 @@ export const BouncingView = ({ children, style, duration = 600, - animated = true + animated = true, + initialScale = 0.9 }) => { - const scale = Animated.useValue(!animated ? 1 : 0.9); + const scale = Animated.useValue(!animated ? 1 : initialScale); useEffect(() => { if (!animated) return; - scale.setValue(0.9); + scale.setValue(initialScale); timing(scale, { toValue: 1, duration: duration, @@ -19,7 +20,7 @@ export const BouncingView = ({ }).start(); return () => { if (!animated) return; - scale.setValue(0.9); + scale.setValue(initialScale); }; }, []); diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js index 4d7ba17aa..127ec3443 100644 --- a/apps/mobile/src/components/AddNotebookDialog/index.js +++ b/apps/mobile/src/components/AddNotebookDialog/index.js @@ -400,6 +400,11 @@ export class AddNotebookDialog extends React.Component { type="accent" onPress={this.addNewNotebook} /> + diff --git a/apps/mobile/src/components/Announcements/announcement.js b/apps/mobile/src/components/Announcements/announcement.js index 378597431..b86fb0950 100644 --- a/apps/mobile/src/components/Announcements/announcement.js +++ b/apps/mobile/src/components/Announcements/announcement.js @@ -49,7 +49,7 @@ export const Announcement = ({color}) => { marginTop: 15 }} data={announcement?.body.filter(item => - allowedOnPlatform(item.platform) + allowedOnPlatform(item.platforms) )} renderItem={({item, index}) => renderItem({item: item, index: index, color: colors[color],inline:true}) diff --git a/apps/mobile/src/components/Announcements/cta.js b/apps/mobile/src/components/Announcements/cta.js index bd2a10900..d7fa4e8d2 100644 --- a/apps/mobile/src/components/Announcements/cta.js +++ b/apps/mobile/src/components/Announcements/cta.js @@ -1,22 +1,21 @@ import React from 'react'; -import { View } from 'react-native'; -import { useTracked } from '../../provider'; -import { eSendEvent, presentSheet } from '../../services/EventManager'; -import { eCloseAnnouncementDialog, eOpenPremiumDialog } from '../../utils/Events'; -import { openLinkInBrowser } from '../../utils/functions'; -import { SIZE } from '../../utils/SizeUtils'; -import { sleep } from '../../utils/TimeUtils'; +import {View} from 'react-native'; +import {useTracked} from '../../provider'; +import {eSendEvent, presentSheet} from '../../services/EventManager'; +import {eCloseAnnouncementDialog} from '../../utils/Events'; +import {openLinkInBrowser} from '../../utils/functions'; +import {SIZE} from '../../utils/SizeUtils'; +import {sleep} from '../../utils/TimeUtils'; import SettingsBackupAndRestore from '../../views/Settings/backup-restore'; -import { Button } from '../Button'; -import { allowedOnPlatform, getStyle } from './functions'; +import {Button} from '../Button'; +import GeneralSheet from '../GeneralSheet'; +import {PricingPlans} from '../Premium/pricing-plans'; +import {allowedOnPlatform, getStyle} from './functions'; -export const Cta = ({actions, style = {}, color,inline}) => { +export const Cta = ({actions, style = {}, color, inline}) => { const [state] = useTracked(); const colors = state.colors; - let buttons = - actions.filter(item => - allowedOnPlatform(item.platforms) - ) || []; + let buttons = actions.filter(item => allowedOnPlatform(item.platforms)) || []; const onPress = async item => { if (!inline) { @@ -28,9 +27,18 @@ export const Cta = ({actions, style = {}, color,inline}) => { await openLinkInBrowser(item.data, colors); } catch (e) {} } else if (item.type === 'promo') { - eSendEvent(eOpenPremiumDialog, { - promoCode: item.data, - text: item.title + presentSheet({ + component: ( + + ), + noIcon: true, + noProgress: true }); } else if (item.type === 'backup') { presentSheet({ @@ -48,6 +56,7 @@ export const Cta = ({actions, style = {}, color,inline}) => { paddingHorizontal: 12, ...getStyle(style) }}> + {buttons.length > 0 && buttons.slice(0, 1).map(item => (