From ac0fc93a2b2ce9826cd85d3a67815bbc94b6f940 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20BARBIER?= Date: Tue, 20 Feb 2018 12:20:33 +0100 Subject: [PATCH 1/4] Fix block edition after reaching max line limit Related to #705 --- src/sidebar/app/components/Editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sidebar/app/components/Editor.js b/src/sidebar/app/components/Editor.js index a5a135d2b..a51939421 100644 --- a/src/sidebar/app/components/Editor.js +++ b/src/sidebar/app/components/Editor.js @@ -128,7 +128,7 @@ class Editor extends React.Component { }); if (content.length > 15000) { console.error('Maximum notepad size reached:', content.length); // eslint-disable-line no-console - migrationBody.textContent = browser.i18n.getMessage('maximumPadSizeExceeded'); + // TODO: display 'maximumPadSizeExceeded' notification browser.runtime.sendMessage({ action: 'metrics-limit-reached', context: getPadStats(editor) From afa62eac5d7e9244117350a28e9f6c146a16abad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20BARBIER?= Date: Wed, 21 Feb 2018 11:36:40 +0100 Subject: [PATCH 2/4] Implement notification to warn about reaching lmax line limit --- src/sidebar/app/components/CloseIcon.js | 15 +++++++ src/sidebar/app/components/Editor.js | 38 ++++++++++++---- src/sidebar/static/scss/ckeditor.scss | 60 +++++++++++++++++++++++++ src/sidebar/static/scss/styles.scss | 3 +- 4 files changed, 106 insertions(+), 10 deletions(-) create mode 100644 src/sidebar/app/components/CloseIcon.js diff --git a/src/sidebar/app/components/CloseIcon.js b/src/sidebar/app/components/CloseIcon.js new file mode 100644 index 000000000..0a32b07cc --- /dev/null +++ b/src/sidebar/app/components/CloseIcon.js @@ -0,0 +1,15 @@ +import React from 'react'; + +function CloseIcon(props) { + return ( + + + + + ); +} + +export default CloseIcon; diff --git a/src/sidebar/app/components/Editor.js b/src/sidebar/app/components/Editor.js index a51939421..635838880 100644 --- a/src/sidebar/app/components/Editor.js +++ b/src/sidebar/app/components/Editor.js @@ -1,5 +1,7 @@ import React from 'react'; +import CloseIcon from './CloseIcon'; + import { getPadStats, customizeEditor, insertSelectedText } from '../utils/editor'; import INITIAL_CONFIG from '../data/editorConfig'; @@ -11,6 +13,7 @@ class Editor extends React.Component { this.state = { ignoreNextLoadEvent: false, ignoreTextSynced: false, + isLimitReached: false, isKintoLoaded: false, content: null }; @@ -93,6 +96,12 @@ class Editor extends React.Component { }); }; + this.closeNotification = () => { + this.setState({ + isLimitReached: false + }); + }; + this.init = (content) => { this.setState({ content @@ -129,10 +138,17 @@ class Editor extends React.Component { if (content.length > 15000) { console.error('Maximum notepad size reached:', content.length); // eslint-disable-line no-console // TODO: display 'maximumPadSizeExceeded' notification + this.setState({ + isLimitReached: true, + }); browser.runtime.sendMessage({ action: 'metrics-limit-reached', context: getPadStats(editor) }); + } else { + this.setState({ + isLimitReached: false, + }); } chrome.runtime.sendMessage({ @@ -165,7 +181,6 @@ class Editor extends React.Component { this.loadContent(); } - componentWillUnmount() { chrome.runtime.onMessage.removeListener(this.events); } @@ -173,13 +188,20 @@ class Editor extends React.Component { render() { return ( -
{ - this.node = node; - }} - dangerouslySetInnerHTML={{ __html: this.state.content }} - > +
+
{ + this.node = node; + }} + dangerouslySetInnerHTML={{ __html: this.state.content }} + > +
+ { this.state.isLimitReached ? +
+ +

{ browser.i18n.getMessage('maximumPadSizeExceeded') }

+
: null }
); } diff --git a/src/sidebar/static/scss/ckeditor.scss b/src/sidebar/static/scss/ckeditor.scss index abea74ec2..8506f3067 100644 --- a/src/sidebar/static/scss/ckeditor.scss +++ b/src/sidebar/static/scss/ckeditor.scss @@ -2,6 +2,31 @@ CKEditor overrides */ +.editorWrapper { + display: flex; + flex-direction: column; + flex-grow: 1; + flex: calc(100% - 40px); + margin: 0; + padding: 0; + overflow: hidden; + position: relative; + +} + +.ck-editor { + display: flex; + flex-direction: column; + height: 100%; + margin: 0; + overflow: hidden; + padding: 0; +} + +.notification { + +} + #notes { .ck-toolbar { border: 0; @@ -98,3 +123,38 @@ box-shadow: none; } } + +// CSS related to Notifications +#sync-note { + background: #00FFFE; // green background is: #B6FEB4; + width: 100%; + position: relative; + margin: 0 auto; + border: 0; + border-top: 1px solid #ccc; + color: #424242; + font-size: 12px; + padding: 0px 15% 0px 10px; + + button { + width: 16px; + position: absolute; + top: 6px; + right: 6px; + padding: 0 0; + opacity: 0.4; + + &:hover { + cursor: pointer; + opacity: 0.6 + } + &:active { + cursor: pointer; + opacity: 0.8 + } + } +} + + + + diff --git a/src/sidebar/static/scss/styles.scss b/src/sidebar/static/scss/styles.scss index 8a3ced2dd..0c13014ec 100644 --- a/src/sidebar/static/scss/styles.scss +++ b/src/sidebar/static/scss/styles.scss @@ -12,8 +12,7 @@ html { } body, -body > div, -body .ck-editor { +body > div { display: flex; flex-direction: column; height: 100%; From 9ec1ef978baf278ab26b0cc33850add183f251ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20BARBIER?= Date: Wed, 21 Feb 2018 11:45:40 +0100 Subject: [PATCH 3/4] Fix linting on ckeditor scss --- src/sidebar/static/scss/ckeditor.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/sidebar/static/scss/ckeditor.scss b/src/sidebar/static/scss/ckeditor.scss index 8506f3067..a10357829 100644 --- a/src/sidebar/static/scss/ckeditor.scss +++ b/src/sidebar/static/scss/ckeditor.scss @@ -4,9 +4,9 @@ .editorWrapper { display: flex; + flex: calc(100% - 40px); flex-direction: column; flex-grow: 1; - flex: calc(100% - 40px); margin: 0; padding: 0; overflow: hidden; @@ -23,10 +23,6 @@ padding: 0; } -.notification { - -} - #notes { .ck-toolbar { border: 0; From 5ee91fc20a13ad263be652c0a9048a1fe0234929 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20BARBIER?= Date: Wed, 21 Feb 2018 12:13:53 +0100 Subject: [PATCH 4/4] Rename variable isLimitReached to wasLimitReached --- src/sidebar/app/components/Editor.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/sidebar/app/components/Editor.js b/src/sidebar/app/components/Editor.js index 635838880..f55cb51c8 100644 --- a/src/sidebar/app/components/Editor.js +++ b/src/sidebar/app/components/Editor.js @@ -13,7 +13,7 @@ class Editor extends React.Component { this.state = { ignoreNextLoadEvent: false, ignoreTextSynced: false, - isLimitReached: false, + wasLimitReached: false, isKintoLoaded: false, content: null }; @@ -98,7 +98,7 @@ class Editor extends React.Component { this.closeNotification = () => { this.setState({ - isLimitReached: false + wasLimitReached: false }); }; @@ -139,7 +139,7 @@ class Editor extends React.Component { console.error('Maximum notepad size reached:', content.length); // eslint-disable-line no-console // TODO: display 'maximumPadSizeExceeded' notification this.setState({ - isLimitReached: true, + wasLimitReached: true, }); browser.runtime.sendMessage({ action: 'metrics-limit-reached', @@ -147,7 +147,7 @@ class Editor extends React.Component { }); } else { this.setState({ - isLimitReached: false, + wasLimitReached: false, }); } @@ -197,7 +197,7 @@ class Editor extends React.Component { dangerouslySetInnerHTML={{ __html: this.state.content }} >
- { this.state.isLimitReached ? + { this.state.wasLimitReached ?

{ browser.i18n.getMessage('maximumPadSizeExceeded') }