Skip to content

Restyle labels as tinted pills #6767

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BurntimeX merged 7 commits into from
Nov 10, 2026
Merged

Restyle labels as tinted pills #6767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b298639
Restyle labels as tinted pills via dedicated `labelBadge` class
BurntimeX Nov 10, 2026
5343483
Switch label pills to pastel backgrounds with WCAG AA text contrast
BurntimeX Nov 10, 2026
4922b5f
Add label-only teal, lime, navy and maroon colors
BurntimeX Nov 10, 2026
724154a
Replace deprecated `labelList` markup with flex-based `labelBadgeList…
BurntimeX Nov 10, 2026
f26a579
Drop obsolete `label` class from status badges
BurntimeX Nov 10, 2026
fbf6099
Migrate label group object type availability to MultipleSelectionForm…
BurntimeX Nov 10, 2026
fe0135b
Move label group object relations into LabelGroupBuilder
BurntimeX Nov 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions com.woltlab.wcf/acpTemplateDelete.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,5 +167,6 @@
<template>mediaEditor</template>
<template>mediaListItems</template>
<template>mediaJavaScript</template>
<template>__labelGroupObjectTypes</template>
</delete>
</data>
6 changes: 3 additions & 3 deletions com.woltlab.wcf/templates/articleContentHeaderTitle.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@
{if $article->hasLabels}
<li>
{icon name='tags'}
<ul class="labelList">
<div class="labelBadgeInlineList">
{foreach from=$article->getLabels() item=label}
<li>{unsafe:$label->render()}</li>
{unsafe:$label->render()}
{/foreach}
</ul>
</div>
</li>
{/if}

Expand Down
6 changes: 3 additions & 3 deletions com.woltlab.wcf/templates/articleListItems.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@

<div class="entryCardList__item__content">
{if $article->hasLabels}
<ul class="entryCardList__item__labels labelList">
<div class="entryCardList__item__labels labelBadgeList">
{foreach from=$article->getLabels() item=label}
<li>{unsafe:$label->render()}</li>
{unsafe:$label->render()}
{/foreach}
</ul>
</div>
{/if}

<h2 class="entryCardList__item__title">
Expand Down
4 changes: 2 additions & 2 deletions com.woltlab.wcf/templates/commentList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@
</div>
<div class="comment__status">
{if $comment->isDisabled}
<span class="badge label green comment__status--disabled">{lang}wcf.message.status.disabled{/lang}</span>
<span class="badge green comment__status--disabled">{lang}wcf.message.status.disabled{/lang}</span>
{/if}

{if $commentManager->isContentAuthor($comment->getDecoratedObject())}
<span class="badge label">{lang}wcf.comment.objectAuthor{/lang}</span>
<span class="badge">{lang}wcf.comment.objectAuthor{/lang}</span>
{/if}

{event name='commentStatus'}
Expand Down
4 changes: 2 additions & 2 deletions com.woltlab.wcf/templates/commentResponseList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@
</div>
<div class="commentResponse__status">
{if $response->isDisabled}
<span class="badge label green commentResponse__status--disabled">{lang}wcf.message.status.disabled{/lang}</span>
<span class="badge green commentResponse__status--disabled">{lang}wcf.message.status.disabled{/lang}</span>
{/if}

{if $commentManager->isContentAuthor($response->getDecoratedObject())}
<span class="badge label">{lang}wcf.comment.objectAuthor{/lang}</span>
<span class="badge">{lang}wcf.comment.objectAuthor{/lang}</span>
{/if}

{event name='commentResponseStatus'}
Expand Down
2 changes: 1 addition & 1 deletion com.woltlab.wcf/templates/paidSubscriptionList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
{foreach from=$subscriptions item=subscription}
<li>
<div class="containerHeadline">
<h3>{$subscription->getTitle()} <span class="badge label">{unsafe:$subscription->getFormattedCost()}</span></h3>
<h3>{$subscription->getTitle()} <span class="badge">{unsafe:$subscription->getFormattedCost()}</span></h3>
<div class="htmlContent">{unsafe:$subscription->getFormattedDescription()}</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion com.woltlab.wcf/templates/shared_badgeColorFormField.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
*}>
</span>
{else}
<span class="labelSelection__span badge label{if $color != 'none'} {$color}{/if}">{$field->getDefaultLabelText()}</span>
<span class="labelSelection__span {$field->getPreviewClassName()}{if $color != 'none'} {$color}{/if}">{$field->getDefaultLabelText()}</span>
{/if}
</label>
</li>
Expand Down
2 changes: 1 addition & 1 deletion com.woltlab.wcf/templates/shared_multipleSelectionFormField.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<ul class="scrollableCheckboxList" id="{$field->getPrefixedId()}_list">
{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
<li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
<li data-depth="{$__fieldNestedOption[depth]}"{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
<label>
<input {*
*}type="checkbox" {*
Expand Down
4 changes: 3 additions & 1 deletion ts/WoltLabSuite/Core/Acp/Component/Label/Availability.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ function observeListItem(listItem: HTMLLIElement): void {
}

export function setup(): void {
const listItems = Array.from(document.querySelectorAll<HTMLLIElement>("#connect .structuredList li"));
const listItems = Array.from(
document.querySelectorAll<HTMLLIElement>(".labelGroupAvailability .scrollableCheckboxList > li"),
);
if (listItems.length === 0) {
return;
}
Expand Down
2 changes: 1 addition & 1 deletion ts/WoltLabSuite/Core/Acp/Ui/Option/RewriteTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ class RewriteTest {
const testFailureResults = document.getElementById("dialogRewriteTestFailureResults")!;
testFailureResults.innerHTML = results
.map((result) => {
return `<li><span class="badge label ${result.pass ? "green" : "red"}">${getPhrase(
return `<li><span class="badge ${result.pass ? "green" : "red"}">${getPhrase(
"wcf.acp.option.url_omit_index_php.test.status." + (result.pass ? "success" : "failure"),
)}</span> ${result.app}</li>`;
})
Expand Down
4 changes: 2 additions & 2 deletions ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class Label {
listItem.appendChild(span);

const label = document.createElement("span");
label.classList.add("badge", "label");
label.classList.add("labelBadge");
label.innerHTML = getPhrase("wcf.label.withoutSelection");
span.appendChild(label);
}
Expand All @@ -82,7 +82,7 @@ class Label {
listItem.appendChild(span);

const label = document.createElement("span");
label.classList.add("badge", "label");
label.classList.add("labelBadge");
label.innerHTML = getPhrase("wcf.label.none");
span.appendChild(label);
}
Expand Down
2 changes: 1 addition & 1 deletion ts/WoltLabSuite/Core/Ui/Message/Manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ class UiMessageManager implements AjaxCallbackObject {
}

badge = document.createElement("span");
badge.className = `badge label ${badgeColor} ${className}`;
badge.className = `badge ${badgeColor} ${className}`;
badge.textContent = getPhrase(phrase);

const listItem = document.createElement("li");
Expand Down
2 changes: 1 addition & 1 deletion ts/WoltLabSuite/WebComponent/woltlab-core-label-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@

#getBadge(phrase: string): string {
const badge = document.createElement("span");
badge.classList.add("badge", "label");
badge.classList.add("labelBadge");
badge.textContent = window.WoltLabLanguage.getPhrase(phrase);

return badge.outerHTML;
Expand Down
23 changes: 0 additions & 23 deletions wcfsetup/install/files/acp/templates/__labelGroupObjectTypes.tpl
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions wcfsetup/install/files/acp/templates/labelGroupAdd.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@

{unsafe:$form->getHtml()}

<script data-relocate="true">
require(["WoltLabSuite/Core/Acp/Component/Label/Availability"], ({ setup }) => {
setup();
});
</script>

{if $action == 'edit' && !$formObject->sortAlphabetically}
<script data-relocate="true">
require(["WoltLabSuite/Core/Component/ChangeShowOrder"], ({ setup }) => {
Expand Down
4 changes: 2 additions & 2 deletions wcfsetup/install/files/js/WCF.Label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,12 @@ WCF.Label.Chooser = Class.extend({
}

if (this._showWithoutSelection) {
var buttonWithoutSelection = $('<li data-label-id="-1"><span><span class="badge label">' + WCF.Language.get('wcf.label.withoutSelection') + '</span></span></li>').data('groupID', $groupID).appendTo($additionalList).click($.proxy(this._click, this));
var buttonWithoutSelection = $('<li data-label-id="-1"><span><span class="labelBadge">' + WCF.Language.get('wcf.label.withoutSelection') + '</span></span></li>').data('groupID', $groupID).appendTo($additionalList).click($.proxy(this._click, this));
blockPageScroll(buttonWithoutSelection[0]);
}

if (!$group.data('forceSelection')) {
var $buttonEmpty = $('<li data-label-id="0"><span><span class="badge label">' + WCF.Language.get('wcf.label.none') + '</span></span></li>').data('groupID', $groupID).appendTo($additionalList);
var $buttonEmpty = $('<li data-label-id="0"><span><span class="labelBadge">' + WCF.Language.get('wcf.label.none') + '</span></span></li>').data('groupID', $groupID).appendTo($additionalList);
$buttonEmpty.click($.proxy(this._click, this));
blockPageScroll($buttonEmpty[0]);
}
Expand Down
2 changes: 1 addition & 1 deletion wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Component/Label/Availability.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/RewriteTest.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Manager.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading