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

Iconography for player

Browse Source
This commit is contained in:
James Barnsley
2017-07-25 16:33:31 +12:00
parent 7512f03a28
commit d03fe03d7f
9 changed files with 84 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/icons/back.svg Executable file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<g>
<path d="M10.9,13.9c0.2,0.2,0.4,0.1,0.4-0.2V2.3c0-0.3-0.2-0.4-0.4-0.2L4.6,7.7c-0.2,0.2-0.2,0.5,0,0.7L10.9,13.9z"/>
</g>
<g>
<path d="M3.8,13.7c0,0.3,0.2,0.5,0.5,0.5h0.3c0.3,0,0.5-0.2,0.5-0.5V2.3c0-0.3-0.2-0.5-0.5-0.5H4.3C4,1.8,3.8,2,3.8,2.3V13.7z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 624 B

11
src/assets/icons/pause.svg Executable file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<g>
<path d="M12,13.5c0,0.3-0.2,0.5-0.5,0.5h-2C9.2,14,9,13.8,9,13.5v-11C9,2.2,9.2,2,9.5,2h2C11.8,2,12,2.2,12,2.5V13.5z"/>
</g>
<g>
<path d="M7,13.5C7,13.8,6.8,14,6.5,14h-2C4.2,14,4,13.8,4,13.5v-11C4,2.2,4.2,2,4.5,2h2C6.8,2,7,2.2,7,2.5V13.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 614 B

12
src/assets/icons/skip.svg Executable file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<g>
<path d="M4.1,13.9C3.9,14,3.8,14,3.8,13.7V2.3C3.8,2,3.9,2,4.1,2.1l6.3,5.5c0.2,0.2,0.2,0.5,0,0.7L4.1,13.9z"/>
</g>
<g>
<path d="M11.3,13.7c0,0.3-0.2,0.5-0.5,0.5h-0.3c-0.3,0-0.5-0.2-0.5-0.5V2.3c0-0.3,0.2-0.5,0.5-0.5h0.3c0.3,0,0.5,0.2,0.5,0.5V13.7z
"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 627 B

8
src/assets/icons/stop.svg Executable file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<g>
<path d="M14,13.5c0,0.3-0.2,0.5-0.5,0.5h-11C2.2,14,2,13.8,2,13.5v-11C2,2.2,2.2,2,2.5,2h11C13.8,2,14,2.2,14,2.5V13.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 490 B

11
src/js/components/PlaybackControls.js
View File

@ -10,6 +10,7 @@ import VolumeControl from './VolumeControl'
import Dater from './Dater'
import ArtistSentence from './ArtistSentence'
import Thumbnail from './Thumbnail'
import Icon from './Icon'
import * as uiActions from '../services/ui/actions'
import * as mopidyActions from '../services/mopidy/actions'
@ -25,9 +26,9 @@ class PlaybackControls extends React.Component{
}
renderPlayButton(){
var button = <a className="control play" onClick={() => this.props.mopidyActions.play()}><FontAwesome name="play" /> </a>
var button = <a className="control play" onClick={() => this.props.mopidyActions.play()}><Icon name="play" /></a>
if( this.props.play_state == 'playing' ){
button = <a className="control play" onClick={() => this.props.mopidyActions.pause()}><FontAwesome name="pause" /> </a>
button = <a className="control play" onClick={() => this.props.mopidyActions.pause()}><Icon name="pause" /></a>
}
return button;
}
@ -84,14 +85,14 @@ class PlaybackControls extends React.Component{
<section className="playback">
<a className="control previous" onClick={() => this.props.mopidyActions.previous()}>
<FontAwesome name="step-backward" />
<Icon name="back" />
</a>
{ this.renderPlayButton() }
<a className="control stop" onClick={() => this.props.mopidyActions.stop()}>
<FontAwesome name="stop" />
<Icon name="stop" />
</a>
<a className="control next" onClick={() => this.props.mopidyActions.next()}>
<FontAwesome name="step-forward" />
<Icon name="skip" />
</a>
</section>

6
src/js/views/Artist.js
View File

@ -88,9 +88,9 @@ class Artist extends React.Component{
renderSubViewMenu(){
return (
<div className="sub-views">
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri}>Overview</Link>
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/related-artists'}>Related artists</Link>
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/about'}>About</Link>
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri}><h4>Overview</h4></Link>
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/related-artists'}><h4>Related artists</h4></Link>
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/about'}><h4>About</h4></Link>
</div>
)
}

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

@ -31,7 +31,7 @@
}
&.playing {
font-weight: bold;
color: $turquoise;
}
.select-zone,
@ -183,7 +183,7 @@
.artist {
display: block;
border: 0;
margin-bottom: 5px;
margin: 10px 0;
@include clearfix;
.thumbnail {

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

@ -87,14 +87,24 @@
font-size: 12px;
color: $white;
cursor: pointer;
padding: 8px;
padding: 8px 6px;
display: inline-block;
vertical-align: bottom;
opacity: 0.8;
.icon {
width: 12px;
height: 12px;
@include invert();
}
&.play {
font-size: 24px;
margin-bottom: -6px;
.icon {
width: 24px;
height: 24px;
}
}
&.active {

23
src/scss/views/_artist.scss
View File

@ -26,11 +26,12 @@
h1 {
padding-bottom: 25px;
font-size: 4rem;
font-size: 5rem;
line-height: 5rem;
}
.actions {
padding-bottom: 20px;
padding-bottom: 25px;
.context-menu-trigger {
color: $white;
@ -42,13 +43,16 @@
@include feature_font();
color: $white;
display: inline-block;
padding: 8px 0;
margin-right: 25px;
font-size: 15px;
font-weight: 500;
border-bottom: 2px solid transparent;
border-bottom: 3px solid transparent;
cursor: pointer;
h4 {
margin: 8px 0 4px;
}
&.active {
border-color: $white;
}
@ -75,6 +79,17 @@
}
}
@include responsive( $bp_wide ){
.intro {
.liner {
h1 {
font-size: 4rem;
line-height: 4rem;
}
}
}
}
@include responsive( $bp_medium ){
.intro {
margin-bottom: 0;