Commit fc763bd4 authored by Benjamin Kott's avatar Benjamin Kott Committed by Benni Mack
Browse files

[TASK] Use @typo3/icons within PageActions

Resolves: #95353
Releases: master
Change-Id: Ibce6c125438a6dcd73295069d6cea45dd3d4ebae
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/71234

Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 07cd70ee
......@@ -80,7 +80,6 @@
@import "typo3/element_docheader";
@import "typo3/element_message";
@import "typo3/element_slider";
@import "typo3/element_spinner";
@import "typo3/element_tab";
@import "typo3/element_table";
@import "typo3/element_tooltip";
......
......@@ -22,6 +22,12 @@ $checkbox-focus-border: 1px solid rgba(0, 0, 0, 0.45);
opacity: 1;
}
.form-check-spinner {
float: left;
margin-left: $form-check-padding-start * -1;
margin-top: ($line-height-base - $form-check-input-width) * 0.5;
}
&.form-check-type-icon-toggle {
.form-check-input {
opacity: 0;
......
//
// Animated spinner icon
//
// definition is taken from _forms.scss of Bootstrap
span.checkbox-spinner {
position: absolute;
margin-left: -20px;
margin-top: 4px;
}
......@@ -11,10 +11,11 @@
* The TYPO3 project - inspiring people to share!
*/
import {KeyTypesEnum} from './Enum/KeyTypes';
import { KeyTypesEnum } from './Enum/KeyTypes';
import $ from 'jquery';
import PersistentStorage = require('./Storage/Persistent');
import NewContentElement = require('./Wizard/NewContentElement');
import 'TYPO3/CMS/Backend/Element/IconElement';
enum IdentifierEnum {
pageTitle = '.t3js-title-inlineedit',
......@@ -75,14 +76,14 @@ class PageActions {
const $editActionLink = $(
'<button type="button" class="btn btn-link" aria-label="' + TYPO3.lang.editPageTitle + '" data-action="edit">' +
'<span class="t3-icon fa fa-pencil"></span>' +
'<typo3-backend-icon identifier="actions-open" size="small"></typo3-backend-icon>' +
'</button>'
);
$editActionLink.on('click', (): void => {
this.editPageTitle();
});
this.$pageTitle
.on('dblclick', (): void => {
.on('dblclick', (): void => {
this.editPageTitle();
})
.append($editActionLink);
......@@ -111,7 +112,7 @@ class PageActions {
const $hiddenElements = $(IdentifierEnum.hiddenElements);
// show a spinner to show activity
const $spinner = $('<span />', {class: 'checkbox-spinner fa fa-circle-o-notch fa-spin'});
const $spinner = $('<span class="form-check-spinner"><typo3-backend-icon identifier="spinner-circle" size="auto"></typo3-backend-icon></span>');
$me.hide().after($spinner);
if ($me.prop('checked')) {
......@@ -132,14 +133,14 @@ class PageActions {
private editPageTitle(): void {
const $inputFieldWrap = $(
'<form class="t3js-title-edit-form">' +
'<div class="form-group">' +
'<div class="input-group input-group-lg">' +
'<input class="form-control t3js-title-edit-input">' +
'<button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> ' +
'<button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> ' +
'</div>' +
'</div>' +
'</form>',
'<div class="form-group">' +
'<div class="input-group input-group-lg">' +
'<input class="form-control t3js-title-edit-input">' +
'<button class="btn btn-default" type="button" data-action="submit"><typo3-backend-icon identifier="actions-save" size="small"></typo3-backend-icon></button> ' +
'<button class="btn btn-default" type="button" data-action="cancel"><typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon></button> ' +
'</div>' +
'</div>' +
'</form>',
),
$inputField = $inputFieldWrap.find('input');
......@@ -192,7 +193,7 @@ class PageActions {
$inputFieldWrap.find('button').addClass('disabled');
$field.attr('disabled', 'disabled');
let parameters: {[k: string]: any} = {};
let parameters: { [k: string]: any } = {};
let recordUid;
if (this.pageOverlayId > 0) {
......@@ -203,7 +204,7 @@ class PageActions {
parameters.data = {};
parameters.data.pages = {};
parameters.data.pages[recordUid] = {title: $field.val()};
parameters.data.pages[recordUid] = { title: $field.val() };
require(['TYPO3/CMS/Backend/AjaxDataHandler'], (DataHandler: any): void => {
DataHandler.process(parameters).then((): void => {
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};define(["require","exports","./Enum/KeyTypes","jquery","./Storage/Persistent","./Wizard/NewContentElement"],(function(t,e,i,a,n,l){"use strict";var s;a=__importDefault(a),function(t){t.pageTitle=".t3js-title-inlineedit",t.hiddenElements=".t3js-hidden-record",t.newButton=".t3js-toggle-new-content-element-wizard"}(s||(s={}));return new class{constructor(){this.pageId=0,this.pageOverlayId=0,this.$pageTitle=null,this.$showHiddenElementsCheckbox=null,a.default(()=>{this.initializeElements(),this.initializeEvents(),this.initializeNewContentElementWizard(),this.initializePageTitleRenaming()})}setPageId(t){this.pageId=t}setLanguageOverlayId(t){this.pageOverlayId=t}initializePageTitleRenaming(){if(!a.default.isReady)return void a.default(()=>{this.initializePageTitleRenaming()});if(this.pageId<=0)return;const t=a.default('<button type="button" class="btn btn-link" aria-label="'+TYPO3.lang.editPageTitle+'" data-action="edit"><span class="t3-icon fa fa-pencil"></span></button>');t.on("click",()=>{this.editPageTitle()}),this.$pageTitle.on("dblclick",()=>{this.editPageTitle()}).append(t)}initializeElements(){this.$pageTitle=a.default(s.pageTitle+":first"),this.$showHiddenElementsCheckbox=a.default("#checkTt_content_showHidden")}initializeEvents(){this.$showHiddenElementsCheckbox.on("change",this.toggleContentElementVisibility)}toggleContentElementVisibility(t){const e=a.default(t.currentTarget),i=a.default(s.hiddenElements),l=a.default("<span />",{class:"checkbox-spinner fa fa-circle-o-notch fa-spin"});e.hide().after(l),e.prop("checked")?i.slideDown():i.slideUp(),n.set("moduleData.web_layout.tt_content_showHidden",e.prop("checked")?"1":"0").done(()=>{l.remove(),e.show()})}editPageTitle(){const t=a.default('<form class="t3js-title-edit-form"><div class="form-group"><div class="input-group input-group-lg"><input class="form-control t3js-title-edit-input"><button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> <button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> </div></div></form>'),e=t.find("input");t.find('[data-action="cancel"]').on("click",()=>{t.replaceWith(this.$pageTitle),this.initializePageTitleRenaming()}),t.find('[data-action="submit"]').on("click",()=>{const i=e.val().trim();""!==i&&this.$pageTitle.text()!==i?this.saveChanges(e):t.find('[data-action="cancel"]').trigger("click")}),e.parents("form").on("submit",t=>(t.preventDefault(),!1));const n=this.$pageTitle;n.children().last().remove(),n.replaceWith(t),e.val(n.text()).focus(),e.on("keydown",e=>{switch(e.which){case i.KeyTypesEnum.ENTER:t.find('[data-action="submit"]').trigger("click");break;case i.KeyTypesEnum.ESCAPE:t.find('[data-action="cancel"]').trigger("click")}})}saveChanges(e){const i=e.parents("form.t3js-title-edit-form");i.find("button").addClass("disabled"),e.attr("disabled","disabled");let a,n={};a=this.pageOverlayId>0?this.pageOverlayId:this.pageId,n.data={},n.data.pages={},n.data.pages[a]={title:e.val()},t(["TYPO3/CMS/Backend/AjaxDataHandler"],t=>{t.process(n).then(()=>{i.find("[data-action=cancel]").trigger("click"),this.$pageTitle.text(e.val()),this.initializePageTitleRenaming(),top.document.dispatchEvent(new CustomEvent("typo3:pagetree:refresh"))}).catch(()=>{i.find("[data-action=cancel]").trigger("click")})})}initializeNewContentElementWizard(){Array.from(document.querySelectorAll(s.newButton)).forEach(t=>{t.classList.remove("disabled")}),a.default(s.newButton).on("click",t=>{t.preventDefault();const e=a.default(t.currentTarget);l.wizard(e.attr("href"),e.data("title"))})}}}));
\ No newline at end of file
var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};define(["require","exports","./Enum/KeyTypes","jquery","./Storage/Persistent","./Wizard/NewContentElement","TYPO3/CMS/Backend/Element/IconElement"],(function(t,e,i,n,a,l){"use strict";var s;n=__importDefault(n),function(t){t.pageTitle=".t3js-title-inlineedit",t.hiddenElements=".t3js-hidden-record",t.newButton=".t3js-toggle-new-content-element-wizard"}(s||(s={}));return new class{constructor(){this.pageId=0,this.pageOverlayId=0,this.$pageTitle=null,this.$showHiddenElementsCheckbox=null,n.default(()=>{this.initializeElements(),this.initializeEvents(),this.initializeNewContentElementWizard(),this.initializePageTitleRenaming()})}setPageId(t){this.pageId=t}setLanguageOverlayId(t){this.pageOverlayId=t}initializePageTitleRenaming(){if(!n.default.isReady)return void n.default(()=>{this.initializePageTitleRenaming()});if(this.pageId<=0)return;const t=n.default('<button type="button" class="btn btn-link" aria-label="'+TYPO3.lang.editPageTitle+'" data-action="edit"><typo3-backend-icon identifier="actions-open" size="small"></typo3-backend-icon></button>');t.on("click",()=>{this.editPageTitle()}),this.$pageTitle.on("dblclick",()=>{this.editPageTitle()}).append(t)}initializeElements(){this.$pageTitle=n.default(s.pageTitle+":first"),this.$showHiddenElementsCheckbox=n.default("#checkTt_content_showHidden")}initializeEvents(){this.$showHiddenElementsCheckbox.on("change",this.toggleContentElementVisibility)}toggleContentElementVisibility(t){const e=n.default(t.currentTarget),i=n.default(s.hiddenElements),l=n.default('<span class="form-check-spinner"><typo3-backend-icon identifier="spinner-circle" size="auto"></typo3-backend-icon></span>');e.hide().after(l),e.prop("checked")?i.slideDown():i.slideUp(),a.set("moduleData.web_layout.tt_content_showHidden",e.prop("checked")?"1":"0").done(()=>{l.remove(),e.show()})}editPageTitle(){const t=n.default('<form class="t3js-title-edit-form"><div class="form-group"><div class="input-group input-group-lg"><input class="form-control t3js-title-edit-input"><button class="btn btn-default" type="button" data-action="submit"><typo3-backend-icon identifier="actions-save" size="small"></typo3-backend-icon></button> <button class="btn btn-default" type="button" data-action="cancel"><typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon></button> </div></div></form>'),e=t.find("input");t.find('[data-action="cancel"]').on("click",()=>{t.replaceWith(this.$pageTitle),this.initializePageTitleRenaming()}),t.find('[data-action="submit"]').on("click",()=>{const i=e.val().trim();""!==i&&this.$pageTitle.text()!==i?this.saveChanges(e):t.find('[data-action="cancel"]').trigger("click")}),e.parents("form").on("submit",t=>(t.preventDefault(),!1));const a=this.$pageTitle;a.children().last().remove(),a.replaceWith(t),e.val(a.text()).focus(),e.on("keydown",e=>{switch(e.which){case i.KeyTypesEnum.ENTER:t.find('[data-action="submit"]').trigger("click");break;case i.KeyTypesEnum.ESCAPE:t.find('[data-action="cancel"]').trigger("click")}})}saveChanges(e){const i=e.parents("form.t3js-title-edit-form");i.find("button").addClass("disabled"),e.attr("disabled","disabled");let n,a={};n=this.pageOverlayId>0?this.pageOverlayId:this.pageId,a.data={},a.data.pages={},a.data.pages[n]={title:e.val()},t(["TYPO3/CMS/Backend/AjaxDataHandler"],t=>{t.process(a).then(()=>{i.find("[data-action=cancel]").trigger("click"),this.$pageTitle.text(e.val()),this.initializePageTitleRenaming(),top.document.dispatchEvent(new CustomEvent("typo3:pagetree:refresh"))}).catch(()=>{i.find("[data-action=cancel]").trigger("click")})})}initializeNewContentElementWizard(){Array.from(document.querySelectorAll(s.newButton)).forEach(t=>{t.classList.remove("disabled")}),n.default(s.newButton).on("click",t=>{t.preventDefault();const e=n.default(t.currentTarget);l.wizard(e.attr("href"),e.data("title"))})}}}));
\ No newline at end of file
Markdown is supported
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