mirror of
https://github.com/phpbb/phpbb.git
synced 2025-05-05 23:25:30 +02:00
Merge pull request #1869 from prototech/ticket/10810
[ticket/10810] Move color swatches from popup windows to inline blocks.
This commit is contained in:
commit
6f419b0049
@ -92,7 +92,12 @@
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><label for="group_colour">{L_GROUP_COLOR}{L_COLON}</label><br /><span>{L_GROUP_COLOR_EXPLAIN}</span></dt>
|
||||
<dd><input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" /><!-- IF GROUP_COLOUR --> <span style="background-color: #{GROUP_COLOUR}"> </span><!-- ENDIF --> <span>[ <a href="{U_SWATCH}" onclick="popup(this.href, 636, 150, '_swatch'); return false">{L_COLOUR_SWATCH}</a> ]</span></dd>
|
||||
<dd>
|
||||
<input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" />
|
||||
<!-- IF GROUP_COLOUR --> <span style="background-color: #{GROUP_COLOUR}"> </span><!-- ENDIF --> <span>
|
||||
[ <a href="#" id="color_palette_toggle">{L_COLOUR_SWATCH}</a> ]</span>
|
||||
<div id="color_palette_placeholder" style="display: none;" data-orientation="h" data-height="12" data-width="15" data-target="#group_colour"></div>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><label for="group_rank">{L_GROUP_RANK}{L_COLON}</label></dt>
|
||||
|
@ -86,7 +86,7 @@
|
||||
</div>
|
||||
|
||||
<dl>
|
||||
<dt style="width: 90px;" id="color_palette_placeholder" data-orientation="v" data-height="12" data-width="15">
|
||||
<dt style="width: 90px;" id="color_palette_placeholder" data-orientation="v" data-height="12" data-width="15" data-bbcode="true">
|
||||
</dt>
|
||||
<dd style="margin-{S_CONTENT_FLOW_BEGIN}: 90px;"><textarea name="signature" rows="10" cols="60" style="width: 95%;" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" data-bbcode="true">{SIGNATURE}</textarea></dd>
|
||||
<dd style="margin-{S_CONTENT_FLOW_BEGIN}: 90px; margin-top: 5px;">
|
||||
|
@ -1,82 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{L_COLOUR_SWATCH}</title>
|
||||
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
body {
|
||||
background-color: #404040;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
border: solid 1px #333;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.over {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.out {
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
/* ]]> */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
var r = 0, g = 0, b = 0;
|
||||
|
||||
var numberList = new Array(6);
|
||||
numberList[0] = '00';
|
||||
numberList[1] = '33';
|
||||
numberList[2] = '66';
|
||||
numberList[3] = '99';
|
||||
numberList[4] = 'CC';
|
||||
numberList[5] = 'FF';
|
||||
|
||||
document.writeln('<table>');
|
||||
|
||||
for (r = 0; r < 6; r++)
|
||||
{
|
||||
document.writeln('<tr>');
|
||||
|
||||
for (g = 0; g < 6; g++)
|
||||
{
|
||||
for (b = 0; b < 6; b++)
|
||||
{
|
||||
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
|
||||
document.write('<td style="background-color: #' + color + ';" onmouseover="this.className=\'over\'" onmouseout="this.className=\'out\'">');
|
||||
document.write('<a href="#" onclick="cell(\'' + color + '\'); return false;"><img src="{T_IMAGES_PATH}spacer.gif" width="13" height="10" alt="#' + color + '" title="#' + color + '" \/><\/a>');
|
||||
document.writeln('<\/td>');
|
||||
}
|
||||
}
|
||||
document.writeln('<\/tr>');
|
||||
}
|
||||
document.writeln('<\/table>');
|
||||
|
||||
function cell(color)
|
||||
{
|
||||
opener.document.forms["{OPENER}"].{NAME}.value = color;
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,50 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
*
|
||||
* @package phpBB3
|
||||
* @copyright (c) 2005 phpBB Group
|
||||
* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
define('IN_PHPBB', true);
|
||||
define('ADMIN_START', true);
|
||||
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './../';
|
||||
$phpEx = substr(strrchr(__FILE__, '.'), 1);
|
||||
include($phpbb_root_path . 'common.' . $phpEx);
|
||||
|
||||
// Start session management
|
||||
$user->session_begin(false);
|
||||
$auth->acl($user->data);
|
||||
$user->setup();
|
||||
|
||||
// Set custom template for admin area
|
||||
$template->set_custom_style('adm', $phpbb_admin_path . 'style');
|
||||
|
||||
$template->set_filenames(array(
|
||||
'body' => 'colour_swatch.html')
|
||||
);
|
||||
|
||||
$form = request_var('form', '');
|
||||
$name = request_var('name', '');
|
||||
|
||||
// We validate form and name here, only id/class allowed
|
||||
$form = (!preg_match('/^[a-z0-9_-]+$/i', $form)) ? '' : $form;
|
||||
$name = (!preg_match('/^[a-z0-9_-]+$/i', $name)) ? '' : $name;
|
||||
|
||||
$template->assign_vars(array(
|
||||
'OPENER' => $form,
|
||||
'NAME' => $name,
|
||||
'T_IMAGES_PATH' => "{$phpbb_root_path}images/",
|
||||
|
||||
'S_USER_LANG' => $user->lang['USER_LANG'],
|
||||
'S_CONTENT_DIRECTION' => $user->lang['DIRECTION'],
|
||||
'S_CONTENT_ENCODING' => 'UTF-8',
|
||||
));
|
||||
|
||||
$template->display('body');
|
||||
|
||||
garbage_collection();
|
@ -962,6 +962,93 @@ phpbb.registerDropdown = function(toggle, dropdown, options)
|
||||
toggle.click(phpbb.toggleDropdown);
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the HTML for a color palette table.
|
||||
*
|
||||
* @param string dir Palette direction - either v or h
|
||||
* @param int width Palette cell width.
|
||||
* @param int height Palette cell height.
|
||||
*/
|
||||
phpbb.colorPalette = function(dir, width, height) {
|
||||
var r = 0,
|
||||
g = 0,
|
||||
b = 0,
|
||||
numberList = new Array(6),
|
||||
color = '',
|
||||
html = '';
|
||||
|
||||
numberList[0] = '00';
|
||||
numberList[1] = '40';
|
||||
numberList[2] = '80';
|
||||
numberList[3] = 'BF';
|
||||
numberList[4] = 'FF';
|
||||
|
||||
html += '<table style="width: auto;">';
|
||||
|
||||
for (r = 0; r < 5; r++) {
|
||||
if (dir == 'h') {
|
||||
html += '<tr>';
|
||||
}
|
||||
|
||||
for (g = 0; g < 5; g++) {
|
||||
if (dir == 'v') {
|
||||
html += '<tr>';
|
||||
}
|
||||
|
||||
for (b = 0; b < 5; b++) {
|
||||
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
|
||||
html += '<td style="background-color: #' + color + '; width: ' + width + 'px; height: ' + height + 'px;">';
|
||||
html += '<a href="#" data-color="' + color + '" style="display: block; width: ' + width + 'px; height: ' + height + 'px; " alt="#' + color + '" title="#' + color + '"></a>';
|
||||
html += '</td>';
|
||||
}
|
||||
|
||||
if (dir == 'v') {
|
||||
html += '</tr>';
|
||||
}
|
||||
}
|
||||
|
||||
if (dir == 'h') {
|
||||
html += '</tr>';
|
||||
}
|
||||
}
|
||||
html += '</table>';
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a color palette.
|
||||
*
|
||||
* @param object el jQuery object for the palette container.
|
||||
*/
|
||||
phpbb.registerPalette = function(el) {
|
||||
var orientation = el.attr('data-orientation'),
|
||||
height = el.attr('data-height'),
|
||||
width = el.attr('data-width'),
|
||||
target = el.attr('data-target'),
|
||||
bbcode = el.attr('data-bbcode');
|
||||
|
||||
// Insert the palette HTML into the container.
|
||||
el.html(phpbb.colorPalette(orientation, width, height));
|
||||
|
||||
// Add toggle control.
|
||||
$('#color_palette_toggle').click(function(e) {
|
||||
el.toggle();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// Attach event handler when a palette cell is clicked.
|
||||
$(el).on('click', 'a', function(e) {
|
||||
var color = $(this).attr('data-color');
|
||||
|
||||
if (bbcode) {
|
||||
bbfontstyle('[color=#' + color + ']', '[/color]');
|
||||
} else {
|
||||
$(target).val(color);
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply code editor to all textarea elements with data-bbcode attribute
|
||||
*/
|
||||
@ -977,6 +1064,10 @@ $(document).ready(function() {
|
||||
$(phpbb.dropdownHandles).each(phpbb.toggleDropdown);
|
||||
}
|
||||
});
|
||||
|
||||
$('#color_palette_placeholder').each(function() {
|
||||
phpbb.registerPalette($(this));
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery); // Avoid conflicts with other libraries
|
||||
|
@ -294,67 +294,6 @@ function storeCaret(textEl) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Color pallette
|
||||
*/
|
||||
function colorPalette(dir, width, height) {
|
||||
var r = 0,
|
||||
g = 0,
|
||||
b = 0,
|
||||
numberList = new Array(6),
|
||||
color = '',
|
||||
html = '';
|
||||
|
||||
numberList[0] = '00';
|
||||
numberList[1] = '40';
|
||||
numberList[2] = '80';
|
||||
numberList[3] = 'BF';
|
||||
numberList[4] = 'FF';
|
||||
|
||||
html += '<table>';
|
||||
|
||||
for (r = 0; r < 5; r++) {
|
||||
if (dir == 'h') {
|
||||
html += '<tr>';
|
||||
}
|
||||
|
||||
for (g = 0; g < 5; g++) {
|
||||
if (dir == 'v') {
|
||||
html += '<tr>';
|
||||
}
|
||||
|
||||
for (b = 0; b < 5; b++) {
|
||||
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
|
||||
html += '<td style="background-color: #' + color + '; width: ' + width + 'px; height: ' + height + 'px;">';
|
||||
html += '<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;" style="display: block; width: ' + width + 'px; height: ' + height + 'px; " alt="#' + color + '" title="#' + color + '"></a>';
|
||||
html += '</td>';
|
||||
}
|
||||
|
||||
if (dir == 'v') {
|
||||
html += '</tr>';
|
||||
}
|
||||
}
|
||||
|
||||
if (dir == 'h') {
|
||||
html += '</tr>';
|
||||
}
|
||||
}
|
||||
html += '</table>';
|
||||
return html;
|
||||
}
|
||||
|
||||
(function($) {
|
||||
$(document).ready(function() {
|
||||
$('#color_palette_placeholder').each(function() {
|
||||
var orientation = $(this).attr('data-orientation'),
|
||||
height = $(this).attr('data-height'),
|
||||
width = $(this).attr('data-width');
|
||||
|
||||
$(this).html(colorPalette(orientation, width, height));
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
/**
|
||||
* Caret Position object
|
||||
*/
|
||||
|
@ -657,7 +657,6 @@ class acp_groups
|
||||
'GROUP_HIDDEN' => $type_hidden,
|
||||
|
||||
'U_BACK' => $u_back,
|
||||
'U_SWATCH' => append_sid("{$phpbb_admin_path}swatch.$phpEx", 'form=settings&name=group_colour'),
|
||||
'U_ACTION' => "{$this->u_action}&action=$action&g=$group_id",
|
||||
'L_AVATAR_EXPLAIN' => phpbb_avatar_explanation_string(),
|
||||
));
|
||||
|
@ -699,7 +699,6 @@ class ucp_groups
|
||||
'GROUP_CLOSED' => $type_closed,
|
||||
'GROUP_HIDDEN' => $type_hidden,
|
||||
|
||||
'U_SWATCH' => append_sid("{$phpbb_admin_path}swatch.$phpEx", 'form=ucp&name=group_colour'),
|
||||
'S_UCP_ACTION' => $this->u_action . "&action=$action&g=$group_id",
|
||||
'L_AVATAR_EXPLAIN' => phpbb_avatar_explanation_string(),
|
||||
));
|
||||
|
@ -55,7 +55,7 @@
|
||||
<div id="colour_palette" style="display: none;">
|
||||
<dl style="clear: left;">
|
||||
<dt><label>{L_FONT_COLOR}{L_COLON}</label></dt>
|
||||
<dd id="color_palette_placeholder" data-orientation="h" data-height="12" data-width="15"></dd>
|
||||
<dd id="color_palette_placeholder" data-orientation="h" data-height="12" data-width="15" data-bbcode="true"></dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
|
@ -54,7 +54,12 @@
|
||||
<fieldset>
|
||||
<dl>
|
||||
<dt><label for="group_colour">{L_GROUP_COLOR}{L_COLON}</label><br /><span>{L_GROUP_COLOR_EXPLAIN}</span></dt>
|
||||
<dd><input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" class="inputbox narrow" /> <span style="background-color: {GROUP_COLOUR};"> </span> [ <a href="{U_SWATCH}" onclick="popup(this.href, 636, 150, '_swatch'); return false;">{L_COLOUR_SWATCH}</a> ]</dd>
|
||||
<dd>
|
||||
<input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" class="inputbox narrow" />
|
||||
<span style="background-color: {GROUP_COLOUR};"> </span>
|
||||
[ <a href="#" id="color_palette_toggle">{L_COLOUR_SWATCH}</a> ]
|
||||
<div id="color_palette_placeholder" class="hidden" data-orientation="h" data-height="12" data-width="15" data-target="#group_colour"></div>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><label for="group_rank">{L_GROUP_RANK}{L_COLON}</label></dt>
|
||||
|
@ -631,6 +631,11 @@ table.info tbody th {
|
||||
margin: 0 -1px;
|
||||
}
|
||||
|
||||
#color_palette_placeholder table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Misc layout styles
|
||||
---------------------------------------- */
|
||||
/* column[1-2] styles are containers for two column layouts
|
||||
|
@ -235,11 +235,6 @@ fieldset.submit-buttons input {
|
||||
/* Posting page styles
|
||||
----------------------------------------*/
|
||||
|
||||
#colour_palette table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Buttons used in the editor */
|
||||
#format-buttons {
|
||||
margin: 15px 0 2px 0;
|
||||
|
@ -207,7 +207,7 @@
|
||||
<tr>
|
||||
<td valign="top" style="width: 100%;"><textarea name="message" rows="15" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" style="width: 700px; height: 270px; min-width: 98%; max-width: 98%;">{MESSAGE}</textarea></td>
|
||||
<!-- IF S_BBCODE_ALLOWED -->
|
||||
<td width="80" align="center" valign="top" id="color_palette_placeholder" data-orientation="v" data-width="11" data-height="10">
|
||||
<td width="80" align="center" valign="top" id="color_palette_placeholder" data-orientation="v" data-width="11" data-height="10" data-bbcode="true">
|
||||
</td>
|
||||
<!-- ENDIF -->
|
||||
</tr>
|
||||
|
@ -49,7 +49,11 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row1" width="35%"><label for="group_colour">{L_GROUP_COLOR}{L_COLON}</label><br /><span>{L_GROUP_COLOR_EXPLAIN}</span></td>
|
||||
<td class="row2"><input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" /> <span>[ <a href="{U_SWATCH}" onclick="popup(this.href, 636, 150, '_swatch'); return false;">{L_COLOUR_SWATCH}</a> ]</span></td>
|
||||
<td class="row2">
|
||||
<input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" />
|
||||
<span>[ <a href="#" id="color_palette_toggle">{L_COLOUR_SWATCH}</a> ]</span>
|
||||
<div id="color_palette_placeholder" style="display: none;" data-orientation="h" data-height="12" data-width="15" data-target="#group_colour"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row1" width="35%"><label for="group_rank">{L_GROUP_RANK}{L_COLON}</label></td>
|
||||
|
@ -75,7 +75,7 @@
|
||||
<td colspan="9">
|
||||
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="{S_CONTENT_FLOW_BEGIN}" id="color_palette_placeholder" data-orientation="h" data-width="11" data-height="10">
|
||||
<td align="{S_CONTENT_FLOW_BEGIN}" id="color_palette_placeholder" data-orientation="h" data-width="11" data-height="10" data-bbcode="true">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
Loading…
x
Reference in New Issue
Block a user