Skip to content

Commit 74f4471

Browse files
linawolflinawolf
authored
[TASK] Poppover for Inline-Code (#434)
1 parent 00ec2db commit 74f4471

File tree

39 files changed

+516
-25
lines changed

39 files changed

+516
-25
lines changed

‎Documentation-rendertest/Includes.rst.txt

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
.. Imports for all files go here
1+
.. This is '/Includes.rst.txt'. It is included at the very top of each and
2+
every ReST source file in THIS documentation project (= manual).

‎Documentation-rendertest/Inline-code-and-textroles/Index.rst

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,29 @@ typoscript ``:typoscript:`lib.hello.value = Hello World!``` :typoscript:`
5353
yaml ``:yaml:`- {name: John Smith, age: 33}``` :yaml:`- {name: John Smith, age: 33}`
5454
================ ================================================= ============================================ ===
5555

56+
Examples for direct use
57+
-----------------------
58+
59+
* :code:`code`
60+
* :fluid:`fluid`
61+
* :html:`html`
62+
* :input:`input`
63+
* :js:`js`
64+
* :javascript:`javascript`
65+
* :output:`output`
66+
* :rst:`rst`
67+
* :rest:`rest`
68+
* :shell:`shell`
69+
* :php:`php`
70+
* :sql:`sql`
71+
* :sh:`sh`
72+
* :bash:`bash`
73+
* :tsconfig:`tsconfig`
74+
* :ts:`ts`
75+
* :typescript:`typescript`
76+
* :typoscript:`typoscript`
77+
* :xml:`xml`
78+
* :yaml:`yaml`
5679

5780

5881
Standard Sphinx interpreted text roles

‎packages/typo3-docs-theme/assets/js/code-inline.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
(() => {
2+
var popoverTriggerList = [].slice.call(document.querySelectorAll('.code-inline'));
3+
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
4+
var ariaDescription = popoverTriggerEl.getAttribute('aria-description');
5+
var ariaDetails = popoverTriggerEl.getAttribute('aria-details');
6+
return new bootstrap.Popover(popoverTriggerEl, {
7+
title:ariaDetails?ariaDescription:'',
8+
content: ariaDetails?ariaDetails:ariaDescription,
9+
trigger: 'hover',
10+
placement: 'bottom'
11+
});
12+
});
13+
})();

‎packages/typo3-docs-theme/assets/sass/components/_code.scss

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,40 @@ code {
8585
.code-inline {
8686
font-family: $font-family-monospace;
8787
border-radius: $border-radius;
88-
border: 1px solid $white;
88+
border: 2px solid $white;
8989
background: $gray-100;
9090
padding: 0.25em 0.5em;
91+
cursor: pointer;
92+
line-height: 27px;
9193
}
94+
95+
/** popover styling **/
96+
.popover{
97+
display: flex;
98+
flex-direction: row;
99+
max-width: 30vw;
100+
}
101+
.popover-header{
102+
padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
103+
border-right: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
104+
border-top-left-radius: var(--bs-popover-inner-border-radius);
105+
border-bottom-left-radius: var(--bs-popover-inner-border-radius);
106+
border-top-right-radius: 0;
107+
border-bottom: 0;
108+
}
109+
110+
@media only screen and (max-width: 576px) {
111+
.popover{
112+
max-width: 90vw;
113+
}
114+
}
115+
@media only screen and (max-width: 768px) {
116+
.popover{
117+
max-width: 70vw;
118+
}
119+
}
120+
@media only screen and (max-width: 992px) {
121+
.popover{
122+
max-width: 60vw;
123+
}
124+
}

‎packages/typo3-docs-theme/resources/config/typo3-docs-theme.php

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,20 @@
2727
use T3Docs\Typo3DocsTheme\Inventory\Typo3InventoryRepository;
2828
use T3Docs\Typo3DocsTheme\Parser\ExtendedInterlinkParser;
2929
use T3Docs\Typo3DocsTheme\Renderer\DecoratingPlantumlRenderer;
30+
use T3Docs\Typo3DocsTheme\TextRoles\FluidTextTextRole;
31+
use T3Docs\Typo3DocsTheme\TextRoles\HtmlTextTextRole;
32+
use T3Docs\Typo3DocsTheme\TextRoles\InputTextTextRole;
3033
use T3Docs\Typo3DocsTheme\TextRoles\IssueReferenceTextRole;
34+
use T3Docs\Typo3DocsTheme\TextRoles\JavaScriptTextRole;
35+
use T3Docs\Typo3DocsTheme\TextRoles\OutputTextTextRole;
3136
use T3Docs\Typo3DocsTheme\TextRoles\PhpTextRole;
37+
use T3Docs\Typo3DocsTheme\TextRoles\RestructuredTextTextRole;
38+
use T3Docs\Typo3DocsTheme\TextRoles\ShellTextTextRole;
39+
use T3Docs\Typo3DocsTheme\TextRoles\TSconfigTextRole;
40+
use T3Docs\Typo3DocsTheme\TextRoles\TypeScriptTextRole;
41+
use T3Docs\Typo3DocsTheme\TextRoles\TypoScriptTextTextRole;
42+
use T3Docs\Typo3DocsTheme\TextRoles\XmlTextTextRole;
43+
use T3Docs\Typo3DocsTheme\TextRoles\YamlTextTextRole;
3244
use T3Docs\Typo3DocsTheme\Twig\TwigExtension;
3345

3446
use function Symfony\Component\DependencyInjection\Loader\Configurator\param;
@@ -52,8 +64,37 @@
5264
->set(InventoryRepository::class, Typo3InventoryRepository::class)
5365
->arg('$inventoryConfigs', param('phpdoc.guides.inventories'))
5466
->set(InterlinkParser::class, ExtendedInterlinkParser::class)
67+
->set(FluidTextTextRole::class)
68+
->tag('phpdoc.guides.parser.rst.text_role')
69+
->set(HtmlTextTextRole::class)
70+
->tag('phpdoc.guides.parser.rst.text_role')
71+
->set(InputTextTextRole::class)
72+
->tag('phpdoc.guides.parser.rst.text_role')
73+
->set(JavaScriptTextRole::class)
74+
->tag('phpdoc.guides.parser.rst.text_role')
75+
->set(OutputTextTextRole::class)
76+
->tag('phpdoc.guides.parser.rst.text_role')
77+
->set(PhpTextRole::class)
78+
->tag('phpdoc.guides.parser.rst.text_role')
79+
->set(FluidTextTextRole::class)
80+
->tag('phpdoc.guides.parser.rst.text_role')
5581
->set(PhpTextRole::class)
5682
->tag('phpdoc.guides.parser.rst.text_role')
83+
->set(RestructuredTextTextRole::class)
84+
->tag('phpdoc.guides.parser.rst.text_role')
85+
->set(ShellTextTextRole::class)
86+
->tag('phpdoc.guides.parser.rst.text_role')
87+
->set(TSconfigTextRole::class)
88+
->tag('phpdoc.guides.parser.rst.text_role')
89+
->set(TypeScriptTextRole::class)
90+
->tag('phpdoc.guides.parser.rst.text_role')
91+
->set(TypoScriptTextTextRole::class)
92+
->tag('phpdoc.guides.parser.rst.text_role')
93+
->set(XmlTextTextRole::class)
94+
->tag('phpdoc.guides.parser.rst.text_role')
95+
->set(YamlTextTextRole::class)
96+
->tag('phpdoc.guides.parser.rst.text_role')
97+
5798

5899
->set(DecoratingPlantumlRenderer::class)
59100
->decorate(PlantumlServerRenderer::class)

‎packages/typo3-docs-theme/resources/public/css/theme.css

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23113,11 +23113,44 @@ code {
2311323113
.code-inline {
2311423114
font-family: "Source Code Pro", monospace;
2311523115
border-radius: 0.375rem;
23116-
border: 1px solid #ffffff;
23116+
border: 2px solid #ffffff;
2311723117
background: #f7f7f7;
2311823118
padding: 0.25em 0.5em;
23119+
cursor: pointer;
23120+
line-height: 27px;
23121+
}
23122+
23123+
/** popover styling **/
23124+
.popover {
23125+
display: flex;
23126+
flex-direction: row;
23127+
max-width: 30vw;
2311923128
}
2312023129

23130+
.popover-header {
23131+
padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
23132+
border-right: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
23133+
border-top-left-radius: var(--bs-popover-inner-border-radius);
23134+
border-bottom-left-radius: var(--bs-popover-inner-border-radius);
23135+
border-top-right-radius: 0;
23136+
border-bottom: 0;
23137+
}
23138+
23139+
@media only screen and (max-width: 576px) {
23140+
.popover {
23141+
max-width: 90vw;
23142+
}
23143+
}
23144+
@media only screen and (max-width: 768px) {
23145+
.popover {
23146+
max-width: 70vw;
23147+
}
23148+
}
23149+
@media only screen and (max-width: 992px) {
23150+
.popover {
23151+
max-width: 60vw;
23152+
}
23153+
}
2312123154
:root {
2312223155
--frame-color: inherit;
2312323156
--frame-link-color: #005E85;

‎packages/typo3-docs-theme/resources/public/js/theme.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/typo3-docs-theme/resources/template/inline/literal.html.twig

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% apply spaceless %}
2+
<code class="code-inline" translate="no">{{ node.value }}</code>
3+
{% endapply %}

‎packages/typo3-docs-theme/resources/template/inline/textroles/code.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{% apply spaceless %}
2-
<code class="code-inline{%- if node.class %} {{ node.class }}{% endif %}" translate="no">{{ node.value }}</code>
2+
<code class="code-inline" translate="no" aria-description="{{ node.language }}" aria-details="{{ node.helpText }}">{{ node.value }}</code>
33
{% endapply %}

‎packages/typo3-docs-theme/resources/template/inline/textroles/file.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{% apply spaceless %}
2-
<code class="code-inline file{%- if node.class %} {{ node.class }}{% endif %}" translate="no">{{ node.value }}</code>
2+
<code class="code-inline" translate="no" title="File path">{{ node.value }}</code>
33
{% endapply %}

‎packages/typo3-docs-theme/resources/template/inline/textroles/literal.html.twig

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/typo3-docs-theme/resources/template/inline/textroles/path.html.twig

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% apply spaceless %}
2+
<code class="code-inline" translate="no" title="Path">{{ node.value }}</code>
3+
{% endapply %}

‎packages/typo3-docs-theme/resources/template/inline/textroles/unknown.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{% apply spaceless %}
2-
<code class="code-inline {{ node.type }}{%- if node.class %} {{ node.class }}{% endif %}" translate="no">{{ node.value }}</code>
2+
<code class="code-inline">{{ node.value }}</code>
33
{% endapply %}

‎packages/typo3-docs-theme/src/DependencyInjection/Typo3DocsThemeExtension.php

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
1414
use Symfony\Component\DependencyInjection\Loader\PhpFileLoader;
1515
use Symfony\Component\DependencyInjection\Reference;
16+
use T3Docs\Typo3DocsTheme\Nodes\Inline\CodeInlineNode;
1617
use T3Docs\Typo3DocsTheme\Nodes\YoutubeNode;
1718
use T3Docs\Typo3DocsTheme\Settings\Typo3DocsThemeSettings;
1819

1920
use function dirname;
21+
use function phpDocumentor\Guides\DependencyInjection\template;
2022

2123
class Typo3DocsThemeExtension extends Extension implements PrependExtensionInterface
2224
{
@@ -88,6 +90,10 @@ public function prepend(ContainerBuilder $container): void
8890
'templates' => [dirname(__DIR__, 2) . '/resources/template'],
8991
],
9092
],
93+
94+
'templates' => [
95+
template(CodeInlineNode::class, 'inline/textroles/code.html.twig'),
96+
],
9197
]);
9298
}
9399
}

‎packages/typo3-docs-theme/src/Nodes/Inline/CodeInlineNode.php

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
3+
namespace T3Docs\Typo3DocsTheme\Nodes\Inline;
4+
5+
use phpDocumentor\Guides\Nodes\Inline\InlineNode;
6+
7+
final class CodeInlineNode extends InlineNode
8+
{
9+
public const TYPE = 'code';
10+
11+
public function __construct(string $value, private string $language, private string $helpText = '')
12+
{
13+
parent::__construct(self::TYPE, $value);
14+
}
15+
16+
public function getLanguage(): string
17+
{
18+
return $this->language;
19+
}
20+
21+
public function getHelpText(): string
22+
{
23+
return $this->helpText;
24+
}
25+
26+
}

‎packages/typo3-docs-theme/src/TextRoles/FluidTextTextRole.php

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
3+
namespace T3Docs\Typo3DocsTheme\TextRoles;
4+
5+
use phpDocumentor\Guides\Nodes\Inline\InlineNode;
6+
use phpDocumentor\Guides\RestructuredText\Parser\DocumentParserContext;
7+
use phpDocumentor\Guides\RestructuredText\TextRoles\TextRole;
8+
use T3Docs\Typo3DocsTheme\Nodes\Inline\CodeInlineNode;
9+
10+
final class FluidTextTextRole implements TextRole
11+
{
12+
public function getName(): string
13+
{
14+
return 'fluid';
15+
}
16+
17+
public function getAliases(): array
18+
{
19+
return [];
20+
}
21+
22+
public function processNode(DocumentParserContext $documentParserContext, string $role, string $content, string $rawContent): InlineNode
23+
{
24+
return new CodeInlineNode($rawContent, 'Fluid', 'Templating engine used by TYPO3.');
25+
}
26+
}

‎packages/typo3-docs-theme/src/TextRoles/HtmlTextTextRole.php

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
3+
namespace T3Docs\Typo3DocsTheme\TextRoles;
4+
5+
use phpDocumentor\Guides\Nodes\Inline\InlineNode;
6+
use phpDocumentor\Guides\RestructuredText\Parser\DocumentParserContext;
7+
use phpDocumentor\Guides\RestructuredText\TextRoles\TextRole;
8+
use T3Docs\Typo3DocsTheme\Nodes\Inline\CodeInlineNode;
9+
10+
final class HtmlTextTextRole implements TextRole
11+
{
12+
public function getName(): string
13+
{
14+
return 'html';
15+
}
16+
17+
public function getAliases(): array
18+
{
19+
return [];
20+
}
21+
22+
public function processNode(DocumentParserContext $documentParserContext, string $role, string $content, string $rawContent): InlineNode
23+
{
24+
return new CodeInlineNode($rawContent, 'HTML', 'HyperText Markup Language.');
25+
}
26+
}

‎packages/typo3-docs-theme/src/TextRoles/InputTextTextRole.php

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
3+
namespace T3Docs\Typo3DocsTheme\TextRoles;
4+
5+
use phpDocumentor\Guides\Nodes\Inline\InlineNode;
6+
use phpDocumentor\Guides\RestructuredText\Parser\DocumentParserContext;
7+
use phpDocumentor\Guides\RestructuredText\TextRoles\TextRole;
8+
use T3Docs\Typo3DocsTheme\Nodes\Inline\CodeInlineNode;
9+
10+
final class InputTextTextRole implements TextRole
11+
{
12+
public function getName(): string
13+
{
14+
return 'input';
15+
}
16+
17+
public function getAliases(): array
18+
{
19+
return [];
20+
}
21+
22+
public function processNode(DocumentParserContext $documentParserContext, string $role, string $content, string $rawContent): InlineNode
23+
{
24+
return new CodeInlineNode($rawContent, 'Input value');
25+
}
26+
}

0 commit comments

Comments
 (0)