Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-09-03 04:31:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

change editor title to single line

Browse Source
This commit is contained in:
ammarahm-ed
2021-11-29 11:56:03 +05:00
parent 1b0b6c1ed6
commit c346c9baed
6 changed files with 182 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
apps/mobile/android/app/src/main/assets/index.css
View File

@@ -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;
}

13
apps/mobile/html/Web.bundle/site/constants.js
View File

@@ -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);

168
apps/mobile/html/Web.bundle/site/index.css
View File

@@ -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;
}

12
apps/mobile/html/Web.bundle/site/index.html
View File

@@ -14,15 +14,15 @@
<input id="image-input" accept='image/png, image/gif, image/jpeg, image/bmp, image/x-icon' type="file"
name="name" style="display: none;" />
<div id="titlebar">
<form id="formBox">
<textarea maxlength="150" id="titleInput" placeholder="Note title"></textarea>
<div id="textCopy"></div>
</form>
<div id="formBox">
<input maxlength="150" id="titleInput"
placeholder="Note title"></input>
</div>
<div class="info-bar">
<div style="display:flex;">
<p id="infowords"></p>
<p id="infodate"></p>
<p id="infosaved"></p>
<p style="display:none" id="infodate"></p>
<p style="display:none" id="infosaved"></p>
</div>
</div>
</div>

134
apps/mobile/html/Web.bundle/site/listeners.js
View File

@@ -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, '<br/>');
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, '<br/>');
// 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 === '<p></p>' ||
value === '<p><br></p>' ||
value === '<p>&nbsp;</p>'
);
}
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;

3
apps/mobile/src/views/Editor/tiny/tiny.js
View File

@@ -14,6 +14,7 @@ info = document.querySelector(infoBar);
info.querySelector('#infosaved').innerText = "";
info.querySelector('#infodate').innerText = "";
info.querySelector('#infowords').innerText = ""
updateInfoBar()
document.activeElement.blur();
window.blur();
`;
@@ -72,6 +73,7 @@ const updateDateEdited = value => `
(function() {
info = document.querySelector(infoBar);
info.querySelector('#infodate').innerText = "${value}";
updateInfoBar()
})();
`;
@@ -79,6 +81,7 @@ const updateSavingState = value => `
(function() {
info = document.querySelector(infoBar);
info.querySelector('#infosaved').innerText = "${value}";
updateInfoBar()
})();
`;