Fix visual bugs on AccessSecretStorageDialog (#8160)
* Remove duplicate mx_Dialog_buttons Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Group buttons on mx_Dialog with span - Cancel default styling for elements inside .mx_AccessSecretStorageDialog_primaryContainer Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common rules of mx_Dialog_buttons_row to _common.scss - Set 16px gap between buttons per https://github.com/vector-im/element-web/issues/19426#issuecomment-949778515 Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Spacing variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Nesting - .mx_AccessSecretStorageDialog_reset - Fix the reset link color - Set $spacingStart variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove unnecessary rule Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara
GitHub
parent
e2a612b070
commit
464eb93a44
5 changed files with 255 additions and 179 deletions
|
|
@ -20,6 +20,7 @@ limitations under the License.
|
||||||
@import "./_font-sizes.scss";
|
@import "./_font-sizes.scss";
|
||||||
@import "./_font-weights.scss";
|
@import "./_font-weights.scss";
|
||||||
@import "./_animations.scss";
|
@import "./_animations.scss";
|
||||||
|
@import "./_spacing.scss";
|
||||||
@import url("maplibre-gl/dist/maplibre-gl.css");
|
@import url("maplibre-gl/dist/maplibre-gl.css");
|
||||||
|
|
||||||
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
|
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
|
||||||
|
|
@ -414,7 +415,8 @@ legend {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Dialog_buttons {
|
.mx_Dialog_buttons {
|
||||||
margin-top: 20px;
|
margin-top: $spacing-20;
|
||||||
|
margin-inline-start: auto;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
.mx_Dialog_buttons_additive {
|
.mx_Dialog_buttons_additive {
|
||||||
|
|
@ -423,6 +425,22 @@ legend {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_Dialog_buttons_row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
text-align: initial;
|
||||||
|
margin-inline-start: auto;
|
||||||
|
|
||||||
|
// default gap among elements
|
||||||
|
column-gap: $spacing-8; // See margin-right below inside the button style
|
||||||
|
row-gap: 5px; // See margin-bottom below inside the button style
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0 !important; // override the margin settings
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
|
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
|
||||||
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
|
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
|
||||||
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
|
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
|
||||||
|
|
|
||||||
|
|
@ -14,38 +14,14 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_AccessSecretStorageDialog_reset {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 24px; // 16px icon + 8px padding
|
|
||||||
margin-top: 7px; // vertical alignment to buttons
|
|
||||||
margin-bottom: 7px; // space between the buttons and the text when float is activated
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
left: 0;
|
|
||||||
top: 2px; // alignment
|
|
||||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_AccessSecretStorageDialog_reset_link {
|
|
||||||
color: $alert;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_AccessSecretStorageDialog_titleWithIcon::before {
|
.mx_AccessSecretStorageDialog_titleWithIcon::before {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
margin-right: 8px;
|
margin-inline-end: $spacing-8;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 5px;
|
top: 5px; // TODO: spacing variable
|
||||||
background-color: $primary-content;
|
background-color: $primary-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -84,7 +60,7 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
|
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
|
||||||
margin: 16px;
|
margin: $spacing-16;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
|
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
|
||||||
|
|
@ -97,7 +73,7 @@ limitations under the License.
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
mask-size: 20px;
|
mask-size: 20px;
|
||||||
margin-right: 5px;
|
margin-inline-end: 5px; // TODO: spacing variable
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -120,3 +96,44 @@ limitations under the License.
|
||||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
|
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_AccessSecretStorageDialog_primaryContainer {
|
||||||
|
.mx_Dialog_buttons {
|
||||||
|
$spacingStart: $spacing-24; // 16px icon + 8px padding
|
||||||
|
|
||||||
|
text-align: initial;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
gap: 14px; // TODO: spacing variable
|
||||||
|
|
||||||
|
.mx_Dialog_buttons_additive {
|
||||||
|
float: none;
|
||||||
|
|
||||||
|
.mx_AccessSecretStorageDialog_reset {
|
||||||
|
position: relative;
|
||||||
|
padding-inline-start: $spacingStart;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
left: 0;
|
||||||
|
top: 2px; // alignment
|
||||||
|
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_AccessSecretStorageDialog_reset_link {
|
||||||
|
color: $alert;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_Dialog_buttons_row {
|
||||||
|
gap: $spacing-16; // TODO: needs normalization
|
||||||
|
padding-inline-start: $spacingStart;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -455,13 +455,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
|
||||||
if (this.state.error) {
|
if (this.state.error) {
|
||||||
content = <div>
|
content = <div>
|
||||||
<p>{ _t("Unable to create key backup") }</p>
|
<p>{ _t("Unable to create key backup") }</p>
|
||||||
<div className="mx_Dialog_buttons">
|
<DialogButtons
|
||||||
<DialogButtons primaryButton={_t('Retry')}
|
primaryButton={_t('Retry')}
|
||||||
onPrimaryButtonClick={this.createBackup}
|
onPrimaryButtonClick={this.createBackup}
|
||||||
hasCancel={true}
|
hasCancel={true}
|
||||||
onCancel={this.onCancel}
|
onCancel={this.onCancel}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>;
|
</div>;
|
||||||
} else {
|
} else {
|
||||||
switch (this.state.phase) {
|
switch (this.state.phase) {
|
||||||
|
|
|
||||||
|
|
@ -100,17 +100,19 @@ export default class DialogButtons extends React.Component<IProps> {
|
||||||
return (
|
return (
|
||||||
<div className="mx_Dialog_buttons">
|
<div className="mx_Dialog_buttons">
|
||||||
{ additive }
|
{ additive }
|
||||||
{ cancelButton }
|
<span className="mx_Dialog_buttons_row">
|
||||||
{ this.props.children }
|
{ cancelButton }
|
||||||
<button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
|
{ this.props.children }
|
||||||
data-test-id="dialog-primary-button"
|
<button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
|
||||||
className={primaryButtonClassName}
|
data-test-id="dialog-primary-button"
|
||||||
onClick={this.props.onPrimaryButtonClick}
|
className={primaryButtonClassName}
|
||||||
autoFocus={this.props.focus}
|
onClick={this.props.onPrimaryButtonClick}
|
||||||
disabled={this.props.disabled || this.props.primaryDisabled}
|
autoFocus={this.props.focus}
|
||||||
>
|
disabled={this.props.disabled || this.props.primaryDisabled}
|
||||||
{ this.props.primaryButton }
|
>
|
||||||
</button>
|
{ this.props.primaryButton }
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -245,19 +245,23 @@ Array [
|
||||||
<div
|
<div
|
||||||
class="mx_Dialog_buttons"
|
class="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
class="mx_Dialog_buttons_row"
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
type="button"
|
||||||
class="mx_Dialog_primary"
|
>
|
||||||
data-test-id="dialog-primary-button"
|
Cancel
|
||||||
type="button"
|
</button>
|
||||||
>
|
<button
|
||||||
Export
|
class="mx_Dialog_primary"
|
||||||
</button>
|
data-test-id="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -466,19 +470,23 @@ Array [
|
||||||
<div
|
<div
|
||||||
class="mx_Dialog_buttons"
|
class="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
class="mx_Dialog_buttons_row"
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
type="button"
|
||||||
class="mx_Dialog_primary"
|
>
|
||||||
data-test-id="dialog-primary-button"
|
Cancel
|
||||||
type="button"
|
</button>
|
||||||
>
|
<button
|
||||||
Export
|
class="mx_Dialog_primary"
|
||||||
</button>
|
data-test-id="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -815,22 +823,26 @@ Array [
|
||||||
<div
|
<div
|
||||||
className="mx_Dialog_buttons"
|
className="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
className="mx_Dialog_buttons_row"
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
disabled={false}
|
||||||
className="mx_Dialog_primary"
|
onClick={[Function]}
|
||||||
data-test-id="dialog-primary-button"
|
type="button"
|
||||||
onClick={[Function]}
|
>
|
||||||
type="button"
|
Cancel
|
||||||
>
|
</button>
|
||||||
Export
|
<button
|
||||||
</button>
|
className="mx_Dialog_primary"
|
||||||
|
data-test-id="dialog-primary-button"
|
||||||
|
onClick={[Function]}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</DialogButtons>
|
</DialogButtons>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1086,19 +1098,23 @@ Array [
|
||||||
<div
|
<div
|
||||||
class="mx_Dialog_buttons"
|
class="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
class="mx_Dialog_buttons_row"
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
type="button"
|
||||||
class="mx_Dialog_primary"
|
>
|
||||||
data-test-id="dialog-primary-button"
|
Cancel
|
||||||
type="button"
|
</button>
|
||||||
>
|
<button
|
||||||
Export
|
class="mx_Dialog_primary"
|
||||||
</button>
|
data-test-id="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -1307,19 +1323,23 @@ Array [
|
||||||
<div
|
<div
|
||||||
class="mx_Dialog_buttons"
|
class="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
class="mx_Dialog_buttons_row"
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
type="button"
|
||||||
class="mx_Dialog_primary"
|
>
|
||||||
data-test-id="dialog-primary-button"
|
Cancel
|
||||||
type="button"
|
</button>
|
||||||
>
|
<button
|
||||||
Export
|
class="mx_Dialog_primary"
|
||||||
</button>
|
data-test-id="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -1656,22 +1676,26 @@ Array [
|
||||||
<div
|
<div
|
||||||
className="mx_Dialog_buttons"
|
className="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
className="mx_Dialog_buttons_row"
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
disabled={false}
|
||||||
className="mx_Dialog_primary"
|
onClick={[Function]}
|
||||||
data-test-id="dialog-primary-button"
|
type="button"
|
||||||
onClick={[Function]}
|
>
|
||||||
type="button"
|
Cancel
|
||||||
>
|
</button>
|
||||||
Export
|
<button
|
||||||
</button>
|
className="mx_Dialog_primary"
|
||||||
|
data-test-id="dialog-primary-button"
|
||||||
|
onClick={[Function]}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</DialogButtons>
|
</DialogButtons>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1914,19 +1938,23 @@ Array [
|
||||||
<div
|
<div
|
||||||
class="mx_Dialog_buttons"
|
class="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
class="mx_Dialog_buttons_row"
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
type="button"
|
||||||
class="mx_Dialog_primary"
|
>
|
||||||
data-test-id="dialog-primary-button"
|
Cancel
|
||||||
type="button"
|
</button>
|
||||||
>
|
<button
|
||||||
Export
|
class="mx_Dialog_primary"
|
||||||
</button>
|
data-test-id="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -2135,19 +2163,23 @@ Array [
|
||||||
<div
|
<div
|
||||||
class="mx_Dialog_buttons"
|
class="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
class="mx_Dialog_buttons_row"
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
type="button"
|
||||||
class="mx_Dialog_primary"
|
>
|
||||||
data-test-id="dialog-primary-button"
|
Cancel
|
||||||
type="button"
|
</button>
|
||||||
>
|
<button
|
||||||
Export
|
class="mx_Dialog_primary"
|
||||||
</button>
|
data-test-id="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -2484,22 +2516,26 @@ Array [
|
||||||
<div
|
<div
|
||||||
className="mx_Dialog_buttons"
|
className="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
className="mx_Dialog_buttons_row"
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
disabled={false}
|
||||||
className="mx_Dialog_primary"
|
onClick={[Function]}
|
||||||
data-test-id="dialog-primary-button"
|
type="button"
|
||||||
onClick={[Function]}
|
>
|
||||||
type="button"
|
Cancel
|
||||||
>
|
</button>
|
||||||
Export
|
<button
|
||||||
</button>
|
className="mx_Dialog_primary"
|
||||||
|
data-test-id="dialog-primary-button"
|
||||||
|
onClick={[Function]}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</DialogButtons>
|
</DialogButtons>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2833,22 +2869,26 @@ Array [
|
||||||
<div
|
<div
|
||||||
className="mx_Dialog_buttons"
|
className="mx_Dialog_buttons"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
data-test-id="dialog-cancel-button"
|
className="mx_Dialog_buttons_row"
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
data-test-id="dialog-cancel-button"
|
||||||
<button
|
disabled={false}
|
||||||
className="mx_Dialog_primary"
|
onClick={[Function]}
|
||||||
data-test-id="dialog-primary-button"
|
type="button"
|
||||||
onClick={[Function]}
|
>
|
||||||
type="button"
|
Cancel
|
||||||
>
|
</button>
|
||||||
Export
|
<button
|
||||||
</button>
|
className="mx_Dialog_primary"
|
||||||
|
data-test-id="dialog-primary-button"
|
||||||
|
onClick={[Function]}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</DialogButtons>
|
</DialogButtons>
|
||||||
</div>,
|
</div>,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue