taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix keyboard navigation in assinedTo and watchers lightbox

stable
Juanfran 2015-11-03 13:32:32 +01:00 committed by David Barragán Merino
parent 0b4d265686
commit b906cfe02a
9 changed files with 196 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/coffee/modules/common/lightboxes.coffee
View File

@ -89,34 +89,34 @@ class LightboxKeyboardNavigationService extends taiga.Service
docEl.off(".keyboard-navigation")
dispatch: ($el, code) ->
activeElement = $el.find(".active")
activeElement = $el.find(".selected")
# Key: enter
if code == 13
if $el.find(".watcher-single").length == 1
$el.find('.watcher-single:first').trigger("click")
if $el.find(".user-list-single").length == 1
$el.find('.user-list-single:first').trigger("click")
else
activeElement.trigger("click")
# Key: down
else if code == 40
if not activeElement.length
$el.find('.watcher-single:first').addClass('active')
$el.find('.user-list-single:not(".is-active"):first').addClass('selected')
else
next = activeElement.next('.watcher-single')
next = activeElement.next('.user-list-single')
if next.length
activeElement.removeClass('active')
next.addClass('active')
activeElement.removeClass('selected')
next.addClass('selected')
# Key: up
else if code == 38
if not activeElement.length
$el.find('.watcher-single:last').addClass('active')
$el.find('.user-list-single:last').addClass('selected')
else
prev = activeElement.prev('.watcher-single')
prev = activeElement.prev('.user-list-single:not(".is-active")')
if prev.length
activeElement.removeClass('active')
prev.addClass('active')
activeElement.removeClass('selected')
prev.addClass('selected')
init: ($el) ->
@stop()

7
app/styles/components/user-list.scss
View File

@ -31,9 +31,12 @@
@extend %user-list;
margin-top: 1rem;
.user-list-single {
&:hover {
&:hover,
&.selected {
background: lighten($primary, 58%);
cursor: pointer;
}
&:hover {
transition: background .3s linear;
transition-delay: .2s;
}
@ -48,7 +51,7 @@
opacity: 1;
position: absolute;
right: 1rem;
top: 1.3rem;
top: 1.5rem;
transition: opacity .2s ease-in;
}
}

5
app/styles/modules/common/lightbox.scss
View File

@ -471,9 +471,12 @@
width: 600px;
}
.user-list-single {
&:hover {
&:hover,
&.selected {
background: lighten($primary, 58%);
cursor: pointer;
}
&:hover {
transition: background .3s linear;
transition-delay: .2s;
}

4
e2e/full/issues/issue-detail.e2e.js
View File

@ -32,9 +32,9 @@ describe('Issue detail', async function(){
it('status edition', utils.detail.statusTesting);
it('assigned to edition', utils.detail.assignedToTesting);
describe('assigned to edition', utils.detail.assignedToTesting);
it('watchers edition', utils.detail.watchersTesting);
describe('watchers edition', utils.detail.watchersTesting);
it('history', utils.detail.historyTesting);

4
e2e/full/tasks/task-detail.e2e.js
View File

@ -34,9 +34,9 @@ describe('Task detail', function(){
it('status edition', utils.detail.statusTesting);
it('assigned to edition', utils.detail.assignedToTesting);
describe('assigned to edition', utils.detail.assignedToTesting);
it('watchers edition', utils.detail.watchersTesting);
describe('watchers edition', utils.detail.watchersTesting);
it('iocaine edition', async function() {
// Toggle iocaine status

4
e2e/full/user-stories/user-story-detail.e2e.js
View File

@ -33,7 +33,7 @@ describe('User story detail', function(){
it('status edition', utils.detail.statusTesting);
it('assigned to edition', utils.detail.assignedToTesting);
describe('assigned to edition', utils.detail.assignedToTesting);
it('team requirement edition', async function() {
let requirementHelper = usDetailHelper.teamRequirement();
@ -65,7 +65,7 @@ describe('User story detail', function(){
expect(isRequired).to.be.equal(newIsRequired);
});
it('watchers edition', utils.detail.watchersTesting);
describe('watchers edition', utils.detail.watchersTesting);
it('history', utils.detail.historyTesting);

9
e2e/helpers/common-helper.js
View File

@ -20,6 +20,15 @@ helper.assignToLightbox = function() {
},
getName: function(item) {
return el.$$('div[data-user-id] .user-list-name').get(item).getText();
},
getNames: function() {
return el.$$('.user-list-name').getText();
},
filter: function(text) {
return el.$('input').sendKeys(text);
},
userList: function() {
return el.$$('.user-list-single');
}
};

20
e2e/helpers/detail-helper.js
View File

@ -114,7 +114,6 @@ helper.assignedTo = function() {
let obj = {
el: el,
clear: async function() {
await browser.actions().mouseMove(el).perform();
@ -124,15 +123,12 @@ helper.assignedTo = function() {
await browser.waitForAngular();
}
},
assign: function() {
el.$('.user-assigned').click();
el.$('.user-assigned').click();
},
getUserName: function() {
return el.$('.user-assigned').getText();
return el.$('.user-assigned').getText();
}
};
return obj;
@ -422,8 +418,16 @@ helper.watchersLightbox = function() {
},
getFirstName: function() {
return el.$$('.lightbox .ticket-watchers div[data-user-id]').first().getText();
}
},
getNames: function() {
return el.$$('.user-list-name').getText();
},
filter: function(text) {
return el.$('input').sendKeys(text);
},
userList: function() {
return el.$$('.user-list-single');
}
};
return obj;

178
e2e/utils/detail.js
View File

@ -70,17 +70,84 @@ helper.statusTesting = async function() {
expect(newGenericStatus).to.be.not.equal(genericStatus);
}
helper.assignedToTesting = async function() {
let assignedTo = detailHelper.assignedTo();
let assignToLightbox = commonHelper.assignToLightbox();
let userName = detailHelper.assignedTo().getUserName();
await assignedTo.clear();
assignedTo.assign();
await assignToLightbox.waitOpen();
assignToLightbox.selectFirst();
await assignToLightbox.waitClose();
let newUserName = assignedTo.getUserName();
expect(newUserName).to.be.not.equal(userName);
helper.assignedToTesting = function() {
before(function () {
let assignedTo = detailHelper.assignedTo();
return assignedTo.clear();
})
it('assign', async function() {
let assignedTo = detailHelper.assignedTo();
let assignToLightbox = commonHelper.assignToLightbox();
let userName = detailHelper.assignedTo().getUserName();
assignedTo.assign();
await assignToLightbox.waitOpen();
assignToLightbox.selectFirst();
await assignToLightbox.waitClose();
let newUserName = assignedTo.getUserName();
expect(newUserName).to.be.not.equal(userName);
});
it('unassign', async function() {
let assignedTo = detailHelper.assignedTo();
let assignToLightbox = commonHelper.assignToLightbox();
await assignedTo.clear();
let newUserName = await assignedTo.getUserName();
expect(newUserName).to.be.equal('Not assigned');
});
it('filter', async function () {
let assignedTo = detailHelper.assignedTo();
let assignToLightbox = commonHelper.assignToLightbox();
assignedTo.assign();
await assignToLightbox.waitOpen();
let names = await assignToLightbox.getNames();
await assignToLightbox.filter(names[0]);
let newNames = await assignToLightbox.getNames();
expect(newNames).to.have.length(1);
assignToLightbox.selectFirst();
await assignToLightbox.waitClose();
});
it('keyboard navigatin', async function() {
let assignedTo = detailHelper.assignedTo();
let assignToLightbox = commonHelper.assignToLightbox();
assignedTo.assign();
await assignToLightbox.waitOpen();
browser
.actions()
.sendKeys(protractor.Key.ARROW_DOWN)
.sendKeys(protractor.Key.ARROW_DOWN)
.sendKeys(protractor.Key.ARROW_DOWN)
.sendKeys(protractor.Key.ARROW_UP)
.perform();
let selected = assignToLightbox.userList().get(2);
let isSelected = await commonUtil.hasClass(selected, 'selected');
expect(isSelected).to.be.true;
});
}
helper.historyTesting = async function() {
@ -188,30 +255,83 @@ helper.deleteTesting = async function() {
await deleteHelper.delete();
}
helper.watchersTesting = async function() {
let watchersHelper = detailHelper.watchers();
await watchersHelper.removeAllWatchers();
helper.watchersTesting = function() {
before(function () {
let watchersHelper = detailHelper.watchers();
return watchersHelper.removeAllWatchers();
})
let watchersLightboxHelper = detailHelper.watchersLightbox();
let userNames = await watchersHelper.getWatchersUserNames();
it('add watcher', async function() {
let watchersHelper = detailHelper.watchers();
let watchersLightboxHelper = detailHelper.watchersLightbox();
let userNames = await watchersHelper.getWatchersUserNames();
//Add watcher
await watchersHelper.addWatcher();
await watchersLightboxHelper.waitOpen();
let newWatcherName = await watchersLightboxHelper.getFirstName();
await watchersLightboxHelper.selectFirst();
await watchersLightboxHelper.waitClose();
await watchersHelper.addWatcher();
await watchersLightboxHelper.waitOpen();
let newUserNames = await watchersHelper.getWatchersUserNames();
let newWatcherName = await watchersLightboxHelper.getFirstName();
await userNames.push(newWatcherName);
await watchersLightboxHelper.selectFirst();
await watchersLightboxHelper.waitClose();
expect(newUserNames.join(',')).to.be.equal(userNames.join(','));
let newUserNames = await watchersHelper.getWatchersUserNames();
//Clear watchers
await watchersHelper.removeAllWatchers();
newUserNames = await watchersHelper.getWatchersUserNames();
expect(newUserNames.join()).to.be.equal('');
await userNames.push(newWatcherName);
expect(newUserNames.join(',')).to.be.equal(userNames.join(','));
});
it('clear watcher', async function() {
let watchersHelper = detailHelper.watchers();
await watchersHelper.removeAllWatchers();
let newUserNames = await watchersHelper.getWatchersUserNames();
expect(newUserNames.join()).to.be.equal('');
});
it('filter watcher', async function () {
let watchersHelper = detailHelper.watchers();
let watchersLightboxHelper = detailHelper.watchersLightbox();
let userNames = await watchersHelper.getWatchersUserNames();
await watchersHelper.addWatcher();
await watchersLightboxHelper.waitOpen();
let names = await watchersLightboxHelper.getNames();
await watchersLightboxHelper.filter(names[0]);
let newNames = await watchersLightboxHelper.getNames();
expect(newNames).to.have.length(1);
await watchersLightboxHelper.selectFirst();
await watchersLightboxHelper.waitClose();
});
it('keyboard navigatin', async function() {
let watchersHelper = detailHelper.watchers();
let watchersLightboxHelper = detailHelper.watchersLightbox();
await watchersHelper.addWatcher();
await watchersLightboxHelper.waitOpen();
browser
.actions()
.sendKeys(protractor.Key.ARROW_DOWN)
.sendKeys(protractor.Key.ARROW_DOWN)
.sendKeys(protractor.Key.ARROW_DOWN)
.sendKeys(protractor.Key.ARROW_UP)
.perform();
let selected = watchersLightboxHelper.userList().get(1);
let isSelected = await commonUtil.hasClass(selected, 'selected');
expect(isSelected).to.be.true;
});
}
helper.customFields = function(typeIndex) {