vnDialog opens in body
This commit is contained in:
parent
dc18c4ba2a
commit
47998aaa97
|
@ -1,4 +1,4 @@
|
|||
<root>
|
||||
<div>
|
||||
<tpl-body>
|
||||
<h6 translate>{{::$ctrl.message}}</h6>
|
||||
<span translate>{{::$ctrl.question}}</span>
|
||||
|
@ -7,4 +7,4 @@
|
|||
<button response="CANCEL" translate>Cancel</button>
|
||||
<button response="ACCEPT" translate>Accept</button>
|
||||
</tpl-buttons>
|
||||
</root>
|
||||
</div>
|
|
@ -1,24 +1,27 @@
|
|||
import ngModule from '../../module';
|
||||
import Dialog from '../dialog/dialog';
|
||||
import Dialog from '../dialog';
|
||||
import template from './confirm.html';
|
||||
|
||||
export default class Confirm extends Dialog {
|
||||
constructor($element, $scope, $compile) {
|
||||
super($element);
|
||||
let cTemplate = $compile(template)($scope)[0];
|
||||
this.body = cTemplate.querySelector('tpl-body');
|
||||
this.buttons = cTemplate.querySelector('tpl-buttons');
|
||||
constructor($element, $, $transclude) {
|
||||
super($element, $, $transclude);
|
||||
|
||||
let $template = angular.element(template);
|
||||
let slots = $transclude.$$boundTransclude.$$slots;
|
||||
|
||||
let bodyLinkFn = this.$compile($template.find('tpl-body'));
|
||||
slots.body = this.createBoundTranscludeFn(bodyLinkFn);
|
||||
|
||||
let buttonsLinkFn = this.$compile($template.find('tpl-buttons'));
|
||||
slots.buttons = this.createBoundTranscludeFn(buttonsLinkFn);
|
||||
}
|
||||
}
|
||||
Confirm.$inject = ['$element', '$scope', '$compile'];
|
||||
|
||||
ngModule.component('vnConfirm', {
|
||||
template: require('../dialog/dialog.html'),
|
||||
ngModule.vnComponent('vnConfirm', {
|
||||
controller: Confirm,
|
||||
transclude: true,
|
||||
bindings: {
|
||||
onOpen: '&?',
|
||||
onResponse: '&',
|
||||
question: '@',
|
||||
message: '@?'
|
||||
},
|
||||
controller: Confirm
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,17 +0,0 @@
|
|||
<div ng-mousedown="$ctrl.onDialogMouseDown($event)">
|
||||
<button
|
||||
class="close"
|
||||
ng-click="$ctrl.hide()"
|
||||
translate-attr="{title: 'Close'}">
|
||||
<vn-icon icon="clear"></vn-icon>
|
||||
</button>
|
||||
<form>
|
||||
<div
|
||||
class="body">
|
||||
</div>
|
||||
<div
|
||||
class="buttons"
|
||||
ng-click="$ctrl.onButtonClick($event)">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
|
@ -1,126 +0,0 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from '../../lib/component';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Dialog component.
|
||||
*
|
||||
* @property {HTMLElement} body The dialog HTML body
|
||||
* @property {HTMLElement} buttons The dialog HTML buttons
|
||||
*/
|
||||
export default class Dialog extends Component {
|
||||
constructor($element, $scope, $transclude) {
|
||||
super($element, $scope);
|
||||
this.shown = false;
|
||||
this.$element.addClass('vn-dialog');
|
||||
this.element.addEventListener('mousedown',
|
||||
e => this.onBackgroundMouseDown(e));
|
||||
|
||||
if ($transclude) {
|
||||
$transclude($scope.$parent, tClone => {
|
||||
this.body = tClone[0];
|
||||
}, null, 'body');
|
||||
$transclude($scope.$parent, tClone => {
|
||||
this.buttons = tClone[0];
|
||||
}, null, 'buttons');
|
||||
}
|
||||
}
|
||||
|
||||
set body(value) {
|
||||
this.element.querySelector('.body').appendChild(value);
|
||||
}
|
||||
|
||||
set buttons(value) {
|
||||
this.element.querySelector('.buttons').appendChild(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays the dialog to the user.
|
||||
*/
|
||||
show() {
|
||||
if (this.shown) return;
|
||||
this.shown = true;
|
||||
this.keyDownHandler = e => this.onkeyDown(e);
|
||||
this.document.addEventListener('keydown', this.keyDownHandler);
|
||||
this.element.style.display = 'flex';
|
||||
this.transitionTimeout = setTimeout(() => this.$element.addClass('shown'), 30);
|
||||
|
||||
this.emit('open');
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the dialog calling the response handler.
|
||||
*/
|
||||
hide() {
|
||||
this.fireResponse();
|
||||
this.realHide();
|
||||
this.emit('close');
|
||||
}
|
||||
|
||||
/**
|
||||
* Calls the response handler.
|
||||
*
|
||||
* @param {String} response The response code
|
||||
* @return {Boolean} %true if response was canceled, %false otherwise
|
||||
*/
|
||||
fireResponse(response) {
|
||||
let cancel = false;
|
||||
if (this.onResponse)
|
||||
cancel = this.onResponse({response: response});
|
||||
return cancel;
|
||||
}
|
||||
|
||||
realHide() {
|
||||
if (!this.shown) return;
|
||||
this.element.style.display = 'none';
|
||||
this.document.removeEventListener('keydown', this.keyDownHandler);
|
||||
this.lastEvent = null;
|
||||
this.shown = false;
|
||||
this.transitionTimeout = setTimeout(() => this.$element.removeClass('shown'), 30);
|
||||
}
|
||||
|
||||
onButtonClick(event) {
|
||||
let buttons = this.element.querySelector('.buttons');
|
||||
let tplButtons = buttons.querySelector('tpl-buttons');
|
||||
let node = event.target;
|
||||
while (node.parentNode != tplButtons) {
|
||||
if (node == buttons) return;
|
||||
node = node.parentNode;
|
||||
}
|
||||
|
||||
let response = node.getAttribute('response');
|
||||
let cancel = this.fireResponse(response);
|
||||
if (cancel !== false) this.realHide();
|
||||
}
|
||||
|
||||
onDialogMouseDown(event) {
|
||||
this.lastEvent = event;
|
||||
}
|
||||
|
||||
onBackgroundMouseDown(event) {
|
||||
if (event != this.lastEvent)
|
||||
this.hide();
|
||||
}
|
||||
|
||||
onkeyDown(event) {
|
||||
if (event.keyCode == 27) // Esc
|
||||
this.hide();
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
clearTimeout(this.transitionTimeout);
|
||||
}
|
||||
}
|
||||
Dialog.$inject = ['$element', '$scope', '$transclude'];
|
||||
|
||||
ngModule.component('vnDialog', {
|
||||
template: require('./dialog.html'),
|
||||
transclude: {
|
||||
body: 'tplBody',
|
||||
buttons: '?tplButtons'
|
||||
},
|
||||
bindings: {
|
||||
onResponse: '&?'
|
||||
},
|
||||
controller: Dialog
|
||||
});
|
|
@ -0,0 +1,17 @@
|
|||
<vn-button
|
||||
ng-click="$ctrl.hide()"
|
||||
translate-attr="{title: 'Close'}"
|
||||
icon="clear"
|
||||
class="flat close">
|
||||
</vn-button>
|
||||
<form>
|
||||
<div
|
||||
class="body"
|
||||
ng-transclude="body">
|
||||
</div>
|
||||
<div
|
||||
class="buttons"
|
||||
ng-click="$ctrl.onButtonClick($event)"
|
||||
ng-transclude="buttons">
|
||||
</div>
|
||||
</form>
|
|
@ -0,0 +1,73 @@
|
|||
import ngModule from '../../module';
|
||||
import Popup from '../popup';
|
||||
import template from './index.html';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Dialog component.
|
||||
*
|
||||
* @property {HTMLElement} body The dialog HTML body
|
||||
* @property {HTMLElement} buttons The dialog HTML buttons
|
||||
*/
|
||||
export default class Dialog extends Popup {
|
||||
constructor($element, $, $transclude) {
|
||||
super($element, $, $transclude);
|
||||
|
||||
let linkFn = this.$compile(template);
|
||||
$transclude.$$boundTransclude = this.createBoundTranscludeFn(linkFn);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the dialog calling the response handler.
|
||||
*/
|
||||
hide() {
|
||||
// this.fireResponse();
|
||||
super.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Calls the response handler.
|
||||
*
|
||||
* @param {String} response The response code
|
||||
* @return {Boolean} %true if response was canceled, %false otherwise
|
||||
*/
|
||||
fireResponse(response) {
|
||||
let cancel;
|
||||
if (this.onResponse)
|
||||
cancel = this.onResponse({response: response});
|
||||
return cancel;
|
||||
}
|
||||
|
||||
onButtonClick(event) {
|
||||
let buttons = this.popup.querySelector('.buttons');
|
||||
let tplButtons = buttons.querySelector('tpl-buttons');
|
||||
let node = event.target;
|
||||
while (node.parentNode != tplButtons) {
|
||||
if (node == buttons) return;
|
||||
node = node.parentNode;
|
||||
}
|
||||
|
||||
let response = node.getAttribute('response');
|
||||
let cancel = this.fireResponse(response);
|
||||
|
||||
let close = res => {
|
||||
if (res !== false) super.hide();
|
||||
};
|
||||
|
||||
if (cancel instanceof Object && cancel.then)
|
||||
cancel.then(close);
|
||||
else
|
||||
close(cancel);
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.vnComponent('vnDialog', {
|
||||
controller: Dialog,
|
||||
transclude: {
|
||||
body: 'tplBody',
|
||||
buttons: '?tplButtons'
|
||||
},
|
||||
bindings: {
|
||||
onResponse: '&?'
|
||||
}
|
||||
});
|
|
@ -1,55 +1,27 @@
|
|||
@import "effects";
|
||||
|
||||
.vn-dialog {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
padding: 3em;
|
||||
box-sizing: border-box;
|
||||
.vn-dialog > .window {
|
||||
padding: $spacing-lg;
|
||||
|
||||
&.shown {
|
||||
opacity: 1;
|
||||
& > .close {
|
||||
@extend %clickable;
|
||||
text-transform: uppercase;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: .1em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .3em;
|
||||
color: #666;
|
||||
}
|
||||
& > div {
|
||||
position: relative;
|
||||
box-shadow: 0 0 .4em $color-shadow;
|
||||
background-color: $color-bg-panel;
|
||||
border-radius: .2em;
|
||||
overflow: auto;
|
||||
padding: 2em;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
|
||||
tpl-body {
|
||||
& > form {
|
||||
& > .body > tpl-body {
|
||||
display: block;
|
||||
min-width: 16em;
|
||||
}
|
||||
& > button.close {
|
||||
@extend %clickable;
|
||||
text-transform: uppercase;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: .1em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .3em;
|
||||
|
||||
& > vn-icon {
|
||||
display: block;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
& > form > .buttons {
|
||||
& > .buttons > tpl-buttons {
|
||||
display: block;
|
||||
margin-top: 1.5em;
|
||||
text-align: right;
|
||||
|
||||
|
|
|
@ -3,7 +3,6 @@ import './crud-model/crud-model';
|
|||
import './watcher/watcher';
|
||||
import './textfield/textfield';
|
||||
import './icon/icon';
|
||||
import './dialog/dialog';
|
||||
import './confirm/confirm';
|
||||
import './title/title';
|
||||
import './subtitle/subtitle';
|
||||
|
@ -28,6 +27,7 @@ import './chip';
|
|||
import './data-viewer';
|
||||
import './date-picker';
|
||||
import './debug-info';
|
||||
import './dialog';
|
||||
import './field';
|
||||
import './float-button';
|
||||
import './icon-menu';
|
||||
|
@ -39,6 +39,7 @@ import './input-time';
|
|||
import './input-file';
|
||||
import './label';
|
||||
import './list';
|
||||
import './popup';
|
||||
import './radio';
|
||||
import './submit';
|
||||
import './table';
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
<div ng-mousedown="$ctrl.onBgMouseDown($event)">
|
||||
<div
|
||||
class="window"
|
||||
ng-mousedown="$ctrl.onWindowMouseDown($event)"
|
||||
ng-transclude>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,125 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from '../../lib/component';
|
||||
import template from './index.html';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Base class for windows displayed over application content.
|
||||
*/
|
||||
export default class Popup extends Component {
|
||||
constructor($element, $scope, $transclude) {
|
||||
super($element, $scope);
|
||||
this.$transclude = $transclude;
|
||||
this._shown = false;
|
||||
this.displayMode = 'centered';
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {Boolean} Wether to show or hide the popup.
|
||||
*/
|
||||
get shown() {
|
||||
return this._shown;
|
||||
}
|
||||
|
||||
set shown(value) {
|
||||
if (value)
|
||||
this.show();
|
||||
else
|
||||
this.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays the dialog to the user.
|
||||
*/
|
||||
show() {
|
||||
if (this.shown) return;
|
||||
this._shown = true;
|
||||
|
||||
let linkFn = this.$compile(template);
|
||||
this.$contentScope = this.$.$new();
|
||||
this.popup = linkFn(this.$contentScope, null,
|
||||
{parentBoundTranscludeFn: this.$transclude}
|
||||
)[0];
|
||||
|
||||
let classList = this.popup.classList;
|
||||
classList.add(this.displayMode);
|
||||
classList.add(...this.constructor.$classNames);
|
||||
|
||||
if (!this.transitionTimeout)
|
||||
this.document.body.appendChild(this.popup);
|
||||
|
||||
this.keyDownHandler = e => this.onkeyDown(e);
|
||||
this.document.addEventListener('keydown', this.keyDownHandler);
|
||||
|
||||
this.deregisterCallback = this.$transitions.onStart({},
|
||||
() => this.hide());
|
||||
|
||||
this.$timeout.cancel(this.transitionTimeout);
|
||||
this.transitionTimeout = this.$timeout(() => {
|
||||
this.transitionTimeout = null;
|
||||
classList.add('shown');
|
||||
}, 10);
|
||||
|
||||
this.emit('open');
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the dialog calling the response handler.
|
||||
*/
|
||||
hide() {
|
||||
if (!this.shown) return;
|
||||
|
||||
this.document.removeEventListener('keydown', this.keyDownHandler);
|
||||
this.keyDownHandler = null;
|
||||
|
||||
if (this.deregisterCallback) {
|
||||
this.deregisterCallback();
|
||||
this.deregisterCallback = null;
|
||||
}
|
||||
|
||||
this.popup.classList.remove('shown');
|
||||
|
||||
this.$timeout.cancel(this.transitionTimeout);
|
||||
this.transitionTimeout = this.$timeout(() => {
|
||||
this.transitionTimeout = null;
|
||||
this.document.body.removeChild(this.popup);
|
||||
|
||||
this.$contentScope.$destroy();
|
||||
this.popup.remove();
|
||||
this.popup = null;
|
||||
|
||||
this.emit('close');
|
||||
}, 200);
|
||||
|
||||
this.lastEvent = null;
|
||||
this._shown = false;
|
||||
this.emit('closeStart');
|
||||
}
|
||||
|
||||
onWindowMouseDown(event) {
|
||||
this.lastEvent = event;
|
||||
}
|
||||
|
||||
onBgMouseDown(event) {
|
||||
if (!event.defaultPrevented && event != this.lastEvent)
|
||||
this.hide();
|
||||
}
|
||||
|
||||
onkeyDown(event) {
|
||||
if (!event.defaultPrevented && event.key == 'Escape')
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
Popup.$inject = ['$element', '$scope', '$transclude'];
|
||||
|
||||
ngModule.vnComponent('vnPopup', {
|
||||
controller: Popup,
|
||||
transclude: true,
|
||||
bindings: {
|
||||
shown: '=?'
|
||||
}
|
||||
});
|
|
@ -0,0 +1,40 @@
|
|||
@import "effects";
|
||||
|
||||
.vn-popup {
|
||||
z-index: 20;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
|
||||
&.shown {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
&.centered {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > .window {
|
||||
position: relative;
|
||||
box-shadow: 0 0 .4em $color-shadow;
|
||||
background-color: $color-bg-panel;
|
||||
border-radius: .2em;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
transform: scale3d(.5, .5, .5);
|
||||
transition: transform 200ms ease-in-out;
|
||||
}
|
||||
&.shown > .window {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
import ngModule from '../module';
|
||||
import Dialog from '../components/dialog/dialog';
|
||||
import Dialog from '../components/dialog';
|
||||
import {kebabToCamel} from '../lib/string';
|
||||
|
||||
/**
|
||||
|
|
|
@ -56,6 +56,31 @@ export default class Component extends EventEmitter {
|
|||
$t(string, params) {
|
||||
return this.$translate.instant(string, params);
|
||||
}
|
||||
|
||||
createBoundTranscludeFn(transcludeFn) {
|
||||
let scope = this.$;
|
||||
let previousBoundTranscludeFn = this.$transclude.$$boundTransclude;
|
||||
|
||||
function vnBoundTranscludeFn(
|
||||
transcludedScope,
|
||||
cloneFn,
|
||||
controllers,
|
||||
futureParentElement,
|
||||
containingScope) {
|
||||
if (!transcludedScope) {
|
||||
transcludedScope = scope.$new(false, containingScope);
|
||||
transcludedScope.$$transcluded = true;
|
||||
}
|
||||
return transcludeFn(transcludedScope, cloneFn, {
|
||||
parentBoundTranscludeFn: previousBoundTranscludeFn,
|
||||
transcludeControllers: controllers,
|
||||
futureParentElement: futureParentElement
|
||||
});
|
||||
}
|
||||
vnBoundTranscludeFn.$$slots = previousBoundTranscludeFn.$$slots;
|
||||
|
||||
return vnBoundTranscludeFn;
|
||||
}
|
||||
}
|
||||
Component.$inject = ['$element', '$scope'];
|
||||
|
||||
|
|
|
@ -6,10 +6,19 @@
|
|||
* @return {String} The camelized string
|
||||
*/
|
||||
export function kebabToCamel(str) {
|
||||
let camelCased = str.replace(/-([a-z])/g, function(g) {
|
||||
return g[1].toUpperCase();
|
||||
});
|
||||
return camelCased;
|
||||
return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
|
||||
}
|
||||
|
||||
/**
|
||||
* Transforms a camelCase to kebab-case.
|
||||
*
|
||||
* @param {String} str The camelized string
|
||||
* @return {String} The hyphenized string
|
||||
*/
|
||||
export function camelToKebab(str) {
|
||||
let kebabCased = str.substr(1)
|
||||
.replace(/[A-Z]/g, g => `-${g[0]}`);
|
||||
return `${str.charAt(0)}${kebabCased}`.toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import {ng, ngDeps} from './vendor';
|
||||
import {camelToKebab} from './lib/string';
|
||||
|
||||
const ngModule = ng.module('vnCore', ngDeps);
|
||||
export default ngModule;
|
||||
|
@ -21,14 +22,24 @@ ngModule.vnComponent = function(name, options) {
|
|||
let parent = Object.getPrototypeOf(controller);
|
||||
let parentOptions = parent.$options || {};
|
||||
|
||||
let parentTransclude = parentOptions.transclude;
|
||||
let transclude = parentTransclude instanceof Object
|
||||
? Object.assign({}, parentTransclude)
|
||||
: parentTransclude;
|
||||
|
||||
if (options.transclude instanceof Object) {
|
||||
if (transclude instanceof Object)
|
||||
Object.assign(transclude, options.transclude);
|
||||
else
|
||||
transclude = options.transclude;
|
||||
} else if (options.transclude !== undefined)
|
||||
transclude = options.transclude;
|
||||
|
||||
let mergedOptions = Object.assign({},
|
||||
parentOptions,
|
||||
options,
|
||||
{
|
||||
transclude: Object.assign({},
|
||||
parentOptions.transclude,
|
||||
options.transclude
|
||||
),
|
||||
transclude,
|
||||
bindings: Object.assign({},
|
||||
parentOptions.bindings,
|
||||
options.bindings
|
||||
|
@ -41,6 +52,10 @@ ngModule.vnComponent = function(name, options) {
|
|||
);
|
||||
controller.$options = mergedOptions;
|
||||
|
||||
let classNames = [camelToKebab(name)];
|
||||
if (parent.$classNames) classNames = classNames.concat(parent.$classNames);
|
||||
controller.$classNames = classNames;
|
||||
|
||||
return this.component(name, mergedOptions);
|
||||
};
|
||||
|
||||
|
|
|
@ -4,8 +4,10 @@
|
|||
cursor: pointer;
|
||||
transition: background-color 250ms ease-out;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-hover-cd;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -13,8 +15,10 @@
|
|||
cursor: pointer;
|
||||
transition: opacity 250ms ease-out;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: $color-hover-dc;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -56,24 +56,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.vn-dialog.dialog-summary {
|
||||
vn-card {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
& > div > button.close {
|
||||
display: none;
|
||||
}
|
||||
& > div {
|
||||
padding: 0
|
||||
}
|
||||
tpl-body {
|
||||
width: auto;
|
||||
}
|
||||
.buttons {
|
||||
display: none;
|
||||
}
|
||||
vn-check label span {
|
||||
font-size: .9em
|
||||
}
|
||||
.vn-popup .summary {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
@ -63,13 +63,9 @@
|
|||
</vn-card>
|
||||
</vn-data-viewer>
|
||||
</div>
|
||||
<vn-dialog
|
||||
vn-id="summary"
|
||||
class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="summary">
|
||||
<vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
|
||||
</vn-popup>
|
||||
<vn-confirm
|
||||
vn-id="clone"
|
||||
on-response="$ctrl.onCloneAccept(response)"
|
||||
|
|
|
@ -123,7 +123,7 @@
|
|||
vn-id="descriptor">
|
||||
</vn-item-descriptor-popover>
|
||||
<vn-popover
|
||||
class="edit dialog-summary"
|
||||
class="edit"
|
||||
vn-id="edit-popover"
|
||||
on-open="$ctrl.getManaSalespersonMana()"
|
||||
on-close="$ctrl.mana = null">
|
||||
|
|
|
@ -74,10 +74,7 @@
|
|||
vn-id="workerDescriptor"
|
||||
worker-fk="$ctrl.selectedWorker">
|
||||
</vn-worker-descriptor-popover>
|
||||
<vn-dialog class="dialog-summary"
|
||||
vn-id="dialog-summary-claim">
|
||||
<tpl-body>
|
||||
<vn-claim-summary claim="$ctrl.claimSelected"></vn-claim-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="dialog-summary-claim">
|
||||
<vn-claim-summary claim="$ctrl.claimSelected"></vn-claim-summary>
|
||||
</vn-popup>
|
||||
<vn-scroll-up></vn-scroll-up>
|
|
@ -69,12 +69,9 @@
|
|||
fixed-bottom-right>
|
||||
<vn-float-button icon="person_add"></vn-float-button>
|
||||
</a>
|
||||
<vn-dialog class="dialog-summary"
|
||||
vn-id="dialog-summary-client">
|
||||
<tpl-body>
|
||||
<vn-client-summary
|
||||
client="$ctrl.clientSelected">
|
||||
</vn-client-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="dialog-summary-client">
|
||||
<vn-client-summary
|
||||
client="$ctrl.clientSelected">
|
||||
</vn-client-summary>
|
||||
</vn-popup>
|
||||
<vn-scroll-up></vn-scroll-up>
|
|
@ -71,15 +71,11 @@
|
|||
</vn-card>
|
||||
</vn-data-viewer>
|
||||
</div>
|
||||
<vn-dialog
|
||||
vn-id="summary"
|
||||
class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-invoice-out-summary
|
||||
invoice-out="$ctrl.selectedInvoiceOut">
|
||||
</vn-invoice-out-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="summary">
|
||||
<vn-invoice-out-summary
|
||||
invoice-out="$ctrl.selectedInvoiceOut">
|
||||
</vn-invoice-out-summary>
|
||||
</vn-popup>
|
||||
<vn-client-descriptor-popover
|
||||
vn-id="clientDescriptor">
|
||||
</vn-client-descriptor-popover>
|
||||
|
|
|
@ -131,11 +131,9 @@
|
|||
<a ui-sref="item.create" vn-tooltip="New item" vn-bind="+" fixed-bottom-right>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
</a>
|
||||
<vn-dialog vn-id="preview" class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-item-summary item="$ctrl.itemSelected"></vn-item-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="preview">
|
||||
<vn-item-summary item="$ctrl.itemSelected"></vn-item-summary>
|
||||
</vn-popup>
|
||||
<vn-confirm
|
||||
vn-id="clone"
|
||||
on-response="$ctrl.onCloneAccept(response)"
|
||||
|
|
|
@ -82,11 +82,7 @@
|
|||
vn-id="workerDescriptor"
|
||||
worker-fk="$ctrl.selectedWorker">
|
||||
</vn-worker-descriptor-popover>
|
||||
<vn-dialog
|
||||
vn-id="summary"
|
||||
class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-order-summary order="$ctrl.selectedOrder"></vn-order-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="summary">
|
||||
<vn-order-summary order="$ctrl.selectedOrder"></vn-order-summary>
|
||||
</vn-popup>
|
||||
<vn-scroll-up></vn-scroll-up>
|
|
@ -63,15 +63,11 @@
|
|||
</vn-card>
|
||||
</vn-data-viewer>
|
||||
</div>
|
||||
<vn-dialog
|
||||
vn-id="summary"
|
||||
class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-route-summary
|
||||
route="$ctrl.routeSelected">
|
||||
</vn-route-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="summary">
|
||||
<vn-route-summary
|
||||
route="$ctrl.routeSelected">
|
||||
</vn-route-summary>
|
||||
</vn-popup>
|
||||
<vn-worker-descriptor-popover
|
||||
vn-id="workerDescriptor"
|
||||
worker-fk="$ctrl.selectedWorker">
|
||||
|
|
|
@ -91,46 +91,43 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<vn-dialog class="dialog-summary"
|
||||
vn-id="addTurn">
|
||||
<tpl-body>
|
||||
<div class="vn-pa-md">
|
||||
<h5 style="text-align: center">
|
||||
<span translate>In which day you want to add the ticket?</span>
|
||||
</h5>
|
||||
<vn-tool-bar class="vn-mt-md">
|
||||
<vn-button
|
||||
label="Monday"
|
||||
ng-click="$ctrl.addTurn(0)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Tuesday"
|
||||
ng-click="$ctrl.addTurn(1)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Wednesday"
|
||||
ng-click="$ctrl.addTurn(2)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Thursday"
|
||||
ng-click="$ctrl.addTurn(3)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Friday"
|
||||
ng-click="$ctrl.addTurn(4)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Saturday"
|
||||
ng-click="$ctrl.addTurn(5)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Sunday"
|
||||
ng-click="$ctrl.addTurn(6)">
|
||||
</vn-button>
|
||||
</vn-tool-bar>
|
||||
</div>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="addTurn">
|
||||
<div class="vn-pa-md">
|
||||
<h5 style="text-align: center">
|
||||
<span translate>In which day you want to add the ticket?</span>
|
||||
</h5>
|
||||
<vn-tool-bar class="vn-mt-md">
|
||||
<vn-button
|
||||
label="Monday"
|
||||
ng-click="$ctrl.addTurn(0)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Tuesday"
|
||||
ng-click="$ctrl.addTurn(1)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Wednesday"
|
||||
ng-click="$ctrl.addTurn(2)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Thursday"
|
||||
ng-click="$ctrl.addTurn(3)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Friday"
|
||||
ng-click="$ctrl.addTurn(4)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Saturday"
|
||||
ng-click="$ctrl.addTurn(5)">
|
||||
</vn-button>
|
||||
<vn-button
|
||||
label="Sunday"
|
||||
ng-click="$ctrl.addTurn(6)">
|
||||
</vn-button>
|
||||
</vn-tool-bar>
|
||||
</div>
|
||||
</vn-popup>
|
||||
<vn-confirm
|
||||
vn-id="deleteConfirmation"
|
||||
on-response="$ctrl.deleteTicket(response)"
|
||||
|
@ -155,7 +152,6 @@
|
|||
</vn-confirm>
|
||||
<vn-dialog
|
||||
vn-id="changeShippedDialog"
|
||||
on-open="$ctrl.focusInput()"
|
||||
on-response="$ctrl.changeShipped(response)">
|
||||
<tpl-body>
|
||||
<div>
|
||||
|
@ -166,7 +162,8 @@
|
|||
vn-id="newShipped"
|
||||
vn-one
|
||||
ng-model="$ctrl.newShipped"
|
||||
label="Shipped hour">
|
||||
label="Shipped hour"
|
||||
vn-focus>
|
||||
</vn-input-time>
|
||||
</div>
|
||||
</tpl-body>
|
||||
|
|
|
@ -283,10 +283,6 @@ class Controller {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
focusInput() {
|
||||
this.$scope.newShipped.focus();
|
||||
}
|
||||
}
|
||||
|
||||
Controller.$inject = ['$state', '$scope', '$http', 'vnApp', '$translate', 'aclService'];
|
||||
|
|
|
@ -148,13 +148,9 @@
|
|||
<a ui-sref="ticket.create" vn-tooltip="New ticket" vn-bind="+" fixed-bottom-right>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
</a>
|
||||
<vn-dialog
|
||||
vn-id="summary"
|
||||
class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-ticket-summary ticket="$ctrl.selectedTicket"></vn-ticket-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="summary">
|
||||
<vn-ticket-summary ticket="$ctrl.selectedTicket"></vn-ticket-summary>
|
||||
</vn-popup>
|
||||
<vn-client-descriptor-popover
|
||||
vn-id="clientDescriptor">
|
||||
</vn-client-descriptor-popover>
|
||||
|
|
|
@ -204,8 +204,7 @@
|
|||
</vn-item-descriptor-popover>
|
||||
|
||||
<!-- Edit Price Popover -->
|
||||
<vn-popover
|
||||
class="dialog-summary"
|
||||
<vn-popover
|
||||
vn-id="edit-price-popover"
|
||||
on-open="$ctrl.getManaSalespersonMana()"
|
||||
on-close="$ctrl.mana = null">
|
||||
|
@ -239,8 +238,7 @@
|
|||
</vn-popover>
|
||||
|
||||
<!-- Edit Popover -->
|
||||
<vn-popover
|
||||
class="dialog-summary"
|
||||
<vn-popover
|
||||
vn-id="edit-popover"
|
||||
on-open="$ctrl.getManaSalespersonMana()"
|
||||
on-close="$ctrl.mana = null">
|
||||
|
|
|
@ -60,13 +60,9 @@
|
|||
</vn-card>
|
||||
</vn-data-viewer>
|
||||
</div>
|
||||
<vn-dialog
|
||||
vn-id="summary"
|
||||
class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-travel-summary
|
||||
travel="$ctrl.travelSelected">
|
||||
</vn-travel-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="summary">
|
||||
<vn-travel-summary
|
||||
travel="$ctrl.travelSelected">
|
||||
</vn-travel-summary>
|
||||
</vn-popup>
|
||||
<vn-scroll-up></vn-scroll-up>
|
|
@ -29,45 +29,44 @@
|
|||
model="model"
|
||||
class="vn-my-md">
|
||||
<vn-card>
|
||||
<div class="vn-list">
|
||||
<a
|
||||
ng-repeat="worker in workers track by worker.id"
|
||||
ui-sref="worker.card.summary({id: worker.id})"
|
||||
translate-attr="{title: 'View worker'}"
|
||||
class="vn-list-item searchResult">
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<h6>{{::worker.nickname}}</h6>
|
||||
<vn-label-value label="Id"
|
||||
value="{{::worker.id}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="User"
|
||||
value="{{::worker.userName}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="Email"
|
||||
value="{{::worker.email}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="Department"
|
||||
value="{{::worker.department}}">
|
||||
</vn-label-value>
|
||||
</vn-one>
|
||||
<vn-horizontal class="buttons">
|
||||
<vn-icon-button
|
||||
ng-click="$ctrl.preview($event, worker)"
|
||||
vn-tooltip="Preview"
|
||||
icon="desktop_windows">
|
||||
</vn-icon-button>
|
||||
<div class="vn-list">
|
||||
<a
|
||||
ng-repeat="worker in workers track by worker.id"
|
||||
ui-sref="worker.card.summary({id: worker.id})"
|
||||
translate-attr="{title: 'View worker'}"
|
||||
class="vn-list-item searchResult">
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
<h6>{{::worker.nickname}}</h6>
|
||||
<vn-label-value label="Id"
|
||||
value="{{::worker.id}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="User"
|
||||
value="{{::worker.userName}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="Email"
|
||||
value="{{::worker.email}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="Department"
|
||||
value="{{::worker.department}}">
|
||||
</vn-label-value>
|
||||
</vn-one>
|
||||
<vn-horizontal class="buttons">
|
||||
<vn-icon-button
|
||||
ng-click="$ctrl.preview($event, worker)"
|
||||
vn-tooltip="Preview"
|
||||
icon="desktop_windows">
|
||||
</vn-icon-button>
|
||||
</vn-horizontal>
|
||||
</vn-horizontal>
|
||||
</vn-horizontal>
|
||||
</a>
|
||||
</vn-card>
|
||||
</a>
|
||||
</div>
|
||||
</vn-card>
|
||||
</vn-data-viewer>
|
||||
</div>
|
||||
<vn-dialog vn-id="preview" class="dialog-summary">
|
||||
<tpl-body>
|
||||
<vn-worker-summary
|
||||
worker="$ctrl.selectedWorker">
|
||||
</vn-worker-summary>
|
||||
</tpl-body>
|
||||
</vn-dialog>
|
||||
<vn-popup vn-id="preview">
|
||||
<vn-worker-summary
|
||||
worker="$ctrl.selectedWorker">
|
||||
</vn-worker-summary>
|
||||
</vn-popup>
|
||||
<vn-scroll-up></vn-scroll-up>
|
|
@ -31,7 +31,6 @@ export default class Controller {
|
|||
callback.call(this);
|
||||
}
|
||||
}
|
||||
|
||||
Controller.$inject = ['$scope', '$state'];
|
||||
|
||||
ngModule.component('vnWorkerIndex', {
|
||||
|
|
|
@ -147,10 +147,6 @@ class Controller {
|
|||
this.newTime = now;
|
||||
this.selectedWeekday = weekday;
|
||||
this.$.addTimeDialog.show();
|
||||
|
||||
const selector = '[vn-id=addTimeDialog] input[type=time]';
|
||||
const input = this.$element[0].querySelector(selector);
|
||||
input.focus();
|
||||
}
|
||||
|
||||
addTime(response) {
|
||||
|
|
Loading…
Reference in New Issue