add form design tool pallet toggle on small devices

Author: dleffler

framework/modules/forms/assets/less/designer_bs3.less

@@ -122,24 +122,43 @@ div#trash.trash {
 	text-align: center;
 }
 
-//attempt to make usable on small devices
-@media screen and (max-width: 500px) {
-	div#trash.trash {
-		right: 30px;
-	}
+#design_form .checkbox,
+#design_form .radio {
+    padding-left: 1.25em;
+}
 
-	ul#controls.controls {
-		max-height: 70%;
-		right: 2px;
-		-webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */
-	}
+// mobiel tool palette
+div#palette-button {
+	top: 72px;
+	right: 10px;
+	position: fixed;
+	z-index: 1030;
+}
 
-	ul#controls.controls li {
-		margin-right: 25px;
-	}
+div#palette-button {
+    display: none;
 }
 
-#design_form .checkbox,
-#design_form .radio {
-    padding-left: 1.25em;
-}
+@media screen and (max-width: 500px) {
+    ul#controls.controls {
+  		max-height: 70%;
+  		right: 2px;
+  		-webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */
+  	}
+
+  	ul#controls.controls li {
+  		margin-right: 25px;
+  	}
+
+    div#trash.trash {
+        right: 70px;
+    }
+
+    div#palette {
+        display: none;
+    }
+
+    div#palette-button {
+        display: block;
+    }
+}

framework/modules/forms/views/forms/design_form.bootstrap3.tpl

@@ -85,6 +85,11 @@
         {*<a class="{button_style}" href="{$backlink}">{'Done'|gettext}</a>*}
         {br}{icon button=true class=reply link=$backlink text='Exit Forms Designer'|gettext}
     </p>
+    <div id="palette-button" class="btn btn-secondary">
+        Tools
+        <i class="fas fa-bars bi bi-list"></i>
+    </div>
+    <div id="palette">
     <div id="trash" class="trash" title="{'Drag a control from the form and drop it on this box to remove it'|gettext}">
         <strong>{'Trash Can'|gettext}</strong>{br}
         {img class="img-center" src="`$smarty.const.PATH_RELATIVE`framework/modules/recyclebin/assets/images/trashcan_full_large.png"}
@@ -98,6 +103,7 @@
         {/foreach}
     </ul>
 </div>
+</div>
 
 {script unique="design-form" jquery="Sortable,bootstrap-dialog" bootstrap="modal,transition"}
 {literal}
@@ -141,6 +147,12 @@
             });
         });
 
+        // display tool palette on/off
+        $('#palette-button').on('click', function(evt) {
+            evt.preventDefault();
+            $('#palette').toggle();
+        });
+
         // we need to catch 'edit' button clicks
         $('#fakeform').on('click', '.edit', function(evt) {
             evt.preventDefault();

framework/modules/forms/views/forms/design_form.bootstrap5.tpl

@@ -85,18 +85,24 @@
         {*<a class="{button_style}" href="{$backlink}">{'Done'|gettext}</a>*}
         {br}{icon button=true class=reply link=$backlink text='Exit Forms Designer'|gettext}
     </p>
-    <div id="trash" class="trash" title="{'Drag a control from the form and drop it on this box to remove it'|gettext}">
-        <strong>{'Trash Can'|gettext}</strong>{br}
-        {img class="img-center" src="`$smarty.const.PATH_RELATIVE`framework/modules/recyclebin/assets/images/trashcan_full_large.png"}
+    <div id="palette-button" class="btn btn-secondary">
+        Tools
+        <i class="fas fa-bars bi bi-list"></i>
+    </div>
+    <div id="palette">
+        <div id="trash" class="trash" title="{'Drag a control from the form and drop it on this box to remove it'|gettext}">
+            <strong>{'Trash Can'|gettext}</strong>{br}
+            {img class="img-center" src="`$smarty.const.PATH_RELATIVE`framework/modules/recyclebin/assets/images/trashcan_full_large.png"}
+        </div>
+        <ul id="controls" class="controls" title="{'Drag a control from this box and drop it on the form to add it to the selected location'|gettext}">
+            <strong>{'Available Form Controls'|gettext}</strong>
+            {foreach from=$types key=value item=caption}
+                <li class="item" type="{$value}"{if $smarty.const.DEVELOPMENT} title="{$value}"{/if}>
+                    {$caption}
+                </li>
+            {/foreach}
+        </ul>
     </div>
-    <ul id="controls" class="controls" title="{'Drag a control from this box and drop it on the form to add it to the selected location'|gettext}">
-        <strong>{'Available Form Controls'|gettext}</strong>
-        {foreach from=$types key=value item=caption}
-            <li class="item" type="{$value}"{if $smarty.const.DEVELOPMENT} title="{$value}"{/if}>
-                {$caption}
-            </li>
-        {/foreach}
-    </ul>
 </div>
 
 {script unique="design-form" jquery="Sortable,bootbox.all" bootstrap="modal"}
@@ -141,6 +147,12 @@
             });
         });
 
+        // display tool palette on/off
+        $('#palette-button').on('click', function(evt) {
+            evt.preventDefault();
+            $('#palette').toggle();
+        });
+
         // we need to catch 'edit' button clicks
         $('#fakeform').on('click', '.edit', function(evt) {
             evt.preventDefault();