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

Tooltips on player icons

Browse Source
This commit is contained in:
James Barnsley
2017-04-21 08:43:20 +12:00
parent 32f4b2ae87
commit 303991df09
5 changed files with 58 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/js/components/FullPlayer.js
View File

@ -39,25 +39,25 @@ class FullPlayer extends React.Component{
}
renderConsumeButton(){
var button = <a onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [true])}><FontAwesome name="fire" /></a>
var button = <a className="has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [true])}><FontAwesome name="fire" /><span className="tooltip">Consume</span></a>
if( this.props.consume ){
button = <a className="active" onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [false])}><FontAwesome name="fire" /></a>
button = <a className="active has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [false])}><FontAwesome name="fire" /><span className="tooltip">Consume</span></a>
}
return button;
}
renderRandomButton(){
var button = <a onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [true])}><FontAwesome name="random" /></a>
var button = <a className="has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [true])}><FontAwesome name="random" /><span className="tooltip">Shuffle</span></a>
if( this.props.random ){
button = <a className="active" onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [false])}><FontAwesome name="random" /></a>
button = <a className="active has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [false])}><FontAwesome name="random" /><span className="tooltip">Shuffle</span></a>
}
return button;
}
renderRepeatButton(){
var button = <a onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [true])}><FontAwesome name="repeat" /></a>
var button = <a className="has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [true])}><FontAwesome name="repeat" /><span className="tooltip">Repeat</span></a>
if( this.props.repeat ){
button = <a className="active" onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [false])}><FontAwesome name="repeat" /></a>
button = <a className="active has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [false])}><FontAwesome name="repeat" /><span className="tooltip">Repeat</span></a>
}
return button;
}

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

@ -6,7 +6,7 @@
bottom: 0;
right: 0;
z-index: 99;
background: rgba(10, 10, 10, 0.95);
background: $overlay_dark;
overflow-y: scroll;
.close-modal {

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

@ -75,7 +75,7 @@
height: 400px;
width: 400px;
margin: -200px 0 0 -200px;
background: rgba(10, 10, 10, 0.95);
background: $overlay_dark;
color: $white;
border-radius: 10px;
text-align: center;

51
src/scss/global/_core.scss
View File

@ -279,11 +279,58 @@ footer {
}
}
.has-tooltip {
position: relative;
.tooltip {
@include animate();
opacity: 0;
position: absolute;
pointer-events: none;
background: $overlay_dark;
display: block;
max-width: 200px;
padding: 5px;
color: $white;
font-size: 11px;
line-height: 11px;
top: -16px;
left: 4px;
z-index: 97;
&::before {
content: '';
display: block;
width: 6px;
height: 6px;
background: $overlay_dark;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: -3px;
left: 9px;
}
}
&:hover {
.tooltip {
opacity: 1;
top: -18px;
}
}
}
@include responsive( $bp_medium ){
.right-padding { padding-right: 20px; }
.left-padding { padding-left: 20px; }
.right-padding {
padding-right: 20px;
}
.left-padding {
padding-left: 20px;
}
h1 {
font-size: 30px;

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

@ -14,6 +14,7 @@ $green: #47af2a;
$blue: #32b5f2;
$yellow: #FFF39C;
$orange: #f16f19;
$overlay_dark: rgba(10, 10, 10, 0.95);
$bp_wide: 1000px;
$bp_medium: 800px;