vnSideMenu, vnBackground, style fixes

front/Dockerfile

@@ -13,6 +13,5 @@ COPY front/nginx.conf sites-available/salix
 RUN rm sites-enabled/default && ln -s ../sites-available/salix sites-enabled/salix
 
 COPY dist /salix/dist
-COPY front/salix/manifest.json /salix/dist/
 
 CMD ["nginx", "-g", "daemon off;"]

front/core/locale/es.yml

@@ -38,3 +38,4 @@ October: Octubre
 November: Noviembre
 December: Diciembre
 Has delivery: Hay reparto
+Loading: Cargando

front/salix/components/app/app.html

@@ -3,10 +3,10 @@
         <img src="./logo.svg" alt="Logo"></img>
     </a>
     <vn-icon
-        ng-if="$ctrl.showLeftMenuButton"
-        class="show-menu"
         icon="menu"
-        ng-click="$ctrl.showLeftMenu()">
+        class="show-menu"
+        ng-if="$ctrl.leftMenu"
+        ng-click="$ctrl.leftMenu.show()">
     </vn-icon>
     <div class="main-title" translate>
         {{$ctrl.$state.current.description}}
@@ -14,20 +14,15 @@
     <vn-spinner enable="$ctrl.vnApp.loading"></vn-spinner>
     <vn-main-menu></vn-main-menu>
     <vn-icon
-        ng-if="$ctrl.rightMenu"
-        class="show-menu"
         icon="menu"
-        ng-click="$ctrl.showRightMenu()">
+        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}">
+    ng-class="{padding: $ctrl.showTopbar}">
     <vn-home></vn-home>
 </div>
-<div
-    class="background"
-    ng-class="{shown: $ctrl.leftMenuShown || $ctrl.rightMenuShown}"
-    ng-click="$ctrl.hideMenus()">
-</div>
 <vn-snackbar vn-id="snackbar"></vn-snackbar>

front/salix/components/app/app.js

@@ -1,19 +1,18 @@
 import ngModule from '../../module';
 import './style.scss';
 
+/**
+ * The main graphical application component.
+ *
+ * @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($, $element, vnApp, $state, $transitions) {
+    constructor($, $state, vnApp) {
         Object.assign(this, {
             $,
-            $element,
+            $state,
-            vnApp,
+            vnApp
-            $state
-        });
-
-        $transitions.onStart({}, transition => {
-            let state = transition.targetState().name();
-            this.showLeftMenuButton = state.split('.').length >= 3;
-            this.hideMenus();
         });
     }
 
@@ -30,33 +29,6 @@ export default class App {
         return state && state != 'login';
     }
 
-    get leftMenu() {
-        return this.$element[0].querySelector('.left-menu');
-    }
-
-    showLeftMenu() {
-        if (!this.leftMenu) return;
-        this.leftMenu.classList.add('shown');
-        this.leftMenuShown = true;
-    }
-
-    showRightMenu() {
-        if (!this.rightMenu) return;
-        this.rightMenu.classList.add('shown');
-        this.rightMenuShown = true;
-    }
-
-    hideMenus() {
-        if (this.leftMenuShown) {
-            this.leftMenu.classList.remove('shown');
-            this.leftMenuShown = false;
-        }
-        if (this.rightMenuShown) {
-            this.rightMenu.classList.remove('shown');
-            this.rightMenuShown = false;
-        }
-    }
-
     showMessage(message) {
         this.$.snackbar.show({message: message});
     }
@@ -69,7 +41,7 @@ export default class App {
         this.$.snackbar.showError({message: message});
     }
 }
-App.$inject = ['$scope', '$element', 'vnApp', '$state', '$transitions'];
+App.$inject = ['$scope', '$state', 'vnApp'];
 
 ngModule.component('vnApp', {
     template: require('./app.html'),

front/salix/components/app/style.scss

@@ -1,9 +1,6 @@
 @import "background";
 @import "margin";
-
+@import "variables";
-$menu-width: 16em;
-$topbar-height: 4em;
-$mobile-width: 800px;
 
 body {
     @extend .bg-content;
@@ -72,27 +69,6 @@ vn-app {
             margin: 0 auto;
             padding-left: $menu-width;
                     
-            %side-menu {
-                display: block;
-                position: fixed;
-                z-index: 5;
-                bottom: 0;
-                width: $menu-width;
-                min-width: $menu-width;
-                background-color: white;
-                box-shadow: 0 .1em .2em rgba(1, 1, 1, .2);
-                overflow: auto;
-            }
-            .left-menu {
-                @extend %side-menu;
-                top: $topbar-height;
-                left: 0;
-            }
-            .right-menu {
-                @extend %side-menu;
-                top: $topbar-height;
-                right: 0;
-            }
         }
         .main-with-right-menu {
             padding-right: $menu-width;
@@ -102,18 +78,6 @@ vn-app {
             }
         }
     }
-    & > .background {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: black;
-        z-index: 14;
-        opacity: 0;
-        transition: opacity 200ms ease-out;
-    }
 
     @media screen and (max-width: $mobile-width) {
         & > vn-topbar > header {
@@ -135,32 +99,10 @@ vn-app {
             }
             vn-main-block {
                 padding-left: 0;
-
-                %side-menu-mobile {
-                    top: 0;
-                    transition: transform 200ms ease-out;
-                    z-index: 15;
-                
-                    &.shown {
-                        transform: translateZ(0) translateX(0);
-                    }
-                }
-                .left-menu {
-                    @extend %side-menu-mobile;
-                    transform: translateZ(0) translateX(-$menu-width);
-                }
-                .right-menu {
-                    @extend %side-menu-mobile;
-                    transform: translateZ(0) translateX($menu-width);
-                }
             }
             .main-with-right-menu {
                 padding-right: 0;
             }
         }
-        & > .background.shown {
-            display: block;
-            opacity: .3;
-        }
     }
 }

front/salix/components/background/background.js

@@ -0,0 +1 @@
+import './style.scss';

front/salix/components/background/style.scss

@@ -0,0 +1,26 @@
+@import "variables";
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+}
+
+vn-background {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    z-index: 14;
+
+    @media screen and (max-width: $mobile-width) {
+        &.shown {
+            display: block;
+            opacity: .3;
+            animation: 500ms ease-out fadein;
+        }
+    }
+}

front/salix/components/index.js

@@ -2,6 +2,8 @@ import './app/app';
 import './login/login';
 import './home/home';
 import './main-menu/main-menu';
+import './background/background';
+import './side-menu/side-menu';
 import './left-menu/left-menu';
 import './topbar/topbar';
 import './user-configuration-popover';

front/salix/components/main-menu/main-menu.html

@@ -5,6 +5,7 @@
         class="unselectable">
         {{currentUserName}}
     </div>
+    <div>
         <vn-icon
             id="apps"
             icon="apps"
@@ -19,12 +20,16 @@
                 </li>
             </ul>
         </vn-menu>
+    </div>
+    <div>
         <vn-icon
             id="logout"
             icon="exit_to_app"
             translate-attr="{title: 'Logout'}"
             ng-click="$ctrl.onLogoutClick()">
         </vn-icon>
+    </div>
 </div>
-<vn-user-configuration-popover vn-id="popover">
+<vn-user-configuration-popover
+    vn-id="popover">
 </vn-user-configuration-popover>

front/salix/components/main-menu/main-menu.js

@@ -2,13 +2,13 @@ import ngModule from '../../module';
 import './style.scss';
 
 export default class MainMenu {
-    constructor($translate, $scope, $http, $window, vnModules, vnAuth) {
+    constructor($, $http, vnAuth, vnModules) {
-        this.$ = $scope;
+        Object.assign(this, {
-        this.$http = $http;
+            $,
-        this.$translate = $translate;
+            $http,
-        this.$window = $window;
+            vnAuth,
-        this.modules = vnModules.get();
+            modules: vnModules.get()
-        this.vnAuth = vnAuth;
+        });
     }
 
     $onInit() {
@@ -30,7 +30,7 @@ export default class MainMenu {
         this.vnAuth.logout();
     }
 }
-MainMenu.$inject = ['$translate', '$scope', '$http', '$window', 'vnModules', 'vnAuth'];
+MainMenu.$inject = ['$scope', '$http', 'vnAuth', 'vnModules'];
 
 ngModule.component('vnMainMenu', {
     template: require('./main-menu.html'),

front/salix/components/main-menu/style.scss

@@ -12,7 +12,7 @@ vn-main-menu {
 
         & > * {
             cursor: pointer;
-            padding-left: .3em;
+            padding-left: .6em;
     
             &:hover {
                 color: $main-01;
@@ -21,10 +21,9 @@ vn-main-menu {
         & > #user {
             vertical-align: middle;
             font-weight: bold;
-            padding-right: .4em;
+            margin-right: .2em;
         }
-        & > vn-icon,
+        & > div > vn-icon {
-        & > a > vn-icon {
             display: block;
             font-size: 2.1em;
         }

front/salix/components/side-menu/side-menu.html

@@ -0,0 +1,9 @@
+<vn-background
+    ng-class="{shown: $ctrl.shown}"
+    ng-click="$ctrl.hide()">
+</vn-background>
+<div
+    class="menu"
+    ng-class="{shown: $ctrl.shown}"
+    ng-transclude>
+</div>

front/salix/components/side-menu/side-menu.js

@@ -0,0 +1,78 @@
+import ngModule from '../../module';
+import './style.scss';
+
+/**
+ * A side menu.
+ *
+ * @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'
+        });
+    }
+
+    $onInit() {
+        this.menu = this.$element[0].querySelector('.menu');
+
+        if (this.side == 'right') {
+            this.menu.classList.add('right');
+            this.app.rightMenu = this;
+        } else {
+            this.menu.classList.add('left');
+            this.app.leftMenu = this;
+        }
+    }
+
+    $onDestroy() {
+        if (this.side == 'right')
+            this.app.rightMenu = null;
+        else
+            this.app.leftMenu = null;
+    }
+
+    onEscape(event) {
+        if (!event.defaultPrevented && event.key == 'Escape') {
+            event.preventDefault();
+            this.hide();
+            this.$.$digest();
+        }
+    }
+
+    onTransition(transition) {
+        if (transition.from().name !== transition.to().name)
+            this.hide();
+    }
+
+    show() {
+        this.shown = true;
+        this.handler = e => this.onEscape(e);
+        this.$window.addEventListener('keydown', this.handler);
+        this.stateHandler = this.$transitions.onStart({}, t => this.onTransition(t));
+    }
+
+    hide() {
+        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'),
+    controller: SideMenu,
+    transclude: true,
+    bindings: {
+        side: '@?'
+    },
+    require: {
+        app: '^vnApp'
+    }
+});

front/salix/components/side-menu/style.scss

@@ -0,0 +1,37 @@
+@import "variables";
+
+vn-side-menu > .menu {
+    display: block;
+    position: fixed;
+    z-index: 5;
+    bottom: 0;
+    width: $menu-width;
+    min-width: $menu-width;
+    background-color: white;
+    box-shadow: 0 .1em .2em rgba(1, 1, 1, .2);
+    overflow: auto;
+    top: $topbar-height;
+
+    &.left {
+        left: 0;
+    }
+    &.right {
+        right: 0;
+    }
+
+    @media screen and (max-width: $mobile-width) {
+        top: 0;
+        transition: transform 200ms ease-out;
+        z-index: 15;
+
+        &.left {
+            transform: translateZ(0) translateX(-$menu-width);
+        }
+        &.right {
+            transform: translateZ(0) translateX($menu-width);
+        }
+        &.shown {
+            transform: translateZ(0) translateX(0);
+        }
+    }
+}

front/salix/index.ejs

@@ -4,7 +4,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no"/>
 		<meta name="mobile-web-app-capable" content="yes"/>
-		<link rel="manifest" href="manifest.json"/>
+		<link rel="manifest" href="<%= require('./manifest.json') %>"/>
 		<title vn-title translate></title>
 	</head>
 	<body>

front/salix/manifest.json

@@ -1,12 +1,12 @@
 {
 	"name": "Salix",
+	"start_url": "index.html",
+	"display": "standalone",
+	"theme_color": "#3d3d3d",
 	"icons": [
 		{
 			"src": "favicon.ico",
 			"sizes": "512x512"
 		}
-	],
+	]
-	"start_url": "index.html",
-	"display": "standalone",
-	"theme_color": "#3d3d3d"
 }

front/salix/styles/descriptor.scss

@@ -78,3 +78,8 @@
         }
     }
 }
+vn-popover {
+    .vn-descriptor > .header > a:first-child {
+        visibility: hidden;
+    }
+}

front/salix/styles/variables.scss

@@ -0,0 +1,4 @@
+
+$menu-width: 16em;
+$topbar-height: 4em;
+$mobile-width: 800px;

modules/agency/front/calendar/index.js

@@ -17,14 +17,6 @@ class Controller {
         this.ndMonth = this.$scope.ndMonth;
     }
 
-    $onInit() {
-        this.app.rightMenu = this.$element[0];
-    }
-
-    $onDestroy() {
-        this.app.rightMenu = null;
-    }
-
     get zone() {
         return this._zone;
     }
@@ -152,9 +144,6 @@ Controller.$inject = ['$element', '$scope', '$stateParams', '$http'];
 ngModule.component('vnZoneCalendar', {
     template: require('./index.html'),
     controller: Controller,
-    require: {
-        app: '^vnApp'
-    },
     bindings: {
         zone: '<'
     }

modules/agency/front/card/index.html

@@ -1,7 +1,7 @@
 <vn-main-block>
-    <div class="left-menu">
+    <vn-side-menu side="left">
         <vn-zone-descriptor zone="$ctrl.zone"></vn-zone-descriptor>
         <vn-left-menu></vn-left-menu>
-    </div>
+    </vn-side-menu>
     <div class="content-block" ui-view></div>
 </vn-main-block>

modules/agency/front/location/index.html

@@ -16,8 +16,7 @@
             on-selection="$ctrl.onSelection(item)">
         </vn-treeview>
     </vn-card>
-    <vn-zone-calendar
+    <vn-side-menu side="right">
-        class="right-menu"
+        <vn-zone-calendar zone="::$ctrl.zone"></vn-zone-calendar>
-        zone="::$ctrl.zone">
+    </vn-side-menu>
-    </vn-zone-calendar>
 </div>

modules/claim/front/card/index.html

@@ -1,7 +1,7 @@
 <vn-main-block>
-    <div class="left-menu">
+    <vn-side-menu side="left">
         <vn-claim-descriptor claim="$ctrl.claim"></vn-claim-descriptor>
         <vn-left-menu></vn-left-menu>
-    </div>
+    </vn-side-menu>
     <div class="content-block" ui-view></div>
 </vn-main-block>

modules/client/front/card/index.html

@@ -1,7 +1,7 @@
 <vn-main-block>
-    <div class="left-menu">
+    <vn-side-menu side="left">
         <vn-client-descriptor client="$ctrl.client"></vn-client-descriptor>
         <vn-left-menu></vn-left-menu>
-    </div>
+    </vn-side-menu>
     <div class="content-block" ui-view></div>
 </vn-main-block>

modules/client/front/descriptor-popover/style.scss

@@ -5,8 +5,5 @@ vn-client-descriptor-popover {
         & > vn-card{
             margin: 0!important;
         }
-        .header > a:first-child {
-            display: none
-        }
     }
 }

modules/client/front/search-panel/index.html

@@ -1,5 +1,5 @@
 <div class="search-panel">
-    <form ng-submit="$ctrl.onSearch()">
+<form ng-submit="$ctrl.onSearch()">
     <vn-horizontal>
         <vn-textfield
             vn-one
@@ -71,5 +71,5 @@
     <vn-horizontal margin-large-top>
         <vn-submit label="Search"></vn-submit>
     </vn-horizontal>
-    </form>
+</form>
 </div>

modules/item/front/card/index.html

@@ -1,7 +1,7 @@
 <vn-main-block>
-    <div class="left-menu">
+    <vn-side-menu side="left">
         <vn-item-descriptor item="$ctrl.item"></vn-item-descriptor>
         <vn-left-menu></vn-left-menu>
-    </div>
+    </vn-side-menu>
     <div class="content-block" ui-view></div>
 </vn-main-block>

modules/item/front/descriptor-popover/style.scss

@@ -3,9 +3,5 @@ vn-item-descriptor-popover {
         display: block;
         width: 16em;
         min-height: 28em;
-
-        .header > a:first-child {
-            display: none
-        }
     }
 }

modules/item/front/ticket-descriptor-popover/style.scss

@@ -4,12 +4,8 @@ vn-ticket-descriptor-popover {
         width: 16em;
         max-height: 28em;
 
-        &>vn-card {
+        & > vn-card {
             margin: 0!important;
         }
-
-        .header > a:first-child {
-            display: none
-        }
     }
 }

modules/order/front/card/index.html

@@ -1,7 +1,7 @@
 <vn-main-block>
-    <div class="left-menu">
+    <vn-side-menu side="left">
         <vn-order-descriptor order="$ctrl.order"></vn-order-descriptor>
         <vn-left-menu></vn-left-menu>
-    </div>
+    </vn-side-menu>
     <div class="content-block" ui-view></div>
 </vn-main-block>

modules/order/front/catalog/index.html

@@ -97,10 +97,9 @@
     </vn-card>
     <vn-pagination margin-small-v model="model"></vn-pagination>
 </div>
-<vn-catalog-filter
+<vn-side-menu side="right">
-    class="right-menu" 
+    <vn-catalog-filter order="$ctrl.order"></vn-catalog-filter>
-    order="$ctrl.order">
+</vn-side-menu>
-</vn-catalog-filter>
 <vn-order-prices-popover
     vn-id="pricesPopover"
     order="$ctrl.order">

modules/order/front/filter/index.js

@@ -14,14 +14,6 @@ class Controller {
         this.tags = [];
     }
 
-    $onInit() {
-        this.app.rightMenu = this.$element[0];
-    }
-
-    $onDestroy() {
-        this.app.rightMenu = null;
-    }
-
     get order() {
         return this._order;
     }
@@ -174,8 +166,7 @@ ngModule.component('vnCatalogFilter', {
     template: require('./index.html'),
     controller: Controller,
     require: {
-        catalog: '^vnOrderCatalog',
+        catalog: '^vnOrderCatalog'
-        app: '^vnApp'
     },
     bindings: {
         order: '<',

modules/ticket/front/card/index.html

@@ -1,7 +1,7 @@
 <vn-main-block>
-    <div class="left-menu">
+    <vn-side-menu side="left">
         <vn-ticket-descriptor ticket="$ctrl.ticket"></vn-ticket-descriptor>
         <vn-left-menu></vn-left-menu>
-    </div>
+    </vn-side-menu>
     <div class="content-block" ui-view></div>
 </vn-main-block>

modules/worker/front/card/index.html

@@ -1,7 +1,7 @@
 <vn-main-block>
-    <div class="left-menu">
+    <vn-side-menu side="left">
         <vn-worker-descriptor worker="$ctrl.worker"></vn-worker-descriptor>
         <vn-left-menu></vn-left-menu>
-    </div>
+    </vn-side-menu>
     <div class="content-block" ui-view></div>
 </vn-main-block>

webpack.config.js

@@ -29,7 +29,13 @@ let baseConfig = {
                 loader: 'json-loader!yaml-loader'
             }, {
                 test: /\.html$/,
-                loader: 'html-loader'
+                loader: 'html-loader',
+                options: {
+                    attrs: [
+                        'img:src',
+                        'link:href'
+                    ]
+                }
             }, {
                 test: /\.css$/,
                 loader: 'style-loader!css-loader'
@@ -50,6 +56,10 @@ let baseConfig = {
             }, {
                 test: /\.(svg|png|ttf|woff|woff2)$/,
                 loader: 'file-loader'
+            }, {
+                test: /manifest\.json$/,
+                type: 'javascript/auto',
+                loader: 'file-loader'
             }
         ]
     },