Commit 8a51dc77 authored by Benjamin Kott's avatar Benjamin Kott Committed by Benni Mack
Browse files

[TASK] Cleanup ContextSensitiveHelp rendering

Resolves: #90497
Releases: master
Change-Id: I5cddd6be004f49d2c44076f5a2a5733401f52235
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63380

Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: default avatarChristian Eßl <indy.essl@gmail.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: default avatarChristian Eßl <indy.essl@gmail.com>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent b2d83e1a
......@@ -29,6 +29,7 @@
//
@import "module/access";
@import "module/extensionmanager";
@import "module/help";
@import "module/install";
@import "module/page";
@import "module/recycler";
......@@ -65,7 +66,6 @@
@import "typo3/various_fixes";
@import "typo3/element_animation";
@import "typo3/element_cropper";
@import "typo3/element_csh";
@import "typo3/element_contextmenu";
@import "typo3/element_docheader";
@import "typo3/element_message";
......
//
// Help
//
.help-view {
img {
margin: 1em 0;
}
}
.help-copyright {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.help-teaser {
cursor: help !important;
}
.help-has-link {
cursor: pointer !important;
}
......@@ -9,19 +9,6 @@ div#typo3-docbody {
width: 100%;
}
//
// Context Sensitive Help (CSH)
//
.t3-help-link {
span.t3-help-inline {
display: none;
}
&:hover span.t3-help-inline {
display: block;
}
}
//
// Print
//
......
//
// Context sensitive help
//
.typo3-csh-inline {
padding: 4px;
}
table.typo3-csh-inline {
margin: 5px 4px 20px 0;
a.typo3-csh-link {
float: none;
margin-right: 0;
}
}
a.typo3-csh-link .typo3-csh-inline {
display: none;
position: absolute;
width: 200px;
z-index: 100;
}
a.typo3-csh-link .typo3-csh-inline.show-right {
right: 10px;
}
table.typo3-csh-inline a.typo3-csh-link {
display: block;
}
a.typo3-csh-link:hover .typo3-csh-inline {
display: block;
}
table.typo3-csh-inline {
a.typo3-csh-link {
height: 16px;
}
tr td h4 {
margin-top: 0;
margin-bottom: 0;
}
}
table.typo3-csh-inline span.paragraph,
a.typo3-csh-link span.typo3-csh-inline span.paragraph {
display: block;
padding: 3px;
}
img.typo3-csh-icon {
vertical-align: middle;
}
div.typo3-view-help {
margin: 0;
width: 100%;
h1 {
background: none;
margin-bottom: 0;
padding: 10px;
color: #000;
text-align: left;
}
h2 {
margin-top: 0;
padding: 4px 2px 4px 10px;
}
h3 {
padding: 5px 10px;
}
h4 {
padding: 2px 10px;
}
p {
margin: 4px 4px 12px 10px;
&.c-nav a {
background-color: transparent;
}
}
div.c-toc {
padding-left: 6px;
p {
margin: 0;
}
}
.manual-title,
.introduction {
padding: 0 12px 6px;
}
img.c-inlineimg {
margin-left: 10px;
}
//
// EXT:cshmanual
//
p div.c-toc {
background: none;
border: none;
}
a {
text-decoration: underline;
}
}
//
// New help code
//
.t3-help-inline {
padding: 4px;
}
table.t3-help-inline {
margin: 3px 4px 20px 0;
background-color: #ffffc7;
border: 1px solid #ccc;
a.t3-help-link {
float: none;
margin-right: 0;
height: 16px;
}
tr td h4 {
margin-top: 0;
margin-bottom: 0;
}
}
table.t3-help-inline a.t3-help-link {
display: block;
}
a.t3-help-link .t3-help-inline {
display: none;
position: absolute;
width: 200px;
z-index: 100;
background: #ffffc7;
color: #000;
font-weight: normal;
&.show-right {
right: 10px;
}
}
a.t3-help-link:hover .t3-help-inline {
display: block;
}
table.t3-help-inline span.paragraph,
a.t3-help-link span.t3-help-inline span.paragraph {
display: block;
padding: 3px;
}
img.t3-help-icon {
vertical-align: middle;
}
div.t3-view-help {
margin: 0;
width: 100%;
h1 {
margin-bottom: 0;
padding: 10px;
}
h2 {
margin-top: 0;
padding: 4px 2px 4px 10px;
}
h3 {
padding: 5px 10px;
}
h4 {
padding: 2px 10px;
}
p {
margin: 4px 4px 12px 10px;
}
.c-toc {
padding-left: 6px;
p {
margin: 0;
}
}
.manual-title,
.introduction {
padding: 0 12px 6px;
}
img.c-inlineimg {
margin-left: 10px;
}
}
//
// Context Sensitive Help (CSH)
//
.typo3-csh-inline {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
line-height: 16px;
}
table.typo3-csh-inline {
background-color: #ffffc7;
border: 1px solid #ccc;
}
a.typo3-csh-link .typo3-csh-inline {
background-color: #ffffc7;
border: 1px solid #ccc;
color: #000;
font-weight: normal;
}
img.typo3-csh-icon {
cursor: help;
}
a.typo3-csh-link {
white-space: normal;
}
//
// new CSH code
//
.t3-help-inline {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
line-height: 16px;
}
p.t3-help-short.tipIsLinked {
cursor: pointer;
}
.t3-help-teaser,
.t3-help-teaser label,
.t3-help-teaser-icon,
img.t3-help-icon {
cursor: help;
}
a.t3-help-link {
white-space: normal;
}
......@@ -10,10 +10,6 @@
display: block;
}
.typo3-TCEforms .typo3-csh-link {
margin-left: 5px;
}
//
// TCEforms Flexforms
//
......
......@@ -30,7 +30,7 @@ class ContextHelp {
private helpModuleUrl: string;
private trigger: string = 'click';
private placement: string = 'auto';
private selector: string = '.t3-help-link';
private selector: string = '.help-link';
/**
* @return {Window}
......@@ -93,7 +93,7 @@ class ContextHelp {
if (!$popover.find('.popover-title').is(':visible')) {
$popover.addClass('no-title');
}
}).on('click', '.tipIsLinked', (e: any): void => {
}).on('click', '.help-has-link', (e: any): void => {
$('.popover').each((index: number, popover: Element): void => {
const $popover = $(popover);
if ($popover.has(e.target).length) {
......
......@@ -63,7 +63,7 @@ class ContextHelpAjaxController
$moreIcon = $helpTextArray['moreInfo'] ? $iconFactory->getIcon('actions-view-go-forward', Icon::SIZE_SMALL)->render() : '';
return [
'title' => $helpTextArray['title'],
'description' => '<p class="t3-help-short' . ($moreIcon ? ' tipIsLinked' : '') . '">' . $helpTextArray['description'] . $moreIcon . '</p>',
'description' => '<p class="help-short' . ($moreIcon ? ' help-has-link' : '') . '">' . $helpTextArray['description'] . $moreIcon . '</p>',
'id' => $table . '.' . $field,
'moreInfo' => $helpTextArray['moreInfo']
];
......
......@@ -2209,7 +2209,7 @@ class BackendUtility
}
// Wrap description and arrow in p tag
if ($helpTextArray['description'] !== null || $arrow) {
$output .= '<p class="t3-help-short">' . nl2br(htmlspecialchars($helpTextArray['description'])) . $arrow . '</p>';
$output .= '<p class="help-short">' . nl2br(htmlspecialchars($helpTextArray['description'])) . $arrow . '</p>';
}
return $output;
}
......@@ -2240,10 +2240,10 @@ class BackendUtility
if ($text == '') {
$iconFactory = GeneralUtility::makeInstance(IconFactory::class);
$text = $iconFactory->getIcon('actions-system-help-open', Icon::SIZE_SMALL)->render();
$abbrClassAdd = '-icon';
$abbrClassAdd = ' help-teaser-icon';
}
$text = '<abbr class="t3-help-teaser' . $abbrClassAdd . '">' . $text . '</abbr>';
$wrappedText = '<span class="t3-help-link" href="#" data-table="' . $table . '" data-field="' . $field . '"';
$text = '<abbr class="help-teaser' . $abbrClassAdd . '">' . $text . '</abbr>';
$wrappedText = '<span class="help-link" href="#" data-table="' . $table . '" data-field="' . $field . '"';
// The overload array may provide a title and a description
// If either one is defined, add them to the "data" attributes
if ($hasHelpTextOverload) {
......
<div class="tx_cshmanual">
<div class="help-view">
<f:render section="content" />
<div><small><f:format.raw>{copyright}</f:format.raw></small></div>
<div class="help-copyright">
<small><f:format.raw>{copyright}</f:format.raw></small>
</div>
</div>
<a id="{manual.table}{f:if(condition:manual.field,then:'.{manual.field}')}"></a>
<h2>{manual.headerLine}</h2>
<p>{manual.content -> f:format.raw()}</p>
<f:if condition="{manual.configuration.details}">
<h3>
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:details" />
</h3>
{manual.configuration.details -> f:format.stripTags(allowedTags:'<strong><em><b><i>') -> f:format.nl2br()}
<h3><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:details" /></h3>
<p>{manual.configuration.details -> f:format.stripTags(allowedTags:'<strong><em><b><i>') -> f:format.nl2br()}</p>
</f:if>
<f:if condition="{manual.configuration.syntax}">
<h3>
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:syntax" />
</h3>
<h3><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:syntax" /></h3>
{manual.configuration.syntax -> f:format.raw()}
</f:if>
......@@ -31,9 +26,7 @@
</f:if>
<f:if condition="{manual.seeAlso}">
<h3>
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:seeAlso" />
</h3>
<h3><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:seeAlso" /></h3>
<ul>
<f:for each="{manual.seeAlso}" as="link">
<li>
......
<html xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers">
<h1>
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:manual_title" />
</h1>
<p class="lead">
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:description" />
</p>
<h2>
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:TOC" />
</h2>
<h1><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:manual_title" /></h1>
<p><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:description" /></p>
<f:if condition="{toc}">
<h2><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:TOC" /></h2>
<ul>
<f:for each="{toc}" as="modules" key="type">
<li>
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:TOC_{type}" default="{type}" />
<ul>
<f:for each="{modules}" as="title" key="module">
<li>
......
<f:layout name="ContextSensitiveHelp" />
<f:section name="content">
<f:render partial="ContextSensitiveHelp/TableOfContents" arguments="{toc:all.toc, all:1}" />
<f:render partial="ContextSensitiveHelp/TableOfContents" arguments="{toc:all.toc, all:1}" />
<f:for each="{all.content}" as="sections">
<f:for each="{sections.content}" as="item">
<f:render partial="ContextSensitiveHelp/Manual" arguments="{manual:item}" />
</f:for>
</f:for>
</f:section>
<f:layout name="ContextSensitiveHelp" />
<f:section name="content">
<f:for each="{manuals}" as="manual">
<f:render partial="ContextSensitiveHelp/Manual" arguments="{manual:manual}" />
</f:for>
</f:section>
<html xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers">
<f:layout name="ContextSensitiveHelp" />
<f:section name="docheader">
</f:section>
<f:section name="content">
<f:render partial="ContextSensitiveHelp/TableOfContents" arguments="{toc:toc,all:0}" />
<f:render partial="ContextSensitiveHelp/TableOfContents" arguments="{toc:toc,all:0}" />
<a href="{be:moduleLink(route:'help_cshmanual',arguments:'{action:\'all\'}')}">
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_view_help.xlf:full_manual" />
</a>
</f:section>
</html>
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
define(["require","exports","jquery","./Popover","bootstrap"],(function(t,e,o,a){"use strict";class s{constructor(){this.ajaxUrl=TYPO3.settings.ajaxUrls.context_help,this.trigger="click",this.placement="auto",this.selector=".t3-help-link",this.initialize()}static resolveBackend(){return void 0!==window.opener&&null!==window.opener?window.opener.top:top}initialize(){const t=s.resolveBackend();void 0!==t.TYPO3.settings.ContextHelp&&(this.helpModuleUrl=t.TYPO3.settings.ContextHelp.moduleUrl),void 0===TYPO3.ShortcutMenu&&void 0===t.TYPO3.ShortcutMenu&&o(".icon-actions-system-shortcut-new").closest(".btn").hide();let e="&nbsp;";void 0!==t.TYPO3.lang&&(e=t.TYPO3.lang.csh_tooltip_loading);const i=o(this.selector);i.attr("data-loaded","false").attr("data-html","true").attr("data-original-title",e).attr("data-placement",this.placement).attr("data-trigger",this.trigger),a.popover(i),o(document).on("show.bs.popover",this.selector,t=>{const e=o(t.currentTarget),s=e.data("description");void 0!==s&&""!==s?a.setOptions(e,{title:e.data("title"),content:s}):"false"===e.attr("data-loaded")&&e.data("table")&&this.loadHelp(e),e.closest(".t3js-module-docheader").length&&a.setOption(e,"placement","bottom")}).on("shown.bs.popover",this.selector,t=>{const e=o(t.target).data("bs.popover").$tip;e.find(".popover-title").is(":visible")||e.addClass("no-title")}).on("click",".tipIsLinked",t=>{o(".popover").each((e,a)=>{const s=o(a);s.has(t.target).length&&this.showHelpPopup(s.data("bs.popover").$element)})}).on("click","body",t=>{o(this.selector).each((e,s)=>{const i=o(s);i.is(t.target)||0!==i.has(t.target).length||0!==o(".popover").has(t.target).length||a.hide(i)})})}showHelpPopup(t){try{const e=window.open(this.helpModuleUrl+"&table="+t.data("table")+"&field="+t.data("field"),"ContextHelpWindow","height=400,width=600,status=0,menubar=0,scrollbars=1");return e.focus(),a.hide(t),e}catch(t){}}loadHelp(t){const e=t.data("table"),s=t.data("field");e&&o.getJSON(this.ajaxUrl,{params:{action:"getContextHelp",table:e,field:s}}).done(e=>{const o=e.title||"",s=e.content||"<p></p>";a.setOptions(t,{title:o,content:s}),t.attr("data-loaded","true").one("hidden.bs.popover",()=>{a.show(t)}),a.hide(t)})}}return new s}));
\ No newline at end of file
define(["require","exports","jquery","./Popover","bootstrap"],(function(t,e,o,a){"use strict";class s{constructor(){this.ajaxUrl=TYPO3.settings.ajaxUrls.context_help,this.trigger="click",this.placement="auto",this.selector=".help-link",this.initialize()}static resolveBackend(){return void 0!==window.opener&&null!==window.opener?window.opener.top:top}initialize(){const t=s.resolveBackend();void 0!==t.TYPO3.settings.ContextHelp&&(this.helpModuleUrl=t.TYPO3.settings.ContextHelp.moduleUrl),void 0===TYPO3.ShortcutMenu&&void 0===t.TYPO3.ShortcutMenu&&o(".icon-actions-system-shortcut-new").closest(".btn").hide();let e="&nbsp;";void 0!==t.TYPO3.lang&&(e=t.TYPO3.lang.csh_tooltip_loading);const i=o(this.selector);i.attr("data-loaded","false").attr("data-html","true").attr("data-original-title",e).attr("data-placement",this.placement).attr("data-trigger",this.trigger),a.popover(i),o(document).on("show.bs.popover",this.selector,t=>{const e=o(t.currentTarget),s=e.data("description");void 0!==s&&""!==s?a.setOptions(e,{title:e.data("title"),content:s}):"false"===e.attr("data-loaded")&&e.data("table")&&this.loadHelp(e),e.closest(".t3js-module-docheader").length&&a.setOption(e,"placement","bottom")}).on("shown.bs.popover",this.selector,t=>{const e=o(t.target).data("bs.popover").$tip;e.find(".popover-title").is(":visible")||e.addClass("no-title")}).on("click",".help-has-link",t=>{o(".popover").each((e,a)=>{const s=o(a);s.has(t.target).length&&this.showHelpPopup(s.data("bs.popover").$element)})}).on("click","body",t=>{o(this.selector).each((e,s)=>{const i=o(s);i.is(t.target)||0!==i.has(t.target).length||0!==o(".popover").has(t.target).length||a.hide(i)})})}showHelpPopup(t){try{const e=window.open(this.helpModuleUrl+"&table="+t.data("table")+"&field="+t.data("field"),"ContextHelpWindow","height=400,width=600,status=0,menubar=0,scrollbars=1");return e.focus(),a.hide(t),e}catch(t){}}loadHelp(t){const e=t.data("table"),s=t.data("field");e&&o.getJSON(this.ajaxUrl,{params:{action:"getContextHelp",table:e,field:s}}).done(e=>{const o=e.title||"",s=e.content||"<p></p>";a.setOptions(t,{title:o,content:s}),t.attr("data-loaded","true").one("hidden.bs.popover",()=>{a.show(t)}),a.hide(t)})}}return new s}));
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment