Merge pull request #706 from mozilla/705-max-line-limit-error

Fix broken max line limit in react version

Author: sebastienbarbier

src/sidebar/app/components/CloseIcon.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function CloseIcon(props) {
+  return (
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+   viewBox="0 0 16 16" enableBackground="new 0 0 16 16" xmlSpace="preserve">
+<path d="M9.1,8l3.5-3.5c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1,0L8,6.9L4.5,3.5c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.7,0,1
+  L6.9,8l-3.5,3.5c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0c0,0,0,0,0,0L8,9.1l3.5,3.5c0.3,0.3,0.8,0.3,1.1,0
+  c0.3-0.3,0.3-0.8,0-1L9.1,8z"/>
+</svg>
+
+  );
+}
+
+export default CloseIcon;

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,
+      wasLimitReached: false,
       isKintoLoaded: false,
       content: null
     };
@@ -93,6 +96,12 @@ class Editor extends React.Component {
       });
     };
 
+    this.closeNotification = () => {
+      this.setState({
+        wasLimitReached: false
+      });
+    };
+
     this.init = (content) => {
       this.setState({
         content
@@ -128,11 +137,18 @@ 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
+                    this.setState({
+                      wasLimitReached: true,
+                    });
                     browser.runtime.sendMessage({
                       action: 'metrics-limit-reached',
                       context: getPadStats(editor)
                     });
+                  } else {
+                    this.setState({
+                      wasLimitReached: false,
+                    });
                   }
 
                   chrome.runtime.sendMessage({
@@ -165,21 +181,27 @@ class Editor extends React.Component {
     this.loadContent();
   }
 
-
   componentWillUnmount() {
     chrome.runtime.onMessage.removeListener(this.events);
   }
 
   render() {
 
     return (
-      <div
-        id="editor"
-        ref={node => {
-          this.node = node;
-        }}
-        dangerouslySetInnerHTML={{ __html: this.state.content }}
-      >
+      <div className="editorWrapper">
+        <div
+          id="editor"
+          ref={node => {
+            this.node = node;
+          }}
+          dangerouslySetInnerHTML={{ __html: this.state.content }}
+        >
+        </div>
+        { this.state.wasLimitReached ?
+        <div id="sync-note" style={{display: 'block'}}>
+          <button onClick={this.closeNotification}><CloseIcon /></button>
+          <p>{ browser.i18n.getMessage('maximumPadSizeExceeded') }</p>
+        </div> : null }
       </div>
     );
   }

src/sidebar/static/scss/ckeditor.scss

@@ -2,6 +2,27 @@
   CKEditor overrides
 */
 
+.editorWrapper {
+  display: flex;
+  flex: calc(100% - 40px);
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+
+}
+
+.ck-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
 #notes {
   .ck-toolbar {
     border: 0;
@@ -98,3 +119,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
+    }
+  }
+}
+
+
+
+

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%;