diff --git a/front/Dockerfile b/front/Dockerfile index 0bbf71f40..d6fe5d4f8 100644 --- a/front/Dockerfile +++ b/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;"] diff --git a/front/core/locale/es.yml b/front/core/locale/es.yml index 10d172444..3cd6428f3 100644 --- a/front/core/locale/es.yml +++ b/front/core/locale/es.yml @@ -37,4 +37,5 @@ September: Septiembre October: Octubre November: Noviembre December: Diciembre -Has delivery: Hay reparto \ No newline at end of file +Has delivery: Hay reparto +Loading: Cargando \ No newline at end of file diff --git a/front/salix/components/app/app.html b/front/salix/components/app/app.html index 922b48ce8..c69d07375 100644 --- a/front/salix/components/app/app.html +++ b/front/salix/components/app/app.html @@ -3,10 +3,10 @@ Logo + class="show-menu" + ng-if="$ctrl.leftMenu" + ng-click="$ctrl.leftMenu.show()">
{{$ctrl.$state.current.description}} @@ -14,20 +14,15 @@ + class="show-menu" + ng-if="$ctrl.rightMenu" + ng-click="$ctrl.rightMenu.show()">
+ ng-class="{padding: $ctrl.showTopbar}">
-
-
\ No newline at end of file diff --git a/front/salix/components/app/app.js b/front/salix/components/app/app.js index 6a8ecb247..edf482712 100644 --- a/front/salix/components/app/app.js +++ b/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, - vnApp, - $state - }); - - $transitions.onStart({}, transition => { - let state = transition.targetState().name(); - this.showLeftMenuButton = state.split('.').length >= 3; - this.hideMenus(); + $state, + vnApp }); } @@ -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'), diff --git a/front/salix/components/app/style.scss b/front/salix/components/app/style.scss index 2103c4251..6cb07e4aa 100644 --- a/front/salix/components/app/style.scss +++ b/front/salix/components/app/style.scss @@ -1,9 +1,6 @@ @import "background"; @import "margin"; - -$menu-width: 16em; -$topbar-height: 4em; -$mobile-width: 800px; +@import "variables"; 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; - } } } diff --git a/front/salix/components/background/background.js b/front/salix/components/background/background.js new file mode 100644 index 000000000..423b033ce --- /dev/null +++ b/front/salix/components/background/background.js @@ -0,0 +1 @@ +import './style.scss'; diff --git a/front/salix/components/background/style.scss b/front/salix/components/background/style.scss new file mode 100644 index 000000000..c75b69c52 --- /dev/null +++ b/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; + } + } +} diff --git a/front/salix/components/index.js b/front/salix/components/index.js index b90b221a4..a5ce18e4c 100644 --- a/front/salix/components/index.js +++ b/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'; diff --git a/front/salix/components/main-menu/main-menu.html b/front/salix/components/main-menu/main-menu.html index b607450b8..188f854eb 100644 --- a/front/salix/components/main-menu/main-menu.html +++ b/front/salix/components/main-menu/main-menu.html @@ -5,26 +5,31 @@ class="unselectable"> {{currentUserName}}
- - - - - - - +
+ + + + + +
+
+ + +
- + \ 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 684f63aab..287c89d97 100644 --- a/front/salix/components/main-menu/main-menu.js +++ b/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) { - this.$ = $scope; - this.$http = $http; - this.$translate = $translate; - this.$window = $window; - this.modules = vnModules.get(); - this.vnAuth = vnAuth; + constructor($, $http, vnAuth, vnModules) { + Object.assign(this, { + $, + $http, + vnAuth, + modules: vnModules.get() + }); } $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'), diff --git a/front/salix/components/main-menu/style.scss b/front/salix/components/main-menu/style.scss index 24ca495ea..87cd78557 100644 --- a/front/salix/components/main-menu/style.scss +++ b/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, - & > a > vn-icon { + & > div > vn-icon { display: block; font-size: 2.1em; } diff --git a/front/salix/components/side-menu/side-menu.html b/front/salix/components/side-menu/side-menu.html new file mode 100644 index 000000000..b56d3cece --- /dev/null +++ b/front/salix/components/side-menu/side-menu.html @@ -0,0 +1,9 @@ + + +
+
diff --git a/front/salix/components/side-menu/side-menu.js b/front/salix/components/side-menu/side-menu.js new file mode 100644 index 000000000..14220c4a3 --- /dev/null +++ b/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' + } +}); diff --git a/front/salix/components/side-menu/style.scss b/front/salix/components/side-menu/style.scss new file mode 100644 index 000000000..98084022d --- /dev/null +++ b/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); + } + } +} diff --git a/front/salix/index.ejs b/front/salix/index.ejs index 9f4535540..3aed9d9a6 100644 --- a/front/salix/index.ejs +++ b/front/salix/index.ejs @@ -4,7 +4,7 @@ - + diff --git a/front/salix/manifest.json b/front/salix/manifest.json index bf7e237fb..29deedbcd 100644 --- a/front/salix/manifest.json +++ b/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" + ] } diff --git a/front/salix/styles/descriptor.scss b/front/salix/styles/descriptor.scss index 7837a8326..ddd4ea73e 100644 --- a/front/salix/styles/descriptor.scss +++ b/front/salix/styles/descriptor.scss @@ -77,4 +77,9 @@ } } } +} +vn-popover { + .vn-descriptor > .header > a:first-child { + visibility: hidden; + } } \ No newline at end of file diff --git a/front/salix/styles/variables.scss b/front/salix/styles/variables.scss new file mode 100644 index 000000000..cadbe1fa4 --- /dev/null +++ b/front/salix/styles/variables.scss @@ -0,0 +1,4 @@ + +$menu-width: 16em; +$topbar-height: 4em; +$mobile-width: 800px; \ No newline at end of file diff --git a/modules/agency/front/calendar/index.js b/modules/agency/front/calendar/index.js index a26b705a8..f08a47601 100644 --- a/modules/agency/front/calendar/index.js +++ b/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: '<' } diff --git a/modules/agency/front/card/index.html b/modules/agency/front/card/index.html index 2b981bf29..db5881e42 100644 --- a/modules/agency/front/card/index.html +++ b/modules/agency/front/card/index.html @@ -1,7 +1,7 @@ -
+ -
+
diff --git a/modules/agency/front/location/index.html b/modules/agency/front/location/index.html index 1e2983284..27de3bc1f 100644 --- a/modules/agency/front/location/index.html +++ b/modules/agency/front/location/index.html @@ -16,8 +16,7 @@ on-selection="$ctrl.onSelection(item)"> - - + + + \ No newline at end of file diff --git a/modules/claim/front/card/index.html b/modules/claim/front/card/index.html index 82ce962cb..3a445f0b1 100644 --- a/modules/claim/front/card/index.html +++ b/modules/claim/front/card/index.html @@ -1,7 +1,7 @@ -
+ -
+
diff --git a/modules/client/front/card/index.html b/modules/client/front/card/index.html index 5c8b6f334..3732e0d07 100644 --- a/modules/client/front/card/index.html +++ b/modules/client/front/card/index.html @@ -1,7 +1,7 @@ -
+ -
+
diff --git a/modules/client/front/descriptor-popover/style.scss b/modules/client/front/descriptor-popover/style.scss index 84938dc9c..0262c4ac0 100644 --- a/modules/client/front/descriptor-popover/style.scss +++ b/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 - } } -} \ No newline at end of file +} diff --git a/modules/client/front/search-panel/index.html b/modules/client/front/search-panel/index.html index a5553fcbf..9fb1aaf3e 100644 --- a/modules/client/front/search-panel/index.html +++ b/modules/client/front/search-panel/index.html @@ -1,75 +1,75 @@
-
- - - - - - - - - - - - - - - {{firstName}} {{name}} - - - - - - - - - - - - - - - - - - - - - -
+
+ + + + + + + + + + + + + + + {{firstName}} {{name}} + + + + + + + + + + + + + + + + + + + + + +
diff --git a/modules/item/front/card/index.html b/modules/item/front/card/index.html index d4cf5ad43..aa84532d1 100644 --- a/modules/item/front/card/index.html +++ b/modules/item/front/card/index.html @@ -1,7 +1,7 @@ -
+ -
+
diff --git a/modules/item/front/descriptor-popover/style.scss b/modules/item/front/descriptor-popover/style.scss index 839fc992f..dfc11ab9d 100644 --- a/modules/item/front/descriptor-popover/style.scss +++ b/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 - } } } \ No newline at end of file diff --git a/modules/item/front/ticket-descriptor-popover/style.scss b/modules/item/front/ticket-descriptor-popover/style.scss index d41d28a87..58e65d320 100644 --- a/modules/item/front/ticket-descriptor-popover/style.scss +++ b/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 - } } } \ No newline at end of file diff --git a/modules/order/front/card/index.html b/modules/order/front/card/index.html index b0874ec48..96aa94f6c 100644 --- a/modules/order/front/card/index.html +++ b/modules/order/front/card/index.html @@ -1,7 +1,7 @@ -
+ -
+
diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html index 8de456b93..819afca79 100644 --- a/modules/order/front/catalog/index.html +++ b/modules/order/front/catalog/index.html @@ -97,10 +97,9 @@ - - + + + diff --git a/modules/order/front/filter/index.js b/modules/order/front/filter/index.js index e4a25eb52..05632fbf8 100644 --- a/modules/order/front/filter/index.js +++ b/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', - app: '^vnApp' + catalog: '^vnOrderCatalog' }, bindings: { order: '<', diff --git a/modules/ticket/front/card/index.html b/modules/ticket/front/card/index.html index 99f8933f3..c55064ce6 100644 --- a/modules/ticket/front/card/index.html +++ b/modules/ticket/front/card/index.html @@ -1,7 +1,7 @@ -
+ -
+
diff --git a/modules/worker/front/card/index.html b/modules/worker/front/card/index.html index 79d4c7511..80f1f7a61 100644 --- a/modules/worker/front/card/index.html +++ b/modules/worker/front/card/index.html @@ -1,7 +1,7 @@ -
+ -
+
diff --git a/webpack.config.js b/webpack.config.js index 7824e2e2b..b889f9e6a 100644 --- a/webpack.config.js +++ b/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' } ] },