play-button renamed to play icon

This commit is contained in:
NikolaBorislavovHristov 2019-01-29 16:15:17 +02:00
parent 16d3144f25
commit 72c250060a
3 changed files with 8 additions and 8 deletions

View file

@ -65,8 +65,8 @@ class MetaItem extends Component {
<div className={styles['poster-image-container']}>
<Icon className={styles['placeholder-image']} icon={placeholderIcon} />
<div className={styles['poster-image']} style={{ backgroundImage: `url('${this.props.poster}')` }} />
<div className={styles['play-button-container']}>
<Icon className={styles['play-button-icon']} icon={'ic_play'} viewBox={'-291.6 0 1190.6 1024'} />
<div className={styles['play-icon-container']}>
<Icon className={styles['play-icon']} icon={'ic_play'} viewBox={'-291.6 0 1190.6 1024'} />
</div>
{this.renderProgress()}
</div>
@ -94,7 +94,7 @@ class MetaItem extends Component {
<Popup.Menu>
<div className={styles['menu-items-container']}>
{this.props.menu.map(({ label, onSelect }) => (
<Button key={label} className={styles['menu-item']} onClick={onSelect}>{label}</Button>
<Button key={label} data-meta-item-id={this.props.id} className={styles['menu-item']} onClick={onSelect}>{label}</Button>
))}
</div>
</Popup.Menu>

View file

@ -32,7 +32,7 @@
background-origin: border-box;
}
.play-button-container {
.play-icon-container {
position: absolute;
top: calc(50% - (var(--poster-relative-size) * 0.2));
left: calc(50% - (var(--poster-relative-size) * 0.2));
@ -42,10 +42,10 @@
background-color: var(--color-surfacelighter);
border-radius: 50%;
box-shadow: 0 0 calc(var(--poster-relative-size) * 0.1) calc(var(--poster-relative-size) * 0.015) var(--color-backgroundlight);
visibility: var(--play-button-visibility, collapse);
visibility: var(--play-icon-visibility, collapse);
text-align: center;
.play-button-icon {
.play-icon {
height: 40%;
margin-top: 30%;
fill: var(--color-primary);

View file

@ -7,7 +7,7 @@
--poster-relative-size: calc(180px * var(--poster-shape-ratio));
.meta-item {
--play-button-visibility: visible;
--play-icon-visibility: visible;
}
}
@ -16,7 +16,7 @@
.meta-item {
&:hover, &:focus {
--play-button-visibility: visible;
--play-icon-visibility: visible;
}
}
}