Pro 8247 sections empty state

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Custom operations registered with `addCreateWidgetOperation` can now specify an `ifTypesIntersect` property containing an array of widget type names. If the area in question allows at least one, the operation is offered.
 * The login-requirements tests were updated to include tests for the `uponSubmit` filter
 * Add `prependNodes` and `appendNodes` calls for `main`.
+* Add options for pieces to change the title, message and icon of the empty state block.
 
 ### Fixes
 

modules/@apostrophecms/asset/lib/globalIcons.js

@@ -50,6 +50,7 @@ module.exports = {
   'drag-icon': 'Apps',
   'eye-icon': 'Eye',
   'file-document-icon': 'FileDocument',
+  'file-document-multiple-outline-icon': 'FileDocumentMultipleOutline',
   'file-tree-icon': 'FileTree',
   'flare-icon': 'Flare',
   'format-align-center-icon': 'FormatAlignCenter',

modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -872,7 +872,6 @@ export default {
   justify-content: center;
   width: 100%;
   height: 100%;
-  margin-top: 130px;
 }
 
 .apos-media-manager__sidebar {

modules/@apostrophecms/modal/ui/apos/components/AposModalBody.vue

@@ -62,6 +62,16 @@ export default {
   }
 }
 
+.apos-modal__body-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.apos-modal__body-main {
+  flex-grow: 1;
+}
+
 .apos-modal__body--flex {
   display: flex;
   flex-direction: column;

modules/@apostrophecms/piece-type/index.js

@@ -1295,6 +1295,7 @@ module.exports = {
           managerModal: self.getComponentName('managerModal', 'AposDocsManager')
         });
         browserOptions.managerApiProjection = self.getManagerApiProjection(req);
+        browserOptions.emptyState = self.options.emptyState;
 
         return browserOptions;
       },

modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -212,13 +212,16 @@ export default {
       };
     },
     emptyDisplay() {
+      const docModule = apos.modules[this.moduleName];
+      if (docModule?.emptyState) {
+        return docModule.emptyState;
+      }
       return {
+        icon: 'file-document-multiple-outline-icon',
         title: {
           key: 'apostrophe:noTypeFound',
           type: this.$t(this.moduleLabels.plural || this.moduleLabels.singular)
-        },
-        message: '',
-        emoji: '📄'
+        }
       };
     },
     disableUnpublished() {
@@ -581,7 +584,6 @@ export default {
     justify-content: center;
     width: 100%;
     height: 100%;
-    margin-top: 130px;
   }
 
   .apos-pieces-manager__relationship__rail {

modules/@apostrophecms/ui/ui/apos/components/AposEmptyState.vue

@@ -1,23 +1,28 @@
 <template>
   <div class="apos-empty-state">
+    <div
+      v-if="emptyState.icon"
+      class="apos-empty-state__icon"
+    >
+      <AposIndicator
+        :icon="emptyState.icon"
+        class="apos-empty-state__indicator"
+        icon-color="var(--a-base-3)"
+        :icon-size="48"
+      />
+    </div>
     <p
       v-if="emptyState.title"
-      class="apos-title"
+      class="apos-empty-state__title"
     >
       {{ $t(emptyState.title) }}
     </p>
     <p
       v-if="emptyState.message"
-      class="apos-hint"
+      class="apos-empty-state__message"
     >
       {{ $t(emptyState.message) }}
     </p>
-    <div
-      v-if="emptyState.emoji"
-      class="apos-emoji"
-    >
-      {{ emptyState.emoji }}
-    </div>
   </div>
 </template>
 
@@ -38,30 +43,27 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    max-width: 450px;
+  }
+
+  .apos-empty-state__icon {
+    margin-bottom: 10px;
   }
 
-  .apos-title {
+  .apos-empty-state__title {
     @include type-title;
 
     & {
-      margin: 0 0 10px;
+      margin: 0;
     }
   }
 
-  .apos-hint {
-    @include type-base;
+  .apos-empty-state__message {
+    @include type-large;
 
     & {
-      font-style: italic;
-      line-height: var(--a-line-tallest);
-      color: var(--a-base-1);
+      margin-top: 5px;
       text-align: center;
     }
   }
-
-  .apos-emoji {
-    // Variable sizes are less important for icons.
-    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
-    font-size: 34px;
-  }
 </style>