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 @@ ?>
-
-

t('General settings')) ?>

-
- -
-

t('Limit to groups')) ?>

-

t('When at least one group is selected, only people of the listed groups can be part of conversations.')); ?>

-

t('Guests can still join public conversations.')); ?>

-

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.')); ?>

-
- -
-

t('STUN servers')) ?>

-

t('A STUN server is used to determine the public IP address of participants behind a router.')); ?>

- -
-
-
- -
-

t('TURN server')) ?>

-

t('The TURN server is used to proxy the traffic from participants behind a firewall.')); ?>

- -
-
-
- -
-

t('Signaling servers')) ?>

-

t('An external signaling server can optionally be used for larger installations. Leave empty to use the internal signaling server.')) ?>

- -
-
- -
-

t('Shared secret')) ?>

- -
-
- +
+
+
+
+
+
+
+
+
+
+
+