-
- {{$root.user.nickname}}
-
-
-
-
-
+
+ {{$root.user.nickname}}
-
-
-
+
+
\ No newline at end of file
diff --git a/front/salix/components/main-menu/main-menu.js b/front/salix/components/main-menu/main-menu.js
index 93ff955e7..2c4d22af5 100644
--- 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'),
diff --git a/front/salix/components/main-menu/style.scss b/front/salix/components/main-menu/style.scss
index cd38472ab..0942a0a95 100644
--- a/front/salix/components/main-menu/style.scss
+++ b/front/salix/components/main-menu/style.scss
@@ -4,35 +4,30 @@
vn-main-menu {
display: flex;
align-items: center;
- justify-content: flex-end;
+ justify-content: space-between;
+ box-sizing: border-box;
- & > div {
- display: flex;
- align-items: center;
- box-sizing: border-box;
-
- & > * {
- transition: color 250ms ease-out;
- }
- & > #user {
- vertical-align: middle;
- font-weight: bold;
- margin-right: .2em;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- cursor: pointer;
- }
- & > .vn-button {
- font-size: 1.2em;
- color: inherit;
- padding: 0;
- margin-left: .3em;
- }
- & > :hover {
- color: $color-main;
- opacity: 1;
- }
+ & > * {
+ transition: color 250ms ease-out;
+ }
+ & > #user {
+ flex: 1;
+ vertical-align: middle;
+ font-weight: bold;
+ margin-right: .2em;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ & > .vn-button {
+ height: initial;
+ color: inherit;
+ padding: 0;
+ }
+ & > :hover {
+ color: $color-main;
+ opacity: 1;
}
}
diff --git a/front/salix/components/module-card/index.js b/front/salix/components/module-card/index.js
new file mode 100644
index 000000000..9131cc772
--- /dev/null
+++ 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
+});
diff --git a/front/salix/components/module-card/style.scss b/front/salix/components/module-card/style.scss
new file mode 100644
index 000000000..0ae943efc
--- /dev/null
+++ b/front/salix/components/module-card/style.scss
@@ -0,0 +1,5 @@
+@import "variables";
+
+.vn-module-card {
+ padding: 0;
+}
\ No newline at end of file
diff --git a/front/salix/components/module-main/index.html b/front/salix/components/module-main/index.html
new file mode 100644
index 000000000..6e04f06d0
--- /dev/null
+++ b/front/salix/components/module-main/index.html
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/front/salix/components/module-main/index.js b/front/salix/components/module-main/index.js
new file mode 100644
index 000000000..39fbe42b8
--- /dev/null
+++ 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
+});
diff --git a/front/salix/components/module-main/style.scss b/front/salix/components/module-main/style.scss
new file mode 100644
index 000000000..d9bdbd940
--- /dev/null
+++ b/front/salix/components/module-main/style.scss
@@ -0,0 +1,5 @@
+@import "variables";
+
+.vn-module-main {
+ padding: 0;
+}
\ No newline at end of file
diff --git a/front/salix/components/side-menu/side-menu.js b/front/salix/components/side-menu/side-menu.js
index dfac732a1..558a0961b 100644
--- 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'
}
});
diff --git a/front/salix/components/side-menu/style.scss b/front/salix/components/side-menu/style.scss
index 0054abfa7..6f1c22f14 100644
--- 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 {
diff --git a/front/salix/components/summary/style.scss b/front/salix/components/summary/style.scss
index 58a613088..f0d6ae038 100644
--- 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;
}
diff --git a/front/salix/components/topbar/style.scss b/front/salix/components/topbar/style.scss
index dc5273dbf..d7a5173f6 100644
--- 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;
- }
}
diff --git a/front/salix/components/topbar/topbar.js b/front/salix/components/topbar/topbar.js
index 583354ad1..423b033ce 100644
--- 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
-});
diff --git a/front/salix/components/user-popover/style.scss b/front/salix/components/user-popover/style.scss
index 4277b98f6..5d1745ca1 100644
--- 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 {
diff --git a/front/salix/module.js b/front/salix/module.js
index 58bdec105..2354e0dff 100644
--- 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);
diff --git a/front/salix/routes.js b/front/salix/routes.js
index 48a92795e..600907ff1 100644
--- 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: '
',
- description: 'Home'
- });
- $stateProvider.state('login', {
- url: '/login?continue',
- template: '
',
- 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]}"`);
+ $stateProvider
+ .state('login', {
+ url: '/login?continue',
+ description: 'Login',
+ views: {
+ login: {template: '
'}
+ }
+ })
+ .state('home', {
+ url: '/',
+ description: 'Home',
+ template: '
'
});
- return temporalParams.join(' ');
- }
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);
diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss
index 0ae30becd..1f2d79981 100644
--- 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;
diff --git a/modules/agency/front/basic-data/index.html b/modules/agency/front/basic-data/index.html
index b0f94ddc0..ec5cc3b20 100644
--- a/modules/agency/front/basic-data/index.html
+++ b/modules/agency/front/basic-data/index.html
@@ -84,14 +84,17 @@
-
-
+
+
diff --git a/modules/agency/front/card/index.html b/modules/agency/front/card/index.html
index 1fd22809a..ae6a7f10a 100644
--- a/modules/agency/front/card/index.html
+++ b/modules/agency/front/card/index.html
@@ -1,5 +1,5 @@
-
+
-
-
-
+
+
+
diff --git a/modules/agency/front/card/index.js b/modules/agency/front/card/index.js
index 7c53e9294..4e8ac7e8c 100644
--- 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
});
diff --git a/modules/agency/front/card/index.spec.js b/modules/agency/front/card/index.spec.js
index 190b77d0d..cc53fe946 100644
--- 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('
');
+ 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();
- $httpBackend.flush();
+ 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);
});
});
-
diff --git a/modules/agency/front/create/index.html b/modules/agency/front/create/index.html
index 716d5e50c..332e8a9b8 100644
--- a/modules/agency/front/create/index.html
+++ b/modules/agency/front/create/index.html
@@ -5,79 +5,82 @@
form="form"
save="post">
-
-
-
+
diff --git a/modules/agency/front/delivery-days/index.html b/modules/agency/front/delivery-days/index.html
index 286721068..dca452c63 100644
--- a/modules/agency/front/delivery-days/index.html
+++ b/modules/agency/front/delivery-days/index.html
@@ -32,9 +32,12 @@
-
-
-
+
+
-
-
-