From 0266f65a95d0941f7e09eb7cb5c272b8ad33c0d2 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Wed, 25 Nov 2020 11:11:11 -0800
Subject: [PATCH] afGuiEditor - Switch canvas panel to use tabs

(1) This makes the canvas and palette line-up more nicely.

(2) This will allow more tabs.
---
 ext/afform/gui/ang/afGuiEditor.css         |  5 ----
 ext/afform/gui/ang/afGuiEditor.js          |  1 +
 ext/afform/gui/ang/afGuiEditor/canvas.html | 31 +++++++++++++---------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index fa0d8fddc9..e99b30e903 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -260,11 +260,6 @@
   width: 300px;
 }
 
-#afGuiEditor-canvas .panel-heading .btn-group {
-  position: relative;
-  top: -8px;
-}
-
 #afGuiEditor .af-gui-button {
   padding-left: 15px;
 }
diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index a0cf7992a5..546fe8a766 100644
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -62,6 +62,7 @@
               alert('Error: unknown form "' + $scope.afGuiEditor.name + '"');
             }
           }
+          $scope.canvasTab = 'layout';
           $scope.layout = findRecursive($scope.afform.layout, {'#tag': 'af-form'})[0];
           $scope.entities = findRecursive($scope.layout['#children'], {'#tag': 'af-entity'}, 'name');
 
diff --git a/ext/afform/gui/ang/afGuiEditor/canvas.html b/ext/afform/gui/ang/afGuiEditor/canvas.html
index fc2553fb95..6f7a9b1de0 100644
--- a/ext/afform/gui/ang/afGuiEditor/canvas.html
+++ b/ext/afform/gui/ang/afGuiEditor/canvas.html
@@ -1,18 +1,25 @@
 <div class="panel panel-default">
   <div class="panel-heading">
-    <form class="form-inline">
-      <div class="btn-group btn-group-md pull-right">
-        <button type="submit" class="btn" ng-class="{'btn-primary': !changesSaved && !saving, 'btn-warning': saving, 'btn-success': changesSaved}" ng-disabled="changesSaved || saving || !afform.title" ng-click="save()">
-          <i class="crm-i" ng-class="{'fa-check': !saving, 'fa-spin fa-spinner': saving}"></i>
-          <span ng-if="changesSaved && !saving">{{ ts('Saved') }}</span>
-          <span ng-if="!changesSaved && !saving">{{ ts('Save') }}</span>
-          <span ng-if="saving">{{ ts('Saving...') }}</span>
-        </button>
-      </div>
-      <div>{{ ts('Form Layout') }}</div>
-    </form>
+
+    <div class="btn-group btn-group-md  pull-right">
+      <button type="submit" class="btn" ng-class="{'btn-primary': !changesSaved && !saving, 'btn-warning': saving, 'btn-success': changesSaved}" ng-disabled="changesSaved || saving || !afform.title" ng-click="save()">
+        <i class="crm-i" ng-class="{'fa-check': !saving, 'fa-spin fa-spinner': saving}"></i>
+        <span ng-if="changesSaved && !saving">{{ ts('Saved') }}</span>
+        <span ng-if="!changesSaved && !saving">{{ ts('Save') }}</span>
+        <span ng-if="saving">{{ ts('Saving...') }}</span>
+      </button>
+    </div>
+
+    <ul class="nav nav-tabs">
+      <li role="presentation" ng-class="{active: canvasTab === 'layout'}">
+        <a ng-click="canvasTab = 'layout'">
+          <span>{{ ts('Form Layout') }}</span>
+        </a>
+      </li>
+    </ul>
+
   </div>
-  <div id="afGuiEditor-canvas-body" class="panel-body">
+  <div id="afGuiEditor-canvas-body" class="panel-body" ng-if="canvasTab === 'layout'">
     <div ng-if="layout" af-gui-container="layout" entity-name="" />
   </div>
 </div>
-- 
2.25.1