aboutsummaryrefslogtreecommitdiffstats
path: root/phpBB/adm/style
diff options
context:
space:
mode:
authorMarc Alexander <admin@m-a-styles.de>2015-05-29 16:05:16 +0200
committerMarc Alexander <admin@m-a-styles.de>2015-05-29 16:05:16 +0200
commit467c794b9779412cf2cc29deb42c232168989486 (patch)
tree39e47da377997045dcd99f0a29c25df0b0310227 /phpBB/adm/style
parenta3d46575c7f520dc9731ed4e9221c636c5c7c31e (diff)
downloadforums-467c794b9779412cf2cc29deb42c232168989486.tar
forums-467c794b9779412cf2cc29deb42c232168989486.tar.gz
forums-467c794b9779412cf2cc29deb42c232168989486.tar.bz2
forums-467c794b9779412cf2cc29deb42c232168989486.tar.xz
forums-467c794b9779412cf2cc29deb42c232168989486.zip
[ticket/6466] Use jQuery and custom dropdown for permission roles tooltips
PHPBB3-6466
Diffstat (limited to 'phpBB/adm/style')
-rw-r--r--phpBB/adm/style/acp_permissions.html11
-rw-r--r--phpBB/adm/style/admin.css33
-rw-r--r--phpBB/adm/style/permission_mask.html13
-rw-r--r--phpBB/adm/style/tooltip.js127
4 files changed, 113 insertions, 71 deletions
diff --git a/phpBB/adm/style/acp_permissions.html b/phpBB/adm/style/acp_permissions.html
index 6dc9dca2e7..004027df41 100644
--- a/phpBB/adm/style/acp_permissions.html
+++ b/phpBB/adm/style/acp_permissions.html
@@ -327,14 +327,9 @@
<br class="responsive-hide" /><br class="responsive-hide" />
<!-- include tooltip file -->
- <script type="text/javascript" src="style/tooltip.js"></script>
- <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}">
+ <!-- INCLUDEJS tooltip.js -->
+
+ <form id="set-permissions" method="post" action="{U_ACTION}" data-role-description="{L_ROLE_DESCRIPTION}">
{S_HIDDEN_FIELDS}
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css
index b03cb0ba24..8ae39b7754 100644
--- a/phpBB/adm/style/admin.css
+++ b/phpBB/adm/style/admin.css
@@ -2435,6 +2435,39 @@ fieldset.permissions .padding {
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
---------------------------------------- */
diff --git a/phpBB/adm/style/permission_mask.html b/phpBB/adm/style/permission_mask.html
index 7b5c071693..5aeafba476 100644
--- a/phpBB/adm/style/permission_mask.html
+++ b/phpBB/adm/style/permission_mask.html
@@ -40,7 +40,18 @@
<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>
<!-- IF p_mask.f_mask.S_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%">
+ <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 }}">{{ role.ROLE_NAME }}</li>
+ {% endfor %}
+ </ul>
+ </div>
+ </div>
+ </dd>
<!-- ELSE -->
<dd>{L_NO_ROLE_AVAILABLE}</dd>
<!-- ENDIF -->
diff --git a/phpBB/adm/style/tooltip.js b/phpBB/adm/style/tooltip.js
index 3a89008706..ec170ef6b2 100644
--- a/phpBB/adm/style/tooltip.js
+++ b/phpBB/adm/style/tooltip.js
@@ -10,7 +10,12 @@ phpBB Development Team:
- further adjustements
*/
-var head_text, tooltip_mode;
+(function($) { // Avoid conflicts with other libraries
+
+"use strict";
+
+var head_text, tooltip_mode, tooltips;
+tooltips = [];
/**
* Enable tooltip replacements for links
@@ -54,7 +59,7 @@ function enable_tooltips_link(id, headline, sub_id) {
* Enable tooltip replacements for selects
*/
function enable_tooltips_select(id, headline, sub_id) {
- var links, i, hold;
+ var $links, hold;
head_text = headline;
@@ -66,24 +71,25 @@ function enable_tooltips_select(id, headline, sub_id) {
hold.id = '_tooltip_container';
hold.setAttribute('id', '_tooltip_container');
hold.style.position = 'absolute';
-
- document.getElementsByTagName('body')[0].appendChild(hold);
+ $('body').append(hold);
if (id === null) {
- links = document.getElementsByTagName('option');
+ $links = $('.roles-options li');
} else {
- links = document.getElementById(id).getElementsByTagName('option');
+ $links = $('#' + id + ' .roles-options li');
}
- for (i = 0; i < links.length; i++) {
+ $links.each(function () {
+ var $this = $(this);
+
if (sub_id) {
- if (links[i].parentNode.id.substr(0, sub_id.length) === sub_id) {
- prepare(links[i]);
+ if ($this.parent().attr('id').substr(0, sub_id.length) === sub_id) {
+ prepare($this);
}
} else {
- prepare(links[i]);
+ prepare($this);
}
- }
+ });
tooltip_mode = 'select';
}
@@ -91,16 +97,15 @@ function enable_tooltips_select(id, headline, sub_id) {
/**
* Prepare elements to replace
*/
-function prepare(element) {
+function prepare($element) {
var tooltip, text, desc, title;
- text = element.getAttribute('title');
+ text = $element.attr('data-title');;
if (text === null || text.length === 0) {
return;
}
- element.removeAttribute('title');
tooltip = create_element('span', 'tooltip');
title = create_element('span', 'top');
@@ -113,12 +118,12 @@ function prepare(element) {
set_opacity(tooltip);
- element.tooltip = tooltip;
- element.onmouseover = show_tooltip;
- element.onmouseout = hide_tooltip;
+ tooltips[$element.attr('data-id')] = tooltip;
+ $element.on('mouseover', show_tooltip);
+ $element.on('mouseout', hide_tooltip);
if (tooltip_mode === 'link') {
- element.onmousemove = locate;
+ $element.onmousemove = locate;
}
}
@@ -126,8 +131,9 @@ function prepare(element) {
* Show tooltip
*/
function show_tooltip(e) {
- document.getElementById('_tooltip_container').appendChild(this.tooltip);
- locate(this);
+ var $this = $(e.target);
+ $('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
+ locate($this);
}
/**
@@ -164,52 +170,49 @@ function create_element(tag, c) {
* Correct positioning of tooltip container
*/
function locate(e) {
- var posx = 0;
- var posy = 0;
-
- e = e.parentNode;
+ var offset;
- if (e.offsetParent) {
- for (posx = 0, posy = 0; e.offsetParent; e = e.offsetParent) {
- posx += e.offsetLeft;
- posy += e.offsetTop;
- }
- } else {
- posx = e.offsetLeft;
- posy = e.offsetTop;
- }
+ e = e.parent();
+ offset = e.offset();
if (tooltip_mode === 'link') {
- document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
- document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
+ $('#_tooltip_container').css({
+ top: offset.top + 20,
+ left: offset.left - 20
+ });
} else {
- document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
- document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
+ $('#_tooltip_container').css({
+ top: offset.top + 30,
+ left: offset.left - 205
+ });
}
+}
-/*
- if (e == null)
- {
- e = window.event;
- }
+$(function() {
+ var $options;
- if (e.pageX || e.pageY)
- {
- posx = e.pageX;
- posy = e.pageY;
- }
- else if (e.clientX || e.clientY)
- {
- if (document.documentElement.scrollTop)
- {
- posx = e.clientX+document.documentElement.scrollLeft;
- posy = e.clientY+document.documentElement.scrollTop;
- }
- else
- {
- posx = e.clientX+document.body.scrollLeft;
- posy = e.clientY+document.body.scrollTop;
- }
- }
-*/
-}
+ // Enable tooltips
+ enable_tooltips_select('set-permissions', $('#set-permissions').attr('data-role-description'), 'role');
+
+ $options = $('.roles-options li');
+
+ // Prepare highlighting of select options and settings update
+ $options.each(function () {
+ $(this).on('mouseover', function (e) {
+ var $this = $(this);
+ $options.removeClass('roles-highlight');
+ $this.addClass('roles-highlight');
+ }).on('click', function (e) {
+ 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
+ $this.closest('.roles-options').children('span').text($this.text());
+ });
+ });
+});
+
+})(jQuery); // Avoid conflicts with other libraries
generated by cgit v1.2.1 (git 2.21.0) at 2026-01-06 13:15:31 +0000