afGuiEditor - Switch canvas panel to use tabs

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

(2) This will allow more tabs.

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index fa0d8fddc997cdbe9770d586981815e42abdbc8d..e99b30e90381ff36fb8adfaf3bfb8d300571dde1 100644 (file)
--- 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 a0cf7992a592d84914e6f0ae585f625b2d79208a..546fe8a76683fa3c8bcbfd722137dc26d6e80174 100644 (file)
--- 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 fc2553fb95858f579b94ecd1e3c49c81f1cb2be4..6f7a9b1de01a3add9b2c8f7433af1df625bed66f 100644 (file)
--- 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>