alberanid/ibt2
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

move notes field outside of list item

Browse source
This commit is contained in:
Davide Alberani 2017-09-17 14:44:49 +02:00
parent 5c6cbd4778
commit 1ccf693aea
1 changed files with 27 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/Group.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<!-- XXX: too much duplication in this template --> <!-- XXX: too much duplication in this template -->
<md-layout class="group-layout" md-col gutter="120" md-align="start"> <md-layout class="group-layout" md-col gutter="120" md-align="start">
<md-card v-if="!addNewGroup" md-with-hover @mouseenter.native="focusToNewAttendee()"> <md-card v-if="!addNewGroup" md-with-hover @mouseenter.native="focusToNewAttendee()" @mouseleave.native="expandedNewAttendeeNote = false">
<md-card-header class="group-header"> <md-card-header ref="currentGroup" class="group-header">
<md-layout md-row> <md-layout md-row>
<div class="md-title group-title"> <div class="md-title group-title">
<md-icon class="group-icon">folder_open</md-icon>&nbsp;{{ group.group }}&nbsp;<span class="counter">{{ counter }}</span> <md-icon class="group-icon">folder_open</md-icon>&nbsp;{{ group.group }}&nbsp;<span class="counter">{{ counter }}</span>
@ -35,29 +35,23 @@
<md-card-content class="group-card"> <md-card-content class="group-card">
<md-list md-dense> <md-list md-dense>
<attendee v-for="attendee in group.attendees || []" :attendee="attendee" :key="attendee.name" @updated="reload" /> <attendee v-for="attendee in group.attendees || []" :attendee="attendee" :key="attendee.name" @updated="reload" />
<md-list-item class="attendee-add"> <md-list-item class="attendee-add" @mouseenter.native="expandedNewAttendeeNote = true">
<md-icon @click.native="addAttendee(group.group)">person_add</md-icon> <md-icon @click.native="addAttendee(group.group)">person_add</md-icon>
<md-input-container class="new-attendee"> <md-input-container class="new-attendee">
<label>new attendee</label> <label>new attendee</label>
<md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(group.group)" v-model="newAttendee" /> <md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(group.group)" v-model="newAttendee" />
</md-input-container> </md-input-container>
<md-list-expand> </md-list-item>
<md-list> <md-input-container ref="newAttendeeNotes" class="attendee-notes-container" v-if="expandedNewAttendeeNote">
<md-list-item class="md-inset">
<md-input-container>
<label>notes</label> <label>notes</label>
<md-input class="new-attendee-notes" @keyup.enter.native="addAttendee(group.group)" v-model="newAttendeeNotes" /> <md-input class="new-attendee-notes" @keyup.enter.native="addAttendee(group.group)" v-model="newAttendeeNotes" />
</md-input-container> </md-input-container>
</md-list-item>
</md-list>
</md-list-expand>
</md-list-item>
</md-list> </md-list>
</md-card-content> </md-card-content>
</md-card> </md-card>
<md-card v-if="addNewGroup" md-with-hover @mouseenter.native="focusToNewGroup()" md-align="start"> <md-card v-if="addNewGroup" md-with-hover @mouseenter.native="focusToNewGroup()" @mouseleave.native="expandedNewAttendeeNote = false" md-align="start">
<md-card-header class="new-group-header"> <md-card-header ref="currentGroup" class="new-group-header">
<div class="md-title group-title"> <div class="md-title group-title">
<md-input-container class="new-group"> <md-input-container class="new-group">
<label class="new-group-label">new group</label> <label class="new-group-label">new group</label>
@ -66,25 +60,18 @@
</div> </div>
</md-card-header> </md-card-header>
<md-card-content> <md-card-content>
<md-list v-show="newGroup"> <md-list v-show="newGroup" md-dense>
<md-list-item class="attendee-add"> <md-list-item class="attendee-add" @mouseenter.native="expandedNewAttendeeNote = true">
<md-icon @click.native="addAttendee(newGroup)">person_add</md-icon> <md-icon @click.native="addAttendee(newGroup)">person_add</md-icon>
<md-input-container> <md-input-container class="new-attendee">
<label>new attendee</label> <label>new attendee</label>
<md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(newGroup)" v-model="newAttendee" /> <md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(newGroup)" v-model="newAttendee" />
</md-input-container> </md-input-container>
</md-list-item>
<md-list-expand> <md-input-container ref="newAttendeeNotes" class="attendee-notes-container" v-if="expandedNewAttendeeNote">
<md-list>
<md-list-item class="md-inset">
<md-input-container>
<label>notes</label> <label>notes</label>
<md-input class="new-attendee-notes" @keyup.enter.native="addAttendee(newGroup)" v-model="newAttendeeNotes" /> <md-input class="new-attendee-notes" @keyup.enter.native="addAttendee(newGroup)" v-model="newAttendeeNotes" />
</md-input-container> </md-input-container>
</md-list-item>
</md-list>
</md-list-expand>
</md-list-item>
</md-list> </md-list>
</md-card-content> </md-card-content>
</md-card> </md-card>
@ -136,7 +123,8 @@ export default {
noteDialog: {title: 'Group notes', ok: 'ok', cancel: 'cancel'}, noteDialog: {title: 'Group notes', ok: 'ok', cancel: 'cancel'},
renameDialog: {title: 'Rename group', ok: 'ok', cancel: 'cancel'}, renameDialog: {title: 'Rename group', ok: 'ok', cancel: 'cancel'},
deleteDialog: {title: 'Delete group', content: 'Really delete this group?', ok: 'ok', cancel: 'cancel'}, deleteDialog: {title: 'Delete group', content: 'Really delete this group?', ok: 'ok', cancel: 'cancel'},
expandedNote: false expandedNote: false,
expandedNewAttendeeNote: false
} }
}, },
@ -176,6 +164,7 @@ export default {
focusToNewAttendee() { focusToNewAttendee() {
this.$refs.newAttendeeInput.$el.focus(); this.$refs.newAttendeeInput.$el.focus();
this.expandedNewAttendeeNote = true;
}, },
addAttendee(group, newAttendee) { addAttendee(group, newAttendee) {
@ -307,9 +296,6 @@ export default {
vertical-align: text-top; vertical-align: text-top;
} }
.new-attendee {
width: 50px;
}
.new-group { .new-group {
min-width: 250px; min-width: 250px;
@ -332,8 +318,13 @@ export default {
line-height: 1; line-height: 1;
} }
.new-attendee-notes { .new-attendee {
max-width: 120px; width: 50px;
}
.attendee-notes-container {
max-width: 170px;
margin-left: 60px;
} }
.group-notes > p { .group-notes > p {
@ -361,6 +352,7 @@ export default {
.attendee-add .md-list-item-container { .attendee-add .md-list-item-container {
padding-left: 0px; padding-left: 0px;
max-width: 300px;
} }
</style> </style>