Add sortability to custom profile fields form

diff --git a/src/Module/Settings/Profile/Index.php b/src/Module/Settings/Profile/Index.php
index 778f7c09c7ea26bfd507e0fa4f4a5010b7a9f17f..d719afeacf57617b79b978c3771567eddd7bf61c 100644 (file)
--- a/src/Module/Settings/Profile/Index.php
+++ b/src/Module/Settings/Profile/Index.php
@@ -7,6 +7,7 @@ use Friendica\Core\Hook;
 use Friendica\Core\Protocol;
 use Friendica\Core\Renderer;
 use Friendica\Core\Session;
+use Friendica\Core\Theme;
 use Friendica\Core\Worker;
 use Friendica\Database\DBA;
 use Friendica\DI;
@@ -162,6 +163,9 @@ class Index extends BaseSettingsModule
 
                $a = DI::app();
 
+               DI::page()->registerFooterScript('view/asset/es-jquery-sortable/source/js/jquery-sortable-min.js');
+               DI::page()->registerFooterScript(Theme::getPathForFile('js/module/settings/profile/index.js'));
+
                $custom_fields = [];
 
                $profileFields = DI::profileField()->selectByUserId(local_user());

diff --git a/view/global.css b/view/global.css
index 0eaf4482dccce4f31f0314dbe0ad25a13778d40d..bf4c21314d9ba2281f57f690799589b0b58b9c90 100644 (file)
--- a/view/global.css
+++ b/view/global.css
@@ -639,3 +639,37 @@ span.emoji.mastodon img {
     display: none;
   }
 }
+
+/* Profile Settings Custom Fields */
+body.dragging, body.dragging * {
+       cursor: ns-resize !important;
+}
+
+.dragged {
+       position: absolute;
+       opacity: 0.5;
+       z-index: 2000;
+}
+
+#profile-custom-fields > fieldset > legend {
+       cursor: ns-resize;
+}
+
+#profile-custom-fields div.placeholder {
+       position: relative;
+       margin: 0;
+       padding: 0;
+       border-top: 1px dotted black;
+}
+#profile-custom-fields div.placeholder:before {
+       position: absolute;
+       content: "";
+       width: 0;
+       height: 0;
+       margin-top: -7px;
+       left: -7px;
+       top: -1px;
+       border: 7px solid transparent;
+       border-left-color: black;
+       border-right: none;
+}

diff --git a/view/js/module/settings/profile/index.js b/view/js/module/settings/profile/index.js
new file mode 100644 (file)
index 0000000..1177e51
--- /dev/null
+++ b/view/js/module/settings/profile/index.js
@@ -0,0 +1,13 @@
+$(function () {
+       $("#profile-custom-fields").sortable({
+               containerSelector: 'div#profile-custom-fields',
+               handle: 'legend',
+               itemSelector: 'fieldset',
+               placeholder: '<div class="placeholder"></div>',
+               onDrag: function($item, position, _super, event) {
+                       delete position['left'];
+                       $item.css(position);
+                       event.preventDefault();
+               }
+       });
+});

diff --git a/view/templates/settings/profile/field/edit.tpl b/view/templates/settings/profile/field/edit.tpl
index 6254119f32256db155e2ef069576e0316d8b5c12..cff432709e1c00a4da24693c259e7c670e481088 100644 (file)
--- a/view/templates/settings/profile/field/edit.tpl
+++ b/view/templates/settings/profile/field/edit.tpl
@@ -1,5 +1,5 @@
-<fieldset>
-       <legend>{{$profile_field.legend}}</legend>
+<fieldset data-id="{{$profile_field.id}}">
+       <legend>&#8801; {{$profile_field.legend}}</legend>
 
        <input type="hidden" name="profile_field_order[]" value="{{$profile_field.id}}">
 

diff --git a/view/templates/settings/profile/index.tpl b/view/templates/settings/profile/index.tpl
index 979dfcc9efa4ffc4235c17bfbbd7fbad33b63b65..70db8a3d4b1965294414d4e2ab3482f622f83de3 100644 (file)
--- a/view/templates/settings/profile/index.tpl
+++ b/view/templates/settings/profile/index.tpl
@@ -99,9 +99,11 @@
 
                <h3>{{$lbl_custom_fields_section}}</h3>
 
+               <div id="profile-custom-fields">
                {{foreach $custom_fields as $custom_field}}
                        {{include file="settings/profile/field/edit.tpl" profile_field=$custom_field}}
                {{/foreach}}
+               </div>
 
                <div class="profile-edit-submit-wrapper">
                        <input type="submit" name="submit" class="profile-edit-submit-button" value="{{$submit}}"/>

diff --git a/view/theme/frio/templates/settings/profile/field/edit.tpl b/view/theme/frio/templates/settings/profile/field/edit.tpl
index cbfb55d3be259a795848615be0c7a9444855d32d..f28e559f5e9a64d141fa951825748ce080965b6a 100644 (file)
--- a/view/theme/frio/templates/settings/profile/field/edit.tpl
+++ b/view/theme/frio/templates/settings/profile/field/edit.tpl
@@ -1,5 +1,5 @@
-<fieldset>
-       <legend>{{$profile_field.legend}}</legend>
+<fieldset data-id="{{$profile_field.id}}">
+       <legend>&#8801; {{$profile_field.legend}}</legend>
 
        <input type="hidden" name="profile_field_order[]" value="{{$profile_field.id}}">
 

diff --git a/view/theme/frio/templates/settings/profile/index.tpl b/view/theme/frio/templates/settings/profile/index.tpl
index 57f8845b6643606ba62cff72763e9a888b9d0571..7afe11996ea6077d8c4474bf871069e9f1c67a56 100644 (file)
--- a/view/theme/frio/templates/settings/profile/index.tpl
+++ b/view/theme/frio/templates/settings/profile/index.tpl
@@ -157,9 +157,11 @@
                                </div>
                                <div id="custom-fields-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="custom-fields">
                                        <div class="section-content-tools-wrapper">
+                                               <div id="profile-custom-fields">
                                                {{foreach $custom_fields as $custom_field}}
                                                        {{include file="settings/profile/field/edit.tpl" profile_field=$custom_field}}
                                                {{/foreach}}
+                                               </div>
 
                                                <div class="form-group pull-right">
                                                        <button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>

diff --git a/view/theme/vier/templates/settings/profile/index.tpl b/view/theme/vier/templates/settings/profile/index.tpl
index 5d7a94c0a1752200de22745d02128a71cf0ab5ae..8ca6e0f885a7d43e05dd5f9900f374c0c7caa7de 100644 (file)
--- a/view/theme/vier/templates/settings/profile/index.tpl
+++ b/view/theme/vier/templates/settings/profile/index.tpl
@@ -150,9 +150,11 @@
                <div class="toggle-section js-toggle-section">
                        <a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_custom_fields_section}} &raquo;</a>
                        <div class="js-section toggle-section-content hidden">
+                               <div id="profile-custom-fields">
                                {{foreach $custom_fields as $custom_field}}
                                        {{include file="settings/profile/field/edit.tpl" profile_field=$custom_field}}
                                {{/foreach}}
+                               </div>
 
                                <div class="profile-edit-submit-wrapper">
                                        <input type="submit" name="submit" class="profile-edit-submit-button" value="{{$submit}}"/>