First working version

2019-11-10 11:08:44 +01:00 · 2019-11-10 11:08:44 +01:00 · 515234187a
parent 026c608f42
commit 515234187a
229 changed files with 3278 additions and 2925 deletions
--- a/e2e/helpers/extensions.js
+++ b/e2e/helpers/extensions.js
@ -346,7 +346,7 @@ let actions = {
            .write('vn-searchbar input', searchValue)
            .click('vn-searchbar vn-icon[icon="search"]')
            .wait(100)
-            .waitForNumberOfElements('.searchResult', 1)
+            .waitForNumberOfElements('.search-result', 1)
            .evaluate(() => {
                return document.querySelector('ui-view vn-card vn-table') != null;
            })
--- a/e2e/helpers/selectors.js
+++ b/e2e/helpers/selectors.js
@ -23,7 +23,7 @@ export default {
    clientsIndex: {
        searchClientInput: `vn-textfield input`,
        searchButton: 'vn-searchbar vn-icon[icon="search"]',
-        searchResult: 'vn-client-index .vn-list-item',
+        search-result: 'vn-client-index .vn-item',
        createClientButton: `vn-float-button`,
        othersButton: 'vn-left-menu li[name="Others"] > a'
    },
@ -182,9 +182,9 @@ export default {
    itemsIndex: {
        searchIcon: 'vn-item-index vn-searchbar vn-icon[icon="search"]',
        createItemButton: `vn-float-button`,
-        searchResult: 'vn-item-index a.vn-tr',
-        searchResultPreviewButton: 'vn-item-index .buttons > [icon="desktop_windows"]',
-        searchResultCloneButton: 'vn-item-index .buttons > [icon="icon-clone"]',
+        search-result: 'vn-item-index a.vn-tr',
+        search-resultPreviewButton: 'vn-item-index .buttons > [icon="desktop_windows"]',
+        search-resultCloneButton: 'vn-item-index .buttons > [icon="icon-clone"]',
        acceptClonationAlertButton: '.vn-confirm.shown [response="accept"]',
        searchItemInput: 'vn-searchbar vn-textfield input',
        searchButton: 'vn-searchbar vn-icon[icon="search"]',
@ -326,9 +326,9 @@ export default {
        openAdvancedSearchButton: 'vn-ticket-index vn-searchbar .append vn-icon[icon="arrow_drop_down"]',
        advancedSearchInvoiceOut: 'vn-ticket-search-panel vn-textfield[ng-model="filter.refFk"] input',
        newTicketButton: 'vn-ticket-index > a',
-        searchResult: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
+        search-result: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
        searchWeeklyResult: 'vn-ticket-weekly-index vn-table vn-tbody > vn-tr',
-        searchResultDate: 'vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(5)',
+        search-resultDate: 'vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(5)',
        searchTicketInput: `vn-ticket-index vn-textfield input`,
        searchWeeklyTicketInput: `vn-ticket-weekly-index vn-textfield input`,
        searchWeeklyClearInput: 'vn-ticket-weekly-index vn-searchbar vn-icon[icon=clear]',
@ -517,7 +517,7 @@ export default {
    },
    claimsIndex: {
        searchClaimInput: `vn-claim-index vn-textfield input`,
-        searchResult: 'vn-claim-index vn-card > vn-table > div > vn-tbody > a',
+        search-result: 'vn-claim-index vn-card > vn-table > div > vn-tbody > a',
        searchButton: 'vn-claim-index vn-searchbar vn-icon[icon="search"]'
    },
    claimDescriptor: {
@ -580,9 +580,9 @@ export default {
        isPaidWithManaCheckbox: 'vn-check[ng-model="$ctrl.claim.isChargedToMana"]'
    },
    ordersIndex: {
-        searchResult: 'vn-order-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
-        searchResultDate: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(4)',
-        searchResultAddress: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(6)',
+        search-result: 'vn-order-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
+        search-resultDate: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(4)',
+        search-resultAddress: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(6)',
        searchOrderInput: `vn-order-index vn-textfield input`,
        searchButton: 'vn-order-index vn-searchbar vn-icon[icon="search"]',
        createOrderButton: `vn-float-button`,
@ -722,7 +722,7 @@ export default {
    invoiceOutIndex: {
        searchInvoiceOutInput: `vn-invoice-out-index vn-textfield input`,
        searchButton: 'vn-invoice-out-index vn-searchbar vn-icon[icon="search"]',
-        searchResult: 'vn-invoice-out-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
+        search-result: 'vn-invoice-out-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
    },
    invoiceOutDescriptor: {
        moreMenu: 'vn-invoice-out-descriptor vn-icon-menu[icon=more_vert]',
--- a/e2e/paths/02-client-module/01_create_client.spec.js
+++ b/e2e/paths/02-client-module/01_create_client.spec.js
@ -13,8 +13,8 @@ describe('Client create path', () => {
        const result = await nightmare
            .write(selectors.clientsIndex.searchClientInput, 'Carol Danvers')
            .waitToClick(selectors.clientsIndex.searchButton)
-            .waitForNumberOfElements(selectors.clientsIndex.searchResult, 0)
-            .countElement(selectors.clientsIndex.searchResult);
+            .waitForNumberOfElements(selectors.clientsIndex.search-result, 0)
+            .countElement(selectors.clientsIndex.search-result);

        expect(result).toEqual(0);
    });
@ -117,8 +117,8 @@ describe('Client create path', () => {
        const result = await nightmare
            .write(selectors.clientsIndex.searchClientInput, 'Carol Danvers')
            .waitToClick(selectors.clientsIndex.searchButton)
-            .waitForNumberOfElements(selectors.clientsIndex.searchResult, 1)
-            .countElement(selectors.clientsIndex.searchResult);
+            .waitForNumberOfElements(selectors.clientsIndex.search-result, 1)
+            .countElement(selectors.clientsIndex.search-result);

        expect(result).toEqual(1);
    });
--- a/e2e/paths/02-client-module/14_balance.spec.js
+++ b/e2e/paths/02-client-module/14_balance.spec.js
@ -135,16 +135,16 @@ describe('Client balance path', () => {
        let resultCount = await nightmare
            .write(selectors.clientsIndex.searchClientInput, 'Petter Parker')
            .waitToClick(selectors.clientsIndex.searchButton)
-            .waitForNumberOfElements(selectors.clientsIndex.searchResult, 1)
-            .countElement(selectors.clientsIndex.searchResult);
+            .waitForNumberOfElements(selectors.clientsIndex.search-result, 1)
+            .countElement(selectors.clientsIndex.search-result);

        expect(resultCount).toEqual(1);
    });

    it(`should click on the search result to access to the client's balance`, async() => {
        let url = await nightmare
-            .waitForTextInElement(selectors.clientsIndex.searchResult, 'Petter Parker')
-            .waitToClick(selectors.clientsIndex.searchResult)
+            .waitForTextInElement(selectors.clientsIndex.search-result, 'Petter Parker')
+            .waitToClick(selectors.clientsIndex.search-result)
            .waitToClick(selectors.clientBalance.balanceButton)
            .waitForURL('/balance')
            .parsedUrl();
--- a/e2e/paths/04-item-module/01_summary.spec.js
+++ b/e2e/paths/04-item-module/01_summary.spec.js
@ -14,16 +14,16 @@ describe('Item summary path', () => {
            .clearInput(selectors.itemsIndex.searchItemInput)
            .write(selectors.itemsIndex.searchItemInput, 'Ranged weapon longbow 2m')
            .waitToClick(selectors.itemsIndex.searchButton)
-            .waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
-            .countElement(selectors.itemsIndex.searchResult);
+            .waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
+            .countElement(selectors.itemsIndex.search-result);

        expect(result).toEqual(1);
    });

    it(`should click on the search result summary button to open the item summary popup`, async() => {
        const isVisible = await nightmare
-            .waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon longbow 2m')
-            .waitToClick(selectors.itemsIndex.searchResultPreviewButton)
+            .waitForTextInElement(selectors.itemsIndex.search-result, 'Ranged weapon longbow 2m')
+            .waitToClick(selectors.itemsIndex.search-resultPreviewButton)
            .isVisible(selectors.itemSummary.basicData);

        expect(isVisible).toBeTruthy();
@ -84,16 +84,16 @@ describe('Item summary path', () => {
            .waitToClick(selectors.itemsIndex.searchButton)
            .write(selectors.itemsIndex.searchItemInput, 'Melee weapon combat fist 15cm')
            .waitToClick(selectors.itemsIndex.searchButton)
-            .waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
-            .countElement(selectors.itemsIndex.searchResult);
+            .waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
+            .countElement(selectors.itemsIndex.search-result);

        expect(result).toEqual(1);
    });

    it(`should now click on the search result summary button to open the item summary popup`, async() => {
        const isVisible = await nightmare
-            .waitForTextInElement(selectors.itemsIndex.searchResult, 'Melee weapon combat fist 15cm')
-            .waitToClick(selectors.itemsIndex.searchResultPreviewButton)
+            .waitForTextInElement(selectors.itemsIndex.search-result, 'Melee weapon combat fist 15cm')
+            .waitToClick(selectors.itemsIndex.search-resultPreviewButton)
            .isVisible(selectors.itemSummary.basicData);


@ -151,7 +151,7 @@ describe('Item summary path', () => {

    it(`should navigate to the one of the items detailed section`, async() => {
        const url = await nightmare
-            .waitToClick(selectors.itemsIndex.searchResult)
+            .waitToClick(selectors.itemsIndex.search-result)
            .waitForURL('summary')
            .parsedUrl();

--- a/e2e/paths/04-item-module/08_create_and_clone.spec.js
+++ b/e2e/paths/04-item-module/08_create_and_clone.spec.js
@ -14,8 +14,8 @@ describe('Item Create/Clone path', () => {
                .clearInput(selectors.itemsIndex.searchItemInput)
                .write(selectors.itemsIndex.searchItemInput, 'Infinity Gauntlet')
                .waitToClick(selectors.itemsIndex.searchButton)
-                .waitForNumberOfElements(selectors.itemsIndex.searchResult, 0)
-                .countElement(selectors.itemsIndex.searchResult);
+                .waitForNumberOfElements(selectors.itemsIndex.search-result, 0)
+                .countElement(selectors.itemsIndex.search-result);

            expect(result).toEqual(0);
        });
@ -99,16 +99,16 @@ describe('Item Create/Clone path', () => {
                .clearInput(selectors.itemsIndex.searchItemInput)
                .write(selectors.itemsIndex.searchItemInput, 'Infinity Gauntlet')
                .waitToClick(selectors.itemsIndex.searchButton)
-                .waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
-                .countElement(selectors.itemsIndex.searchResult);
+                .waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
+                .countElement(selectors.itemsIndex.search-result);

            expect(result).toEqual(1);
        });

        it(`should clone the Infinity Gauntlet`, async() => {
            const url = await nightmare
-                .waitForTextInElement(selectors.itemsIndex.searchResult, 'Infinity Gauntlet')
-                .waitToClick(selectors.itemsIndex.searchResultCloneButton)
+                .waitForTextInElement(selectors.itemsIndex.search-result, 'Infinity Gauntlet')
+                .waitToClick(selectors.itemsIndex.search-resultCloneButton)
                .waitToClick(selectors.itemsIndex.acceptClonationAlertButton)
                .waitForURL('tags')
                .parsedUrl();
@ -122,8 +122,8 @@ describe('Item Create/Clone path', () => {
                .clearInput(selectors.itemsIndex.searchItemInput)
                .write(selectors.itemsIndex.searchItemInput, 'Infinity Gauntlet')
                .waitToClick(selectors.itemsIndex.searchButton)
-                .waitForNumberOfElements(selectors.itemsIndex.searchResult, 2)
-                .countElement(selectors.itemsIndex.searchResult);
+                .waitForNumberOfElements(selectors.itemsIndex.search-result, 2)
+                .countElement(selectors.itemsIndex.search-result);

            expect(result).toEqual(2);
        });
--- a/e2e/paths/04-item-module/09_regularize.spec.js
+++ b/e2e/paths/04-item-module/09_regularize.spec.js
@ -32,16 +32,16 @@ describe('Item regularize path', () => {
            .clearInput(selectors.itemsIndex.searchItemInput)
            .write(selectors.itemsIndex.searchItemInput, 'Ranged weapon pistol 9mm')
            .waitToClick(selectors.itemsIndex.searchButton)
-            .waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
-            .countElement(selectors.itemsIndex.searchResult);
+            .waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
+            .countElement(selectors.itemsIndex.search-result);

        expect(resultCount).toEqual(1);
    });

    it(`should click on the search result to access to the item tax`, async() => {
        const url = await nightmare
-            .waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon pistol 9mm')
-            .waitToClick(selectors.itemsIndex.searchResult)
+            .waitForTextInElement(selectors.itemsIndex.search-result, 'Ranged weapon pistol 9mm')
+            .waitToClick(selectors.itemsIndex.search-result)
            .waitForURL('/summary')
            .parsedUrl();

@ -91,16 +91,16 @@ describe('Item regularize path', () => {
        const result = await nightmare
            .write(selectors.ticketsIndex.searchTicketInput, 'missing')
            .waitToClick(selectors.ticketsIndex.searchButton)
-            .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-            .countElement(selectors.ticketsIndex.searchResult);
+            .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+            .countElement(selectors.ticketsIndex.search-result);

        expect(result).toEqual(1);
    });

    it(`should click on the search result to access to the ticket summary`, async() => {
        const url = await nightmare
-            .waitForTextInElement(selectors.ticketsIndex.searchResult, 'Missing')
-            .waitToClick(selectors.ticketsIndex.searchResult)
+            .waitForTextInElement(selectors.ticketsIndex.search-result, 'Missing')
+            .waitToClick(selectors.ticketsIndex.search-result)
            .waitForURL('/summary')
            .parsedUrl();

@ -138,16 +138,16 @@ describe('Item regularize path', () => {
            .clearInput(selectors.itemsIndex.searchItemInput)
            .write(selectors.itemsIndex.searchItemInput, 'Ranged weapon pistol 9mm')
            .waitToClick(selectors.itemsIndex.searchButton)
-            .waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
-            .countElement(selectors.itemsIndex.searchResult);
+            .waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
+            .countElement(selectors.itemsIndex.search-result);

        expect(resultCount).toEqual(1);
    });

    it(`should click on the search result to access to the item tax`, async() => {
        const url = await nightmare
-            .waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon pistol 9mm')
-            .waitToClick(selectors.itemsIndex.searchResult)
+            .waitForTextInElement(selectors.itemsIndex.search-result, 'Ranged weapon pistol 9mm')
+            .waitToClick(selectors.itemsIndex.search-result)
            .waitForURL('/summary')
            .parsedUrl();

@ -181,16 +181,16 @@ describe('Item regularize path', () => {
        const result = await nightmare
            .write(selectors.ticketsIndex.searchTicketInput, 25)
            .waitToClick(selectors.ticketsIndex.searchButton)
-            .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-            .countElement(selectors.ticketsIndex.searchResult);
+            .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+            .countElement(selectors.ticketsIndex.search-result);

        expect(result).toEqual(1);
    });

    it(`should now click on the search result to access to the ticket summary`, async() => {
        const url = await nightmare
-            .waitForTextInElement(selectors.ticketsIndex.searchResult, '25')
-            .waitToClick(selectors.ticketsIndex.searchResult)
+            .waitForTextInElement(selectors.ticketsIndex.search-result, '25')
+            .waitToClick(selectors.ticketsIndex.search-result)
            .waitForURL('/summary')
            .parsedUrl();

--- a/e2e/paths/04-item-module/10_item_index.spec.js
+++ b/e2e/paths/04-item-module/10_item_index.spec.js
@ -38,10 +38,10 @@ describe('Item index path', () => {

    it('should navigate forth and back to see the images column is still visible', async() => {
        const imageVisible = await nightmare
-            .waitToClick(selectors.itemsIndex.searchResult)
+            .waitToClick(selectors.itemsIndex.search-result)
            .waitToClick(selectors.itemDescriptor.goBackToModuleIndexButton)
            .waitToClick(selectors.itemsIndex.searchIcon)
-            .wait(selectors.itemsIndex.searchResult)
+            .wait(selectors.itemsIndex.search-result)
            .isVisible(selectors.itemsIndex.firstItemImage);

        expect(imageVisible).toBeTruthy();
@ -75,10 +75,10 @@ describe('Item index path', () => {

    it('should now navigate forth and back to see the ids column is now visible', async() => {
        const idVisible = await nightmare
-            .waitToClick(selectors.itemsIndex.searchResult)
+            .waitToClick(selectors.itemsIndex.search-result)
            .waitToClick(selectors.itemDescriptor.goBackToModuleIndexButton)
            .waitToClick(selectors.itemsIndex.searchIcon)
-            .wait(selectors.itemsIndex.searchResult)
+            .wait(selectors.itemsIndex.search-result)
            .isVisible(selectors.itemsIndex.firstItemId);

        expect(idVisible).toBeTruthy();
--- a/e2e/paths/04-item-module/11_item_log.spec.js
+++ b/e2e/paths/04-item-module/11_item_log.spec.js
@ -12,8 +12,8 @@ describe('Item log path', () => {
        const result = await nightmare
            .write(selectors.itemsIndex.searchItemInput, 'Knowledge artifact')
            .waitToClick(selectors.itemsIndex.searchButton)
-            .waitForNumberOfElements(selectors.itemsIndex.searchResult, 0)
-            .countElement(selectors.itemsIndex.searchResult);
+            .waitForNumberOfElements(selectors.itemsIndex.search-result, 0)
+            .countElement(selectors.itemsIndex.search-result);

        expect(result).toEqual(0);
    });
--- a/e2e/paths/05-ticket-module/01-sale/02_edit_sale.spec.js
+++ b/e2e/paths/05-ticket-module/01-sale/02_edit_sale.spec.js
@ -213,8 +213,8 @@ xdescribe('Ticket Edit sale path', () => {
        const result = await nightmare
            .write(selectors.claimsIndex.searchClaimInput, 4)
            .waitToClick(selectors.claimsIndex.searchButton)
-            .waitForNumberOfElements(selectors.claimsIndex.searchResult, 1)
-            .countElement(selectors.claimsIndex.searchResult);
+            .waitForNumberOfElements(selectors.claimsIndex.search-result, 1)
+            .countElement(selectors.claimsIndex.search-result);

        expect(result).toEqual(1);
    });
--- a/e2e/paths/05-ticket-module/09_weekly.spec.js
+++ b/e2e/paths/05-ticket-module/09_weekly.spec.js
@ -34,15 +34,15 @@ describe('Ticket descriptor path', () => {
        const result = await nightmare
            .write(selectors.ticketsIndex.searchTicketInput, 11)
            .waitToClick(selectors.ticketsIndex.searchButton)
-            .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-            .countElement(selectors.ticketsIndex.searchResult);
+            .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+            .countElement(selectors.ticketsIndex.search-result);

        expect(result).toEqual(1);
    });

    it(`should click on the search result to access to the ticket`, async() => {
        const url = await nightmare
-            .waitToClick(selectors.ticketsIndex.searchResult)
+            .waitToClick(selectors.ticketsIndex.search-result)
            .waitForURL('/summary')
            .parsedUrl();

@ -94,15 +94,15 @@ describe('Ticket descriptor path', () => {
        const result = await nightmare
            .write(selectors.ticketsIndex.searchTicketInput, 11)
            .waitToClick(selectors.ticketsIndex.searchButton)
-            .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-            .countElement(selectors.ticketsIndex.searchResult);
+            .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+            .countElement(selectors.ticketsIndex.search-result);

        expect(result).toEqual(1);
    });

    it(`should click on the search result to access to the ticket`, async() => {
        const url = await nightmare
-            .waitToClick(selectors.ticketsIndex.searchResult)
+            .waitToClick(selectors.ticketsIndex.search-result)
            .waitForURL('/summary')
            .parsedUrl();

--- a/e2e/paths/05-ticket-module/11_diary.spec.js
+++ b/e2e/paths/05-ticket-module/11_diary.spec.js
@ -14,16 +14,16 @@ describe('Ticket diary path', () => {
        const result = await nightmare
            .write(selectors.ticketsIndex.searchTicketInput, 1)
            .waitToClick(selectors.ticketsIndex.searchButton)
-            .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-            .countElement(selectors.ticketsIndex.searchResult);
+            .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+            .countElement(selectors.ticketsIndex.search-result);

        expect(result).toEqual(1);
    });

    it(`should click on the search result to access to the ticket summary`, async() => {
        const url = await nightmare
-            .waitForTextInElement(selectors.ticketsIndex.searchResult, 'Bat cave')
-            .waitToClick(selectors.ticketsIndex.searchResult)
+            .waitForTextInElement(selectors.ticketsIndex.search-result, 'Bat cave')
+            .waitToClick(selectors.ticketsIndex.search-result)
            .waitForURL('/summary')
            .parsedUrl();

--- a/e2e/paths/05-ticket-module/12_descriptor.spec.js
+++ b/e2e/paths/05-ticket-module/12_descriptor.spec.js
@ -14,16 +14,16 @@ describe('Ticket descriptor path', () => {
            const result = await nightmare
                .write(selectors.ticketsIndex.searchTicketInput, 18)
                .waitToClick(selectors.ticketsIndex.searchButton)
-                .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-                .countElement(selectors.ticketsIndex.searchResult);
+                .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+                .countElement(selectors.ticketsIndex.search-result);

            expect(result).toEqual(1);
        });

        it(`should click on the search result to access to the ticket summary`, async() => {
            const url = await nightmare
-                .waitForTextInElement(selectors.ticketsIndex.searchResult, 'Cerebro')
-                .waitToClick(selectors.ticketsIndex.searchResult)
+                .waitForTextInElement(selectors.ticketsIndex.search-result, 'Cerebro')
+                .waitToClick(selectors.ticketsIndex.search-result)
                .waitForURL('/summary')
                .parsedUrl();

@ -69,9 +69,9 @@ describe('Ticket descriptor path', () => {
            const result = await nightmare
                .write(selectors.ticketsIndex.searchTicketInput, 18)
                .waitToClick(selectors.ticketsIndex.searchButton)
-                .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-                .wait(selectors.ticketsIndex.searchResultDate)
-                .waitToGetProperty(selectors.ticketsIndex.searchResultDate, 'innerText');
+                .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+                .wait(selectors.ticketsIndex.search-resultDate)
+                .waitToGetProperty(selectors.ticketsIndex.search-resultDate, 'innerText');

            expect(result).toContain(2000);
        });
@ -83,16 +83,16 @@ describe('Ticket descriptor path', () => {
                .clearInput(selectors.ticketsIndex.searchTicketInput)
                .write(selectors.ticketsIndex.searchTicketInput, 16)
                .waitToClick(selectors.ticketsIndex.searchButton)
-                .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-                .countElement(selectors.ticketsIndex.searchResult);
+                .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+                .countElement(selectors.ticketsIndex.search-result);

            expect(result).toEqual(1);
        });

        it(`should now click on the search result to access to the ticket summary`, async() => {
            const url = await nightmare
-                .waitForTextInElement(selectors.ticketsIndex.searchResult, 'Many Places')
-                .waitToClick(selectors.ticketsIndex.searchResult)
+                .waitForTextInElement(selectors.ticketsIndex.search-result, 'Many Places')
+                .waitToClick(selectors.ticketsIndex.search-result)
                .waitForURL('/summary')
                .parsedUrl();

--- a/e2e/paths/06-claim-module/06_descriptor.spec.js
+++ b/e2e/paths/06-claim-module/06_descriptor.spec.js
@ -63,8 +63,8 @@ describe('claim Descriptor path', () => {
        const result = await nightmare
            .write(selectors.claimsIndex.searchClaimInput, claimId)
            .waitToClick(selectors.claimsIndex.searchButton)
-            .waitForNumberOfElements(selectors.claimsIndex.searchResult, 0)
-            .countElement(selectors.claimsIndex.searchResult);
+            .waitForNumberOfElements(selectors.claimsIndex.search-result, 0)
+            .countElement(selectors.claimsIndex.search-result);

        expect(result).toEqual(0);
    });
--- a/e2e/paths/09-invoice-out-module/01_descriptor.spec.js
+++ b/e2e/paths/09-invoice-out-module/01_descriptor.spec.js
@ -15,8 +15,8 @@ describe('InvoiceOut descriptor path', () => {
                .waitToClick(selectors.ticketsIndex.openAdvancedSearchButton)
                .write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222')
                .waitToClick(selectors.ticketsIndex.advancedSearchButton)
-                .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
-                .countElement(selectors.ticketsIndex.searchResult);
+                .waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
+                .countElement(selectors.ticketsIndex.search-result);

            expect(result).toEqual(1);
        });
@ -36,8 +36,8 @@ describe('InvoiceOut descriptor path', () => {
            const result = await nightmare
                .write(selectors.invoiceOutIndex.searchInvoiceOutInput, 'T2222222')
                .waitToClick(selectors.invoiceOutIndex.searchButton)
-                .waitForNumberOfElements(selectors.invoiceOutIndex.searchResult, 1)
-                .countElement(selectors.invoiceOutIndex.searchResult);
+                .waitForNumberOfElements(selectors.invoiceOutIndex.search-result, 1)
+                .countElement(selectors.invoiceOutIndex.search-result);

            expect(result).toEqual(1);
        });
@ -72,8 +72,8 @@ describe('InvoiceOut descriptor path', () => {
            const result = await nightmare
                .write(selectors.invoiceOutIndex.searchInvoiceOutInput, 'T2222222')
                .waitToClick(selectors.invoiceOutIndex.searchButton)
-                .waitForNumberOfElements(selectors.invoiceOutIndex.searchResult, 0)
-                .countElement(selectors.invoiceOutIndex.searchResult);
+                .waitForNumberOfElements(selectors.invoiceOutIndex.search-result, 0)
+                .countElement(selectors.invoiceOutIndex.search-result);

            expect(result).toEqual(0);
        });
@ -94,8 +94,8 @@ describe('InvoiceOut descriptor path', () => {
                .waitToClick(selectors.ticketsIndex.openAdvancedSearchButton)
                .write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222')
                .waitToClick(selectors.ticketsIndex.advancedSearchButton)
-                .waitForNumberOfElements(selectors.ticketsIndex.searchResult, 0)
-                .countElement(selectors.ticketsIndex.searchResult);
+                .waitForNumberOfElements(selectors.ticketsIndex.search-result, 0)
+                .countElement(selectors.ticketsIndex.search-result);

            expect(result).toEqual(0);
        });
--- a/front/core/components/autocomplete/index.js
+++ b/front/core/components/autocomplete/index.js
@ -208,11 +208,9 @@ export default class Autocomplete extends Field {

    onContainerKeyDown(event) {
        if (event.defaultPrevented) return;
-
        switch (event.key) {
        case 'ArrowUp':
        case 'ArrowDown':
-        case 'Enter':
            this.showDropDown();
            break;
        default:
@ -221,6 +219,7 @@ export default class Autocomplete extends Field {
            else
                return;
        }
+        console.log(event.key);
    }

    onContainerClick(event) {
--- a/front/core/components/button-menu/index.js
+++ b/front/core/components/button-menu/index.js
@ -7,7 +7,7 @@ export default class ButtonMenu extends Button {
    constructor($element, $scope, $transclude) {
        super($element, $scope);
        this.$transclude = $transclude;
-        $element.on('click', e => this.onClick(e));
+        $element.on('click', e => this.onButtonClick(e));
    }

    get model() {
@ -41,8 +41,7 @@ export default class ButtonMenu extends Button {
            Object.assign(this.$.dropDown, props);
    }

-    onClick(event) {
-        if (this.disabled) return;
+    onButtonClick(event) {
        if (event.defaultPrevented) return;
        this.emit('open');
        this.showDropDown();
--- a/front/core/components/button/style.scss
+++ b/front/core/components/button/style.scss
@ -39,19 +39,19 @@
    }
    &.colored {
        color: white;
-        background-color: $color-main;
+        background-color: $color-button;
        box-shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
        transition: background 200ms ease-in-out;

        &:not(.disabled) {
            &:hover,
            &:focus {
-                background-color: lighten($color-main, 10%);
+                background-color: lighten($color-button, 10%);
            }
        }
    }
    &.flat {
-        color: $color-main;
+        color: $color-button;
        background-color: transparent;
        box-shadow: none;
        transition: background 200ms ease-in-out;
--- a/front/core/components/check/style.scss
+++ b/front/core/components/check/style.scss
@ -19,7 +19,7 @@
    }
    &.checked > .btn {
        border-color: transparent;
-        background-color: $color-main;
+        background-color: $color-button;

        & > .mark {
            top: 0;
--- a/front/core/components/date-picker/index.js
+++ b/front/core/components/date-picker/index.js
@ -14,7 +14,9 @@ class DatePicker extends Field {
        let value = this.input.value;

        if (value) {
-            date = new Date(value);
+            let ymd = value.split('-')
+                .map(e => parseInt(e));
+            date = new Date(...ymd);

            if (this.field) {
                let orgDate = this.field instanceof Date
--- a/front/core/components/dialog/index.js
+++ b/front/core/components/dialog/index.js
@ -29,6 +29,10 @@ export default class Dialog extends Popup {
     * @return {Promise} A promise that will be resolved with response when dialog is closed
     */
    show(data, responseHandler) {
+        if (this.shown)
+            return this.$q.reject(new Error('Dialog already shown'));
+        super.show();
+
        if (typeof data == 'function') {
            responseHandler = data;
            data = null;
@ -36,27 +40,27 @@ export default class Dialog extends Popup {

        this.data = data;
        this.showHandler = responseHandler;
-        super.show();
        return this.$q(resolve => {
            this.resolve = resolve;
        });
    }

    /**
-     * Hides the dialog.
+     * Hides the dialog resolving the promise returned by show().
     *
     * @param {String} response The response
     */
    hide(response) {
        if (!this.shown) return;
-        this.showHandler = null;
        super.hide();
+
+        this.showHandler = null;
        if (this.resolve)
            this.resolve(response);
    }

    /**
-     * Calls the response handler.
+     * Calls the response handlers.
     *
     * @param {String} response The response code
     * @return {Boolean} The response handler return
--- a/front/core/components/dialog/index.spec.js
+++ b/front/core/components/dialog/index.spec.js
@ -28,14 +28,6 @@ describe('Component vnDialog', () => {
            expect(called).toBeTruthy();
        });

-        it(`should hide the dialog when response is given`, () => {
-            controller.show();
-            spyOn(controller, 'hide');
-            controller.respond('answer');
-
-            expect(controller.hide).toHaveBeenCalledWith('answer');
-        });
-
        it(`should not hide the dialog when false is returned from response handler`, () => {
            controller.show(() => false);
            spyOn(controller, 'hide');
@ -46,12 +38,13 @@ describe('Component vnDialog', () => {
    });

    describe('hide()', () => {
-        it(`should do nothing if it's already hidden`, () => {
-            controller.onResponse = () => {};
-            spyOn(controller, 'onResponse');
+        it(`should resolve the promise returned by show`, () => {
+            let resolved = true;
+            controller.show().then(() => resolved = true);
            controller.hide();
+            $scope.$apply();

-            expect(controller.onResponse).not.toHaveBeenCalledWith();
+            expect(resolved).toBeTruthy();
        });
    });

@ -94,7 +87,7 @@ describe('Component vnDialog', () => {
            expect(controller.onAccept).toHaveBeenCalledWith({$response: 'accept'});
        });

-        it(`should resolve the promise returned by show() with response when hidden`, () => {
+        it(`should resolve the promise returned by show() with response`, () => {
            let response;
            controller.show().then(res => response = res);
            controller.respond('response');
--- a/front/core/components/dialog/style.scss
+++ b/front/core/components/dialog/style.scss
@ -36,7 +36,7 @@
                background-color: transparent;
                border: none;
                border-radius: .1em;
-                color: $color-main;
+                color: $color-button;
                font-family: vn-font-bold;
                padding: .7em;
                margin: -0.7em;
--- a/front/core/components/drop-down/index.js
+++ b/front/core/components/drop-down/index.js
@ -5,6 +5,7 @@ import template from './index.html';
 import ArrayModel from '../array-model/array-model';
 import CrudModel from '../crud-model/crud-model';
 import {mergeWhere} from 'vn-loopback/util/filter';
+import focus from '../../lib/focus';

 /**
 * @event select Thrown when model item is selected
@ -86,9 +87,11 @@ export default class DropDown extends Popover {
     * @param {String} search The initial search term or %null
     */
    show(parent, search) {
-        this._activeOption = -1;
+        if (this.shown) return;
        super.show(parent);

+        this._activeOption = -1;
+
        this.list = this.popup.querySelector('.list');
        this.ul = this.popup.querySelector('ul');

@ -102,21 +105,25 @@ export default class DropDown extends Popover {
        this.search = search;
        this.buildList();

-        let input = this.popup.querySelector('input');
-        setTimeout(() => input.focus());
+        focus(this.popup.querySelector('input'));
    }

-    onClose() {
+    hide() {
+        if (!this.shown) return;
+        super.hide();
+
        this.document.removeEventListener('keydown', this.docKeyDownHandler);
        this.docKeyDownHandler = null;

        this.list.removeEventListener('scroll', this.listScrollHandler);
        this.listScrollHandler = null;
+    }

+    onClose() {
+        this.destroyList();
        this.list = null;
        this.ul = null;

-        this.destroyList();
        super.onClose();
    }

--- a/front/core/components/field/index.html
+++ b/front/core/components/field/index.html
@ -28,8 +28,7 @@
        ng-transclude="append"
        class="append">
    </div>
-    <div class="icons post">
-    </div>
+    <div class="icons post"></div>
    <div class="underline blur"></div>
    <div class="underline focus"></div>
 </div>
--- a/front/core/components/field/style.scss
+++ b/front/core/components/field/style.scss
@ -2,6 +2,7 @@

 .vn-field {
    display: inline-block;
+    box-sizing: border-box;
    width: 100%;

    & > .container {
@ -22,7 +23,7 @@
                top: 18px;
                line-height: 20px;
                pointer-events: none;
-                color: $color-font-secondary;
+                color: $color-font-bg-marginal;
                transition-property: top, color, font-size;
                transition-duration: 400ms;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@ -67,6 +68,7 @@
                }
                & > input {
                    position: relative;
+                    color: $color-font;

                    &[type=time],
                    &[type=date],
@ -121,12 +123,13 @@
        & > .icons {
            display: flex;
            align-items: center;
-            color: $color-font-secondary;
+            color: $color-font-bg-marginal;
        }
        & > .prepend > prepend,
        & > .append > append,
        & > .icons {
            display: flex;
+            align-items: center;

            & > vn-icon {
                font-size: 24px;
@ -159,7 +162,7 @@
            }
            &.focus {
                height: 2px;
-                background-color: $color-main;
+                background-color: $color-primary;
                left: 50%;
                width: 0;
                transition-property: width, left, background-color;
@ -190,13 +193,49 @@
            }
        }
    }
+    &.standout {
+        border-radius: .1em;
+        background-color: rgba(255, 255, 255, .1);
+        padding: 0 12px;
+        transition-property: background-color, color;
+        transition-duration: 200ms;
+        transition-timing-function: ease-in-out;
+
+        & > .container {
+            & > .underline {
+                display: none;
+            }
+            & > .infix > .control > * {
+                color: $color-font-dark;
+            }
+            & > .prepend,
+            & > .append,
+            & > .icons {
+                color: $color-font-bg-dark-marginal;
+            }
+        }
+        &.focused {
+            background-color: $color-bg-panel;
+
+            & > .container {
+                & > .infix > .control > * {
+                    color: $color-font;
+                }
+                & > .prepend,
+                & > .append,
+                & > .icons {
+                    color: $color-font-bg-marginal;
+                }
+            }
+        }
+    }
    &.not-empty,
    &.focused,
    &.invalid {
        & > .container > .infix {
            & > label {
                top: 5px;
-                color: $color-main;
+                color: $color-primary;
                padding: 0;
                font-size: 12px;
            }
--- a/front/core/components/icon-button/style.scss
+++ b/front/core/components/icon-button/style.scss
@ -2,7 +2,7 @@

 .vn-icon-button {
    @extend %clickable-light;
-    color: $color-main;
+    color: $color-button;

    & > button {
        padding: .2em !important;
--- a/front/core/components/index.js
+++ b/front/core/components/index.js
@ -41,6 +41,7 @@ import './list';
 import './popover';
 import './popup';
 import './radio';
+import './slot';
 import './submit';
 import './table';
 import './td-editable';
--- a/front/core/components/list/style.scss
+++ b/front/core/components/list/style.scss
@ -1,33 +1,95 @@
@import "./effects";
+/*
+ul.menu {
+    list-style-type: none;
+    padding: 0;
+    padding-top: $spacing-md;
+    margin: 0;
+    font-size: inherit;

+    & > li > a {
+        @extend %clickable;
+        display: block;
+        color: inherit;
+        padding: .6em 2em;
+    }
+}
+*/
+
+vn-list,
 .vn-list {
+    display: block;
    max-width: $width-sm;
    margin: 0 auto;
+    padding: 0;
+    list-style-type: none;

-    a.vn-list-item {
-        @extend %clickable;
+    vn-list,
+    .vn-list {
+        vn-item,
+        .vn-item {
+            padding-left: $spacing-lg;
        }
-    .vn-list-item {
+    }
+    &.separated {
+        vn-item,
+        .vn-item {
            border-bottom: $border-thin-light;
-        display: block;
-        text-decoration: none;
-        color: inherit;
-    
-        & > vn-horizontal {
            padding: $spacing-md;
        
-            & > vn-one {
-                overflow: hidden;
+            &:last-child {
+                border-bottom: none;
            }
-            & > .buttons {
+        }
+    }
+}
+
+vn-item,
+.vn-item {
+    @extend %clickable;
+    display: flex;
+    align-items: center;
+    color: inherit;
+    padding: $spacing-sm $spacing-md;
+    text-decoration: none;
+    min-height: 40px;
+    box-sizing: border-box;
+
+    &.separated {
+        border-bottom: $border-thin-light;
+    
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+    &.active {
+        @extend %active;
+    }
+    & > vn-item-section {
+        overflow: hidden;
+        flex: 1;
+
+        &[avatar] {
+            display: flex;
+            flex: none;
+            align-items: center;
+            margin-right: $spacing-md;
+
+            & > .vn-icon {
+                font-size: 1.2em;
+            }
+        }
+        &[side] {
+            display: flex;
+            flex: none;
            align-items: center;

-                vn-icon-button {
+            & > .vn-button {
                opacity: .4;
                margin-left: .5em;
                transition: opacity 250ms ease-out;
                padding: 0;
-                    font-size: 1.2em;
+                font-size: 1.05em;

                &:hover {
                    opacity: 1;
@ -36,10 +98,5 @@
        }
    }
 }
-    vn-empty-rows {
-        display: block;
-        text-align: center;
-        padding: 1.5em;
-        box-sizing: border-box;
-    }
-}
+
+
--- a/front/core/components/popup/index.js
+++ b/front/core/components/popup/index.js
@ -40,6 +40,11 @@ export default class Popup extends Component {
        if (this.shown) return;
        this._shown = true;

+        if (this.closeTimeout) {
+            this.$timeout.cancel(this.closeTimeout);
+            this.onClose();
+        }
+
        let linkFn = this.$compile(this.template);
        this.$contentScope = this.$.$new();
        this.popup = linkFn(this.$contentScope, null,
@ -60,9 +65,9 @@ export default class Popup extends Component {
        this.deregisterCallback = this.$transitions.onStart({},
            () => this.hide());

-        this.$timeout.cancel(this.transitionTimeout);
-        this.transitionTimeout = this.$timeout(() => {
-            this.transitionTimeout = null;
+        this.$timeout.cancel(this.showTimeout);
+        this.showTimeout = this.$timeout(() => {
+            this.showTimeout = null;
            classList.add('shown');
        }, 10);

@ -78,15 +83,13 @@ export default class Popup extends Component {
        this.document.removeEventListener('keydown', this.keyDownHandler);
        this.keyDownHandler = null;

-        if (this.deregisterCallback) {
        this.deregisterCallback();
        this.deregisterCallback = null;
-        }

        this.popup.classList.remove('shown');

-        this.$timeout.cancel(this.transitionTimeout);
-        this.transitionTimeout = this.$timeout(
+        this.$timeout.cancel(this.closeTimeout);
+        this.closeTimeout = this.$timeout(
            () => this.onClose(), 200);

        this.lastEvent = null;
@ -95,7 +98,7 @@ export default class Popup extends Component {
    }

    onClose() {
-        this.transitionTimeout = null;
+        this.closeTimeout = null;
        this.document.body.removeChild(this.popup);

        this.$contentScope.$destroy();
--- a/front/core/components/radio/style.scss
+++ b/front/core/components/radio/style.scss
@ -9,7 +9,7 @@
        }
    }
    &.checked > .btn {
-        border-color: $color-main;
+        border-color: $color-button;

        & > .mark {
            position: absolute;
@ -19,7 +19,7 @@
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
-            background-color: $color-main;
+            background-color: $color-button;
        }
    }
    &.disabled.checked > .btn > .mark {
--- a/front/core/components/range/style.scss
+++ b/front/core/components/range/style.scss
@ -5,7 +5,7 @@
        -webkit-appearance: none;
        margin-top: -5px;
        border-radius: 50%;
-        background: $color-main;
+        background: $color-button;
        border: none;
        height: 12px;
        width: 12px;
@ -15,7 +15,7 @@
        transition-timing-function: ease-out;
    }
    &:focus::#{$thumb-selector} {
-        box-shadow: 0 0 0 10px rgba($color-main, .2);
+        box-shadow: 0 0 0 10px rgba($color-button, .2);
    }
    &:active::#{$thumb-selector} {
        transform: scale(1.5);
@ -29,7 +29,7 @@
        width: 100%;
        height: 3px;
        cursor: inherit;
-        background: $color-secondary;
+        background: $color-marginal;
        border-radius: 2px;
        border: none;
    }
@ -40,7 +40,7 @@
        font-size: 12px;

        &.main {
-            color: $color-main;
+            color: $color-button;
        }
        &.min-label {
            float: left;
--- a/front/core/components/searchbar/searchbar.html
+++ b/front/core/components/searchbar/searchbar.html
@ -1,14 +1,26 @@
 <form ng-submit="$ctrl.onSubmit()">
    <vn-textfield
-        class="dense"
+        class="dense standout"
        placeholder="{{::'Search' | translate}}"
        ng-model="$ctrl.searchString">
        <prepend>
            <vn-icon
                icon="search"
-                ng-click="$ctrl.clearFilter(); $ctrl.onSubmit()"
+                ng-click="$ctrl.onSubmit()"
                pointer>
            </vn-icon>
+            <div class="search-params">
+                <span
+                    ng-repeat="param in $ctrl.params"
+                    class="search-param"
+                    title="{{param.chip}}">
+                    <vn-icon
+                        icon="close"
+                        ng-click="$ctrl.removeParam($index)">
+                    </vn-icon>
+                    {{param.chip}}
+                </span>
+            </div>
        </prepend>
        <append>
            <vn-icon
--- a/front/core/components/searchbar/searchbar.js
+++ b/front/core/components/searchbar/searchbar.js
@ -1,7 +1,8 @@
 import ngModule from '../../module';
 import Component from '../../lib/component';
-import './style.scss';
 import {buildFilter} from 'vn-loopback/util/filter';
+import focus from '../../lib/focus';
+import './style.scss';

 /**
 * An input specialized to perform searches, it allows to use a panel
@ -11,56 +12,48 @@ import {buildFilter} from 'vn-loopback/util/filter';
 * by calling the exprBuilder function for each non-null parameter.
 *
 * @property {Object} filter  A key-value object with filter parameters
- * @property {Function} onSearch Function to call when search is submited
 * @property {SearchPanel} panel The panel used for advanced searches
- * @property {CrudModel} model The model used for searching
- * @property {Function} exprBuilder If defined, is used to build each non-null param expresion
 */
 export default class Controller extends Component {
-    constructor($element, $scope, $compile, $state, $transitions) {
-        super($element, $scope);
-        this.$element = $element;
-        this.$compile = $compile;
-        this.$state = $state;
-        this.$ = $scope;
-        let criteria = {to: this.$state.current.name};
-        this.deregisterCallback = $transitions.onSuccess(criteria,
-            () => this.onStateChange());
+    constructor($element, $) {
+        super($element, $);
+        this.searchState = '.';

-        this._filter = null;
-        this.autoLoad = false;
+        let criteria = {};
+        this.deregisterCallback = this.$transitions.onSuccess(
+            criteria, () => this.onStateChange());
    }

    $postLink() {
-        if (this.filter === null)
        this.onStateChange();
    }

-    set filter(value) {
-        this._filter = value;
-        this.$state.go('.', {q: JSON.stringify(value)}, {location: 'replace'});
-    }
-
-    get filter() {
-        return this._filter;
-    }
-
-    onStateChange() {
-        this._filter = null;
-
-        if (this.$state.params.q) {
-            try {
-                this._filter = JSON.parse(this.$state.params.q);
-            } catch (e) {
-                console.error(e);
-            }
-        }
-
-        this.doSearch();
+    $onDestroy() {
+        this.deregisterCallback();
    }

    get shownFilter() {
-        return this._filter != null ? this._filter : this.suggestedFilter;
+        return this.filter != null
+            ? this.filter
+            : this.suggestedFilter;
+    }
+
+    onStateChange() {
+        if (this.$state.is(this.searchState)) {
+            if (this.$state.params.q) {
+                try {
+                    this.filter = JSON.parse(this.$state.params.q);
+                } catch (e) {
+                    console.error(e);
+                }
+            } else
+                this.filter = null;
+
+            focus(this.element.querySelector('vn-textfield input'));
+        } else
+            this.filter = null;
+
+        this.toBar(this.filter);
    }

    openPanel(event) {
@ -88,21 +81,143 @@ export default class Controller extends Component {
    onPanelSubmit(filter) {
        this.$.popover.hide();
        filter = compact(filter);
-        this.filter = filter != null ? filter : {};
-
-        let element = this.element.querySelector('vn-textfield input');
-        element.select();
-        element.focus();
+        filter = filter != null ? filter : {};
+        this.doSearch(filter);
    }

    onSubmit() {
-        this.filter = this.getObjectFromString(this.searchString);
+        this.doSearch(this.fromBar());
+    }
+
+    removeParam(index) {
+        this.params.splice(index, 1);
+        this.doSearch(this.fromBar());
+    }
+
+    get searchString() {
+        return this._searchString;
+    }
+
+    set searchString(value) {
+        this._searchString = value;
+        if (value == null) this.params = [];
+    }
+
+    doSearch(filter) {
+        let opts = this.$state.is(this.searchState)
+            ? {location: 'replace'} : null;
+        this.$state.go(this.searchState,
+            {q: JSON.stringify(filter)}, opts);
+    }
+
+    fromBar() {
+        let filter = {};
+
+        if (this.searchString)
+            filter.search = this.searchString;
+
+        if (this.params) {
+            for (let param of this.params)
+                filter[param.key] = param.value;
+        }
+
+        return filter;
+    }
+
+    toBar(filter) {
+        this.params = [];
+        this.searchString = filter && filter.search;
+        if (!filter) return;
+
+        let keys = Object.keys(filter);
+        keys.forEach(key => {
+            if (key == 'search') return;
+            let value = filter[key];
+            let chip;
+
+            if (typeof value == 'string'
+            && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value))
+                value = new Date(value);
+
+            switch (typeof value) {
+            case 'boolean':
+                chip = `${value ? '' : 'not '}${key}`;
+                break;
+            case 'number':
+            case 'string':
+                chip = `${key}: ${value}`;
+                break;
+            default:
+                if (value instanceof Date) {
+                    let format = 'yyyy-MM-dd';
+                    if (value.getHours() || value.getMinutes())
+                        format += ' HH:mm';
+                    chip = `${key}: ${this.$filter('date')(value, format)}`;
+                } else
+                    chip = key;
+            }
+
+            this.params.push({chip, key, value});
+        });
+    }
+}
+
+ngModule.vnComponent('vnSearchbar', {
+    controller: Controller,
+    template: require('./searchbar.html'),
+    bindings: {
+        searchState: '@?',
+        filter: '<?',
+        suggestedFilter: '<?',
+        panel: '@',
+        info: '@?'
+    }
+});
+
+/**
+ * @property {CrudModel} model The model used for searching
+ * @property {Function} exprBuilder If defined, is used to build each non-null param expresion
+ * @property {Function} onSearch Function to call when search is submited
+ */
+class AutoSearch {
+    constructor($state, $transitions) {
+        this.$state = $state;
+        this.$transitions = $transitions;
+
+        let criteria = {to: this.$state.current.name};
+        this.deregisterCallback = this.$transitions.onSuccess(criteria,
+            () => this.onStateChange());
+
+        this.fetchFilter();
+    }
+
+    $postLink() {
+        if (this.filter !== null)
+            this.doSearch();
+    }
+
+    $onDestroy() {
+        this.deregisterCallback();
+    }
+
+    fetchFilter() {
+        if (this.$state.params.q) {
+            try {
+                this.filter = JSON.parse(this.$state.params.q);
+            } catch (e) {
+                console.error(e);
+            }
+        } else
+            this.filter = null;
+    }
+
+    onStateChange() {
+        this.fetchFilter();
+        this.doSearch();
    }

    doSearch() {
-        this.searchString = this.getStringFromObject(this.shownFilter);
-
-        let filter = this._filter;
+        let filter = this.filter;
        if (filter == null && this.autoload)
            filter = {};

@ -141,94 +256,17 @@ export default class Controller extends Component {
    exprBuilder(param, value) {
        return {[param]: value};
    }
-
-    /**
-     * Finds pattern key:value or key:(extra value) and passes it to object.
-     *
-     * @param {String} searchString The search string
-     * @return {Object} The parsed object
-     */
-    getObjectFromString(searchString) {
-        let result = {};
-        if (searchString) {
-            let regex = /((([\w_]+):([\w_]+))|([\w_]+):\(([\w_ ]+)\))/gi;
-            let findPattern = searchString.match(regex);
-            let remnantString = searchString.replace(regex, '').trim();
-            if (findPattern) {
-                for (let i = 0; i < findPattern.length; i++) {
-                    let aux = findPattern[i].split(':');
-                    let property = aux[0];
-                    let value = aux[1].replace(/\(|\)/g, '');
-                    result[property] = value.trim();
-                }
-            }
-            if (remnantString)
-                result.search = remnantString;
-        }
-        return result;
 }
+AutoSearch.$inject = ['$state', '$transitions'];

-    /**
-     * Passes an object to pattern key:value or key:(extra value).
-     *
-     * @param {Object} searchObject The search object
-     * @return {String} The passed string
-     */
-    getStringFromObject(searchObject) {
-        let search = [];
-
-        if (searchObject) {
-            let keys = Object.keys(searchObject);
-            keys.forEach(key => {
-                if (key == 'search') return;
-
-                let value = searchObject[key];
-                let valueString;
-
-                if (typeof value === 'string' && value.indexOf(' ') !== -1)
-                    valueString = `(${value})`;
-                else if (value instanceof Date)
-                    valueString = value.toJSON();
-                else {
-                    switch (typeof value) {
-                    case 'number':
-                    case 'string':
-                    case 'boolean':
-                        valueString = `${value}`;
-                    }
-                }
-
-                if (valueString)
-                    search.push(`${key}:${valueString}`);
-            });
-
-            if (searchObject.search)
-                search.unshift(searchObject.search);
-        }
-
-        return search.length ? search.join(' ') : '';
-    }
-
-    $onDestroy() {
-        this.deregisterCallback();
-    }
-}
-Controller.$inject = ['$element', '$scope', '$compile', '$state', '$transitions'];
-
-ngModule.component('vnSearchbar', {
-    template: require('./searchbar.html'),
+ngModule.vnComponent('vnAutoSearch', {
+    controller: AutoSearch,
    bindings: {
-        filter: '<?',
-        suggestedFilter: '<?',
-        onSearch: '&?',
-        panel: '@',
        model: '<?',
+        onSearch: '&?',
        exprBuilder: '&?',
-        paramBuilder: '&?',
-        autoLoad: '<?',
-        info: '@?'
-    },
-    controller: Controller
+        paramBuilder: '&?'
+    }
 });

 /**
@ -251,7 +289,7 @@ function compact(obj) {
    } else if (typeof obj == 'object' && obj.constructor == Object) {
        let keys = Object.keys(obj);
        for (let key of keys) {
-            if (key.substr(0, 2) == '$$' || compact(obj[key]) === undefined)
+            if (key.charAt(0) == '$' || compact(obj[key]) === undefined)
                delete obj[key];
        }
        if (Object.keys(obj).length == 0)
--- a/front/core/components/searchbar/style.scss
+++ b/front/core/components/searchbar/style.scss
@ -2,7 +2,40 @@

 vn-searchbar {
    display: block;
-    width: 100%;
+    max-width: 30em;
+    margin: 0 auto;
+
+    .search-params {
+        flex: 1;
+        margin: .05em 0;
+        overflow: visible;
+        display: flex;
+        max-width: 16em;
+
+        & > .search-param {
+            color: rgba(0, 0, 0, .6);
+            background-color: rgba(0, 0, 0, .1);
+            padding: .1em .4em;
+            margin-left: .2em;
+            display: inline-block;
+            border-radius: .8em;
+            max-width: 18em;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            & > vn-icon {
+                font-size: inherit;
+                vertical-align: middle;
+                cursor: pointer;
+                border-radius: 50%;
+
+                &:hover {
+                    color: rgba(0, 0, 0, .8);
+                }
+            }
+        }
+    }
 }

 .search-panel {
--- a/front/core/components/slot/index.js
+++ b/front/core/components/slot/index.js
@ -0,0 +1,81 @@
+import ngModule from '../../module';
+import './portal';
+import './style.scss';
+
+export class Slot {
+    constructor($element, vnSlotService) {
+        this.$element = $element;
+        this.vnSlotService = vnSlotService;
+        this.$content = null;
+    }
+
+    $onDestroy() {
+        this.unregister();
+    }
+
+    set name(value) {
+        this.unregister();
+        this._name = value;
+        this.vnSlotService.slots[value] = this;
+    }
+
+    get name() {
+        return this._name;
+    }
+
+    unregister() {
+        if (this.name)
+            this.vnSlotService.slots[this.name] = undefined;
+    }
+
+    setContent($content) {
+        if (this.$content) {
+            this.$content.detach();
+            this.$content = null;
+        }
+
+        this.$content = $content;
+        if (this.$content) this.$element.append($content);
+        this.$element[0].style.display = $content ? 'block' : 'none';
+    }
+}
+Slot.$inject = ['$element', 'vnSlotService'];
+
+ngModule.vnComponent('vnSlot', {
+    controller: Slot,
+    bindings: {
+        name: '@?'
+    }
+});
+
+export class SlotService {
+    constructor() {
+        this.stacks = {};
+        this.slots = {};
+    }
+
+    push(slot, $transclude) {
+        if (!this.stacks[slot]) this.stacks[slot] = [];
+        this.stacks[slot].unshift($transclude);
+        this.refreshContent(slot);
+    }
+
+    pop(slot) {
+        let $content = this.stacks[slot].shift();
+        this.refreshContent(slot);
+        if ($content && typeof $content == 'object')
+            $content.remove();
+    }
+
+    refreshContent(slot) {
+        if (!this.slots[slot]) return;
+        let $content = this.stacks[slot][0];
+        if (typeof $content == 'function') {
+            $content(clone => {
+                $content = this.stacks[slot][0] = clone;
+            });
+        }
+        this.slots[slot].setContent($content);
+    }
+}
+ngModule.service('vnSlotService', SlotService);
--- a/front/core/components/slot/portal.js
+++ b/front/core/components/slot/portal.js
@ -0,0 +1,28 @@
+import ngModule from '../../module';
+
+/**
+ * Component used to fill slots with content.
+ */
+export default class Portal {
+    constructor($transclude, vnSlotService) {
+        this.$transclude = $transclude;
+        this.vnSlotService = vnSlotService;
+    }
+
+    $postLink() {
+        this.vnSlotService.push(this.slot, this.$transclude);
+    }
+
+    $onDestroy() {
+        this.vnSlotService.pop(this.slot);
+    }
+}
+Portal.$inject = ['$transclude', 'vnSlotService'];
+
+ngModule.component('vnPortal', {
+    controller: Portal,
+    transclude: true,
+    bindings: {
+        slot: '@'
+    }
+});
--- a/front/core/components/slot/style.scss
+++ b/front/core/components/slot/style.scss
@ -0,0 +1,3 @@
+vn-slot {
+    display: block;
+}
--- a/front/core/components/spinner/spinner.html
+++ b/front/core/components/spinner/spinner.html
@ -6,6 +6,7 @@
        cy="50"
        r="20"
        fill="none"
+        stroke="currentColor"
        stroke-miterlimit="10">
    </circle>
    </svg>
--- a/front/core/components/spinner/style.scss
+++ b/front/core/components/spinner/style.scss
@ -4,6 +4,7 @@ vn-spinner {
    display: inline-block;
    min-height: 28px;
    min-width: 28px;
+    color: $color-main;

    & > .loader {
        position: relative;
@ -29,7 +30,6 @@ vn-spinner {
            margin: auto;

            & > .path {
-                stroke: $color-main;
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
                stroke-linecap: square;
--- a/front/core/components/table/style.scss
+++ b/front/core/components/table/style.scss
@ -3,8 +3,8 @@

 vn-table {
    display: block;
-    overflow: auto;
    width: 100%;
+    // overflow: auto;
 }
 .vn-table {
    width: 100%;
--- a/front/core/components/toggle/style.scss
+++ b/front/core/components/toggle/style.scss
@ -40,10 +40,10 @@
        background-color: rgba(0, 0, 0, .1);
    }
    &.checked > .btn {
-        border-color: $color-main;
+        border-color: $color-button;

        & > .focus-mark {
-            background-color: rgba($color-main, .15);
+            background-color: rgba($color-button, .15);
        }
    }
    &.disabled {
--- a/front/core/components/wday-picker/style.scss
+++ b/front/core/components/wday-picker/style.scss
@ -20,7 +20,7 @@
        background-color: rgba(0, 0, 0, .05);

        &.marked {
-            background: $color-main;
+            background: $color-button;
            color: $color-font-dark;
        }
    }
--- a/front/core/directives/id.js
+++ b/front/core/directives/id.js
@ -12,14 +12,23 @@ export function directive() {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            let id = kebabToCamel($attrs.vnId);
-            let $ctrl = $element[0].$ctrl
-                ? $element[0].$ctrl
-                : $element.controller($element[0].tagName.toLowerCase());

            if (!id)
                throw new Error(`vnId: Attribute can't be null`);

-            $scope[id] = $ctrl || $element[0];
+            let $ctrl = $element[0].$ctrl
+                ? $element[0].$ctrl
+                : $element.controller($element[0].tagName.toLowerCase());
+            let ctrl = $ctrl || $element[0];
+
+            $scope[id] = ctrl;
+
+            if (!$scope.hasOwnProperty('$ctrl')) {
+                while ($scope && !$scope.hasOwnProperty('$ctrl'))
+                    $scope = Object.getPrototypeOf($scope);
+
+                if ($scope) $scope[id] = ctrl;
+            }
        }
    };
 }
--- a/front/core/lib/component.js
+++ b/front/core/lib/component.js
@ -107,6 +107,7 @@ function runFn(
    $compile,
    $filter,
    $interpolate,
+    $window,
    vnApp) {
    Object.assign(Component.prototype, {
        $translate,
@ -119,6 +120,7 @@ function runFn(
        $compile,
        $filter,
        $interpolate,
+        $window,
        vnApp
    });
 }
@ -133,6 +135,7 @@ runFn.$inject = [
    '$compile',
    '$filter',
    '$interpolate',
+    '$window',
    'vnApp'
 ];

--- a/front/core/lib/focus.js
+++ b/front/core/lib/focus.js
@ -0,0 +1,16 @@
+
+import isMobile from './is-mobile';
+
+export default function focus(element) {
+    if (isMobile) return;
+    setTimeout(() => element.focus(), 10);
+}
+
+export function select(element) {
+    if (isMobile) return;
+    setTimeout(() => {
+        element.focus();
+        if (element.select)
+            element.select();
+    }, 10);
+}
--- a/front/core/lib/index.js
+++ b/front/core/lib/index.js
@ -2,8 +2,9 @@ import './module-loader';
 import './crud';
 import './copy';
 import './equals';
+import './focus';
+import './get-main-route';
 import './modified';
 import './key-codes';
 import './http-error';
 import './user-error';
-import './get-main-route';
--- a/front/core/module.js
+++ b/front/core/module.js
@ -1,9 +1,6 @@
 import {ng, ngDeps} from './vendor';
 import {camelToKebab} from './lib/string';

-const ngModule = ng.module('vnCore', ngDeps);
-export default ngModule;
-
 /**
 * Acts like native Module.component() function but merging component options
 * with parent component options. This method establishes the $options property
@ -17,7 +14,7 @@ export default ngModule;
 * @param {Object} options The component options
 * @return {angularModule} The same angular module
 */
-ngModule.vnComponent = function(name, options) {
+function vnComponent(name, options) {
    let controller = options.controller;
    let parent = Object.getPrototypeOf(controller);
    let parentOptions = parent.$options || {};
@ -57,10 +54,21 @@ ngModule.vnComponent = function(name, options) {
    controller.$classNames = classNames;

    return this.component(name, mergedOptions);
+}
+
+const ngModuleFn = ng.module;
+
+ng.module = function(...args) {
+    let ngModule = ngModuleFn.apply(this, args);
+    ngModule.vnComponent = vnComponent;
+    return ngModule;
 };

-config.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];
-export function config($translateProvider, $translatePartialLoaderProvider) {
+const ngModule = ng.module('vnCore', ngDeps);
+export default ngModule;
+
+config.$inject = ['$translateProvider', '$translatePartialLoaderProvider', '$animateProvider'];
+export function config($translateProvider, $translatePartialLoaderProvider, $animateProvider) {
    // For CSS browser targeting
    document.documentElement.setAttribute('data-browser', navigator.userAgent);

@ -91,5 +99,8 @@ export function config($translateProvider, $translatePartialLoaderProvider) {
                return langAliases[locale];
            return fallbackLang;
        });
+
+    $animateProvider.customFilter(
+        node => node.tagName == 'UI-VIEW');
 }
 ngModule.config(config);
--- a/front/core/services/interceptor.js
+++ b/front/core/services/interceptor.js
@ -13,11 +13,15 @@ function interceptor($q, vnApp, vnToken, $translate) {
            vnApp.pushLoader();

            if (config.url.charAt(0) !== '/' && apiPath)
-                config.url = `${apiPath}/${config.url}`;
+                config.url = `${apiPath}${config.url}`;
            if (vnToken.token)
                config.headers.Authorization = vnToken.token;
            if ($translate.use())
                config.headers['Accept-Language'] = $translate.use();
+            if (config.filter) {
+                if (!config.params) config.params = {};
+                config.params.filter = config.filter;
+            }

            return config;
        },
--- a/front/core/styles/global.scss
+++ b/front/core/styles/global.scss
@ -41,3 +41,7 @@ a {
    color: $color-font-link;
    text-decoration: none;
 }
+.ng-leave,
+.ng-enter {
+    transition: none;
+}
--- a/front/core/styles/variables.scss
+++ b/front/core/styles/variables.scss
@ -19,27 +19,36 @@ $spacing-xs: 4px;
 $spacing-sm: 8px;
 $spacing-md: 16px;
 $spacing-lg: 32px;
-$spacing-xl: 100px;
+$spacing-xl: 70px;

 // Light theme

-$color-header: #3d3d3d;
-$color-bg: #e5e5e5;
-$color-bg-dark: #3d3d3d;
+$color-primary: #f7931e;
+$color-secondary: $color-primary;
+
 $color-font: #222;
 $color-font-light: #555;
 $color-font-secondary: #9b9b9b;
 $color-font-dark: white;
-$color-font-bg: rgba(0, 0, 0, .7);
 $color-font-link: #005a9a;
-$color-active: #3d3d3d;
-$color-active-font: white;
+$color-font-bg: rgba(0, 0, 0, .7);
+$color-font-bg-marginal: rgba(0, 0, 0, .4);
+$color-font-bg-dark: rgba(255, 255, 255, .7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
+
+$color-header: darken($color-primary, 5%);
+$color-menu-header: #3d3d3d;
+$color-bg: #e5e5e5;
+$color-bg-dark: #3d3d3d;
+$color-active: $color-primary;
+$color-active-font: $color-font-dark;
 $color-bg-panel: white;
-$color-main: #f7931e;
-$color-secondary: #ccc;
+$color-main: $color-primary;
+$color-marginal: #ccc;
 $color-success: #a3d131;
 $color-notice: #32b1ce;
 $color-alert: #f42121;
+$color-button: $color-secondary;

 $color-spacer: rgba(0, 0, 0, .3);
 $color-spacer-light: rgba(0, 0, 0, .12);
@ -78,7 +87,7 @@ $color-active: #666;
 $color-active-font: white;
 $color-bg-panel: #3c3b3b;
 $color-main: #f7931e;
-$color-secondary: #ccc;
+$color-marginal: #ccc;
 $color-success: #a3d131;
 $color-notice: #32b1ce;
 $color-alert: #f42121;
--- a/front/core/vendor.js
+++ b/front/core/vendor.js
@ -2,6 +2,7 @@ import '@babel/polyfill';
 import * as ng from 'angular';
 export {ng};

+import 'angular-animate';
 import 'angular-translate';
 import 'angular-translate-loader-partial';
 import '@uirouter/angularjs';
@ -9,6 +10,7 @@ import 'mg-crud';
 import 'oclazyload';

 export const ngDeps = [
+    'ngAnimate',
    'pascalprecht.translate',
    'ui.router',
    'mgCrud',
--- a/front/package-lock.json
+++ b/front/package-lock.json
@ -31,6 +31,11 @@
      "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.5.tgz",
      "integrity": "sha512-760183yxtGzni740IBTieNuWLtPNAoMqvmC0Z62UoU0I3nqk+VJuO3JbQAXOyvo3Oy/ZsdNQwrSTh/B0OQZjNw=="
    },
+    "angular-animate": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.7.8.tgz",
+      "integrity": "sha512-bINtzizq7TbJzfVrDpwLfTxVl0Qd7fRNWFb5jKYI1vaFZobQNX/QONXlLow6ySsDbZ6eLECycB7mvWtfh1YYaw=="
+    },
    "angular-translate": {
      "version": "2.18.1",
      "resolved": "https://registry.npmjs.org/angular-translate/-/angular-translate-2.18.1.tgz",
--- a/front/package.json
+++ b/front/package.json
@ -12,6 +12,7 @@
 		"@babel/polyfill": "^7.2.5",
 		"@uirouter/angularjs": "^1.0.20",
 		"angular": "^1.7.5",
+		"angular-animate": "^1.7.8",
 		"angular-translate": "^2.18.1",
 		"angular-translate-loader-partial": "^2.18.1",
 		"js-yaml": "^3.13.1",
--- a/front/salix/components/app/app.html
+++ b/front/salix/components/app/app.html
@ -1,29 +1,4 @@
-<vn-topbar ng-if="$ctrl.showTopbar">
-    <a class="logo" ui-sref="home" title="{{'Home' | translate}}">
-        <img src="./logo.svg" alt="Logo"></img>
-    </a>
-    <vn-icon
-        icon="menu"
-        class="show-menu"
-        ng-if="$ctrl.leftMenu"
-        ng-click="$ctrl.leftMenu.show()">
-    </vn-icon>
-    <div class="main-title" translate>
-        {{$ctrl.$state.current.description}}
-    </div>
-    <vn-spinner enable="$ctrl.vnApp.loading"></vn-spinner>
-    <vn-main-menu></vn-main-menu>
-    <vn-icon
-        icon="menu"
-        class="show-menu"
-        ng-if="$ctrl.rightMenu"
-        ng-click="$ctrl.rightMenu.show()">
-    </vn-icon>
-</vn-topbar>
-<div ui-view
-    class="main-view"
-    ng-class="{padding: $ctrl.showTopbar}">
-    <vn-home></vn-home>
-</div>
+<vn-layout ng-if="$ctrl.showLayout"></vn-layout>
+<ui-view name="login"></ui-view>
 <vn-snackbar vn-id="snackbar"></vn-snackbar>
 <vn-debug-info></vn-debug-info>
--- a/front/salix/components/app/app.js
+++ b/front/salix/components/app/app.js
@ -1,5 +1,6 @@
 import ngModule from '../../module';
 import './style.scss';
+import Component from 'core/lib/component';

 /**
 * The main graphical application component.
@ -7,28 +8,21 @@ import './style.scss';
 * @property {SideMenu} leftMenu The left menu, if it's present
 * @property {SideMenu} rightMenu The left menu, if it's present
 */
-export default class App {
-    constructor($, $state, vnApp) {
-        Object.assign(this, {
-            $,
-            $state,
-            vnApp
-        });
-    }
-
+export default class App extends Component {
    $postLink() {
        this.vnApp.logger = this;
    }

-    $onDestroy() {
-        this.vnApp.logger = null;
-    }
-
-    get showTopbar() {
+    get showLayout() {
        let state = this.$state.current.name;
        return state && state != 'login';
    }

+    $onDestroy() {
+        this.deregisterCallback();
+        this.vnApp.logger = null;
+    }
+
    showMessage(message) {
        this.$.snackbar.show({message: message});
    }
@ -41,9 +35,8 @@ export default class App {
        this.$.snackbar.showError({message: message});
    }
 }
-App.$inject = ['$scope', '$state', 'vnApp'];

-ngModule.component('vnApp', {
+ngModule.vnComponent('vnApp', {
    template: require('./app.html'),
    controller: App
 });
--- a/front/salix/components/app/style.scss
+++ b/front/salix/components/app/style.scss
@ -1,99 +1,21 @@
@import "variables";

 vn-app {
+    display: block;
    height: inherit;
+
+    ui-view {
        display: block;
-
-    & > vn-topbar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 10;
-        box-shadow: 0 .1em .2em $color-shadow;
-        height: $topbar-height;
-        padding: .4em;
-
-        & > header {
-            & > * {
-                padding: .3em;
-            }
-            & > .logo > img {
-                height: 1.4em;
-                display: block;
-            }
-            & > .show-menu {
-                display: none;
-                font-size: 1.8em;
-                cursor: pointer;
-
-                &:hover {
-                    color: $color-main;
-                }
-            }
-            & > .main-title {
-                font-size: 1.6em;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-                padding-left: .6em;
-            }
-            & > vn-spinner {
-                padding: 0 .4em;
-            }
-            & > vn-main-menu {
-                flex: 1;
-            }
-        }
-    }
-    & > .main-view {
        box-sizing: border-box;
-        height: inherit;

-        &.padding {
-            padding-top: $topbar-height;
-        }
-        .content-block {
-            box-sizing: border-box;
-            padding: $spacing-md;
-            height: inherit;
-        }
-        vn-main-block {
-            display: block;
-            margin: 0 auto;
-            padding-left: $menu-width;
-            height: 100%
-                    
-        }
-        .main-with-right-menu {
-            padding-right: $menu-width;
-        
-            @media screen and (max-width: 800px) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    @media screen and (max-width: $mobile-width) {
-        & > vn-topbar > header {
-            & > .logo {
-                display: none;
-            }
-            & > .show-menu {
-                display: block;
-            }
-        }
-        & > .main-view {
-            .content-block {
-                margin-left: 0;
-                margin-right: 0;
-            }
-            vn-main-block {
-                padding-left: 0;
-            }
-            .main-with-right-menu {
-                padding-right: 0;
+        &.ng-enter {
+            transition: all 200ms ease-out;
+            transform: translate3d(-2em, 0, 0);
+            opacity: 0;
        }
+        &.ng-enter.ng-enter-active {
+            transform: translate3d(0, 0, 0);
+            opacity: 1;
        }
    }
 }
--- a/front/salix/components/descriptor/style.scss
+++ b/front/salix/components/descriptor/style.scss
@ -50,7 +50,7 @@
    
            & > vn-icon {
                padding: $spacing-sm;
-                color: $color-secondary;
+                color: $color-marginal;
                font-size: 1.5em;
    
                &.bright {
--- a/front/salix/components/home/home.html
+++ b/front/salix/components/home/home.html
@ -1,4 +1,4 @@
-<div ng-if="$ctrl.$state.current.name === 'home'">
+<div>
    <div class="modules">
    <a
        ng-repeat="mod in ::$ctrl.modules"
--- a/front/salix/components/home/style.scss
+++ b/front/salix/components/home/style.scss
@ -23,7 +23,7 @@ vn-home {
                @extend %clickable-light;
                overflow:hidden;
                border-radius: 6px;
-                background-color: $color-main;
+                background-color: $color-button;
                color: $color-font-dark;
                display: flex;
                flex-direction: column;
--- a/front/salix/components/index.js
+++ b/front/salix/components/index.js
@ -2,10 +2,13 @@ import './app/app';
 import './background/background';
 import './descriptor';
 import './home/home';
+import './layout';
 import './left-menu/left-menu';
 import './login/login';
 import './main-menu/main-menu';
-import './topbar/topbar';
+import './module-card';
+import './module-main';
 import './side-menu/side-menu';
 import './summary';
+import './topbar/topbar';
 import './user-popover';
--- a/front/salix/components/layout/index.html
+++ b/front/salix/components/layout/index.html
@ -0,0 +1,69 @@
+<vn-topbar>
+    <vn-icon-button
+        icon="menu"
+        class="show-menu"
+        ng-if="$ctrl.leftMenu"
+        ng-click="$ctrl.leftMenu.show()">
+    </vn-icon-button>
+    <div class="start">
+        <div class="main-title" translate>
+            {{$ctrl.$state.current.description}}
+        </div>
+        <vn-spinner
+            ng-if="$ctrl.vnApp.loading"
+            enable="true">
+        </vn-spinner>
+    </div>
+    <vn-slot name="topbar"></vn-slot>
+    <div class="end">
+        <vn-icon-button
+            id="apps"
+            icon="apps"
+            vn-popover="apps-menu"
+            translate-attr="{title: 'Applications'}">
+        </vn-icon-button>
+        <vn-icon-button
+            icon="menu"
+            class="show-menu"
+            ng-if="$ctrl.rightMenu"
+            ng-click="$ctrl.rightMenu.show()">
+        </vn-icon-button>
+    </div>
+    <vn-menu vn-id="apps-menu">
+        <ul class="modules-menu vn-pa-sm">
+            <li
+                ng-repeat="mod in ::$ctrl.modules"
+                ui-sref="{{::mod.route.state}}">
+                <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
+                <span translate>{{::mod.name}}</span>
+            </li>
+        </ul>
+    </vn-menu>
+</vn-topbar>
+<vn-side-menu side="left">
+    <div class="header">
+        <a class="logo" ui-sref="home" title="{{'Home' | translate}}">
+            <img src="./logo.svg" alt="Logo"></img>
+        </a>
+        <vn-main-menu
+            class="vn-pt-md">
+        </vn-main-menu>
+    </div>
+    <vn-slot name="menu"></vn-slot>
+</vn-side-menu>
+<vn-portal slot="menu">
+    <vn-list class="vn-py-md">
+    <a
+        ng-repeat="mod in ::$ctrl.modules"
+        class="vn-item"
+        ui-sref="{{::mod.route.state}}">
+        <vn-item-section avatar>
+            <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
+        </vn-item-section>
+        <vn-item-section translate>
+            {{::mod.name}}
+        </vn-item-section>
+    </a>
+    </vn-list>
+</vn-portal>
+<ui-view class="main-view"></ui-view>
--- a/front/salix/components/layout/index.js
+++ b/front/salix/components/layout/index.js
@ -0,0 +1,19 @@
+import ngModule from '../../module';
+import Component from 'core/lib/component';
+import './style.scss';
+
+export class Layout extends Component {
+    constructor($element, $, vnModules) {
+        super($element, $);
+        this.modules = vnModules.get();
+    }
+}
+Layout.$inject = ['$element', '$scope', 'vnModules'];
+
+ngModule.component('vnLayout', {
+    template: require('./index.html'),
+    controller: Layout,
+    require: {
+        app: '^vnApp'
+    }
+});
--- a/front/salix/components/layout/logo.svg
+++ b/front/salix/components/layout/logo.svg
--- a/front/salix/components/layout/style.scss
+++ b/front/salix/components/layout/style.scss
@ -0,0 +1,121 @@
+@import "variables";
+
+vn-layout {
+    & > vn-topbar {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 10;
+        box-shadow: 0 .1em .2em $color-shadow;
+        height: $topbar-height;
+        padding: 0 1em;
+        justify-content: space-between;
+
+        & > .start {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            padding-right: 1em;
+
+            & > .main-title {
+                font-size: 1.6em;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                padding-left: .4em;
+            }
+            & > vn-spinner {
+                padding: 0 .4em;
+                color: $color-font-dark;
+            }
+        }
+        & > vn-slot {
+            flex: auto;
+        }
+        & > .end {
+            flex: 1;
+            padding-left: 1em;
+            align-items: center;
+            justify-content: flex-end;
+            display: flex;
+        }
+        .vn-button {
+            color: inherit;
+            font-size: 1.05em;
+            padding: 0;
+        }
+        .show-menu {
+            display: none;
+        }
+    }
+    & > vn-side-menu > .menu {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        & > .header {
+            background-color: $color-menu-header;
+            padding: $spacing-md;
+            color: $color-font-dark;
+
+            & > .logo > img {
+                width: 100%;
+                display: block;
+            }
+        }
+        & > vn-slot {
+            flex: 1;
+            overflow: auto;
+        }
+    }
+    &.left-menu {
+        & > vn-topbar {
+            left: $menu-width;
+        }
+        & > .main-view {
+            padding-left: $menu-width;
+        }
+    }
+    &.right-menu {
+        & > .main-view {
+            padding-right: $menu-width;
+        }
+    }
+    & > .main-view {
+        padding-top: $topbar-height;
+    }
+    ui-view {
+        height: inherit;
+
+        & > * {
+            display: block;
+            padding: $spacing-md;
+        }
+    }
+    @media screen and (max-width: $mobile-width) {
+        & > vn-topbar {
+            & > .show-menu {
+                display: block;
+            }
+        }
+        &.left-menu {
+            & > vn-topbar {
+                left: 0;
+            }
+            & > .main-view {
+                padding-left: 0;
+            }
+        }
+        &.right-menu {
+            & > .main-view {
+                padding-right: 0;
+            }
+        }
+        ui-view > * {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}
--- a/front/salix/components/left-menu/left-menu.html
+++ b/front/salix/components/left-menu/left-menu.html
@ -1,17 +1,30 @@
-<ul ng-if="::$ctrl.items.length > 0" class="vn-py-md">
+<ul class="vn-list" ng-if="::$ctrl.items.length > 0">
    <li ng-repeat="item in ::$ctrl.items" name="{{::item.description}}">
        <a ui-sref="{{::item.state}}"
-            ng-class="{active: item.active && !item.childs, expanded: item.active, collapsed: !item.active}"
+            class="vn-item"
+            ng-class="{active: item.active && !item.childs, expanded: item.active}"
            ng-click="$ctrl.setActive(item)">
+            <vn-item-section avatar>
                <vn-icon icon="{{::item.icon}}" ng-if="::item.icon"></vn-icon>
+            </vn-item-section>
+            <vn-item-section translate>
+                {{::item.description}}
+            </vn-item-section>
+            <vn-item-section side>
                <vn-icon icon="keyboard_arrow_down" ng-if="::item.childs.length > 0"></vn-icon>
-            <span translate>{{::item.description}}</span>
+            </vn-item-section>
        </a>
-        <ul ng-show="item.childs.length > 0 && item.active">
+        <ul class="vn-list" ng-show="item.childs.length > 0 && item.active">
            <li ng-repeat="child in ::item.childs">
-                <a ui-sref="{{::child.state}}" ng-class="{active: child.active}">
+                <a ui-sref="{{::child.state}}"
+                    class="vn-item"
+                    ng-class="{active: child.active}">
+                    <vn-item-section avatar>
                        <vn-icon icon="{{::child.icon}}"></vn-icon>
-                    <span translate>{{::child.description}}</span>
+                    </vn-item-section>
+                    <vn-item-section translate>
+                        {{::child.description}}
+                    </vn-item-section>
                </a>
            </li>
        </ul>
--- a/front/salix/components/left-menu/left-menu.js
+++ b/front/salix/components/left-menu/left-menu.js
@ -6,24 +6,42 @@ export default class LeftMenu {
        this.$element = $element;
        this.$timeout = $timeout;
        this.$state = $state;
+        this.aclService = aclService;
        this.deregisterCallback = $transitions.onSuccess({},
            () => this.activateItem());
+        this.source = 'main';
        this._depth = 3;
+    }

+    $onInit() {
+        this.items = this.fetchItems();
+        this.activateItem();
+    }
+
+    set depth(value) {
+        this._depth = value;
+        this.activateItem();
+    }
+
+    get depth() {
+        return this._depth;
+    }
+
+    fetchItems() {
        let states = this.$state.router.stateRegistry.states;
        let moduleIndex = this.$state.current.data.moduleIndex;
        let moduleFile = window.routes[moduleIndex] || [];
-        let menu = moduleFile.menu || [];
+        let menu = moduleFile.menus && moduleFile.menus[this.source] || [];
        let items = [];

-        function addItem(items, item) {
+        let addItem = (items, item) => {
            let state = states[item.state];
            if (!state) return;

            state = state.self;
            let acl = state.data.acl;

-            if (acl && !aclService.hasAny(acl))
+            if (acl && !this.aclService.hasAny(acl))
                return;

            items.push({
@ -31,7 +49,7 @@ export default class LeftMenu {
                description: state.description,
                state: item.state
            });
-        }
+        };

        for (let item of menu) {
            if (item.state)
@ -52,17 +70,7 @@ export default class LeftMenu {
            }
        }

-        this.items = items;
-        this.activateItem();
-    }
-
-    set depth(value) {
-        this._depth = value;
-        this.activateItem();
-    }
-
-    get depth() {
-        return this._depth;
+        return items;
    }

    activateItem() {
@ -93,9 +101,8 @@ export default class LeftMenu {
        item.active = !item.active;

        this.$timeout(() => {
-            let element = this.$element[0].querySelector('a[class="expanded"]');
-            if (element)
-                element.scrollIntoView();
+            let element = this.$element[0].querySelector('a.expanded');
+            if (element) element.scrollIntoView();
        });
    }

@ -109,6 +116,7 @@ ngModule.component('vnLeftMenu', {
    template: require('./left-menu.html'),
    controller: LeftMenu,
    bindings: {
+        source: '@?',
        depth: '<?'
    }
 });
--- a/front/salix/components/left-menu/style.scss
+++ b/front/salix/components/left-menu/style.scss
@ -1,53 +1,18 @@
@import "effects";

+@import "variables";
+
 vn-left-menu {
-    ul {
-        margin: 0;
-        padding: 0;
-        width: 100%;
+    & > .vn-list {
+        padding: $spacing-md 0;

-        & > li {
-            list-style: none;
-            display: block;
-
-            & > ul > li > a {
-                padding-left: 2em
+        & > li > .vn-item {
+            & > [side] > vn-icon[icon="keyboard_arrow_down"] {
+                transition: transform 200ms;
            }
-        }
-
-        & > li > a {
-            @extend %clickable;
-            padding: .5em 1em;
-            display: block;
-            color: inherit;
-
-            & > vn-icon:nth-child(1) {
-                vertical-align: middle; 
-                margin-right: .4em
-            }
-
-            & > vn-icon:nth-child(2) {
-                float: right; 
-                margin-left: .4em
-            }
-        }
-
-        & > li > a.active {
-            @extend %active;
-        }
-
-        & > li > a.expanded {
-            & > vn-icon[icon="keyboard_arrow_down"] {
-                transition: all 0.2s;
+            &.expanded > [side] > vn-icon[icon="keyboard_arrow_down"] {
                transform: rotate(180deg);
            }
        }
-
-        & > li > a.collapsed {
-            & > vn-icon[icon="keyboard_arrow_down"] {
-                transition: all 0.2s;
-                transform: rotate(0deg);
-            }
-        }
    }
 }
--- a/front/salix/components/login/login.js
+++ b/front/salix/components/login/login.js
@ -14,6 +14,7 @@ export default class Controller {
            remember: true
        });
    }
+
    submit() {
        this.loading = true;
        this.vnAuth.login(this.user, this.password, this.remember)
@ -28,6 +29,7 @@ export default class Controller {
                throw err;
            });
    }
+
    focusUser() {
        this.$.userField.select();
        this.$.userField.focus();
--- a/front/salix/components/main-menu/main-menu.html
+++ b/front/salix/components/main-menu/main-menu.html
@ -1,31 +1,15 @@
-<div>
 <div
    ng-click="userPopover.show($event)"
    id="user"
    class="unselectable">
    {{$root.user.nickname}}
 </div>
-    <vn-icon-button
-        id="apps"
-        icon="apps"
-        vn-popover="apps-menu"
-        translate-attr="{title: 'Applications'}">
-    </vn-icon-button>
 <vn-icon-button
    id="logout"
    icon="exit_to_app"
    translate-attr="{title: 'Logout'}"
    ng-click="$ctrl.vnAuth.logout()">
 </vn-icon-button>
-</div>
-<vn-menu vn-id="apps-menu">
-    <ul class="modules-menu vn-pa-sm">
-        <li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
-            <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
-            <span translate>{{::mod.name}}</span>
-        </li>
-    </ul>
-</vn-menu>
 <vn-user-popover
    vn-id="user-popover">
 </vn-user-popover>
--- a/front/salix/components/main-menu/main-menu.js
+++ b/front/salix/components/main-menu/main-menu.js
@ -2,12 +2,11 @@ import ngModule from '../../module';
 import './style.scss';

 export default class MainMenu {
-    constructor($, $http, vnAuth, vnModules) {
+    constructor($, $http, vnAuth) {
        Object.assign(this, {
            $,
            $http,
-            vnAuth,
-            modules: vnModules.get()
+            vnAuth
        });
    }

@ -22,7 +21,7 @@ export default class MainMenu {
        });
    }
 }
-MainMenu.$inject = ['$scope', '$http', 'vnAuth', 'vnModules'];
+MainMenu.$inject = ['$scope', '$http', 'vnAuth'];

 ngModule.component('vnMainMenu', {
    template: require('./main-menu.html'),
--- a/front/salix/components/main-menu/style.scss
+++ b/front/salix/components/main-menu/style.scss
@ -4,17 +4,14 @@
 vn-main-menu {
    display: flex;
    align-items: center;
-    justify-content: flex-end;
-
-    & > div {
-        display: flex;
-        align-items: center;
+    justify-content: space-between;
    box-sizing: border-box;

    & > * {
        transition: color 250ms ease-out;
    }
    & > #user {
+        flex: 1;
        vertical-align: middle;
        font-weight: bold;
        margin-right: .2em;
@ -24,17 +21,15 @@ vn-main-menu {
        cursor: pointer;
    }
    & > .vn-button {
-            font-size: 1.2em;
+        height: initial;
        color: inherit;
        padding: 0;
-            margin-left: .3em;
    }
    & > :hover {
        color: $color-main;
        opacity: 1;
    }
 }
-}

 .vn-popover .modules-menu {
    list-style-type: none;
--- a/front/salix/components/module-card/index.js
+++ b/front/salix/components/module-card/index.js
@ -0,0 +1,29 @@
+import ngModule from '../../module';
+import Component from 'core/lib/component';
+import './style.scss';
+
+/**
+ * Base class for module cards.
+ */
+export default class ModuleCard extends Component {
+    constructor($element, $) {
+        super($element, $);
+        this.element.classList.add('vn-module-card');
+    }
+
+    $onInit() {
+        this.reload();
+    }
+
+    /**
+     * Reloads the card data. Should be implemented or overriden by child
+     * classes.
+     */
+    reload() {
+        throw new Error('ModuleCard::reload() method not implemented');
+    }
+}
+
+ngModule.vnComponent('vnModuleCard', {
+    controller: ModuleCard
+});
--- a/front/salix/components/module-card/style.scss
+++ b/front/salix/components/module-card/style.scss
@ -0,0 +1,5 @@
+@import "variables";
+
+.vn-module-card {
+    padding: 0;
+}
--- a/front/salix/components/module-main/index.html
+++ b/front/salix/components/module-main/index.html
@ -0,0 +1,4 @@
+<vn-portal slot="menu">
+    <vn-left-menu></vn-left-menu>
+</vn-portal>
+<ui-view></ui-view>
--- a/front/salix/components/module-main/index.js
+++ b/front/salix/components/module-main/index.js
@ -0,0 +1,15 @@
+import ngModule from '../../module';
+import Component from 'core/lib/component';
+import './style.scss';
+
+export default class ModuleMain extends Component {
+    constructor($element, $) {
+        super($element, $);
+        this.element.classList.add('vn-module-main');
+    }
+}
+
+ngModule.vnComponent('vnModuleMain', {
+    template: require('./index.html'),
+    controller: ModuleMain
+});
--- a/front/salix/components/module-main/style.scss
+++ b/front/salix/components/module-main/style.scss
@ -0,0 +1,5 @@
+@import "variables";
+
+.vn-module-main {
+    padding: 0;
+}
--- a/front/salix/components/side-menu/side-menu.js
+++ b/front/salix/components/side-menu/side-menu.js
@ -1,4 +1,5 @@
 import ngModule from '../../module';
+import Component from 'core/lib/component';
 import './style.scss';

 /**
@ -7,15 +8,10 @@ import './style.scss';
 * @property {String} side [left|right] The side where the menu is displayed
 * @property {Boolean} shown Whether the menu it's currently displayed (Only for small viewports)
 */
-export default class SideMenu {
-    constructor($, $element, $window, $transitions) {
-        Object.assign(this, {
-            $,
-            $element,
-            $window,
-            $transitions,
-            side: 'left'
-        });
+export default class SideMenu extends Component {
+    constructor($element, $) {
+        super($element, $);
+        this.side = 'left';
    }

    $onInit() {
@ -23,18 +19,25 @@ export default class SideMenu {

        if (this.side == 'right') {
            this.menu.classList.add('right');
-            this.app.rightMenu = this;
+            this.layout.rightMenu = this;
+            this.layout.element.classList.add('right-menu');
        } else {
            this.menu.classList.add('left');
-            this.app.leftMenu = this;
+            this.layout.leftMenu = this;
+            this.layout.element.classList.add('left-menu');
        }
    }

    $onDestroy() {
-        if (this.side == 'right')
-            this.app.rightMenu = null;
-        else
-            this.app.leftMenu = null;
+        if (this.side == 'right') {
+            this.layout.rightMenu = null;
+            this.layout.element.classList.remove('right-menu');
+        } else {
+            // this.layout.leftMenu = null;
+            this.layout.element.classList.remove('left-menu');
+        }
+
+        this.hide();
    }

    onEscape(event) {
@ -50,6 +53,7 @@ export default class SideMenu {
    }

    show() {
+        if (this.shown) return;
        this.shown = true;
        this.handler = e => this.onEscape(e);
        this.$window.addEventListener('keydown', this.handler);
@ -57,12 +61,12 @@ export default class SideMenu {
    }

    hide() {
+        if (!this.shown) return;
        this.$window.removeEventListener('keydown', this.handler);
        this.stateHandler();
        this.shown = false;
    }
 }
-SideMenu.$inject = ['$scope', '$element', '$window', '$transitions'];

 ngModule.component('vnSideMenu', {
    template: require('./side-menu.html'),
@ -72,6 +76,6 @@ ngModule.component('vnSideMenu', {
        side: '@?'
    },
    require: {
-        app: '^vnApp'
+        layout: '^vnLayout'
    }
 });
--- a/front/salix/components/side-menu/style.scss
+++ b/front/salix/components/side-menu/style.scss
@ -1,5 +1,8 @@
@import "variables";

+vn-side-menu {
+    display: block;
+}
 vn-side-menu > .menu {
    display: block;
    position: fixed;
@ -10,17 +13,17 @@ vn-side-menu > .menu {
    background-color: $color-bg-panel;
    box-shadow: 0 .1em .2em $color-shadow;
    overflow: auto;
-    top: $topbar-height;

    &.left {
        left: 0;
+        top: 0;
    }
    &.right {
        right: 0;
+        top: $topbar-height;
    }

    @media screen and (max-width: $mobile-width) {
-        top: 0;
        transition: transform 200ms ease-out;
        z-index: 15;

@ -28,6 +31,7 @@ vn-side-menu > .menu {
            transform: translateZ(0) translateX(-$menu-width);
        }
        &.right {
+            top: 0;
            transform: translateZ(0) translateX($menu-width);
        }
        &.shown {
--- a/front/salix/components/summary/style.scss
+++ b/front/salix/components/summary/style.scss
@ -59,4 +59,5 @@
 .vn-popup .summary {
    border: none;
    box-shadow: none;
+    margin: 0;
 }
--- a/front/salix/components/topbar/style.scss
+++ b/front/salix/components/topbar/style.scss
@ -2,15 +2,8 @@

 vn-topbar {
    display: flex;
+    align-items: center;
    color: $color-font-dark;
    box-sizing: border-box;
    background-color: $color-header;
-    align-items: center;
-    
-    & > header {
-        height: inherit;
-        width: inherit;
-        display: flex;
-        align-items: center;
-    }
 }
--- a/front/salix/components/topbar/topbar.js
+++ b/front/salix/components/topbar/topbar.js
@ -1,7 +1 @@
-import ngModule from '../../module';
 import './style.scss';
-
-ngModule.component('vnTopbar', {
-    template: require('./topbar.html'),
-    transclude: true
-});
--- a/front/salix/components/user-popover/style.scss
+++ b/front/salix/components/user-popover/style.scss
@ -11,7 +11,7 @@
            font-size: 60px;
            border-radius: 50%;
            color: $color-font-dark;
-            background: $color-secondary;
+            background: $color-marginal;
            padding: .1em;
        }
        & > div {
--- a/front/salix/module.js
+++ b/front/salix/module.js
@ -62,9 +62,10 @@ export function config($translatePartialLoaderProvider, $httpProvider, $compileP
    $translatePartialLoaderProvider.addPart(appName);
    $httpProvider.interceptors.push('vnInterceptor');

-    // $compileProvider.debugInfoEnabled(false);
-    $compileProvider.commentDirectivesEnabled(false);
-    $compileProvider.cssClassDirectivesEnabled(false);
+    $compileProvider
+        .debugInfoEnabled(false)
+        .commentDirectivesEnabled(false)
+        .cssClassDirectivesEnabled(false);
 }
 ngModule.config(config);

--- a/front/salix/routes.js
+++ b/front/salix/routes.js
@ -1,41 +1,23 @@
 import ngModule from './module';
 import getMainRoute from 'core/lib/get-main-route';

-function loader(moduleName) {
-    load.$inject = ['vnModuleLoader'];
-    function load(moduleLoader) {
-        return moduleLoader.load(moduleName);
-    }
-    return load;
-}
-
 config.$inject = ['$stateProvider', '$urlRouterProvider'];
 function config($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

-    $stateProvider.state('home', {
-        url: '/',
-        template: '<vn-home></vn-home>',
-        description: 'Home'
-    });
-    $stateProvider.state('login', {
+    $stateProvider
+        .state('login', {
            url: '/login?continue',
-        template: '<vn-login></vn-login>',
-        description: 'Login'
-    });
-
-    function getParams(route) {
-        let params = '';
-        let temporalParams = [];
-
-        if (!route.params)
-            return params;
-
-        Object.keys(route.params).forEach(key => {
-            temporalParams.push(`${key} = "${route.params[key]}"`);
-        });
-        return temporalParams.join(' ');
+            description: 'Login',
+            views: {
+                login: {template: '<vn-login></vn-login>'}
            }
+        })
+        .state('home', {
+            url: '/',
+            description: 'Home',
+            template: '<vn-home></vn-home>'
+        });

    for (let file in window.routes) {
        let routeFile = window.routes[file];
@ -68,5 +50,26 @@ function config($stateProvider, $urlRouterProvider) {
            $stateProvider.state(route.state, configRoute);
        }
    }
+
+    function getParams(route) {
+        let params = '';
+        let temporalParams = [];
+
+        if (!route.params)
+            return params;
+
+        Object.keys(route.params).forEach(key => {
+            temporalParams.push(`${key} = "${route.params[key]}"`);
+        });
+        return temporalParams.join(' ');
+    }
+
+    function loader(moduleName) {
+        load.$inject = ['vnModuleLoader'];
+        function load(moduleLoader) {
+            return moduleLoader.load(moduleName);
+        }
+        return load;
+    }
 }
 ngModule.config(config);
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@ -123,25 +123,14 @@ html [scrollable] {
        font-size: 0.7em
    }
 }
-[compact], .compact {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: $width-md;
-}
-vn-empty-rows {
-    display: block;
-    text-align: center;
-    padding: 1.5em;
-    box-sizing: border-box;
-}

 /* XXX: Deprecated, use classes with text prefix */

 [color-main] {
    color: $color-main;
 }
-[color-secondary] {
-    color: $color-secondary;
+[color-marginal] {
+    color: $color-marginal;
 }
 [uppercase], .uppercase {
    text-transform: uppercase;
--- a/modules/agency/front/basic-data/index.html
+++ b/modules/agency/front/basic-data/index.html
@ -84,14 +84,17 @@
        </vn-horizontal>
    </vn-card>
    <vn-button-bar>
-        <vn-submit
-            label="Save"
-            vn-acl="deliveryBoss">
-        </vn-submit>
        <vn-button
            label="Undo changes"
            ng-if="watcher.dataChanged()"
            ng-click="watcher.loadOriginalData()">
        </vn-button>
    </vn-button-bar>
+    <vn-submit
+        icon="save"
+        vn-acl="deliveryBoss"
+        vn-tooltip="Save"
+        class="round"
+        fixed-bottom-right>
+    </vn-submit>
 </form>
--- a/modules/agency/front/card/index.html
+++ b/modules/agency/front/card/index.html
@ -1,5 +1,5 @@
-<vn-side-menu side="left">
+<vn-portal slot="menu">
    <vn-zone-descriptor zone="$ctrl.zone"></vn-zone-descriptor>
-    <vn-left-menu></vn-left-menu>
-</vn-side-menu>
-<div ui-view></div>
+    <vn-left-menu source="card"></vn-left-menu>
+</vn-portal>
+<ui-view></ui-view>
--- a/modules/agency/front/card/index.js
+++ b/modules/agency/front/card/index.js
@ -1,38 +1,21 @@
 import ngModule from '../module';
+import ModuleCard from 'salix/components/module-card';

-class Controller {
-    constructor($http, $stateParams) {
-        this.$http = $http;
-        this.$stateParams = $stateParams;
-    }
-
-    $onInit() {
-        this.getCard();
-    }
-
-    getCard() {
+class Controller extends ModuleCard {
+    reload() {
        let filter = {
            include: {
                relation: 'agencyMode',
                scope: {fields: ['name']}
            }
        };
-        let json = encodeURIComponent(JSON.stringify(filter));
-        let query = `Zones/${this.$stateParams.id}?filter=${json}`;
-        this.$http.get(query).then(res => {
-            if (res.data)
-                this.zone = res.data;
-        });
-    }

-    reload() {
-        this.getCard();
+        this.$http.get(`Zones/${this.$params.id}`, {filter})
+            .then(res => this.zone = res.data);
    }
 }

-Controller.$inject = ['$http', '$stateParams'];
-
-ngModule.component('vnZoneCard', {
+ngModule.vnComponent('vnZoneCard', {
    template: require('./index.html'),
    controller: Controller
 });
--- a/modules/agency/front/card/index.spec.js
+++ b/modules/agency/front/card/index.spec.js
@ -1,35 +1,26 @@
 import './index.js';

 describe('Agency Component vnZoneCard', () => {
-    let $scope;
    let controller;
    let $httpBackend;
-    let $stateParams;
+    let data = {id: 1, name: 'fooName'};

    beforeEach(ngModule('agency'));

-    beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
+    beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $stateParams) => {
        $httpBackend = _$httpBackend_;
-        $scope = $rootScope.$new();
-        $stateParams = {id: 1};
-        controller = $componentController('vnZoneCard', {$scope, $stateParams});
+
+        let $element = angular.element('<div></div>');
+        controller = $componentController('vnZoneCard', {$element});
+
+        $stateParams.id = data.id;
+        $httpBackend.whenRoute('GET', 'Zones/:id').respond(data);
    }));

-    describe('getCard()', () => {
-        it(`should make a query and define zone property`, () => {
-            let filter = {
-                include: {
-                    relation: 'agencyMode',
-                    scope: {fields: ['name']}
-                }
-            };
-            let json = encodeURIComponent(JSON.stringify(filter));
-            $httpBackend.expectGET(`Zones/1?filter=${json}`).respond({id: 1});
-            controller.getCard();
+    it('should request data and set it on the controller', () => {
+        controller.reload();
        $httpBackend.flush();

-            expect(controller.zone).toEqual({id: 1});
+        expect(controller.zone).toEqual(data);
    });
 });
-});
-
--- a/modules/agency/front/create/index.html
+++ b/modules/agency/front/create/index.html
@ -5,8 +5,10 @@
    form="form"
    save="post">
 </vn-watcher>
-<div class="content-block">
-    <form name="form" vn-http-submit="$ctrl.onSubmit()" compact>
+<form
+    name="form"
+    vn-http-submit="$ctrl.onSubmit()"
+    class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-horizontal>
            <vn-textfield
@ -57,7 +59,7 @@
            <vn-input-number
                vn-one
                label="Price"
-                    model="$ctrl.zone.price"
+                ng-model="$ctrl.zone.price"
                min="0"
                step="0.01"
                rule>
@ -65,7 +67,7 @@
            <vn-input-number
                vn-one
                label="Bonus"
-                    model="$ctrl.zone.bonus"
+                ng-model="$ctrl.zone.bonus"
                min="0"
                step="0.01"
                rule>
@ -75,9 +77,10 @@
            <vn-check ng-model="$ctrl.zone.isVolumetric" label="Volumetric"></vn-check>
        </vn-horizontal>
    </vn-card>
-        <vn-button-bar>
-            <vn-submit label="Create"></vn-submit>
-            <vn-button ui-sref="zone.index" label="Cancel"></vn-button>
-        </vn-button-bar>
+    <vn-submit
+        icon="check"
+        vn-tooltip="Create"
+        class="round"
+        fixed-bottom-right>
+    </vn-submit>
 </form>
-</div>
--- a/modules/agency/front/delivery-days/index.html
+++ b/modules/agency/front/delivery-days/index.html
@ -32,9 +32,12 @@
                </vn-textfield>
            </vn-horizontal>
        </vn-card>
-        <vn-button-bar>
-            <vn-submit label="Query"></vn-submit>
-        </vn-button-bar>
+        <vn-submit
+            icon="search"
+            vn-tooltip="Query"
+            class="round"
+            fixed-bottom-right>
+        </vn-submit>
    </form>
    <vn-zone-calendar
        data="data"
--- a/modules/agency/front/events/index.html
+++ b/modules/agency/front/events/index.html
@ -1,11 +1,9 @@
-<div class="main-with-right-menu">
 <vn-zone-calendar
    id="calendar"
    data="data"
    on-selection="$ctrl.onSelection($days, $type, $weekday, $data)"
    class="vn-w-md">
 </vn-zone-calendar>
-</div>
 <vn-side-menu side="right">
    <div class="vn-pa-md">
        <h6
@ -35,16 +33,14 @@
    </h6>
    <vn-data-viewer
        data="data.events"
-        is-loading="!data.events"
-        class="vn-w-sm">
-        <div class="vn-list">
+        is-loading="!data.events">
+        <div class="vn-list separated">
        <a
            ng-repeat="row in data.events"
            translate-attr="{title: 'Edit'}"
            ng-click="$ctrl.onEditClick(row, $event)"
-            class="vn-list-item">
-            <vn-horizontal>
-                <vn-one>
+            class="vn-item">
+            <vn-item-section>
                <div
                    ng-if="::row.from && !row.to"
                    class="vn-mb-sm">
@ -79,15 +75,14 @@
                    label="Bonus" 
                    value="{{::row.bonus | currency:'EUR':2}}">
                </vn-label-value>
-                </vn-one>
-                <vn-horizontal class="buttons">
+            </vn-item-section>
+            <vn-item-section side>
                <vn-icon-button
                    icon="delete"
                    translate-attr="{title: 'Delete'}"
                    ng-click="$ctrl.onDeleteClick(row.id, $event)">
                </vn-icon-button>
-                </vn-horizontal>
-            </vn-horizontal>
+            </vn-item-section>
        </a>
        </div>
    </vn-data-viewer>
--- a/modules/agency/front/index/index.html
+++ b/modules/agency/front/index/index.html
@ -6,19 +6,13 @@
    data="zones"
    auto-load="true">
 </vn-crud-model>
-<div>
-    <vn-card class="vn-w-sm vn-pa-md">
-        <vn-searchbar
-            panel="vn-zone-search-panel"
+<vn-auto-search
    model="model"
-            expr-builder="$ctrl.exprBuilder(param, value)"
-            info="Search zone by id or name"
-            vn-focus>
-        </vn-searchbar>
-    </vn-card>
+    expr-builder="$ctrl.exprBuilder(param, value)">
+</vn-auto-search>
 <vn-data-viewer
    model="model"
-        class="vn-w-md vn-mt-md vn-mb-xl">
+    class="vn-w-md vn-mb-xl">
    <vn-card>
    <vn-table model="model">
        <vn-thead>
@ -35,7 +29,7 @@
            <vn-tr
                ng-repeat="zone in zones"
                ui-sref="zone.card.location({id: zone.id})"
-                    class="clickable searchResult">
+                class="clickable search-result">
                <vn-td number>{{::zone.id}}</vn-td>
                <vn-td expand>{{::zone.name}}</vn-td>
                <vn-td>{{::zone.agencyMode.name}}</vn-td>
@ -62,7 +56,6 @@
    </vn-table>
    </vn-card>
 </vn-data-viewer>
-</div>
 <vn-popup vn-id="summary">
    <vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
 </vn-popup>
--- a/modules/agency/front/location/index.html
+++ b/modules/agency/front/location/index.html
@ -3,16 +3,17 @@
    url="Zones/{{$ctrl.$params.id}}/getLeaves"
    filter="::$ctrl.filter">
 </vn-crud-model>
+<vn-portal slot="topbar">
+    <vn-searchbar></vn-searchbar>
+</vn-portal>
+<vn-auto-search
+    on-search="$ctrl.onSearch($params)">
+</vn-auto-search>
 <div class="vn-w-md">
-    <vn-card class="vn-pa-md">
-        <vn-searchbar
-            auto-load="false"
-            on-search="$ctrl.onSearch($params)"
-            vn-focus>
-        </vn-searchbar>
-    </vn-card>
-    <vn-card class="vn-pa-lg vn-mt-md">
-        <vn-treeview vn-id="treeview" root-label="Locations"
+    <vn-card class="vn-pa-lg">
+    <vn-treeview
+        vn-id="treeview"
+        root-label="Locations"
        fetch-func="$ctrl.onFetch($item)"
        sort-func="$ctrl.onSort($a, $b)">
        <vn-check
--- a/modules/agency/front/location/index.js
+++ b/modules/agency/front/location/index.js
@ -3,6 +3,10 @@ import Component from 'core/lib/component';
 import './style.scss';

 class Controller extends Component {
+    $postLink() {
+        this.onSearch();
+    }
+
    onSearch(params) {
        this.$.model.applyFilter({}, params).then(() => {
            const data = this.$.model.data;
@ -12,9 +16,8 @@ class Controller extends Component {

    onFetch(item) {
        const params = item ? {parentId: item.id} : null;
-        return this.$.model.applyFilter({}, params).then(() => {
-            return this.$.model.data;
-        });
+        return this.$.model.applyFilter({}, params)
+            .then(() => this.$.model.data);
    }

    onSort(a, b) {
--- a/modules/agency/front/location/style.scss
+++ b/modules/agency/front/location/style.scss
@ -2,13 +2,13 @@

 vn-treeview-child {
    .content > .vn-check:not(.indeterminate) {
-        color: $color-main;
+        color: $color-button;

        & > .btn {
-            border-color: $color-main;
+            border-color: $color-button;
        }
    }
    .content > .vn-check.checked {
-        color: $color-main;
+        color: $color-button;
    }
 }
--- a/modules/agency/front/main/index.html
+++ b/modules/agency/front/main/index.html
@ -1,14 +1,11 @@
-<vn-main-block>
-    <vn-side-menu side="left">
-        <ul class="menu">
-            <li>
-                <a translate ui-sref="zone.index">Zones</a>
-            </li>
-            <li>
-                <a translate ui-sref="zone.deliveryDays">Delivery days</a>
-            </li>
-        </ul>
-    </vn-side-menu>
-    <div class="content-block" ui-view></div>
-</vn-main-block>
-    
+<vn-portal slot="topbar">
+    <vn-searchbar
+        search-state="zone.index"
+        panel="vn-zone-search-panel"
+        info="Search zone by id or name">
+    </vn-searchbar>
+</vn-portal>
+<vn-portal slot="menu">
+    <vn-left-menu></vn-left-menu>
+</vn-portal>
+<ui-view></ui-view>
--- a/modules/agency/front/main/index.js
+++ b/modules/agency/front/main/index.js
@ -1,6 +1,9 @@
 import ngModule from '../module';
-import './style.scss';
+import ModuleMain from 'salix/components/module-main';

-ngModule.component('vnZone', {
+export default class Zone extends ModuleMain {}
+
+ngModule.vnComponent('vnZone', {
+    controller: Zone,
    template: require('./index.html')
 });
--- a/modules/agency/front/main/style.scss
+++ b/modules/agency/front/main/style.scss
@ -1,18 +0,0 @@
-@import "effects";
-
-vn-zone {
-    ul.menu {
-        list-style-type: none;
-        padding: 0;
-        padding-top: $spacing-md;
-        margin: 0;
-        font-size: inherit;
-
-        & > li > a {
-            @extend %clickable;
-            display: block;
-            color: inherit;
-            padding: .6em 2em;
-        }
-    }
-}
--- a/Show More
+++ b/Show More