Skip to content

[FEATURE] gray badge #125

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

Open
KlickUndKlar wants to merge 9 commits into
base: feature/show-maxitems-in-pagemodule
Choose a base branch
from
Open

[FEATURE] gray badge #125

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ee36c1b
gray badge
KlickUndKlar Feb 9, 2023
23dfe42
remove container condition
KlickUndKlar Feb 9, 2023
276fa13
Fix styling and partial issue at TYPO3 10 and 12
Abdul-Hafiz Mar 9, 2023
57d971c
Adapt fixes for TYPO3 12
Abdul-Hafiz Mar 14, 2023
505273c
Adapt fixes for TYPO3 12 -
Abdul-Hafiz Mar 14, 2023
3902cad
Adapt fixes for TYPO3 12
Abdul-Hafiz Mar 14, 2023
d1d44c8
Update GetVersionViewHelper.php
KlickUndKlar Mar 15, 2023
829fb6d
Update GetVersionViewHelper.php
KlickUndKlar Mar 15, 2023
2b2b142
[BUG] bad sign «`» in typoscript template
KlickUndKlar Aug 8, 2023
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
28 changes: 15 additions & 13 deletions Resources/Private/Partials/Backend/PageLayout/Grid/ColumnHeader.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,21 @@

<cd:extendPartial>
<f:alias map="{maxitems: '{cd:maxitems(column: column)}'}">
<div class="t3-cd-badge-container" data-maxitems="{maxitems}">
<f:switch expression="{maxitems}">
<f:case value="-1"></f:case>
<f:case value="1">
<span class="badge text-bg-warning t3-cd-badge">{maxitems}</span>
</f:case>
<f:case value="0">
<span class="badge text-bg-danger t3-cd-badge">{maxitems}</span>
</f:case>
<f:defaultCase>
<span class="badge text-bg-success t3-cd-badge">{maxitems}</span>
</f:defaultCase>
</f:switch>

<f:if condition="{maxitems} > 9">
<f:variable name="length" value="2"/>
</f:if>

<f:if condition="{maxitems} > 99">
<f:variable name="length" value="3"/>
</f:if>

<div class="t3-cd-badge-container{f:if(condition: '{length} > 1', then: ' t3-cd-badge-container-length-{length}')}" data-maxitems="{maxitems}">
<f:if condition="{maxitems} >= 0">
<span class="badge t3-cd-badge">
{f:if(condition: '{maxitems} > 99', then: '&#43;99', else: '{maxitems}')}
</span>
</f:if>
<f:render partial="PageLayout/Grid/ColumnHeader" arguments="{_all}" />
</div>
</f:alias>
Expand Down
11 changes: 10 additions & 1 deletion Resources/Private/Partials/Backend/PageLayout/Record.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,16 @@
data-namespace-typo3-fluid="true">
<cd:extendPartial>
<f:alias map="{maxitems: '{cd:maxitems(column: column)}'}">
<div class="t3-cd-badge-container" data-maxitems="{maxitems}">

<f:if condition="{maxitems} > 9">
<f:variable name="length" value="2"/>
</f:if>

<f:if condition="{maxitems} > 99">
<f:variable name="length" value="3"/>
</f:if>

<div class="t3-cd-badge-container{f:if(condition: '{length} > 1', then: ' t3-cd-badge-container-length-{length}')}" data-maxitems="{maxitems}">
<f:render partial="PageLayout/Record" arguments="{_all}" />
</div>
</f:alias>
Expand Down
45 changes: 24 additions & 21 deletions Resources/Public/Css/backend.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,37 @@
@charset "UTF-8";

.t3-cd-badge-container {
position: relative;
.t3js-page-column .t3-cd-badge-container[data-maxitems="0"] .t3-page-ce .t3js-page-new-ce,
Copy link
Owner

@IchHabRecht IchHabRecht Feb 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I understand the CSS correctly for a full column there wouldn't be any badge anymore. But one of the main purposes is to tell the editor that there is a limit and it is reached.

Copy link
Author

@KlickUndKlar KlickUndKlar Feb 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, the Line 3-12 just removes the «new content-element» Button not the badge.
Line 8-12 is a fix, to prevent the shifting of the Drop area if the button is hidden.

The badge is always visible. We just hide it if there is no maxitems property in the backendlayout configuration.

.t3js-page-column .t3-cd-badge-container[data-maxitems="0"] .t3-page-ce .t3-page-ce-dropzone {
display: none;
}

.t3-cd-badge-container[data-maxitems="0"] .t3-page-ce .t3js-page-new-ce,
.t3-cd-badge-container[data-maxitems="0"] .t3-page-ce .t3-page-ce-dropzone {
display: none;
body[style="cursor: move;"] .t3js-page-column .t3-cd-badge-container[data-maxitems="0"] .t3-page-ce .t3js-page-new-ce,
body[style="cursor: move;"].t3js-page-column .t3-cd-badge-container[data-maxitems="0"] .t3-page-ce .t3-page-ce-dropzone {
display: block;
visibility: hidden;
}

.t3-cd-badge {
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, 0);
background-color: #ff0000;
z-index: 100;
.t3-cd-badge-container:not([data-maxitems="-1"]) .t3-page-column-header {
padding-left: 25px;
}

.t3-cd-badge.text-bg-success {
background-color: #107c10;
color: #ffffff;
.t3-cd-badge-container:not([data-maxitems="-1"]).t3-cd-badge-container-length-2 .t3-page-column-header {
padding-left: 30px;
}

.t3-cd-badge.text-bg-warning {
background-color: #e8a33d;
color: #ffffff;
.t3-cd-badge-container:not([data-maxitems="-1"]).t3-cd-badge-container-length-3 .t3-page-column-header {
padding-left: 40px;
}

.t3-cd-badge.text-bg-danger {
background-color: #ff0000;
color: #ffffff;
.t3-cd-badge-container {
position: relative;
}

.t3-cd-badge {
Copy link
Owner

@IchHabRecht IchHabRecht Feb 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you tested the layout in all TYPO3 versions yet?

Copy link
Author

@KlickUndKlar KlickUndKlar Feb 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i say it in German – "verdammt – da war noch was 😳"

I keep you updated after testing

position: absolute;
z-index: 1;
left: 0;
top: 21px;
background-color: #eaeaea;
color: #000000;
}