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

vnPopover refactor: code duplications removed, improved style

This commit is contained in:
Juan 2018-03-12 12:31:50 +01:00
parent c9ba1d00e4
commit 6eed9f081b
23 changed files with 408 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/client/routes.json
View File

@ -1,7 +1,7 @@
{
"module": "client",
"name": "Clients",
"icon": "/static/images/icon_client.png",
"icon": "person",
"validations" : true,
"routes": [
{

2
client/client/src/addresses/addresses.html
View File

@ -30,7 +30,7 @@
<span>{{::observation.description}}</span>
</vn-one>
</vn-vertical>
<a vn-auto ui-sref="clientCard.addresses.edit({addressId: {{address.id}}})">
<a vn-auto ui-sref="clientCard.addresses.edit({addressId: {{::address.id}}})">
<vn-icon-button icon="edit"></vn-icon-button>
</a>
</vn-horizontal>

7
client/core/src/components/autocomplete/style.scss
View File

@ -9,13 +9,6 @@ vn-autocomplete > div > .mdl-textfield {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:focus {
outline: none;
}
&::-moz-focus-inner {
border: 0;
}
}
& > .icons {
display: none;

3
client/core/src/components/date-picker/style.scss
View File

@ -1,7 +1,4 @@
vn-date-picker {
div {
outline: none; //remove chrome outline
}
.mdl-chip__action {
position: absolute;
width: auto;

69
client/core/src/components/drop-down/drop-down.html
View File

@ -1,35 +1,38 @@
<div
class="body"
ng-mousedown="$ctrl.onMouseDown($event)">
<div ng-show="$ctrl.showFilter" class="filter">
<input
type="text"
ng-model="$ctrl.search"
tabindex="-1"
class="search"
ng-blur="$ctrl.onFocusOut()"
translate-attr="{placeholder: 'Search'}"/>
<vn-icon
icon="clear"
ng-click="$ctrl.onClearClick()"
translate-attr="{title: 'Clear'}">
</vn-icon>
</div>
<vn-model
vn-id="model"
on-data-change="$ctrl.onModelDataChange()">
</vn-model>
<div class="list" tabindex="-1">
<ul
class="dropdown"
ng-click="$ctrl.onContainerClick($event)">
</ul>
<div
ng-if="$ctrl.statusText"
ng-click="$ctrl.onLoadMoreClick($event)"
class="status"
translate>
{{$ctrl.statusText}}
<vn-model
vn-id="model"
on-data-change="$ctrl.onModelDataChange()">
</vn-model>
<vn-popover
vn-id="popover"
on-open="$ctrl.onOpen()"
on-close="$ctrl.onClose()">
<div class="dropdown">
<div ng-show="$ctrl.showFilter" class="filter">
<input
type="text"
ng-model="$ctrl.search"
tabindex="-1"
class="search"
ng-blur="$ctrl.onFocusOut()"
translate-attr="{placeholder: 'Search'}"/>
<vn-icon
icon="clear"
ng-click="$ctrl.onClearClick()"
translate-attr="{title: 'Clear'}">
</vn-icon>
</div>
<div class="list" tabindex="-1">
<ul
class="dropdown"
ng-click="$ctrl.onContainerClick($event)">
</ul>
<div
ng-if="$ctrl.statusText"
ng-click="$ctrl.onLoadMoreClick($event)"
class="status"
translate>
{{$ctrl.statusText}}
</div>
</div>
</div>
</div>
</vn-popover>

128
client/core/src/components/drop-down/drop-down.js
View File

@ -4,45 +4,34 @@ import './style.scss';
import './model';
export default class DropDown extends Component {
constructor($element, $scope, $transclude, $timeout, $http, $translate) {
constructor($element, $scope, $transclude, $timeout, $http) {
super($element, $scope);
this.$transclude = $transclude;
this.$timeout = $timeout;
this.$translate = $translate;
this.valueField = 'id';
this.showField = 'name';
this._search = undefined;
this._shown = false;
this._activeOption = -1;
this.showLoadMore = true;
this.showFilter = true;
this.input = this.element.querySelector('.search');
this.body = this.element.querySelector('.body');
this.container = this.element.querySelector('ul');
this.list = this.element.querySelector('.list');
this.docKeyDownHandler = e => this.onDocKeyDown(e);
this.docFocusInHandler = e => this.onDocFocusIn(e);
}
this.element.addEventListener('mousedown',
e => this.onBackgroundMouseDown(e));
this.element.addEventListener('focusin',
e => this.onFocusIn(e));
this.list.addEventListener('scroll',
e => this.onScroll(e));
$postLink() {
this.input = this.element.querySelector('.search');
this.ul = this.element.querySelector('ul');
this.list = this.element.querySelector('.list');
this.list.addEventListener('scroll', e => this.onScroll(e));
}
get shown() {
return this._shown;
return this.$.popover.shown;
}
set shown(value) {
if (value)
this.show();
else
this.hide();
this.$.popover.shown = value;
}
get search() {
@ -97,62 +86,18 @@ export default class DropDown extends Component {
* @param {String} search The initial search term or %null
*/
show(search) {
if (this._shown) return;
this._shown = true;
this._activeOption = -1;
this.search = search;
this._activeOption = -1;
this.buildList();
this.element.style.display = 'block';
this.list.scrollTop = 0;
this.$timeout(() => this.$element.addClass('shown'), 40);
this.document.addEventListener('keydown', this.docKeyDownHandler);
this.document.addEventListener('focusin', this.docFocusInHandler);
this.relocate();
this.input.focus();
this.$.popover.parent = this.parent;
this.$.popover.show();
}
/**
* Hides the drop-down.
*/
hide() {
if (!this._shown) return;
this._shown = false;
this.element.style.display = '';
this.$element.removeClass('shown');
this.document.removeEventListener('keydown', this.docKeyDownHandler);
this.document.removeEventListener('focusin', this.docFocusInHandler);
if (this.parent)
this.parent.focus();
}
/**
* Repositions the drop-down to a correct location relative to the parent.
*/
relocate() {
if (!this.parent) return;
let style = this.body.style;
style.width = '';
style.height = '';
let parentRect = this.parent.getBoundingClientRect();
let bodyRect = this.body.getBoundingClientRect();
let top = parentRect.top + parentRect.height;
let height = bodyRect.height;
let width = Math.max(bodyRect.width, parentRect.width);
let margin = 10;
if (top + height + margin > window.innerHeight)
top = Math.max(parentRect.top - height, margin);
style.top = `${top}px`;
style.left = `${parentRect.left}px`;
style.width = `${width}px`;
if (height + margin * 2 > window.innerHeight)
style.height = `${window.innerHeight - margin * 2}px`;
this.$.popover.hide();
}
/**
@ -190,7 +135,7 @@ export default class DropDown extends Component {
let data = this.$.model.data;
if (option >= 0 && data && option < data.length) {
this.activeLi = this.container.children[option];
this.activeLi = this.ul.children[option];
this.activeLi.className = 'active';
}
}
@ -224,7 +169,7 @@ export default class DropDown extends Component {
}
if (!this.multiple)
this.hide();
this.$.popover.hide();
}
refreshModel() {
@ -260,22 +205,14 @@ export default class DropDown extends Component {
return undefined;
}
onMouseDown(event) {
this.lastMouseEvent = event;
onOpen() {
this.document.addEventListener('keydown', this.docKeyDownHandler);
this.list.scrollTop = 0;
this.input.focus();
}
onBackgroundMouseDown(event) {
if (event != this.lastMouseEvent)
this.hide();
}
onFocusIn(event) {
this.lastFocusEvent = event;
}
onDocFocusIn(event) {
if (event !== this.lastFocusEvent)
this.hide();
onClose() {
this.document.removeEventListener('keydown', this.docKeyDownHandler);
}
onClearClick() {
@ -299,7 +236,7 @@ export default class DropDown extends Component {
onContainerClick(event) {
if (event.defaultPrevented) return;
let index = getPosition(this.container, event);
let index = getPosition(this.ul, event);
if (index != -1) this.selectOption(index);
}
@ -318,9 +255,6 @@ export default class DropDown extends Component {
case 13: // Enter
this.selectOption(option);
break;
case 27: // Escape
this.hide();
break;
case 38: // Up
this.moveToOption(option <= 0 ? nOpts : option - 1);
break;
@ -342,8 +276,7 @@ export default class DropDown extends Component {
}
buildList() {
this.destroyScopes();
this.scopes = [];
this.destroyList();
let hasTemplate = this.$transclude &&
this.$transclude.isSlotFilled('tplItem');
@ -377,23 +310,26 @@ export default class DropDown extends Component {
}
}
this.container.innerHTML = '';
this.container.appendChild(fragment);
this.ul.appendChild(fragment);
this.activateOption(this._activeOption);
this.relocate();
this.$.popover.relocate();
}
destroyScopes() {
destroyList() {
this.ul.innerHTML = '';
if (this.scopes)
for (let scope of this.scopes)
scope.$destroy();
this.scopes = [];
}
$onDestroy() {
this.destroyScopes();
this.destroyList();
}
}
DropDown.$inject = ['$element', '$scope', '$transclude', '$timeout', '$http', '$translate'];
DropDown.$inject = ['$element', '$scope', '$transclude', '$timeout', '$http'];
/**
* Gets the position of an event element relative to a parent.

8
client/core/src/components/drop-down/drop-down.spec.js
View File

@ -7,6 +7,7 @@ describe('Component vnDropDown', () => {
let $element;
let $scope;
let $httpBackend;
let $transitions;
let $q;
let $filter;
let controller;
@ -15,18 +16,23 @@ describe('Component vnDropDown', () => {
angular.mock.module('client');
});
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$timeout_, _$httpBackend_, _$q_, _$filter_) => {
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$timeout_, _$httpBackend_, _$q_, _$filter_, _$transitions_) => {
$componentController = _$componentController_;
$element = angular.element(`<div>${template}</div>`);
$timeout = _$timeout_;
$transitions = _$transitions_;
$q = _$q_;
$filter = _$filter_;
$scope = $rootScope.$new();
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
let popoverTemplate = require('../popover/popover.html');
let $popover = angular.element(`<div>${popoverTemplate}</div>`);
$scope.popover = $componentController('vnPopover', {$element: $popover, $scope, $timeout, $transitions});
$scope.model = $componentController('vnModel', {$httpBackend, $q, $filter});
controller = $componentController('vnDropDown', {$element, $scope, $transclude: null, $timeout, $httpBackend, $translate: null});
controller.$postLink();
controller.parent = angular.element('<vn-parent></vn-parent>')[0];
}));

29
client/core/src/components/drop-down/style.scss
View File

@ -1,30 +1,7 @@
vn-drop-down {
z-index: 10;
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
&.shown {
& > .body {
transform: translateY(0);
opacity: 1;
}
}
& > .body {
position: fixed;
box-shadow: 0 .1em .4em rgba(1, 1, 1, .4);
border-radius: .1em;
background-color: white;
.dropdown {
display: flex;
flex-direction: column;
transform: translateY(-.4em);
opacity: 0;
transition-property: opacity, transform;
transition-duration: 250ms;
transition-timing-function: ease-in-out;
& > .filter {
position: relative;
@ -35,6 +12,7 @@ vn-drop-down {
box-sizing: border-box;
border: none;
border-bottom: 1px solid #ccc;
font-size: inherit;
padding: .6em;
}
& > vn-icon[icon=clear] {
@ -64,10 +42,9 @@ vn-drop-down {
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
li, .status {
outline: none;
list-style-type: none;
padding: .6em;
cursor: pointer;
white-space: nowrap;

4
client/core/src/components/multi-check/multi-check.scss
View File

@ -2,10 +2,6 @@
vn-icon{
cursor: pointer;
}
&:focus, &:active, &:hover{
outline: none;
border: none;
}
.primaryCheckbox {
vn-icon{
font-size: 22px;

4
client/core/src/components/popover/popover.html Normal file
View File

@ -0,0 +1,4 @@
<div class="popover">
<div class="arrow"></div>
<div class="content" ng-transclude></div>
</div>

369
client/core/src/components/popover/popover.js
View File

@ -1,205 +1,220 @@
import ngModule from '../../module';
import './style.css';
import Component from '../../lib/component';
import './style.scss';
directive.$inject = ['vnPopover'];
export function directive(vnPopover) {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
$element.on('click', function(event) {
vnPopover.showComponent($attrs.vnDialog, $scope, $element);
event.preventDefault();
});
}
};
}
ngModule.directive('vnPopover', directive);
export class Popover {
constructor($document, $compile, $transitions) {
this.document = $document[0];
this.$compile = $compile;
/**
* A simple popover.
*/
export default class Popover extends Component {
constructor($element, $scope, $timeout, $transitions) {
super($element, $scope);
this.$timeout = $timeout;
this.$transitions = $transitions;
this.removeScope = false;
this.popOpens = 0;
}
_init() {
this.docMouseDownHandler = e => this.onDocMouseDown(e);
this.document.addEventListener('mousedown', this.docMouseDownHandler);
this._shown = false;
this.docKeyDownHandler = e => this.onDocKeyDown(e);
this.docFocusInHandler = e => this.onDocFocusIn(e);
this.element.addEventListener('mousedown',
e => this.onBackgroundMouseDown(e));
this.element.addEventListener('focusin',
e => this.onFocusIn(e));
this.popover = this.element.querySelector('.popover');
this.popover.addEventListener('mousedown',
e => this.onMouseDown(e));
this.arrow = this.element.querySelector('.arrow');
this.content = this.element.querySelector('.content');
}
set child(value) {
this.content.appendChild(value);
}
get child() {
return this.content.firstChild;
}
get shown() {
return this._shown;
}
set shown(value) {
if (value)
this.show();
else
this.hide();
}
/**
* Shows the popover. If a parent is specified it is shown in a visible
* relative position to it.
*/
show() {
if (this._shown) return;
this._shown = true;
this.element.style.display = 'block';
this.$timeout.cancel(this.showTimeout);
this.showTimeout = this.$timeout(() => {
this.$element.addClass('shown');
this.showTimeout = null;
}, 30);
this.document.addEventListener('keydown', this.docKeyDownHandler);
this.deregisterCallback = this.$transitions.onStart({},
() => this.hideAll());
this.document.addEventListener('focusin', this.docFocusInHandler);
this.deregisterCallback = this.$transitions.onStart({}, () => this.hide());
this.relocate();
if (this.onOpen)
this.onOpen();
}
_destroy() {
this.document.removeEventListener('mousedown', this.docMouseDownHandler);
/**
* Hides the popover.
*/
hide() {
if (!this._shown) return;
this._shown = false;
this.$element.removeClass('shown');
this.$timeout.cancel(this.showTimeout);
this.showTimeout = this.$timeout(() => {
this.element.style.display = 'none';
this.showTimeout = null;
}, 250);
this.document.removeEventListener('keydown', this.docKeyDownHandler);
this.docMouseDownHandler = null;
this.docKeyDownHandler = null;
this.deregisterCallback();
}
show(childElement, parent, popoverId) {
this.childElement = childElement;
let popover = this.document.createElement('div');
this.popOpens++;
this.document.removeEventListener('focusin', this.docFocusInHandler);
if (!popoverId) {
popoverId = 'popover-' + this.popOpens;
popover.id = popoverId;
}
if (this.deregisterCallback)
this.deregisterCallback();
popover.className = 'vn-popover';
popover.addEventListener('mousedown',
e => this.onPopoverMouseDown(e));
popover.appendChild(childElement);
this.popover = popover;
if (this.parent)
this.parent.focus();
let style = popover.style;
let spacing = 0;
let screenMargin = 20;
let dblMargin = screenMargin * 2;
let width = popover.offsetWidth;
let height = popover.offsetHeight;
let innerWidth = window.innerWidth;
let innerHeight = window.innerHeight;
if (width + dblMargin > innerWidth) {
width = innerWidth - dblMargin;
style.width = width + 'px';
}
if (height + dblMargin > innerHeight) {
height = innerHeight - dblMargin;
style.height = height + 'px';
}
if (parent) {
let parentNode = parent;
let rect = parentNode.getBoundingClientRect();
let left = rect.left;
let top = rect.top + spacing + parentNode.offsetHeight;
if (left + width > innerWidth)
left -= (left + width) - innerWidth + margin;
if (top + height > innerHeight)
top -= height + parentNode.offsetHeight + spacing * 2;
if (left < 0)
left = screenMargin;
if (top < 0)
top = screenMargin;
style.top = (top) + 'px';
style.left = (left) + 'px';
style.minWidth = (rect.width) + 'px';
}
this.document.body.appendChild(popover);
if (this.popOpens === 1) {
this._init();
}
return popoverId;
if (this.onClose)
this.onClose();
}
showComponent(childComponent, $scope, parent) {
let childElement = this.document.createElement(childComponent);
let id = 'popover-' + this.popOpens;
childElement.id = id;
this.removeScope = true;
this.$compile(childElement)($scope.$new());
this.show(childElement, parent, id);
return childElement;
}
/**
* Repositions the popover to a correct location relative to the parent.
*/
relocate() {
if (!(this.parent && this._shown)) return;
_checkOpens() {
this.popOpens = this.document.querySelectorAll('*[id^="popover-"]').length;
if (this.popOpens === 0) {
this._destroy();
}
}
let style = this.popover.style;
style.width = '';
style.height = '';
_removeElement(val) {
if (!val) return;
let element = angular.element(val);
let parent = val.parentNode;
if (element.scope() && element.scope().$id > 1) {
element.scope().$destroy();
}
element.remove();
if (parent.className.indexOf('vn-popover') !== -1)
this._removeElement(parent);
}
let arrowStyle = this.arrow.style;
arrowStyle.top = '';
arrowStyle.bottom = '';
hide(id) {
let popover = this.document.querySelector(`#${id}`);
if (popover) {
this._removeElement(popover);
}
this._checkOpens();
}
let parentRect = this.parent.getBoundingClientRect();
let popoverRect = this.popover.getBoundingClientRect();
let arrowRect = this.arrow.getBoundingClientRect();
hideChilds(id) {
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
let idNumber = parseInt(id.split('-')[1], 10);
popovers.forEach(
val => {
if (parseInt(val.id.split('-')[1], 10) > idNumber)
this._removeElement(val);
}
);
this._checkOpens();
}
let arrowHeight = Math.sqrt(Math.pow(arrowRect.height, 2) * 2) / 2;
hideAll() {
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
popovers.forEach(
val => {
this._removeElement(val);
}
);
this._checkOpens();
}
let top = parentRect.top + parentRect.height + arrowHeight;
let left = parentRect.left;
let height = popoverRect.height;
let width = Math.max(popoverRect.width, parentRect.width);
_findPopOver(node) {
while (node != null) {
if (node.id && node.id.startsWith('popover-')) {
return node.id;
}
node = node.parentNode;
}
return null;
}
let margin = 10;
let showTop = top + height + margin > window.innerHeight;
onDocMouseDown(event) {
let targetId = this._findPopOver(event.target);
if (targetId) {
this.hideChilds(targetId);
} else {
this.hideAll();
}
if (showTop)
top = Math.max(parentRect.top - height - arrowHeight, margin);
if (left + width + margin > window.innerWidth)
left = window.innerWidth - width - margin;
if (showTop)
arrowStyle.bottom = `0`;
else
arrowStyle.top = `0`;
arrowStyle.left = `${(parentRect.left - left) + parentRect.width / 2}px`;
style.top = `${top}px`;
style.left = `${left}px`;
style.width = `${width}px`;
if (height + margin * 2 + arrowHeight > window.innerHeight)
style.height = `${window.innerHeight - margin * 2 - arrowHeight}px`;
}
onDocKeyDown(event) {
if (event.keyCode === 27) {
let targetId = this._findPopOver(this.lastTarget);
if (targetId) {
this.hideChilds(targetId);
} else {
this.hideAll();
}
this.lastTarget = null;
if (event.defaultPrevented) return;
if (event.keyCode == 27) { // Esc
event.preventDefault();
this.hide();
this.$.$applyAsync();
}
}
onPopoverMouseDown(event) {
this.lastTarget = event.target;
onMouseDown(event) {
this.lastMouseEvent = event;
}
onBackgroundMouseDown(event) {
if (event != this.lastMouseEvent)
this.hide();
}
onFocusIn(event) {
this.lastFocusEvent = event;
}
onDocFocusIn(event) {
if (event !== this.lastFocusEvent)
this.hide();
}
}
Popover.$inject = ['$document', '$compile', '$transitions'];
Popover.$inject = ['$element', '$scope', '$timeout', '$transitions'];
ngModule.service('vnPopover', Popover);
ngModule.component('vnPopover', {
template: require('./popover.html'),
controller: Popover,
transclude: true,
bindings: {
onOpen: '&?',
onClose: '&?'
}
});
class PopoverService {
constructor($document, $compile, $transitions, $rootScope) {
this.$compile = $compile;
this.$rootScope = $rootScope;
this.$document = $document;
this.stack = [];
}
show(child, parent, $scope) {
let element = this.$compile('<vn-popover/>')($scope || this.$rootScope)[0];
let popover = element.$ctrl;
popover.parent = parent;
popover.child = child;
popover.show();
popover.onClose = () => {
this.$document[0].body.removeChild(element);
if ($scope) $scope.$destroy();
};
this.$document[0].body.appendChild(element);
return popover;
}
showComponent(componentTag, $scope, parent) {
let $newScope = $scope.$new();
let childElement = this.$compile(`<${componentTag}/>`)($newScope)[0];
this.show(childElement, parent, $newScope);
return childElement;
}
}
PopoverService.$inject = ['$document', '$compile', '$transitions', '$rootScope'];
ngModule.service('vnPopover', PopoverService);

9
client/core/src/components/popover/style.css
View File

@ -1,9 +0,0 @@
.vn-popover {
position: fixed;
box-shadow: 0 0 .4em rgba(1,1,1,.4);
background-color: white;
z-index: 100;
border-radius: .1em;
top: 0;
left: 0;
}

43
client/core/src/components/popover/style.scss Normal file
View File

@ -0,0 +1,43 @@
vn-popover {
display: none;
z-index: 10;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transform: translateY(-.6em);
transition-property: opacity, transform;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
&.shown {
transform: translateY(0);
opacity: 1;
}
& > .popover {
position: absolute;
display: flex;
box-shadow: 0 .1em .4em rgba(1, 1, 1, .4);
& > .arrow {
width: 1em;
height: 1em;
margin: -.5em;
background-color: white;
box-shadow: 0 .1em .4em rgba(1, 1, 1, .4);
position: absolute;
transform: rotate(45deg);
z-index: 0;
}
& > .content {
width: 100%;
border-radius: .1em;
overflow: auto;
background-color: white;
z-index: 1;
}
}
}

3
client/core/src/components/textfield/style.scss
View File

@ -1,7 +1,4 @@
vn-textfield {
div {
outline: none; //remove chrome outline
}
.mdl-chip__action {
position: absolute;
width: auto;

1
client/core/src/directives/index.js
View File

@ -1,6 +1,7 @@
import './id';
import './focus';
import './dialog';
import './popover';
import './validation';
import './acl';
import './on-error-src';

26
client/core/src/directives/popover.js Normal file
View File

@ -0,0 +1,26 @@
import ngModule from '../module';
import Popover from '../components/popover/popover';
import {kebabToCamel} from '../lib/string';
/**
* Directive used to open a popover.
*
* @return {Object} The directive
*/
export function directive() {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
$element.on('click', function(event) {
let popoverKey = kebabToCamel($attrs.vnPopover);
let popover = $scope[popoverKey];
if (popover instanceof Popover) {
popover.parent = $element[0];
popover.show();
}
event.preventDefault();
});
}
};
}
ngModule.directive('vnPopover', directive);

2
client/item/routes.json
View File

@ -1,7 +1,7 @@
{
"module": "item",
"name": "Items",
"icon": "/static/images/icon_item.png",
"icon": "inbox",
"validations" : true,
"routes": [
{

2
client/production/routes.json
View File

@ -1,7 +1,7 @@
{
"module": "production",
"name": "Production",
"icon": "/static/images/icon_production.png",
"icon": "local_florist",
"validations" : false,
"routes": [
{

36
client/salix/src/components/main-menu/main-menu.html
View File

@ -6,29 +6,33 @@
<vn-icon
id="apps"
icon="apps"
vn-popover="apps-menu"
translate-attr="{title: 'Applications'}">
</vn-icon>
<ul id="apps-menu" for="apps" class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small>
<li ng-repeat="mod in ::$ctrl.modules" class="mdl-menu__item" ui-sref="{{::mod.route.state}}">
<vn-icon ng-if="::mod.icon && !mod.icon.startsWith('/')" icon="{{::mod.icon}}"></vn-icon>
<img ng-if="::mod.icon && mod.icon.startsWith('/')" ng-src="{{::mod.icon}}" />
<span translate="{{::mod.name}}"></span>
</li>
</ul>
<vn-popover vn-id="apps-menu" ng-click="appsMenu.hide()">
<ul id="apps-menu" pad-small>
<li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
<vn-icon icon="{{::mod.icon}}"></vn-icon>
<span translate>{{::mod.name}}</span>
</li>
</ul>
</vn-popover>
<vn-icon
id="lang"
icon="language"
vn-popover="langs-menu"
translate-attr="{title: 'Change language'}">
</vn-icon>
<ul id="langs-menu" for="lang" class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-small>
<li
ng-repeat="lang in ::$ctrl.langs"
name="{{::lang}}"
class="mdl-menu__item"
ng-click="$ctrl.onChangeLangClick(lang)">
<span>{{::lang}}</span>
</li>
</ul>
<vn-popover vn-id="langs-menu">
<ul id="langs-menu" pad-small>
<li
ng-repeat="lang in ::$ctrl.langs"
name="{{::lang}}"
ng-click="$ctrl.onChangeLangClick(lang)">
<span>{{::lang}}</span>
</li>
</ul>
</vn-popover>
<vn-icon
id="logout"
icon="exit_to_app"

42
client/salix/src/components/main-menu/style.scss
View File

@ -14,26 +14,30 @@ vn-main-menu {
color: #FF9300;
}
}
li.mdl-menu__item {
background-color: #FF9300;
margin-bottom: 8px;
vn-popover ul {
list-style-type: none;
margin: 0;
color: white;
img {
max-width: 18px;
vertical-align: middle;
margin-top: -3px;
li {
background-color: #FF9300;
margin-bottom: .6em;
cursor: pointer;
padding: .8em;
border-radius: .1em;
min-width: 4em;
& > vn-icon {
padding-right: .3em;
vertical-align: middle;
}
&:hover {
background-color: #FF9300;
opacity: 0.7 !important;
}
&:last-child {
margin-bottom: 0;
}
}
i {
float: left;
padding-top: 13px;
margin-right: 3px;
}
}
li.mdl-menu__item:hover {
background-color: #FF9300;
opacity: 0.7 !important;
}
li.mdl-menu__item:last-child {
margin-bottom: 0;
}
}

15
client/salix/src/styles/misc.scss
View File

@ -3,6 +3,21 @@
@import "colors";
@import "border";
a:focus,
input:focus,
button:focus
{
outline: none;
}
button::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner
{
border: none;
}
.form {
height: 100%;
box-sizing: border-box;

1
e2e/helpers/components_selectors.js
View File

@ -8,7 +8,6 @@ export default {
vnSubmit: 'vn-submit > input',
vnTopbar: 'vn-topbar > header',
vnIcon: 'vn-icon',
vnMainMenu: 'vn-main-menu > div',
vnModuleContainer: 'vn-module-container > a',
vnSearchBar: 'vn-searchbar > form > vn-horizontal',
vnFloatButton: 'vn-float-button > button',

4
e2e/helpers/selectors.js
View File

@ -6,8 +6,8 @@ export default {
globalItems: {
logOutButton: `#logout`,
applicationsMenuButton: `#apps`,
applicationsMenuVisible: `${components.vnMainMenu} .is-visible > div`,
clientsButton: `${components.vnMainMenu} > div > ul > li:nth-child(1)`
applicationsMenuVisible: `vn-main-menu [vn-id="apps-menu"] ul`,
clientsButton: `vn-main-menu [vn-id="apps-menu"] ul > li:nth-child(1)`
},
moduleAccessView: {
clientsSectionButton: `${components.vnModuleContainer}[ui-sref="clients"]`,