Commit db5bf658 authored by Oliver Bartsch's avatar Oliver Bartsch Committed by Benni Mack
Browse files

[BUGFIX] Fix items text color in EXT:viewpage module

The text color of EXT:viewpage module options has got
the necessary contrast again. Furthermore the duplicated
"arrow-down" indicator removed, and the dropdown menu
is adapted for bootstrap 5 markup to fix padding of
dropdown items. Also a proper focus and hover state
is added.

Resolves: #93151
Releases: master
Change-Id: I13feacac9d62a62d6d6de84556dcde0eef198913
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67240


Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 48b2b052
...@@ -108,14 +108,26 @@ $viewpage-topbar-height: 40px; ...@@ -108,14 +108,26 @@ $viewpage-topbar-height: 40px;
} }
.viewpage-topbar-preset { .viewpage-topbar-preset {
button { .dropdown-toggle {
color: $viewpage-item-color;
background-color: transparent; background-color: transparent;
border: none; border: none;
padding-left: 20px;
padding-right: 20px;
span { @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, 0);
vertical-align: middle;
&.show {
outline: 0;
}
&:not(.show):hover {
background-color: $dropdown-link-hover-bg;
outline: 0;
}
&:not(.show):not(:hover):focus {
outline: 0;
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
} }
} }
} }
...@@ -128,6 +140,7 @@ $viewpage-topbar-height: 40px; ...@@ -128,6 +140,7 @@ $viewpage-topbar-height: 40px;
border: 0; border: 0;
border-bottom: 1px solid rgba($primary, 0.5); border-bottom: 1px solid rgba($primary, 0.5);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
color: $viewpage-item-color;
&:focus, &:focus,
&:hover { &:hover {
......
...@@ -11,16 +11,14 @@ ...@@ -11,16 +11,14 @@
</div> </div>
<div class="viewpage-topbar-preset"> <div class="viewpage-topbar-preset">
<span class="dropdown"> <span class="dropdown">
<button class="dropdown-toggle" type="button" id="viewpage-topbar-preset-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <button type="button" id="viewpage-topbar-preset-button" class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="t3js-viewpage-current-label"> <span class="t3js-viewpage-current-label">
{current.label} {current.label}
</span> </span>
<span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" aria-labelledby="viewpage-topbar-preset-button"> <ul class="dropdown-menu" aria-labelledby="viewpage-topbar-preset-button">
<li role="separator" class="divider"></li>
<li> <li>
<a href="#" class="t3js-preset-maximized t3js-change-preset" data-key="maximized" data-label="{f:translate(key: 'maximized')}" data-width data-height> <a href="#" class="dropdown-item t3js-preset-maximized t3js-change-preset" data-key="maximized" data-label="{f:translate(key: 'maximized')}" data-width data-height>
<span class="viewpage-preset-item"> <span class="viewpage-preset-item">
<span class="viewpage-preset-item-icon">{icons.fullscreen -> f:format.raw()}</span> <span class="viewpage-preset-item-icon">{icons.fullscreen -> f:format.raw()}</span>
<span class="viewpage-preset-item-label"> <span class="viewpage-preset-item-label">
...@@ -33,7 +31,7 @@ ...@@ -33,7 +31,7 @@
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="t3js-preset-custom t3js-change-preset" data-key="custom" data-label="{f:translate(key: 'custom')}" data-width="{custom.width}" data-height="{custom.height}"> <a href="#" class="dropdown-item t3js-preset-custom t3js-change-preset" data-key="custom" data-label="{f:translate(key: 'custom')}" data-width="{custom.width}" data-height="{custom.height}">
<span class="viewpage-preset-item"> <span class="viewpage-preset-item">
<span class="viewpage-preset-item-icon">{icons.expand -> f:format.raw()}</span> <span class="viewpage-preset-item-icon">{icons.expand -> f:format.raw()}</span>
<span class="viewpage-preset-item-label t3js-preset-custom-label"> <span class="viewpage-preset-item-label t3js-preset-custom-label">
...@@ -48,10 +46,10 @@ ...@@ -48,10 +46,10 @@
<f:for each="{presetGroups}" as="presetGroup" iteration="presetGroupIteration"> <f:for each="{presetGroups}" as="presetGroup" iteration="presetGroupIteration">
<f:if condition="{presetGroup}"> <f:if condition="{presetGroup}">
<li role="separator" class="divider"></li> <li><hr class="dropdown-divider"></li>
<f:for each="{presetGroup}" as="preset"> <f:for each="{presetGroup}" as="preset">
<li> <li>
<a href="#" class="t3js-change-preset" data-key="{preset.key}" data-label="{preset.label}" data-width="{preset.width}" data-height="{preset.height}"> <a href="#" class="dropdown-item t3js-change-preset" data-key="{preset.key}" data-label="{preset.label}" data-width="{preset.width}" data-height="{preset.height}">
<span class="viewpage-preset-item"> <span class="viewpage-preset-item">
<span class="viewpage-preset-item-icon">{icons.{preset.type} -> f:format.raw()}</span> <span class="viewpage-preset-item-icon">{icons.{preset.type} -> f:format.raw()}</span>
<span class="viewpage-preset-item-label">{preset.label}</span> <span class="viewpage-preset-item-label">{preset.label}</span>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment