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

Refining icons; Queue parallax; Forms

Browse Source
This commit is contained in:
James Barnsley
2017-07-26 15:24:18 +12:00
parent 0c38bdd8b8
commit e3a5316bac
19 changed files with 102 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/icons/back.svg
View File

@ -1,11 +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) -->
<!-- Generator: Adobe Illustrator 21.1.0, 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"/>
<path d="M3.8,14c0,0.1,0.1,0.2,0.2,0.2h1c0.1,0,0.2-0.1,0.2-0.2V2c0-0.1-0.1-0.2-0.2-0.2H4C3.9,1.8,3.8,1.9,3.8,2V14z"/>
</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"/>
<path d="M11.4,2.3c0-0.1-0.1-0.1-0.2-0.1L4.6,7.9c-0.1,0.1-0.1,0.2,0,0.3l6.6,5.7c0.1,0.1,0.2,0,0.2-0.1V2.3z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 624 B

After

Width:  |  Height:  |  Size: 611 B

7
src/assets/icons/pause.svg
View File

@ -1,11 +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) -->
<!-- Generator: Adobe Illustrator 21.1.0, 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"/>
<path d="M6.2,13.8c0,0.1-0.1,0.2-0.2,0.2H3.6c-0.1,0-0.2-0.1-0.2-0.2V2.2C3.4,2.1,3.5,2,3.6,2h2.4c0.1,0,0.2,0.1,0.2,0.2V13.8z"/>
</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"/>
<path d="M12.6,13.8c0,0.1-0.1,0.2-0.2,0.2h-2.4c-0.1,0-0.2-0.1-0.2-0.2V2.2C9.9,2.1,9.9,2,10.1,2h2.4c0.1,0,0.2,0.1,0.2,0.2V13.8z"
/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 614 B

After

Width:  |  Height:  |  Size: 644 B

10
src/assets/icons/play.svg
View File

@ -1,14 +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) -->
<!-- Generator: Adobe Illustrator 21.1.0, 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>
<g>
<g>
<g>
<path d="M4.6,1.9C3.9,1.4,3.4,1.7,3.4,2.5v10.8c0,0.8,0.6,1.1,1.2,0.7l7.9-5.2c0.7-0.5,0.7-1.2,0-1.7L4.6,1.9z"/>
</g>
</g>
</g>
<path d="M3.4,1.6c0-0.1,0.1-0.2,0.2-0.1l9.6,6.3c0.1,0.1,0.1,0.2,0,0.2l-9.6,6.3c-0.1,0.1-0.2,0-0.2-0.1V1.6z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 480 B

7
src/assets/icons/skip.svg
View File

@ -1,12 +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) -->
<!-- Generator: Adobe Illustrator 21.1.0, 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"/>
<path d="M11.4,14c0,0.1-0.1,0.2-0.2,0.2h-1c-0.1,0-0.2-0.1-0.2-0.2V2c0-0.1,0.1-0.2,0.2-0.2h1c0.1,0,0.2,0.1,0.2,0.2V14z"/>
</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
"/>
<path d="M3.8,2.3c0-0.1,0.1-0.1,0.2-0.1l6.6,5.7c0.1,0.1,0.1,0.2,0,0.3L4,13.8c-0.1,0.1-0.2,0-0.2-0.1V2.3z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 627 B

After

Width:  |  Height:  |  Size: 612 B

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

@ -1,8 +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) -->
<!-- Generator: Adobe Illustrator 21.1.0, 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">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<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"/>
<path class="st0" d="M14,13.8c0,0.1-0.1,0.2-0.2,0.2H2.2C2.1,14,2,13.9,2,13.8V2.2C2,2.1,2.1,2,2.2,2h11.6C13.9,2,14,2.1,14,2.2
V13.8z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 490 B

After

Width:  |  Height:  |  Size: 565 B

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

@ -71,7 +71,7 @@ class PlaybackControls extends React.Component{
return (
<div className={(this.state.expanded ? "expanded playback-controls" : "playback-controls")}>
<Link className="current-track" to={(this.props.current_track && this.props.current_track.album ? global.baseURL+'album/'+this.props.current_track.album.uri : null)}>
<div className="current-track">
<div className="thumbnail-wrapper" onClick={e => this.handleThumbnailClick(e)}>
<Thumbnail size="small" images={images} />
</div>
@ -79,9 +79,9 @@ class PlaybackControls extends React.Component{
{ this.props.current_track ? this.props.current_track.name : <span>-</span> }
</div>
<div className="artist">
{ this.props.current_track ? <ArtistSentence nolinks artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
</div>
</Link>
</div>
<section className="playback">
<a className="control previous" onClick={() => this.props.mopidyActions.previous()}>

10
src/js/components/TrackList.js
View File

@ -155,11 +155,11 @@ class TrackList extends React.Component{
this.playTracks()
}
handleContextMenu(e,track_key){
handleContextMenu(e,track_key = null){
let selected_tracks = this.props.selected_tracks
// Not already selected, so select it prior to triggering menu
if (!selected_tracks.includes(track_key)){
if (track_key && !selected_tracks.includes(track_key)){
selected_tracks = [track_key]
this.props.uiActions.setSelectedTracks(selected_tracks)
}
@ -204,14 +204,14 @@ class TrackList extends React.Component{
// We've selected a track further down the list,
// so proceed normally
if (last_selected_track_index < newly_selected_track_index){
var start = last_selected_track_index
var start = last_selected_track_index+1
var end = newly_selected_track_index
// Selected a track up the list, so
// our last selected is the END of our range
} else {
var start = newly_selected_track_index
var end = last_selected_track_index
var end = last_selected_track_index-1
}
if (start !== false && start >= 0 && end !== false && end >= 0){
@ -403,7 +403,7 @@ class TrackList extends React.Component{
}
)
}
{this.digestTracksKeys() ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, false)} /> : null}
{this.props.selected_tracks.length > 0 ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, false)} /> : null}
</div>
);
}

29
src/js/views/Queue.js
View File

@ -5,6 +5,7 @@ import { hashHistory, Link } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import Parallax from '../components/Parallax'
import TrackList from '../components/TrackList'
import Track from '../components/Track'
import Dater from '../components/Dater'
@ -14,6 +15,7 @@ import ArtistSentence from '../components/ArtistSentence'
import Thumbnail from '../components/Thumbnail'
import Header from '../components/Header'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'
import * as spotifyActions from '../services/spotify/actions'
@ -57,11 +59,8 @@ class Queue extends React.Component{
)
}
renderArtwork(){
if(
!this.props.current_track ||
!this.props.current_track.album ||
!this.props.current_track.album.images ){
renderArtwork(image){
if (!image){
return (
<span className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'}>
{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
@ -70,22 +69,22 @@ class Queue extends React.Component{
)
}
var images = []
if (this.props.current_track && this.props.current_track.album && this.props.current_track.album.images){
images = this.props.current_track.album.images
}
var link = null
if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri
return (
<Link className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'} to={link} onContextMenu={e => this.handleContextMenu(e,this.props.current_track.album)}>
{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
<Thumbnail size="huge" images={images} canZoom />
<Thumbnail size="huge" image={image} canZoom />
</Link>
)
}
render(){
var image = null
if (this.props.current_track && this.props.current_track.album !== undefined && this.props.current_track.album.images){
image = helpers.sizedImages(this.props.current_track.album.images).huge
}
var options = (
<span>
<button className="no-hover" onClick={e => this.props.uiActions.openModal('edit_radio')}>
@ -110,12 +109,14 @@ class Queue extends React.Component{
return (
<div className="view queue-view">
<Header icon="play" title="Now playing" options={options} uiActions={this.props.uiActions} />
<Header icon="play" className="overlay" title="Now playing" options={options} uiActions={this.props.uiActions} />
<Parallax blur image={image} />
<div className="content-wrapper">
<div className="current-track">
{ this.renderArtwork() }
{ this.renderArtwork(image) }
<div className="title">
{this.props.current_track ? this.props.current_track.name : <span>-</span>}
</div>
@ -152,7 +153,7 @@ const mapStateToProps = (state, ownProps) => {
radio: state.ui.radio,
radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false),
current_tracklist: state.ui.current_tracklist,
current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null),
current_track: (state.ui.current_track !== undefined && state.ui.tracks !== undefined && state.ui.tracks[state.ui.current_track.uri] !== undefined ? state.ui.tracks[state.ui.current_track.uri] : null)
}
}

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

@ -12,17 +12,17 @@
z-index: 99;
.liner {
width: 160px;
width: 190px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
border-radius: 3px;
background: $darkest_grey;
font-size: 13px;
font-weight: 600;
background: $grey;
font-size: 14px;
font-weight: 500;
font-family: "Overpass";
.title {
display: block;
padding: 8px 12px;
padding: 10px 14px;
font-weight: bold;
box-sizing: border-box;
position: relative;
@ -121,7 +121,7 @@
width: 0;
height: 100%;
overflow-y: scroll;
background: $darkest_grey;
background: lighten($grey, 10%);
z-index: 3;
border-radius: 3px;

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

@ -12,7 +12,7 @@
display: block;
position: relative;
padding: 14px 10px;
padding: 14px 10px 13px;
margin: 0 -10px -1px -10px;
cursor: pointer;
border-radius: 3px;

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

@ -42,7 +42,7 @@
}
&.lazy-loader {
padding: 20px 0 40px;
padding: 0;
.loader {
height: 40px;

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

@ -246,6 +246,12 @@
}
}
&.send_authorization {
.list {
padding-top: 40px;
}
}
&.receive_authorization {
.user-details {
@include clearfix();

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

@ -12,7 +12,6 @@
.current-track {
@include animate();
cursor: pointer;
position: absolute;
bottom: 50px;
width: 220px;
@ -23,6 +22,7 @@
.thumbnail {
float: left;
margin: 12px;
cursor: pointer;
&:before {
@include animate();
@ -127,7 +127,7 @@
}
&.progress {
bottom: 12px;
bottom: 10px;
left: 140px;
right: 280px;
padding-left: 20px;
@ -136,7 +136,7 @@
.slider {
position: absolute;
bottom: 0;
bottom: 2px;
left: 60px;
right: 60px;
}
@ -208,6 +208,7 @@
left: 60px;
right: 60px;
text-align: center;
font-size: 12px;
.title {
padding-top: 0;

3
src/scss/components/_sidebar.scss
View File

@ -5,11 +5,12 @@ aside{
left: 0;
bottom: 0;
z-index: 96;
width: 219px;
width: 220px;
overflow: hidden;
background: $darkest_grey;
border-right: 1px solid lighten($dark_grey, 2%);
color: $white;
box-sizing: border-box;
.liner {
overflow-y: auto;

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

@ -5,7 +5,7 @@
.track {
position: absolute;
background: $dark_grey;
background: $grey;
border-radius: 2px;
.progress {
@ -27,7 +27,7 @@
height: 20px;
.track {
height: 5px;
height: 4px;
top: 42%;
right: 0;
left: 0;

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

@ -4,8 +4,9 @@ body,
html {
background: $dark_grey;
color: $light_grey;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-family: "Overpass", Helvetica, Arial, sans-serif;
font-size: 14px;
letter-spacing: -0.01rem;
touch-action: manipulation;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
@ -77,7 +78,9 @@ main {
pre {
padding: 20px;
background: $faint_grey;
background: $darkest_grey;
border-radius: 3px;
color: $white;
white-space: pre-wrap;
word-wrap: break-word;
}

36
src/scss/global/_forms.scss
View File

@ -7,7 +7,6 @@
border: 0;
}
button,
textarea,
input[type="text"],
input[type="email"],
@ -18,8 +17,10 @@ select {
padding: 10px 14px;
background: rgba(255,255,255,0.1);
color: $white;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-family: "Overpass", Helvetica, Arial, sans-serif;
font-size: 14px;
border-radius: 3px;
letter-spacing: -0.01rem;
&:focus,
&:active {
@ -27,6 +28,12 @@ select {
}
}
select {
option {
color: $darkest_grey;
}
}
.button-wrapper {
padding: 10px 0;
margin-top: -1px;
@ -50,25 +57,29 @@ input[type="button"],
input[type="submit"] {
@include animate();
@include feature_font();
@include gradient_overlay();
font-size: 14px;
color: $black;
display: inline-block;
padding: 9px 30px 7px;
margin: 0 20px 10px 0;
color: $black;
background: $white;
font-size: 14px;
box-sizing: border-box;
border-radius: 3px;
vertical-align: middle;
position: relative;
border: 0 !important;
cursor: pointer;
letter-spacing: -0.01rem;
&:not(.no-hover){
@include gradient_overlay(3px, 0.05);
}
.notouch &:not(.no-hover):hover {
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
&:before {
opacity: 0.15;
opacity: 0.2;
}
}
@ -150,13 +161,12 @@ input[type="submit"] {
&[disabled="disabled"]{
opacity: 0.5;
cursor: not-allowed !important;
color: $mid_grey;
border-color: $mid_grey;
background: transparent;
&,
.notouch &:hover,
&:active {
color: $mid_grey;
border-color: $mid_grey;
background: transparent;
&:before {
opacity: 0.15;
}
}
@ -178,7 +188,7 @@ input[type="submit"] {
.field {
display: block;
padding-bottom: 8px;
padding-bottom: 12px;
@include clearfix;
.name {

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

@ -208,9 +208,9 @@ $bp_shallow: 650px;
opacity: $opacity;
z-index: 9;
pointer-events: none;
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));
background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
background: -o-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
background: linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
}
}

9
src/scss/views/_queue.scss
View File

@ -1,15 +1,20 @@
.queue-view {
.parallax {
opacity: 0.5;
margin-bottom: -45vh;
}
.current-track {
text-align: center;
padding-bottom: 40px;
padding: 60px 0;
.artwork {
position: relative;
margin: 0 auto;
width: 60%;
max-width: 400px;
max-width: 600px;
display: block;
border: 0 !important;