Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FocalPointPicker: Apply modern styling #58459

Merged
merged 16 commits into from Feb 8, 2024
Merged

FocalPointPicker: Apply modern styling #58459

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e386e85
Styles
richtabor Jan 30, 2024
71c11f5
Update focal-point-picker-style.ts
richtabor Jan 30, 2024
c805820
Update focal-point-style.ts
richtabor Jan 30, 2024
e4ee0d8
add reduceMotion
richtabor Feb 5, 2024
13bc329
remove unused opacity
richtabor Feb 5, 2024
e334ba7
add reduceMotion
richtabor Feb 5, 2024
97f3dba
border radius fix
richtabor Feb 5, 2024
026e8e6
Update focal-point-picker-style.ts
richtabor Feb 5, 2024
89e0e6b
border-radius-inherit
richtabor Feb 5, 2024
1b477c6
pointer-events-none
richtabor Feb 5, 2024
cbfc0ef
inline-flex flex fix
richtabor Feb 5, 2024
aa58c13
Update CHANGELOG.md
richtabor Feb 5, 2024
5003e42
0px -> 0
richtabor Feb 6, 2024
a27697c
Adjust colors
richtabor Feb 6, 2024
47d0258
Merge branch 'trunk' into try/improve-focal-point-picker
richtabor Feb 6, 2024
9e3319f
Use 180% saturation, like everywhere else
richtabor Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -3,8 +3,8 @@
## Unreleased

### Enhancements

- `ConfirmDialog`: Add `__next40pxDefaultSize` to buttons ([#58421](https://github.com/WordPress/gutenberg/pull/58421)).
- `FocalPointPicker`: Apply modern styling ([#58459](https://github.com/WordPress/gutenberg/pull/58459)).

### Bug Fix

Expand Down
36 changes: 26 additions & 10 deletions packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
View file
Open in desktop
Expand Up @@ -9,28 +9,42 @@ import styled from '@emotion/styled';
*/
import { Flex } from '../../flex';
import UnitControl from '../../unit-control';
import { COLORS } from '../../utils';
import { COLORS, CONFIG, reduceMotion } from '../../utils';
import type { FocalPointPickerControlsProps } from '../types';
import { INITIAL_BOUNDS } from '../utils';

export const MediaWrapper = styled.div`
background-color: transparent;
display: flex;
text-align: center;
width: 100%;
`;

export const MediaContainer = styled.div`
align-items: center;
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
border-radius: ${ CONFIG.radiusBlockUi };
cursor: pointer;
display: inline-flex;
justify-content: center;
margin: auto;
position: relative;
height: 100%;

&:after {
richtabor marked this conversation as resolved.
Show resolved Hide resolved
border-radius: inherit;
bottom: 0px;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
content: '';
left: 0px;
pointer-events: none;
position: absolute;
right: 0px;
top: 0px;
richtabor marked this conversation as resolved.
Show resolved Hide resolved
}

img,
video {
border-radius: inherit;
box-sizing: border-box;
display: block;
height: auto;
Expand All @@ -45,6 +59,7 @@ export const MediaContainer = styled.div`

export const MediaPlaceholder = styled.div`
background: ${ COLORS.gray[ 100 ] };
border-radius: inherit;
box-sizing: border-box;
height: ${ INITIAL_BOUNDS.height }px;
max-width: 280px;
Expand Down Expand Up @@ -91,29 +106,30 @@ export const GridView = styled.div`
position: absolute;
top: 50%;
transform: translate3d( -50%, -50%, 0 );
transition: opacity 120ms linear;
transition: opacity 100ms linear;
richtabor marked this conversation as resolved.
Show resolved Hide resolved
z-index: 1;

${ reduceMotion( 'transition' ) }

opacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) =>
showOverlay ? 1 : 0 };
`;

export const GridLine = styled.div`
background: white;
box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
background: rgba( 255, 255, 255, 0.4 );
backdrop-filter: blur( 16px ) saturate( 200% );
position: absolute;
opacity: 0.4;
transform: translateZ( 0 );
`;

export const GridLineX = styled( GridLine )`
height: 1px;
left: 0;
right: 0;
left: 1px;
right: 1px;
`;

export const GridLineY = styled( GridLine )`
width: 1px;
top: 0;
bottom: 0;
top: 1px;
bottom: 1px;
`;
28 changes: 21 additions & 7 deletions packages/components/src/focal-point-picker/styles/focal-point-style.ts
View file
Open in desktop
Expand Up @@ -3,21 +3,35 @@
*/
import styled from '@emotion/styled';

/**
* Internal dependencies
*/
import { reduceMotion } from '../../utils';

export const PointerCircle = styled.div`
background-color: transparent;
cursor: grab;
height: 48px;
margin: -24px 0 0 -24px;
height: 40px;
margin: -20px 0 0 -20px;
position: absolute;
user-select: none;
width: 48px;
width: 40px;
will-change: transform;
z-index: 10000;
background: rgba( 255, 255, 255, 0.6 );
background: rgba( 255, 255, 255, 0.4 );
border: 1px solid rgba( 255, 255, 255, 0.3 );
border-radius: 50%;
backdrop-filter: blur( 4px );
box-shadow: rgb( 0 0 0 / 20% ) 0px 0px 10px;
backdrop-filter: blur( 16px ) saturate( 180% );
box-shadow: rgb( 0 0 0 / 8% ) 0px 0px 8px;
transition: transform 100ms linear;
richtabor marked this conversation as resolved.
Show resolved Hide resolved

${ reduceMotion( 'transition' ) }

${ ( { isDragging }: { isDragging: boolean } ) =>
isDragging && 'cursor: grabbing;' }
isDragging &&
`
box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 10px;
transform: scale( 1.1 );
cursor: grabbing;
` }
`;