OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve help user settings tab styling (#8838) 

* Set the default margin between the debug button and the subsection texts

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete style rule for AccessibleButton

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove the special block margin setting from the reload button

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete class name - mx_HelpUserSettingsTab_versions

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace <br>s for spacing with a margin style declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace <br> for spacing with a margin style declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove <br>s for spacing

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply mx_SettingsTab_subsectionText to the credits list

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply spacing-16 instead of spacing-12

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
pull/28788/head^2
Suguru Hirahara 2022-06-14 13:20:54 +00:00 committed by GitHub
parent d1b95e5491
commit 1dee39f419
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
View File

@ -15,16 +15,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_HelpUserSettingsTab_debugButton {
margin-bottom: 5px;
margin-top: 5px;
}
.mx_HelpUserSettingsTab {
code {
word-break: break-all;
user-select: all;
}
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
word-break: break-word;
}
details {
margin: $spacing-16 auto;
.mx_HelpUserSettingsTab code {
word-break: break-all;
user-select: all;
summary {
margin-bottom: $spacing-16;
}
}
}

35
src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
View File

@ -110,7 +110,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
}
return (
<div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
<div className='mx_SettingsTab_section'>
<span className='mx_SettingsTab_subheading'>{ _t("Legal") }</span>
<div className='mx_SettingsTab_subsectionText'>
{ legalLinks }
@ -125,7 +125,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
return (
<div className='mx_SettingsTab_section'>
<span className='mx_SettingsTab_subheading'>{ _t("Credits") }</span>
<ul>
<ul className='mx_SettingsTab_subsectionText'>
<li>
The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener" target="_blank">
default cover photo
@ -245,11 +245,11 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
"last interacted with, and the usernames of other users. " +
"They do not contain messages.",
) }
<div className='mx_HelpUserSettingsTab_debugButton'>
<AccessibleButton onClick={this.onBugReport} kind='primary'>
{ _t("Submit debug logs") }
</AccessibleButton>
</div>
</div>
<AccessibleButton onClick={this.onBugReport} kind='primary'>
{ _t("Submit debug logs") }
</AccessibleButton>
<div className='mx_SettingsTab_subsectionText'>
{ _t(
"To report a Matrix-related security issue, please read the Matrix.org " +
"<a>Security Disclosure Policy</a>.", {},
@ -280,7 +280,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
{ _t("Keyboard Shortcuts") }
</AccessibleButton>
</div>
<div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
<div className='mx_SettingsTab_section'>
<span className='mx_SettingsTab_subheading'>{ _t("Versions") }</span>
<div className='mx_SettingsTab_subsectionText'>
<CopyableText getTextToCopy={this.getVersionTextToCopy}>
@ -292,25 +292,22 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
</div>
{ this.renderLegal() }
{ this.renderCredits() }
<div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
<div className='mx_SettingsTab_section'>
<span className='mx_SettingsTab_subheading'>{ _t("Advanced") }</span>
<div className='mx_SettingsTab_subsectionText'>
{ _t("Homeserver is") } <code>{ MatrixClientPeg.get().getHomeserverUrl() }</code><br />
{ _t("Identity server is") } <code>{ MatrixClientPeg.get().getIdentityServerUrl() }</code><br />
<br />
<div>{ _t("Homeserver is") } <code>{ MatrixClientPeg.get().getHomeserverUrl() }</code></div>
<div>{ _t("Identity server is") } <code>{ MatrixClientPeg.get().getIdentityServerUrl() }</code></div>
<details>
<summary>{ _t("Access Token") }</summary><br />
<summary>{ _t("Access Token") }</summary>
<b>{ _t("Your access token gives full access to your account."
+ " Do not share it with anyone.") }</b>
<CopyableText getTextToCopy={() => MatrixClientPeg.get().getAccessToken()}>
{ MatrixClientPeg.get().getAccessToken() }
</CopyableText>
</details><br />
<div className='mx_HelpUserSettingsTab_debugButton'>
<AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
{ _t("Clear cache and reload") }
</AccessibleButton>
</div>
</details>
<AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
{ _t("Clear cache and reload") }
</AccessibleButton>
</div>
</div>
</div>