Use semantic headings for room settings content (#10734)
* split SettingsSection out of SettingsTab, replace usage * correct copyright * use semantic headings in GeneralRoomSettingsTab * use SettingsTab and SettingsSubsection in room settings * fix VoipRoomSettingsTab
This commit is contained in:
parent
e7f5261eda
commit
4736f0e44c
12 changed files with 439 additions and 380 deletions
|
@ -6,50 +6,78 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
|
|||
class="mx_SettingsTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_heading"
|
||||
class="mx_SettingsTab_sections"
|
||||
>
|
||||
Advanced
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
|
||||
>
|
||||
<span
|
||||
class="mx_SettingsTab_subheading"
|
||||
<div
|
||||
class="mx_SettingsSection"
|
||||
>
|
||||
Room information
|
||||
</span>
|
||||
<div>
|
||||
<span>
|
||||
Internal room ID
|
||||
</span>
|
||||
<div
|
||||
class="mx_CopyableText mx_CopyableText_border"
|
||||
<h2
|
||||
class="mx_Heading_h2"
|
||||
>
|
||||
Advanced
|
||||
</h2>
|
||||
<div
|
||||
class="mx_SettingsSection_subSections"
|
||||
>
|
||||
!room:example.com
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
class="mx_SettingsSubsection"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsectionHeading"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Room information
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
Internal room ID
|
||||
</span>
|
||||
<div
|
||||
class="mx_CopyableText mx_CopyableText_border"
|
||||
>
|
||||
!room:example.com
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsectionHeading"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Room version
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
Room version:
|
||||
</span>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
|
||||
>
|
||||
<span
|
||||
class="mx_SettingsTab_subheading"
|
||||
>
|
||||
Room version
|
||||
</span>
|
||||
<div>
|
||||
<span>
|
||||
Room version:
|
||||
</span>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
|
@ -6,75 +6,83 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
|
|||
class="mx_SettingsTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_heading"
|
||||
class="mx_SettingsTab_sections"
|
||||
>
|
||||
Bridges
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
<span>
|
||||
This room is bridging messages to the following platforms.
|
||||
<a
|
||||
href="https://matrix.org/bridges/"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
Learn more.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
<ul
|
||||
class="mx_RoomSettingsDialog_BridgeList"
|
||||
<div
|
||||
class="mx_SettingsSection"
|
||||
>
|
||||
<h2
|
||||
class="mx_Heading_h2"
|
||||
>
|
||||
<li
|
||||
class="mx_RoomSettingsDialog_BridgeList_listItem"
|
||||
>
|
||||
<div
|
||||
class="mx_RoomSettingsDialog_column_icon"
|
||||
>
|
||||
<div
|
||||
class="mx_RoomSettingsDialog_noProtocolIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_RoomSettingsDialog_column_data"
|
||||
>
|
||||
<h3
|
||||
class="mx_RoomSettingsDialog_column_data_protocolName"
|
||||
>
|
||||
protocol-test
|
||||
</h3>
|
||||
<p
|
||||
class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
|
||||
>
|
||||
<span
|
||||
class="mx_RoomSettingsDialog_channel"
|
||||
Bridges
|
||||
</h2>
|
||||
<div
|
||||
class="mx_SettingsSection_subSections"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
<span>
|
||||
This room is bridging messages to the following platforms.
|
||||
<a
|
||||
href="https://matrix.org/bridges/"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<span>
|
||||
Channel:
|
||||
<span>
|
||||
channel-test
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<ul
|
||||
class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
|
||||
Learn more.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
<ul
|
||||
class="mx_RoomSettingsDialog_BridgeList"
|
||||
>
|
||||
<li
|
||||
class="mx_RoomSettingsDialog_BridgeList_listItem"
|
||||
>
|
||||
|
||||
<li>
|
||||
<span>
|
||||
This bridge is managed by
|
||||
.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="mx_RoomSettingsDialog_column_icon"
|
||||
>
|
||||
<div
|
||||
class="mx_RoomSettingsDialog_noProtocolIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_RoomSettingsDialog_column_data"
|
||||
>
|
||||
<h3
|
||||
class="mx_RoomSettingsDialog_column_data_protocolName"
|
||||
>
|
||||
protocol-test
|
||||
</h3>
|
||||
<p
|
||||
class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
|
||||
>
|
||||
<span
|
||||
class="mx_RoomSettingsDialog_channel"
|
||||
>
|
||||
<span>
|
||||
Channel:
|
||||
<span>
|
||||
channel-test
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<ul
|
||||
class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
|
||||
>
|
||||
|
||||
<li>
|
||||
<span>
|
||||
This bridge is managed by
|
||||
.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -87,25 +95,33 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
|
|||
class="mx_SettingsTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_heading"
|
||||
class="mx_SettingsTab_sections"
|
||||
>
|
||||
Bridges
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
|
||||
>
|
||||
<p>
|
||||
<span>
|
||||
This room isn't bridging messages to any platforms.
|
||||
<a
|
||||
href="https://matrix.org/bridges/"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
Learn more.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
<div
|
||||
class="mx_SettingsSection"
|
||||
>
|
||||
<h2
|
||||
class="mx_Heading_h2"
|
||||
>
|
||||
Bridges
|
||||
</h2>
|
||||
<div
|
||||
class="mx_SettingsSection_subSections"
|
||||
>
|
||||
<p>
|
||||
<span>
|
||||
This room isn't bridging messages to any platforms.
|
||||
<a
|
||||
href="https://matrix.org/bridges/"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
Learn more.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,9 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
|
|||
>
|
||||
Banned users
|
||||
</legend>
|
||||
<ul>
|
||||
<ul
|
||||
class="mx_RolesRoomSettingsTab_bannedList"
|
||||
>
|
||||
<li>
|
||||
<span
|
||||
title="Banned by @alice:server.org"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue