rework docs manager empty state

Author: ValJed

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/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() {

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="32"
+      />
+    </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,22 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    max-width: 450px;
   }
 
-  .apos-title {
-    @include type-title;
-
-    & {
-      margin: 0 0 10px;
-    }
+  .apos-empty-state__icon {
+    margin-bottom: 20px;
   }
 
-  .apos-hint {
-    @include type-base;
+  .apos-empty-state__title {
+    @include type-title;
 
     & {
-      font-style: italic;
-      line-height: var(--a-line-tallest);
-      color: var(--a-base-1);
-      text-align: center;
+      margin: 0 0 10px;
     }
   }
 
-  .apos-emoji {
-    // Variable sizes are less important for icons.
-    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
-    font-size: 34px;
+  .apos-empty-state__message {
+    @include type-large;
   }
 </style>