Add sortability to custom profile fields form

This commit is contained in:
Hypolite Petovan 2020-01-18 10:43:28 -05:00
parent 9bc78efe68
commit cc007f715d
8 changed files with 61 additions and 4 deletions

View file

@ -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());

View file

@ -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;
}

View file

@ -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();
}
});
});

View file

@ -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}}">

View file

@ -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}}"/>

View file

@ -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}}">

View file

@ -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>

View file

@ -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}}"/>