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

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 RUN rm sites-enabled/default && ln -s ../sites-available/salix sites-enabled/salix
COPY dist /salix/dist COPY dist /salix/dist
COPY front/salix/manifest.json /salix/dist/
CMD ["nginx", "-g", "daemon off;"] CMD ["nginx", "-g", "daemon off;"]

View File

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

View File

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

View File

@ -1,19 +1,18 @@
import ngModule from '../../module'; import ngModule from '../../module';
import './style.scss'; 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 { export default class App {
constructor($, $element, vnApp, $state, $transitions) { constructor($, $state, vnApp) {
Object.assign(this, { 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'; 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) { showMessage(message) {
this.$.snackbar.show({message: message}); this.$.snackbar.show({message: message});
} }
@ -69,7 +41,7 @@ export default class App {
this.$.snackbar.showError({message: message}); this.$.snackbar.showError({message: message});
} }
} }
App.$inject = ['$scope', '$element', 'vnApp', '$state', '$transitions']; App.$inject = ['$scope', '$state', 'vnApp'];
ngModule.component('vnApp', { ngModule.component('vnApp', {
template: require('./app.html'), template: require('./app.html'),

View File

@ -1,9 +1,6 @@
@import "background"; @import "background";
@import "margin"; @import "margin";
@import "variables";
$menu-width: 16em;
$topbar-height: 4em;
$mobile-width: 800px;
body { body {
@extend .bg-content; @extend .bg-content;
@ -72,27 +69,6 @@ vn-app {
margin: 0 auto; margin: 0 auto;
padding-left: $menu-width; 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 { .main-with-right-menu {
padding-right: $menu-width; 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) { @media screen and (max-width: $mobile-width) {
& > vn-topbar > header { & > vn-topbar > header {
@ -135,32 +99,10 @@ vn-app {
} }
vn-main-block { vn-main-block {
padding-left: 0; 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 { .main-with-right-menu {
padding-right: 0; padding-right: 0;
} }
} }
& > .background.shown {
display: block;
opacity: .3;
}
} }
} }

View File

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

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

View File

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

View File

@ -5,26 +5,31 @@
class="unselectable"> class="unselectable">
{{currentUserName}} {{currentUserName}}
</div> </div>
<vn-icon <div>
id="apps" <vn-icon
icon="apps" id="apps"
vn-popover="apps-menu" icon="apps"
translate-attr="{title: 'Applications'}"> vn-popover="apps-menu"
</vn-icon> translate-attr="{title: 'Applications'}">
<vn-menu vn-id="apps-menu"> </vn-icon>
<ul pad-small> <vn-menu vn-id="apps-menu">
<li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}"> <ul pad-small>
<vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon> <li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
<span translate>{{::mod.name}}</span> <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
</li> <span translate>{{::mod.name}}</span>
</ul> </li>
</vn-menu> </ul>
<vn-icon </vn-menu>
id="logout" </div>
icon="exit_to_app" <div>
translate-attr="{title: 'Logout'}" <vn-icon
ng-click="$ctrl.onLogoutClick()"> id="logout"
</vn-icon> icon="exit_to_app"
translate-attr="{title: 'Logout'}"
ng-click="$ctrl.onLogoutClick()">
</vn-icon>
</div>
</div> </div>
<vn-user-configuration-popover vn-id="popover"> <vn-user-configuration-popover
vn-id="popover">
</vn-user-configuration-popover> </vn-user-configuration-popover>

View File

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

View File

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

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>

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

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

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no"/> <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"/> <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> <title vn-title translate></title>
</head> </head>
<body> <body>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -16,8 +16,7 @@
on-selection="$ctrl.onSelection(item)"> on-selection="$ctrl.onSelection(item)">
</vn-treeview> </vn-treeview>
</vn-card> </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> </div>

View File

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

View File

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

View File

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

View File

@ -1,75 +1,75 @@
<div class="search-panel"> <div class="search-panel">
<form ng-submit="$ctrl.onSearch()"> <form ng-submit="$ctrl.onSearch()">
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one vn-one
label="General search" label="General search"
model="filter.search" model="filter.search"
vn-focus> vn-focus>
</vn-textfield> </vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one vn-one
label="Client id" label="Client id"
model="filter.id"> model="filter.id">
</vn-textfield> </vn-textfield>
<vn-textfield <vn-textfield
vn-one vn-one
label="Tax number" label="Tax number"
model="filter.fi"> model="filter.fi">
</vn-textfield> </vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one label="Name" vn-one label="Name"
model="filter.name"> model="filter.name">
</vn-textfield> </vn-textfield>
<vn-autocomplete <vn-autocomplete
vn-one vn-one
field="filter.salesPersonFk" field="filter.salesPersonFk"
url="/client/api/Clients/activeWorkersWithRole" url="/client/api/Clients/activeWorkersWithRole"
search-function="{firstName: $search}" search-function="{firstName: $search}"
show-field="firstName" show-field="firstName"
value-field="id" value-field="id"
where="{role: 'salesPerson'}" where="{role: 'salesPerson'}"
label="Salesperson"> label="Salesperson">
<tpl-item>{{firstName}} {{name}}</tpl-item> <tpl-item>{{firstName}} {{name}}</tpl-item>
</vn-autocomplete> </vn-autocomplete>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one vn-one
label="Social name" label="Social name"
model="filter.socialName"> model="filter.socialName">
</vn-textfield> </vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one vn-one
label="Town/City" label="Town/City"
model="filter.city"> model="filter.city">
</vn-textfield> </vn-textfield>
<vn-textfield <vn-textfield
vn-one vn-one
label="Postcode" label="Postcode"
model="filter.postcode"> model="filter.postcode">
</vn-textfield> </vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one vn-one
label="Email" label="Email"
model="filter.email"> model="filter.email">
</vn-textfield> </vn-textfield>
<vn-textfield <vn-textfield
vn-one vn-one
label="Phone" label="Phone"
model="filter.phone"> model="filter.phone">
</vn-textfield> </vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal margin-large-top> <vn-horizontal margin-large-top>
<vn-submit label="Search"></vn-submit> <vn-submit label="Search"></vn-submit>
</vn-horizontal> </vn-horizontal>
</form> </form>
</div> </div>

View File

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

View File

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

View File

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

View File

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

View File

@ -97,10 +97,9 @@
</vn-card> </vn-card>
<vn-pagination margin-small-v model="model"></vn-pagination> <vn-pagination margin-small-v model="model"></vn-pagination>
</div> </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-order-prices-popover
vn-id="pricesPopover" vn-id="pricesPopover"
order="$ctrl.order"> order="$ctrl.order">

View File

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

View File

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

View File

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

View File

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