From 422a982d60e47b629ef29def466cef4c7a618f9a Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Sun, 2 Oct 2016 16:11:20 +1300
Subject: [PATCH] feat(templates): template configuration is now placed on top
 of template list (#253)

---
 app/components/templates/templates.html | 56 +++++++++++++------------
 app/directives/widget-custom-header.js  | 15 +++++++
 assets/css/app.css                      |  5 +++
 3 files changed, 49 insertions(+), 27 deletions(-)
 create mode 100644 app/directives/widget-custom-header.js

diff --git a/app/components/templates/templates.html b/app/components/templates/templates.html
index 5d09065d4..a53bd09af 100644
--- a/app/components/templates/templates.html
+++ b/app/components/templates/templates.html
@@ -7,31 +7,11 @@
   <rd-header-content>Templates</rd-header-content>
 </rd-header>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-rocket" title="Available templates">
-        <div class="pull-right">
-          <i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
-        </div>
-      </rd-widget-header>
-      <rd-widget-body classes="padding">
-        <div class="template-list">
-          <div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
-            <img class="logo" ng-src="{{ tpl.logo }}" />
-            <div class="title">{{ tpl.title }}</div>
-            <div class="description">{{ tpl.description }}</div>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
 <div class="row" ng-if="selectedTemplate">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-cogs" title="Configuration"></rd-widget-header>
+      <rd-widget-custom-header icon="selectedTemplate.logo" title="selectedTemplate.image">
+      </rd-widget-custom-header>
       <rd-widget-body classes="padding">
         <form class="form-horizontal">
           <div class="form-group" ng-if="globalNetworkCount === 0 && !swarm_mode">
@@ -71,6 +51,12 @@
               <input ng-if="!var.type || !var.type === 'container'" type="text" class="form-control" ng-model="var.value" id="field_{{ $index }}">
             </div>
           </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-default btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
+              <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
         </form>
       </rd-widget-body>
     </rd-widget>
@@ -78,10 +64,26 @@
 </div>
 
 <div class="row" ng-if="selectedTemplate">
-  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
-    <div>
-      <i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
-    </div>
-    <button type="button" class="btn btn-default btn-lg" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
+
+</div>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-rocket" title="Available templates">
+        <div class="pull-right">
+          <i id="loadTemplatesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
+      </rd-widget-header>
+      <rd-widget-body classes="padding">
+        <div class="template-list">
+          <div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
+            <img class="logo" ng-src="{{ tpl.logo }}" />
+            <div class="title">{{ tpl.title }}</div>
+            <div class="description">{{ tpl.description }}</div>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
   </div>
 </div>
diff --git a/app/directives/widget-custom-header.js b/app/directives/widget-custom-header.js
new file mode 100644
index 000000000..c1444b3f6
--- /dev/null
+++ b/app/directives/widget-custom-header.js
@@ -0,0 +1,15 @@
+angular
+.module('portainer')
+.directive('rdWidgetCustomHeader', function rdWidgetCustomHeader() {
+  var directive = {
+    requires: '^rdWidget',
+    scope: {
+      title: '=',
+      icon: '='
+    },
+    transclude: true,
+    template: '<div class="widget-header"><div class="row"><span class="pull-left"><img class="custom-header-ico" ng-src="{{icon}}"></img> <span class="small text-muted"> {{title}} </span> </span><span class="pull-right col-xs-6 col-sm-4" ng-transclude></span></div></div>',
+    restrict: 'E'
+  };
+  return directive;
+});
diff --git a/assets/css/app.css b/assets/css/app.css
index 38711bdb9..c993c6230 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -216,6 +216,11 @@ input[type="radio"] {
   flex-wrap: wrap;
 }
 
+.custom-header-ico {
+  max-width: 16px;
+  max-height: 16px;
+}
+
 .container-template {
   font-size: 1em;
   width: 256px;