Add sortability to custom profile fields form
This commit is contained in:
parent
9bc78efe68
commit
cc007f715d
8 changed files with 61 additions and 4 deletions
|
@ -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());
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
13
view/js/module/settings/profile/index.js
Normal file
13
view/js/module/settings/profile/index.js
Normal 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();
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,5 +1,5 @@
|
|||
<fieldset>
|
||||
<legend>{{$profile_field.legend}}</legend>
|
||||
<fieldset data-id="{{$profile_field.id}}">
|
||||
<legend>≡ {{$profile_field.legend}}</legend>
|
||||
|
||||
<input type="hidden" name="profile_field_order[]" value="{{$profile_field.id}}">
|
||||
|
||||
|
|
|
@ -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}}"/>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<fieldset>
|
||||
<legend>{{$profile_field.legend}}</legend>
|
||||
<fieldset data-id="{{$profile_field.id}}">
|
||||
<legend>≡ {{$profile_field.legend}}</legend>
|
||||
|
||||
<input type="hidden" name="profile_field_order[]" value="{{$profile_field.id}}">
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -150,9 +150,11 @@
|
|||
<div class="toggle-section js-toggle-section">
|
||||
<a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_custom_fields_section}} »</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}}"/>
|
||||
|
|
Loading…
Reference in a new issue