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

fix #38: avoid group resize on focus

Browse source
This commit is contained in:
Davide Alberani 2017-10-21 01:02:15 +02:00
parent 034f02e044
commit ca80d858f6
4 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "ibt2", "name": "ibt2",
"version": "1.2.3", "version": "1.2.4",
"description": "I'll be there, 2: an oversimplified application to register attendees at a conference or event", "description": "I'll be there, 2: an oversimplified application to register attendees at a conference or event",
"author": "Davide Alberani <da@erlug.linux.it>", "author": "Davide Alberani <da@erlug.linux.it>",
"license": "Apache-2.0", "license": "Apache-2.0",

2
src/Attendee.vue
View file

@ -28,7 +28,7 @@
</md-menu-item> </md-menu-item>
<md-menu-item @click.native="deleteAttendee()"> <md-menu-item @click.native="deleteAttendee()">
<span>delete</span> <span>delete</span>
<md-icon>cancel</md-icon> <md-icon>delete</md-icon>
</md-menu-item> </md-menu-item>
</md-menu-content> </md-menu-content>
</md-menu> </md-menu>

38
src/Group.vue
View file

@ -1,7 +1,7 @@
<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()" @mouseleave.native="expandedNewAttendeeNote = false"> <md-card v-if="!addNewGroup" md-with-hover @mouseenter.native="focusToNewAttendee()" @mouseleave.native="hasFocus = false">
<md-card-header ref="currentGroup" 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">
@ -35,41 +35,41 @@
<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" @mouseenter.native="expandedNewAttendeeNote = true"> <md-list-item class="attendee-add">
<md-icon @click.native="addAttendee(group.group)">person_add</md-icon> <md-icon @click.native="addAttendee(group.group)" :class="{'md-primary': hasFocus}">person_add</md-icon>
<md-input-container class="new-attendee"> <md-input-container class="new-attendee">
<label>new attendee</label> <label><i>new attendee</i></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-item> </md-list-item>
<md-input-container ref="newAttendeeNotes" class="attendee-notes-container" v-if="expandedNewAttendeeNote"> <md-input-container ref="newAttendeeNotes" class="attendee-notes-container">
<label>notes</label> <label><i>notes</i></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> </md-list>
</md-card-content> </md-card-content>
</md-card> </md-card>
<md-card v-if="addNewGroup" md-with-hover @mouseenter.native="focusToNewGroup()" @mouseleave.native="expandedNewAttendeeNote = false" md-align="start"> <md-card v-if="addNewGroup" md-with-hover @mouseenter.native="focusToNewGroup()" @mouseleave.native="hasFocus = false" md-align="start">
<md-card-header ref="currentGroup" 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"><i>new group</i></label>
<md-icon>create_new_folder</md-icon>&nbsp;&nbsp;<md-input ref="newGroup" v-model="newGroup" @keyup.enter.native="focusToNewAttendee()" class="group-add-name" /> <md-icon>create_new_folder</md-icon>&nbsp;&nbsp;<md-input ref="newGroup" v-model="newGroup" @keyup.enter.native="focusToNewAttendee()" class="group-add-name" />
</md-input-container> </md-input-container>
</div> </div>
</md-card-header> </md-card-header>
<md-card-content> <md-card-content>
<md-list v-show="newGroup" md-dense> <md-list v-show="newGroup" md-dense>
<md-list-item class="attendee-add" @mouseenter.native="expandedNewAttendeeNote = true"> <md-list-item class="attendee-add">
<md-icon @click.native="addAttendee(newGroup)">person_add</md-icon> <md-icon @click.native="addAttendee(newGroup)" :class="{'md-primary': hasFocus}">person_add</md-icon>
<md-input-container class="new-attendee"> <md-input-container class="new-attendee">
<label>new attendee</label> <label><i>new attendee</i></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-item>
<md-input-container ref="newAttendeeNotes" class="attendee-notes-container" v-if="expandedNewAttendeeNote"> <md-input-container ref="newAttendeeNotes" class="attendee-notes-container">
<label>notes</label> <label><i>notes</i></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> </md-list>
@ -120,11 +120,11 @@ export default {
newGroup: '', newGroup: '',
groupNotes: '', groupNotes: '',
groupNewName: '', groupNewName: '',
hasFocus: false,
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
} }
}, },
@ -160,15 +160,20 @@ export default {
focusToNewGroup() { focusToNewGroup() {
this.$refs.newGroup.$el.focus(); this.$refs.newGroup.$el.focus();
this.hasFocus = true;
}, },
focusToNewAttendee() { focusToNewAttendee() {
this.$refs.newAttendeeInput.$el.focus(); this.$refs.newAttendeeInput.$el.focus();
this.expandedNewAttendeeNote = true; this.hasFocus = true;
}, },
addAttendee(group, newAttendee) { addAttendee(group, newAttendee) {
newAttendee = newAttendee || this.newAttendee; newAttendee = newAttendee || this.newAttendee;
if (!newAttendee) {
this.focusToNewAttendee();
return;
}
var attendee = { var attendee = {
day: this.day, day: this.day,
group: group, group: group,
@ -320,6 +325,7 @@ export default {
.new-attendee { .new-attendee {
width: 50px; width: 50px;
margin-bottom: 0px;
} }
.attendee-notes-container { .attendee-notes-container {

5
src/Toolbar.vue
View file

@ -127,11 +127,6 @@ export default {
this.$router.push('/settings/'); this.$router.push('/settings/');
}, },
focusToLoginForm() {
var that = this;
setTimeout(function() { that.$refs.usernameInput.$el.focus(); }, 400);
},
focusToPassword() { focusToPassword() {
this.$refs.passwordInput.$el.focus(); this.$refs.passwordInput.$el.focus();
}, },