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);
$urlRouterProvider.otherwise('/client/client-index');
$urlRouterProvider.otherwise('/client/index');
for (var file in routes)
routes[file].forEach(function (route) {

View File

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

View File

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

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

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 * as util from '../util';
const _NAME = 'leftmenu';
const _NAME = 'leftMenu';
export const NAME = util.getName(_NAME);
export const COMPONENT = {
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 * as util from '../util';
const _NAME = 'itemmenu';
const _NAME = 'menuItem';
export const NAME = util.getName(_NAME);
export const COMPONENT = {
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 * 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-one>
<h3>Datos básicos</h3>
<h3 style="margin-top: 0;">Datos básicos</h3>
</vn-one>
</vn-horizontal>
<vn-horizontal>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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