1 files changed, 22 insertions, 9 deletions
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 3257e161046..53928b961c2 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -91,8 +91,12 @@
 
 		<!-- Actions -->
 		<td v-show="!isRenamingSmallScreen" :class="`files-list__row-actions-${uniqueId}`" class="files-list__row-actions">
-			<!-- Inline actions -->
-			<!-- TODO: implement CustomElementRender -->
+			<!-- Render actions -->
+			<CustomElementRender v-for="action in enabledRenderActions"
+				:key="action.id"
+				:current-view="currentView"
+				:render="action.renderInline"
+				:source="source" />
 
 			<!-- Menu actions -->
 			<NcActions v-if="active"
@@ -301,15 +305,16 @@ export default Vue.extend({
 			return formatFileSize(size, true)
 		},
 		sizeOpacity() {
-			const size = parseInt(this.source.size, 10) || 0
-			if (!size || size < 0) {
-				return 1
-			}
-
 			// Whatever theme is active, the contrast will pass WCAG AA
 			// with color main text over main background and an opacity of 0.7
 			const minOpacity = 0.7
 			const maxOpacitySize = 10 * 1024 * 1024
+
+			const size = parseInt(this.source.size, 10) || 0
+			if (!size || size < 0) {
+				return minOpacity
+			}
+
 			return minOpacity + (1 - minOpacity) * Math.pow((this.source.size / maxOpacitySize), 2)
 		},
 
@@ -396,9 +401,17 @@ export default Vue.extend({
 			return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView))
 		},
 
+		// Enabled action that are displayed inline with a custom render function
+		enabledRenderActions() {
+			if (!this.active) {
+				return []
+			}
+			return this.enabledActions.filter(action => typeof action.renderInline === 'function')
+		},
+
 		// Default actions
 		enabledDefaultActions() {
-			return this.enabledActions.filter(action => !!action.default)
+			return this.enabledActions.filter(action => !!action?.default)
 		},
 
 		// Actions shown in the menu
@@ -407,7 +420,7 @@ export default Vue.extend({
 				// Showing inline first for the NcActions inline prop
 				...this.enabledInlineActions,
 				// Then the rest
-				...this.enabledActions.filter(action => action.default !== DefaultType.HIDDEN),
+				...this.enabledActions.filter(action => action.default !== DefaultType.HIDDEN && typeof action.renderInline !== 'function'),
 			].filter((value, index, self) => {
 				// Then we filter duplicates to prevent inline actions to be shown twice
 				return index === self.findIndex(action => action.id === value.id)