Skip to content

Commit

Permalink
[field] Tweak changes layout
Browse files Browse the repository at this point in the history
  • Loading branch information
mariuslundgard authored and rexxars committed Oct 6, 2020
1 parent e312501 commit dae6a60
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 9 deletions.
5 changes: 3 additions & 2 deletions packages/@sanity/field/src/diff/changes/FieldChange.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import 'part:@sanity/base/theme/variables-style';

.root {
@nest .root + & {
@nest div + & {
margin-top: var(--extra-large-padding);
}
}
Expand All @@ -12,6 +12,7 @@

.header {
padding: 0 0 var(--extra-small-padding);
margin-left: -1px;
}

.change {
Expand Down Expand Up @@ -43,6 +44,6 @@
}

.revertChangesButtonContainer {
margin-left: -0.25em;
margin-left: calc(0 - var(--extra-small-padding) - 2px);
margin-top: 0.25em;
}
9 changes: 7 additions & 2 deletions packages/@sanity/field/src/diff/changes/GroupChange.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
@import 'part:@sanity/base/theme/variables-style';

.groupChange {
@nest div + & {
margin-top: var(--extra-large-padding);
}
}

.changeList {
position: relative;
padding: var(--extra-small-padding) 0 0 var(--small-padding);
padding: var(--small-padding) 0 0 var(--small-padding);

@nest &::before {
content: '';
Expand All @@ -28,9 +31,11 @@

.changeHeader {
display: flex;
margin: 0 0 var(--extra-small-padding);
padding: 0 0 var(--extra-small-padding);
margin-left: -1px;
}

.revertChangesButtonContainer {
margin-left: calc(0 - var(--extra-small-padding) - 2px);
margin-top: var(--small-padding);
}
48 changes: 48 additions & 0 deletions packages/@sanity/field/src/diff/changes/RevertChangesButton.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
@import 'part:@sanity/base/theme/variables-style';

.root {
-webkit-font-smoothing: inherit;
appearance: none;
margin: 0;
padding: var(--extra-small-padding);
font: inherit;
color: inherit;
background: none;
border: 0;
border-radius: var(--border-radius-large);
display: flex;
align-items: center;
color: var(--text-muted);
outline: none;

@media (hover: hover) {
@nest &:hover {
color: var(--state-danger-color);
}
}

@nest &:focus-visible {
box-shadow: inset 0 0 0 2px var(--component-bg), inset 0 0 0 4px var(--focus-color);
}
}

.iconContainer {
display: block;

@nest & > svg {
display: block;
font-size: 19px;
}
}

.text {
display: block;
font-size: var(--font-size-small);
line-height: var(--line-height-small);
margin: -2px 0 -1px;
padding-right: 3px;

@nest .iconContainer + & {
margin-left: var(--extra-small-padding);
}
}
17 changes: 12 additions & 5 deletions packages/@sanity/field/src/diff/changes/RevertChangesButton.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import classNames from 'classnames'
import React from 'react'
import Button, {ButtonProps} from 'part:@sanity/components/buttons/default'
import UndoIcon from 'part:@sanity/base/undo-icon'

import styles from './RevertChangesButton.css'

export function RevertChangesButton(
props: Omit<ButtonProps, 'icon' | 'kind' | 'padding' | 'size'>
props: Omit<React.HTMLProps<HTMLButtonElement>, 'type'>
): React.ReactElement {
const {className, ...restProps} = props

return (
<Button {...props} icon={UndoIcon} kind="simple" padding="small" size="small">
Revert changes
</Button>
<button {...restProps} className={classNames(styles.root, className)} type="button">
<span className={styles.iconContainer}>
<UndoIcon />
</span>
<span className={styles.text}>Revert changes</span>
</button>
)
}

0 comments on commit dae6a60

Please sign in to comment.