Improved effect components

app/imports/ui/properties/components/effects/EffectChildList.vue

@@ -1,12 +1,15 @@
 <template lang="html">
-  <v-list two-line v-if="this.effects && this.effects.length">
-		<effect-list-tile
-			:show-stat-name="showStatName"
-			v-for="effect in sortedEffects"
-			v-bind="effect"
-			v-on="$listeners.click ? { click(e){$emit('click', e)} } : {}"
-			:key="effect._id"
-		/>
+  <v-list
+    v-if="effects && effects.length"
+    two-line
+  >
+    <effect-list-tile
+      v-for="effect in sortedEffects"
+      :key="effect._id"
+      :show-stat-name="showStatName"
+      :model="effect"
+      v-on="$listeners.click ? { click(e){$emit('click', e)} } : {}"
+    />
   </v-list>
 </template>
 
@@ -15,13 +18,13 @@
 	import sortEffects from '/imports/ui/utility/sortEffects.js';
 
 	export default {
+		components: {
+			EffectListTile,
+		},
 		props: {
 			effects: Array,
 			showStatName: Boolean,
 		},
-		components: {
-			EffectListTile,
-		},
 		computed: {
 			sortedEffects(){
 				return sortEffects(this.effects);

app/imports/ui/properties/components/effects/EffectEditExpansionList.vue

@@ -1,25 +1,25 @@
 <template lang="html">
   <v-expansion-panel
-		class="effect-edit-expansion-list"
-		v-model="expanded"
-	>
-  	<v-expansion-panel-content
-			v-for="(effect, index) in effects"
-			:key="effect._id"
-			lazy
-		>
-  		<effect-list-tile
-				slot="header"
-				class="effect-list-tile"
-				:class="{'primary--text': expanded === index}"
-				v-bind="effect"
-			/>
-			<effect-form
-				:effect="effect"
-				:stats="stats"
-				@change="({set, ack}) => $emit('change', {set, ack, effectId: effect._id, index})"
-			/>
-  	</v-expansion-panel-content>
+    v-model="expanded"
+    class="effect-edit-expansion-list"
+  >
+    <v-expansion-panel-content
+      v-for="(effect, index) in effects"
+      :key="effect._id"
+      lazy
+    >
+      <effect-list-tile
+        slot="header"
+        class="effect-list-tile"
+        :class="{'primary--text': expanded === index}"
+        :model="effect"
+      />
+      <effect-form
+        :effect="effect"
+        :stats="stats"
+        @change="({set, ack}) => $emit('change', {set, ack, effectId: effect._id, index})"
+      />
+    </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
 
@@ -27,14 +27,14 @@
 	import EffectForm from '/imports/ui/properties/forms/EffectForm.vue';
 	import EffectListTile from '/imports/ui/properties/components/effects/EffectListTile.vue';
 	export default {
-		props: {
-			effects: Array,
-			stats: Array,
-		},
 		components: {
 			EffectForm,
 			EffectListTile,
 		},
+		props: {
+			effects: Array,
+			stats: Array,
+		},
 		data(){ return {
 			expanded: null,
 		}},

app/imports/ui/properties/components/effects/EffectListTile.vue

@@ -1,53 +1,65 @@
 <template lang="html">
-	<v-list-tile
-		class="effect-list-tile"
-		:class="{disabled: !enabled}"
-		:data-id="_id"
-		v-on="$listeners.click ? { click(e){
-				$emit('click', $props)
-			} } : {}"
-	>
-		<v-layout row align-center class="net-effect">
-			<v-icon class="icon">{{getEffectIcon(operation, result)}}</v-icon>
-			<div class="value display-1  pr-2" v-if="showValue(operation)">
-				{{getValue(operation, result)}}
-			</div>
-			<div class="calculation body-2 pr-2" v-else>
-				{{operation === 'conditional' ? calculation : ''}}
-			</div>
-		</v-layout>
-		<v-list-tile-content>
-			<v-list-tile-title class="stat" v-if="showStatName">
-				{{statName}}
-			</v-list-tile-title>
-			<v-list-tile-title class="name" v-else>
-				{{name}}
-			</v-list-tile-title>
-			<v-list-tile-sub-title class="operation">
-				{{getOperation(operation)}}
-			</v-list-tile-sub-title>
-		</v-list-tile-content>
-	</v-list-tile>
+  <v-list-tile
+    class="effect-list-tile"
+    :class="{disabled: !enabled}"
+    :data-id="_id"
+    v-on="$listeners.click ? { click(e){
+      $emit('click', $props)
+    } } : {}"
+  >
+    <v-list-tile-avatar>
+      <v-icon class="icon">
+        {{ getEffectIcon(model.operation, model.result) }}
+      </v-icon>
+    </v-list-tile-avatar>
+    <v-list-tile-action>
+      <div
+        v-if="showValue(model.operation)"
+        class="value display-1  pr-2"
+      >
+        {{ getValue(model.operation, model.result) }}
+      </div>
+      <div
+        v-else
+        class="calculation body-2 pr-2"
+      >
+        {{ model.operation === 'conditional' ? model.calculation : '' }}
+      </div>
+    </v-list-tile-action>
+    <v-list-tile-content>
+      <v-list-tile-title
+        v-if="showStatName"
+        class="stat"
+      >
+        {{ model.statName }}
+      </v-list-tile-title>
+      <v-list-tile-title
+        v-else
+        class="name"
+      >
+        {{ model.name }}
+      </v-list-tile-title>
+      <v-list-tile-sub-title class="operation">
+        {{ getOperation(model.operation) }}
+      </v-list-tile-sub-title>
+    </v-list-tile-content>
+  </v-list-tile>
 </template>
 
 <script>
-	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
 	export default {
 		props: {
-			_id: String,
 			enabled: Boolean,
-			operation: String,
-			result: [String, Number],
-			calculation: String,
-			name: String,
-			stat: String,
-			statName: String,
-			showStatName: Boolean,
+      showStatName: Boolean,
+      model: {
+        type: Object,
+        required: true,
+      },
 		},
 		methods: {
 			getEffectIcon,
-			getOperation(op, value){
+			getOperation(op){
 				switch(op) {
 					case 'base': return 'Base value';
 					case 'add': return 'Add';