fix: fixed in position project header

ShyykoSerhiy · ShyykoSerhiy · commit e4abe173ef6f · 2017-08-18T17:41:39.000-04:00
diff --git a/src/public/components/files/FileList.css b/src/public/components/files/FileList.css
@@ -1,4 +1,6 @@
 .container{
+    display: flex;
+    flex-direction: column;
     border-right: 1px solid black; /*fixme*/
     flex-grow: 1;
 }
@@ -20,4 +22,8 @@
 
 .container:hover .project-header-buttons{
     opacity: 1;
+}
+
+.project-files {
+    overflow: auto
 }
diff --git a/src/public/components/files/FileList.tsx b/src/public/components/files/FileList.tsx
@@ -32,22 +32,24 @@ export class FileList extends React.Component<FilesListProps, FilesListState>{
 
     render() {
         return <div className={styles.container}>
-            <SelectableList value={0} onChange={(...args: any[]) => { console.log(args) }}>
-                <Subheader>
-                    <div className={styles['project-header']}>
-                        <div className={styles['project-header-title']}>Project</div>
-                        <div className={styles['project-header-buttons']}>
-                            <IconButton tooltip="New file" tooltipPosition="bottom-left">
-                                <NoteAdd />
-                            </IconButton>
-                            <IconButton tooltip="New folder" tooltipPosition="bottom-left">
-                                <CreateNewFolder />
-                            </IconButton>
-                        </div>
+            <Subheader>
+                <div className={styles['project-header']}>
+                    <div className={styles['project-header-title']}>Project</div>
+                    <div className={styles['project-header-buttons']}>
+                        <IconButton tooltip="New file" tooltipPosition="bottom-left">
+                            <NoteAdd />
+                        </IconButton>
+                        <IconButton tooltip="New folder" tooltipPosition="bottom-left">
+                            <CreateNewFolder />
+                        </IconButton>
                     </div>
-                </Subheader>
-                {this.renderFileList()}
-            </SelectableList>
+                </div>
+            </Subheader>
+            <div className={styles['project-files']}>
+                <SelectableList value={0} onChange={(...args: any[]) => { console.log(args) }}>
+                    {this.renderFileList()}
+                </SelectableList>
+            </div>
         </div>
     }
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`.container{`
	`2`	`+ display: flex;`
	`3`	`+ flex-direction: column;`
`2`	`4`	`border-right: 1px solid black; /fixme/`
`3`	`5`	`flex-grow: 1;`
`4`	`6`	`}`
`@@ -20,4 +22,8 @@`
`20`	`22`
`21`	`23`	`.container:hover .project-header-buttons{`
`22`	`24`	`opacity: 1;`
	`25`	`+}`
	`26`	`+`
	`27`	`+.project-files {`
	`28`	`+ overflow: auto`
`23`	`29`	`}`