Items left menu

This commit is contained in:
Juan Ferrer Toribio 2016-11-25 15:35:26 +01:00
parent dee8724005
commit 6ed1a92773
26 changed files with 133 additions and 124 deletions

View File

@ -17,7 +17,7 @@ function config($stateProvider, $urlRouterProvider) {
core.splitingRegister.registerGraph(deps); core.splitingRegister.registerGraph(deps);
$urlRouterProvider.otherwise('/client/client-index'); $urlRouterProvider.otherwise('/client/index');
for (var file in routes) for (var file in routes)
routes[file].forEach(function (route) { routes[file].forEach(function (route) {

View File

@ -1,28 +1,8 @@
$margin-none: 0; $margin-none: 0;
/* Small */
$margin-small: 8px; $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: 16px;
$margin-medium-top: 16px;
$margin-medium-left: 16px;
$margin-medium-right: 16px;
$margin-medium-bottom: 16px;
/* Large */
$margin-large: 32px; $margin-large: 32px;
$margin-large-top: 32px;
$margin-large-left: 32px;
$margin-large-right: 32px;
$margin-large-bottom: 32px;
/* None */ /* None */
@ -36,16 +16,24 @@ html [margin-small], .margin-small {
margin: $margin-small; margin: $margin-small;
} }
html [margin-small-top], .margin-small-top { html [margin-small-top], .margin-small-top {
margin-top: $margin-small-top; margin-top: $margin-small;
} }
html [margin-small-left], .margin-small-left { html [margin-small-left], .margin-small-left {
margin-left: $margin-small-left; margin-left: $margin-small;
} }
html [margin-small-right], .margin-small-right { html [margin-small-right], .margin-small-right {
margin-right: $margin-small-right; margin-right: $margin-small;
} }
html [margin-small-bottom], .margin-small-bottom { 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 */ /* Medium */
@ -54,16 +42,24 @@ html [margin-medium], .margin-medium {
margin: $margin-medium; margin: $margin-medium;
} }
html [margin-medium-top], .margin-medium-top { html [margin-medium-top], .margin-medium-top {
margin-top: $margin-medium-top; margin-top: $margin-medium;
} }
html [margin-medium-left], .margin-medium-left { html [margin-medium-left], .margin-medium-left {
margin-left: $margin-medium-left; margin-left: $margin-medium;
} }
html [margin-medium-right], .margin-medium-right { html [margin-medium-right], .margin-medium-right {
margin-right: $margin-medium-right; margin-right: $margin-medium;
} }
html [margin-medium-bottom], .margin-medium-bottom { 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 */ /* Large */
@ -72,14 +68,22 @@ html [margin-large], .margin-large {
margin: $margin-large; margin: $margin-large;
} }
html [margin-large-top], .margin-large-top { html [margin-large-top], .margin-large-top {
margin-top: $margin-large-top; margin-top: $margin-large;
} }
html [margin-large-left], .margin-large-left { html [margin-large-left], .margin-large-left {
margin-left: $margin-large-left; margin-left: $margin-large;
} }
html [margin-large-right], .margin-large-right { html [margin-large-right], .margin-large-right {
margin-right: $margin-large-right; margin-right: $margin-large;
} }
html [margin-large-bottom], .margin-large-bottom { 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;
} }

View File

@ -1,28 +1,8 @@
$pad-none: 0; $pad-none: 0;
/* Small */
$pad-small: 8px; $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: 16px;
$pad-medium-top: 16px;
$pad-medium-left: 16px;
$pad-medium-right: 16px;
$pad-medium-bottom: 16px;
/* Large */
$pad-large: 32px; $pad-large: 32px;
$pad-large-top: 32px;
$pad-large-left: 32px;
$pad-large-right: 32px;
$pad-large-bottom: 32px;
/* None */ /* None */
@ -35,17 +15,25 @@ html [pad-none], .pad-none {
html [pad-small], .pad-small { html [pad-small], .pad-small {
padding: $pad-small; padding: $pad-small;
} }
html [pad-small-top], .pad-small-top {
padding-top: $pad-small-top;
}
html [pad-small-left], .pad-small-left { html [pad-small-left], .pad-small-left {
padding-left: $pad-small-left; padding-left: $pad-small;
} }
html [pad-small-right], .pad-small-right { 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 { 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 */ /* Medium */
@ -53,17 +41,25 @@ html [pad-small-bottom], .pad-small-bottom {
html [pad-medium], .pad-medium { html [pad-medium], .pad-medium {
padding: $pad-medium; padding: $pad-medium;
} }
html [pad-medium-top], .pad-medium-top {
padding-top: $pad-medium-top;
}
html [pad-medium-left], .pad-medium-left { html [pad-medium-left], .pad-medium-left {
padding-left: $pad-medium-left; padding-left: $pad-medium;
} }
html [pad-medium-right], .pad-medium-right { 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 { 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 */ /* Large */
@ -71,15 +67,23 @@ html [pad-medium-bottom], .pad-medium-bottom {
html [pad-large], .pad-large { html [pad-large], .pad-large {
padding: $pad-large; padding: $pad-large;
} }
html [pad-large-top], .pad-medium-large {
padding-top: $pad-large-top;
}
html [pad-large-left], .pad-large-left { html [pad-large-left], .pad-large-left {
padding-left: $pad-large-left; padding-left: $pad-large;
} }
html [pad-large-right], .pad-large-right { 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 { 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;
} }

View File

@ -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,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 DATE_PICKER_MT,factory as datePickerMt} from './date-picker/date-picker.mt'
export {NAME as VN_MAINMENU, export {NAME as VN_MAINMENU, COMPONENT as VN_MAINMENU_COMPONENT} from './main-menu/main-menu';
COMPONENT as VN_MAINMENU_COMPONENT} from './mainmenu/mainmenu';
export {NAME as ACTIONS, export {NAME as ACTIONS, COMPONENT as ACTIONS_COMPONENT} from './left-menu/actions';
COMPONENT as ACTIONS_COMPONENT} from './leftmenu/actions'; export {NAME as DESCRIPTOR, COMPONENT as DESCRIPTOR_COMPONENT} from './left-menu/descriptor';
export {NAME as DESCRIPTOR, export {NAME as LEFT_MENU, COMPONENT as LEFTMENU_COMPONENT} from './left-menu/left-menu';
COMPONENT as DESCRIPTOR_COMPONENT} from './leftmenu/descriptor'; export {NAME as MENU_ITEM, COMPONENT as MENU_ITEM_COMPONENT} from './left-menu/menu-item';
export {NAME as LEFTMENU, export {NAME as CLIENT_TOP_BAR, COMPONENT as CLIENT_TOP_BAR_COMPONENT} from './topbar/topbar';
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';

View File

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

View File

@ -0,0 +1,5 @@
<vn-horizontal>
<vn-one style="padding: 0 1em;">
<h3>Descriptor</h3>
</vn-one>
</vn-horizontal>

View File

@ -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 {module} from '../module';
import * as util from '../util'; import * as util from '../util';
const _NAME = 'leftmenu'; const _NAME = 'leftMenu';
export const NAME = util.getName(_NAME); export const NAME = util.getName(_NAME);
export const COMPONENT = { export const COMPONENT = {
template: template, template: template,

View File

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

View File

@ -1,8 +1,8 @@
import template from './itemmenu.html'; import template from './menu-item.html';
import {module} from '../module'; import {module} from '../module';
import * as util from '../util'; import * as util from '../util';
const _NAME = 'itemmenu'; const _NAME = 'menuItem';
export const NAME = util.getName(_NAME); export const NAME = util.getName(_NAME);
export const COMPONENT = { export const COMPONENT = {
template: template, template: template,

View File

@ -0,0 +1,4 @@
vn-menu-item a:hover {
color: white !important;
background-color: #424242;
}

View File

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

View File

@ -1,3 +0,0 @@
<vn-horizontal>
descriptor
</vn-horizontal>

View File

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

View File

@ -1,4 +1,4 @@
import template from './mainmenu.html'; import template from './main-menu.html';
import {module} from '../module'; import {module} from '../module';
import * as util from '../util'; import * as util from '../util';

View File

@ -1,7 +1,7 @@
<vn-vertical full-height pad-medium> <vn-vertical full-height pad-large style="box-sizing: border-box;">
<vn-horizontal> <vn-horizontal>
<vn-one> <vn-one>
<h3>Datos básicos</h3> <h3 style="margin-top: 0;">Datos básicos</h3>
</vn-one> </vn-one>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>

View File

@ -1,9 +1,9 @@
import template from './index.html'; import template from './index.html';
import {module} from '../../module'; import {module} from '../../module';
export const _NAME = 'customerDataBasic'; export const _NAME = 'customerBasicData';
//export const NAME = module.getName(_NAME); //export const NAME = module.getName(_NAME);
export const NAME = "vnCustomerDataBasic"; export const NAME = 'vnCustomerBasicData';
export const COMPONENT = { export const COMPONENT = {
template: template template: template

View File

@ -1,4 +1,4 @@
export {NAME as CLIENT_DATA_BASIC_INDEX, export {NAME as CLIENT_BASIC_DATA_INDEX,
COMPONENT as CLIENT_DATA_BASIC_INDEX_COMPONENT} from './databasic/index'; COMPONENT as CLIENT_BASIC_DATA_INDEX_COMPONENT} from './basic-data/index';
export {NAME as CLIENT_INDEX, export {NAME as CLIENT_INDEX,
COMPONENT as CLIENT_INDEX_COMPONENT} from './index/index'; COMPONENT as CLIENT_INDEX_COMPONENT} from './index/index';

View File

@ -2,10 +2,10 @@
<vn-topbar></vn-topbar> <vn-topbar></vn-topbar>
<vn-horizontal class="full-height"> <vn-horizontal class="full-height">
<vn-empty class="bg-content" style="width: 18em"> <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-empty>
<vn-auto> <vn-auto>
<vn-customer-data-basic></vn-customer-data-basic> <vn-customer-basic-data></vn-customer-basic-data>
</vn-auto> </vn-auto>
</vn-horizontal> </vn-horizontal>
</vn-vertical> </vn-vertical>

View File

@ -8,11 +8,11 @@ export const COMPONENT = {
template: template, template: template,
controller: function(){ controller: function(){
this.items = [ this.items = [
{text: "Datos básicos", image: "person"}, {text: "Datos básicos", image: "person", href: "#/client/basic-data"},
{text: "Datos facturación", image: "assignment"}, {text: "Datos facturación", image: "assignment", href: "#/client/invoicing-data"},
{text: "Acceso web", image: "language"}, {text: "Acceso web", image: "language", href: "#/client/web-access"},
{text: "Consignatarios", image: "local_shipping"}, {text: "Consignatarios", image: "local_shipping", href: "#/client/addresses"},
{text: "Notas", image: "insert_drive_file"} {text: "Notas", image: "insert_drive_file", href: "#/client/notes"}
] ]
} }
}; };

View File

@ -1,9 +1,8 @@
[{ [{
url: '/client/client-index', url: '/client/index',
state: 'client-index', state: 'client-index',
template: '<vn-client-index full-height></vn-client-index>', template: '<vn-client-index full-height></vn-client-index>',
module: 'crud', module: 'crud',
description: '', description: '',
image: '', image: '',
} }]
]

View File

@ -78,6 +78,7 @@ gulp.task('webpack-dev-server', ['spliting'], function() {
contentBase: buildDir, contentBase: buildDir,
quiet: false, quiet: false,
noInfo: false, noInfo: false,
//hot: true,
stats: { stats: {
assets: true, assets: true,
colors: true, colors: true,

View File

@ -2,9 +2,8 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Salix</title> <title>Salix</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
rel="stylesheet">
</head> </head>
<body> <body>
<vn-vertical id="app" class="full-height"> <vn-vertical id="app" class="full-height">