Skip to content

Commit

Permalink
Merge 78d6dfd into a8a5abb
Browse files Browse the repository at this point in the history
  • Loading branch information
@ravichdev
ravichdev committed Apr 1, 2021
2 parents a8a5abb + 78d6dfd commit 5261d9f
Show file tree
Hide file tree
Showing 10 changed files with 209 additions and 349 deletions.
49 changes: 13 additions & 36 deletions plugin/assets/src/block-editor/blocks/card/components/card-image-edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@ const CardImageEdit = ( {
cardPrimaryProps,
cardIndex,
setter,
isFocused,
} ) => {
const [ hasImage, setHasImage ] = useState(
imageSourceUrl !== undefined && imageSourceUrl !== ''
);
const [ isFocused, setIsFocused ] = useState( false );

useEffect( () => {
if ( imageSourceUrl !== undefined && imageSourceUrl !== '' ) {
Expand Down Expand Up @@ -90,21 +90,6 @@ const CardImageEdit = ( {
setHasImage( false );
};

/**
* Handle image container on blur event.
*
* @param {Object} event - Event.
*/
const onImageContainerBlur = event => {
const currentTarget = event.currentTarget;
/* istanbul ignore next */
setTimeout( () => {
if ( ! currentTarget.contains( document.activeElement ) ) {
setIsFocused( false );
}
}, 0 );
};

return (
<>
{ ( ! hasImage || isImageEditMode ) && displayImage && (
Expand All @@ -120,13 +105,7 @@ const CardImageEdit = ( {
) }
{ hasImage && ! isImageEditMode && imageSourceUrl && (
<>
<div
className={ classnames( 'material-design-card__media-container', {
'material-design-card__media-container-focused': isFocused,
} ) }
onFocus={ () => setIsFocused( true ) }
onBlur={ onImageContainerBlur }
>
<div className="material-design-card__media-container">
<div
tabIndex={ 0 }
className={ classnames(
Expand All @@ -145,19 +124,17 @@ const CardImageEdit = ( {
</div>
) }
</div>
<div
className={ classnames( 'material-design-card__media-actions', {
'material-design-card__media-actions-shown': isFocused,
} ) }
>
<Button
className="material-design-card__media-close-button"
icon="no"
showTooltip={ true }
label={ __( 'Remove Card Image', 'material-design' ) }
onClick={ onRemoveImage }
/>
</div>
{ isFocused && (
<div className="material-design-card__media-actions">
<Button
className="material-design-card__media-close-button"
icon="no"
showTooltip={ true }
label={ __( 'Remove Card Image', 'material-design' ) }
onClick={ onRemoveImage }
/>
</div>
) }
</div>
</>
) }
Expand Down
2 changes: 2 additions & 0 deletions plugin/assets/src/block-editor/blocks/card/components/card-image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const CardImage = ( {
setter,
isEditMode,
} ) => {
const { isFocused } = cardPrimaryProps;
const cardImageEditProps = {
imageSourceUrl,
isImageEditMode,
Expand All @@ -62,6 +63,7 @@ const CardImage = ( {
cardIndex,
setter,
isEditMode,
isFocused,
};

return (
Expand Down
1 change: 1 addition & 0 deletions plugin/assets/src/block-editor/blocks/card/components/horizontal-card-layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const HorizontalCardLayout = ( {
cardIndex,
setter,
isEditMode,
isFocused,
};

const styles = {};
Expand Down
1 change: 1 addition & 0 deletions plugin/assets/src/block-editor/blocks/card/components/vertical-card-layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ const VerticalCardLayout = ( {
cardIndex,
setter,
isEditMode,
isFocused,
};

const cardImageProps = {
Expand Down
13 changes: 4 additions & 9 deletions plugin/assets/src/block-editor/blocks/card/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@
* limitations under the License.
*/

.material-design-card__media-container-focused {
border: 4px rgb(0, 113, 161) solid;

.material-design-card__media-container {
position: relative;
}

.material-design-card__media-actions {
display: none;
position: absolute;
right: 10px;
top: 10px;
Expand All @@ -29,16 +27,13 @@
border-radius: 4px;
transition: box-shadow 0.2s ease-out;
height: 27px;
z-index: 10;

> button {
& > button {
height: 25px;
}
}

.material-design-card__media-actions-shown {
display: block !important;
}

.material-design-card__media-close-button {
padding: 2px !important;
}
Expand Down
144 changes: 0 additions & 144 deletions plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -577,30 +577,6 @@ Object {
style="background-image: url(http://test.loc/test.jpg);"
tabindex="0"
/>
<div
class="material-design-card__media-actions"
>
<button
aria-label="Remove Card Image"
class="components-button material-design-card__media-close-button has-icon"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-no"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
/>
</svg>
</button>
</div>
</div>
<div
class="material-design-card__primary"
Expand Down Expand Up @@ -1229,30 +1205,6 @@ Object {
style="background-image: url(http://test.loc/test.jpg);"
tabindex="0"
/>
<div
class="material-design-card__media-actions"
>
<button
aria-label="Remove Card Image"
class="components-button material-design-card__media-close-button has-icon"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-no"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
/>
</svg>
</button>
</div>
</div>
<div
class="material-design-card__primary"
Expand Down Expand Up @@ -1962,30 +1914,6 @@ Object {
style="background-image: url(http://test.loc/test.jpg);"
tabindex="0"
/>
<div
class="material-design-card__media-actions"
>
<button
aria-label="Remove Card Image"
class="components-button material-design-card__media-close-button has-icon"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-no"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
/>
</svg>
</button>
</div>
</div>
<div
class="material-design-card__primary"
Expand Down Expand Up @@ -2614,30 +2542,6 @@ Object {
style="background-image: url(http://test.loc/test.jpg);"
tabindex="0"
/>
<div
class="material-design-card__media-actions"
>
<button
aria-label="Remove Card Image"
class="components-button material-design-card__media-close-button has-icon"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-no"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
/>
</svg>
</button>
</div>
</div>
<div
class="material-design-card__primary"
Expand Down Expand Up @@ -3347,30 +3251,6 @@ Object {
style="background-image: url(http://test.loc/test.jpg);"
tabindex="0"
/>
<div
class="material-design-card__media-actions"
>
<button
aria-label="Remove Card Image"
class="components-button material-design-card__media-close-button has-icon"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-no"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
/>
</svg>
</button>
</div>
</div>
<div
class="material-design-card__primary"
Expand Down Expand Up @@ -3990,30 +3870,6 @@ Object {
style="background-image: url(http://test.loc/test.jpg);"
tabindex="0"
/>
<div
class="material-design-card__media-actions"
>
<button
aria-label="Remove Card Image"
class="components-button material-design-card__media-close-button has-icon"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-no"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
/>
</svg>
</button>
</div>
</div>
<div
class="material-design-card__primary"
Expand Down
Loading

0 comments on commit 5261d9f

Please sign in to comment.