Move panel heading into seperate configurable directive

fixes #230

components/add-layers/partials/add-layers.directive.html

@@ -1,32 +1,27 @@
 <div class="hs-panel-margin panel" ng-class="{'panel-default mainpanel' : !Core.singleDatasources}">
-    <div class="card-header" ng-show="!Core.singleDatasources" translate>Add external data
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="ows" panel-title="'Add external data'||translate"></hs.layout.panel-header>
     <div class="card-body">
-            <form name="frmConnect" role="form" class="form">
-                <div class="form-group">
-                    <div class="input-group">
-                        <div class="input-group-prepend" id="type_label"><span class="input-group-text" translate>Choose format</span></div>
-                        <select class="form-control" id="ows_type" ng-model="type">
-                            <option ng-repeat="type in types">{{type}}</option>
-                        </select>
-                    </div>
+        <form name="frmConnect" role="form" class="form">
+            <div class="form-group">
+                <div class="input-group">
+                    <div class="input-group-prepend" id="type_label"><span class="input-group-text" translate>Choose format</span></div>
+                    <select class="form-control" id="ows_type" ng-model="type">
+                        <option ng-repeat="type in types">{{type}}</option>
+                    </select>
                 </div>
+            </div>
 
-                <div class="form-group">
-                    <div class="input-group">
-                        <input type="url" class="form-control" name="url" ng-model="url" placeholder="{{'External data source (URL)'|translate}}" required />
-                        <div class="input-group-append">
-                            <button type="button" class="btn btn-secondary" ng-if="frmConnect.url.$valid && isService()" ng-click="connect()"><i class="icon-link"></i></button>
-                            <button type="button" class="btn btn-danger" ng-if="frmConnect.url.$error.url"><i class="icon-alertalt"></i></button>
-                        </div>
+            <div class="form-group">
+                <div class="input-group">
+                    <input type="url" class="form-control" name="url" ng-model="url" placeholder="{{'External data source (URL)'|translate}}" required />
+                    <div class="input-group-append">
+                        <button type="button" class="btn btn-secondary" ng-if="frmConnect.url.$valid && isService()" ng-click="connect()"><i class="icon-link"></i></button>
+                        <button type="button" class="btn btn-danger" ng-if="frmConnect.url.$error.url"><i class="icon-alertalt"></i></button>
                     </div>
                 </div>
-            </form>
-            <hr/>
-            <div class='ows-capabilities' ng-show="showDetails" compile="templateByType()"></div>
+            </div>
+        </form>
+        <hr/>
+        <div class='ows-capabilities' ng-show="showDetails" compile="templateByType()"></div>
     </div>
 </div>

components/compositions/partials/compositions.html

@@ -1,13 +1,14 @@
 <div class="card panel-default mainpanel hs-comp-mainpanel">
-    <div class="card-header"><span translate>Compositions</span><span ng-show='data.compositionsCount>0'>({{data.compositionsCount}})</span>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-        <label class="btn btn-sm btn-secondary btn-file" title="Import composition from a file on device" style="margin-bottom:0; line-height: 1em; float: right; margin-right: 1em; cursor: pointer;">
-            <span class="icon-upload"></span><input type="file" ng-on-change="handleFileSelect($event)" accept=".json" style="display: none;">
-        </label>
-    </div>
+    <hs.layout.panel-header panel-name="composition_browser" panel-title="'Compositions'||translate">
+        <extra-title>
+            <span ng-show='data.compositionsCount>0'>({{data.compositionsCount}})</span>
+        </extra-title>
+        <extra-buttons>
+            <label class="btn btn-sm btn-secondary btn-file" title="Import composition from a file on device" style="margin-bottom:0; line-height: 1em; float: right; margin-right: 1em; cursor: pointer;">
+                <span class="icon-upload"></span><input type="file" ng-on-change="handleFileSelect($event)" accept=".json" style="display: none;">
+            </label>
+        </extra-buttons>
+    </hs.layout.panel-header>
     <div class="card-body">
         <form id="hs-comp-filter">
             <div class="form-group">

components/core/core.js

@@ -295,8 +295,11 @@ angular.module('hs.core', ['hs.map', 'gettext', 'hs.drag', 'hs.layout', 'hs.api'
                         });
                     }
                     which.unpinned = false;
-                    if (which.panel_name == me.mainpanel) {
+                    if (which.panelName == me.mainpanel) {
                         if (me.defaultPanel != '') {
+                            if(which.panelName == me.defaultPanel){
+                                me.sidebarExpanded = false;
+                            } else
                             me.setMainPanel(me.defaultPanel)
                         } else {
                             me.mainpanel = '';

components/datasource-selector/partials/datasource_selector.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Datasources</translate>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="datasource_selector" panel-title="'Datasources'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <!--        <div ng-if="!Core.singleDatasources" ng-include="'./datasource_search.html'">
             <div class="input-group col-lg-8 col-sm-12 col-xs-12" style="margin-bottom: 4px">

components/draw/partials/draw.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><span class="panel-title"><translate>Draw new features</translate></span>
-        <button type="button" class="close" ng-click="Core.closePanel(this);">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="draw" panel-title="'Draw new features'||translate"></hs.layout.panel-header>
     <div class="card-body hs-dr-panel">
 
         <!-- Layer -->

components/feature_crossfilter/partials/f_crossfilter.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel" id="f_crossfilter_data_panel">
-    <div class="card-header"><translate>Filter features</translate>
-         <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="feature_crossfilter" panel-title="'Filter features'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <div class="form-group">
             <img ng-src="{{loaderImage}}" ng-show="loading"/>

components/language/partials/language.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Change language</translate>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="language" panel-title="'Change language'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <ul class="hs-senslog-list list-group">
             <button ng-repeat="lang in available_languages" ng-class="'btn btn-block'+(getCurrentLanguageCode()==lang.key.substr(0,2).toUpperCase() ? ' btn-primary' : ' btn-secondary')" ng-click="setLanguage(lang.key)">{{lang.name}}</button>

components/layermanager/partials/layermanager.html

@@ -1,13 +1,11 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Layer manager</translate>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-        <button type="button" class="but-title-sm"  ng-click="removeAllLayers()">
-            <i class="glyphicon icon-refresh"></i>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="layermanager" panel-title="'Layer manager'||translate">
+        <extra-buttons>
+            <button type="button" class="but-title-sm"  ng-click="removeAllLayers()">
+                <i class="glyphicon icon-refresh"></i>
+            </button>
+        </extra-buttons>
+    </hs.layout.panel-header>
     <div class="card-body hs-lm-panel">
         <div class="nav nav-pills" ng-show="hasBoxImages()">
             <div ng-repeat="box in data.box_layers"  class="col-xs-2 col-md-2 active" style="padding-right: 2px; padding-left: 2px;">

components/layout/layout-panel-header.directive.js

@@ -0,0 +1,16 @@
+export default ['config', 'Core', function (config, Core) {
+    return {
+        template: require('components/layout/partials/panel-header.directive.html'),
+        transclude: {
+            'extraButtons': '?extraButtons',
+            'extraTitle': '?extraTitle'
+        },
+        scope: {
+            panelName: "@",
+            panelTitle: "=panelTitle"
+        },
+        controller: function ($scope) {                                   
+            $scope.closePanel = Core.closePanel;
+        }
+    };
+}]

components/layout/layout.module.js

@@ -18,6 +18,7 @@ import mdToolbarDirective from './md-toolbar.directive';
 import mdOverlayDirective from './md-overlay.directive';
 import mdSwipeAreaDirective from './md-swipe-area.directive';
 import layoutService from './layout.service';
+import layoutPanelHeaderDirective from './layout-panel-header.directive';
 
 // 'material.components.bottomSheetCollapsible'
 angular.module('hs.layout', ['hs.core', 'hs.map', 'hs.geolocation', 'hs.layermanager', 'hs.print'])
@@ -94,6 +95,15 @@ angular.module('hs.layout', ['hs.core', 'hs.map', 'hs.geolocation', 'hs.layerman
     */
     .directive('panelCreator', panelCreatorDirective)
 
+
+    /**
+    * @memberof hs.layout
+    * @ngdoc directive
+    * @name hs.panelHeader
+    * @description Directive for title bar of panels
+    */
+   .directive('hs.layout.panelHeader', layoutPanelHeaderDirective)
+
     /**
     * @memberof hs.layout
     * @ngdoc service

components/layout/partials/layout.html

@@ -37,13 +37,13 @@
                             <div hs.routing.directive               hs.draggable ng-controller="hs.routing.controller" ng-if="Core.exists('hs.routing.controller')" ng-show="Core.panelVisible('routing', this)"></div>
                             <div hs.tracking.directive              hs.draggable ng-controller="hs.tracking.controller" ng-if="Core.exists('hs.tracking.controller')" ng-show="Core.panelVisible('tracking', this)"></div>
                             <div hs.draw.directive                  hs.draggable ng-controller="hs.draw.controller" ng-if="Core.exists('hs.draw.controller')" ng-show="Core.panelVisible('draw', this)"></div>
-                            <div hs.customhtml.directive                                                            ng-if="Core.exists('hs.customhtml.controller')"></div>
+                            <div hs.customhtml.directive                                                            ng-if="Core.exists('hs.customhtml')"></div>
                         </div>
                     </div>
                 </div>
                 <div id="hs-info-container" ng-hide="Core.smallWidth && Core.sidebarExpanded">
                     <div id="hs-info-area">
-                        <hs.info ng-if="Core.exists('hs.info.controller')"></hs.info>
+                        <hs.info ng-if="Core.exists('hs.info')"></hs.info>
                     </div>
                 </div>
             </div>

components/layout/partials/panel-header.directive.html

@@ -0,0 +1,7 @@
+    <div class="card-header">{{panelTitle}}<span ng-transclude="extraTitle"></span>
+        <button type="button" class="close" ng-click="closePanel(this)">
+            <span aria-hidden="true">×</span>
+            <span class="sr-only">Close</span>
+        </button>
+        <span ng-transclude="extraButtons"></span>
+    </div>

components/legend/partials/legend.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Legend</translate>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only">Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="legend" panel-title="'Legend'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <p><input type="text" class="form-control" placeholder="Filter:" ng-model="query.title"></p>
         <ul class="list-group">

components/measure/partials/measure.html

@@ -1,10 +1,7 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><span class="panel-title"><translate>Measure</translate> <span ng-show="data.multipleShapeMode" translate>multiple shapes</span></span>
-        <button type="button" class="close" ng-click="Core.closePanel(this);">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="measure" panel-title="'Measure'||translate">
+        <extra-title>&nbsp;<span ng-show="data.multipleShapeMode" translate>multiple shapes</span></extra-title>
+    </hs.layout.panel-header>
     <div class="card-body p-2">
           <div class="btn-group btn-group-toggle" style="margin-bottom:10px">
             <label for="distance" class="btn btn-secondary" ng-class="{active: type == 'distance'}">

components/mobile_settings/partials/mobile_settings.html

@@ -1,24 +1,24 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Settings</translate></div>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-        <button type="button" class="but-title-sm" ng-click="initSettings(settingsDb)">
-            <span class="icon-repeat"></span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="settings" panel-title="'Settings'||translate">
+        <extra-buttons>
+            <button type="button" class="but-title-sm" ng-click="initSettings(settingsDb)">
+                <span class="icon-repeat"></span>
+            </button>
+        </extra-buttons>
+    </hs.layout.panel-header>
     <div class="card-body">
         <div class="hs-settings-hostname" style="padding: 10px 15px">
             <div class="hs-settings-hostname-title">Data source</div>
-            <select class="form-control" id="hs-settings-hostname" ng-model="selectedHostname" ng-change="changeHostname()" style="margin-bottom: 5px">
-                <option ng-repeat="host in hostnames" ng-selected="selectedHostname==host.title" value="{{ host.title }}">{{ host.title }}</option>
+            <select class="form-control" id="hs-settings-hostname" ng-model="selectedHostname"
+                ng-change="changeHostname()" style="margin-bottom: 5px">
+                <option ng-repeat="host in hostnames" ng-selected="selectedHostname==host.title"
+                    value="{{ host.title }}">{{ host.title }}</option>
             </select>
             <div class="hs-settings-hostname-title">{{ hostname.default.title }}</div>
             <div class="hs-settings-hostname-url">{{ hostname.default.url }}</div>
         </div>
 
-<!--     	<ul class="list-group hostnames">
+        <!--     	<ul class="list-group hostnames">
     		<li ng-repeat="hostname in hostnames" class="list-group-item" ng-class="hostname.editable ? 'editable' : ''">
                 <div class="hs-settings-hostname-title">{{ hostname.title }}</div>
     			<div class="hs-settings-hostname-url">{{ hostname.url }}</div>

components/permalink/partials/directive.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Share map</translate>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="permalink" panel-title="'Share map'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <div class="card-body">
 

components/print/partials/printdialog.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Print</translate>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="print" panel-title="'Print'||translate"></hs.layout.panel-header>
     <div class="card-body">
             <div class="card-body">
             <div class="form-group">

components/query/partials/infopanel.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><translate>Info</translate>
-        <button type="button" class="close" ng-click="Core.closePanel(this)">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="info" panel-title="'Info'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <table class="table table-compact" ng-repeat="group in data.groups | orderBy : 'name'">
             <tr><th colspan="2">{{group.name}}</th></tr>

components/routing/partials/routing.html

@@ -1,10 +1,5 @@
 <div class="card panel-default mainpanel">
-    <div class="card-header"><span class="panel-title"><translate>Routing</translate></span>
-        <button type="button" class="close" ng-click="Core.closePanel(this); clearAll()">
-            <span aria-hidden="true">×</span>
-            <span class="sr-only" translate>Close</span>
-        </button>
-    </div>
+    <hs.layout.panel-header panel-name="routing" panel-title="'Routing'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <div class="card-body">
             <div class="form-group">