[TASK] Cleanup impexp templates

- Migrate checkboxes to form-check - Rebuild indention of rows - Add icons to buttons - Add sections to tabs - Add missing input classes Resolves: #100561 Releases: main Change-Id: If1c7fbb62b9541404090ad5cf849e3eba9da9643 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/78596 Tested-by: Christian Kuhn <lolli@schwarzbu.ch> Tested-by: Benni Mack <benni@typo3.org> Reviewed-by: Benni Mack <benni@typo3.org> Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch> Tested-by: core-ci <typo3@b13.com>
TYPO3 · Apr 14, 2023 · d913292 · d913292
1 parent e04594b
commit d913292
Show file tree

Hide file tree

Showing 31 changed files with 1,247 additions and 1,244 deletions.
diff --git a/Build/Sources/Sass/backend.scss b/Build/Sources/Sass/backend.scss
@@ -58,6 +58,7 @@
 @import "component/resources";
 @import "component/recordsearchbox";
 @import "component/treelist";
+@import "component/indent";
 
 //
 // Elements

diff --git a/Build/Sources/Sass/component/_indent.scss b/Build/Sources/Sass/component/_indent.scss
@@ -0,0 +1,18 @@
+//
+// indent
+//
+// Examples
+// -------------
+//
+// <span class="indent" style="--indent-level: 1"></span>
+// <span class="indent indent-inline-block" style="--indent-level: 1"></span>
+//
+.indent {
+    --indent-base: 16px;
+    --indent-level: 0;
+    margin-left: calc(var(--indent-base) * var(--indent-level));
+}
+
+.indent-inline-block {
+    display: inline-block;
+}
diff --git a/Build/Sources/Sass/component/_modal.scss b/Build/Sources/Sass/component/_modal.scss
@@ -181,10 +181,6 @@ $modal-sidebar-button-space: $padding-small-vertical;
 
     .panel-body {
         border-left: 2px solid $color-orange;
-
-        label {
-            margin-bottom: $modal-sidebar-button-space;
-        }
     }
 }
 

diff --git a/Build/Sources/Sass/component/_panel.scss b/Build/Sources/Sass/component/_panel.scss
@@ -356,8 +356,4 @@ $panel-heading-bg-scale: -85%;
             margin-left: -1px;
         }
     }
-
-    label {
-        margin-bottom: 0;
-    }
 }
diff --git a/Build/Sources/Sass/component/_treelist.scss b/Build/Sources/Sass/component/_treelist.scss
@@ -159,7 +159,7 @@
 }
 
 .treelist-icon {
-    top: -2px;
+    top: -1px;
 }
 
 .treelist-show {
@@ -250,6 +250,6 @@
 //
 // Tree Variations
 //
-.panel-tab {
-    --treelist-bg: #{$nav-tabs-active-link-bg};
+.form-section {
+    --treelist-bg: #fafafa;
 }
diff --git a/Build/phpstan/phpstan-baseline.neon b/Build/phpstan/phpstan-baseline.neon
@@ -2880,11 +2880,6 @@ parameters:
 			count: 2
 			path: ../../typo3/sysext/impexp/Classes/ImportExport.php
 
-		-
-			message: "#^Offset 'updatePath' does not exist on array\\{msg\\: string, ref\\: 'FILE', type\\: 'file', preCode\\: non\\-falsy\\-string, title\\: string, showDiffContent\\: string\\}\\.$#"
-			count: 1
-			path: ../../typo3/sysext/impexp/Classes/ImportExport.php
-
 		-
 			message: "#^Unreachable statement \\- code above always terminates\\.$#"
 			count: 1

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -2872,7 +2872,6 @@ a.dropdown-toggle{text-decoration:none}
 .panel-collapse>.form-section,.panel-collapse>.tab-content>.form-section,.panel-collapse>.tab-content>.tab-pane>.form-section,.panel-collapse>[role=tabpanel]>.tab-content>.form-section,.panel-collapse>[role=tabpanel]>.tab-content>.tab-pane>.form-section,.panel>.form-section,.panel>.tab-content>.form-section,.panel>.tab-content>.tab-pane>.form-section,.panel>[role=tabpanel]>.tab-content>.form-section,.panel>[role=tabpanel]>.tab-content>.tab-pane>.form-section{border-left:0;border-right:0;border-bottom:0}
 .panel-collapse>.nav-tabs,.panel-collapse>[role=tabpanel]>.nav-tabs,.panel>.nav-tabs,.panel>[role=tabpanel]>.nav-tabs{border-top:1px solid #ccc;padding-top:8px}
 .panel-collapse>.nav-tabs>li,.panel-collapse>[role=tabpanel]>.nav-tabs>li,.panel>.nav-tabs>li,.panel>[role=tabpanel]>.nav-tabs>li{margin-left:-1px}
-.panel label,.panel-collapse label{margin-bottom:0}
 .form-check .form-check-label{margin-bottom:0}
 .form-check-input:not(:disabled),.form-check-input:not(:disabled)~.form-check-label{cursor:pointer}
 .form-check.form-check-type-labeled-toggle{display:flex;align-items:center;padding-left:0;gap:.5em}
@@ -3352,7 +3351,6 @@ to{opacity:1;transform:translate3d(0,0,0)}
 .modal-image-manipulation .panel-heading .is-active{pointer-events:none}
 .modal-image-manipulation .panel{margin-bottom:0}
 .modal-image-manipulation .panel-body{border-left:2px solid #ff8700}
-.modal-image-manipulation .panel-body label{margin-bottom:4px}
 .modal-type-iframe{padding:0}
 .modal-type-iframe .modal-body{padding:0}
 .modal-iframe{display:block;border:0;height:100%;width:100%;position:absolute;top:0;left:0}
@@ -3565,7 +3563,7 @@ typo3-backend-live-search-result-item-action>* .livesearch-result-item-title .sm
 .treelist-group-monospace{font-family:var(--typo3-font-family-monospace)}
 .treelist-operator{opacity:.5}
 .treelist-value{font-weight:700}
-.treelist-icon{top:-2px}
+.treelist-icon{top:-1px}
 .treelist-show{position:relative;display:inline-block;width:var(--treelist-control-size);text-align:center;margin-left:-2px}
 .treelist-control{position:absolute;top:calc(var(--treelist-item-line-height)/ 2);transform:translate(-50%,-50%);left:0;display:block;text-align:center;line-height:var(--treelist-control-size);width:var(--treelist-control-size);height:var(--treelist-control-size);-webkit-user-select:none;-moz-user-select:none;user-select:none}
 .treelist-control:before,.treelist-control:target:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--treelist-control-size);height:var(--treelist-control-size);background-color:var(--treelist-bg)}
@@ -3580,7 +3578,9 @@ typo3-backend-live-search-result-item-action>* .livesearch-result-item-title .sm
 .treelist-root>li>.treelist-group>.treelist-control{margin-left:calc(var(--treelist-control-size) * -1)}
 .treelist-root>li>.treelist-group>.treelist-control:before{background-color:transparent}
 .treelist-root-clean>li{padding-left:0}
-.panel-tab{--treelist-bg:#fafafa}
+.form-section{--treelist-bg:#fafafa}
+.indent{--indent-base:16px;--indent-level:0;margin-left:calc(var(--indent-base) * var(--indent-level))}
+.indent-inline-block{display:inline-block}
 typo3-backend-editable-page-title{display:block;white-space:nowrap;text-overflow:ellipsis}
 typo3-backend-new-content-element-wizard{--typo3-component-color:var(--typo3-light-color);--typo3-component-bg:var(--typo3-light-bg);--typo3-component-border-color:var(--typo3-light-border-color);--typo3-component-link-color:var(--typo3-light-link-color);--typo3-component-link-hover-color:var(--typo3-light-link-hover-color);--typo3-component-hover-color:var(--typo3-light-hover-color);--typo3-component-hover-bg:var(--typo3-light-hover-bg);--typo3-component-hover-border-color:var(--typo3-light-hover-border-color);--typo3-component-focus-color:var(--typo3-light-focus-color);--typo3-component-focus-bg:var(--typo3-light-focus-bg);--typo3-component-focus-border-color:var(--typo3-light-focus-border-color);--typo3-component-active-color:var(--typo3-light-active-color);--typo3-component-active-bg:var(--typo3-light-active-bg);--typo3-component-active-border-color:var(--typo3-light-active-border-color);--typo3-component-disabled-color:var(--typo3-light-disabled-color);--typo3-component-disabled-bg:var(--typo3-light-disabled-bg);--typo3-component-disabled-border-color:var(--typo3-light-disabled-border-color)}
 .collapse-horizontal{height:auto;width:0;vertical-align:middle;overflow:hidden}

diff --git a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php
@@ -32,7 +32,6 @@ final class ExportCest extends AbstractCest
     private string $inModuleHeader = '.module-docheader';
     private string $inModuleTabs = '#ImportExportController .nav-tabs';
     private string $inModuleTabsBody = '#ImportExportController .tab-content';
-    private string $inModulePreview = '#ImportExportController > div:last-child';
     private string $inTabConfiguration = '#export-configuration';
     private string $inFlashMessages = '.typo3-messages';
 
@@ -50,7 +49,6 @@ public function exportPageAndRecordsDisplaysTitleOfSelectedPageInModuleHeader(Ap
 
         $selectedPageTitle = 'elements t3editor';
         $selectedPageIcon = '//*[text()=\'' . $selectedPageTitle . '\']/../*[contains(@class, \'node-icon-container\')]';
-        $buttonUpdate = '.btn[value=Update]';
 
         $I->click($selectedPageIcon);
         $this->selectInContextMenu($I, [$this->contextMenuMore, $this->contextMenuExport]);
@@ -59,7 +57,7 @@ public function exportPageAndRecordsDisplaysTitleOfSelectedPageInModuleHeader(Ap
         $I->waitForElementNotVisible('#nprogress');
         $I->see($selectedPageTitle, $this->inModuleHeader);
 
-        $I->click($buttonUpdate, $this->inTabConfiguration);
+        $I->click('Update', $this->inTabConfiguration);
         $this->timeoutForAjaxRequest($I);
         $I->see($selectedPageTitle, $this->inModuleHeader);
     }
@@ -71,7 +69,6 @@ public function exportTableDisplaysTitleOfRootPageInModuleHeader(ApplicationTest
         $tableTitle = 'Form engine elements - t3editor';
         $listModuleHeader = '.module-docheader';
         $listModuleBtnExport = 'a[title="Export"]';
-        $buttonUpdate = '.btn[value=Update]';
 
         $pageTree->openPath(['styleguide TCA demo']);
         $I->waitForElement($this->inPageTree . ' .node', 5);
@@ -89,7 +86,7 @@ public function exportTableDisplaysTitleOfRootPageInModuleHeader(ApplicationTest
         $I->see($rootPageTitle, $this->inModuleHeader);
         $I->dontSee($tablePageTitle, $this->inModuleHeader);
 
-        $I->click($buttonUpdate, $this->inTabConfiguration);
+        $I->click('Update', $this->inTabConfiguration);
         $this->timeoutForAjaxRequest($I);
         $I->see($rootPageTitle, $this->inModuleHeader);
         $I->dontSee($tablePageTitle, $this->inModuleHeader);
@@ -101,7 +98,6 @@ public function exportRecordDisplaysTitleOfRootPageInModuleHeader(ApplicationTes
         $recordPageTitle = 'elements t3editor';
         $recordTable = '#recordlist-tx_styleguide_elements_t3editor';
         $recordIcon = 'tr:first-child a[data-contextmenu-trigger]';
-        $buttonUpdate = '.btn[value=Update]';
 
         $pageTree->openPath(['styleguide TCA demo']);
         $I->waitForElement($this->inPageTree . ' .node', 5);
@@ -117,7 +113,7 @@ public function exportRecordDisplaysTitleOfRootPageInModuleHeader(ApplicationTes
         $I->see($rootPageTitle, $this->inModuleHeader);
         $I->dontSee($recordPageTitle, $this->inModuleHeader);
 
-        $I->click($buttonUpdate, $this->inTabConfiguration);
+        $I->click('Update', $this->inTabConfiguration);
         $this->timeoutForAjaxRequest($I);
         $I->see($rootPageTitle, $this->inModuleHeader);
         $I->dontSee($recordPageTitle, $this->inModuleHeader);
@@ -196,8 +192,8 @@ public function exportPageAndRecordsFromPageTree(ApplicationTester $I, PageTree
         $I->waitForElementNotVisible('#nprogress');
 
         $I->cantSee('No tree exported - only tables on the page.', $this->inModuleTabsBody);
-        $I->see('Inside pagetree', $this->inModulePreview);
-        $I->dontSee('Outside pagetree', $this->inModulePreview);
+        $I->see('Inside pagetree');
+        $I->dontSee('Outside pagetree');
         $I->click($tabExport, $this->inModuleTabs);
         $I->waitForElementVisible($contentExport, 5);
         $I->click($buttonSaveToFile, $this->inModuleTabsBody);
@@ -232,8 +228,8 @@ public function exportTable(ApplicationTester $I): void
         $I->waitForElementVisible($tabExport, 5);
         $I->canSee('No tree exported - only tables on the page.', $this->inModuleTabsBody);
         $I->canSee('Export tables from pages', $this->inModuleTabsBody);
-        $I->dontSee('Inside pagetree', $this->inModulePreview);
-        $I->see('Outside pagetree', $this->inModulePreview);
+        $I->dontSee('Inside pagetree');
+        $I->see('Outside pagetree');
         $I->click($tabExport, $this->inModuleTabs);
         $I->waitForElementVisible($contentExport, 5);
         $I->click($buttonSaveToFile, $this->inModuleTabsBody);
@@ -266,8 +262,8 @@ public function exportRecord(ApplicationTester $I): void
         $I->waitForElementVisible($tabExport, 5);
         $I->canSee('No tree exported - only tables on the page.', $this->inModuleTabsBody);
         $I->canSee('Export single record', $this->inModuleTabsBody);
-        $I->dontSee('Inside pagetree', $this->inModulePreview);
-        $I->see('Outside pagetree', $this->inModulePreview);
+        $I->dontSee('Inside pagetree');
+        $I->see('Outside pagetree');
         $I->click($tabExport, $this->inModuleTabs);
         $I->waitForElementVisible($contentExport, 5);
         $I->click($buttonSaveToFile, $this->inModuleTabsBody);

diff --git a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ImportCest.php b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ImportCest.php
@@ -42,9 +42,8 @@ final class ImportCest extends AbstractCest
     private string $inputUploadFile = 'input[type=file]';
     private string $checkboxOverwriteFile = 'input#checkOverwriteExistingFiles';
     private string $buttonUploadFile = '_upload';
-    private string $buttonPreview = '.btn[value=Preview]';
     private string $buttonImport = 'button[name="tx_impexp[import_file]"]';
-    private string $buttonNewImport = 'input[name="tx_impexp[new_import]"]';
+    private string $buttonNewImport = 'button[name="tx_impexp[new_import]"]';
 
     public function _before(ApplicationTester $I, PageTree $pageTree): void
     {
@@ -76,7 +75,7 @@ public function importDisplaysTitleOfSelectedPageInModuleHeader(ApplicationTeste
         $I->switchToContentFrame();
         $I->see($pageInPageTreeTitle, $this->inModuleHeader);
 
-        $I->click($this->buttonPreview, $this->inTabImport);
+        $I->click('Preview', $this->inTabImport);
         $this->timeoutForAjaxRequest($I);
         $I->see($pageInPageTreeTitle, $this->inModuleHeader);
     }