mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 11:15:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve _ShareType.scss (#8737)

Browse source 
* Specify the button style explicitly removing the dependency on the mixin

The reset mixin can cause style inconsistencies by disrupting cascading arbitrarily, increasing the number of specified declarations more than needed. Though it might be useful for development, it is not necessary to use it, makes it difficult to grasp the style structure, and can be removed to optimize the structure.

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

* Remove element='button' from AccessibleButton

Since AccessibleButton has role='button' by default, setting the element button property is redundant.

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

* Protect mx_ShareType_option from being regressed structurally

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

* yarn run lint:style --fix

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

* Wrap buttons with declarations for spacing

box-sizing is not required for the buttons or the wrapper.

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

* yarn run lint:style --fix

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

* fix eslint errors

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

* Fix LocationShareMenu-test.tsx

AccessibleButton is div by default

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

* Reflect the review

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

* Revert "Remove element='button' from AccessibleButton"

This reverts commit af78d2713f6b4fca9405498e0090db1e6218ff1b.

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

* Revert "Fix LocationShareMenu-test.tsx"

This reverts commit 7d783a733ec84af6453b2359b2d00443fcece2ef.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-02 12:18:26 +00:00 committed by GitHub
parent 158e42f764
commit abfc66a34e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
res/css/components/views/location/_ShareType.scss
View file

@ -24,6 +24,35 @@ limitations under the License.
padding: 60px $spacing-12 $spacing-32; padding: 60px $spacing-12 $spacing-32;
color: $primary-content; color: $primary-content;
.mx_ShareType_wrapper_options {
display: flex;
flex-direction: column;
row-gap: $spacing-12;
width: 100%;
margin-top: $spacing-12;
.mx_ShareType_option {
display: flex;
align-items: center;
justify-content: flex-start;
padding: $spacing-8 $spacing-20;
background: none;
border: 1px solid $quinary-content;
border-radius: 8px;
font-size: $font-15px;
font-family: inherit;
line-height: inherit;
color: $primary-content;
&:hover,
&:focus {
border-color: $accent;
}
}
}
} }
.mx_ShareType_badge { .mx_ShareType_badge {
@ -43,28 +72,6 @@ limitations under the License.
text-align: center; text-align: center;
} }
.mx_ShareType_option {
@mixin ButtonResetDefault;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: $spacing-8 $spacing-20;
margin-top: $spacing-12;
color: $primary-content;
border: 1px solid $quinary-content;
border-radius: 8px;
font-size: $font-15px;
&:hover, &:focus {
border-color: $accent;
}
}
.mx_ShareType_option-icon { .mx_ShareType_option-icon {
height: 40px; height: 40px;
width: 40px; width: 40px;

20
src/components/views/location/ShareType.tsx
View file

@ -79,15 +79,17 @@ const ShareType: React.FC<Props> = ({
return <div className='mx_ShareType'> return <div className='mx_ShareType'>
<LocationIcon className='mx_ShareType_badge' /> <LocationIcon className='mx_ShareType_badge' />
<Heading className='mx_ShareType_heading' size='h3'>{ _t("What location type do you want to share?") }</Heading> <Heading className='mx_ShareType_heading' size='h3'>{ _t("What location type do you want to share?") }</Heading>
{ enabledShareTypes.map((type) => <div className='mx_ShareType_wrapper_options'>
<ShareTypeOption { enabledShareTypes.map((type) =>
key={type} <ShareTypeOption
onClick={() => setShareType(type)} key={type}
label={labels[type]} onClick={() => setShareType(type)}
shareType={type} label={labels[type]}
data-test-id={`share-location-option-${type}`} shareType={type}
/>, data-test-id={`share-location-option-${type}`}
) } />,
) }
</div>
</div>; </div>;
}; };