Making document list overflow scroll, for longer lists.

src/components/button.js

@@ -18,7 +18,7 @@ export const ReaderAnnotateButton = ({onClick}) =>
 
 export const ChapterButton = ({chapter, currentChapter, onClick}) =>
 	<div className ='chapter_button text-center'>
-		<button onClick={()=>onClick(chapter.id)} className={currentChapter.id === chapter.id ? 'btn btn-dark btn-lg' : 'btn btn-outline-dark btn-lg'}>
+		<button onClick={()=>onClick(chapter.id)} className={currentChapter.id === chapter.id ? 'btn btn-dark btn-lg' : 'btn btn-outline-dark btn-lg inactive_chapter_button'}>
 			{chapter.title}
 		</button>
 	</div>

src/components/list.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { ChapterButton, NoteButton } from './button'
 
 export const DocumentList = ({notes, chapters, currentDocument, onDocumentClick, docType}) =>
-	<div>
+	<div id='document_list'>
 		{docType === 'chapters' &&
 			<ChapterList chapters={chapters} currentChapter={currentDocument} onChapterClick={onDocumentClick}/>
 		}		

src/containers/joyceEditorContentContainer.js

@@ -8,7 +8,7 @@ import DocumentTitle from '../components/documentTitle'
 import LoadingSpinner from '../components/loadingSpinner'
 import { updateEditorState, handleEditorKeyCommand, applyInlineStyles, setMode, cancelEdit, submitDocumentEdit, updateDocumentTitleChange, addAnnotation, removeAnnotation } from '../actions'
 
-const JoyceEditorContent = ({currentDocument, editorState, mode, handleKeyCommand, onChangeEditorState, onToolButtonClick, setMode, cancelEdit, onSubmitClick, documentTitleInput, onDocumentTitleChange, onNewAnnotationClick, onRemoveAnnotationClick, docType, loadingToggle}) =>
+const JoyceEditorContent = ({currentDocument, editorState, mode, handleKeyCommand, onChangeEditorState, onToolButtonClick, setMode, cancelEdit, onSubmitClick, documentTitleInput, onDocumentTitleChange, onNewAnnotationClick, annotateKeyBindings, onRemoveAnnotationClick, docType, loadingToggle}) =>
 	<div>
 		<div id='editor_metadata'>
 			{loadingToggle === true &&
@@ -33,7 +33,15 @@ const JoyceEditorContent = ({currentDocument, editorState, mode, handleKeyComman
 			}
 		</div>	
 		<div id='editor_content'>
-			<Editor editorState={editorState} handleKeyCommand={mode === 'EDIT_MODE' ? handleKeyCommand : ()=>null} onChange={mode === 'EDIT_MODE' ? onChangeEditorState : ()=>onChangeEditorState(editorState)} readOnly={mode === 'READ_MODE' ? true : false } />
+			{mode === 'READ_MODE' &&
+				<Editor editorState={editorState} readOnly={true} />
+			}
+			{mode === 'ANNOTATE_MODE' &&
+				<Editor editorState={editorState} onChange={onChangeEditorState} keyBindingFn={annotateKeyBindings} />
+			}
+			{mode === 'EDIT_MODE' &&
+				<Editor editorState={editorState} handleKeyCommand={handleKeyCommand} onChange={onChangeEditorState} />
+			}			
 		</div>
 		<div id='editor_bottombar'>
 			{(mode === 'EDIT_MODE' || mode === 'ANNOTATE_MODE') &&
@@ -42,7 +50,7 @@ const JoyceEditorContent = ({currentDocument, editorState, mode, handleKeyComman
 		</div>
 	</div>
 
-const mapStateToProps = (state, props ) => {
+const mapStateToProps = (state, props) => {
 	return {
 		currentDocument: state.currentDocument,
 		mode: state.mode,
@@ -55,7 +63,7 @@ const mapStateToProps = (state, props ) => {
 
 const mapDispatchToProps = dispatch => {
 	return {
-		onChangeEditorState: (editorState, mode) => {
+		onChangeEditorState: editorState => {
 			dispatch(updateEditorState(editorState))
 		},
 		onDocumentTitleChange: documentTitleInput => {
@@ -64,6 +72,9 @@ const mapDispatchToProps = dispatch => {
 		handleKeyCommand: (command, editorState) => {
 			dispatch(handleEditorKeyCommand(editorState, command))
 		},
+		annotateKeyBindings: () => {
+			return 'handled'
+		},
 		setMode: (mode) => {
 			dispatch(setMode(mode))
 		},

src/reducers/highlightToggle.js

@@ -1,4 +1,4 @@
-const highlightToggle = (state=false, action) => {
+const highlightToggle = (state=true, action) => {
 	switch(action.type) {
 		case 'TOGGLE_HIGHLIGHT':
 			return !state

src/stylesheets/_sidebar.scss

@@ -2,7 +2,7 @@
 
 #sidebar {
     height: 100%;
-    max-height: 44em;
+    max-height: 45em;
     background-color: rgba(250,250,250,.8);
     margin: -2.5% 2% 1.5% 2%;
     padding: 1%;
@@ -25,6 +25,16 @@
 	margin: 0.25% 0;
     padding: 0.2rem 1rem;
     font-size: 1rem;
+    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
+
+}
+
+button {
+    background-color: rgba(250, 250, 250, 0.8);
+}
+
+.chapter_button > button.inactive_chapter_button:not(:hover) {
+    background-color: rgba(250, 250, 250, 0.8);
 }
 
 .dropdown > button {
@@ -40,6 +50,15 @@
     text-align: left;
 }
 
+#document_list {
+    padding: 1%;
+    border: 1px solid $border_color;
+    border-radius: 5px;
+    background-color: rgba(200, 200, 200, .8);
+    max-height: 39em;
+    overflow: scroll;
+}
+
 #new_document_button > button {
     width: 100%;
 }