Skip to content

Commit cfdb912

Browse files
BurntimeXBurntimeX
committed
Content interaction tabs
1 parent 4dea207 commit cfdb912

4 files changed

Lines changed: 127 additions & 8 deletions

File tree

‎com.woltlab.wcf/templates/contentInteraction.tpl‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,11 @@
2626
{/capture}
2727
{assign var='__contentInteractionShareButton' value=$__contentInteractionShareButton|trim}
2828

29-
{if $__contentInteractionPagination || $__contentInteractionButtons || $__contentInteractionDropdownItems || $__contentInteractionShareButton}
30-
<div class="contentInteraction">
31-
{if $__contentInteractionPagination}
29+
{if $contentInteractionTabsComponent|isset || $__contentInteractionPagination || $__contentInteractionButtons || $__contentInteractionDropdownItems || $__contentInteractionShareButton}
30+
<div class="contentInteraction{if $contentInteractionTabsComponent|isset} contentInteraction--withTabs{/if}">
31+
{if $contentInteractionTabsComponent|isset}
32+
{unsafe:$contentInteractionTabsComponent->render()}
33+
{elseif $__contentInteractionPagination}
3234
<div class="contentInteractionPagination paginationTop">
3335
{@$__contentInteractionPagination}
3436
</div>

‎com.woltlab.wcf/templates/shared_contentInteractionTabs.tpl‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<ul class="contentInteractionTabs">
2+
{foreach from=$tabs item='tab'}
3+
<li class="contentInteractionTab{if $tab->active} contentInteractionTab--active{/if}">
4+
<a
5+
href="{$tab->link}"
6+
class="contentInteractionTab__link"
7+
{if $tab->active} aria-current="page"{/if}
8+
>
9+
{lang}{$tab->title}{/lang}
10+
</a>
11+
</li>
12+
{/foreach}
13+
</ul>

‎wcfsetup/install/files/lib/system/view/component/ContentInteractionTabsComponent.class.php‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?php
2+
3+
namespace wcf\system\view\component;
4+
5+
use wcf\system\WCF;
6+
7+
/**
8+
* Represents the component of the tabs shown in the content interaction section.
9+
*
10+
* @author Marcel Werk
11+
* @copyright 2001-2025 WoltLab GmbH
12+
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
13+
* @since 6.2
14+
*/
15+
final class ContentInteractionTabsComponent
16+
{
17+
private array $tabs = [];
18+
19+
public function addTab(string $title, string $link, bool $active = false): void
20+
{
21+
$this->tabs[] = new ContentInteractionTab($title, $link, $active);
22+
}
23+
24+
public function render(): string
25+
{
26+
if (!$this->tabs === []) {
27+
return '';
28+
}
29+
30+
return WCF::getTPL()->render(
31+
'wcf',
32+
'shared_contentInteractionTabs',
33+
[
34+
'tabs' => $this->tabs,
35+
],
36+
);
37+
}
38+
}
39+
40+
/** @internal */
41+
final class ContentInteractionTab
42+
{
43+
public function __construct(
44+
public readonly string $title,
45+
public readonly string $link,
46+
public readonly bool $active = false,
47+
) {}
48+
}

‎wcfsetup/install/files/style/layout/content.scss‎

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -424,12 +424,7 @@ fieldset {
424424

425425
.contentInteraction {
426426
display: flex;
427-
justify-content: space-between;
428427
margin-top: 20px;
429-
430-
@include screen-xs {
431-
flex-wrap: wrap;
432-
}
433428
}
434429

435430
.contentInteractionPagination {
@@ -520,6 +515,9 @@ fieldset {
520515
}
521516

522517
.content {
518+
container-type: inline-size;
519+
container-name: content;
520+
523521
.contentInteraction + .section,
524522
.contentInteraction + form {
525523
margin-top: 20px;
@@ -571,3 +569,61 @@ fieldset {
571569
}
572570
}
573571
}
572+
573+
.contentInteraction--withTabs {
574+
border-bottom: solid 1px var(--wcfContentBorderInner);
575+
}
576+
577+
.contentInteractionTabs {
578+
display: flex;
579+
gap: 10px;
580+
}
581+
582+
.contentInteractionTab {
583+
display: flex;
584+
white-space: nowrap;
585+
}
586+
587+
.contentInteractionTab__link {
588+
display: flex;
589+
padding: 5px 10px;
590+
color: var(--wcfContentDimmedText);
591+
font-size: var(--wcfFontSizeSection);
592+
font-weight: 600;
593+
position: relative;
594+
}
595+
596+
.contentInteractionTab__link::after {
597+
content: "";
598+
left: 0;
599+
right: 0;
600+
bottom: -1px;
601+
position: absolute;
602+
height: 3px;
603+
}
604+
605+
.contentInteractionTab--active .contentInteractionTab__link {
606+
color: var(--wcfContentText);
607+
}
608+
609+
.contentInteractionTab__link:hover {
610+
color: var(--wcfContentText);
611+
}
612+
613+
.contentInteractionTab__link:hover::after {
614+
background-color: var(--wcfContentBorderInner);
615+
}
616+
617+
.contentInteractionTab--active .contentInteractionTab__link::after {
618+
background-color: var(--wcfTabularBoxHeadline);
619+
}
620+
621+
@container content (width < 800px) {
622+
.contentInteraction {
623+
flex-direction: column;
624+
}
625+
626+
.contentInteractionButtonContainer {
627+
order: -1;
628+
}
629+
}

0 commit comments

Comments
 (0)