Skip to content

Commit

Permalink
feat: create dataset modal style, tooltips, copy
Browse files Browse the repository at this point in the history
Merge pull request #203 from qri-io/squash-bugs
  • Loading branch information
chriswhong authored Sep 10, 2019
2 parents c4831cb + 80e0518 commit fae0bd7
Show file tree
Hide file tree
Showing 15 changed files with 273 additions and 51 deletions.
15 changes: 3 additions & 12 deletions app/components/CommitDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react'
import moment from 'moment'
import { Resizable } from '../components/Resizable'
import { Action } from 'redux'
import ComponentList from '../components/ComponentList'
import DatasetComponent from './DatasetComponent'
Expand All @@ -10,8 +9,6 @@ import { ApiAction } from '../store/api'
import { Commit } from '../models/dataset'
import { CommitDetails as ICommitDetails, ComponentType } from '../models/Store'

import { defaultSidebarWidth } from '../reducers/ui'

export interface CommitDetailsProps {
peername: string
name: string
Expand Down Expand Up @@ -39,9 +36,7 @@ const CommitDetails: React.FunctionComponent<CommitDetailsProps> = ({
selectedCommitPath,
commit,
selectedComponent,
sidebarWidth,
setSelectedListItem,
setSidebarWidth,
fetchCommitDetail,
commitDetails
}) => {
Expand Down Expand Up @@ -119,12 +114,8 @@ const CommitDetails: React.FunctionComponent<CommitDetailsProps> = ({
</div>
</div>
<div className='columns'>
<Resizable
id='sidebar'
width={sidebarWidth}
onResize={(width) => { setSidebarWidth('commit', width) }}
onReset={() => { setSidebarWidth('commit', defaultSidebarWidth) }}
maximumWidth={348}
<div
className='commit-details-sidebar sidebar'
>
<ComponentList
status={status}
Expand All @@ -133,7 +124,7 @@ const CommitDetails: React.FunctionComponent<CommitDetailsProps> = ({
onComponentClick={setSelectedListItem}
isLinked
/>
</Resizable>
</div>
<div className='content-wrapper'>
<DatasetComponent isLoading={loading} component={selectedComponent} componentStatus={status[selectedComponent]} history />
</div>
Expand Down
5 changes: 4 additions & 1 deletion app/components/ComponentList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,11 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
components.map(({ name, displayName, tooltip, icon }) => {
if (status[name] && isLinked) {
const { filepath, status: fileStatus } = status[name]

// if filepath is the same as the component name, we are looking at a
// a commit's component, and should not render a filename
let filename = ''
if (filepath !== 'repo') {
if (filepath !== name) {
filename = filepath.substring((filepath.lastIndexOf('/') + 1))
}

Expand Down
5 changes: 2 additions & 3 deletions app/components/Dataset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ export default class Dataset extends React.Component<DatasetProps> {
const { peername: username, photo: userphoto } = session
const { showDatasetList, datasetSidebarWidth } = ui
const {
peername,
name,
activeTab,
component: selectedComponent,
Expand All @@ -245,7 +246,6 @@ export default class Dataset extends React.Component<DatasetProps> {
const linkButton = isLinked ? (
<HeaderColumnButton
icon={faFolderOpen}
tooltip={`Open ${workingDataset.linkpath}`}
label='Show Files'
onClick={this.openWorkingDirectory}
/>) : (
Expand Down Expand Up @@ -293,7 +293,6 @@ export default class Dataset extends React.Component<DatasetProps> {
<div className='header-left'>
<div
className={classNames('current-dataset', 'header-column', 'sidebar-list-item', { 'expanded': showDatasetList })}
data-tip={`${workingDataset.peername}/${workingDataset.name}`}
onClick={toggleDatasetList}
style={{ width: datasetSidebarWidth }}
>
Expand All @@ -302,7 +301,7 @@ export default class Dataset extends React.Component<DatasetProps> {
</div>
<div className='header-column-text'>
<div className="label">{name ? 'Current Dataset' : 'Choose a Dataset'}</div>
<div className="name">{name}</div>
<div className="name">{peername}/{name}</div>
</div>
<div className='header-column-arrow'>
{
Expand Down
32 changes: 29 additions & 3 deletions app/components/form/TextInput.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import * as React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'

export interface TextInputProps {
label?: string
labelTooltip?: string
name: string
type: string
value: any
Expand All @@ -15,16 +18,39 @@ export interface TextInputProps {
white?: boolean
}

const TextInput: React.FunctionComponent<TextInputProps> = ({ label, name, type, value, maxLength, errorText, helpText, showHelpText, onChange, onKeyDown, placeHolder
}) => {
const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
const {
label,
labelTooltip,
name,
type,
value,
maxLength,
errorText,
helpText,
showHelpText,
onChange,
onKeyDown,
placeHolder
} = props

const feedbackColor = errorText ? 'error' : showHelpText && helpText ? 'textMuted' : ''
const feedback = errorText || (showHelpText &&
helpText)
const labelColor = 'primary'
return (
<>
<div className='text-input-container'>
{label && <span className={labelColor}>{label}</span>}
{label && <><span className={labelColor}>{label}</span>&nbsp;&nbsp;</>}
{labelTooltip && (
<span
data-tip={labelTooltip}
data-for={'modal-tooltip'}
className='text-input-tooltip'
>
<FontAwesomeIcon icon={faInfoCircle} size='sm'/>
</span>
)}
<input
id={name}
name={name}
Expand Down
27 changes: 20 additions & 7 deletions app/components/modals/CreateDataset.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import * as React from 'react'
import { remote } from 'electron'

import Modal from './Modal'
import ExternalLink from '../ExternalLink'
import { ApiAction } from '../../store/api'
import TextInput from '../form/TextInput'
import Error from './Error'
import Buttons from './Buttons'
// import Tabs from './Tabs'
import ButtonInput from '../form/ButtonInput'
import { DatasetSummary } from '../../models/store'
import { validateDatasetName } from '../../utils/formValidation'

interface CreateDatasetProps {
onDismissed: () => void
Expand All @@ -23,11 +26,16 @@ const CreateDataset: React.FunctionComponent<CreateDatasetProps> = ({ onDismisse

const [dismissable, setDismissable] = React.useState(true)
const [buttonDisabled, setButtonDisabled] = React.useState(true)
const [datasetNameError, setDatasetNameError] = React.useState('')
const [alreadyDatasetError, setAlreadyDatasetError] = React.useState('')

React.useEffect(() => {
// disable unless all fields have valid
const ready = path !== '' && filePath !== '' && datasetName !== ''
// validate datasetName and assign error
const datasetNameValidationError = validateDatasetName(datasetName)
datasetNameValidationError ? setDatasetNameError(datasetNameValidationError) : setDatasetNameError('')

// only ready when all three fields are not invalid
const ready = path !== '' && filePath !== '' && !datasetNameValidationError
setButtonDisabled(!ready)
}, [datasetName, path, filePath])

Expand Down Expand Up @@ -141,12 +149,15 @@ const CreateDataset: React.FunctionComponent<CreateDatasetProps> = ({ onDismisse
dismissable={dismissable}
setDismissable={setDismissable}
>
<div className='content-wrap'>
<div className='content-wrap' >
<div className='content'>
<p>Qri will create a directory for your new dataset, containing files linked to each of the dataset&apos;s <ExternalLink href='https://qri.io/docs/concepts/dataset/'>components</ExternalLink>.</p>
<p>The data file you specify will become your new dataset&apos;s <ExternalLink href='https://qri.io/docs/reference/dataset/#body'>body</ExternalLink> component.</p>
<div className='flex-space-between'>
<TextInput
name='path'
label='Data file'
label='Source data file'
labelTooltip='Select a CSV or JSON file on your file system.<br/>Qri will import the data and leave the file in place.'
type=''
value={filePath}
onChange={handleChanges}
Expand All @@ -157,17 +168,19 @@ const CreateDataset: React.FunctionComponent<CreateDatasetProps> = ({ onDismisse
</div>
<TextInput
name='datasetName'
label='Dataset Name'
label='Name'
labelTooltip='Name will be the primary<br/> way to refer to your dataset.'
type=''
value={datasetName}
onChange={handleChanges}
maxLength={600}
errorText={alreadyDatasetError}
errorText={datasetNameError}
/>
<div className='flex-space-between'>
<TextInput
name='path'
label='Save Path'
label='Directory path'
labelTooltip='Qri will create a new directory for<br/>this dataset&apos;s files at this location.'
type=''
value={path}
onChange={handleChanges}
Expand Down
14 changes: 14 additions & 0 deletions app/components/modals/Modal.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react'
import classNames from 'classnames'
import ModalHeader from './header'
import ReactTooltip from 'react-tooltip'

/**
* Title bar height in pixels. Values taken from 'app/styles/_variables.scss'.
Expand Down Expand Up @@ -224,6 +225,11 @@ const Modal: React.FunctionComponent<ModalProps> = ({ title, dismissable = false
className
)

// we are rendering a second instance of ReactTooltip here because the modal
// is displayed in a <dialog> element, which always wants to live above the
// rest of the page. To add tooltips in a modal, add data-tip='string' and
// data-for='modal-tooltip' (the id of the ReactTooltip instance)

return (
<dialog
open={false}
Expand All @@ -238,6 +244,14 @@ const Modal: React.FunctionComponent<ModalProps> = ({ title, dismissable = false
{children}
</fieldset>
</form>
<ReactTooltip
id='modal-tooltip'
place='top'
type='dark'
effect='solid'
delayShow={500}
multiline
/>
</dialog>
)
}
Expand Down
6 changes: 5 additions & 1 deletion app/main.development.js
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ app.on('ready', () =>
label: 'Quit Qri Desktop',
accelerator: 'Command+Q',
click () {
quitting = true; app.quit()
app.quit()
}
}
]
Expand Down Expand Up @@ -508,4 +508,8 @@ app.on('ready', () =>
app.on('activate', () => {
mainWindow.show()
})

app.on('before-quit', () => {
quitting = true
})
}))
5 changes: 3 additions & 2 deletions app/reducers/selections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,13 @@ export default (state = initialState, action: AnyAction) => {

case SELECTIONS_SET_WORKING_DATASET:
const { peername, name, isLinked, published } = action.payload
const newActiveTab = isLinked ? 'status' : 'history'

localStore().setItem('peername', peername)
localStore().setItem('name', name)
localStore().setItem('isLinked', isLinked)
localStore().setItem('published', published)

const newActiveTab = isLinked ? 'status' : 'history'
localStore().setItem('activeTab', newActiveTab)

return Object.assign({}, state, {
peername,
Expand Down
11 changes: 7 additions & 4 deletions app/scss/_dataset.scss
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ $header-font-size: .9rem;
display: flex;
justify-content: center;
background-color: rgba(0,0,0,0.1);
user-select: none;
user-select: none;
}

&:hover {
Expand Down Expand Up @@ -194,7 +194,7 @@ $header-font-size: .9rem;
overflow-y: auto;
height: 100%;

#sidebar {
#sidebar, .sidebar {
position: relative;
flex: 0 0 auto;
border-right: 1px solid $border-color;
Expand Down Expand Up @@ -319,7 +319,6 @@ $header-font-size: .9rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.6rem;
}

.subtext {
Expand Down Expand Up @@ -404,6 +403,7 @@ $header-font-size: .9rem;
.sidebar-list-item {
border-bottom: $list-item-bottom-border;
display: flex;
align-items: center;
}

.sidebar-list-header {
Expand All @@ -426,7 +426,6 @@ $header-font-size: .9rem;

.status-column {
text-align: center;
line-height: 2.9rem;
width: 30px;
}

Expand Down Expand Up @@ -473,6 +472,10 @@ $header-font-size: .9rem;
padding: $sidebar-item-padding;
border-bottom: $list-item-bottom-border;
}

.commit-details-sidebar {
width: 200px;
}
}


Expand Down
4 changes: 2 additions & 2 deletions app/scss/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -497,11 +497,11 @@ button.input {
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
color: $primary-muted;
color: $primary;
border: none;
cursor: pointer;
&:hover {
color: $primary;
color: $primary-dark;
}
}

Expand Down
8 changes: 8 additions & 0 deletions app/scss/_welcome.scss
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,11 @@
.text-input-container {
width: 100%
}

.text-input-tooltip {
svg {
path {
fill: #c1c1c1;
}
}
}
Loading

0 comments on commit fae0bd7

Please sign in to comment.