feat: export modal and css improvements

Author: chriswhong

app/components/CommitDetails.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import numeral from 'numeral'
+
+import { Structure, Commit } from '../models/dataset'
+
+import Icon from './chrome/Icon'
+import RelativeTimestamp from './RelativeTimestamp'
+
+interface CommitDetailsProps {
+  structure: Structure
+  commit: Commit
+  path: string
+}
+
+const CommitDetails: React.FunctionComponent<CommitDetailsProps> = (props) => {
+  const { structure, commit, path } = props
+  return (
+    <>
+      <span className='dataset-details' style={{ marginBottom: '6px' }}><Icon icon='stickyNote' size='sm' color='default' />{commit.title}</span>
+      <div className='dataset-details-container'>
+        <span className='dataset-details'><Icon icon='commit' size='sm' color='default' /><span title={path}>{path.substring(path.length - 7)}</span></span>
+        <span className='dataset-details'><Icon icon='clock' size='sm' color='default' /><RelativeTimestamp timestamp={commit.timestamp}/></span>
+        <span className='dataset-details'><Icon icon='hdd' size='sm' color='default' />{numeral(structure.length).format('0.0b')}</span>
+        <span className='dataset-details'><Icon icon='bars' size='sm' color='default' />{numeral(structure.entries).format('0,0')} rows</span>
+      </div>
+    </>
+  )
+}
+
+export default CommitDetails

app/components/RelativeTimestamp.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import moment from 'moment'
+
+interface RelativeTimestampProps {
+  timestamp: string
+}
+
+const RelativeTimestamp: React.FunctionComponent<RelativeTimestampProps> = ({ timestamp }) => (
+  <span
+    className='relative-timestamp'
+    title={moment(timestamp).format('MMM D YYYY, h:mm A zz')}
+  >
+    {moment(timestamp).fromNow()}
+  </span>
+)
+
+export default RelativeTimestamp

app/components/chrome/Icon.tsx

@@ -34,18 +34,24 @@ import {
   faEllipsisH,
   faSort,
   faMinus,
-  faSave,
-  faSync
+  faSync,
+  faBars
 } from '@fortawesome/free-solid-svg-icons'
 
+import {
+  faClock,
+  faStickyNote,
+  faHdd
+} from '@fortawesome/free-regular-svg-icons'
+
 interface IconProps {
   // name of the icon
   icon: string
   // size sm: .875em
   // md: 1.33em
   // lg: 2em
   size?: 'xs' | 'sm' | 'md' | 'lg'
-  color?: 'light' | 'medium' | 'dark' | 'red' | 'green'
+  color?: 'light' | 'medium' | 'dark' | 'red' | 'green' | 'default'
 }
 
 const icons: Record<string, any> = {
@@ -74,7 +80,6 @@ const icons: Record<string, any> = {
   'dataset': faFileAlt,
   'datasets': faCopy,
   'readme': faGlasses,
-  'commit': faSave,
   'lock': faLock,
   'transform': faCode,
   'close': faTimes,
@@ -91,7 +96,11 @@ const icons: Record<string, any> = {
   'hamburger': faEllipsisH,
   'minus': faMinus,
   'plus': faPlus,
-  'sync': faSync
+  'sync': faSync,
+  'clock': faClock,
+  'bars': faBars,
+  'hdd': faHdd,
+  'stickyNote': faStickyNote
 }
 
 export const iconsList = Object.keys(icons)
@@ -108,7 +117,17 @@ const Icon: React.FunctionComponent<IconProps> = ({
     'lg': '2x'
   }
 
-  return <FontAwesomeIcon size={sizes[size]} icon={icons[icon]} className={`icon-${color}`}/>
+  if (icon === 'commit') {
+    return (
+      <svg aria-hidden='true' focusable='false' className={`svg-inline--fa fa-${sizes[size]}`} role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 91'>
+        <circle id='Oval' stroke='currentColor' strokeWidth='10' cx='26' cy='45' r='21' fill='none'></circle>
+        <line x1='26.5' y1='4.5' x2='26.5' y2='22.5' id='Line' stroke='currentColor' strokeWidth='10' strokeLinecap='square'></line>
+        <line x1='26.5' y1='66.5' x2='26.5' y2='86.5' id='Line' stroke='currentColor' strokeWidth='10' strokeLinecap='square'></line>
+      </svg>
+    )
+  }
+
+  return <FontAwesomeIcon size={sizes[size]} icon={icons[icon]} className={color === 'default' ? '' : `icon-${color}`}/>
 }
 
 export default Icon

app/components/collection/DatasetHeader.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
-import moment from 'moment'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClock } from '@fortawesome/free-regular-svg-icons'
 
 import { Structure, Commit } from '../../models/dataset'
-import fileSize from '../../utils/fileSize'
+
+import CommitDetails from '../CommitDetails'
 
 interface DatasetHeaderProps {
   path: string
@@ -15,25 +13,11 @@ interface DatasetHeaderProps {
 const DatasetHeader: React.FunctionComponent<DatasetHeaderProps> = ({ path, structure, commit }) => {
   return (
     <div className='commit-details-header'>
-      {structure && commit && <div className='details-flex'>
-        <div className='text-column'>
-          <div id='commit-title' className='text'>{commit.title}</div>
-          <div className='subtext'>
-            {/* <img className= 'user-image' src = {'https://avatars0.githubusercontent.com/u/1154390?s=60&v=4'} /> */}
-            <div className='time-message'>
-              <FontAwesomeIcon icon={faClock} size='sm'/>&nbsp;
-              {moment(commit.timestamp).format('MMMM Do YYYY, h:mm:ss a')}
-            </div>
-            <small className='small hash'>{path && path.replace('/ipfs/', '') }</small>
-          </div>
-        </div>
-        <div className='details-column'>
-          {structure.length && <div className='detail' id='commit-details-header-file-size'>{fileSize(structure.length)}</div>}
-          {structure.format && <div className='detail' id='commit-details-header-format'>{structure.format.toUpperCase()}</div>}
-          {structure.entries && <div className='detail' id='commit-details-header-entries'>{structure.entries.toLocaleString()} {structure.entries !== 1 ? 'entries' : 'entry'}</div>}
-          {structure.errCount && <div className='detail' id='commit-details-header-errors'>{structure.errCount.toLocaleString()} {structure.errCount !== 1 ? 'errors' : 'error'}</div>}
-        </div>
-      </div>}
+      {
+        structure && commit && (
+          <CommitDetails structure={structure} commit={commit} path={path} />
+        )
+      }
     </div>
   )
 }

app/components/collection/layouts/DatasetMainContent.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { Prompt } from 'react-router-dom'
 
 import { connectComponentToPropsWithRouter } from '../../../utils/connectComponentToProps'
 import { QriRef, qriRefFromRoute } from '../../../models/qriRef'
@@ -8,9 +7,6 @@ import { ApiActionThunk } from '../../../store/api'
 import { fetchWorkingDatasetDetails } from '../../../actions/api'
 import { selectFsiPath, selectMutationsIsDirty } from '../../../selections'
 
-import LinkButton from '../headerButtons/LinkButton'
-import PublishButton from '../headerButtons/PublishButton'
-
 interface DatasetMainContentProps extends RouteProps {
   qriRef: QriRef
   modified: boolean
@@ -19,28 +15,12 @@ interface DatasetMainContentProps extends RouteProps {
 }
 
 const DatasetMainContentComponent: React.FunctionComponent<DatasetMainContentProps> = (props) => {
-  const {
-    qriRef,
-    modified,
-    fsiPath,
-    children,
-    fetchWorkingDatasetDetails
-  } = props
-  return <>
-    <div className='main-content-header'>
-      <Prompt when={modified} message={(location) => {
-        if (location.pathname.includes(qriRef.username) && location.pathname.includes(qriRef.name)) return true
-        if (fsiPath !== '') {
-          fetchWorkingDatasetDetails(qriRef.username, qriRef.name)
-          return true
-        }
-        return `You have uncommited changes! Click 'cancel' and commit these changes before you navigate away or you will lose your work.`
-      }}/>
-      <LinkButton />
-      <PublishButton />
-    </div>
-    {children}
-  </>
+  const { children } = props
+  return (
+    <>
+      {children}
+    </>
+  )
 }
 
 export default connectComponentToPropsWithRouter(

app/components/collection/layouts/DatasetSidebar.tsx

@@ -7,8 +7,6 @@ import { connectComponentToPropsWithRouter } from '../../../utils/connectCompone
 
 import { selectVersionInfoFromWorkingDataset } from '../../../selections'
 
-import DatasetReference from '../../DatasetReference'
-import DatasetDetailsSubtext from '../../dataset/DatasetDetailsSubtext'
 import ReactTooltip from 'react-tooltip'
 import LogList from '../LogList'
 
@@ -18,10 +16,7 @@ export interface DatasetSidebarProps extends RouteProps {
 }
 
 export const DatasetSidebarComponent: React.FunctionComponent<DatasetSidebarProps> = (props) => {
-  const {
-    qriRef,
-    data
-  } = props
+  const { qriRef } = props
 
   // The `ReactTooltip` component relies on the `data-for` and `data-tip` attributes
   // we need to rebuild `ReactTooltip` so that it can recognize the `data-for`
@@ -30,10 +25,6 @@ export const DatasetSidebarComponent: React.FunctionComponent<DatasetSidebarProp
 
   return (
     <div className='sidebar'>
-      <div className='sidebar-header sidebar-padded-container'>
-        <DatasetReference qriRef={qriRef} />
-        <DatasetDetailsSubtext data={data} />
-      </div>
       <LogList qriRef={qriRef} />
     </div>
   )

app/components/form/CheckboxInput.tsx

@@ -1,27 +1,32 @@
 import * as React from 'react'
+import classNames from 'classnames'
 
 export interface CheckboxInputProps {
   label?: string
   name: string
   checked: boolean
+  indeterminate?: boolean
   onChange: (name: string, checked: any) => void
+  strong?: boolean
+  disabled?: boolean
 }
 
-const CheckboxInput: React.FunctionComponent<CheckboxInputProps> = ({ label, name, checked, onChange }) => {
+const CheckboxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
+  const { label, name, checked, onChange, indeterminate = false, strong = false, disabled = false } = props
   return (
-    <>
-      <div className='checkbox-input-container'>
-        <input
-          id={name}
-          name={name}
-          type='checkbox'
-          className='checkbox-input'
-          checked={checked}
-          onChange={ () => { onChange(name, !checked) }}
-        />
-        {label}
-      </div>
-    </>
+    <div className={classNames('checkbox-input-container', { 'disabled': disabled === true })}>
+      <input
+        id={name}
+        name={name}
+        type='checkbox'
+        className='checkbox-input'
+        checked={checked}
+        onChange={ () => { onChange(name, !checked) }}
+        ref={el => el && (el.indeterminate = indeterminate)}
+        disabled={disabled}
+      />
+      { strong ? (<strong>{label}</strong>) : label }
+    </div>
   )
 }
 

app/components/form/RadioInput.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import classNames from 'classnames'
+
+export interface RadioInputProps {
+  label?: string
+  name: string
+  checked: boolean
+  onChange: (name: string, checked: any) => void
+  strong?: boolean
+  disabled?: boolean
+}
+
+const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
+  const { label, name, checked, onChange, strong = false, disabled = false } = props
+
+  return (
+    <>
+      <div className={classNames('radio-input-container', { 'disabled': disabled === true })}>
+        <input
+          id={name}
+          name={name}
+          type='radio'
+          className='radio-input'
+          checked={checked}
+          onChange={ () => { onChange(name, !checked) }}
+          disabled={disabled}
+        />
+        { strong && (
+          <strong>{label}</strong>
+        )}
+        {!strong && label}
+      </div>
+    </>
+  )
+}
+
+export default RadioInput

app/components/item/LogListItem.tsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import { Action } from 'redux'
 import classNames from 'classnames'
+
 import { VersionInfo } from '../../models/store'
-import moment from 'moment'
+
+import RelativeTimestamp from '../RelativeTimestamp'
+import Icon from '../chrome/Icon'
 
 export interface LogListItemProps {
   id: string
@@ -52,9 +55,7 @@ const LogListItem: React.FunctionComponent<LogListItemProps> = (props) => {
         <div className='text'>{commitTitle}</div>
         <div className='subtext'>
           {/* Bring back avatar later <img className= 'user-image' src = {props.avatarUrl} /> */}
-          <div className='time-message'>
-            {moment(commitTime).fromNow()}
-          </div>
+          <span className='dataset-details'><Icon icon='clock' size='sm' color='default' /><RelativeTimestamp timestamp={commitTime}/></span>
         </div>
       </div>
     </div>