1
0
mirror of https://github.com/phpbb/phpbb.git synced 2025-05-06 07:35:29 +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:
Nathan Guse 2013-11-21 13:41:03 -08:00
commit 6f419b0049
15 changed files with 117 additions and 207 deletions

View File

@ -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 -->&nbsp;<span style="background-color: #{GROUP_COLOUR}">&nbsp; &nbsp;</span><!-- ENDIF -->&nbsp;&nbsp;<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 -->&nbsp;<span style="background-color: #{GROUP_COLOUR}">&nbsp; &nbsp;</span><!-- ENDIF -->&nbsp;&nbsp;<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>

View File

@ -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;">

View File

@ -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>

View File

@ -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();

View File

@ -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

View File

@ -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
*/

View File

@ -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&amp;name=group_colour'),
'U_ACTION' => "{$this->u_action}&amp;action=$action&amp;g=$group_id",
'L_AVATAR_EXPLAIN' => phpbb_avatar_explanation_string(),
));

View File

@ -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&amp;name=group_colour'),
'S_UCP_ACTION' => $this->u_action . "&amp;action=$action&amp;g=$group_id",
'L_AVATAR_EXPLAIN' => phpbb_avatar_explanation_string(),
));

View File

@ -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>

View File

@ -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};">&nbsp;&nbsp;&nbsp;</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};">&nbsp;&nbsp;&nbsp;</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>

View File

@ -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

View File

@ -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;

View File

@ -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>

View File

@ -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" />&nbsp;&nbsp;<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" />&nbsp;&nbsp;
<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>

View File

@ -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>