Popover beta

@salix/app/src/components/main-menu/main-menu.html

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

@salix/app/src/components/searchbar/searchbar.html

@@ -1,6 +1,8 @@
 <vn-horizontal>
-     <vn-textfield vn-one label="Search"></vn-textfield>
+     <vn-textfield vn-one label="Search" model="$ctrl.search"></vn-textfield>
-     <vn-icon icon="keyboard_arrow_down"></vn-icon>
+     <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>
-    

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

@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() {
+        controller: function($element) {
-            this.onClick = function (event) {
+            this.onMouseDown = function(event) {
-                event.stopPropagation();
+                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);
+            };
         }
     }
 }

@salix/core/src/popover/popover.mdl.html

@@ -1,7 +1,5 @@
 <div
-    class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu"
+    ng-mousedown="popover.onMouseDown($event)"
-    ng-click="$ctrl.onClick($event)"
-    pad-medium
     ng-transclude
     *[foo]*>
 </div>

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

@salix/crud/src/client/index/index.html

@@ -17,7 +17,4 @@
             </vn-item-client>
         </vn-card>
     </div>
-    <vn-popover>
-        Popover test!
-    </vn-popover>
 </vn-vertical>

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

@salix/crud/src/client/search-panel/search-panel.html

@@ -1,5 +1,5 @@
-<div class="mdl-menu mdl-js-menu mdl-menu--bottom-left user-menu" pad-medium for="searchbar" style="width:600px">
+<div pad-large style="width: 600px;">
-<form name="form" ng-submit="form.$valid && search.submit()" pad-large>
+<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="">
+    <vn-button label="Search"></vn-button>
-        <i class="material-icons">add_shopping_cart</i>Add to shopping cart
-    </vn-submit>
 </form>
 </div>