Commit eb27260d authored by Jochen Roth's avatar Jochen Roth Committed by Christian Kuhn
Browse files

[BUGFIX] Remove duplicated caret and re-add padding

* Removes duplicated dropdown caret and use bootstraps
  css caret (gridelement inside/after and finisher)
* Fix preview mode dropdown in workspaces

Resolves: #94198
Releases: master
Change-Id: I7785f3ce21a6ee9773ebcd192b7a6abaded57273
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69266

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
parent b161b248
......@@ -283,6 +283,10 @@ $dropdown-link-disabled-color: $gray-300;
$dropdown-header-color: $gray-300;
$dropdown-caret-color: #000;
// CSS Caret
$caret-width: 0.4em;
$caret-vertical-align: $caret-width * 0.38;
// Card
$card-cap-bg: transparent;
......
......@@ -179,17 +179,17 @@ class Preview extends Workspaces {
* Adjusts the width of the preview mode selector to avoid jumping around due to different widths of the labels
*/
private adjustPreviewModeSelectorWidth(): void {
const $btnGroup = this.elements.$previewModeContainer.find('.btn-group');
const $dropDown = this.elements.$previewModeContainer.find('.dropdown-menu');
let maximumWidth = 0;
$btnGroup.addClass('open');
$dropDown.addClass('show');
this.elements.$previewModeContainer.find('li > a > span').each((_: number, el: Element): void => {
const width = $(el).width();
if (maximumWidth < width) {
maximumWidth = width;
}
});
$btnGroup.removeClass('open');
$dropDown.removeClass('show');
this.elements.$activePreviewMode.width(maximumWidth);
}
......
......@@ -10,7 +10,6 @@
<span class="btn-group t3-form-dropdown-buttons" data-identifier="inspectorEditorFormElementSelectorSplitButtonContainer">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.inspector.editor.formelement_selector.title')}">
<core:icon identifier="actions-variable-select" />
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" data-identifier="inspectorEditorFormElementSelectorSplitButtonListContainer"></ul>
......
......@@ -8,18 +8,17 @@
<div class="btn-group t3-form-dropdown-buttons" data-identifier="stageElementToolbarNewElementSplitButton">
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.stage.toolbar.new_element')}">
<core:icon identifier="actions-document-new" alternativeMarkupIdentifier="inline" />
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-no-sorting>
<a href="#" data-identifier="stageElementToolbarNewElementSplitButtonInside">
<a href="#" data-identifier="stageElementToolbarNewElementSplitButtonInside" class="dropdown-item">
<core:icon identifier="actions-form-insert-in" alternativeMarkupIdentifier="inline" />
<f:translate key="LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.stage.toolbar.new_element.inside" />
</a>
</li>
<li data-no-sorting>
<a href="#" data-identifier="stageElementToolbarNewElementSplitButtonAfter">
<a href="#" data-identifier="stageElementToolbarNewElementSplitButtonAfter" class="dropdown-item">
<core:icon identifier="actions-form-insert-after" alternativeMarkupIdentifier="inline" />
<f:translate key="LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.stage.toolbar.new_element.after" />
</a>
......
......@@ -2524,7 +2524,7 @@ define(['jquery',
Icons.states.default
).then(function(icon) {
itemTemplate = $('<li data-no-sorting>'
+ '<a href="#" data-formelement-identifier="' + nonCompositeNonToplevelFormElement.get('identifier') + '">'
+ '<a href="#" class="dropdown-item" data-formelement-identifier="' + nonCompositeNonToplevelFormElement.get('identifier') + '">'
+ '</a>'
+ '</li>');
......
......@@ -25,11 +25,11 @@
<f:then>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="t3js-active-preview-mode active-preview-mode" data-active-preview-mode="{firstPreviewMode}"><f:translate key="preview.mode{firstPreviewMode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></span> <span class="caret"></span>
<span class="t3js-active-preview-mode active-preview-mode" data-active-preview-mode="{firstPreviewMode}"><f:translate key="preview.mode{firstPreviewMode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<f:for each="{splitPreviewModes}" as="mode">
<li><a href="#" data-preview-mode="{mode}"><span><f:translate key="preview.mode{mode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></span></a></li>
<li><a href="#" class="dropdown-item" data-preview-mode="{mode}"><span><f:translate key="preview.mode{mode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></span></a></li>
</f:for>
</ul>
</div>
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","TYPO3/CMS/Backend/Enum/Severity","jquery","TYPO3/CMS/Backend/Modal","TYPO3/CMS/Backend/Utility","./Workspaces","TYPO3/CMS/Core/Event/ThrottleEvent"],(function(e,t,i,s,a,n,o,r){"use strict";var d;s=__importDefault(s),o=__importDefault(o),function(e){e.topbar="#typo3-topbar",e.workspacePanel=".workspace-panel",e.liveView="#live-view",e.stageSlider="#workspace-stage-slider",e.workspaceView="#workspace-view",e.sendToStageAction='[data-action="send-to-stage"]',e.discardAction='[data-action="discard"]',e.stageButtonsContainer=".t3js-stage-buttons",e.previewModeContainer=".t3js-preview-mode",e.activePreviewMode=".t3js-active-preview-mode",e.workspacePreview=".t3js-workspace-preview"}(d||(d={}));class l extends o.default{constructor(){super(),this.currentSlidePosition=100,this.elements={},this.updateSlidePosition=e=>{this.currentSlidePosition=parseInt(e.target.value,10),this.resizeViews()},this.renderDiscardWindow=()=>{const e=a.confirm(TYPO3.lang["window.discardAll.title"],TYPO3.lang["window.discardAll.message"],i.SeverityEnum.warning,[{text:TYPO3.lang.cancel,active:!0,btnClass:"btn-default",name:"cancel",trigger:()=>{e.modal("hide")}},{text:TYPO3.lang.ok,btnClass:"btn-warning",name:"ok"}]);e.on("button.clicked",t=>{"ok"===t.target.name&&this.sendRemoteRequest([this.generateRemoteActionsPayload("discardStagesFromPage",[TYPO3.settings.Workspaces.id]),this.generateRemoteActionsPayload("updateStageChangeButtons",[TYPO3.settings.Workspaces.id])]).then(async t=>{e.modal("hide"),this.renderStageButtons((await t.resolve())[1].result),this.elements.$workspaceView.attr("src",this.elements.$workspaceView.attr("src"))})})},this.renderSendPageToStageWindow=e=>{const t=e.currentTarget,i=t.dataset.direction;let s;if("prev"===i)s="sendPageToPreviousStage";else{if("next"!==i)throw"Invalid direction "+i+" requested.";s="sendPageToNextStage"}this.sendRemoteRequest(this.generateRemoteActionsPayload(s,[TYPO3.settings.Workspaces.id])).then(async e=>{const i=await e.resolve(),s=this.renderSendToStageWindow(i);s.on("button.clicked",e=>{if("ok"===e.target.name){const a=n.convertFormToObject(e.currentTarget.querySelector("form"));a.affects=i[0].result.affects,a.stageId=t.dataset.stageId,this.sendRemoteRequest([this.generateRemoteActionsPayload("sentCollectionToStage",[a]),this.generateRemoteActionsPayload("updateStageChangeButtons",[TYPO3.settings.Workspaces.id])]).then(async e=>{s.modal("hide"),this.renderStageButtons((await e.resolve())[1].result)})}})})},this.changePreviewMode=e=>{e.preventDefault();const t=s.default(e.currentTarget),i=this.elements.$activePreviewMode.data("activePreviewMode"),a=t.data("previewMode");this.elements.$activePreviewMode.text(t.text()).data("activePreviewMode",a),this.elements.$workspacePreview.parent().removeClass("preview-mode-"+i).addClass("preview-mode-"+a),"slider"===a?(this.elements.$stageSlider.parent().toggle(!0),this.resizeViews()):(this.elements.$stageSlider.parent().toggle(!1),"vbox"===a?this.elements.$liveView.height("100%"):this.elements.$liveView.height("50%"))},s.default(()=>{this.getElements(),this.resizeViews(),this.adjustPreviewModeSelectorWidth(),this.registerEvents()})}static getAvailableSpace(){return s.default(window).height()-s.default(d.topbar).outerHeight()}getElements(){this.elements.$liveView=s.default(d.liveView),this.elements.$workspacePanel=s.default(d.workspacePanel),this.elements.$stageSlider=s.default(d.stageSlider),this.elements.$workspaceView=s.default(d.workspaceView),this.elements.$stageButtonsContainer=s.default(d.stageButtonsContainer),this.elements.$previewModeContainer=s.default(d.previewModeContainer),this.elements.$activePreviewMode=s.default(d.activePreviewMode),this.elements.$workspacePreview=s.default(d.workspacePreview)}registerEvents(){new r("resize",()=>{this.resizeViews()},50).bindTo(window),s.default(document).on("click",d.discardAction,this.renderDiscardWindow).on("click",d.sendToStageAction,this.renderSendPageToStageWindow).on("click",".t3js-workspace-recipients-selectall",()=>{s.default(".t3js-workspace-recipient",window.top.document).not(":disabled").prop("checked",!0)}).on("click",".t3js-workspace-recipients-deselectall",()=>{s.default(".t3js-workspace-recipient",window.top.document).not(":disabled").prop("checked",!1)}),new r("input",this.updateSlidePosition,25).bindTo(document.querySelector(d.stageSlider)),this.elements.$previewModeContainer.find("[data-preview-mode]").on("click",this.changePreviewMode)}renderStageButtons(e){this.elements.$stageButtonsContainer.html(e)}resizeViews(){const e=l.getAvailableSpace(),t=-1*(this.currentSlidePosition-100),i=Math.round(Math.abs(e*t/100)),s=this.elements.$liveView.outerHeight()-this.elements.$liveView.height();this.elements.$workspacePreview.height(e),"slider"===this.elements.$activePreviewMode.data("activePreviewMode")&&this.elements.$liveView.height(i-s)}adjustPreviewModeSelectorWidth(){const e=this.elements.$previewModeContainer.find(".btn-group");let t=0;e.addClass("open"),this.elements.$previewModeContainer.find("li > a > span").each((e,i)=>{const a=s.default(i).width();t<a&&(t=a)}),e.removeClass("open"),this.elements.$activePreviewMode.width(t)}}return new l}));
\ No newline at end of file
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","TYPO3/CMS/Backend/Enum/Severity","jquery","TYPO3/CMS/Backend/Modal","TYPO3/CMS/Backend/Utility","./Workspaces","TYPO3/CMS/Core/Event/ThrottleEvent"],(function(e,t,i,s,a,n,o,r){"use strict";var d;s=__importDefault(s),o=__importDefault(o),function(e){e.topbar="#typo3-topbar",e.workspacePanel=".workspace-panel",e.liveView="#live-view",e.stageSlider="#workspace-stage-slider",e.workspaceView="#workspace-view",e.sendToStageAction='[data-action="send-to-stage"]',e.discardAction='[data-action="discard"]',e.stageButtonsContainer=".t3js-stage-buttons",e.previewModeContainer=".t3js-preview-mode",e.activePreviewMode=".t3js-active-preview-mode",e.workspacePreview=".t3js-workspace-preview"}(d||(d={}));class l extends o.default{constructor(){super(),this.currentSlidePosition=100,this.elements={},this.updateSlidePosition=e=>{this.currentSlidePosition=parseInt(e.target.value,10),this.resizeViews()},this.renderDiscardWindow=()=>{const e=a.confirm(TYPO3.lang["window.discardAll.title"],TYPO3.lang["window.discardAll.message"],i.SeverityEnum.warning,[{text:TYPO3.lang.cancel,active:!0,btnClass:"btn-default",name:"cancel",trigger:()=>{e.modal("hide")}},{text:TYPO3.lang.ok,btnClass:"btn-warning",name:"ok"}]);e.on("button.clicked",t=>{"ok"===t.target.name&&this.sendRemoteRequest([this.generateRemoteActionsPayload("discardStagesFromPage",[TYPO3.settings.Workspaces.id]),this.generateRemoteActionsPayload("updateStageChangeButtons",[TYPO3.settings.Workspaces.id])]).then(async t=>{e.modal("hide"),this.renderStageButtons((await t.resolve())[1].result),this.elements.$workspaceView.attr("src",this.elements.$workspaceView.attr("src"))})})},this.renderSendPageToStageWindow=e=>{const t=e.currentTarget,i=t.dataset.direction;let s;if("prev"===i)s="sendPageToPreviousStage";else{if("next"!==i)throw"Invalid direction "+i+" requested.";s="sendPageToNextStage"}this.sendRemoteRequest(this.generateRemoteActionsPayload(s,[TYPO3.settings.Workspaces.id])).then(async e=>{const i=await e.resolve(),s=this.renderSendToStageWindow(i);s.on("button.clicked",e=>{if("ok"===e.target.name){const a=n.convertFormToObject(e.currentTarget.querySelector("form"));a.affects=i[0].result.affects,a.stageId=t.dataset.stageId,this.sendRemoteRequest([this.generateRemoteActionsPayload("sentCollectionToStage",[a]),this.generateRemoteActionsPayload("updateStageChangeButtons",[TYPO3.settings.Workspaces.id])]).then(async e=>{s.modal("hide"),this.renderStageButtons((await e.resolve())[1].result)})}})})},this.changePreviewMode=e=>{e.preventDefault();const t=s.default(e.currentTarget),i=this.elements.$activePreviewMode.data("activePreviewMode"),a=t.data("previewMode");this.elements.$activePreviewMode.text(t.text()).data("activePreviewMode",a),this.elements.$workspacePreview.parent().removeClass("preview-mode-"+i).addClass("preview-mode-"+a),"slider"===a?(this.elements.$stageSlider.parent().toggle(!0),this.resizeViews()):(this.elements.$stageSlider.parent().toggle(!1),"vbox"===a?this.elements.$liveView.height("100%"):this.elements.$liveView.height("50%"))},s.default(()=>{this.getElements(),this.resizeViews(),this.adjustPreviewModeSelectorWidth(),this.registerEvents()})}static getAvailableSpace(){return s.default(window).height()-s.default(d.topbar).outerHeight()}getElements(){this.elements.$liveView=s.default(d.liveView),this.elements.$workspacePanel=s.default(d.workspacePanel),this.elements.$stageSlider=s.default(d.stageSlider),this.elements.$workspaceView=s.default(d.workspaceView),this.elements.$stageButtonsContainer=s.default(d.stageButtonsContainer),this.elements.$previewModeContainer=s.default(d.previewModeContainer),this.elements.$activePreviewMode=s.default(d.activePreviewMode),this.elements.$workspacePreview=s.default(d.workspacePreview)}registerEvents(){new r("resize",()=>{this.resizeViews()},50).bindTo(window),s.default(document).on("click",d.discardAction,this.renderDiscardWindow).on("click",d.sendToStageAction,this.renderSendPageToStageWindow).on("click",".t3js-workspace-recipients-selectall",()=>{s.default(".t3js-workspace-recipient",window.top.document).not(":disabled").prop("checked",!0)}).on("click",".t3js-workspace-recipients-deselectall",()=>{s.default(".t3js-workspace-recipient",window.top.document).not(":disabled").prop("checked",!1)}),new r("input",this.updateSlidePosition,25).bindTo(document.querySelector(d.stageSlider)),this.elements.$previewModeContainer.find("[data-preview-mode]").on("click",this.changePreviewMode)}renderStageButtons(e){this.elements.$stageButtonsContainer.html(e)}resizeViews(){const e=l.getAvailableSpace(),t=-1*(this.currentSlidePosition-100),i=Math.round(Math.abs(e*t/100)),s=this.elements.$liveView.outerHeight()-this.elements.$liveView.height();this.elements.$workspacePreview.height(e),"slider"===this.elements.$activePreviewMode.data("activePreviewMode")&&this.elements.$liveView.height(i-s)}adjustPreviewModeSelectorWidth(){const e=this.elements.$previewModeContainer.find(".dropdown-menu");let t=0;e.addClass("show"),this.elements.$previewModeContainer.find("li > a > span").each((e,i)=>{const a=s.default(i).width();t<a&&(t=a)}),e.removeClass("show"),this.elements.$activePreviewMode.width(t)}}return new l}));
\ No newline at end of file
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