From 822412177798ac7b0451627062c41033abbaee1f Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 29 Jul 2024 11:00:26 +0200
Subject: [PATCH] fix(AdminSettings): remove PHP template

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 css/talk-admin-settings.css           | 49 +++++++++++++++++++++++++
 lib/Settings/Admin/AdminSettings.php  |  1 +
 templates/settings/admin-settings.php | 53 ++++++---------------------
 3 files changed, 62 insertions(+), 41 deletions(-)
 create mode 100644 css/talk-admin-settings.css

diff --git a/css/talk-admin-settings.css b/css/talk-admin-settings.css
new file mode 100644
index 00000000000..9a57b6f7d85
--- /dev/null
+++ b/css/talk-admin-settings.css
@@ -0,0 +1,49 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+.settings-section-placeholder {
+	--settings-section-placeholder-header-height: 30px;
+	--settings-section-placeholder-line-height: var(--default-line-height);
+	--settings-section-placeholder-padding: 1em;
+	--settings-section-placeholder-image: linear-gradient(90deg, var(--color-placeholder-light) 65%, var(--color-placeholder-dark) 70%, var(--color-placeholder-light) 75%);
+	position: relative;
+	height: calc(2 * (7 * var(--default-grid-baseline)) + var(--settings-section-placeholder-header-height) + 3 * (var(--settings-section-placeholder-line-height) + 1em));
+}
+
+.settings-section-placeholder::before,
+.settings-section-placeholder::after {
+	content: '';
+	position: absolute;
+	inset: calc(7 * var(--default-grid-baseline));
+	background-clip: content-box;
+	background-origin: content-box;
+	animation: loading-animation 3s forwards infinite linear;
+}
+
+.settings-section-placeholder::before {
+	max-width: 300px;
+	background: var(--settings-section-placeholder-image) 0 0 / 200vw var(--settings-section-placeholder-header-height) repeat-x content-box;
+}
+
+.settings-section-placeholder::after {
+	max-width: 900px;
+	background: 
+		var(--settings-section-placeholder-image) 0 calc(var(--settings-section-placeholder-header-height) + 1em + 0 * (var(--settings-section-placeholder-line-height) + 1em)) / 200vw var(--settings-section-placeholder-line-height) repeat-x content-box,
+		var(--settings-section-placeholder-image) 0 calc(var(--settings-section-placeholder-header-height) + 1em + 1 * (var(--settings-section-placeholder-line-height) + 1em)) / 200vw var(--settings-section-placeholder-line-height) repeat-x content-box,
+		var(--settings-section-placeholder-image) 0 calc(var(--settings-section-placeholder-header-height) + 1em + 2 * (var(--settings-section-placeholder-line-height) + 1em)) / 200vw var(--settings-section-placeholder-line-height) repeat-x content-box;
+}
+
+.settings-section-placeholder + .settings-section-placeholder {
+	border-top: 1px solid var(--color-border);
+}
+
+@keyframes loading-animation {
+	0% {
+		background-position-x: 0;
+	}
+	100% {
+		background-position-x: 140vw;
+	}
+}
\ No newline at end of file
diff --git a/lib/Settings/Admin/AdminSettings.php b/lib/Settings/Admin/AdminSettings.php
index ee38c00429c..67e05de682a 100644
--- a/lib/Settings/Admin/AdminSettings.php
+++ b/lib/Settings/Admin/AdminSettings.php
@@ -62,6 +62,7 @@ public function getForm(): TemplateResponse {
 
 
 		Util::addScript('spreed', 'talk-admin-settings');
+		Util::addStyle('spreed', 'talk-admin-settings');
 
 		return new TemplateResponse('spreed', 'settings/admin-settings', [], '');
 	}
diff --git a/templates/settings/admin-settings.php b/templates/settings/admin-settings.php
index b7771b59079..40b69d8430a 100644
--- a/templates/settings/admin-settings.php
+++ b/templates/settings/admin-settings.php
@@ -10,45 +10,16 @@
 ?>
 
 <div id="admin_settings">
-	<div class="videocalls section" id="general_settings">
-		<h2><?php p($l->t('General settings')) ?></h2>
-	</div>
-
-	<div class="videocalls section" id="allowed_groups">
-		<h2><?php p($l->t('Limit to groups')) ?></h2>
-		<p class="settings-hint"><?php p($l->t('When at least one group is selected, only people of the listed groups can be part of conversations.')); ?></p>
-		<p class="settings-hint"><?php p($l->t('Guests can still join public conversations.')); ?></p>
-		<p class="settings-hint"><?php p($l->t('Users that cannot use Talk anymore will still be listed as participants in their previous conversations and also their chat messages will be kept.')); ?></p>
-	</div>
-
-	<div id="stun_server" class="videocalls section">
-		<h2><?php p($l->t('STUN servers')) ?></h2>
-		<p class="settings-hint"><?php p($l->t('A STUN server is used to determine the public IP address of participants behind a router.')); ?></p>
-
-		<div class="stun-servers">
-		</div>
-	</div>
-
-	<div id="turn_server" class="videocalls section">
-		<h2><?php p($l->t('TURN server')) ?></h2>
-		<p class="settings-hint"><?php p($l->t('The TURN server is used to proxy the traffic from participants behind a firewall.')); ?></p>
-
-		<div class="turn-servers">
-		</div>
-	</div>
-
-	<div id="signaling_server" class="videocalls section">
-		<h2><?php p($l->t('Signaling servers')) ?></h2>
-		<p class="settings-hint"><?php p($l->t('An external signaling server can optionally be used for larger installations. Leave empty to use the internal signaling server.')) ?></p>
-
-		<div class="signaling-servers">
-		</div>
-
-		<div class="signaling-secret">
-			<h4><?php p($l->t('Shared secret')) ?></h4>
-			<input type="text" id="signaling_secret"
-				   name="signaling_secret" placeholder="<?php p($l->t('Shared secret')) ?>" aria-label="<?php p($l->t('Shared secret')) ?>"/>
-		</div>
-	</div>
-
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
+	<div class="settings-section-placeholder"></div>
 </div>