Show effects on Damage properties in action view

app/imports/client/ui/components/tree/TreeNode.vue

@@ -40,6 +40,7 @@
         <tree-node-view
           :model="node"
           :selected="selected"
+          :show-external-details="showExternalDetails"
         />
       </div>
     </div>
@@ -57,6 +58,7 @@
             :organize="organize"
             :selected-node="selectedNode"
             :start-expanded="startExpanded"
+            :show-external-details="showExternalDetails"
             @reordered="e => $emit('reordered', e)"
             @reorganized="e => $emit('reorganized', e)"
             @selected="e => $emit('selected', e)"
@@ -115,6 +117,7 @@ export default {
     },
     selected: Boolean,
     startExpanded: Boolean,
+    showExternalDetails: Boolean,
   },
   data() {
     return {
@@ -214,6 +217,6 @@ export default {
 
 .tree-node-title,
 .dummy-node {
-  height: 40px;
+  min-height: 40px;
 }
 </style>

app/imports/client/ui/components/tree/TreeNodeList.vue

@@ -23,6 +23,7 @@
       :organize="organize"
       :lazy="lazy"
       :start-expanded="startExpanded"
+      :show-external-details="showExternalDetails"
       @selected="e => $emit('selected', e)"
       @reordered="e => $emit('reordered', e)"
       @reorganized="e => $emit('reorganized', e)"
@@ -64,6 +65,7 @@ export default {
       default: () => [],
     },
     startExpanded: Boolean,
+    showExternalDetails: Boolean,
   },
   data() {
     return {

app/imports/client/ui/properties/components/actions/ActionCard.vue

@@ -96,6 +96,7 @@
       <tree-node-list
         v-if="children && children.length"
         start-expanded
+        show-external-details
         :children="children"
         @selected="e => $emit('sub-click', e)"
       />

app/imports/client/ui/properties/treeNodeViews/DamageTreeNode.vue

@@ -1,5 +1,6 @@
 <template lang="html">
-  <div class="layout align-center justify-start">
+  <div>
+    <div class="layout align-center justify-start" style="height:40px;">
       <v-icon
         v-if="!hideIcon"
         class="mr-2"
@@ -14,14 +15,30 @@
         <span v-if="model.target === 'self'">to self</span>
       </div>
     </div>
+    <div
+      v-if="showExternalDetails"
+      v-for="effect in model.amount.effects">
+      <div v-if="effect.amount.value !== 0"
+        style="position:relative; top:-15px; left:5px; height:25px;">
+        <inline-effect
+          hide-breadcrumbs
+          :key="effect._id"
+          :data-id="effect._id"
+          :model="effect"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="js">
 import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
+import InlineEffect from '../components/effects/InlineEffect.vue';
 
 export default {
   mixins: [treeNodeViewMixin],
+  components: {InlineEffect},
   computed: {
     icon() {
       if (this.model.damageType === 'healing') {

app/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue

@@ -3,6 +3,7 @@
     :is="treeNodeView"
     :model="model"
     :selected="selected"
+    :show-external-details="showExternalDetails"
     :class="{
       'inactive': model.inactive,
     }"
@@ -24,6 +25,7 @@ export default {
       required: true,
     },
     selected: Boolean,
+    showExternalDetails: Boolean,
   },
   computed: {
     treeNodeView(){

app/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js

@@ -12,6 +12,7 @@ export default {
     },
     selected: Boolean,
     hideIcon: Boolean,
+    showExternalDetails: Boolean,
   },
   computed: {
     title(){