Skip to content

Commit

Permalink
[dashboard] Fix file names to conform to conventions, update design
Browse files Browse the repository at this point in the history
  • Loading branch information
mariuslundgard authored and Thomas Drevon committed Mar 14, 2019
1 parent 32e7380 commit e76c4f2
Show file tree
Hide file tree
Showing 17 changed files with 550 additions and 517 deletions.
3 changes: 1 addition & 2 deletions packages/@sanity/base/src/styles/typography/headings.css
Expand Up @@ -34,15 +34,14 @@

.heading4 {
composes: root;
text-transform: uppercase;
font-size: var(--font-size-h4);
/* line-height: calc(22 / 16); */
padding-top: 1rem;
padding-bottom: 1rem;
}

.heading5 {
composes: root;
text-transform: uppercase;
font-size: var(--font-size-h5);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/@sanity/dashboard/sanity.json
Expand Up @@ -50,7 +50,7 @@
},
{
"implements": "part:@sanity/dashboard/widget-styles",
"path": "styles.modules.css"
"path": "widget.css"
}
]
}
Expand Up @@ -13,12 +13,12 @@
}

.header {
padding: var(--small-padding);
}

.title {
composes: heading4 from "part:@sanity/base/theme/typography/headings-style";
padding: var(--small-padding) var(--medium-padding) !important;
line-height: 2em;
}

.listContainer {
Expand Down
117 changes: 117 additions & 0 deletions packages/@sanity/dashboard/src/widgets/documentList/DocumentList.js
@@ -0,0 +1,117 @@
import React from 'react'
import PropTypes from 'prop-types'
import {IntentLink} from 'part:@sanity/base/router'
import SanityPreview from 'part:@sanity/base/preview'
import QueryContainer from 'part:@sanity/base/query-container'
import Spinner from 'part:@sanity/components/loading/spinner'
import schema from 'part:@sanity/base/schema'
import IntentButton from 'part:@sanity/components/buttons/intent'
import {List, Item} from 'part:@sanity/components/lists/default'
import {intersection} from 'lodash'

import styles from './DocumentList.css'

const schemaTypeNames = schema.getTypeNames()

function stringifyArray(array) {
return `["${array.join('","')}"]`
}

class DocumentList extends React.Component {
static propTypes = {
title: PropTypes.string,
types: PropTypes.arrayOf([PropTypes.string]),
query: PropTypes.string,
order: PropTypes.string,
limit: PropTypes.number
}

static defaultProps = {
title: 'Last created',
order: '_createdAt desc',
limit: 10,
types: null,
query: null
}

assembleQuery = () => {
const {query, types, order, limit} = this.props

if (query) {
return query
}

const documentTypes = schemaTypeNames.filter(typeName => {
const schemaType = schema.get(typeName)
return schemaType.type && schemaType.type.name === 'document'
})

if (types) {
return `
*[
_type in ${stringifyArray(intersection(types, documentTypes))}
] | order(${order}) [0...${limit}]`
}

return `
*[
_type in ${stringifyArray(documentTypes)}
] | {_id, _type} | order(${order}) [0...${limit}]`
}

render() {
const {title, types} = this.props
const query = this.assembleQuery()

return (
<div className={styles.container}>
<header className={styles.header}>
<h2 className={styles.title}>{title}</h2>
</header>
<List className={styles.list}>
<QueryContainer query={query}>
{({result, loading, error, onRetry}) => {
if (loading) {
return <Spinner center message="Loading items…" />
}
const items = result ? result.documents : []
return items.map(item => {
const type = schema.get(item._type)
return (
<Item key={item._id}>
<IntentLink
intent="edit"
params={{
type: item._type,
id: item._id
}}
className={styles.link}
>
<SanityPreview layout="default" type={type} value={item} key={item._id} />
</IntentLink>
</Item>
)
})
}}
</QueryContainer>
</List>
{types &&
types.length === 1 && (
<div className={styles.buttonContainer}>
<IntentButton
bleed
color="primary"
kind="simple"
intent="create"
params={{type: types[0]}}
>
Create new {types[0]}
</IntentButton>
</div>
)}
</div>
)
}
}

export default DocumentList
115 changes: 1 addition & 114 deletions packages/@sanity/dashboard/src/widgets/documentList/index.js
@@ -1,117 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import {IntentLink} from 'part:@sanity/base/router'
import SanityPreview from 'part:@sanity/base/preview'
import QueryContainer from 'part:@sanity/base/query-container'
import Spinner from 'part:@sanity/components/loading/spinner'
import schema from 'part:@sanity/base/schema'
import IntentButton from 'part:@sanity/components/buttons/intent'
import {List, Item} from 'part:@sanity/components/lists/default'
import {intersection} from 'lodash'
import styles from './index.css'

const schemaTypeNames = schema.getTypeNames()

function stringifyArray(array) {
return `["${array.join('","')}"]`
}

class DocumentList extends React.Component {
static propTypes = {
title: PropTypes.string,
types: PropTypes.arrayOf([PropTypes.string]),
query: PropTypes.string,
order: PropTypes.string,
limit: PropTypes.number
}

static defaultProps = {
title: 'Last created',
order: '_createdAt desc',
limit: 10,
types: null,
query: null
}

assembleQuery = () => {
const {query, types, order, limit} = this.props

if (query) {
return query
}

const documentTypes = schemaTypeNames.filter(typeName => {
const schemaType = schema.get(typeName)
return schemaType.type && schemaType.type.name === 'document'
})

if (types) {
return `
*[
_type in ${stringifyArray(intersection(types, documentTypes))}
] | order(${order}) [0...${limit}]`
}

return `
*[
_type in ${stringifyArray(documentTypes)}
] | {_id, _type} | order(${order}) [0...${limit}]`
}

render() {
const {title, types} = this.props
const query = this.assembleQuery()

return (
<div className={styles.container}>
<header className={styles.header}>
<h2 className={styles.title}>{title}</h2>
</header>
<List className={styles.list}>
<QueryContainer query={query}>
{({result, loading, error, onRetry}) => {
if (loading) {
return <Spinner center message="Loading items…" />
}
const items = result ? result.documents : []
return items.map(item => {
const type = schema.get(item._type)
return (
<Item key={item._id}>
<IntentLink
intent="edit"
params={{
type: item._type,
id: item._id
}}
className={styles.link}
>
<SanityPreview layout="default" type={type} value={item} key={item._id} />
</IntentLink>
</Item>
)
})
}}
</QueryContainer>
</List>
{types &&
types.length === 1 && (
<div className={styles.buttonContainer}>
<IntentButton
bleed
color="primary"
kind="simple"
intent="create"
params={{type: types[0]}}
>
Create new {types[0]}
</IntentButton>
</div>
)}
</div>
)
}
}
import DocumentList from './DocumentList'

export default {
name: 'document-list',
Expand Down
47 changes: 32 additions & 15 deletions packages/@sanity/dashboard/src/widgets/projectInfo/ProjectInfo.css
Expand Up @@ -24,10 +24,18 @@

@nest & td, & th {
min-width: 5em;
padding: var(--small-padding) var(--medium-padding);
padding: var(--medium-padding) var(--small-padding);
}

@nest & tr:not(:last-child) {
@nest & td:first-child, & th:first-child {
padding-left: calc(var(--medium-padding) + var(--small-padding));
}

@nest & td:last-child, & th:last-child {
padding-right: calc(var(--medium-padding) + var(--small-padding));
}

@nest & tr {
border-bottom: 1px solid var(--hairline-color);
}

Expand All @@ -37,25 +45,34 @@
}

@nest & td a {
color: inherit;
color: var(--default-button-primary-color);
text-decoration: inherit;

@media (hover: hover) {
@nest &:hover {
color: inherit;
}
}
}
}

th.sectionHeader {
text-align: left;
text-transform: uppercase;
padding-left: var(--medium-padding);
padding-bottom: var(--small-padding);
padding-top: var(--medium-padding);
font-size: var(--font-size-xsmall);
font-weight: 400;
letter-spacing: 0.5px;
color: var(--text-color-secondary);
width: 100%;

@nest & .sectionHeader {
text-align: left;
text-transform: uppercase;
padding-left: var(--medium-padding);
padding-bottom: var(--small-padding);
padding-top: var(--large-padding);
font-size: var(--font-size-xsmall);
font-weight: 400;
letter-spacing: 0.5px;
color: var(--text-color-secondary);
width: 100%;
@nest .table > tbody:first-child & {
padding-top: 0;
}
}

.buttonContainer {
composes: bottomButtonContainer from 'part:@sanity/dashboard/widget-styles';
border-top: 1px solid var(--hairline-color);
}

0 comments on commit e76c4f2

Please sign in to comment.