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

Upgrading non-track lists

Browse Source
This commit is contained in:
James Barnsley
2018-11-08 17:01:02 +13:00
parent 9226a842fd
commit 5c885f3ccb
13 changed files with 13904 additions and 10623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
mopidy_iris/static/app.css
View File

@ -2775,7 +2775,7 @@ h2 {
font-family: "Overpass";
letter-spacing: -0.04em;
font-weight: 600;
font-size: 1.8rem;
font-size: 2rem;
font-weight: 400;
line-height: 2.2rem; }
h2 a {
@ -2789,8 +2789,8 @@ h2 {
h3 {
font-weight: 100;
font-size: 1.4em;
line-height: 1.6em; }
font-size: 1.8rem;
line-height: 1.8rem; }
h3.bottom-padding {
padding-bottom: 30px; }
@ -2798,8 +2798,8 @@ h4 {
font-family: "Overpass";
letter-spacing: -0.04em;
font-weight: 600;
font-size: 1.3rem;
margin-bottom: 14px;
font-size: 1.5rem;
margin-bottom: 16px;
font-weight: 700; }
h4.underline {
padding-bottom: 4px;
@ -3068,13 +3068,17 @@ footer {
@media (max-width: 800px) {
h1 {
font-size: 1.8rem;
font-size: 2rem;
line-height: 1.8rem; }
h2 {
font-size: 1.2rem;
font-size: 1.6rem;
line-height: 1.5rem; }
h3 {
font-size: 1rem; }
font-size: 1.4rem; }
h4 {
font-size: 1.3rem; }
h5 {
font-size: 1.1rem; }
.right-padding {
padding-right: 20px; }
.left-padding {
@ -3916,6 +3920,10 @@ input[type="submit"] {
padding: 12px; } }
.list__item {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
@ -3947,10 +3955,10 @@ input[type="submit"] {
opacity: 0; }
.list__item:not(:first-child) {
border-top: 1px solid rgba(128, 128, 128, 0.05); }
:root .notouch:not(.dragging) .list__item:not(.no-click).list__item--hover {
:root .notouch:not(.dragging) .list__item:not(.no-click):hover {
background: rgba(255, 255, 255, 0.03);
cursor: pointer; }
.light-theme :root .notouch:not(.dragging) .list__item:not(.no-click).list__item--hover {
.light-theme :root .notouch:not(.dragging) .list__item:not(.no-click):hover {
background: rgba(0, 0, 0, 0.03); }
.list__item .select-zone,
.list__item .drag-zone {
@ -4046,7 +4054,7 @@ input[type="submit"] {
.list.related-artist-list .artist {
display: block;
border: 0;
margin: 10px 0; }
margin: 20px 0; }
.list.related-artist-list .artist::after {
content: '';
clear: both;
@ -4057,7 +4065,7 @@ input[type="submit"] {
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 50%;
width: 50px;
width: 60px;
margin-right: 15px;
float: left;
border: 3px solid transparent; }

24198
mopidy_iris/static/app.js
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1541581314";
var build = "1541626234";
var version = "3.29.2";
// Construct the script tag

BIN
src/assets/icons/playing.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

53
src/js/components/List.js
View File

@ -46,19 +46,21 @@ class List extends React.Component{
}
renderValue(row, key_string){
var key = key_string.split('.')
var value = row
var key = key_string.split('.');
var value = row;
for (var i = 0; i < key.length; i++){
if (value[key[i]] === undefined){
return <span>-</span>
return null
} else if (typeof(value[key[i]]) === 'string' && value[key[i]].replace(' ','') == ''){
return <span>-</span>
return null
} else {
value = value[key[i]]
}
}
if (key_string === 'tracks_total') return <span>{value} tracks</span>
if (key_string === 'followers') return <span>{value.toLocaleString()} followers</span>
if (key_string === 'added_at') return <span><Dater type="ago" data={value} /> ago</span>
if (key_string === 'owner') return <URILink type="user" uri={value.uri}>{value.id}</URILink>
if (key_string === 'popularity') return <Popularity full popularity={value} />
@ -82,7 +84,9 @@ class List extends React.Component{
this.props.rows.map((row, row_index) => {
var class_name = 'list__item'
if (row.type ) class_name += ' '+row.type
if (row.type ){
class_name += ' list__item--'+row.type;
}
return (
<div
@ -90,17 +94,46 @@ class List extends React.Component{
key={row_index}
onClick={e => this.handleClick(e, row.uri)}
onContextMenu={e => this.handleContextMenu(e,row)}>
<div className="list__item__actions">
{
this.props.columns.map((col, col_index) => {
var className = 'col '+col.name.replace('.','_')
(this.props.actions ? this.props.actions.map((action, index) => {
return (
<div className={className} key={col_index}>
{ this.renderValue(row, col.name) }
<li className={'list__item__actions__item list__item__actions__item--'+action.replace('.','_')} key={index}>
{this.renderValue(row, action)}
</li>
)
}) : null)
}
{this.props.nocontext ? null : <ContextMenuTrigger className="list__item__actions__item list__item__actions__item--context-menu-trigger subtle" key="context" onTrigger={e => this.handleContextMenu(e, row)} />}
</div>
<div className="list__item__content">
<div className="list__item__name">
{this.renderValue(row, 'name')}
</div>
<ul className="list__item__details">
{
this.props.details.map((detail, index) => {
var value = this.renderValue(row, detail);
if (!value){
return null;
}
return (
<li className={'list__item__details__item list__item__details__item--'+detail.replace('.','_')} key={index}>
{value}
</li>
)
})
}
{this.props.nocontext ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />}
</ul>
</div>
</div>
)
})

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

@ -310,7 +310,7 @@ export default class Track extends React.Component{
<div className="list__item__name">
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
{track.playing ? <Icon name="playing" type="gif"></Icon> : null}
{track.playing ? <Icon name="equalizer"></Icon> : null}
</div>
<ul className="list__item__details">
{track_details}

3
src/js/helpers.js
View File

@ -389,6 +389,7 @@ export let formatAlbum = function(data){
'provider',
'name',
'type',
'added_at',
'release_date',
'popularity',
'images',
@ -440,6 +441,7 @@ export let formatArtist = function(data){
'popularity',
'followers',
'listeners',
'added_at',
'biography',
'biography_link',
'biography_publish_date',
@ -505,6 +507,7 @@ export let formatPlaylist = function(data){
'images',
'popularity',
'followers',
'added_at',
'last_modified_date',
'can_edit',
'owner',

5
src/js/views/library/LibraryAlbums.js
View File

@ -216,8 +216,9 @@ class LibraryAlbums extends React.Component{
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={albums}
columns={columns}
className="album-list"
details={['artists','tracks_total']}
extra_detail={['added_at']}
className="albums"
link_prefix={global.baseURL+"album/"} />
<LazyLoadListener
loadKey={this.state.limit}

19
src/js/views/library/LibraryArtists.js
View File

@ -174,27 +174,14 @@ class LibraryArtists extends React.Component{
artists = artists.slice(0, this.state.limit);
if (this.props.view == 'list'){
var columns = [
{
label: 'Name',
name: 'name'
},
{
label: 'Followers',
name: 'followers.total'
},
{
label: 'Popularity',
name: 'popularity'
}
]
return (
<section className="content-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={artists}
columns={columns}
className="artist-list"
details={['followers','popularity']}
extra_detail={['source']}
className="artists"
link_prefix={global.baseURL+"artist/"} />
<LazyLoadListener
loadKey={this.state.limit}

28
src/js/views/library/LibraryPlaylists.js
View File

@ -124,36 +124,14 @@ class LibraryPlaylists extends React.Component{
playlists = playlists.slice(0, this.state.limit);
if (this.props.view == 'list'){
var columns = [
{
label: 'Name',
name: 'name'
},
{
label: 'Owner',
name: 'owner'
},
{
label: 'Tracks',
name: 'tracks_total'
},
{
label: 'Editable',
name: 'can_edit'
},
{
label: 'Source',
name: 'source'
}
];
return (
<section className="content-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={playlists}
columns={columns}
className="playlist-list"
details={['owner','tracks_total']}
extra_detail={['source']}
className="playlists"
link_prefix={global.baseURL+"playlist/"} />
<LazyLoadListener
loadKey={this.state.limit}

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

@ -1,7 +1,8 @@
.list {
&__item {
@include clearfix;
@include clearfix();
@include animate(0.1s);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
@ -37,7 +38,7 @@
border-top: 1px solid rgba(128,128,128,0.05);
}
:root .notouch:not(.dragging) &:not(.no-click).list__item--hover {
:root .notouch:not(.dragging) &:not(.no-click):hover {
background: rgba(255,255,255,0.03);
cursor: pointer;
@ -197,13 +198,13 @@
.artist {
display: block;
border: 0;
margin: 10px 0;
margin: 20px 0;
@include clearfix;
.thumbnail {
@include animate();
border-radius: 50%;
width: 50px;
width: 60px;
margin-right: 15px;
float: left;
border: 3px solid transparent;

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

@ -184,7 +184,7 @@ h1 {
h2 {
@include feature_font();
font-size: 1.8rem;
font-size: 2rem;
font-weight: 400;
line-height: 2.2rem;
@ -207,8 +207,8 @@ h2 {
h3 {
font-weight: 100;
font-size: 1.4em;
line-height: 1.6em;
font-size: 1.8rem;
line-height: 1.8rem;
&.bottom-padding {
padding-bottom: 30px;
@ -217,8 +217,8 @@ h3 {
h4 {
@include feature_font();
font-size: 1.3rem;
margin-bottom: 14px;
font-size: 1.5rem;
margin-bottom: 16px;
font-weight: 700;
&.underline {
@ -501,17 +501,25 @@ footer {
@include responsive($bp_medium){
h1 {
font-size: 1.8rem;
font-size: 2rem;
line-height: 1.8rem;
}
h2 {
font-size: 1.2rem;
font-size: 1.6rem;
line-height: 1.5rem;
}
h3 {
font-size: 1rem;
font-size: 1.4rem;
}
h4 {
font-size: 1.3rem;
}
h5 {
font-size: 1.1rem;
}
.right-padding {