[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 <a.fernandez@scripting-base.de>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/Sass/backend.scss

@@ -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";

Build/Sources/Sass/component/_checkbox.scss

@@ -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;

Build/Sources/Sass/typo3/_element_spinner.scss

-//
-// Animated spinner icon
-//
-
-// definition is taken from _forms.scss of Bootstrap
-span.checkbox-spinner {
-    position: absolute;
-    margin-left: -20px;
-    margin-top: 4px;
-}

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/PageActions.ts

@@ -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 => {

typo3/sysext/backend/Resources/Public/JavaScript/PageActions.js

@@ -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