verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 57 Releases Wiki Activity

vnSideMenu, vnBackground, style fixes

This commit is contained in:
Juan Ferrer 2019-02-05 09:13:15 +01:00
parent 84c0002cb1
commit 1dbb75a1b8
34 changed files with 331 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/Dockerfile
View File

@ -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;"]

1
front/core/locale/es.yml
View File

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

19
front/salix/components/app/app.html
View File

@ -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>

48
front/salix/components/app/app.js
View File

@ -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'),

60
front/salix/components/app/style.scss
View File

@ -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;
}
}
}

1
front/salix/components/background/background.js Normal file
View File

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

26
front/salix/components/background/style.scss Normal file
View File

@ -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;
}
}
}

2
front/salix/components/index.js
View File

@ -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';

7
front/salix/components/main-menu/main-menu.html
View File

@ -5,6 +5,7 @@
class="unselectable">
{{currentUserName}}
</div>
<div>
<vn-icon
id="apps"
icon="apps"
@ -19,6 +20,8 @@
</li>
</ul>
</vn-menu>
</div>
<div>
<vn-icon
id="logout"
icon="exit_to_app"
@ -26,5 +29,7 @@
ng-click="$ctrl.onLogoutClick()">
</vn-icon>
</div>
<vn-user-configuration-popover vn-id="popover">
</div>
<vn-user-configuration-popover
vn-id="popover">
</vn-user-configuration-popover>

16
front/salix/components/main-menu/main-menu.js
View File

@ -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'),

7
front/salix/components/main-menu/style.scss
View File

@ -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;
}

9
front/salix/components/side-menu/side-menu.html Normal file
View File

@ -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>

78
front/salix/components/side-menu/side-menu.js Normal file
View File

@ -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'
}
});

37
front/salix/components/side-menu/style.scss Normal file
View File

@ -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);
}
}
}

2
front/salix/index.ejs
View File

@ -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>

8
front/salix/manifest.json
View File

@ -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"
]
}

5
front/salix/styles/descriptor.scss
View File

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

4
front/salix/styles/variables.scss Normal file
View File

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

11
modules/agency/front/calendar/index.js
View File

@ -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: '<'
}

4
modules/agency/front/card/index.html
View File

@ -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>

7
modules/agency/front/location/index.html
View File

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

4
modules/claim/front/card/index.html
View File

@ -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>

4
modules/client/front/card/index.html
View File

@ -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>

3
modules/client/front/descriptor-popover/style.scss
View File

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

4
modules/item/front/card/index.html
View File

@ -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>

4
modules/item/front/descriptor-popover/style.scss
View File

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

4
modules/item/front/ticket-descriptor-popover/style.scss
View File

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

4
modules/order/front/card/index.html
View File

@ -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>

7
modules/order/front/catalog/index.html
View File

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

11
modules/order/front/filter/index.js
View File

@ -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: '<',

4
modules/ticket/front/card/index.html
View File

@ -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>

4
modules/worker/front/card/index.html
View File

@ -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>

12
webpack.config.js
View File

@ -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'
}
]
},