Items left menu
This commit is contained in:
parent
dee8724005
commit
6ed1a92773
|
@ -17,7 +17,7 @@ function config($stateProvider, $urlRouterProvider) {
|
|||
|
||||
core.splitingRegister.registerGraph(deps);
|
||||
|
||||
$urlRouterProvider.otherwise('/client/client-index');
|
||||
$urlRouterProvider.otherwise('/client/index');
|
||||
|
||||
for (var file in routes)
|
||||
routes[file].forEach(function (route) {
|
||||
|
|
|
@ -1,28 +1,8 @@
|
|||
|
||||
$margin-none: 0;
|
||||
|
||||
/* Small */
|
||||
|
||||
$margin-small: 8px;
|
||||
$margin-small-top: 8px;
|
||||
$margin-small-left: 8px;
|
||||
$margin-small-right: 8px;
|
||||
$margin-small-bottom: 8px;
|
||||
|
||||
/* Medium */
|
||||
|
||||
$margin-medium: 16px;
|
||||
$margin-medium-top: 16px;
|
||||
$margin-medium-left: 16px;
|
||||
$margin-medium-right: 16px;
|
||||
$margin-medium-bottom: 16px;
|
||||
|
||||
/* Large */
|
||||
|
||||
$margin-large: 32px;
|
||||
$margin-large-top: 32px;
|
||||
$margin-large-left: 32px;
|
||||
$margin-large-right: 32px;
|
||||
$margin-large-bottom: 32px;
|
||||
|
||||
/* None */
|
||||
|
||||
|
@ -36,16 +16,24 @@ html [margin-small], .margin-small {
|
|||
margin: $margin-small;
|
||||
}
|
||||
html [margin-small-top], .margin-small-top {
|
||||
margin-top: $margin-small-top;
|
||||
margin-top: $margin-small;
|
||||
}
|
||||
html [margin-small-left], .margin-small-left {
|
||||
margin-left: $margin-small-left;
|
||||
margin-left: $margin-small;
|
||||
}
|
||||
html [margin-small-right], .margin-small-right {
|
||||
margin-right: $margin-small-right;
|
||||
margin-right: $margin-small;
|
||||
}
|
||||
html [margin-small-bottom], .margin-small-bottom {
|
||||
margin-bottom: $margin-small-bottom;
|
||||
margin-bottom: $margin-small;
|
||||
}
|
||||
html [margin-small-v], .margin-small-v {
|
||||
margin-left: $margin-small;
|
||||
margin-right: $margin-small;
|
||||
}
|
||||
html [margin-small-h], .margin-small-h {
|
||||
margin-top: $margin-small;
|
||||
margin-bottom: $margin-small;
|
||||
}
|
||||
|
||||
/* Medium */
|
||||
|
@ -54,16 +42,24 @@ html [margin-medium], .margin-medium {
|
|||
margin: $margin-medium;
|
||||
}
|
||||
html [margin-medium-top], .margin-medium-top {
|
||||
margin-top: $margin-medium-top;
|
||||
margin-top: $margin-medium;
|
||||
}
|
||||
html [margin-medium-left], .margin-medium-left {
|
||||
margin-left: $margin-medium-left;
|
||||
margin-left: $margin-medium;
|
||||
}
|
||||
html [margin-medium-right], .margin-medium-right {
|
||||
margin-right: $margin-medium-right;
|
||||
margin-right: $margin-medium;
|
||||
}
|
||||
html [margin-medium-bottom], .margin-medium-bottom {
|
||||
margin-bottom: $margin-medium-bottom;
|
||||
margin-bottom: $margin-medium;
|
||||
}
|
||||
html [margin-medium-v], .margin-medium-v {
|
||||
margin-left: $margin-medium;
|
||||
margin-right: $margin-medium;
|
||||
}
|
||||
html [margin-medium-h], .margin-medium-h {
|
||||
margin-top: $margin-medium;
|
||||
margin-bottom: $margin-medium;
|
||||
}
|
||||
|
||||
/* Large */
|
||||
|
@ -72,14 +68,22 @@ html [margin-large], .margin-large {
|
|||
margin: $margin-large;
|
||||
}
|
||||
html [margin-large-top], .margin-large-top {
|
||||
margin-top: $margin-large-top;
|
||||
margin-top: $margin-large;
|
||||
}
|
||||
html [margin-large-left], .margin-large-left {
|
||||
margin-left: $margin-large-left;
|
||||
margin-left: $margin-large;
|
||||
}
|
||||
html [margin-large-right], .margin-large-right {
|
||||
margin-right: $margin-large-right;
|
||||
margin-right: $margin-large;
|
||||
}
|
||||
html [margin-large-bottom], .margin-large-bottom {
|
||||
margin-bottom: $margin-large-bottom;
|
||||
margin-bottom: $margin-large;
|
||||
}
|
||||
html [margin-large-v], .margin-large-v {
|
||||
margin-left: $margin-large;
|
||||
margin-right: $margin-large;
|
||||
}
|
||||
html [margin-large-h], .margin-large-h {
|
||||
margin-top: $margin-large;
|
||||
margin-bottom: $margin-large;
|
||||
}
|
||||
|
|
|
@ -1,28 +1,8 @@
|
|||
|
||||
$pad-none: 0;
|
||||
|
||||
/* Small */
|
||||
|
||||
$pad-small: 8px;
|
||||
$pad-small-top: 8px;
|
||||
$pad-small-left: 8px;
|
||||
$pad-small-right: 8px;
|
||||
$pad-small-bottom: 8px;
|
||||
|
||||
/* Medium */
|
||||
|
||||
$pad-medium: 16px;
|
||||
$pad-medium-top: 16px;
|
||||
$pad-medium-left: 16px;
|
||||
$pad-medium-right: 16px;
|
||||
$pad-medium-bottom: 16px;
|
||||
|
||||
/* Large */
|
||||
|
||||
$pad-large: 32px;
|
||||
$pad-large-top: 32px;
|
||||
$pad-large-left: 32px;
|
||||
$pad-large-right: 32px;
|
||||
$pad-large-bottom: 32px;
|
||||
|
||||
/* None */
|
||||
|
||||
|
@ -35,17 +15,25 @@ html [pad-none], .pad-none {
|
|||
html [pad-small], .pad-small {
|
||||
padding: $pad-small;
|
||||
}
|
||||
html [pad-small-top], .pad-small-top {
|
||||
padding-top: $pad-small-top;
|
||||
}
|
||||
html [pad-small-left], .pad-small-left {
|
||||
padding-left: $pad-small-left;
|
||||
padding-left: $pad-small;
|
||||
}
|
||||
html [pad-small-right], .pad-small-right {
|
||||
padding-right: $pad-small-right;
|
||||
padding-right: $pad-small;
|
||||
}
|
||||
html [pad-small-top], .pad-small-top {
|
||||
padding-top: $pad-small;
|
||||
}
|
||||
html [pad-small-bottom], .pad-small-bottom {
|
||||
padding-bottom: $pad-small-bottom;
|
||||
padding-bottom: $pad-small;
|
||||
}
|
||||
html [pad-small-v], .pad-small-v {
|
||||
padding-left: $pad-small;
|
||||
padding-right: $pad-small;
|
||||
}
|
||||
html [pad-small-h], .pad-small-h {
|
||||
padding-top: $pad-small;
|
||||
padding-bottom: $pad-small;
|
||||
}
|
||||
|
||||
/* Medium */
|
||||
|
@ -53,17 +41,25 @@ html [pad-small-bottom], .pad-small-bottom {
|
|||
html [pad-medium], .pad-medium {
|
||||
padding: $pad-medium;
|
||||
}
|
||||
html [pad-medium-top], .pad-medium-top {
|
||||
padding-top: $pad-medium-top;
|
||||
}
|
||||
html [pad-medium-left], .pad-medium-left {
|
||||
padding-left: $pad-medium-left;
|
||||
padding-left: $pad-medium;
|
||||
}
|
||||
html [pad-medium-right], .pad-medium-right {
|
||||
padding-right: $pad-medium-right;
|
||||
padding-right: $pad-medium;
|
||||
}
|
||||
html [pad-medium-top], .pad-medium-top {
|
||||
padding-top: $pad-medium;
|
||||
}
|
||||
html [pad-medium-bottom], .pad-medium-bottom {
|
||||
padding-bottom: $pad-medium-bottom;
|
||||
padding-bottom: $pad-medium;
|
||||
}
|
||||
html [pad-medium-v], .pad-medium-v {
|
||||
padding-left: $pad-medium;
|
||||
padding-right: $pad-medium;
|
||||
}
|
||||
html [pad-medium-h], .pad-medium-h {
|
||||
padding-top: $pad-medium;
|
||||
padding-bottom: $pad-medium;
|
||||
}
|
||||
|
||||
/* Large */
|
||||
|
@ -71,15 +67,23 @@ html [pad-medium-bottom], .pad-medium-bottom {
|
|||
html [pad-large], .pad-large {
|
||||
padding: $pad-large;
|
||||
}
|
||||
html [pad-large-top], .pad-medium-large {
|
||||
padding-top: $pad-large-top;
|
||||
}
|
||||
html [pad-large-left], .pad-large-left {
|
||||
padding-left: $pad-large-left;
|
||||
padding-left: $pad-large;
|
||||
}
|
||||
html [pad-large-right], .pad-large-right {
|
||||
padding-right: $pad-large-right;
|
||||
padding-right: $pad-large;
|
||||
}
|
||||
html [pad-large-top], .pad-large-top {
|
||||
padding-top: $pad-large;
|
||||
}
|
||||
html [pad-large-bottom], .pad-large-bottom {
|
||||
padding-bottom: $pad-large-bottom;
|
||||
padding-bottom: $pad-large;
|
||||
}
|
||||
html [pad-large-v], .pad-large-v {
|
||||
padding-left: $pad-large;
|
||||
padding-right: $pad-large;
|
||||
}
|
||||
html [pad-large-h], .pad-large-h {
|
||||
padding-top: $pad-large;
|
||||
padding-bottom: $pad-large;
|
||||
}
|
||||
|
|
|
@ -44,17 +44,11 @@ export {NAME as COMBO_MT,factory as comboMt} from './combo/combo.mt'
|
|||
export {NAME as DATE_PICKER,directive as DatePickerDirective} from './date-picker/date-picker'
|
||||
export {NAME as DATE_PICKER_MT,factory as datePickerMt} from './date-picker/date-picker.mt'
|
||||
|
||||
export {NAME as VN_MAINMENU,
|
||||
COMPONENT as VN_MAINMENU_COMPONENT} from './mainmenu/mainmenu';
|
||||
export {NAME as VN_MAINMENU, COMPONENT as VN_MAINMENU_COMPONENT} from './main-menu/main-menu';
|
||||
|
||||
export {NAME as ACTIONS,
|
||||
COMPONENT as ACTIONS_COMPONENT} from './leftmenu/actions';
|
||||
export {NAME as DESCRIPTOR,
|
||||
COMPONENT as DESCRIPTOR_COMPONENT} from './leftmenu/descriptor';
|
||||
export {NAME as LEFTMENU,
|
||||
COMPONENT as LEFTMENU_COMPONENT} from './leftmenu/leftmenu';
|
||||
export {NAME as ITEMMENU,
|
||||
COMPONENT as ITEMMENU_COMPONENT} from './leftmenu/itemmenu';
|
||||
export {NAME as CLIENT_TOP_BAR,
|
||||
COMPONENT as CLIENT_TOP_BAR_COMPONENT} from './topbar/topbar';
|
||||
export {NAME as ACTIONS, COMPONENT as ACTIONS_COMPONENT} from './left-menu/actions';
|
||||
export {NAME as DESCRIPTOR, COMPONENT as DESCRIPTOR_COMPONENT} from './left-menu/descriptor';
|
||||
export {NAME as LEFT_MENU, COMPONENT as LEFTMENU_COMPONENT} from './left-menu/left-menu';
|
||||
export {NAME as MENU_ITEM, COMPONENT as MENU_ITEM_COMPONENT} from './left-menu/menu-item';
|
||||
export {NAME as CLIENT_TOP_BAR, COMPONENT as CLIENT_TOP_BAR_COMPONENT} from './topbar/topbar';
|
||||
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
<vn-horizontal>
|
||||
<ul style="list-style-type: none; margin: 0; padding: 0; width: 100%;">
|
||||
<vn-menu-item ng-repeat="item in $ctrl.items" item = "item"></vn-menu-item>
|
||||
</ul>
|
||||
</vn-horizontal>
|
|
@ -0,0 +1,5 @@
|
|||
<vn-horizontal>
|
||||
<vn-one style="padding: 0 1em;">
|
||||
<h3>Descriptor</h3>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
|
@ -1,8 +1,9 @@
|
|||
import template from './leftmenu.html';
|
||||
import template from './left-menu.html';
|
||||
import style from './style.css';
|
||||
import {module} from '../module';
|
||||
import * as util from '../util';
|
||||
|
||||
const _NAME = 'leftmenu';
|
||||
const _NAME = 'leftMenu';
|
||||
export const NAME = util.getName(_NAME);
|
||||
export const COMPONENT = {
|
||||
template: template,
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
<li>
|
||||
<a href="{{$ctrl.item.href}}" style="display: block; text-decoration: none; color: inherit; padding: .5em 1em;">
|
||||
<i class="material-icons" style="float: right; margin-left: .4em;">keyboard_arrow_right</i>
|
||||
<i class="material-icons" style="vertical-align: middle; margin-right: .4em;">{{$ctrl.item.image}}</i>
|
||||
<span>{{$ctrl.item.text}}</span>
|
||||
</a>
|
||||
</li>
|
|
@ -1,8 +1,8 @@
|
|||
import template from './itemmenu.html';
|
||||
import template from './menu-item.html';
|
||||
import {module} from '../module';
|
||||
import * as util from '../util';
|
||||
|
||||
const _NAME = 'itemmenu';
|
||||
const _NAME = 'menuItem';
|
||||
export const NAME = util.getName(_NAME);
|
||||
export const COMPONENT = {
|
||||
template: template,
|
|
@ -0,0 +1,4 @@
|
|||
vn-menu-item a:hover {
|
||||
color: white !important;
|
||||
background-color: #424242;
|
||||
}
|
|
@ -1,5 +0,0 @@
|
|||
<vn-horizontal>
|
||||
<ul style="list-style-type: none; margin: 0; padding: 1.5em; width: 100%;">
|
||||
<vn-itemmenu ng-repeat="item in $ctrl.items" item = "item"></vn-item>
|
||||
</ul>
|
||||
</vn-horizontal>
|
|
@ -1,3 +0,0 @@
|
|||
<vn-horizontal>
|
||||
descriptor
|
||||
</vn-horizontal>
|
|
@ -1,7 +0,0 @@
|
|||
<!--<a ui-sref="{{$ctrl.item.link}}">-->
|
||||
<li style="margin-top: 1em;">
|
||||
<i class="material-icons" style="float: right; margin-left: .4em;">keyboard_arrow_right</i>
|
||||
<i class="material-icons" style="vertical-align: middle; margin-right: .4em;">{{$ctrl.item.image}}</i>
|
||||
<span>{{$ctrl.item.text}}</span>
|
||||
</li>
|
||||
<!--</a>-->
|
|
@ -1,4 +1,4 @@
|
|||
import template from './mainmenu.html';
|
||||
import template from './main-menu.html';
|
||||
import {module} from '../module';
|
||||
import * as util from '../util';
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<vn-vertical full-height pad-medium>
|
||||
<vn-vertical full-height pad-large style="box-sizing: border-box;">
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<h3>Datos básicos</h3>
|
||||
<h3 style="margin-top: 0;">Datos básicos</h3>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal>
|
|
@ -1,9 +1,9 @@
|
|||
import template from './index.html';
|
||||
import {module} from '../../module';
|
||||
|
||||
export const _NAME = 'customerDataBasic';
|
||||
export const _NAME = 'customerBasicData';
|
||||
//export const NAME = module.getName(_NAME);
|
||||
export const NAME = "vnCustomerDataBasic";
|
||||
export const NAME = 'vnCustomerBasicData';
|
||||
|
||||
export const COMPONENT = {
|
||||
template: template
|
|
@ -1,4 +1,4 @@
|
|||
export {NAME as CLIENT_DATA_BASIC_INDEX,
|
||||
COMPONENT as CLIENT_DATA_BASIC_INDEX_COMPONENT} from './databasic/index';
|
||||
export {NAME as CLIENT_BASIC_DATA_INDEX,
|
||||
COMPONENT as CLIENT_BASIC_DATA_INDEX_COMPONENT} from './basic-data/index';
|
||||
export {NAME as CLIENT_INDEX,
|
||||
COMPONENT as CLIENT_INDEX_COMPONENT} from './index/index';
|
||||
|
|
|
@ -2,10 +2,10 @@
|
|||
<vn-topbar></vn-topbar>
|
||||
<vn-horizontal class="full-height">
|
||||
<vn-empty class="bg-content" style="width: 18em">
|
||||
<vn-leftmenu items = "$ctrl.items" ></vn-leftmenu>
|
||||
<vn-left-menu items="$ctrl.items"></vn-left-menu>
|
||||
</vn-empty>
|
||||
<vn-auto>
|
||||
<vn-customer-data-basic></vn-customer-data-basic>
|
||||
<vn-customer-basic-data></vn-customer-basic-data>
|
||||
</vn-auto>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
|
|
|
@ -8,11 +8,11 @@ export const COMPONENT = {
|
|||
template: template,
|
||||
controller: function(){
|
||||
this.items = [
|
||||
{text: "Datos básicos", image: "person"},
|
||||
{text: "Datos facturación", image: "assignment"},
|
||||
{text: "Acceso web", image: "language"},
|
||||
{text: "Consignatarios", image: "local_shipping"},
|
||||
{text: "Notas", image: "insert_drive_file"}
|
||||
{text: "Datos básicos", image: "person", href: "#/client/basic-data"},
|
||||
{text: "Datos facturación", image: "assignment", href: "#/client/invoicing-data"},
|
||||
{text: "Acceso web", image: "language", href: "#/client/web-access"},
|
||||
{text: "Consignatarios", image: "local_shipping", href: "#/client/addresses"},
|
||||
{text: "Notas", image: "insert_drive_file", href: "#/client/notes"}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
[{
|
||||
url: '/client/client-index',
|
||||
url: '/client/index',
|
||||
state: 'client-index',
|
||||
template: '<vn-client-index full-height></vn-client-index>',
|
||||
module: 'crud',
|
||||
description: '',
|
||||
image: '',
|
||||
}
|
||||
]
|
||||
}]
|
||||
|
|
|
@ -78,6 +78,7 @@ gulp.task('webpack-dev-server', ['spliting'], function() {
|
|||
contentBase: buildDir,
|
||||
quiet: false,
|
||||
noInfo: false,
|
||||
//hot: true,
|
||||
stats: {
|
||||
assets: true,
|
||||
colors: true,
|
||||
|
|
|
@ -3,8 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Salix</title>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<vn-vertical id="app" class="full-height">
|
||||
|
|
Loading…
Reference in New Issue