makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 06:08:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3661 from marc1706/ticket/6466

Browse source 
[ticket/6466] Use jQuery and custom dropdown for permission roles tooltips
This commit is contained in:
Tristan Darricau 2015-06-17 10:07:12 +02:00
commit ceed27fe27
5 changed files with 215 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
phpBB/adm/style/acp_permissions.html
View file

@ -327,14 +327,9 @@
<br class="responsive-hide" /><br class="responsive-hide" /> <br class="responsive-hide" /><br class="responsive-hide" />
<!-- include tooltip file --> <!-- include tooltip file -->
<script type="text/javascript" src="style/tooltip.js"></script> <!-- INCLUDEJS tooltip.js -->
<script type="text/javascript">
// <![CDATA[
window.onload = function(){enable_tooltips_select('set-permissions', '{LA_ROLE_DESCRIPTION}', 'role')};
// ]]>
</script>
<form id="set-permissions" method="post" action="{U_ACTION}"> <form id="set-permissions" method="post" action="{U_ACTION}" data-role-description="{L_ROLE_DESCRIPTION}">
{S_HIDDEN_FIELDS} {S_HIDDEN_FIELDS}

34
phpBB/adm/style/admin.css
View file

@ -1858,6 +1858,7 @@ li.pagination ul {
color: #000; color: #000;
text-align: center; text-align: center;
border: 1px solid #AAA; border: 1px solid #AAA;
opacity: .95;
} }
.tooltip span.top { .tooltip span.top {
@ -2435,6 +2436,39 @@ fieldset.permissions .padding {
display: none !important; display: none !important;
} }
.roles-options > .dropdown {
left: auto;
top: 3em;
width: 250px;
}
.roles-options {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
width: 250px;
}
.roles-options > span {
border: 1px solid #DEDEDE;
border-radius: 3px;
padding: 4px;
width: 250px;
display: block;
background: url('../images/arrow_down.gif') no-repeat 245px .7em;
}
.roles-options li {
list-style: none;
}
.roles-highlight {
background-color: #1e90ff;
color: #fff;
}
/* Classes for additional tasks /* Classes for additional tasks
---------------------------------------- */ ---------------------------------------- */

20
phpBB/adm/style/permission_mask.html
View file

@ -39,11 +39,23 @@
</div> </div>
<dl class="permissions-simple"> <dl class="permissions-simple">
<dt style="width: 20%"><label for="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}">{L_ROLE}{L_COLON}</label></dt> <dt style="width: 20%"><label for="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}">{L_ROLE}{L_COLON}</label></dt>
<!-- IF p_mask.f_mask.S_ROLE_OPTIONS --> {% if role_options %}
<dd style="margin-{S_CONTENT_FLOW_BEGIN}{L_COLON} 20%"><select id="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" name="role[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]" onchange="set_role_settings(this.options[selectedIndex].value, 'advanced{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}'); init_colours('{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}')">{p_mask.f_mask.S_ROLE_OPTIONS}</select></dd> <dd style="margin-{S_CONTENT_FLOW_BEGIN}{L_COLON} 20%">
<!-- ELSE --> <div class="dropdown-container dropdown-button-control roles-options" data-alt-text="{LA_ROLE_DESCRIPTION}">
<span title="Roles" class="button icon-button tools-icon dropdown-trigger dropdown-select">{L_NO_ROLE_ASSIGNED}</span>
<div class="dropdown hidden">
<ul class="dropdown-contents" id="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" >
{% for role in loops.role_options %}
<li data-id="{{ role.ID }}" data-target-id="advanced{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" data-title="{{ role.TITLE }}"{% if role.SELECTED == true %} data-selected="{{ role.SELECTED }}"{% endif %}>{{ role.ROLE_NAME }}</li>
{% endfor %}
</ul>
</div>
<input type="hidden" name="role[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]"{% if S_ROLE_ID %}value="{{ S_ROLE_ID }}"{% endif %} />
</div>
</dd>
{% else %}
<dd>{L_NO_ROLE_AVAILABLE}</dd> <dd>{L_NO_ROLE_AVAILABLE}</dd>
<!-- ENDIF --> {% endif %}
</dl> </dl>
<!-- ENDIF --> <!-- ENDIF -->

306
phpBB/adm/style/tooltip.js
View file

@ -10,206 +10,196 @@ phpBB Development Team:
- further adjustements - further adjustements
*/ */
var head_text, tooltip_mode; (function($) { // Avoid conflicts with other libraries
'use strict';
var tooltips = [];
/** /**
* Enable tooltip replacements for links * Enable tooltip replacements for selects
* @param {string} id ID tag of select
* @param {string} headline Text that should appear on top of tooltip
* @param {string} [subId] Sub ID that should only be using tooltips (optional)
*/ */
function enable_tooltips_link(id, headline, sub_id) { phpbb.enableTooltipsSelect = function (id, headline, subId) {
var links, i, hold; var $links, hold;
head_text = headline; hold = $('<span />', {
id: '_tooltip_container',
if (!document.getElementById || !document.getElementsByTagName) { css: {
return; position: 'absolute'
} }
});
hold = document.createElement('span'); $('body').append(hold);
hold.id = '_tooltip_container';
hold.setAttribute('id', '_tooltip_container');
hold.style.position = 'absolute';
document.getElementsByTagName('body')[0].appendChild(hold); if (!id) {
$links = $('.roles-options li');
if (id === null) {
links = document.getElementsByTagName('a');
} else { } else {
links = document.getElementById(id).getElementsByTagName('a'); $links = $('.roles-options li', '#' + id);
} }
for (i = 0; i < links.length; i++) { $links.each(function () {
if (sub_id) { var $this = $(this);
if (links[i].id.substr(0, sub_id.length) === sub_id) {
prepare(links[i]); if (subId) {
if ($this.parent().attr('id').substr(0, subId.length) === subId) {
phpbb.prepareTooltips($this, headline);
} }
} else { } else {
prepare(links[i]); phpbb.prepareTooltips($this, headline);
} }
} });
};
tooltip_mode = 'link';
}
/** /**
* Enable tooltip replacements for selects * Prepare elements to replace
*
* @param {jQuery} $element Element to prepare for tooltips
* @param {string} headText Text heading to display
*/ */
function enable_tooltips_select(id, headline, sub_id) { phpbb.prepareTooltips = function ($element, headText) {
var links, i, hold; var $tooltip, text, $desc, $title;
head_text = headline; text = $element.attr('data-title');
if (!document.getElementById || !document.getElementsByTagName) {
return;
}
hold = document.createElement('span');
hold.id = '_tooltip_container';
hold.setAttribute('id', '_tooltip_container');
hold.style.position = 'absolute';
document.getElementsByTagName('body')[0].appendChild(hold);
if (id === null) {
links = document.getElementsByTagName('option');
} else {
links = document.getElementById(id).getElementsByTagName('option');
}
for (i = 0; i < links.length; i++) {
if (sub_id) {
if (links[i].parentNode.id.substr(0, sub_id.length) === sub_id) {
prepare(links[i]);
}
} else {
prepare(links[i]);
}
}
tooltip_mode = 'select';
}
/**
* Prepare elements to replace
*/
function prepare(element) {
var tooltip, text, desc, title;
text = element.getAttribute('title');
if (text === null || text.length === 0) { if (text === null || text.length === 0) {
return; return;
} }
element.removeAttribute('title'); $title = $('<span />', {
tooltip = create_element('span', 'tooltip'); class: 'top',
css: {
title = create_element('span', 'top'); display: 'block'
title.appendChild(document.createTextNode(head_text));
tooltip.appendChild(title);
desc = create_element('span', 'bottom');
desc.innerHTML = text;
tooltip.appendChild(desc);
set_opacity(tooltip);
element.tooltip = tooltip;
element.onmouseover = show_tooltip;
element.onmouseout = hide_tooltip;
if (tooltip_mode === 'link') {
element.onmousemove = locate;
} }
} })
.append(document.createTextNode(headText));
$desc = $('<span />', {
class: 'bottom',
html: text,
css: {
display: 'block'
}
});
$tooltip = $('<span />', {
class: 'tooltip',
css: {
display: 'block'
}
})
.append($title)
.append($desc);
tooltips[$element.attr('data-id')] = $tooltip;
$element.on('mouseover', phpbb.showTooltip);
$element.on('mouseout', phpbb.hideTooltip);
};
/** /**
* Show tooltip * Show tooltip
*
* @param {object} $element Element passed by .on()
*/ */
function show_tooltip(e) { phpbb.showTooltip = function ($element) {
document.getElementById('_tooltip_container').appendChild(this.tooltip); var $this = $($element.target);
locate(this); $('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
} phpbb.positionTooltip($this);
};
/** /**
* Hide tooltip * Hide tooltip
*/ */
function hide_tooltip(e) { phpbb.hideTooltip = function () {
var d = document.getElementById('_tooltip_container'); var d = document.getElementById('_tooltip_container');
if (d.childNodes.length > 0) { if (d.childNodes.length > 0) {
d.removeChild(d.firstChild); d.removeChild(d.firstChild);
} }
} };
/** /**
* Set opacity on tooltip element * Correct positioning of tooltip container
*
* @param {jQuery} $element Tooltip element that should be positioned
*/ */
function set_opacity(element) { phpbb.positionTooltip = function ($element) {
element.style.filter = 'alpha(opacity:95)'; var offset;
element.style.KHTMLOpacity = '0.95';
element.style.MozOpacity = '0.95'; $element = $element.parent();
element.style.opacity = '0.95'; offset = $element.offset();
}
$('#_tooltip_container').css({
top: offset.top + 30,
left: offset.left - 205
});
};
/** /**
* Create new element * Prepare roles drop down select
*/ */
function create_element(tag, c) { phpbb.prepareRolesDropdown = function () {
var x = document.createElement(tag); var $options = $('.roles-options li');
x.className = c; var $rolesOptions = $options.closest('.roles-options');
x.style.display = 'block'; var $span = $rolesOptions.children('span');
return x;
}
/** // Prepare highlighting of select options and settings update
* Correct positioning of tooltip container $options.each(function () {
*/ var $this = $(this);
function locate(e) {
var posx = 0;
var posy = 0;
e = e.parentNode; // Correctly show selected option
if (typeof $this.attr('data-selected') !== 'undefined') {
if (e.offsetParent) { $rolesOptions.closest('.roles-options')
for (posx = 0, posy = 0; e.offsetParent; e = e.offsetParent) { .children('span')
posx += e.offsetLeft; .text($this.text())
posy += e.offsetTop; .attr('data-default', $this.text())
} .attr('data-default-val', $this.attr('data-id'));
} else {
posx = e.offsetLeft;
posy = e.offsetTop;
} }
if (tooltip_mode === 'link') { $this.on('mouseover', function () {
document.getElementById('_tooltip_container').style.top=(posy+20) + 'px'; var $this = $(this);
document.getElementById('_tooltip_container').style.left=(posx-20) + 'px'; $options.removeClass('roles-highlight');
} else { $this.addClass('roles-highlight');
document.getElementById('_tooltip_container').style.top=(posy+30) + 'px'; }).on('click', function () {
document.getElementById('_tooltip_container').style.left=(posx-205) + 'px'; var $this = $(this);
// Update settings
set_role_settings($this.attr('data-id'), $this.attr('data-target-id'));
init_colours($this.attr('data-target-id').replace('advanced', ''));
// Set selected setting
$rolesOptions.children('span')
.text($this.text());
$rolesOptions.children('input[type=hidden]')
.val($this.attr('data-id'));
// Trigger hiding of selection options
$('body').trigger('click');
});
});
// Save default text of drop down if there is no default set yet
if (typeof $span.attr('data-default') === 'undefined') {
$span.attr('data-default', $span.text());
} }
/* // Prepare resetting drop down on form reset
if (e == null) $options.closest('form').on('reset', function () {
{ $span.text($span.attr('data-default'));
e = window.event; $rolesOptions.children('input[type=hidden]')
} .val($span.attr('data-id'));
});
if (e.pageX || e.pageY) };
{
posx = e.pageX; // Run onload functions for RolesDropdown and tooltips
posy = e.pageY; $(function() {
} // Enable tooltips
else if (e.clientX || e.clientY) phpbb.enableTooltipsSelect('set-permissions', $('#set-permissions').attr('data-role-description'), 'role');
{
if (document.documentElement.scrollTop) // Prepare dropdown
{ phpbb.prepareRolesDropdown();
posx = e.clientX+document.documentElement.scrollLeft; });
posy = e.clientY+document.documentElement.scrollTop;
} })(jQuery); // Avoid conflicts with other libraries
else
{
posx = e.clientX+document.body.scrollLeft;
posy = e.clientY+document.body.scrollTop;
}
}
*/
}

34
phpBB/includes/acp/auth.php
View file

@ -470,7 +470,8 @@ class auth_admin extends \phpbb\auth\auth
// Build role dropdown options // Build role dropdown options
$current_role_id = (isset($cur_roles[$ug_id][$forum_id])) ? $cur_roles[$ug_id][$forum_id] : 0; $current_role_id = (isset($cur_roles[$ug_id][$forum_id])) ? $cur_roles[$ug_id][$forum_id] : 0;
$s_role_options = ''; // Output current role id to template
$template->assign_var('S_ROLE_ID', $current_role_id);
@reset($roles); @reset($roles);
while (list($role_id, $role_row) = each($roles)) while (list($role_id, $role_row) = each($roles))
@ -478,13 +479,12 @@ class auth_admin extends \phpbb\auth\auth
$role_description = (!empty($user->lang[$role_row['role_description']])) ? $user->lang[$role_row['role_description']] : nl2br($role_row['role_description']); $role_description = (!empty($user->lang[$role_row['role_description']])) ? $user->lang[$role_row['role_description']] : nl2br($role_row['role_description']);
$role_name = (!empty($user->lang[$role_row['role_name']])) ? $user->lang[$role_row['role_name']] : $role_row['role_name']; $role_name = (!empty($user->lang[$role_row['role_name']])) ? $user->lang[$role_row['role_name']] : $role_row['role_name'];
$title = ($role_description) ? ' title="' . $role_description . '"' : ''; $template->assign_block_vars('role_options', array(
$s_role_options .= '<option value="' . $role_id . '"' . (($role_id == $current_role_id) ? ' selected="selected"' : '') . $title . '>' . $role_name . '</option>'; 'ID' => $role_id,
} 'ROLE_NAME' => $role_name,
'TITLE' => $role_description,
if ($s_role_options) 'SELECTED' => $role_id == $current_role_id,
{ ));
$s_role_options = '<option value="0"' . ((!$current_role_id) ? ' selected="selected"' : '') . ' title="' . htmlspecialchars($user->lang['NO_ROLE_ASSIGNED_EXPLAIN']) . '">' . $user->lang['NO_ROLE_ASSIGNED'] . '</option>' . $s_role_options;
} }
if (!$current_role_id && $mode != 'view') if (!$current_role_id && $mode != 'view')
@ -507,7 +507,6 @@ class auth_admin extends \phpbb\auth\auth
$template->assign_block_vars($tpl_pmask . '.' . $tpl_fmask, array( $template->assign_block_vars($tpl_pmask . '.' . $tpl_fmask, array(
'NAME' => $ug_names_ary[$ug_id], 'NAME' => $ug_names_ary[$ug_id],
'S_ROLE_OPTIONS' => $s_role_options,
'UG_ID' => $ug_id, 'UG_ID' => $ug_id,
'S_CUSTOM' => $s_custom_permissions, 'S_CUSTOM' => $s_custom_permissions,
'FORUM_ID' => $forum_id) 'FORUM_ID' => $forum_id)
@ -556,7 +555,8 @@ class auth_admin extends \phpbb\auth\auth
// Build role dropdown options // Build role dropdown options
$current_role_id = (isset($cur_roles[$ug_id][$forum_id])) ? $cur_roles[$ug_id][$forum_id] : 0; $current_role_id = (isset($cur_roles[$ug_id][$forum_id])) ? $cur_roles[$ug_id][$forum_id] : 0;
$s_role_options = ''; // Output current role id to template
$template->assign_var('S_ROLE_ID', $current_role_id);
@reset($roles); @reset($roles);
while (list($role_id, $role_row) = each($roles)) while (list($role_id, $role_row) = each($roles))
@ -564,13 +564,12 @@ class auth_admin extends \phpbb\auth\auth
$role_description = (!empty($user->lang[$role_row['role_description']])) ? $user->lang[$role_row['role_description']] : nl2br($role_row['role_description']); $role_description = (!empty($user->lang[$role_row['role_description']])) ? $user->lang[$role_row['role_description']] : nl2br($role_row['role_description']);
$role_name = (!empty($user->lang[$role_row['role_name']])) ? $user->lang[$role_row['role_name']] : $role_row['role_name']; $role_name = (!empty($user->lang[$role_row['role_name']])) ? $user->lang[$role_row['role_name']] : $role_row['role_name'];
$title = ($role_description) ? ' title="' . $role_description . '"' : ''; $template->assign_block_vars('role_options', array(
$s_role_options .= '<option value="' . $role_id . '"' . (($role_id == $current_role_id) ? ' selected="selected"' : '') . $title . '>' . $role_name . '</option>'; 'ID' => $role_id,
} 'ROLE_NAME' => $role_name,
'TITLE' => $role_description,
if ($s_role_options) 'SELECTED' => $role_id == $current_role_id,
{ ));
$s_role_options = '<option value="0"' . ((!$current_role_id) ? ' selected="selected"' : '') . ' title="' . htmlspecialchars($user->lang['NO_ROLE_ASSIGNED_EXPLAIN']) . '">' . $user->lang['NO_ROLE_ASSIGNED'] . '</option>' . $s_role_options;
} }
if (!$current_role_id && $mode != 'view') if (!$current_role_id && $mode != 'view')
@ -594,7 +593,6 @@ class auth_admin extends \phpbb\auth\auth
$template->assign_block_vars($tpl_pmask . '.' . $tpl_fmask, array( $template->assign_block_vars($tpl_pmask . '.' . $tpl_fmask, array(
'NAME' => ($forum_id == 0) ? $forum_names_ary[0] : $forum_names_ary[$forum_id]['forum_name'], 'NAME' => ($forum_id == 0) ? $forum_names_ary[0] : $forum_names_ary[$forum_id]['forum_name'],
'PADDING' => ($forum_id == 0) ? '' : $forum_names_ary[$forum_id]['padding'], 'PADDING' => ($forum_id == 0) ? '' : $forum_names_ary[$forum_id]['padding'],
'S_ROLE_OPTIONS' => $s_role_options,
'S_CUSTOM' => $s_custom_permissions, 'S_CUSTOM' => $s_custom_permissions,
'UG_ID' => $ug_id, 'UG_ID' => $ug_id,
'FORUM_ID' => $forum_id) 'FORUM_ID' => $forum_id)