Skip to content

Commit

Permalink
[default-layout] Rename ToolSwitcher to ToolMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariuslundgard @rexxars
mariuslundgard authored and rexxars committed Oct 6, 2020
1 parent 13f7ea9 commit 5e72d96
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 41 deletions.
14 changes: 7 additions & 7 deletions packages/@sanity/default-layout/src/navbar/Navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
/* prettier-ignore */
grid-template-columns: max-content max-content min-content minmax(240px, 100%) min-content max-content max-content;

@nest &.withToolSwitcher {
@nest &.withToolMenu {
/* prettier-ignore */
grid-template-areas: 'branding datasetSelect createButton search toolSwitcher extras sanityStatus helpButton presence loginStatus';
/* prettier-ignore */
Expand All @@ -33,7 +33,7 @@
color: inherit;
border-radius: var(--extra-small-padding);
display: block;

@nest &:focus {
outline: 0;
box-shadow: var(--input-box-shadow--focus);
Expand All @@ -45,7 +45,7 @@
padding: var(--small-padding) var(--extra-small-padding);

@media (--screen-medium) {
@nest .withToolSwitcher & {
@nest .withToolMenu & {
display: none;
}
}
Expand All @@ -60,7 +60,7 @@
box-sizing: border-box;

@media (--screen-medium) {
@nest .withToolSwitcher & {
@nest .withToolMenu & {
display: flex;
}
}
Expand All @@ -72,7 +72,7 @@
padding: var(--small-padding) var(--extra-small-padding);

@media (--screen-medium) {
@nest .withToolSwitcher & {
@nest .withToolMenu & {
display: flex;
}
}
Expand All @@ -84,7 +84,7 @@
padding: var(--small-padding) var(--extra-small-padding);

@media (--screen-medium) {
@nest .withToolSwitcher & {
@nest .withToolMenu & {
display: block;
}
}
Expand All @@ -101,7 +101,7 @@
padding: var(--small-padding) var(--extra-small-padding);

@media (--screen-medium) {
@nest .withToolSwitcher & {
@nest .withToolMenu & {
display: block;
}
}
Expand Down
14 changes: 7 additions & 7 deletions packages/@sanity/default-layout/src/navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import SearchIcon from 'part:@sanity/base/search-icon'
import Button from 'part:@sanity/components/buttons/default'
import {Tooltip} from 'part:@sanity/components/tooltip'
import * as sidecar from 'part:@sanity/default-layout/sidecar?'
import ToolSwitcher from 'part:@sanity/default-layout/tool-switcher'
import ToolMenu from 'part:@sanity/default-layout/tool-switcher'
import {HAS_SPACES} from '../util/spaces'
import {Router, Tool} from '../types'
import Branding from './branding/Branding'
Expand All @@ -33,7 +33,7 @@ interface Props {
router: Router
searchIsOpen: boolean
showLabel: boolean
showToolSwitcher: boolean
showToolMenu: boolean
tools: Tool[]
}

Expand All @@ -55,11 +55,11 @@ export default function Navbar(props: Props) {
tools,
searchIsOpen,
showLabel,
showToolSwitcher
showToolMenu
} = props

const rootState = HAS_SPACES && router.state.space ? {space: router.state.space} : {}
const className = classNames(styles.root, showToolSwitcher && styles.withToolSwitcher)
const className = classNames(styles.root, showToolMenu && styles.withToolMenu)
const searchClassName = classNames(styles.search, searchIsOpen && styles.searchIsOpen)

return (
Expand All @@ -82,7 +82,7 @@ export default function Navbar(props: Props) {
</div>
{HAS_SPACES && (
<div className={styles.datasetSelect}>
<DatasetSelect isVisible={showToolSwitcher} tone="navbar" />
<DatasetSelect isVisible={showToolMenu} tone="navbar" />
</div>
)}
<div className={styles.createButton}>
Expand Down Expand Up @@ -116,9 +116,9 @@ export default function Navbar(props: Props) {
</div>
</div>
<div className={styles.toolSwitcher}>
<ToolSwitcher
<ToolMenu
direction="horizontal"
isVisible={showToolSwitcher}
isVisible={showToolMenu}
tools={tools}
activeToolName={router.state.tool}
onSwitchTool={onSwitchTool}
Expand Down
51 changes: 24 additions & 27 deletions packages/@sanity/default-layout/src/navbar/NavbarContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ interface NextState {
winWidth: number
showLabel?: boolean
showLabelMinWidth?: number
showToolSwitcher?: boolean
showToolSwitcherMinWidth?: number
showToolMenu?: boolean
showToolMenuMinWidth?: number
}

interface State {
showLabel: boolean
showLabelMinWidth: number
showToolSwitcher: boolean
showToolSwitcherMinWidth: number
showToolMenu: boolean
showToolMenuMinWidth: number
}

/* eslint-disable complexity */
Expand All @@ -37,13 +37,13 @@ function getNextState(
state: {
showLabel: boolean
showLabelMinWidth: number
showToolSwitcher: boolean
showToolSwitcherMinWidth: number
showToolMenu: boolean
showToolMenuMinWidth: number
},
mostRight: {},
winWidth: number
) {
const {showLabel, showLabelMinWidth, showToolSwitcher, showToolSwitcherMinWidth} = state
const {showLabel, showLabelMinWidth, showToolMenu, showToolMenuMinWidth} = state
const mostRightIsVisible = mostRight && mostRight <= winWidth
const nextState: NextState = {winWidth}

Expand All @@ -57,19 +57,19 @@ function getNextState(
nextState.showLabel = true
}

if (showToolSwitcher) {
if (showToolSwitcherMinWidth === -1 || winWidth < showToolSwitcherMinWidth) {
nextState.showToolSwitcherMinWidth = winWidth
if (showToolMenu) {
if (showToolMenuMinWidth === -1 || winWidth < showToolMenuMinWidth) {
nextState.showToolMenuMinWidth = winWidth
}
} else if (showToolSwitcherMinWidth < winWidth) {
nextState.showToolSwitcher = true
} else if (showToolMenuMinWidth < winWidth) {
nextState.showToolMenu = true
}
} else {
// most-right element is NOT within viewport
if (showLabel) {
nextState.showLabel = false
} else if (showToolSwitcher) {
nextState.showToolSwitcher = false
} else if (showToolMenu) {
nextState.showToolMenu = false
}
}

Expand All @@ -83,8 +83,8 @@ class NavbarContainer extends React.PureComponent<Props, State> {
state = {
showLabel: false,
showLabelMinWidth: -1,
showToolSwitcher: false,
showToolSwitcherMinWidth: -1,
showToolMenu: false,
showToolMenuMinWidth: -1,
winWidth: -1
}

Expand All @@ -102,13 +102,12 @@ class NavbarContainer extends React.PureComponent<Props, State> {

/* eslint-disable complexity */
componentDidUpdate(prevProps: Props, prevState: State) {
const {showLabel, showLabelMinWidth, showToolSwitcher, showToolSwitcherMinWidth} = this.state
const {showLabel, showLabelMinWidth, showToolMenu, showToolMenuMinWidth} = this.state
const didShowLabel = showLabelMinWidth === -1 && !prevState.showLabel && showLabel
const didShowToolSwitcher =
showToolSwitcherMinWidth === -1 && !prevState.showToolSwitcher && showToolSwitcher
const didHideLabel = showToolSwitcherMinWidth === -1 && prevState.showLabel && !showLabel
const didShowToolMenu = showToolMenuMinWidth === -1 && !prevState.showToolMenu && showToolMenu
const didHideLabel = showToolMenuMinWidth === -1 && prevState.showLabel && !showLabel

if (didShowLabel || didShowToolSwitcher || didHideLabel) {
if (didShowLabel || didShowToolMenu || didHideLabel) {
this.handleCustomResize(window.innerWidth)
}
}
Expand Down Expand Up @@ -140,14 +139,12 @@ class NavbarContainer extends React.PureComponent<Props, State> {

handleCustomResize(winWidth: number) {
if (this.loginStatusElement) {
const {showToolSwitcher} = this.state
// console.log(this.searchElement)
const mostRightRect = showToolSwitcher
const {showToolMenu} = this.state
const mostRightRect = showToolMenu
? this.loginStatusElement.getBoundingClientRect()
: this.searchElement.getBoundingClientRect()
this.setState(state => {
const nextState = getNextState(state, mostRightRect.left + mostRightRect.width, winWidth)
// console.log(nextState)
return nextState as State
})
}
Expand All @@ -174,7 +171,7 @@ class NavbarContainer extends React.PureComponent<Props, State> {
searchIsOpen,
tools
} = this.props
const {showLabel, showToolSwitcher} = this.state
const {showLabel, showToolMenu} = this.state

return (
<Navbar
Expand All @@ -190,7 +187,7 @@ class NavbarContainer extends React.PureComponent<Props, State> {
router={router}
searchIsOpen={searchIsOpen}
showLabel={showLabel}
showToolSwitcher={showToolSwitcher}
showToolMenu={showToolMenu}
tools={tools}
/>
)
Expand Down

0 comments on commit 5e72d96

Please sign in to comment.