diff --git a/@salix/app/src/components/main-menu/main-menu.html b/@salix/app/src/components/main-menu/main-menu.html
index 981e64bc1..16a8112ad 100644
--- a/@salix/app/src/components/main-menu/main-menu.html
+++ b/@salix/app/src/components/main-menu/main-menu.html
@@ -3,12 +3,12 @@
+
--->
\ No newline at end of file
diff --git a/@salix/app/src/components/searchbar/searchbar.html b/@salix/app/src/components/searchbar/searchbar.html
index 49442dbd8..857ec6e69 100644
--- a/@salix/app/src/components/searchbar/searchbar.html
+++ b/@salix/app/src/components/searchbar/searchbar.html
@@ -1,6 +1,8 @@
-
-
+
+
-
-
\ No newline at end of file
+
+
+
+
\ No newline at end of file
diff --git a/@salix/app/src/components/searchbar/searchbar.js b/@salix/app/src/components/searchbar/searchbar.js
index a3f36dd72..574924c34 100644
--- a/@salix/app/src/components/searchbar/searchbar.js
+++ b/@salix/app/src/components/searchbar/searchbar.js
@@ -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);
diff --git a/@salix/app/src/components/searchbar/style.css b/@salix/app/src/components/searchbar/style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/@salix/core/src/popover/popover.js b/@salix/core/src/popover/popover.js
index 84f09415b..e24bc4ea7 100644
--- a/@salix/core/src/popover/popover.js
+++ b/@salix/core/src/popover/popover.js
@@ -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);
+ };
}
}
}
diff --git a/@salix/core/src/popover/popover.mdl.html b/@salix/core/src/popover/popover.mdl.html
index 01cd51cc0..886efd8bc 100644
--- a/@salix/core/src/popover/popover.mdl.html
+++ b/@salix/core/src/popover/popover.mdl.html
@@ -1,7 +1,5 @@
\ No newline at end of file
diff --git a/@salix/core/src/popover/style.css b/@salix/core/src/popover/style.css
index 6ec8f95d8..74523addd 100644
--- a/@salix/core/src/popover/style.css
+++ b/@salix/core/src/popover/style.css
@@ -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;
}
\ No newline at end of file
diff --git a/@salix/crud/src/client/index/index.html b/@salix/crud/src/client/index/index.html
index edee93333..733fc935b 100644
--- a/@salix/crud/src/client/index/index.html
+++ b/@salix/crud/src/client/index/index.html
@@ -17,7 +17,4 @@
-
- Popover test!
-
diff --git a/@salix/crud/src/client/index/index.js b/@salix/crud/src/client/index/index.js
index 81785d2ea..96af0bb41 100644
--- a/@salix/crud/src/client/index/index.js
+++ b/@salix/crud/src/client/index/index.js
@@ -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;
diff --git a/@salix/crud/src/client/search-panel/search-panel.html b/@salix/crud/src/client/search-panel/search-panel.html
index e06ce70ec..272bc1618 100644
--- a/@salix/crud/src/client/search-panel/search-panel.html
+++ b/@salix/crud/src/client/search-panel/search-panel.html
@@ -1,5 +1,5 @@
-