refactor using List component

This commit is contained in:
taehoon 2019-04-26 15:31:10 -04:00
parent 8561bf6612
commit abad528dd4
2 changed files with 10 additions and 10 deletions

View file

@ -1,10 +1,12 @@
import Status from '../status/status.vue' import Status from '../status/status.vue'
import List from '../list/list.vue'
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
const UserReportingModal = { const UserReportingModal = {
components: { components: {
Status, Status,
List,
Checkbox Checkbox
}, },
data () { data () {

View file

@ -28,12 +28,14 @@
</div> </div>
</div> </div>
<div class="user-reporting-panel-right" v-bar="{preventParentScroll: true}"> <div class="user-reporting-panel-right" v-bar="{preventParentScroll: true}">
<div> <List :items="statuses">
<div v-for="status in statuses" :key="status.id" class="status-fadein user-reporting-panel-sitem"> <template slot="item" slot-scope="{item}">
<Status :inConversation="false" :focused="false" :statusoid="status" /> <div class="status-fadein user-reporting-panel-sitem">
<Checkbox :checked="isChecked(status.id)" @change="checked => toggleStatus(checked, status.id)" /> <Status :inConversation="false" :focused="false" :statusoid="item" />
</div> <Checkbox :checked="isChecked(item.id)" @change="checked => toggleStatus(checked, item.id)" />
</div> </div>
</template>
</List>
</div> </div>
</div> </div>
</div> </div>
@ -116,10 +118,6 @@
&-sitem { &-sitem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
padding-right: 15px; padding-right: 15px;
> .status-el { > .status-el {