fix: Fix direction of media gallery arrows (#35014)
This commit is contained in:
parent
2c828748a3
commit
9896bed85f
3 changed files with 14 additions and 4 deletions
|
@ -168,8 +168,8 @@ class MediaModal extends ImmutablePureComponent {
|
|||
|
||||
const index = this.getIndex();
|
||||
|
||||
const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>;
|
||||
const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>;
|
||||
const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--prev' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>;
|
||||
const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--next' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>;
|
||||
|
||||
const content = media.map((image, idx) => {
|
||||
const width = image.getIn(['meta', 'original', 'width']) || null;
|
||||
|
|
|
@ -5850,6 +5850,7 @@ a.status-card {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: scaleX(var(--text-x-direction));
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
@ -5858,11 +5859,11 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
|
||||
.media-modal__nav--left {
|
||||
.media-modal__nav--prev {
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.media-modal__nav--right {
|
||||
.media-modal__nav--next {
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -35,3 +35,12 @@
|
|||
--input-background-color: var(--surface-variant-background-color);
|
||||
--on-input-color: #{$secondary-text-color};
|
||||
}
|
||||
|
||||
body {
|
||||
// Variable for easily inverting directional UI elements,
|
||||
--text-x-direction: 1;
|
||||
|
||||
&.rtl {
|
||||
--text-x-direction: -1;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue