Skip to content

Commit

Permalink
improve design
Browse files Browse the repository at this point in the history
  • Loading branch information
@gigitux
gigitux committed Aug 23, 2024
1 parent c32622e commit 9a39fe6
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 87 deletions.
172 changes: 96 additions & 76 deletions packages/edit-site/src/components/post-fields/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@ import {
} from '@wordpress/icons';
import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalText as Text,
__experimentalGrid as Grid,
Icon,
Placeholder,
Button,
Flex,
FlexItem,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
Expand Down Expand Up @@ -424,14 +425,14 @@ function usePostFields( viewType ) {

if ( ! url ) {
return (
<div
style={ {
backgroundColor:
'rgba(var(--wp-admin-theme-color--rgb), 0.08)',
width: '20px',
height: '20px',
} }
/>
<Flex gap={ 8 }>
<FlexItem>
<span className="edit-site-post-featured-image-placeholder" />
</FlexItem>
<FlexItem>
<span>{ __( 'Choose an image…' ) }</span>
</FlexItem>
</Flex>
);
}

Expand Down Expand Up @@ -469,77 +470,96 @@ function usePostFields( viewType ) {
return (
<fieldset className="edit-site-dataviews-controls__featured-image">
<div className="edit-side-dataviews-controls__featured-image-container">
<HStack>
<MediaUpload
onSelect={ ( selectedMedia ) =>
onChangeControl( selectedMedia.id )
}
allowedTypes={ [ 'image' ] }
render={ ( { open } ) => {
return (
<Button
className="edit-site-dataviews-controls__featured-image-upload-button"
onClick={ () => open() }
<MediaUpload
onSelect={ ( selectedMedia ) =>
onChangeControl( selectedMedia.id )
}
allowedTypes={ [ 'image' ] }
render={ ( { open } ) => {
return (
<div
role="button"
tabIndex={ 0 }
onClick={ ( event ) => {
const element =
event.target.tagName.toLowerCase();
// Prevent opening the media modal when clicking on the button/icon.
if (
element !== 'button' &&
element !== 'svg'
) {
open();
}
} }
onKeyDown={ open }
>
<Grid
rowGap={ 0 }
columnGap={ 8 }
templateColumns="24px 1fr 0.5fr"
rows={ url ? 2 : 0 }
>
{ url && (
<HStack justify="space-between">
<FlexItem className="edit-site-dataviews-controls__featured-image-element">
<img
alt=""
src={ url }
/>
</FlexItem>
<FlexItem>
<VStack>
<span>
{
title
}
</span>
<span className="edit-site-dataviews-controls__featured-image-filename">
{
filename
}
</span>
</VStack>
</FlexItem>
</HStack>
<>
<img
alt=""
src={ url }
className="edit-site-dataviews-controls__featured-image-element"
/>
<Text
as="span"
truncate
numberOfLines={
0
}
>
{ title }
</Text>
</>
) }
{ ! url && (
<HStack
justify="flex-start"
className="dataviews-controls__featured-image-placeholder-container"
>
<FlexItem>
<Placeholder
className="dataviews-controls__featured-image-placeholder"
withIllustration
/>
</FlexItem>
<FlexItem>
<span>
{ __(
'Choose an image…'
) }
</span>
</FlexItem>
</HStack>
<>
<span className="edit-site-post-featured-image-placeholder" />
<span>
{ __(
'Choose an image…'
) }
</span>
</>
) }
{ url && (
<>
<Button
size="small"
className="edit-site-dataviews-controls__featured-image-remove-button"
icon={
lineSolid
}
onClick={ () =>
onChangeControl(
0
)
}
/>
<Text
className="edit-site-dataviews-controls__featured-image-filename"
as="span"
ellipsizeMode="middle"
limit={ 35 }
truncate
numberOfLines={
0
}
>
{ filename }
</Text>
</>
) }
</Button>
);
} }
/>

{ url && (
<Button
className="edit-site-dataviews-controls__featured-image-remove-button"
icon={ lineSolid }
onClick={ () =>
onChangeControl( 0 )
}
/>
) }
</HStack>
</Grid>
</div>
);
} }
/>
</div>
</fieldset>
);
Expand Down
38 changes: 27 additions & 11 deletions packages/edit-site/src/components/post-fields/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,51 @@
.edit-site-post-featured-image {
width: 20px;
height: 20px;
width: 24px;
height: 24px;
border: $radius-small;
}

.edit-site-post-featured-image-placeholder {
width: 24px;
height: 24px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
display: inline-block;
padding: 0;
background:
$white
linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
}

.edit-site-dataviews-controls__featured-image {
.edit-side-dataviews-controls__featured-image-container {
border: var(--wp-admin-border-width-focus) solid $gray-300;
border: $border-width solid $gray-300;
padding: 8px 12px;
cursor: pointer;
&:hover {
background-color: $gray-300;
background-color: $gray-100;
}
}

img {
width: 20px;
height: 20px;
width: 24px;
height: 24px;
border: $radius-small;
}

span {
align-self: center;
text-align: start;
margin-left: $grid-unit-15;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}

.edit-site-dataviews-controls__featured-image-filename {
color: $gray-700;
font-size: 10px;
grid-area: 2 / 2 / 2 / 4;
line-height: 16px;
font-size: 12px;
}

.edit-site-dataviews-controls__featured-image-upload-button {
padding: 0;
height: fit-content;
&:hover,
&:focus {
Expand All @@ -44,6 +59,7 @@
}

.edit-site-dataviews-controls__featured-image-remove-button {
place-self: end;
align-self: baseline;
}
}
Expand Down

0 comments on commit 9a39fe6

Please sign in to comment.