From e0eb7d3243c84c9a5990e94cc3449dbf10b74aa6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 28 Feb 2023 11:52:41 +0100
Subject: [PATCH] update entity actions with images

---
 .../docs/entity-action-collection-menu.svg    | 51 ++++++++++
 .../entity-action-picker-context-menu.svg     | 96 +++++++++++++++++++
 .../docs/entity-action-workspace-menu.svg     | 44 +++++++++
 .../entity-bulk-action-collection-menu.svg    | 52 ++++++++++
 .../src/stories/extending/entity-actions.mdx  | 50 +++++++++-
 5 files changed, 292 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-collection-menu.svg
 create mode 100644 src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-picker-context-menu.svg
 create mode 100644 src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-workspace-menu.svg
 create mode 100644 src/Umbraco.Web.UI.Client/public-assets/docs/entity-bulk-action-collection-menu.svg

diff --git a/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-collection-menu.svg b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-collection-menu.svg
new file mode 100644
index 0000000000..d9918b302a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-collection-menu.svg
@@ -0,0 +1,51 @@
+<svg width="370" height="250" viewBox="0 0 370 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9.00002" width="352" height="232" rx="7" fill="white" stroke="black" stroke-width="2"/>
+<mask id="path-2-inside-1_2_226" fill="white">
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z"/>
+</mask>
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z" fill="white"/>
+<path d="M10 43H102H10ZM102 240H10H102ZM10 240V43V240ZM103 43V240H101V43H103Z" fill="black" mask="url(#path-2-inside-1_2_226)"/>
+<path d="M354 10C357.314 10 360 12.6863 360 16L360 40L10 40L10 16C10 12.6863 12.6863 10 16 10L354 10Z" fill="#1B264F"/>
+<mask id="path-5-inside-2_2_226" fill="white">
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z"/>
+</mask>
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z" fill="white"/>
+<path d="M10 40H102H10ZM102 240H10H102ZM10 240V40V240ZM103 40V240H101V40H103Z" fill="black" mask="url(#path-5-inside-2_2_226)"/>
+<path d="M24 116L27.4641 122H20.5359L24 116Z" fill="#848484"/>
+<rect x="33" y="118" width="40" height="2" fill="#848484"/>
+<path d="M24 100L27.4641 106H20.5359L24 100Z" fill="#848484"/>
+<rect x="33" y="102" width="40" height="2" fill="#848484"/>
+<path d="M24 84L27.4641 90H20.5359L24 84Z" fill="#848484"/>
+<rect x="33" y="86" width="40" height="2" fill="#848484"/>
+<path d="M24 68L27.4641 74H20.5359L24 68Z" fill="#848484"/>
+<rect x="33" y="70" width="40" height="2" fill="#848484"/>
+<rect x="20" y="50" width="58" height="8" fill="#D9D9D9"/>
+<path d="M102 40H360V234C360 237.314 357.314 240 354 240H102V40Z" fill="#D9D9D9"/>
+<g opacity="0.2">
+<rect x="117.5" y="71.5" width="217" height="19" stroke="black"/>
+<path d="M131 78L134.464 84H127.536L131 78Z" fill="#848484"/>
+<rect x="140" y="80" width="40" height="2" fill="#848484"/>
+<rect x="117.5" y="96.5" width="217" height="19" stroke="black"/>
+<path d="M131 103L134.464 109H127.536L131 103Z" fill="#848484"/>
+<rect x="140" y="105" width="40" height="2" fill="#848484"/>
+<rect x="117.5" y="121.5" width="217" height="19" stroke="black"/>
+<path d="M131 128L134.464 134H127.536L131 128Z" fill="#848484"/>
+<rect x="140" y="130" width="40" height="2" fill="#848484"/>
+<rect x="117.5" y="146.5" width="217" height="19" stroke="black"/>
+<path d="M131 153L134.464 159H127.536L131 153Z" fill="#848484"/>
+<rect x="140" y="155" width="40" height="2" fill="#848484"/>
+<rect x="117.5" y="171.5" width="217" height="19" stroke="black"/>
+<path d="M131 178L134.464 184H127.536L131 178Z" fill="#848484"/>
+<rect x="140" y="180" width="40" height="2" fill="#848484"/>
+</g>
+<rect x="316" y="78" width="12" height="8" fill="white"/>
+<path d="M260 91H328V167H260V91Z" fill="white"/>
+<rect x="283" y="103" width="30" height="2" fill="#848484"/>
+<rect x="271" y="101" width="7" height="6" fill="#848484"/>
+<rect x="283" y="119" width="30" height="2" fill="#848484"/>
+<rect x="271" y="117" width="7" height="6" fill="#848484"/>
+<rect x="271" y="133" width="7" height="6" fill="#848484"/>
+<rect x="283" y="135" width="30" height="2" fill="#848484"/>
+<rect x="283" y="151" width="30" height="2" fill="#848484"/>
+<rect x="271" y="149" width="7" height="6" fill="#848484"/>
+</svg>
diff --git a/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-picker-context-menu.svg b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-picker-context-menu.svg
new file mode 100644
index 0000000000..6a3daa0be3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-picker-context-menu.svg
@@ -0,0 +1,96 @@
+<svg width="370" height="250" viewBox="0 0 370 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9.00002" width="352" height="232" rx="7" fill="white" stroke="black" stroke-width="2"/>
+<mask id="path-2-inside-1_6_545" fill="white">
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z"/>
+</mask>
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z" fill="white"/>
+<path d="M10 43H102H10ZM102 240H10H102ZM10 240V43V240ZM103 43V240H101V43H103Z" fill="black" mask="url(#path-2-inside-1_6_545)"/>
+<path d="M354 10C357.314 10 360 12.6863 360 16L360 40L10 40L10 16C10 12.6863 12.6863 10 16 10L354 10Z" fill="#1B264F"/>
+<mask id="path-5-inside-2_6_545" fill="white">
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z"/>
+</mask>
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z" fill="white"/>
+<path d="M10 40H102H10ZM102 240H10H102ZM10 240V40V240ZM103 40V240H101V40H103Z" fill="black" mask="url(#path-5-inside-2_6_545)"/>
+<path d="M24 116L27.4641 122H20.5359L24 116Z" fill="#848484"/>
+<rect x="33" y="118" width="40" height="2" fill="#848484"/>
+<path d="M24 100L27.4641 106H20.5359L24 100Z" fill="#848484"/>
+<rect x="33" y="102" width="40" height="2" fill="#848484"/>
+<path d="M24 84L27.4641 90H20.5359L24 84Z" fill="#848484"/>
+<rect x="33" y="86" width="40" height="2" fill="#848484"/>
+<path d="M24 68L27.4641 74H20.5359L24 68Z" fill="#848484"/>
+<rect x="33" y="70" width="40" height="2" fill="#848484"/>
+<rect x="20" y="50" width="58" height="8" fill="#D9D9D9"/>
+<mask id="path-16-inside-3_6_545" fill="white">
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z"/>
+</mask>
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z" fill="white"/>
+<path d="M10 40H102H10ZM102 240H10H102ZM10 240V40V240ZM103 40V240H101V40H103Z" fill="black" mask="url(#path-16-inside-3_6_545)"/>
+<path d="M24 116L27.4641 122H20.5359L24 116Z" fill="#848484"/>
+<rect x="33" y="118" width="40" height="2" fill="#848484"/>
+<path d="M24 100L27.4641 106H20.5359L24 100Z" fill="#848484"/>
+<rect x="33" y="102" width="40" height="2" fill="#848484"/>
+<path d="M24 84L27.4641 90H20.5359L24 84Z" fill="#848484"/>
+<rect x="33" y="86" width="40" height="2" fill="#848484"/>
+<path d="M24 68L27.4641 74H20.5359L24 68Z" fill="#848484"/>
+<rect x="33" y="70" width="40" height="2" fill="#848484"/>
+<rect x="20" y="50" width="58" height="8" fill="#D9D9D9"/>
+<path d="M102 40H360V234C360 237.314 357.314 240 354 240H102V40Z" fill="#B6B6B6"/>
+<g opacity="0.2">
+<mask id="path-28-inside-4_6_545" fill="white">
+<path d="M102 40H360V63H102V40Z"/>
+</mask>
+<path d="M360 62H102V64H360V62Z" fill="black" mask="url(#path-28-inside-4_6_545)"/>
+</g>
+<g opacity="0.2">
+<mask id="path-30-inside-5_6_545" fill="white">
+<path d="M102 217H360V240H102V217Z"/>
+</mask>
+<path d="M102 218H360V216H102V218Z" fill="black" mask="url(#path-30-inside-5_6_545)"/>
+</g>
+<mask id="path-32-inside-6_6_545" fill="white">
+<path d="M268 40H360V240H274C270.686 240 268 237.314 268 234V40Z"/>
+</mask>
+<path d="M268 40H360V240H274C270.686 240 268 237.314 268 234V40Z" fill="white"/>
+<path d="M268 40H360H268ZM360 240H268H360ZM268 240V40V240ZM361 40V240H359V40H361Z" fill="black" mask="url(#path-32-inside-6_6_545)"/>
+<path d="M268 40H360V234C360 237.314 357.314 240 354 240H268V40Z" fill="#D9D9D9"/>
+<mask id="path-35-inside-7_6_545" fill="white">
+<path d="M268 40H360V237C360 238.657 358.657 240 357 240H268V40Z"/>
+</mask>
+<path d="M268 40H360H268ZM360 240H268H360ZM267 240V40H269V240H267ZM360 40V240V40Z" fill="black" mask="url(#path-35-inside-7_6_545)"/>
+<g opacity="0.2">
+<path d="M282 121L285.464 127H278.536L282 121Z" fill="#848484"/>
+<rect x="291" y="123" width="40" height="2" fill="#848484"/>
+<path d="M282 105L285.464 111H278.536L282 105Z" fill="#848484"/>
+<rect x="291" y="107" width="40" height="2" fill="#848484"/>
+<path d="M282 89L285.464 95H278.536L282 89Z" fill="#848484"/>
+<rect x="291" y="91" width="40" height="2" fill="#848484"/>
+<path d="M282 73L285.464 79H278.536L282 73Z" fill="#848484"/>
+<rect x="291" y="75" width="40" height="2" fill="#848484"/>
+</g>
+<g opacity="0.2">
+<mask id="path-45-inside-8_6_545" fill="white">
+<path d="M268 40H360V63H268V40Z"/>
+</mask>
+<path d="M360 62H268V64H360V62Z" fill="black" mask="url(#path-45-inside-8_6_545)"/>
+</g>
+<g opacity="0.2">
+<mask id="path-47-inside-9_6_545" fill="white">
+<path d="M268 217H360V240H268V217Z"/>
+</mask>
+<path d="M268 218H360V216H268V218Z" fill="black" mask="url(#path-47-inside-9_6_545)"/>
+</g>
+<mask id="path-49-inside-10_6_545" fill="white">
+<path d="M302 40H360V240H302V40Z"/>
+</mask>
+<path d="M302 40H360V240H302V40Z" fill="white"/>
+<path d="M303 240V40H301V240H303Z" fill="black" mask="url(#path-49-inside-10_6_545)"/>
+<rect x="320" y="70" width="30" height="2" fill="#848484"/>
+<rect x="308" y="68" width="7" height="6" fill="#848484"/>
+<rect x="320" y="86" width="30" height="2" fill="#848484"/>
+<rect x="308" y="84" width="7" height="6" fill="#848484"/>
+<rect x="320" y="102" width="30" height="2" fill="#848484"/>
+<rect x="308" y="100" width="7" height="6" fill="#848484"/>
+<rect x="320" y="118" width="30" height="2" fill="#848484"/>
+<rect x="308" y="116" width="7" height="6" fill="#848484"/>
+<rect x="307" y="48" width="26" height="8" fill="#D9D9D9"/>
+</svg>
diff --git a/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-workspace-menu.svg b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-workspace-menu.svg
new file mode 100644
index 0000000000..483aededf3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-action-workspace-menu.svg
@@ -0,0 +1,44 @@
+<svg width="370" height="250" viewBox="0 0 370 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9.00003" width="352" height="232" rx="7" fill="white" stroke="black" stroke-width="2"/>
+<mask id="path-2-inside-1_1_132" fill="white">
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z"/>
+</mask>
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z" fill="white"/>
+<path d="M10 43H102H10ZM102 240H10H102ZM10 240V43V240ZM103 43V240H101V43H103Z" fill="black" mask="url(#path-2-inside-1_1_132)"/>
+<path d="M102 40H360V234C360 237.314 357.314 240 354 240H102V40Z" fill="#D9D9D9"/>
+<mask id="path-5-inside-2_1_132" fill="white">
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z"/>
+</mask>
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z" fill="white"/>
+<path d="M10 40H102H10ZM102 240H10H102ZM10 240V40V240ZM103 40V240H101V40H103Z" fill="black" mask="url(#path-5-inside-2_1_132)"/>
+<path d="M24 116L27.4641 122H20.5359L24 116Z" fill="#848484"/>
+<rect x="33" y="118" width="40" height="2" fill="#848484"/>
+<path d="M24 100L27.4641 106H20.5359L24 100Z" fill="#848484"/>
+<rect x="33" y="102" width="40" height="2" fill="#848484"/>
+<path d="M24 84L27.4641 90H20.5359L24 84Z" fill="#848484"/>
+<rect x="33" y="86" width="40" height="2" fill="#848484"/>
+<path d="M24 68L27.4641 74H20.5359L24 68Z" fill="#848484"/>
+<rect x="33" y="70" width="40" height="2" fill="#848484"/>
+<rect x="20" y="50" width="58" height="8" fill="#D9D9D9"/>
+<g opacity="0.2">
+<mask id="path-16-inside-3_1_132" fill="white">
+<path d="M102 40H360V63H102V40Z"/>
+</mask>
+<path d="M360 62H102V64H360V62Z" fill="black" mask="url(#path-16-inside-3_1_132)"/>
+</g>
+<mask id="path-18-inside-4_1_132" fill="white">
+<path d="M102 217H360V240H102V217Z"/>
+</mask>
+<path d="M102 218H360V216H102V218Z" fill="black" fill-opacity="0.2" mask="url(#path-18-inside-4_1_132)"/>
+<rect x="308" y="47" width="42" height="8" fill="white"/>
+<path d="M282 60H350V136H282V60Z" fill="white"/>
+<rect x="305" y="120" width="30" height="2" fill="#848484"/>
+<rect x="293" y="118" width="7" height="6" fill="#848484"/>
+<rect x="305" y="104" width="30" height="2" fill="#848484"/>
+<rect x="293" y="102" width="7" height="6" fill="#848484"/>
+<rect x="305" y="88" width="30" height="2" fill="#848484"/>
+<rect x="293" y="86" width="7" height="6" fill="#848484"/>
+<rect x="305" y="72" width="30" height="2" fill="#848484"/>
+<rect x="293" y="70" width="7" height="6" fill="#848484"/>
+<path d="M354 10C357.314 10 360 12.6863 360 16L360 40L10 40L10 16C10 12.6863 12.6863 10 16 10L354 10Z" fill="#1B264F"/>
+</svg>
diff --git a/src/Umbraco.Web.UI.Client/public-assets/docs/entity-bulk-action-collection-menu.svg b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-bulk-action-collection-menu.svg
new file mode 100644
index 0000000000..71b4e5eb5c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/public-assets/docs/entity-bulk-action-collection-menu.svg
@@ -0,0 +1,52 @@
+<svg width="370" height="250" viewBox="0 0 370 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9.00003" width="352" height="232" rx="7" fill="white" stroke="black" stroke-width="2"/>
+<mask id="path-2-inside-1_4_393" fill="white">
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z"/>
+</mask>
+<path d="M10 43H102V240H16C12.6863 240 10 237.314 10 234V43Z" fill="white"/>
+<path d="M10 43H102H10ZM102 240H10H102ZM10 240V43V240ZM103 43V240H101V43H103Z" fill="black" mask="url(#path-2-inside-1_4_393)"/>
+<path d="M354 10C357.314 10 360 12.6863 360 16L360 40L10 40L10 16C10 12.6863 12.6863 10 16 10L354 10Z" fill="#1B264F"/>
+<mask id="path-5-inside-2_4_393" fill="white">
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z"/>
+</mask>
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z" fill="white"/>
+<path d="M10 40H102H10ZM102 240H10H102ZM10 240V40V240ZM103 40V240H101V40H103Z" fill="black" mask="url(#path-5-inside-2_4_393)"/>
+<path d="M24 116L27.4641 122H20.5359L24 116Z" fill="#848484"/>
+<rect x="33" y="118" width="40" height="2" fill="#848484"/>
+<path d="M24 100L27.4641 106H20.5359L24 100Z" fill="#848484"/>
+<rect x="33" y="102" width="40" height="2" fill="#848484"/>
+<path d="M24 84L27.4641 90H20.5359L24 84Z" fill="#848484"/>
+<rect x="33" y="86" width="40" height="2" fill="#848484"/>
+<path d="M24 68L27.4641 74H20.5359L24 68Z" fill="#848484"/>
+<rect x="33" y="70" width="40" height="2" fill="#848484"/>
+<rect x="20" y="50" width="58" height="8" fill="#D9D9D9"/>
+<path d="M102 40H360V234C360 237.314 357.314 240 354 240H102V40Z" fill="#D9D9D9"/>
+<g opacity="0.2">
+<rect x="117.5" y="71.5" width="217" height="19" stroke="black"/>
+<path d="M131 78L134.464 84H127.536L131 78Z" fill="#848484"/>
+<rect x="140" y="80" width="40" height="2" fill="#848484"/>
+<rect x="117.5" y="121.5" width="217" height="19" stroke="black"/>
+<path d="M131 128L134.464 134H127.536L131 128Z" fill="#848484"/>
+<rect x="140" y="130" width="40" height="2" fill="#848484"/>
+<rect x="117.5" y="171.5" width="217" height="19" stroke="black"/>
+<path d="M131 178L134.464 184H127.536L131 178Z" fill="#848484"/>
+<rect x="140" y="180" width="40" height="2" fill="#848484"/>
+</g>
+<rect x="117.5" y="96.5" width="217" height="19" fill="white" stroke="black"/>
+<path d="M131 103L134.464 109H127.536L131 103Z" fill="#848484"/>
+<rect x="140" y="105" width="40" height="2" fill="#848484"/>
+<rect x="117.5" y="146.5" width="217" height="19" fill="white" stroke="black"/>
+<path d="M131 153L134.464 159H127.536L131 153Z" fill="#848484"/>
+<rect x="140" y="155" width="40" height="2" fill="#848484"/>
+<rect x="323" y="46" width="12" height="8" fill="white"/>
+<mask id="path-33-inside-3_4_393" fill="white">
+<path d="M102 40H360V59H102V40Z"/>
+</mask>
+<path d="M102 40H360H102ZM360 60H102V58H360V60ZM102 59V40V59ZM360 40V59V40Z" fill="black" mask="url(#path-33-inside-3_4_393)"/>
+<rect x="303" y="43" width="32" height="12" fill="white"/>
+<rect x="314" y="48" width="16" height="2" fill="#848484"/>
+<rect x="308" y="47" width="4" height="4" fill="#848484"/>
+<rect x="266" y="43" width="32" height="12" fill="white"/>
+<rect x="277" y="48" width="16" height="2" fill="#848484"/>
+<rect x="271" y="47" width="4" height="4" fill="#848484"/>
+</svg>
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx
index 135c48d7de..8b32cfa43f 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx
@@ -15,7 +15,40 @@ TODO: introduction to actions
 - **Entity Bulk Action:**
   Relates to an entity type: document, media, etc. Performs the action on a selection of items.
 
-<img src="docs/entity-action-sidebar-context.svg" width="400" />
+## Entity Actions in the UI
+
+<table>
+	<tbody>
+		<tr>
+			<td>
+				<div>
+					<strong>Sidebar Context Menu</strong>
+				</div>
+				<img src="docs/entity-action-sidebar-context.svg" width="400" />
+			</td>
+			<td>
+				<div>
+					<strong>Workspace Action Menu</strong>
+				</div>
+				<img src="docs/entity-action-workspace-menu.svg" width="400" />
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<div>
+					<strong>Collection</strong>
+				</div>
+				<img src="docs/entity-action-collection-menu.svg" width="400" />
+			</td>
+			<td>
+				<div>
+					<strong>Pickers</strong>
+				</div>
+				<img src="docs/entity-action-picker-context-menu.svg" width="400" />
+			</td>
+		</tr>
+	</tbody>
+</table>
 
 ### Registering an Entity Action
 
@@ -86,6 +119,21 @@ We currently have a couple of generic actions that can be used across silos, so
 
 TODO: List generic actions + List what alias' they are registered under.
 
+## Entity Bulk Actions in the UI
+
+<table>
+	<tbody>
+		<tr>
+			<td>
+				<div>
+					<strong>Collection</strong>
+				</div>
+				<img src="docs/entity-bulk-action-collection-menu.svg" width="400" />
+			</td>
+		</tr>
+	</tbody>
+</table>
+
 ### Registering an Entity Bulk Action
 
 TODO: can we show the typescript interface for the manifest?