Commit a373e75c authored by Thomas Löffler's avatar Thomas Löffler
Browse files

[FEATURE] First bunch of new detail view design

parent ff674873
Pipeline #342 passed with stages
in 1 minute and 41 seconds
{namespace terfe2=Tx_TerFe2_ViewHelpers} {namespace terfe2=Tx_TerFe2_ViewHelpers}
<div class="ter-ext-single-info ter-ext-info"> <dl class="row">
<table> <dt class="col-sm-3"><f:translate key="version" /></dt>
<tr class="ter-ext-single-info-key"> <dd class="col-sm-9">{extension.lastVersion.versionString}</dd>
<th> <dt class="col-sm-3"><f:translate key="last_updated" /></dt>
<f:translate key="extensionKey"/> <dd class="col-sm-9"><terfe2:dateTime format="{settings.dateFormat}">{extension.lastVersion.uploadDate}</terfe2:dateTime></dd>
</th> <dt class="col-sm-3"><f:translate key="first_upload" /></dt>
<td><strong>{extension.extKey}</strong></td> <dd class="col-sm-9"><terfe2:dateTime format="{settings.dateFormat}">{extension.crdate}</terfe2:dateTime></dd>
</tr> <dt class="col-sm-3"><f:translate key="downloads" /></dt>
<tr> <dd class="col-sm-9"><f:format.number decimals="0" thousandsSeparator="," decimalSeparator=".">{extension.downloads}</f:format.number></dd>
<th>
<f:translate key="version"/>
</th>
<td>{extension.lastVersion.versionString} <span
class="ter-ext-state ter-ext-state-{extension.lastVersion.state}">{extension.lastVersion.state}</span>
</td>
</tr>
<tr>
<th>
<f:translate key="last_updated"/>
</th>
<td>
<terfe2:dateTime format="{settings.dateFormat}">{extension.lastVersion.uploadDate}</terfe2:dateTime>
</td>
</tr>
<tr>
<th>
<f:translate key="first_upload"/>
</th>
<td>
<terfe2:dateTime format="{settings.dateFormat}">{extension.crdate}</terfe2:dateTime>
</td>
</tr>
<tr>
<th>
<f:translate key="downloads"/>
</th>
<td>
<f:format.number decimals="0" thousandsSeparator="," decimalSeparator=".">{extension.downloads}
</f:format.number>
</td>
</tr>
<f:security.ifHasRole role="{settings.reviewerGroupUid}"> <f:security.ifHasRole role="{settings.reviewerGroupUid}">
<tr> <dt class="col-sm-3">Owner:</dt>
<th>Owner:</th> <dd class="col-sm-9">Name: {owner.name}<br />Email: {owner.email}<br />Username: {owner.username}</dd>
<td> Name: {owner.name}
<br/>Email: {owner.email}
<br/>Username: {owner.username}
</td>
</tr>
</f:security.ifHasRole> </f:security.ifHasRole>
<tr> <dt class="col-sm-3"><f:translate key="category" /></dt>
<th> <dd class="col-sm-9">
<f:translate key="category"/>
</th>
<td>
<f:if condition="{extension.lastVersion.emCategory}"> <f:if condition="{extension.lastVersion.emCategory}">
<f:then> <f:then>
<f:translate key="category_{extension.lastVersion.emCategory}"/> <f:translate key="category_{extension.lastVersion.emCategory}" />
</f:then> </f:then>
<f:else> <f:else>
<f:translate key="none"/> <f:translate key="none" />
</f:else> </f:else>
</f:if> </f:if>
</td> </dd>
</tr> <dt class="col-sm-3"><f:translate key="dependencies" /></dt>
<tr class="ter-ext-single-info-relations"> <dd class="col-sm-9"><f:render partial="InlineRelationList" arguments="{relations: extension.lastVersion.dependencies}" /></dd>
<th> <dt class="col-sm-3"><f:translate key="conflicts" /></dt>
<f:translate key="dependencies"/> <dd class="col-sm-9"><f:render partial="InlineRelationList" arguments="{relations: extension.lastVersion.conflicts}" /></dd>
</th> <dt class="col-sm-3"><f:translate key="manual" /></dt>
<td> <dd class="col-sm-9">
<f:render partial="InlineRelationList" arguments="{relations: extension.lastVersion.dependencies}"/>
</td>
</tr>
<tr class="ter-ext-single-info-relations">
<th>
<f:translate key="conflicts"/>
</th>
<td>
<f:render partial="InlineRelationList" arguments="{relations: extension.lastVersion.conflicts}"/>
</td>
</tr>
<tr class="ter-ext-single-info-manual">
<th>
<f:translate key="manual"/>
</th>
<td>
<f:if condition="{documentationLink}"> <f:if condition="{documentationLink}">
<f:then> <f:then>
<terfe2:raw>{documentationLink}</terfe2:raw> <terfe2:raw>{documentationLink}</terfe2:raw>
<f:if condition="{extension.externalManual}"> <f:if condition="{extension.externalManual}">
<br/> <br />
<f:link.external rel="nofollow" uri="{extension.externalManual}" target="_blank"> <f:link.external rel="nofollow" uri="{extension.externalManual}" target="_blank">
<f:translate key="external_manual"/> <f:translate key="external_manual" />
</f:link.external> </f:link.external>
</f:if> </f:if>
</f:then> </f:then>
...@@ -100,83 +44,56 @@ ...@@ -100,83 +44,56 @@
<f:if condition="{extension.externalManual}"> <f:if condition="{extension.externalManual}">
<f:then> <f:then>
<f:link.external rel="nofollow" uri="{extension.externalManual}" target="_blank"> <f:link.external rel="nofollow" uri="{extension.externalManual}" target="_blank">
<f:translate key="extension_manual"/> <f:translate key="extension_manual" />
</f:link.external> </f:link.external>
</f:then> </f:then>
<f:else> <f:else>
<f:translate key="extension_manual_not_available"/> <f:translate key="extension_manual_not_available" />
</f:else> </f:else>
</f:if> </f:if>
</f:else> </f:else>
</f:if> </f:if>
</td> </dd>
</tr>
<f:if condition="{extension.forgeLink}"> <f:if condition="{extension.forgeLink}">
<tr class="ter-ext-single-info-key"> <dt class="col-sm-3">
<th> <f:translate key="bugtracker" />
<f:translate key="bugtracker"/> </dt>
</th> <dd class="col-sm-9">
<td>
<f:link.external rel="nofollow" uri="{extension.forgeLink}" target="_blank"> <f:link.external rel="nofollow" uri="{extension.forgeLink}" target="_blank">
<f:translate key="found_a_bug"/> <f:translate key="found_a_bug" />
</f:link.external> </f:link.external>
</td> </dd>
</tr>
</f:if> </f:if>
<f:if condition="{extension.repositoryUrl}"> <f:if condition="{extension.repositoryUrl}">
<tr class="ter-ext-single-info-key"> <dt class="col-sm-3">
<th> <f:translate key="repository_url" />
<f:translate key="repository_url"/> </dt>
</th> <dd class="col-sm-9">
<td>
<f:link.external rel="nofollow" uri="{extension.repositoryUrl}" target="_blank"> <f:link.external rel="nofollow" uri="{extension.repositoryUrl}" target="_blank">
<f:translate key="repository_url_value"/> <f:translate key="repository_url_value" />
</f:link.external> </f:link.external>
</td> </dd>
</tr>
</f:if> </f:if>
<f:if condition="{flattrUrl}"> <f:if condition="{flattrUrl}">
<tr class="ter-ext-single-flattr"> <dt class="col-sm-3">
<th> <f:translate key="donate" />
<f:translate key="donate"/> </dt>
</th> <dd class="col-sm-9">
<td>
<f:link.external uri="{flattrUrl}" target="_blank"><img <f:link.external uri="{flattrUrl}" target="_blank"><img
src="https://api.flattr.com/button/flattr-badge-large.png" src="https://api.flattr.com/button/flattr-badge-large.png"
alt="{f:translate(key:'donate')}"/></f:link.external> alt="{f:translate(key:'donate')}" /></f:link.external>
</td> </dd>
</tr>
</f:if> </f:if>
<f:if condition="{extension.paypalUrl}"> <f:if condition="{extension.paypalUrl}">
<tr class="ter-ext-single-info-key"> <dt class="col-sm-3">
<th> <f:translate key="like_it" />
<f:translate key="like_it"/> </dt>
</th> <dd class="col-sm-9">
<td>
<f:link.external rel="nofollow" uri="{extension.paypalUrl}" target="_blank"> <f:link.external rel="nofollow" uri="{extension.paypalUrl}" target="_blank">
<f:translate key="donate_url"/> <f:translate key="donate_url" />
</f:link.external> </f:link.external>
</td> </dd>
</tr>
</f:if> </f:if>
<f:if condition="{owner.username}"> <dt class="col-sm-3"><f:translate key="author" /></dt>
<tr> <dd class="col-sm-9">{owner.name}</dd>
<th>Username</th> </dl>
<td>
{owner.username}
</td>
</tr>
</f:if>
<f:if condition="{owner}">
<tr>
<th>
<f:translate key="author"/>
</th>
<td>
{owner.name}
<br/>
</td>
</tr>
</f:if>
</table>
</div>
{namespace terfe2=Tx_TerFe2_ViewHelpers} {namespace terfe2=Tx_TerFe2_ViewHelpers}
<table> <table class="table table-hover">
<thead>
<tr>
<th class="col-sm-3"><i class="fa fa-info"></i> Version</th>
<th class="col-sm-4"><i class="fa fa-comment-o"></i> Upload comment</th>
<th class="col-sm-3">Supports TYPO3 version</th>
<th class="col-sm-2"><i class="fa fa-download"></i> Download</th>
</tr>
</thead>
<tbody>
<f:for each="{versionHistory}" as="version"> <f:for each="{versionHistory}" as="version">
<tr <tr
<f:if condition="{version} == {version.extension.lastVersion}">class="latest-version-row"</f:if> <f:if condition="{version} == {version.extension.lastVersion}">class="table-success"</f:if>
<f:if condition="{version.reviewState} == -1">class="insecure-version-row"</f:if> <f:if condition="{version.reviewState} == -1">class="table-danger"</f:if>
> >
<td class="col1"> <td>
<strong>{version.versionString}</strong> <strong>{version.versionString}</strong>
<br/> <br />
<small> <small>
<f:format.date format="F d, Y">{version.uploadDate}</f:format.date> <f:format.date format="F d, Y">{version.uploadDate}</f:format.date>
</small> </small>
</td> </td>
<td class="col2"> <td>
<f:format.nl2br>{version.uploadComment}</f:format.nl2br> <f:format.nl2br>{version.uploadComment}</f:format.nl2br>
</td>
<td>
<f:if condition="{version.typo3Dependency}"> <f:if condition="{version.typo3Dependency}">
<f:then> <strong>{version.typo3Dependency.versionString}</strong>
<br/>
<strong>Supports TYPO3 version {version.typo3Dependency.versionString}</strong>
</f:then>
</f:if> </f:if>
</td> </td>
<td class="col3"> <td>
<f:if condition="{version.reviewState} != -1"> <f:if condition="{version.reviewState} != -1">
<f:then> <f:then>
<f:link.action controller="Extension" action="download"
arguments="{extension : extension, versionString : version.versionString, format : 't3x'}"
title="{f:translate(key:'filesize')}: {version.t3xFileSize -> terfe2:filesize()}"
class="ter-download-icon ter-download-icon-t3x">
<f:translate key="download_t3x"/>
</f:link.action>
<f:link.action controller="Extension" action="download" <f:link.action controller="Extension" action="download"
arguments="{extension : extension, versionString : version.versionString, format : 'zip'}" arguments="{extension : extension, versionString : version.versionString, format : 'zip'}"
title="{f:translate(key:'filesize')}: {version.zipFileSize -> terfe2:filesize()}" title="{f:translate(key:'filesize')}: {version.zipFileSize -> terfe2:filesize()}"
class="ter-download-icon ter-download-icon-zip"> class="btn btn-primary">
<f:translate key="download_zip"/> <f:translate key="download_zip" />
</f:link.action> </f:link.action>
</f:then> </f:then>
<f:else> <f:else>
<f:security.ifHasRole role="{settings.reviewerGroupUid}"> <f:security.ifHasRole role="{settings.reviewerGroupUid}">
<f:then> <f:then>
<f:link.action controller="Extension" action="download"
arguments="{extension : extension, versionString : version.versionString, format : 't3x'}"
class="ter-download-icon ter-download-icon-t3x"
title="{f:translate(key:'filesize')}: {version.t3xFileSize -> terfe2:filesize()}">
<f:translate key="download_t3x"/>
</f:link.action>
<f:link.action controller="Extension" action="download" <f:link.action controller="Extension" action="download"
arguments="{extension : extension, versionString : version.versionString, format : 'zip'}" arguments="{extension : extension, versionString : version.versionString, format : 'zip'}"
class="ter-download-icon ter-download-icon-zip" class="ter-download-icon ter-download-icon-zip"
title="{f:translate(key:'filesize')}: {version.zipFileSize -> terfe2:filesize()}"> title="{f:translate(key:'filesize')}: {version.zipFileSize -> terfe2:filesize()}">
<f:translate key="download_zip"/> <f:translate key="download_zip" />
</f:link.action> </f:link.action>
</f:then> </f:then>
<f:else>
&nbsp;
</f:else>
</f:security.ifHasRole> </f:security.ifHasRole>
</f:else> </f:else>
</f:if> </f:if>
</td> </td>
</tr> </tr>
</f:for> </f:for>
</tbody>
</table> </table>
...@@ -2,47 +2,28 @@ ...@@ -2,47 +2,28 @@
<f:if condition="{relations}"> <f:if condition="{relations}">
<f:then> <f:then>
<ul> <ul class="list-unstyled mb-0">
<f:for each="{relations}" as="relation" iteration="relationIteration"> <f:for each="{relations}" as="relation" iteration="relationIteration">
<li> <li>
<f:if condition="{relation.isExtension}"> <f:if condition="{relation.isExtension}">
<f:if condition="{relation.relatedExtension}"> <f:if condition="{relation.relatedExtension}">
<f:then> <f:then>
<f:link.action controller="Extension" action="show" <f:link.action controller="Extension" action="show" arguments="{extension : relation.relatedExtension}">{relation.relationKey}</f:link.action>
arguments="{extension : relation.relatedExtension}">
{relation.relationKey}
</f:link.action>
<f:if condition="{relation.versionString}"> ({relation.versionString})</f:if> <f:if condition="{relation.versionString}"> ({relation.versionString})</f:if>
<f:if condition="{relationIteration.isLast}">
<f:then></f:then>
<f:else><br/></f:else>
</f:if>
</f:then> </f:then>
<f:else> <f:else>
{relation.relationKey} {relation.relationKey}
<f:if condition="{relation.versionString}"> ({relation.versionString})</f:if> <f:if condition="{relation.versionString}"> ({relation.versionString})</f:if>
<f:if condition="{relationIteration.isLast}">
<f:then></f:then>
<f:else><br/></f:else>
</f:if>
</f:else> </f:else>
</f:if> </f:if>
</f:if> </f:if>
<f:if condition="{relation.isSystem}"> <f:if condition="{relation.isSystem}">
<terfe2:format function="strtoupper">{relation.relationKey}</terfe2:format> <terfe2:format function="strtoupper">{relation.relationKey}</terfe2:format>
<f:if condition="{relation.versionString}"> ({relation.versionString})</f:if> <f:if condition="{relation.versionString}"> ({relation.versionString})</f:if>
<f:if condition="{relationIteration.isLast}">
<f:then></f:then>
<f:else><br/></f:else>
</f:if>
</f:if> </f:if>
<f:if condition="{relation.isCore}"> <f:if condition="{relation.isCore}">
TYPO3 TYPO3
<f:if condition="{relation.versionString}"> ({relation.versionString})</f:if> <f:if condition="{relation.versionString}"> ({relation.versionString})</f:if>
<f:if condition="{relationIteration.isLast}">
<f:then></f:then>
<f:else><br/></f:else>
</f:if>
</f:if> </f:if>
</li> </li>
</f:for> </f:for>
......
{namespace terfe2=Tx_TerFe2_ViewHelpers} {namespace terfe2=Tx_TerFe2_ViewHelpers}
<f:layout name="Default"/> <f:layout name="Default" />
<f:section name="main"> <f:section name="main">
<f:if condition="{extension}"> <f:if condition="{extension}">
<f:then> <f:then>
<div id="ter-ext-single" class="ter-toggle-from-here"> <header class="mt-3">
<terfe2:extensionIcon version="{extension.lastVersion}" alt="{extension.lastVersion.title}" class="ter-ext-icon" />
<div class="ter-ext-single-header">
<terfe2:extensionIcon version="{extension.lastVersion}" alt="{extension.lastVersion.title}"
class="ter-ext-icon"/>
<h1> <h1>
{extension.lastVersion.title} {extension.lastVersion.title}
<small class="text-muted">{extension.extKey} / <span class="ter-ext-state-{extension.lastVersion.state}">{extension.lastVersion.state}</span>
</small>
</h1> </h1>
</div> </header>
<f:if condition="{extension.lastVersion.reviewState} == -2"> <f:if condition="{extension.lastVersion.reviewState} == -2">
<div class="tx-extbase-flash-message"> <div class="alert alert-warning" role="alert">
<div class="typo3-message message-notice"> <h4 class="alert-header">
Outdated extension
</h4>
<p> <p>
<strong>Outdated extension</strong><br/>
This extension supports none of the currently supported TYPO3 core versions or was This extension supports none of the currently supported TYPO3 core versions or was
uploaded before the release of the oldest TYPO3 core version.<br/> uploaded before the release of the oldest TYPO3 core version.<br />
It may no longer be maintained or supported by the extension owner.<br/> It may no longer be maintained or supported by the extension owner.<br />
Please be careful using this extension for your up-to-date TYPO3 instance.<br/><br/> Please be careful using this extension for your up-to-date TYPO3 instance.<br /><br />
</p>
<p>
If you are sure this extension is flagged as outdated by mistake, please contact the If you are sure this extension is flagged as outdated by mistake, please contact the
<f:link.page pageUid="90">t3o team</f:link.page> <f:link.page pageUid="90">t3o team</f:link.page>
</p> </p>
</div> </div>
</div>
</f:if> </f:if>
<div class="extension-header-image"> <div class="row mb-3">
<div class="extension-description"> <div class="col-md-8">
<p>{extension.lastVersion.description}</p> <p>{extension.lastVersion.description}</p>
</div> </div>
<div class="col-md-4">
<f:if condition="{extension.lastVersion.reviewState} != -1"> <f:if condition="{extension.lastVersion.reviewState} != -1">
<div class="download-button"> <div class="btn-group mb-3">
<f:link.action class="bu large" controller="Extension" action="download" <button type="button" class="btn btn-primary pull-right dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
arguments="{extension : extension, versionString : extension.lastVersion.versionString, format : 't3x'}"> Install {extension.extKey} via
<f:translate key="download_header"/> </button>
version {extension.lastVersion.versionString} <div class="dropdown-menu">
</f:link.action> <a class="dropdown-item" data-parent="#collapse-container" data-toggle="collapse" data-target="#install-zip">ZIP file</a>
<a class="dropdown-item" data-parent="#collapse-container" data-toggle="collapse" data-target="#install-composer">composer</a>
<a class="dropdown-item" data-parent="#collapse-container" data-toggle="collapse" data-target="#install-t3x">T3X file</a>
</div>
</div> </div>
</f:if> </f:if>
</div> </div>
<div style="clear: both;">&nbsp;</div> </div>
<div class="b-tabs"> <div class="row mb-3 justify-content-center">
<ul class="tabs lite-tabs"> <div id="collapse-container">
<li class="act"> <div class="collapse" id="install-zip">
<a href="#"> <div class="card card-block bgWhite">
<f:translate key="description"/> <h4>Install {extension.extKey} via ZIP file</h4>
</a> <ol>
<li>
<f:link.action class="" controller="Extension" action="download"
arguments="{extension : extension, versionString : extension.lastVersion.versionString, format : 'zip'}">
Download ZIP file
</f:link.action>
</li> </li>
<li class=""> <li>
<a href="#"> Log into your TYPO3 backend
<f:translate key="download"/>
</a>
</li> </li>
<li>
<f:if condition="{settings.show.reviewForm}"> Go to Extension Manager module
<f:security.ifHasRole role="{settings.reviewerGroupUid}">
<li class="">
<a href="#">
<f:translate key="review"/>
</a>