N°8955 Remove fixed width, add dynamic display for force uninstall menu item

Author: Timmy38

css/backoffice/layout/extension/_extension-details.scss

@@ -9,8 +9,7 @@ $ibo-extension-details--actions--button--padding-x: $ibo-button--padding-x !defa
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-
-	width: 450px;
+	width: 100%;
 }
 
 .ibo-extension-details--information {
@@ -48,4 +47,8 @@ $ibo-extension-details--actions--button--padding-x: $ibo-button--padding-x !defa
 
 .ibo-extension-details--actions > button {
 	padding: $ibo-extension-details--actions--button--padding-y $ibo-extension-details--actions--button--padding-x;
+}
+
+.ibo-extension-details--actions:has(.toggler-install:not(:disabled)) .ibo-popover-menu--section a[data-resource-id="force_uninstall"] {
+	display: none;
 }

sources/Application/UI/Base/Layout/Extension/ExtensionDetails.php

@@ -173,6 +173,7 @@ protected function InitializeToggler()
 	{
 		$this->oToggler = new Toggler();
 		$this->oToggler->SetName('ExtensionToggler');
+		$this->oToggler->AddCSSClass('toggler-install');
 	}
 
 	protected function InitializePopoverMenu()
@@ -204,7 +205,6 @@ public function AllowForceUninstall()
 			'force_uninstall',
 			'Force uninstall',
 			<<<JS
-	this.style.display = 'none';
 	this.closest('.ibo-extension-details').querySelector('input[type=checkbox]').disabled = false
 JS,
 		);

tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php

@@ -45,6 +45,8 @@
 use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Layout\Extension\ExtensionDetails;
 use Combodo\iTop\Application\UI\Base\Layout\Extension\ExtensionDetailsUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Layout\MultiColumn\Column\Column;
+use Combodo\iTop\Application\UI\Base\Layout\MultiColumn\MultiColumn;
 use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectFactory;
 use Combodo\iTop\Application\UI\Base\Layout\PageContent\PageContentFactory;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory;
@@ -625,11 +627,18 @@
 
 $oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Extensions details layout', 3));
 
+$oMultiCol = new MultiColumn();
+$oColumnLeft = new Column();
+$oColumnRight = new Column();
+$oMultiCol->AddColumn($oColumnLeft);
+$oMultiCol->AddColumn($oColumnRight);
+$oPage->AddUiBlock($oMultiCol);
+
 $oExtensionDetailInstalledFromFactory = ExtensionDetailsUIBlockFactory::MakeInstalled('itop-sample', 'My extension v2', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false,'missing' => true]);
-$oPage->AddUiBlock($oExtensionDetailInstalledFromFactory);
+$oColumnLeft->AddSubBlock($oExtensionDetailInstalledFromFactory);
 
 $oExtensionDetailInstalledWithLongTitle = ExtensionDetailsUIBlockFactory::MakeNotInstalled('itop-sample', 'My extension with a very long title', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false]);
-$oPage->AddUiBlock($oExtensionDetailInstalledWithLongTitle);
+$oColumnRight->AddSubBlock($oExtensionDetailInstalledWithLongTitle);
 $oPage->add('<hr id="page_bottom"/>');
 
 $oPage->output();