From 78fb95aa9e1e88251a16a723e38ffadb07f82d76 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 18:24:49 +0100
Subject: [PATCH] change <details> appearance for local aliases

---
 res/css/views/room_settings/_AliasSettings.scss     | 8 ++++++++
 src/components/views/room_settings/AliasSettings.js | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/res/css/views/room_settings/_AliasSettings.scss b/res/css/views/room_settings/_AliasSettings.scss
index 294902a1f0..8ae3acbbd3 100644
--- a/res/css/views/room_settings/_AliasSettings.scss
+++ b/res/css/views/room_settings/_AliasSettings.scss
@@ -29,4 +29,12 @@ limitations under the License.
 
 .mx_AliasSettings summary {
     cursor: pointer;
+    color: $accent-color;
+    font-weight: 600;
+    list-style: none;
+
+    // list-style doesn't do it for webkit
+    &::-webkit-details-marker {
+        display: none;
+    }
 }
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 34e07e31dc..e8fc700d50 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -98,6 +98,7 @@ export default class AliasSettings extends React.Component {
             canonicalAlias: null, // #canonical:domain.tld
             updatingCanonicalAlias: false,
             localAliasesLoading: false,
+            detailsOpen: false,
         };
 
         if (props.canonicalAliasEvent) {
@@ -268,6 +269,7 @@ export default class AliasSettings extends React.Component {
                 this.loadLocalAliases();
             }
         }
+        this.setState({detailsOpen: event.target.open});
     };
 
     onCanonicalAliasChange = (event) => {
@@ -386,7 +388,7 @@ export default class AliasSettings extends React.Component {
                 <span className='mx_SettingsTab_subheading'>{_t("Local Addresses")}</span>
                 <p>{_t("Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", {localDomain})}</p>
                 <details onToggle={this.onLocalAliasesToggled}>
-                    <summary>{_t('Local addresses (unmoderated content)')}</summary>
+                    <summary>{ this.state.detailsOpen ? _t('Show less') : _t("Show more")}</summary>
                     {localAliasesList}
                 </details>
             </div>