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

Popularity for responsive; Sources UI more intuitive; Artist bug when sorting albums duplicated URIs

Browse Source
This commit is contained in:
James Barnsley
2018-06-17 13:27:01 +12:00
parent 2837486aef
commit f00582259f
12 changed files with 217 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
mopidy_iris/static/app.css
View File

@ -4854,11 +4854,11 @@ aside {
.list.track-list .list-item {
cursor: pointer; }
.list.track-list .list-item .col.name {
width: 38%; }
width: 36%; }
.list.track-list .list-item .col.artists, .list.track-list .list-item .col.album {
width: 25%; }
.list.track-list .list-item .col.duration {
width: 5%; }
width: 7%; }
.list.track-list .list-item .col.popularity {
width: 3%; }
:root .dragging .list.track-list .list-item.hover, .list.track-list .list-item.touch-drag-hover {
@ -4911,9 +4911,11 @@ aside {
.list.artist-list .list-item {
cursor: pointer; }
.list.artist-list .list-item .col.name {
width: 70%; }
.list.artist-list .list-item .col.followers_total, .list.artist-list .list-item .col.popularity {
width: 15%; }
width: 60%; }
.list.artist-list .list-item .col.followers_total {
width: 25%; }
.list.artist-list .list-item .col.popularity {
width: 10%; }
.list.queue-track-list {
cursor: pointer; }
@ -4931,6 +4933,8 @@ aside {
.list.queue-track-list .list-item .col.added .from:after {
content: ')';
display: inline-block; }
.list.queue-track-list .list-item .col.duration {
width: 5%; }
.list.queue-history-track-list .list-item {
cursor: pointer; }
@ -4999,8 +5003,15 @@ aside {
content: ' followers'; }
.list .list-item .col.tracks_total:after {
content: ' tracks'; }
.list .list-item .col.popularity:after {
content: '% popularity'; }
.list .list-item .col.popularity {
padding-left: 14px; }
.list .list-item .col.popularity:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list .list-item .col.popularity .popularity-bars {
margin: 0.1em 0 0 0; }
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
display: none; }
.list .list-item.header {
@ -5033,7 +5044,25 @@ aside {
.list.queue-history-track-list .list-item .source {
display: none !important; }
.list.track-list .list-item.can-sort {
padding-left: 40px !important; } }
padding-left: 40px !important; }
.list.album-list .list-item .col.added_at, .list.album-list .list-item .col.source {
display: none !important; }
.list.album-list .list-item .col.tracks_total {
padding-left: 14px; }
.list.album-list .list-item .col.tracks_total:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list.playlist-list .list-item .col.can_edit, .list.playlist-list .list-item .col.source {
display: none !important; }
.list.playlist-list .list-item .col.tracks_total {
padding-left: 14px; }
.list.playlist-list .list-item .col.tracks_total:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; } }
.grid .grid-item-wrapper {
display: inline-block; }
@ -5773,15 +5802,21 @@ main header {
transition: all 0.2s ease-in-out;
display: inline-block;
border-radius: 3px;
padding: 3px 6px;
padding: 6px 8px 4px 3px;
margin: 0 5px 5px 0;
cursor: move;
font-size: 12px;
font-weight: normal; }
font-weight: normal;
background: rgba(255, 255, 255, 0.1);
color: #FFFFFF; }
.sources-priority-field .source.sortable-chosen {
background: #383734; }
.sources-priority-field .source .icon {
font-size: 14px;
padding-right: 0.1em;
color: #121212; }
.sources-priority-field .source:hover {
background: #FFFFFF; }
background: rgba(255, 255, 255, 0.2); }
.sources-priority-field .source:focus, .sources-priority-field .source:active {
-webkit-transition: none !important;
-moz-transition: none !important;
@ -5964,20 +5999,23 @@ main header {
.services .service {
margin-top: 5px; } }
.popularity-diagram {
display: block;
.popularity-bars {
display: inline-block;
margin: 0.15em -2px;
text-align: center; }
.popularity-diagram .bar {
vertical-align: top; }
.popularity-bars .bar {
display: inline-block;
width: 2px;
height: 0.5em;
margin: 0.25em 1px;
background: #cecac4;
opacity: 0.25; }
.popularity-diagram .bar.filled {
.popularity-bars .bar.filled {
opacity: 1; }
.popularity-value {
display: none; }
.artist-view .body-loader:not(.lazy-loader) {
padding: 15vh 0; }

33
mopidy_iris/static/app.js
View File

@ -20351,6 +20351,10 @@ var _Icon = __webpack_require__(5);
var _Icon2 = _interopRequireDefault(_Icon);
var _Popularity = __webpack_require__(99);
var _Popularity2 = _interopRequireDefault(_Popularity);
var _helpers = __webpack_require__(1);
var helpers = _interopRequireWildcard(_helpers);
@ -20463,6 +20467,7 @@ var List = function (_React$Component) {
{ type: 'user', uri: value.uri },
value.id
);
if (key_string === 'popularity') return _react2.default.createElement(_Popularity2.default, { full: true, popularity: value });
if (key[0] === 'artists') return _react2.default.createElement(_ArtistSentence2.default, { artists: value });
if (value === true) return _react2.default.createElement(_Icon2.default, { name: 'check' });
if (typeof value === 'number') return _react2.default.createElement(
@ -24817,12 +24822,22 @@ var Popularity = function (_React$Component) {
return _react2.default.createElement(
'span',
{ className: 'popularity-diagram' },
{ className: 'popularity' },
_react2.default.createElement(
'span',
{ className: 'popularity-bars' },
_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 10 ? " filled" : "") }),
_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 30 ? " filled" : "") }),
_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 50 ? " filled" : "") }),
_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 70 ? " filled" : "") }),
_react2.default.createElement('span', { className: "bar" + (this.props.popularity > 90 ? " filled" : "") })
),
_react2.default.createElement(
'span',
{ className: 'popularity-value' },
this.props.popularity,
'% popularity'
)
);
}
}]);
@ -64021,8 +64036,9 @@ var Artist = function (_React$Component) {
var albums = [];
if (this.props.artist.albums_uris) {
for (var i = 0; i < this.props.artist.albums_uris.length; i++) {
var uri = this.props.artist.albums_uris[i];
var albums_uris = helpers.removeDuplicates(this.props.artist.albums_uris);
for (var i = 0; i < albums_uris.length; i++) {
var uri = albums_uris[i];
if (this.props.albums.hasOwnProperty(uri)) {
albums.push(this.props.albums[uri]);
}
@ -68647,6 +68663,7 @@ var SourcesPriority = function (_React$Component) {
return _react2.default.createElement(
'span',
{ className: 'source flag grey', key: scheme, 'data-id': scheme },
_react2.default.createElement(_Icon2.default, { name: 'drag_indicator' }),
name
);
})
@ -76920,15 +76937,6 @@ var LibraryPlaylists = function (_React$Component) {
playlists = playlists.slice(0, this.state.limit);
if (this.props.view == 'list') {
if (this.props.slim_mode) {
var columns = [{
label: 'Name',
name: 'name'
}, {
label: 'Tracks',
name: 'tracks_total'
}];
} else {
var columns = [{
label: 'Name',
name: 'name'
@ -76945,7 +76953,6 @@ var LibraryPlaylists = function (_React$Component) {
label: 'Source',
name: 'source'
}];
}
return _react2.default.createElement(
'section',

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

@ -77,7 +77,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1529109454";
var build = "1529189403";
var version = "3.21.2";
// Construct the script tag

1
src/js/components/Fields/SourcesPriority.js
View File

@ -45,6 +45,7 @@ export default class SourcesPriority extends React.Component{
return (
<span className="source flag grey" key={scheme} data-id={scheme}>
<Icon name="drag_indicator" />
{name}
</span>
);

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

@ -9,6 +9,7 @@ import Dater from './Dater'
import URILink from './URILink'
import ContextMenuTrigger from './ContextMenuTrigger'
import Icon from './Icon'
import Popularity from './Popularity'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
@ -77,6 +78,7 @@ class List extends React.Component{
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} />
if (key[0] === 'artists') return <ArtistSentence artists={value} />
if (value === true) return <Icon name="check" />
if (typeof(value) === 'number') return <span>{value.toLocaleString()}</span>

7
src/js/components/Popularity.js
View File

@ -15,13 +15,18 @@ export default class Popularity extends React.Component{
}
return (
<span className="popularity-diagram">
<span className="popularity">
<span className="popularity-bars">
<span className={"bar"+(this.props.popularity > 10 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 30 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 50 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 70 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 90 ? " filled" : "")}></span>
</span>
<span className="popularity-value">
{this.props.popularity}% popularity
</span>
</span>
);
}
}

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

@ -134,8 +134,9 @@ class Artist extends React.Component{
var albums = [];
if (this.props.artist.albums_uris){
for (var i = 0; i < this.props.artist.albums_uris.length; i++){
var uri = this.props.artist.albums_uris[i];
var albums_uris = helpers.removeDuplicates(this.props.artist.albums_uris);
for (var i = 0; i < albums_uris.length; i++){
var uri = albums_uris[i];
if (this.props.albums.hasOwnProperty(uri)){
albums.push(this.props.albums[uri]);
}

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

@ -120,18 +120,6 @@ class LibraryPlaylists extends React.Component{
playlists = playlists.slice(0, this.state.limit);
if (this.props.view == 'list'){
if (this.props.slim_mode){
var columns = [
{
label: 'Name',
name: 'name'
},
{
label: 'Tracks',
name: 'tracks_total'
}
]
} else {
var columns = [
{
label: 'Name',
@ -153,8 +141,7 @@ class LibraryPlaylists extends React.Component{
label: 'Source',
name: 'source'
}
]
}
];
return (
<section className="content-wrapper">

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

@ -95,14 +95,14 @@
.col {
&.name {
width: 38%;
width: 36%;
}
&.artists,
&.album {
width: 25%;
}
&.duration {
width: 5%;
width: 7%;
}
&.popularity {
width: 3%;
@ -204,11 +204,13 @@
.col {
&.name {
width: 70%;
width: 60%;
}
&.followers_total {
width: 25%;
}
&.followers_total,
&.popularity {
width: 15%;
width: 10%;
}
}
}
@ -243,6 +245,9 @@
}
}
}
&.duration {
width: 5%;
}
}
}
}
@ -350,8 +355,14 @@
content: ' tracks';
}
&.popularity:after {
content: '% popularity';
&.popularity {
@include bullet();
.popularity {
&-bars {
margin: 0.1em 0 0 0;
}
}
}
&.album,
@ -415,9 +426,41 @@
}
&.track-list {
.list-item.can-sort {
.list-item {
&.can-sort {
padding-left: 40px !important;
}
}
}
&.album-list {
.list-item {
.col {
&.added_at,
&.source {
display: none !important;
}
&.tracks_total {
@include bullet();
}
}
}
}
&.playlist-list {
.list-item {
.col {
&.can_edit,
&.source {
display: none !important;
}
&.tracks_total {
@include bullet();
}
}
}
}
}
}

12
src/scss/components/_popularity.scss
View File

@ -1,8 +1,9 @@
.popularity-diagram {
display: block;
.popularity {
&-bars {
display: inline-block;
margin: 0.15em -2px;
text-align: center;
vertical-align: top;
.bar {
display: inline-block;
@ -17,3 +18,8 @@
}
}
}
&-value {
display: none;
}
}

12
src/scss/components/_sources-priority-field.scss
View File

@ -6,18 +6,26 @@
@include animate();
display: inline-block;
border-radius: 3px;
padding: 3px 6px;
padding: 6px 8px 4px 3px;
margin: 0 5px 5px 0;
cursor: move;
font-size: 12px;
font-weight: normal;
background: rgba(255,255,255,0.1);
color: $white;
&.sortable-chosen {
background: $grey;
}
.icon {
font-size: 14px;
padding-right: 0.1em;
color: $darkest_grey;
}
&:hover {
background: $white;
background: rgba(255,255,255,0.2);
}
&:focus,