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>

20 files changed, 379 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 } ?>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 52f24b915..8106b3a46 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -205,6 +205,15 @@ a.btn {
 	box-shadow: none;
 }
 
+/*=== switches */
+.switch.active {
+	background-color: #0062b7;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 9d949f76a..f1939a7be 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -205,6 +205,15 @@ a.btn {
 	box-shadow: none;
 }
 
+/*=== switches */
+.switch.active {
+	background-color: #0062b7;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Alternative-Dark/icons/disabled-light.svg b/p/themes/Alternative-Dark/icons/disabled-light.svg
new file mode 100644
index 000000000..8542db156
--- /dev/null
+++ b/p/themes/Alternative-Dark/icons/disabled-light.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <path fill="#bebebe" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" color="#bebebe" style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" transform="translate(-41 -760)"/>
+</svg>
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index f94a26b2b..56b293f80 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -238,6 +238,20 @@ a.btn {
 	background: #801;
 }
 
+/*=== switches */
+.switch {
+	background-color: #333;
+}
+
+.switch.active {
+	background-color: #6986b2;
+}
+
+.switch::before,
+.switch:hover::before {
+	background-color: black;
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index fa7adfb06..1019c1c48 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -238,6 +238,20 @@ a.btn {
 	background: #801;
 }
 
+/*=== switches */
+.switch {
+	background-color: #333;
+}
+
+.switch.active {
+	background-color: #6986b2;
+}
+
+.switch::before,
+.switch:hover::before {
+	background-color: black;
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 3822c7c35..52200ab88 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -249,6 +249,14 @@ a.btn {
 	background: #c0392b;
 }
 
+.switch.active {
+	background-color: #2980b9;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index ff9836b6d..7fa4b4ab2 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -249,6 +249,14 @@ a.btn {
 	background: #c0392b;
 }
 
+.switch.active {
+	background-color: #2980b9;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Flat/icons/disabled-light.svg b/p/themes/Flat/icons/disabled-light.svg
new file mode 100644
index 000000000..c46f71801
--- /dev/null
+++ b/p/themes/Flat/icons/disabled-light.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" fill="#bebebe" color="#bebebe" transform="translate(-41 -760)"/>
+</svg>
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index f06dd9e8a..53fc593e7 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -1039,6 +1039,10 @@ a.btn {
 	text-shadow: 0 0 10px #666;
 }
 
+.switch.active {
+	background-color: #d18114;
+}
+
 /*=== Navigation menu (for articles) */
 #nav_entries {
 	background: linear-gradient(180deg, #222 0%, #171717 100%) #222;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 6c512caf6..7ec1e75d0 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -1039,6 +1039,10 @@ a.btn {
 	text-shadow: 0 0 10px #666;
 }
 
+.switch.active {
+	background-color: #d18114;
+}
+
 /*=== Navigation menu (for articles) */
 #nav_entries {
 	background: linear-gradient(-180deg, #222 0%, #171717 100%) #222;
diff --git a/p/themes/Swage/icons/disabled-light.svg b/p/themes/Swage/icons/disabled-light.svg
new file mode 100644
index 000000000..c46f71801
--- /dev/null
+++ b/p/themes/Swage/icons/disabled-light.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" fill="#bebebe" color="#bebebe" transform="translate(-41 -760)"/>
+</svg>
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index ab31b5de0..03b7be3b5 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -38,6 +38,14 @@ select:invalid {
 	clear: both;
 }
 
+.switch.active {
+	background-color: #0062be;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 #nav_entries, .notification, #new-article, .aside, .header > .item.title, .stick.configure-feeds {
 	width: 231px;
 }
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index ea673b91d..65aa1f3a8 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -38,6 +38,14 @@ select:invalid {
 	clear: both;
 }
 
+.switch.active {
+	background-color: #0062be;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 #nav_entries, .notification, #new-article, .aside, .header > .item.title, .stick.configure-feeds {
 	width: 231px;
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index b6111788e..0a03a80d4 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -298,6 +298,102 @@ a.btn {
 	font-weight: bold;
 }
 
+/*=== switch */
+.switch {
+	margin: 0 0.5em;
+	padding: revert;
+	position: relative;
+	width: 3.5em;
+	height: 1.75em;
+	border: 0;
+	border-radius: 1em;
+	background-color: #ccc;
+	cursor: pointer;
+	box-sizing: content-box;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/disabled.svg');
+	transition: background-position 0.5s;
+}
+
+.switch:not([disabled]):hover {
+	background-image: url('../icons/enabled.svg');
+	background-repeat: no-repeat;
+	background-position: right 7px center;
+}
+
+.switch.active {
+	background-color: rgb(133, 216, 133);
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/enabled.svg');
+}
+
+.switch.active:not([disabled]):hover {
+	background-position: left 7px center;
+	background-repeat: no-repeat;
+	background-image: url('../icons/disabled.svg');
+}
+
+@supports selector(.switch::before) {
+	.switch {
+		background-image: none;
+	}
+
+	.switch.active {
+		background-image: none;
+	}
+}
+
+/* ::before = circle */
+.switch::before {
+	content: "";
+	position: absolute;
+	left: 5px;
+	right: unset;
+	top: 0.2em;
+	width: 1.5em;
+	height: 1.5em;
+	background-color: #fff;
+	background-image: url('../icons/disabled.svg');
+	background-repeat: no-repeat;
+	background-position: center center;
+	border-radius: 50%;
+	transition: left 0.6s, right 0.6s;
+}
+
+.switch:not([disabled]):hover::before {
+	background-color: #eee;
+}
+
+.switch.active::before {
+	background-image: url('../icons/enabled.svg');
+	background-position: center center;
+	left: unset;
+	right: 5px;
+}
+
+.switch.active:not([disabled]):hover::before {
+	right: 8px;
+}
+
+/* ::after = background */
+.switch::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	width: 12px;
+	height: 12px;
+	transform: translateY(-50%);
+}
+
+.switch.active::after {
+	width: 14px;
+	height: 14px;
+	left: 8px;
+}
+
 .btn:focus-visible,
 input[type="checkbox"]:focus-visible {
 	outline: 2px solid #ccc;
@@ -337,6 +433,23 @@ input[type="checkbox"]:focus-visible {
 	display: table-cell;
 }
 
+/*=== manage-list */
+.manage-list {
+	list-style: none;
+}
+
+.manage-list li {
+	line-height: 2;
+}
+
+.manage-list li * {
+	vertical-align: middle;
+}
+
+.manage-list .disabled {
+	font-style: italic;
+}
+
 /*=== Dropdown */
 .dropdown {
 	position: relative;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index eeb4c69f5..fdf094b9c 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -298,6 +298,102 @@ a.btn {
 	font-weight: bold;
 }
 
+/*=== switch */
+.switch {
+	margin: 0 0.5em;
+	padding: revert;
+	position: relative;
+	width: 3.5em;
+	height: 1.75em;
+	border: 0;
+	border-radius: 1em;
+	background-color: #ccc;
+	cursor: pointer;
+	box-sizing: content-box;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/disabled.svg');
+	transition: background-position 0.5s;
+}
+
+.switch:not([disabled]):hover {
+	background-image: url('../icons/enabled.svg');
+	background-repeat: no-repeat;
+	background-position: left 7px center;
+}
+
+.switch.active {
+	background-color: rgb(133, 216, 133);
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/enabled.svg');
+}
+
+.switch.active:not([disabled]):hover {
+	background-position: right 7px center;
+	background-repeat: no-repeat;
+	background-image: url('../icons/disabled.svg');
+}
+
+@supports selector(.switch::before) {
+	.switch {
+		background-image: none;
+	}
+
+	.switch.active {
+		background-image: none;
+	}
+}
+
+/* ::before = circle */
+.switch::before {
+	content: "";
+	position: absolute;
+	right: 5px;
+	left: unset;
+	top: 0.2em;
+	width: 1.5em;
+	height: 1.5em;
+	background-color: #fff;
+	background-image: url('../icons/disabled.svg');
+	background-repeat: no-repeat;
+	background-position: center center;
+	border-radius: 50%;
+	transition: right 0.6s, left 0.6s;
+}
+
+.switch:not([disabled]):hover::before {
+	background-color: #eee;
+}
+
+.switch.active::before {
+	background-image: url('../icons/enabled.svg');
+	background-position: center center;
+	right: unset;
+	left: 5px;
+}
+
+.switch.active:not([disabled]):hover::before {
+	left: 8px;
+}
+
+/* ::after = background */
+.switch::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 8px;
+	width: 12px;
+	height: 12px;
+	transform: translateY(-50%);
+}
+
+.switch.active::after {
+	width: 14px;
+	height: 14px;
+	right: 8px;
+}
+
 .btn:focus-visible,
 input[type="checkbox"]:focus-visible {
 	outline: 2px solid #ccc;
@@ -337,6 +433,23 @@ input[type="checkbox"]:focus-visible {
 	display: table-cell;
 }
 
+/*=== manage-list */
+.manage-list {
+	list-style: none;
+}
+
+.manage-list li {
+	line-height: 2;
+}
+
+.manage-list li * {
+	vertical-align: middle;
+}
+
+.manage-list .disabled {
+	font-style: italic;
+}
+
 /*=== Dropdown */
 .dropdown {
 	position: relative;
diff --git a/p/themes/icons/disabled.svg b/p/themes/icons/disabled.svg
new file mode 100644
index 000000000..cc16ff83d
--- /dev/null
+++ b/p/themes/icons/disabled.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" color="#bebebe" transform="translate(-41 -760)" fill="#666"/>
+</svg>
diff --git a/p/themes/icons/enabled.svg b/p/themes/icons/enabled.svg
new file mode 100644
index 000000000..dbdcfdbc6
--- /dev/null
+++ b/p/themes/icons/enabled.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="text-indent:0;text-align:start;text-transform:none" d="m195.221 751.057-.191.943v.031c-.011.255-.128.51-.313.688l-7.635 5.726-3.802-5.726a1.014 1.014 0 0 1-.281-.72l.095-.97.905-.03c.265.001.53.094.718.282l2.901 4.21 5.662-4.21a.909.909 0 0 1 .75-.281z" color="#bebebe" transform="rotate(-16.594 -2459.23 999.346)" fill="#666"/>
+</svg>