secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Colouring for player; Context menu and track tap zone

Browse Source
This commit is contained in:
James Barnsley
2017-06-23 08:03:28 +12:00
parent 4c39e935ef
commit 278d6f73be
6 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/components/Track.js
View File

@ -140,8 +140,7 @@ export default class Track extends React.Component{
onDoubleClick={ e => this.props.handleDoubleClick(e) }
onContextMenu={ e => this.handleContextMenu(e) }>
<span className="state-icon">
{ this.props.track.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null }
{ this.props.track.playing && !this.props.track.selected ? <FontAwesome name="play" className="playing" fixedWidth /> : null }
{this.props.track.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
</span>
{ track_columns }
</div>

15
src/scss/components/_context-menu.scss
View File

@ -270,6 +270,7 @@
margin-top: -1px;
position: relative;
border-radius: 3px;
text-align: center;
.dot {
width: 6px;
@ -323,17 +324,21 @@
@include responsive( $bp_medium ){
.context-menu-trigger {
@include gradient_overlay(50%, 0.15);
display: block;
position: fixed;
bottom: 50px;
bottom: 55px;
right: 5px;
width: 50px;
height: 50px;
width: 48px;
height: 8px;
padding: 20px 0;
overflow: hidden;
z-index: 97;
border-radius: 50%;
background: $blue;
color: #FFFFFF;
.dot {
background: $white;
}
&:focus,
&:active {

18
src/scss/components/_lists.scss
View File

@ -29,17 +29,7 @@
}
.state-icon {
position: absolute;
top: 0;
left: 0;
font-size: 10px;
display: none;
.fa {
position: absolute;
top: 15px;
left: 15px;
}
}
:root .notouch:not(.dragging) &:not(.header):not(.no-click):hover {
@ -221,12 +211,16 @@
}
.state-icon {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 48px;
font-size: 10px;
display: block;
.fa {
position: absolute;
top: 19px;
left: 17px;
}
@ -241,10 +235,6 @@
top: 15px;
left: 15px;
}
.playing {
display: none !important;
}
}
.col {

8
src/scss/components/_playback-controls.scss
View File

@ -9,10 +9,10 @@
background: $light_grey;
color: $black;
background: -webkit-linear-gradient(to bottom left, $faint_grey, $light_grey);
background: -moz-linear-gradient(to bottom left, $faint_grey, $light_grey);
background: -o-linear-gradient(to bottom left, $faint_grey, $light_grey);
background: linear-gradient(to bottom left, $faint_grey, $light_grey);
background: -webkit-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
background: -moz-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
background: -o-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
background: linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
.current-track {
@include animate();

2
src/scss/components/_slider.scss
View File

@ -5,7 +5,7 @@
.track {
position: absolute;
background: darken($light_grey, 5%);
background: darken($light_grey, 6%);
border-radius: 2px;
.progress {

4
src/scss/global/_variables.scss
View File

@ -190,7 +190,7 @@ $bp_shallow: 650px;
filter: invert(1);
}
@mixin gradient_overlay($radius: 0){
@mixin gradient_overlay($radius: 0, $opacity: 0){
position: relative;
border-radius: $radius;
@ -203,7 +203,7 @@ $bp_shallow: 650px;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
opacity: $opacity;
z-index: 9;
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));