Update quill toolbar

readme.md

@@ -8,4 +8,7 @@ Prise de notes pour les cours du Collège des Arts Thérapeutiques Chinois
 * [ ] Quick view of muscles / nerves schemas
 * [x] Dictionary
 * [x] Progress bar
-* [x] Save note on F5/quit
+* [x] Save note on F5/quit
+* [ ] Sync local with remote repository
+* [ ] Table in Quill JS
+* [ ] Font Awesome icons in Quill JS Toolbar

scripts/catc.js

@@ -428,10 +428,25 @@ class Editor {
 		this.oQuill = new Quill(sEditorId, {
 			theme: 'snow',
 			placeholder: 'Notes',
-			readOnly: bReadOnly/*,
+			readOnly: bReadOnly,
 			modules: {
-				toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
+				toolbar: [
-			}*/
+					['bold', 'italic', 'underline', 'strike'],
+					//['blockquote', 'code-block'],
+					[{ 'color': [] }, { 'background': [] }],
+					[{ 'header': 1 }, { 'header': 2 }, 'blockquote'],
+					[{ 'list': 'ordered'}, { 'list': 'bullet' }],
+					//[{ 'script': 'sub'}, { 'script': 'super' }],
+					//[{ 'indent': '-1'}, { 'indent': '+1' }],
+					//[{ 'direction': 'rtl' }],
+					//[{ 'size': ['small', false, 'large', 'huge'] }],
+					//[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+					//[{ 'font': [] }],
+					[{ 'align': [] }],
+					['link', 'image'],
+					['clean']
+				]
+			}
 		});
 
 		this._initEvents();
@@ -467,12 +482,12 @@ class Editor {
 	
 	isEmpty() {
 		const rEmpty = /^(<p>(<br>|<br\/>|<br\s\/>|\s+|)<\/p>|)$/gm;
-	    return rEmpty.test(this.oQuill.getText().trim());
+		return rEmpty.test(this.oQuill.getText().trim());
 	}
 	
 	quill2Html(asDelta) {
-	    var tempCont = document.createElement('div');
+		var tempCont = document.createElement('div');
-	    (new Quill(tempCont)).setContents(asDelta);
+		(new Quill(tempCont)).setContents(asDelta);
-	    return tempCont.getElementsByClassName('ql-editor')[0].innerHTML;
+		return tempCont.getElementsByClassName('ql-editor')[0].innerHTML;
 	}
 }

style/_quill.scss

@@ -9,7 +9,10 @@
 }
 .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
 	stroke: $col_main_2;
-}	
+}
+.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+	fill: $col_main_2;
+}
 .ql-editor.ql-blank::before {
 	left: 1.5em;
 	color: $gray-400;