1
1
Fork 0

Use visibility tags input for the default ACL selector

- Move friendica-tagsinput to default view folder
- Update all references to ACL::getFullSelectorHTML
- Fix theme-specific issues with the new ACL
This commit is contained in:
Hypolite Petovan 2019-11-28 12:42:12 -05:00
commit ae3d4f63a3
21 changed files with 487 additions and 253 deletions

View file

@ -0,0 +1,155 @@
/*
* friendica-tagsinput v0.8.0
*
* Non-Bootstrap edition
*/
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.label-default {
background-color: #777777;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #5e5e5e;
}
.label-primary {
background-color: #337ab7;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #286090;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: #eeeeee;
opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
cursor: not-allowed;
}
.friendica-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
height: auto;
}
.friendica-tagsinput.input-lg {
line-height: 27px;
}
.friendica-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
}
.friendica-tagsinput.form-control input::-moz-placeholder {
color: #777;
opacity: 1;
}
.friendica-tagsinput.form-control input:-ms-input-placeholder {
color: #777;
}
.friendica-tagsinput.form-control input::-webkit-input-placeholder {
color: #777;
}
.friendica-tagsinput input:focus {
border: none;
box-shadow: none;
}
.friendica-tagsinput .tag {
margin: 0 2px 2px 0;
color: white;
font-weight: normal;
}
.friendica-tagsinput .tag img {
width: auto;
height: 1.5em;
vertical-align: text-top;
margin-right: 8px;
}
.friendica-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.friendica-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
font-weight: bold;
}
.friendica-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.friendica-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

View file

@ -1,58 +1,263 @@
<div id="acl-wrapper">
<input id="acl-search" autocomplete="off">
<a id="acl-showall">{{$showall}}</a>
<div id="acl-list">
<div id="acl-list-content">
<div class="panel-group" id="visibility-accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-success">
<div class="panel-heading{{if $visibility != 'public'}} collapsed{{/if}}" id="visibility-public-heading" aria-expanded="{{if $visibility == 'public'}}true{{else}}false{{/if}}">
<label>
<input type="radio" name="visibility" id="visibility-public" value="public" tabindex="14" {{if $visibility == 'public'}}checked{{/if}}>
<i class="fa fa-globe"></i> {{$public_title}}
</label>
</div>
<fieldset id="visibility-public-panel" class="panel-collapse collapse{{if $visibility == 'public'}} in{{/if}}" role="tabpanel" aria-labelledby="visibility-public-heading" {{if $visibility != 'public'}}disabled{{/if}}>
<div class="panel-body">
<p>{{$public_desc}}</p>
{{if $for_federation}}
{{if $user_hidewall}}
<h4>{{$jotnets_summary}}</h4>
{{$jotnets_disabled_label}}
{{elseif $jotnets_fields}}
{{if $jotnets_fields|count < 3}}
<div class="profile-jot-net">
{{else}}
<details class="profile-jot-net">
<summary>{{$jotnets_summary}}</summary>
{{/if}}
{{foreach $jotnets_fields as $jotnets_field}}
{{if $jotnets_field.type == 'checkbox'}}
{{include file="field_checkbox.tpl" field=$jotnets_field.field}}
{{elseif $jotnets_field.type == 'select'}}
{{include file="field_select.tpl" field=$jotnets_field.field}}
{{/if}}
{{/foreach}}
{{if $jotnets_fields|count >= 3}}
</details>
{{else}}
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</fieldset>
</div>
<div class="panel panel-info">
<div class="panel-heading{{if $visibility != 'custom'}} collapsed{{/if}}" id="visibility-custom-heading" aria-expanded="{{if $visibility == 'custom'}}true{{else}}false{{/if}}">
<label>
<input type="radio" name="visibility" id="visibility-custom" value="custom" tabindex="15" {{if $visibility == 'custom'}}checked{{/if}}>
<i class="fa fa-lock"></i> {{$custom_title}}
</label>
</div>
<fieldset id="visibility-custom-panel" class="panel-collapse collapse{{if $visibility == 'custom'}} in{{/if}}" role="tabpanel" aria-labelledby="visibility-custom-heading" {{if $visibility != 'custom'}}disabled{{/if}}>
<input type="hidden" name="group_allow" value="{{$group_allow}}"/>
<input type="hidden" name="contact_allow" value="{{$contact_allow}}"/>
<input type="hidden" name="group_deny" value="{{$group_deny}}"/>
<input type="hidden" name="contact_deny" value="{{$contact_deny}}"/>
<div class="panel-body">
<p>{{$custom_desc}}</p>
<div class="form-group">
<label for="acl_allow">{{$allow_label}}</label>
<input type="text" class="form-control input-lg" id="acl_allow">
</div>
<div class="form-group">
<label for="acl_deny">{{$deny_label}}</label>
<input type="text" class="form-control input-lg" id="acl_deny">
</div>
</div>
</fieldset>
</div>
</div>
<span id="acl-fields"></span>
</div>
<div class="acl-list-item" rel="acl-template" style="display:none">
<img data-src="{0}"><p>{1}</p>
<a class='acl-button-show'>{{$show}}</a>
<a class='acl-button-hide'>{{$hide}}</a>
</div>
{{if $networks}}
<hr style="clear:both"/>
<div id="profile-jot-email-label">{{$emailcc}}</div><input type="text" name="emailcc" id="profile-jot-email" title="{{$emtitle}}" />
<div id="profile-jot-email-end"></div>
{{if $jotnets_fields}}
{{if $jotnets_fields|count < 3}}
<div class="profile-jot-net">
{{else}}
<details class="profile-jot-net">
<summary>{{$jotnets_summary}}</summary>
{{/if}}
{{foreach $jotnets_fields as $jotnets_field}}
{{if $jotnets_field.type == 'checkbox'}}
{{include file="field_checkbox.tpl" field=$jotnets_field.field}}
{{elseif $jotnets_field.type == 'select'}}
{{include file="field_select.tpl" field=$jotnets_field.field}}
{{/if}}
{{/foreach}}
{{if $jotnets_fields|count >= 3}}
</details>
{{else}}
</div>
{{/if}}
{{/if}}
{{if $for_federation}}
<div class="form-group">
<label for="profile-jot-email" id="profile-jot-email-label">{{$emailcc}}</label>
<input type="text" name="emailcc" id="profile-jot-email" class="form-control" title="{{$emtitle}}" />
</div>
<div id="profile-jot-email-end"></div>
{{/if}}
</div>
<script type="text/javascript">
$(function() {
let $acl_allow_input = $('#acl_allow');
let $contact_allow_input = $('[name=contact_allow]');
let $group_allow_input = $('[name=group_allow]');
let $acl_deny_input = $('#acl_deny');
let $contact_deny_input = $('[name=contact_deny]');
let $group_deny_input = $('[name=group_deny]');
let $visibility_public_panel = $('#visibility-public-panel');
let $visibility_custom_panel = $('#visibility-custom-panel');
let $visibility_public_radio = $('#visibility-public');
let $visibility_custom_radio = $('#visibility-custom');
<script>
$(document).ready(function() {
if(typeof acl=="undefined"){
acl = new ACL(
baseurl + '/search/acl',
[ {{$allowcid nofilter}},{{$allowgid nofilter}},{{$denycid nofilter}},{{$denygid nofilter}} ],
{{$features.aclautomention}},
{{if $APP->is_mobile}}true{{else}}false{{/if}}
);
}
});
// Frio specific
if ($.fn.collapse) {
$visibility_public_panel.collapse({parent: '#visibility-accordion', toggle: false});
$visibility_custom_panel.collapse({parent: '#visibility-accordion', toggle: false});
}
$visibility_public_radio.on('change', function (e) {
if ($.fn.collapse) {
$visibility_public_panel.collapse('show');
}
$visibility_public_panel.prop('disabled', false);
$visibility_custom_panel.prop('disabled', true);
$('.profile-jot-net input[type=checkbox]').each(function() {
// Restores checkbox state if it had been saved
if ($(this).attr('data-checked') !== undefined) {
$(this).prop('checked', $(this).attr('data-checked') === 'true');
}
});
$('.profile-jot-net input').attr('disabled', false);
});
$visibility_custom_radio.on('change', function(e) {
if ($.fn.collapse) {
$visibility_custom_panel.collapse('show');
}
$visibility_public_panel.prop('disabled', true);
$visibility_custom_panel.prop('disabled', false);
$('.profile-jot-net input[type=checkbox]').each(function() {
// Saves current checkbox state
$(this)
.attr('data-checked', $(this).prop('checked'))
.prop('checked', false);
});
$('.profile-jot-net input').attr('disabled', 'disabled');
});
// Custom visibility tags inputs
let acl_groups = new Bloodhound({
local: {{$acl_groups|@json_encode nofilter}},
identify: function(obj) { return obj.id; },
datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name']),
queryTokenizer: Bloodhound.tokenizers.whitespace,
});
let acl_contacts = new Bloodhound({
local: {{$acl_contacts|@json_encode nofilter}},
identify: function(obj) { return obj.id; },
datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
queryTokenizer: Bloodhound.tokenizers.whitespace,
});
let acl = new Bloodhound({
local: {{$acl_list|@json_encode nofilter}},
identify: function(obj) { return obj.id; },
datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
queryTokenizer: Bloodhound.tokenizers.whitespace,
});
acl.initialize();
let suggestionTemplate = function (item) {
return '<div><img src="' + item.micro + '" alt="" style="float: left; width: auto; height: 2.8em; margin-right: 0.5em;"> <strong>' + item.name + '</strong><br /><em>' + item.addr + '</em></div>';
};
$acl_allow_input.tagsinput({
confirmKeys: [13, 44],
freeInput: false,
tagClass: function(item) {
switch (item.type) {
case 'group' : return 'label label-primary';
case 'contact' :
default:
return 'label label-info';
}
},
itemValue: 'id',
itemText: 'name',
itemThumb: 'micro',
itemTitle: function(item) {
return item.addr;
},
typeaheadjs: {
name: 'contacts',
displayKey: 'name',
templates: {
suggestion: suggestionTemplate
},
source: acl.ttAdapter()
}
});
$acl_deny_input
.tagsinput({
confirmKeys: [13, 44],
freeInput: false,
tagClass: function(item) {
switch (item.type) {
case 'group' : return 'label label-primary';
case 'contact' :
default:
return 'label label-info';
}
},
itemValue: 'id',
itemText: 'name',
itemThumb: 'micro',
itemTitle: function(item) {
return item.addr;
},
typeaheadjs: {
name: 'contacts',
displayKey: 'name',
templates: {
suggestion: suggestionTemplate
},
source: acl.ttAdapter()
}
});
// Import existing ACL into the tags input fields.
$group_allow_input.val().split(',').forEach(function (val) {
$acl_allow_input.tagsinput('add', acl_groups.get(val)[0]);
});
$contact_allow_input.val().split(',').forEach(function (val) {
$acl_allow_input.tagsinput('add', acl_contacts.get(val)[0]);
});
$group_deny_input.val().split(',').forEach(function (val) {
$acl_deny_input.tagsinput('add', acl_groups.get(val)[0]);
});
$contact_deny_input.val().split(',').forEach(function (val) {
$acl_deny_input.tagsinput('add', acl_contacts.get(val)[0]);
});
// Anti-duplicate callback + acl fields value generation
$acl_allow_input.on('itemAdded', function (event) {
// Removes duplicate in the opposite acl box
$acl_deny_input.tagsinput('remove', event.item);
// Update the real acl field
$group_allow_input.val('');
$contact_allow_input.val('');
[].forEach.call($acl_allow_input.tagsinput('items'), function (item) {
if (item.type === 'group') {
$group_allow_input.val($group_allow_input.val() + ',' + item.id);
} else {
$contact_allow_input.val($contact_allow_input.val() + ',' + item.id);
}
});
});
$acl_deny_input.on('itemAdded', function (event) {
// Removes duplicate in the opposite acl box
$acl_allow_input.tagsinput('remove', event.item);
// Update the real acl field
$group_deny_input.val('');
$contact_deny_input.val('');
[].forEach.call($acl_deny_input.tagsinput('items'), function (item) {
if (item.type === 'group') {
$group_deny_input.val($group_allow_input.val() + ',' + item.id);
} else {
$contact_deny_input.val($contact_allow_input.val() + ',' + item.id);
}
});
});
});
</script>

View file

@ -1,72 +0,0 @@
/*
* friendica-tagsinput v0.8.0
*
*/
.friendica-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
height: auto;
}
.friendica-tagsinput.input-lg {
line-height: 27px;
}
.friendica-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
}
.friendica-tagsinput.form-control input::-moz-placeholder {
color: #777;
opacity: 1;
}
.friendica-tagsinput.form-control input:-ms-input-placeholder {
color: #777;
}
.friendica-tagsinput.form-control input::-webkit-input-placeholder {
color: #777;
}
.friendica-tagsinput input:focus {
border: none;
box-shadow: none;
}
.friendica-tagsinput .tag {
margin: 0 2px 2px 0;
color: white;
font-weight: normal;
}
.friendica-tagsinput .tag img {
width: auto;
height: 1.5em;
vertical-align: text-top;
margin-right: 8px;
}
.friendica-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.friendica-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
font-weight: bold;
}
.friendica-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.friendica-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

View file

@ -49,24 +49,6 @@ $(document).ready(function() {
$("#event-preview").empty();
e.preventDefault();
});
// Construct a new ACL. We need this everytime the 'event-edit-form' is loaded
// without page reloading (e.g. closing an old modal and open a new modal).
// Otherwise we wouldn't get the ACL data.
/// @todo: Try to implement some kind of ACL reloading in acl.js.
var eventPerms = document.getElementById('event-edit-form');
acl = new ACL(
baseurl + '/search/acl',
[
JSON.parse(eventPerms.dataset.allow_cid),
JSON.parse(eventPerms.dataset.allow_gid),
JSON.parse(eventPerms.dataset.deny_cid),
JSON.parse(eventPerms.dataset.deny_gid)
]
);
acl.get(0, 100);
});
// Load the html of the actual event and incect the output to the

View file

@ -344,11 +344,11 @@ function toggleJotNav (elm) {
// Minimize all tab content wrapper and activate only the selected
// tab panel.
$('#jot-modal [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
$('#jot-modal #' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
$('#profile-jot-form > [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
$('#' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
// Set the aria-selected states
$("#jot-modal .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
$("#jot-modal .modal-header .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
elm.setAttribute("aria-selected", "true");
// For some some tab panels we need to execute other js functions.

View file

@ -1,64 +0,0 @@
<div id="acl-wrapper">
<div class="form-group form-group-search">
<button id="acl-showall" class="btn btn-block btn-default"><i class="fa fa-globe"></i> {{$showall}}</button>
</div>
<div class="form-group form-group-search">
<input type="text" id="acl-search" class="form-control form-search" autocomplete="off">
</div>
<div id="acl-list">
<div id="acl-list-content"></div>
</div>
<span id="acl-fields"></span>
</div>
<div class="acl-list-item" rel="acl-template" style="display:none">
<img data-src="{0}" alt="{1}"><p>{1}</p>
<button class='acl-button-hide btn btn-sm btn-default'>{{$hide}}</button>
<button class='acl-button-show btn btn-sm btn-default'>{{$show}}</button>
</div>
{{if $networks}}
<hr style="clear:both"/>
<div class="form-group">
<label for="profile-jot-email" id="profile-jot-email-label">{{$emailcc}}</label>
<input type="text" name="emailcc" id="profile-jot-email" class="form-control" title="{{$emtitle}}" />
</div>
<div id="profile-jot-email-end"></div>
{{if $jotnets_fields}}
{{if $jotnets_fields|count < 3}}
<div class="profile-jot-net">
{{else}}
<details class="profile-jot-net">
<summary>{{$jotnets_summary}}</summary>
{{/if}}
{{foreach $jotnets_fields as $jotnets_field}}
{{if $jotnets_field.type == 'checkbox'}}
{{include file="field_checkbox.tpl" field=$jotnets_field.field}}
{{elseif $jotnets_field.type == 'select'}}
{{include file="field_select.tpl" field=$jotnets_field.field}}
{{/if}}
{{/foreach}}
{{if $jotnets_fields|count >= 3}}
</details>
{{else}}
</div>
{{/if}}
{{/if}}
{{/if}}
<script type="text/javascript">
$(document).ready(function() {
if(typeof acl=="undefined"){
acl = new ACL(
baseurl + '/search/acl',
[ {{$allowcid nofilter}},{{$allowgid nofilter}},{{$denycid nofilter}},{{$denygid nofilter}} ],
{{$features.aclautomention}},
{{if $APP->is_mobile}}true{{else}}false{{/if}}
);
}
});
</script>

View file

@ -30,7 +30,7 @@
</ul>
<div id="event-edit-form-wrapper">
<form id="event-edit-form" action="{{$post}}" method="post" data-allow_cid="{{$allow_cid}}" data-allow_gid="{{$allow_gid}}" data-deny_cid="{{$deny_cid}}" data-deny_gid="{{$deny_gid}}">
<form id="event-edit-form" action="{{$post}}" method="post">
<input type="hidden" name="event_id" value="{{$eid}}" />
<input type="hidden" name="cid" value="{{$cid}}" />

View file

@ -70,9 +70,6 @@
<div style="display: none;">
<div id="profile-jot-acl-wrapper" style="width:auto;height:auto;overflow:auto;">
{{$acl nofilter}}
<hr style="clear:both"/>
<div id="profile-jot-email-label">{{$emailcc}}</div><input type="text" name="emailcc" id="profile-jot-email" title="{{$emtitle}}" />
<div id="profile-jot-email-end"></div>
{{$jotnets nofilter}}
</div>
</div>