Skip to content
Code-Schnipsel Gruppen Projekte
Commit 93bbf17d erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

Merge branch 'next-2.x' into 'main' 

Next 2.x

See merge request !7
Übergeordnete 2b9dbd17 7a9c9c28
No related branches found
No related tags found
3 Merge Requests!8Update 'next-3.x' with latest changes from 'main',!7Next 2.x,!6Update 'next-2.x' with latest changes from 'main'
Pipeline #12392 mit Warnungen bestanden mit Phase
in 51 Sekunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
werden angezeigt mit 107 Ergänzungen und 136 Löschungen
README.md
+ 7
− 3
Zeige Datei @ 93bbf17d
......@@ -2,7 +2,9 @@
QUIQQER Timeline
========
Timline and roadmap for your project.
This package provides a collection of templates designed
for easy creation of visually appealing timelines and roadmaps,
making it simple to showcase progress, project stages, and historical events.
Package Name:
......@@ -11,8 +13,10 @@ Package Name:
Features
--------
- Timline template with content and icon (image)
- Responsive
- Timeline template with content and icon (image)
- Timelines templates are responsive
- Site type "Timeline". The page will list all its subpages in the form of a timeline
- Brick "Timeline". You can show selected sites as entries in the timeline.
Installation
......
locale.xml
+ 24
− 33
Zeige Datei @ 93bbf17d
......@@ -4,30 +4,20 @@
<locale name="package.title">
<de><![CDATA[QUIQQER - Timeline]]></de>
<en><![CDATA[QUIQQER - Timeline]]></en>
<en><![CDATA[QUIQQER - Linia czasu]]></en>
</locale>
<locale name="package.description" html="true">
<de><![CDATA[
Das Paket ermöglicht das einfache Erstellen von Timelines oder Roadmaps.
]]></de>
<en><![CDATA[
The package allows you to easily create timelines or roadmaps.
]]></en>
<pl><![CDATA[
Za pomocą tego rozszerzenia możliwe jest szybie i proste dodanie do Twojego projekt dtzw. linni czasu albo "road map".
]]></pl>
<de><![CDATA[Das Paket ermöglicht das einfache Erstellen von Timelines oder Roadmaps.]]></de>
<en><![CDATA[This package contains templates for easily creating timelines and roadmaps.]]></en>
</locale>
<!-- timeline -->
<locale name="admin.types.timeline">
<de><![CDATA[Timeline]]></de>
<en><![CDATA[Timeline]]></en>
<pl><![CDATA[Linnia czasu]]></pl>
</locale>
<locale name="admin.types.timeline.desc">
<de><![CDATA[Die Seite wird alle ihre Unterseite in Form von einer Timeline auflisten. Um gutes Ergebnis zu bekommen ist es notwendig, jede Unterseite mit Titel, Kurzbeschreibung und einer Icon bzw. Seitenbild zu versehen.]]></de>
<en><![CDATA[This site type will list all of its subpages in the form of a timline. It is necessary to add a title, short description and an icon or page image to each subpage.]]></en>
<pl><![CDATA[Ta strona wylistuje wszystkie jej podstrony w formie tzw. linni czasowej. Żeby uzyskać najlepszy efekt, musisz ustawić każdej stronie tytuł, krótki opis oraz ikonę lub obrazek.]]></pl>
<de><![CDATA[Die Seite wird alle ihre Unterseiten in Form einer Timeline auflisten. Um ein gutes Ergebnis zu erzielen, ist es notwendig, jede Unterseite mit einem Titel, einer Kurzbeschreibung und einem Icon oder Seitenbild zu versehen.]]></de>
<en><![CDATA[The page will list all its subpages in the form of a timeline. To achieve good results, it is necessary to provide each subpage with a title, a short description, and an icon or page image.]]></en>
</locale>
<!-- timeline brick -->
......@@ -37,8 +27,8 @@
</locale>
<locale name="brick.timeline.description">
<de><![CDATA[Erstelle ohne Aufwand Timelines oder Roadmaps.]]></de>
<en><![CDATA[Create timelines or roadmaps without effort.]]></en>
<de><![CDATA[Erstelle mühelos Timelines oder Roadmaps.]]></de>
<en><![CDATA[Easily create timelines or roadmaps.]]></en>
</locale>
<locale name="brick.timeline.setting.site">
<de><![CDATA[Seite(n) auswählen]]></de>
......@@ -49,6 +39,10 @@
<de><![CDATA[Bild verhalten]]></de>
<en><![CDATA[Bild mode]]></en>
</locale>
<locale name="brick.timeline.setting.imageFillMode.desc">
<de><![CDATA[Die Einstellung bezieht sich nur auf die Bilder, nicht auf die Icons]]></de>
<en><![CDATA[The setting refers only to the images, not to the icons]]></en>
</locale>
<locale name="brick.timeline.setting.imageFillMode.cover">
<de><![CDATA[Ganze Fläche füllen. Das Bild kann u.U. gestreckt werden (cover)]]></de>
<en><![CDATA[Fill entire area. The image can be stretched (cover)]]></en>
......@@ -89,7 +83,6 @@
<locale name="timeline.settings.title">
<de><![CDATA[Timeline: Einstellungen]]></de>
<en><![CDATA[Timeline: settings]]></en>
<pl><![CDATA[Timeline: ustawienia]]></pl>
</locale>
<!-- template / display -->
......@@ -99,34 +92,32 @@
<pl><![CDATA[Template]]></pl>
</locale>
<locale name="timeline.display.VerticalBothSides">
<de><![CDATA[Verticale Linnie mit Inhalt und Icon (Bild)]]></de>
<en><![CDATA[Vertical timeline wiht content and icon (image)]]></en>
<pl><![CDATA[Wertykalna linnia czasu z treścią i ikona (obrazkiem)]]></pl>
<de><![CDATA[Vertikale Linnie mit Inhalt und Icon (Bild)]]></de>
<en><![CDATA[Vertical timeline with content and icon (image)]]></en>
</locale>
<!-- show url -->
<locale name="timeline.showLinks">
<de><![CDATA[Links zu den Seiten anzeigen?]]></de>
<en><![CDATA[Show hyerlinks for each site?]]></en>
<pl><![CDATA[]]></pl>
<en><![CDATA[Show links to the pages?]]></en>
</locale>
<!-- image fit -->
<locale name="timeline.imageFit">
<de><![CDATA[Bild]]></de>
<en><![CDATA[Image]]></en>
<!-- image fill mode -->
<locale name="timeline.setting.imageFillMode">
<de><![CDATA[Bild verhalten]]></de>
<en><![CDATA[Bild mode]]></en>
</locale>
<locale name="timeline.imageFit.desc">
<locale name="timeline.setting.imageFillMode.desc">
<de><![CDATA[Die Einstellung bezieht sich nur auf die Bilder, nicht auf die Icons]]></de>
<en><![CDATA[The setting refers only to the images, not to the icons]]></en>
</locale>
<locale name="timeline.imageFit.original">
<de><![CDATA[Original]]></de>
<en><![CDATA[Original]]></en>
<locale name="timeline.setting.imageFillMode.cover">
<de><![CDATA[Ganze Fläche füllen. Das Bild kann u.U. gestreckt werden (cover)]]></de>
<en><![CDATA[Fill entire area. The image can be stretched (cover)]]></en>
</locale>
<locale name="timeline.imageFit.cover">
<de><![CDATA[Decken (Bild kann gestreckt werden)]]></de>
<en><![CDATA[Cover (image can be stretched)]]></en>
<locale name="timeline.setting.imageFillMode.contain">
<de><![CDATA[Ganzes Bild anzeigen (contain)]]></de>
<en><![CDATA[Show full image (contain)]]></en>
</locale>
<!-- counter text -->
......
site.xml
+ 9
− 9
Zeige Datei @ 93bbf17d
......@@ -12,8 +12,8 @@
<!-- list attributes -->
<attributes>
<attribute default="VerticalBothSides">quiqqer.timeline.display</attribute>
<attribute default="1">quiqqer.timeline.showLinks</attribute>
<attribute default="original">quiqqer.timeline.imageFit</attribute>
<attribute default="0">quiqqer.timeline.showLinks</attribute>
<attribute default="cover">quiqqer.timeline.imageFillMode</attribute>
</attributes>
<!-- list settings -->
......@@ -44,23 +44,23 @@
</text>
</input>
<select conf="quiqqer.timeline.imageFit">
<select conf="quiqqer.timeline.imageFillMode">
<text>
<locale group="quiqqer/timeline"
var="timeline.imageFit"/>
var="timeline.setting.imageFillMode"/>
</text>
<description>
<locale group="quiqqer/timeline"
var="timeline.imageFit.desc"/>
var="timeline.setting.imageFillMode.desc"/>
</description>
<option value="original">
<option value="cover">
<locale group="quiqqer/timeline"
var="timeline.imageFit.original"/>
var="timeline.setting.imageFillMode.cover"/>
</option>
<option value="cover">
<option value="contain">
<locale group="quiqqer/timeline"
var="timeline.imageFit.cover"/>
var="timeline.setting.imageFillMode.contain"/>
</option>
</select>
......
src/QUI/Timeline/Bricks/Timeline.html
+ 1
− 1
Zeige Datei @ 93bbf17d
......@@ -11,5 +11,5 @@
{/if}
<div class="control-template">
{$timelineHtml}
{$TimelineControl->create()}
</div>
src/QUI/Timeline/Bricks/Timeline.php
+ 11
− 12
Zeige Datei @ 93bbf17d
......@@ -49,27 +49,26 @@ public function getBody(): string
$limit = $this->getAttribute('limit');
if ($limit === '') {
if (!$limit || $limit < 1) {
$limit = 10;
}
if ($limit <= 0) {
$limit = 1;
}
$attributes = [
'parentInputList' => $this->getAttribute('site'),
'imageFillMode' => $this->getAttribute('imageFillMode'),
'order' => $this->getAttribute('order'),
'showLinks' => $this->getAttribute('showLinks'),
'display' => $this->getAttribute('template'),
'limit' => $limit,
];
$Control->setAttribute('parentInputList', $this->getAttribute('site'));
$Control->setAttribute('imageFillMode', $this->getAttribute('imageFillMode'));
$Control->setAttribute('order', $this->getAttribute('order'));
$Control->setAttribute('showLinks', $this->getAttribute('showLinks'));
$Control->setAttribute('display', $this->getAttribute('template'));
$Control->setAttribute('limit', $limit);
$html = $Control->create();
$Control->setAttributes($attributes);
$this->addCSSFiles($Control->getCSSFiles());
$options = [
'this' => $this,
'timelineHtml' => $html
'TimelineControl' => $Control
];
$Engine->assign($options);
......
src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
+ 17
− 56
Zeige Datei @ 93bbf17d
......@@ -25,7 +25,7 @@
.timeline-entry-icon-wrapper {
color: #aaa;
font-size: 53px;
border: 8px solid #aaa;
border: 8px solid var(--_qui-timeline-timeline__borderColor);
text-align: center;
height: 120px;
width: 120px;
......@@ -48,7 +48,7 @@
border-right: none;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-left: 30px solid #aaa;
border-left: 30px solid var(--_qui-timeline-timeline__borderColor);
}
/* image */
......@@ -62,11 +62,10 @@
justify-content: center;
}
.timeline-entry-icon-wrapper picture img.image-fit-cover {
object-fit: cover;
.timeline-entry__image {
object-fit: var(--_qui-timeline-timeline-imageFillMode);
width: 100%;
height: 100%;
}
/* line - middle */
......@@ -96,7 +95,7 @@
height: 12px;
background: none;
border-radius: 16px;
border: 2px solid #999;
border: 2px solid var(--_qui-timeline-timeline__borderColor);
}
.timeline-entry-line-caption-number {
......@@ -111,7 +110,6 @@
position: relative;
}
/* text content */
.timeline-entry-desc {
padding-left: 40px;
......@@ -133,10 +131,7 @@
font-size: 16px;
}
/* nth child */
/*************/
.timeline-entry:nth-child(2n+2) .timeline-entry-desc {
order: 1;
padding-left: 0;
......@@ -150,7 +145,7 @@
.timeline-entry:nth-child(2n+2) .timeline-entry-icon-wrapper:after {
right: auto;
left: -30px;
border-right: 30px solid #aaa;
border-right: 30px solid var(--_qui-timeline-timeline__borderColor);
border-left: none;
}
......@@ -165,62 +160,28 @@
content: '';
}
/* FARBEN */
/* 1 */
.timeline-entry:nth-child(5n+1) .timeline-entry-icon-wrapper,
.timeline-entry:nth-child(5n+1) .timeline-entry-line-caption:after {
border-color: lightcoral;
}
.timeline-entry:nth-child(5n+1) .timeline-entry-icon-wrapper:after {
border-left-color: lightcoral;
border-right-color: lightcoral;
/* colors */
.timeline-entry:nth-child(5n+1) {
--_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #f08080);
}
/* 2 */
.timeline-entry:nth-child(5n+2) .timeline-entry-icon-wrapper,
.timeline-entry:nth-child(5n+2) .timeline-entry-line-caption:after {
border-color: lightblue;
}
.timeline-entry:nth-child(5n+2) .timeline-entry-icon-wrapper:after {
border-left-color: lightblue;
border-right-color: lightblue;
.timeline-entry:nth-child(5n+2) {
--_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #add8e6);
}
/* 3 */
.timeline-entry:nth-child(5n+3) .timeline-entry-icon-wrapper,
.timeline-entry:nth-child(5n+3) .timeline-entry-line-caption:after {
border-color: lightsalmon;
}
.timeline-entry:nth-child(5n+3) .timeline-entry-icon-wrapper:after {
border-left-color: lightsalmon;
border-right-color: lightsalmon;
.timeline-entry:nth-child(5n+3) {
--_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #ffa07a);
}
/* 4 */
.timeline-entry:nth-child(5n+4) .timeline-entry-icon-wrapper,
.timeline-entry:nth-child(5n+4) .timeline-entry-line-caption:after {
border-color: lightseagreen;
}
.timeline-entry:nth-child(5n+4) .timeline-entry-icon-wrapper:after {
border-left-color: lightseagreen;
border-right-color: lightseagreen;
.timeline-entry:nth-child(5n+4) {
--_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #1fb2aa);
}
/* 5 */
.timeline-entry:nth-child(5n+5) .timeline-entry-icon-wrapper,
.timeline-entry:nth-child(5n+5) .timeline-entry-line-caption:after {
border-color: yellowgreen;
}
.timeline-entry:nth-child(5n+5) .timeline-entry-icon-wrapper:after {
border-left-color: yellowgreen;
border-right-color: yellowgreen;
.timeline-entry:nth-child(5n+5) {
--_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #9acd32);
}
/***************/
/* media query */
/***************/
@media screen and (max-width: 767px) {
.timeline-entry:nth-child(2n+2) .timeline-entry-desc {
order: 3;
......
src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
+ 1
− 6
Zeige Datei @ 93bbf17d
......@@ -26,18 +26,13 @@
itemtype="{$this->getAttribute('child-itemtype')}"
class="timeline-entry"
>
{assign var=imageFitClass value=''}
{if $imageFit == 'cover'}
{assign var=imageFitClass value='image-fit-cover'}
{/if}
<!-- Entry Icon -->
<div class="timeline-entry-icon">
{if $Child->getAttribute('image_site')}
<div class="timeline-entry-icon-wrapper">
{image src=$Child->getAttribute('image_site') max-width="500" max-height="500" type="resize"
title="{$Child->getAttribute('title')}"
class="$imageFitClass"}
class="timeline-entry__image"}
</div>
{/if}
</div>
......
src/QUI/Timeline/Controls/Timeline.php
+ 37
− 16
Zeige Datei @ 93bbf17d
......@@ -7,6 +7,7 @@
namespace QUI\Timeline\Controls;
use QUI;
use QUI\Exception;
use QUI\Projects\Site\Utils;
/**
......@@ -56,21 +57,13 @@ public function getBody(): string
$Engine = QUI::getTemplateManager()->getEngine();
$Site = $this->getSite();
$Project = $this->getProject();
$limit = $this->getAttribute('limit');
if (!$Site && !$this->getAttribute('parentInputList')) {
return '';
}
if (!$limit) {
$limit = 10;
}
$parents = $this->getAttribute('parentInputList');
if (!$parents) {
$parents = $Site->getId();
}
$limit = $this->getAttribute('limit') ?: 10;
$parents = $this->getAttribute('parentInputList') ?: $Site->getId();
// only active sites
$where['active'] = 1;
......@@ -100,6 +93,10 @@ public function getBody(): string
'imageFit' => $this->getAttribute('imageFillMode')
]);
if ($this->getAttribute('imageFillMode')) {
$this->setCustomVariable('imageFillMode', $this->getAttribute('imageFillMode'));
}
// load custom template (if set)
if (
$this->getAttribute('displayTemplate')
......@@ -115,19 +112,19 @@ public function getBody(): string
return $Engine->fetch($this->getAttribute('displayTemplate'));
}
// Load default template
$cssFile = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.css';
$templateFile = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.html';
// template
$css = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.css';
$template = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.html';
$this->addCSSFile($css);
$this->addCSSFile($cssFile);
return $Engine->fetch($template);
return $Engine->fetch($templateFile);
}
/**
* @return null|QUI\Projects\Site
* @throws Exception
*/
protected function getSite(): ?QUI\Interfaces\Projects\Site
{
......@@ -141,4 +138,28 @@ protected function getSite(): ?QUI\Interfaces\Projects\Site
return $Site;
}
/**
* Set custom css variable to the control as inline style
* --_qui-timeline-timeline-$name: var(--qui-timeline-timeline-$name, $value);
*
* Example:
* --_qui-timeline-timeline-imageFillMode: var(--qui-timeline-timeline-imageFillMode, 'cover');
*
* @param string $name
* @param string $value
*
* @return void
*/
private function setCustomVariable(string $name, string $value): void
{
if (!$name || !$value) {
return;
}
$this->setStyle(
'--_qui-timeline-timeline-' . $name,
'var(--qui-timeline-timeline-' . $name . ', ' . $value . ')'
);
}
}
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab