Popover beta
This commit is contained in:
Juan Ferrer Toribio
parent
d2fc2e794c
commit
c2530acafd
|
|
@ -3,12 +3,12 @@
|
|||
<vn-icon icon="apps" id="apps" title="Applications"></vn-icon>
|
||||
<vn-icon icon="notifications" title="Notifications"></vn-icon>
|
||||
<vn-icon icon="account_circle" title="Profile" style="font-size: 35px;"></vn-icon>
|
||||
<!--
|
||||
<vn-popover pad-medium for="apps">
|
||||
<a ui-sref="clients"><vn-icon icon=""></vn-icon></a>
|
||||
</vn-popover>
|
||||
<!--
|
||||
-->
|
||||
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu" pad-medium for="apps">
|
||||
<a ui-sref="clients"><i class="material-icons" id="clients">person</i></a>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Search"></vn-textfield>
|
||||
<vn-icon icon="keyboard_arrow_down"></vn-icon>
|
||||
<vn-textfield vn-one label="Search" model="$ctrl.search"></vn-textfield>
|
||||
<vn-icon icon="keyboard_arrow_down" ng-click="searchbar.onClick($event)" style="cursor: pointer;"></vn-icon>
|
||||
<vn-icon-button icon="search"></vn-icon-button>
|
||||
<vn-popover>
|
||||
<vn-search-panel></vn-search-panel>
|
||||
</vn-popover>
|
||||
</vn-horizontal>
|
||||
|
||||
|
|
@ -1,8 +1,18 @@
|
|||
import template from './searchbar.html';
|
||||
import {module} from '../../module';
|
||||
require('./style.css');
|
||||
|
||||
export const NAME = 'vnSearchbar'
|
||||
export const COMPONENT = {
|
||||
template: template
|
||||
template: template,
|
||||
transclude: true,
|
||||
controllerAs: 'searchbar',
|
||||
controller: function($element) {
|
||||
this.onClick = function(event) {
|
||||
var popover = $element.find('vn-popover');
|
||||
popover.controller('vnPopover').show($element);
|
||||
};
|
||||
}
|
||||
};
|
||||
COMPONENT.controller.$inject = ['$element'];
|
||||
module.component(NAME, COMPONENT);
|
||||
|
|
|
|||
|
|
@ -9,13 +9,68 @@ export function directive(resolver) {
|
|||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
controllerAs: 'popover',
|
||||
template: function(_, attrs) {
|
||||
return resolver.getTemplate(_NAME, attrs);
|
||||
},
|
||||
controller: function() {
|
||||
this.onClick = function (event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
controller: function($element) {
|
||||
this.onMouseDown = function(event) {
|
||||
this.lastEvent = event;
|
||||
};
|
||||
this.show = function(parent) {
|
||||
var node = $element[0];
|
||||
var style = node.style;
|
||||
|
||||
var spacing = 4;
|
||||
var margin = 20;
|
||||
var dblMargin = margin * 2;
|
||||
|
||||
var width = node.offsetWidth;
|
||||
var height = node.offsetHeight;
|
||||
var innerWidth = window.innerWidth;
|
||||
var 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) {
|
||||
var parentNode = parent[0];
|
||||
var rect = parentNode.getBoundingClientRect();
|
||||
var left = rect.left;
|
||||
var top = rect.top + spacing + parentNode.offsetHeight;
|
||||
|
||||
if(left + width > innerWidth)
|
||||
left -= (left + width) - window.innerWidth + margin;
|
||||
if(top + height > innerHeight)
|
||||
top -= height + parentNode.offsetHeight + spacing * 2;
|
||||
|
||||
if(left < 0)
|
||||
left = margin;
|
||||
if(top < 0)
|
||||
top = margin;
|
||||
|
||||
style.top = (top) +'px';
|
||||
style.left = (left) +'px';
|
||||
}
|
||||
|
||||
style.display = 'block';
|
||||
|
||||
var self = this;
|
||||
var doc = angular.element(document);
|
||||
var clickHandler = function(event) {
|
||||
if (event != self.lastEvent) {
|
||||
style.display = 'none';
|
||||
doc.off('mousedown', clickHandler);
|
||||
}
|
||||
}
|
||||
doc.on('mousedown', clickHandler);
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<div
|
||||
class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu"
|
||||
ng-click="$ctrl.onClick($event)"
|
||||
pad-medium
|
||||
ng-mousedown="popover.onMouseDown($event)"
|
||||
ng-transclude
|
||||
*[foo]*>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
vn-popover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
box-shadow: 0 0 .2em rgba(1,1,1,.4);
|
||||
background-color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
|
@ -17,7 +17,4 @@
|
|||
</vn-item-client>
|
||||
</vn-card>
|
||||
</div>
|
||||
<vn-popover>
|
||||
Popover test!
|
||||
</vn-popover>
|
||||
</vn-vertical>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@ export const COMPONENT = {
|
|||
controllerAs: 'search',
|
||||
controller: function($http) {
|
||||
this.clients = [];
|
||||
|
||||
$http.get('/client/api/Clients').then(
|
||||
json => {
|
||||
this.clients = json.data;
|
||||
},
|
||||
json => console.error(json.data.error.message)
|
||||
);
|
||||
|
||||
this.submit = function() {
|
||||
var query = {where: model};
|
||||
var self = this;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="mdl-menu mdl-js-menu mdl-menu--bottom-left user-menu" pad-medium for="searchbar" style="width:600px">
|
||||
<form name="form" ng-submit="form.$valid && search.submit()" pad-large>
|
||||
<div pad-large style="width: 600px;">
|
||||
<form name="form" ng-submit="form.$valid && search.submit()">
|
||||
<vn-horizontal>
|
||||
<vn-textfield vn-one label="Id Cliente" field="search.model.id"></vn-textfield>
|
||||
<vn-textfield vn-one label="NIF/CIF" field="search.model.fi"></vn-textfield>
|
||||
|
|
@ -18,9 +18,7 @@
|
|||
<vn-textfield vn-one label="Email" field="search.model.email"></vn-textfield>
|
||||
<vn-textfield vn-one label="Teléfono" field="search.model.phone"></vn-textfield>
|
||||
</vn-horizontal>
|
||||
<vn-submit label="">
|
||||
<i class="material-icons">add_shopping_cart</i>Add to shopping cart
|
||||
</vn-submit>
|
||||
<vn-button label="Search"></vn-button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue