From 8c136510209637503202c1a386080493a6053502 Mon Sep 17 00:00:00 2001 From: Stefanos Togoulidis Date: Wed, 18 Mar 2020 17:56:44 +0200 Subject: [PATCH] [RNmobile] Improve "take video" icon (#20927) * Port video-alt2 icon from dashicons * Use video-alt2 icon on the media selection sheet * Better name and design for the capture video icon * Update unit test snapshot * Update the capture-a-photo icon on mobile media option picker * Use the 'image' icon for the choose-from-device option * Some code formatting adjustment * Update unit test snapshot * Update vectors. * Update snapshot. Co-authored-by: jasmussen --- .../components/media-upload/index.native.js | 7 +- packages/icons/src/index.js | 2 + packages/icons/src/library/capture-photo.js | 12 ++ packages/icons/src/library/capture-video.js | 12 ++ storybook/test/__snapshots__/index.js.snap | 114 ++++++++++++++++++ 5 files changed, 144 insertions(+), 3 deletions(-) create mode 100644 packages/icons/src/library/capture-photo.js create mode 100644 packages/icons/src/library/capture-video.js diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index b9543141b175b..c19045d9e021b 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -13,7 +13,7 @@ import { */ import { __ } from '@wordpress/i18n'; import { Picker } from '@wordpress/components'; -import { camera, wordpress } from '@wordpress/icons'; +import { capturePhoto, captureVideo, image, wordpress } from '@wordpress/icons'; export const MEDIA_TYPE_IMAGE = 'image'; export const MEDIA_TYPE_VIDEO = 'video'; @@ -27,7 +27,7 @@ const cameraImageSource = { value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources. label: __( 'Take a Photo' ), types: [ MEDIA_TYPE_IMAGE ], - icon: camera, + icon: capturePhoto, }; const cameraVideoSource = { @@ -35,7 +35,7 @@ const cameraVideoSource = { value: mediaSources.deviceCamera, label: __( 'Take a Video' ), types: [ MEDIA_TYPE_VIDEO ], - icon: camera, + icon: captureVideo, }; const deviceLibrarySource = { @@ -43,6 +43,7 @@ const deviceLibrarySource = { value: mediaSources.deviceLibrary, label: __( 'Choose from device' ), types: [ MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ], + icon: image, }; const siteLibrarySource = { diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 924259824c810..c57f714ef3860 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -17,6 +17,8 @@ export { default as brush } from './library/brush'; export { default as button } from './library/button'; export { default as calendar } from './library/calendar'; export { default as camera } from './library/camera'; +export { default as capturePhoto } from './library/capture-photo'; +export { default as captureVideo } from './library/capture-video'; export { default as category } from './library/category'; export { default as chartLine } from './library/chart-line'; export { default as check } from './library/check'; diff --git a/packages/icons/src/library/capture-photo.js b/packages/icons/src/library/capture-photo.js new file mode 100644 index 0000000000000..0e7cfef0dda79 --- /dev/null +++ b/packages/icons/src/library/capture-photo.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const capturePhoto = ( + + + +); + +export default capturePhoto; diff --git a/packages/icons/src/library/capture-video.js b/packages/icons/src/library/capture-video.js new file mode 100644 index 0000000000000..ad1af2d435f2a --- /dev/null +++ b/packages/icons/src/library/capture-video.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const captureVideo = ( + + + +); + +export default captureVideo; diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 58a2e69d13649..287e6f75bb476 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -9840,6 +9840,120 @@ exports[`Storyshots Icons/Icon Library 1`] = ` /> +
+ + capturePhoto + + + + +
+
+ + captureVideo + + + + +