From c522e29d67590973bd16c7a7f0cfc0649a04d4f4 Mon Sep 17 00:00:00 2001
From: Stanislas Rolland <typo3@sjbr.ca>
Date: Wed, 12 Feb 2014 22:07:40 -0500
Subject: [PATCH] [BUGFIX] RTE Image Wizard layout is inconsistent
Solution: Fix form markup inside table tag.
Remove old color class on labels.
Add rtehtmlarea skin file in order to size and position select and
checkboxes correctly in image update tab.
Position correctly window title.
Resolves: #55946
Releases: 6.2
Change-Id: I497c4a3005bd80b5b05edd64e7ebbca1dee3c0ce
Reviewed-on: https://review.typo3.org/27589
Reviewed-by: Stanislas Rolland
Tested-by: Stanislas Rolland
---
.../rtehtmlarea/Classes/SelectImage.php | 34 +++++++++----------
.../htmlarea/skins/default/htmlarea.css | 31 +++++++++++++++++
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css | 31 +++++++++++++++++
3 files changed, 79 insertions(+), 17 deletions(-)
diff --git a/typo3/sysext/rtehtmlarea/Classes/SelectImage.php b/typo3/sysext/rtehtmlarea/Classes/SelectImage.php
index f1a4a5fd3b7d..c9333b50feab 100644
--- a/typo3/sysext/rtehtmlarea/Classes/SelectImage.php
+++ b/typo3/sysext/rtehtmlarea/Classes/SelectImage.php
@@ -101,6 +101,7 @@ class SelectImage extends \TYPO3\CMS\Recordlist\Browser\ElementBrowser {
$this->doc->JScode .= $this->doc->wrapScriptTags('
Tree.ajaxID = "SC_alt_file_navframe::expandCollapse";
');
+ $this->doc->getPageRenderer()->addCssFile($this->doc->backPath . \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath('t3skin') . 'rtehtmlarea/htmlarea.css');
$this->doc->getContextMenuCode();
}
@@ -399,33 +400,32 @@ class SelectImage extends \TYPO3\CMS\Recordlist\Browser\ElementBrowser {
});
languageSelector += \'</select>\';
}
- var bgColor=\' class="bgColor4"\';
var sz="";
- sz+=\'<table border="0" cellpadding="1" cellspacing="1"><form action="" name="imageData">\';
+ sz+=\'<form action="" name="imageData"><table class="htmlarea-window-table">\';
' . (in_array('class', $removedProperties) ? '' : '
if(classesImage) {
- sz+=\'<tr><td\'+bgColor+\'><label for="iClass">' . $GLOBALS['LANG']->getLL('class') . ': </label></td><td>\'+styleSelector+\'</td></tr>\';
+ sz+=\'<tr><td><label for="iClass">' . $GLOBALS['LANG']->getLL('class') . ': </label></td><td>\'+styleSelector+\'</td></tr>\';
}') . (in_array('width', $removedProperties) ? '' : '
if (!(selectedImageRef && selectedImageRef.src.indexOf("RTEmagic") == -1 && ' . $lockPlainWidth . ')) {
- sz+=\'<tr><td\'+bgColor+\'><label for="iWidth">' . $GLOBALS['LANG']->getLL('width') . ': </label></td><td><input type="text" id="iWidth" name="iWidth" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';
+ sz+=\'<tr><td><label for="iWidth">' . $GLOBALS['LANG']->getLL('width') . ': </label></td><td><input type="text" id="iWidth" name="iWidth" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';
}') . (in_array('height', $removedProperties) ? '' : '
if (!(selectedImageRef && selectedImageRef.src.indexOf("RTEmagic") == -1 && ' . $lockPlainHeight . ')) {
- sz+=\'<tr><td\'+bgColor+\'><label for="iHeight">' . $GLOBALS['LANG']->getLL('height') . ': </label></td><td><input type="text" id="iHeight" name="iHeight" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';
+ sz+=\'<tr><td><label for="iHeight">' . $GLOBALS['LANG']->getLL('height') . ': </label></td><td><input type="text" id="iHeight" name="iHeight" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';
}') . (in_array('border', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iBorder">' . $GLOBALS['LANG']->getLL('border') . ': </label></td><td><input type="checkbox" id="iBorder" name="iBorder" value="1" /></td></tr>\';') . (in_array('float', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iFloat">' . $GLOBALS['LANG']->getLL('float') . ': </label></td><td>\'+floatSelector+\'</td></tr>\';') . (in_array('paddingTop', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iPaddingTop">' . $GLOBALS['LANG']->getLL('padding_top') . ': </label></td><td><input type="text" id="iPaddingTop" name="iPaddingTop" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . '></td></tr>\';') . (in_array('paddingRight', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iPaddingRight">' . $GLOBALS['LANG']->getLL('padding_right') . ': </label></td><td><input type="text" id="iPaddingRight" name="iPaddingRight" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';') . (in_array('paddingBottom', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iPaddingBottom">' . $GLOBALS['LANG']->getLL('padding_bottom') . ': </label></td><td><input type="text" id="iPaddingBottom" name="iPaddingBottom" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';') . (in_array('paddingLeft', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iPaddingLeft">' . $GLOBALS['LANG']->getLL('padding_left') . ': </label></td><td><input type="text" id="iPaddingLeft" name="iPaddingLeft" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';') . (in_array('title', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iTitle">' . $GLOBALS['LANG']->getLL('title') . ': </label></td><td><input type="text" id="iTitle" name="iTitle"' . $GLOBALS['TBE_TEMPLATE']->formWidth(20) . ' /></td></tr>\';') . (in_array('alt', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iAlt">' . $GLOBALS['LANG']->getLL('alt') . ': </label></td><td><input type="text" id="iAlt" name="iAlt"' . $GLOBALS['TBE_TEMPLATE']->formWidth(20) . ' /></td></tr>\';') . (in_array('lang', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iBorder">' . $GLOBALS['LANG']->getLL('border') . ': </label></td><td><input type="checkbox" id="iBorder" name="iBorder" value="1" /></td></tr>\';') . (in_array('float', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iFloat">' . $GLOBALS['LANG']->getLL('float') . ': </label></td><td>\'+floatSelector+\'</td></tr>\';') . (in_array('paddingTop', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iPaddingTop">' . $GLOBALS['LANG']->getLL('padding_top') . ': </label></td><td><input type="text" id="iPaddingTop" name="iPaddingTop" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . '></td></tr>\';') . (in_array('paddingRight', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iPaddingRight">' . $GLOBALS['LANG']->getLL('padding_right') . ': </label></td><td><input type="text" id="iPaddingRight" name="iPaddingRight" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';') . (in_array('paddingBottom', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iPaddingBottom">' . $GLOBALS['LANG']->getLL('padding_bottom') . ': </label></td><td><input type="text" id="iPaddingBottom" name="iPaddingBottom" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';') . (in_array('paddingLeft', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iPaddingLeft">' . $GLOBALS['LANG']->getLL('padding_left') . ': </label></td><td><input type="text" id="iPaddingLeft" name="iPaddingLeft" value=""' . $GLOBALS['TBE_TEMPLATE']->formWidth(4) . ' /></td></tr>\';') . (in_array('title', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iTitle">' . $GLOBALS['LANG']->getLL('title') . ': </label></td><td><input type="text" id="iTitle" name="iTitle"' . $GLOBALS['TBE_TEMPLATE']->formWidth(20) . ' /></td></tr>\';') . (in_array('alt', $removedProperties) ? '' : '
+ sz+=\'<tr><td><label for="iAlt">' . $GLOBALS['LANG']->getLL('alt') . ': </label></td><td><input type="text" id="iAlt" name="iAlt"' . $GLOBALS['TBE_TEMPLATE']->formWidth(20) . ' /></td></tr>\';') . (in_array('lang', $removedProperties) ? '' : '
if (plugin.getButton("Language")) {
- sz+=\'<tr><td\'+bgColor+\'><label for="iLang">\' + plugin.editor.getPlugin("Language").localize(\'Language-Tooltip\') + \': </label></td><td>\' + languageSelector + \'</td></tr>\';
+ sz+=\'<tr><td><label for="iLang">\' + plugin.editor.getPlugin("Language").localize(\'Language-Tooltip\') + \': </label></td><td>\' + languageSelector + \'</td></tr>\';
}') . (in_array('clickenlarge', $removedProperties) || in_array('data-htmlarea-clickenlarge', $removedProperties) ? '' : '
- sz+=\'<tr><td\'+bgColor+\'><label for="iClickEnlarge">' . $GLOBALS['LANG']->sL('LLL:EXT:cms/locallang_ttc.xlf:image_zoom', TRUE) . ' </label></td><td><input type="checkbox" name="iClickEnlarge" id="iClickEnlarge" value="0" /></td></tr>\';') . '
- sz+=\'<tr><td><input type="submit" value="' . $GLOBALS['LANG']->getLL('update') . '" onClick="return setImageProperties();"></td></tr>\';
- sz+=\'</form></table>\';
+ sz+=\'<tr><td><label for="iClickEnlarge">' . $GLOBALS['LANG']->sL('LLL:EXT:cms/locallang_ttc.xlf:image_zoom', TRUE) . ' </label></td><td><input type="checkbox" name="iClickEnlarge" id="iClickEnlarge" value="0" /></td></tr>\';') . '
+ sz+=\'<tr><td></td><td><input type="submit" value="' . $GLOBALS['LANG']->getLL('update') . '" onClick="return setImageProperties();"></td></tr>\';
+ sz+=\'</table></form>\';
return sz;
}
function setImageProperties() {
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css b/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
index 1dadf9973afa..2a93088bda71 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
+++ b/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
@@ -221,6 +221,11 @@ body.ext-ie6 .htmlarea-context-menu .buttonActive,
body.ext-ie6 .htmlarea-window .x-panel-icon {
background-image: url("images/sprites/actions.gif");
}
+.htmlarea-window .x-window-header-text {
+ display: inline-block;
+ margin-top: -4px !important;
+ vertical-align: top;
+}
.htmlarea-window .x-window-header .t3-help-link {
color: #fff;
}
@@ -249,6 +254,32 @@ body.ext-ie6 .htmlarea-window .x-panel-icon {
.ext-ie .htmlarea-window .x-fieldset-bwrap {
clear: left;
}
+/* Selector htmlarea-window-table is used in the element browsers */
+.htmlarea-window-table td {
+ padding: 0 2px;
+}
+.htmlarea-window-table td label {
+ display: inline-block;
+ height: 100%;
+ vertical-align: top;
+}
+.htmlarea-window-table input[type="checkbox"] {
+ margin-bottom: 10px;
+ margin-top: 7px;
+}
+.htmlarea-window-table select {
+ border: solid 1px #888;
+ height: 24px;
+ line-height: 20px;
+ margin-bottom: 5px;
+ margin-bottom: 5px;
+ padding-left: 3px;
+}
+.htmlarea-window-table option {
+ height: 20px;
+ line-height: 20px;
+ padding-top: 5px;
+}
.htmlarea-window .x-form-item-label {
font-size: 10px;
text-align: right;
diff --git a/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css b/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
index 2a521d736158..1a7d12e16ebd 100644
--- a/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
+++ b/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
@@ -227,6 +227,11 @@ body.ext-ie6 .htmlarea-context-menu .buttonActive,
body.ext-ie6 .htmlarea-window .x-panel-icon {
background-image: url("images/sprites/actions.gif");
}
+.htmlarea-window .x-window-header-text {
+ display: inline-block;
+ margin-top: -4px !important;
+ vertical-align: top;
+}
.htmlarea-window .x-window-header .t3-help-link {
color: #fff;
}
@@ -249,6 +254,32 @@ body.ext-ie6 .htmlarea-window .x-panel-icon {
.ext-ie .htmlarea-window .x-fieldset-bwrap {
clear: left;
}
+/* Selector htmlarea-window-table is used in the element browsers */
+.htmlarea-window-table td {
+ padding: 0 2px;
+}
+.htmlarea-window-table td label {
+ display: inline-block;
+ height: 100%;
+ vertical-align: top;
+}
+.htmlarea-window-table input[type="checkbox"] {
+ margin-bottom: 10px;
+ margin-top: 7px;
+}
+.htmlarea-window-table select {
+ border: solid 1px #888;
+ height: 24px;
+ line-height: 20px;
+ margin-bottom: 5px;
+ margin-bottom: 5px;
+ padding-left: 3px;
+}
+.htmlarea-window-table option {
+ height: 20px;
+ line-height: 20px;
+ padding-top: 5px;
+}
.htmlarea-window .x-form-item-label {
font-size: 10px;
text-align: right;
--
GitLab