Skip to content

Commit

Permalink
[desk-tool] Refactor UI: move pane buttons to DefaultPane, and move t…
Browse files Browse the repository at this point in the history 
…hings into place as per design sketch
  • Loading branch information
@mariuslundgard @rexxars
mariuslundgard authored and rexxars committed Nov 19, 2019
1 parent 649373f commit 58acc13
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 173 deletions.
44 changes: 41 additions & 3 deletions packages/@sanity/components/src/panes/DefaultPane.js
View file
Expand Up @@ -11,6 +11,9 @@ import DropDownButton from 'part:@sanity/components/buttons/dropdown'
import Styleable from '../utilities/Styleable'
import defaultStyles from './styles/DefaultPane.css'
import S from '@sanity/base/structure-builder'
import BarsIcon from 'part:@sanity/base/bars-icon'
import CloseIcon from 'part:@sanity/base/close-icon'
import EyeIcon from 'part:@sanity/base/eye-icon'

function getActionKey(action, index) {
return (typeof action.action === 'string' ? action.action + action.title : action.title) || index
Expand Down Expand Up @@ -412,6 +415,22 @@ class Pane extends React.Component {
)
}

renderShowConextualPreviewsPane() {
const {onShowContextualPreview} = this.props
if (!onShowContextualPreview) return null
return (
<button
type="button"
onClick={onShowContextualPreview}
title="Contextual Previews pane"
>
<div tabIndex={-1}>
<EyeIcon />
</div>
</button>
)
}

render() {
const {
title,
Expand All @@ -420,12 +439,13 @@ class Pane extends React.Component {
isCollapsed,
isScrollable,
menuItems,
onSplitPane,
onToggleViewButton,
styles,
renderActions,
staticContent,
contentMaxWidth
} = this.props
const headerStyle = isCollapsed ? {} : this.state.headerStyle
const actions = menuItems.filter(
act => act.showAsAction && (!isCollapsed || act.showAsAction.whenCollapsed)
)
Expand All @@ -438,7 +458,7 @@ class Pane extends React.Component {
])}
onClick={this.handleRootClick}
>
<div className={styles.header} style={{boxShadow: headerStyle.boxShadow}}>
<div className={styles.header}>
<div
className={styles.headerContent}
style={contentMaxWidth ? {maxWidth: `${contentMaxWidth}px`} : {}}
Expand All @@ -451,7 +471,24 @@ class Pane extends React.Component {
{this.renderMenu()}
</div>
</div>
<div className={styles.headerViewMenu}>
<div className={styles.headerTabsContainer}>[Tabs]</div>
<div className={styles.headerPaneActions}>
<button type="button" onClick={onSplitPane} title="Split pane">
<div tabIndex={-1}>
<BarsIcon />
</div>
</button>
<button type="button" onClick={onToggleViewButton} title="Toggle view">
<div tabIndex={-1}>
<CloseIcon />
</div>
</button>
{this.renderShowConextualPreviewsPane()}
</div>
</div>
</div>

<div className={styles.main}>
{isScrollable ? (
<ScrollContainer className={styles.scrollContainer} onScroll={this.handleContentScroll}>
Expand All @@ -462,8 +499,9 @@ class Pane extends React.Component {
) : (
<div className={styles.notScrollable}>{children}</div>
)}
{staticContent}
</div>

{staticContent && <div className={styles.footer}>{staticContent}</div>}
</div>
)
}
Expand Down
69 changes: 54 additions & 15 deletions packages/@sanity/components/src/panes/styles/DefaultPane.css
View file
Expand Up @@ -56,16 +56,10 @@
.header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: stretch;
box-sizing: border-box;
line-height: var(--pane-header-height);
width: 100%;
height: var(--pane-header-height);
user-select: none;
background-color: inherit;
z-index: 10;
border-bottom: 1px solid #ccc;

@nest .isCollapsed & {
background-color: transparent;
Expand All @@ -82,8 +76,6 @@
align-items: stretch;
align-self: flex-end;
box-sizing: border-box;
height: 3.4375rem;
padding-left: var(--medium-padding);
width: 100%;

@nest .isCollapsed & {
Expand Down Expand Up @@ -193,12 +185,9 @@

.title {
box-sizing: border-box;
position: relative;
z-index: -1;
display: block;
margin: 0;
padding: 0 0.25em 0 0;
font-size: 1.25rem;
padding: 0.75em 1em 0.25em;
font-size: 1rem;
font-weight: 700;
user-select: none;
cursor: default;
Expand All @@ -208,7 +197,7 @@
width: stretch;
text-overflow: ellipsis;
margin-right: auto;
transform-origin: 0.5em 1.5em;
transform-origin: 1.5em 1.5em;
transform: rotate(0deg);
transition: transform var(--pane-animation-time) linear;

Expand All @@ -217,6 +206,25 @@
}
}

.headerViewMenu {
display: flex;
max-width: 640px;
padding: 0 1em;

@nest .isCollapsed & {
display: none;
}
}

.headerTabsContainer {
flex: 1;
padding: 0.25em 0;
}

.headerPaneActions {
outline: 1px solid red;
}

.functions {
display: flex;
align-items: flex-end;
Expand Down Expand Up @@ -277,6 +285,10 @@
}
}

.scrollWrapper {
margin: 0 auto;
}

.notScrollable {
display: block;
box-sizing: border-box;
Expand Down Expand Up @@ -349,3 +361,30 @@
font-size: var(--font-size-large);
margin-left: var(--large-padding);
}

.footer {
box-sizing: border-box;
background-color: var(--component-bg);
color: var(--text-color-secondary);
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: var(--zindex-pane);
padding: var(--small-padding) var(--medium-padding);
border-top: 1px solid #ccc;

@supports (padding-bottom: env(safe-area-inset-bottom)) {
padding-bottom: calc(var(--small-padding) + env(safe-area-inset-bottom));
}

/* NOTE: Work-around for hiding the snack bar when the keyboard is visible on small screens */
@media (max-height: 32em) {
position: relative;
}

@media (--screen-medium) {
position: static;
}
}
60 changes: 0 additions & 60 deletions packages/@sanity/desk-tool/src/pane/Editor/Actions.js
View file
Expand Up @@ -5,18 +5,12 @@ import Button from 'part:@sanity/components/buttons/default'
import LanguageFilter from 'part:@sanity/desk-tool/language-select-component?'
import SyncIcon from 'part:@sanity/base/sync-icon'
import CheckIcon from 'part:@sanity/base/check-icon'
import EyeIcon from 'part:@sanity/base/eye-icon'
import ValidationList from 'part:@sanity/components/validation/list'
import resolveContextualPreviews from 'part:@sanity/base/resolve-contextual-previews?'
import ChevronDown from 'part:@sanity/base/chevron-down-icon'
import WarningIcon from 'part:@sanity/base/warning-icon'
import SplitIcon from 'part:@sanity/base/bars-icon'
import {PaneRouterContext} from '../../index'
import styles from '../styles/Editor.css'

export default class Actions extends React.PureComponent {
static contextType = PaneRouterContext

static propTypes = {
isLiveEditEnabled: PropTypes.bool.isRequired,
isReconnecting: PropTypes.bool.isRequired,
Expand Down Expand Up @@ -92,57 +86,6 @@ export default class Actions extends React.PureComponent {
)
}

renderSplitPaneButton() {
return (
<button type="button" onClick={this.handleSplitPane} title="Split pane">
<div tabIndex={-1}>
<SplitIcon />
</div>
</button>
)
}

renderShowConextualPreviewsPane() {
if (!resolveContextualPreviews) {
return null
}

return (
<button
type="button"
onClick={this.handleShowContextualPreview}
title="Contextual Previews pane"
>
<div tabIndex={-1}>
<EyeIcon />
</div>
</button>
)
}

renderViewButton() {
return (
<button type="button" onClick={this.handleToggleViewButton} title="Toggle view">
<div tabIndex={-1}>
<WarningIcon />
</div>
</button>
)
}

handleShowContextualPreview = () => {
const {_id, _rev} = this.props.value
return this.context.replaceChildPane('preview', {_id, _rev})
}

handleSplitPane = () => {
this.context.duplicateCurrentPane()
}

handleToggleViewButton = () => {
this.context.setPaneView('someView')
}

renderErrors() {
const {
onCloseValidationResults,
Expand Down Expand Up @@ -206,9 +149,6 @@ export default class Actions extends React.PureComponent {
{isReconnecting && this.renderReconnecting()}
{value && !showSavingStatus && !isReconnecting && this.renderSyncedStatus()}
{this.renderErrors()}
{this.renderSplitPaneButton()}
{this.renderViewButton()}
{this.renderShowConextualPreviewsPane()}
</div>
)
}
Expand Down
32 changes: 4 additions & 28 deletions packages/@sanity/desk-tool/src/pane/Editor/EditForm.js
View file
@@ -1,9 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import {distanceInWordsToNow} from 'date-fns'
import FormBuilder from 'part:@sanity/form-builder'
import EditorStatusBadge from '../EditorStatusBadge'
import TimeAgo from '../../components/TimeAgo'
import styles from '../styles/Editor.css'

const preventDefault = ev => ev.preventDefault()
Expand All @@ -13,7 +10,7 @@ export default class EditForm extends React.PureComponent {
draft: PropTypes.object,
filterField: PropTypes.func.isRequired,
focusPath: PropTypes.array.isRequired,
isLiveEditEnabled: PropTypes.bool,
// isLiveEditEnabled: PropTypes.bool,
markers: PropTypes.arrayOf(
PropTypes.shape({
path: PropTypes.array
Expand All @@ -22,7 +19,7 @@ export default class EditForm extends React.PureComponent {
onBlur: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
onFocus: PropTypes.func.isRequired,
onShowHistory: PropTypes.func.isRequired,
// onShowHistory: PropTypes.func.isRequired,
patchChannel: PropTypes.object.isRequired,
published: PropTypes.object,
initialValue: PropTypes.object,
Expand All @@ -37,12 +34,12 @@ export default class EditForm extends React.PureComponent {
filterField,
focusPath,
initialValue,
isLiveEditEnabled,
// isLiveEditEnabled,
markers,
onBlur,
onChange,
onFocus,
onShowHistory,
// onShowHistory,
patchChannel,
readOnly,
schema,
Expand All @@ -51,27 +48,6 @@ export default class EditForm extends React.PureComponent {
const value = draft || published || initialValue
return (
<>
<div className={styles.top}>
<span className={styles.statusBadges}>
<EditorStatusBadge
liveEdit={isLiveEditEnabled}
isDraft={!!draft}
isPublished={!!published}
title={
published &&
`Published ${distanceInWordsToNow(published._updatedAt, {
addSuffix: true
})}`
}
/>
</span>
{value && value._updatedAt && (
<span className={styles.editedTimeClickable} onClick={onShowHistory}>
{'Updated '}
<TimeAgo time={value._updatedAt} />
</span>
)}
</div>
<form
className={styles.editor}
onSubmit={preventDefault}
Expand Down

0 comments on commit 58acc13

Please sign in to comment.