[BUGFIX] RTE Image Wizard layout is inconsistent 89/27589/2
authorStanislas Rolland <typo3@sjbr.ca>
Thu, 13 Feb 2014 03:07:40 +0000 (22:07 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Thu, 13 Feb 2014 03:11:12 +0000 (04:11 +0100)
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
typo3/sysext/rtehtmlarea/Classes/SelectImage.php
typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css

index f1a4a5f..c9333b5 100644 (file)
@@ -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() {
index 1dadf99..2a93088 100644 (file)
@@ -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;
index 2a521d7..1a7d12e 100644 (file)
@@ -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;