Improved: Extension manager: new style (#4181)

* new HTML structure. Delete-button moved to slider

* Base template

* dark templates

* fix the position of the circle

* fixed HTML

* fix for netsurf

* Netsurf 2: check if it works

* fix phps

* Update details.phtml

* themes

* fix code smell

* Update adark.rtl.css

* Update dark.rtl.css

* fix code smell

* fix code smell

* fix empty line

* readonly mode

* Update template.rtl.css

* Update details.phtml

* Update disabled-light.svg

* optimized SVG files

* Update app/views/helpers/extension/details.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

3 files changed, 52 insertions, 31 deletions

diff --git a/app/views/extension/index.phtml b/app/views/extension/index.phtml
index ba789bebd..706d238e5 100644
--- a/app/views/extension/index.phtml
+++ b/app/views/extension/index.phtml
@@ -9,25 +9,33 @@
 	</div>
 
 	<h1><?= _t('admin.extensions.title') ?></h1>
-	<h2><?= _t('admin.extensions.system') ?></h2>
 	<form id="form-extension" method="post">
 	<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
-	<?php if (!empty($this->extension_list['system'])) {
+	<?php if (!empty($this->extension_list['system'])) { ?>
+	<h2><?= _t('admin.extensions.system') ?></h2>
+	<ul class="manage-list">
+	<?php
 		foreach ($this->extension_list['system'] as $ext) {
-			$this->ext_details = $ext;
-			$this->renderHelper('extension/details');
-		}
-	?>
+			$this->ext_details = $ext; ?>
+			<li>
+			<?php $this->renderHelper('extension/details'); ?>
+			</li>
+		<?php } ?>
+	</ul>
 	<?php } ?>
 
 	<?php if (!empty($this->extension_list['user'])) { ?>
 	<h2><?= _t('admin.extensions.user') ?></h2>
+	<ul class="manage-list">
 	<?php
 		foreach ($this->extension_list['user'] as $ext) {
-			$this->ext_details = $ext;
-			$this->renderHelper('extension/details');
-		}
-	}
+			$this->ext_details = $ext; ?>
+			<li>
+			<?php $this->renderHelper('extension/details'); ?>
+			</li>
+		<?php } ?>
+		</ul>
+	<?php }
 
 	if (empty($this->extension_list['system']) && empty($this->extension_list['user'])) {
 	?>
diff --git a/app/views/helpers/extension/configure.phtml b/app/views/helpers/extension/configure.phtml
index ea68287b1..34da8a535 100644
--- a/app/views/helpers/extension/configure.phtml
+++ b/app/views/helpers/extension/configure.phtml
@@ -7,6 +7,17 @@
 
 	<p class="alert alert-warn"><?= $this->extension->getDescription() ?> — <?= _t('gen.short.by_author'), ' ', $this->extension->getAuthor() ?></p>
 
+	<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
+	<form id="form-extension" method="post">
+		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
+		<div class="form-group form-actions">
+			<div class="group-controls">		
+				<button class="btn btn-attention confirm" form="form-extension" formaction="<?= _url('extension', 'remove', 'e', urlencode($this->extension->getName())) ?>"><?= _t('gen.action.remove') ?></button>
+			</div>
+		</div>
+	</form>
+	<?php } ?>
+
 	<h2><?= _t('gen.action.manage') ?></h2>
 	<?php
 		$configure_view = $this->extension->getConfigureView();
diff --git a/app/views/helpers/extension/details.phtml b/app/views/helpers/extension/details.phtml
index f6b361c6f..08226e86c 100644
--- a/app/views/helpers/extension/details.phtml
+++ b/app/views/helpers/extension/details.phtml
@@ -1,22 +1,24 @@
 <?php /** @var FreshRSS_View $this */ ?>
-<ul class="horizontal-list">
-	<li class="item">
-		<?php if ($this->ext_details->getType() === 'user' || FreshRSS_Auth::hasAccess('admin')) { ?>
-		<?php $name_encoded = urlencode($this->ext_details->getName()); ?>
-		<div class="stick">
-			<a class="btn open-slider" href="<?= _url('extension', 'configure', 'e', $name_encoded) ?>"><?= _i('configure') ?> <?= _t('gen.action.manage') ?></a>
-			<?php if ($this->ext_details->isEnabled()) { ?>
-			<button class="btn active" form="form-extension" formaction="<?= _url('extension', 'disable', 'e', $name_encoded) ?>"><?= _t('gen.action.disable') ?></button>
-			<?php } else { ?>
-			<button class="btn" form="form-extension" formaction="<?= _url('extension', 'enable', 'e', $name_encoded) ?>"><?= _t('gen.action.enable') ?></button>
-			<?php } ?>
-			<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
-			<button class="btn btn-attention confirm" form="form-extension" formaction="<?= _url('extension', 'remove', 'e', $name_encoded) ?>"><?= _t('gen.action.remove') ?></button>
-			<?php } ?>
-		</div>
-		<?php } else { ?>
-		<?= _t('admin.extensions.system.no_rights') ?>
-		<?php } ?>
-	</li>
-	<li class="item"><?= $this->ext_details->getName() ?></li>
-</ul>
+
+<?php
+	$name_encoded = urlencode($this->ext_details->getName());
+	$ext_enabled = $this->ext_details->isEnabled();
+	if ($ext_enabled) {
+		$button_class = ' active';
+		$name_class = '';
+		$action = 'disable';
+		$title = _t('gen.action.disable');
+	} else {
+		$button_class = '';
+		$name_class = ' disabled';
+		$action = 'enable';
+		$title = _t('gen.action.enable');
+	}
+	if ($this->ext_details->getType() === 'user' || FreshRSS_Auth::hasAccess('admin')) {?>
+	<button class="switch<?= $button_class ?>" form="form-extension" formaction="<?= _url('extension', $action, 'e', $name_encoded) ?>" title="<?= _t('gen.action.enable') ?>"></button>
+	<a class="open-slider" title="<?= _t('gen.action.manage') ?>" href="<?= _url('extension', 'configure', 'e', $name_encoded) ?>"><?= _i('configure') ?></a>
+	<span class="ext_name<?= $name_class ?>"><?= $this->ext_details->getName() ?></span>
+<?php } else { ?>
+	<button class="switch<?= $button_class ?>" title="<?= _t('admin.extensions.system.no_rights') ?>" disabled="disabled"></button>
+	<span class="ext_name<?= $name_class ?>"><?= $this->ext_details->getName() ?></span>
+<?php } ?>