Place cross-signing action buttons on a single row

Part of https://github.com/vector-im/element-web/issues/13895
This commit is contained in:
J. Ryan Stinnett 2020-09-11 14:09:54 +01:00
parent 7bd5e3fa31
commit 3259ab1f25
2 changed files with 25 additions and 19 deletions

View file

@ -28,4 +28,8 @@ limitations under the License.
.mx_CrossSigningPanel_buttonRow { .mx_CrossSigningPanel_buttonRow {
margin: 1em 0; margin: 1em 0;
:nth-child(n + 1) {
margin-inline-end: 10px;
}
} }

View file

@ -195,29 +195,32 @@ export default class CrossSigningPanel extends React.PureComponent {
crossSigningPublicKeysOnDevice crossSigningPublicKeysOnDevice
); );
let resetButton; const actions = [];
if (keysExistAnywhere) {
resetButton = ( // TODO: determine how better to expose this to users in addition to prompts at login/toast
<div className="mx_CrossSigningPanel_buttonRow"> if (!keysExistEverywhere && homeserverSupportsCrossSigning) {
<AccessibleButton kind="danger" onClick={this._resetCrossSigning}> actions.push(
{_t("Reset")} <AccessibleButton kind="primary" onClick={this._onBootstrapClick}>
</AccessibleButton> {_t("Set up")}
</div> </AccessibleButton>,
); );
} }
// TODO: determine how better to expose this to users in addition to prompts at login/toast if (keysExistAnywhere) {
let bootstrapButton; actions.push(
if (!keysExistEverywhere && homeserverSupportsCrossSigning) { <AccessibleButton kind="danger" onClick={this._resetCrossSigning}>
bootstrapButton = ( {_t("Reset")}
<div className="mx_CrossSigningPanel_buttonRow"> </AccessibleButton>,
<AccessibleButton kind="primary" onClick={this._onBootstrapClick}>
{_t("Set up")}
</AccessibleButton>
</div>
); );
} }
let actionRow;
if (actions.length) {
actionRow = <div className="mx_CrossSigningPanel_buttonRow">
{actions}
</div>;
}
return ( return (
<div> <div>
{summarisedStatus} {summarisedStatus}
@ -251,8 +254,7 @@ export default class CrossSigningPanel extends React.PureComponent {
</tbody></table> </tbody></table>
</details> </details>
{errorSection} {errorSection}
{bootstrapButton} {actionRow}
{resetButton}
</div> </div>
); );
} }