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

Extending new design

Browse Source
This commit is contained in:
James Barnsley
2018-11-07 22:02:53 +13:00
parent ccc8ec26c2
commit 9226a842fd
10 changed files with 10491 additions and 13668 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
mopidy_iris/static/app.css
View File

@ -3924,8 +3924,8 @@ input[type="submit"] {
user-select: none;
display: block;
position: relative;
margin: 0 -10px 0 -10px;
padding: 0 10px;
margin: 0 -20px 0 -20px;
padding: 0 20px;
border-radius: 3px; }
.list__item::after {
content: '';
@ -3945,6 +3945,8 @@ input[type="submit"] {
height: 3px;
background: #32b5f2;
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 {
background: rgba(255, 255, 255, 0.03);
cursor: pointer; }
@ -3975,9 +3977,10 @@ input[type="submit"] {
.list__item--playing .list__item__name {
color: #08d58f; }
.list__item__content {
padding: 14px 0; }
padding: 16px 0 12px; }
.list__item__name {
padding-bottom: 2px; }
padding-bottom: 2px;
font-size: 15px; }
.light-theme .list__item__name .flag {
background: #cecac4;
color: #FFFFFF; }
@ -3986,7 +3989,8 @@ input[type="submit"] {
margin: 0;
opacity: 0.5; }
.list__item__details__item {
display: inline-block; }
display: inline;
overflow-wrap: break-word; }
.list__item__details__item:not(:first-child) {
padding-left: 14px; }
.list__item__details__item:not(:first-child):before {
@ -4004,6 +4008,14 @@ input[type="submit"] {
font-size: 14px; }
.list__item__actions__item--context-menu-trigger:before {
display: none !important; }
.list__item--has-extra-detail .list__item__content {
width: 65%;
float: left; }
.list__item__extra-detail {
float: left;
width: 25%;
padding-top: 26px;
opacity: 0.5; }
.list.track-list .list__item {
cursor: pointer; }
@ -4014,12 +4026,13 @@ input[type="submit"] {
.list.track-list .list__item.has-touch-drag-zone .drag-zone {
position: absolute;
top: 0;
left: 0;
left: 5px;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
color: #a3a19f; }
color: #a3a19f;
padding: 0; }
.list.track-list .list__item.has-touch-drag-zone .drag-zone .icon {
position: absolute;
top: 50%;
@ -4059,31 +4072,25 @@ input[type="submit"] {
cursor: pointer; }
@media (max-width: 800px) {
.list__item {
padding: 12px !important; }
.list__item__details__item--source {
.list__item__content {
padding: 10px 0; }
.list__item__name {
font-size: 14px; }
.list__item__actions {
padding-top: 10px; }
.list__item__extra-detail {
padding-top: 14px; }
.list__item__extra-detail--source {
display: none; }
.list__item__details__item--added {
width: auto !important;
float: none !important;
padding-left: 0.25em; }
.list__item__details__item--added .by,
.list__item__details__item--added .empty {
display: none; }
.list__item__details__item--added .from {
padding-left: 14px;
text-transform: capitalize; }
.list__item__details__item--added .from:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list__item__details__item--added .from:after {
display: none !important; }
.list__item__details__item--added .from .label {
display: none; }
.list__item .context-zone {
top: 14px; } }
.list__item__extra-detail--added .by,
.list__item__extra-detail--added .by-label {
display: none; }
.list__item__extra-detail--added .from {
text-transform: capitalize; }
.list__item__extra-detail--added .from-label {
display: none; }
.list__item .context-zone {
top: 14px; } }
.loader {
height: 120px;
@ -6521,7 +6528,7 @@ main .track-view {
.queue-view .current-track {
text-align: center;
padding: 40px 0; }
padding: 40px 0 60px; }
.queue-view .current-track .artwork {
position: relative;
margin: 0 auto;

23967
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

0
src/assets/playing.gif → mopidy_iris/static/assets/icons/playing.gif Executable file → Normal file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

2
mopidy_iris/static/index.html
View File

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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

4
src/js/components/Icon.js
View File

@ -25,6 +25,10 @@ export default class Icon extends React.Component{
var src = require('../../assets/icons/'+this.props.name+'.svg');
return <img className={className} src={src} onClick={e => this.handleClick(e)} />;
case 'gif':
var src = require('../../assets/icons/'+this.props.name+'.gif');
return <img className={className} src={src} onClick={e => this.handleClick(e)} />;
case 'fontawesome':
return <FontAwesome className={className} type="fontawesome" name={this.props.name} onClick={e => this.handleClick(e)} />;

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

@ -217,9 +217,9 @@ export default class Track extends React.Component{
if (this.props.context == 'history'){
var track_extra_detail = (
<span className="list__item__extra-detail list__item__extra-detail--played_at">
<div className="list__item__extra-detail list__item__extra-detail--played_at">
{track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : '-'}
</span>
</div>
)
} else if (this.props.context == 'queue'){
@ -244,31 +244,29 @@ export default class Track extends React.Component{
}
var track_extra_detail = (
<span className="list__item__actions__item list__item__actions__item--extra-detail list__item__actions__item--added">
<div className="list__item__extra-detail list__item__extra-detail--added">
<span className="by">{track.added_by} </span>
<span className="mid_grey-text from">
<span className="label">from </span>
{link}
</span>
</span>
<span className="from">(from {link})</span>
</div>
);
} else if (track.added_by){
var track_extra_detail = (
<span className="list__item__actions__item list__item__actions__item--extra-detail list__item__actions__item--added">
<div className="list__item__extra-detail list__item__extra-detail--added">
<span className="by">{track.added_by}</span>
</span>
</div>
);
}
}
/*
if (this.props.show_source_icon){
track_details.push(
<li className="list__item__details__item list__item__details__item--source" key="source">
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} fixedWidth />
</li>
)
}
}*/
// If we're touchable, and can sort this tracklist
var drag_zone = null;
@ -284,6 +282,10 @@ export default class Track extends React.Component{
);
}
if (track_extra_detail){
className += " list__item--has-extra-detail";
}
return (
<ErrorBoundary>
<div
@ -299,7 +301,6 @@ export default class Track extends React.Component{
onTouchEnd={e => this.handleTouchEnd(e)}>
<div className="list__item__actions">
{drag_zone}
{track_extra_detail ? track_extra_detail : null}
<div className="list__item__actions__item list__item__actions__item--duration">
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</div>
@ -309,11 +310,13 @@ 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}
</div>
<ul className="list__item__details">
{track_details}
</ul>
</div>
{track_extra_detail ? track_extra_detail : null}
</div>
</ErrorBoundary>
);

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

@ -11,8 +11,8 @@
display: block;
position: relative;
margin: 0 -10px 0 -10px;
padding: 0 10px;
margin: 0 -20px 0 -20px;
padding: 0 20px;
border-radius: 3px;
&:not(.no-click){
@ -33,6 +33,10 @@
opacity: 0;
}
&:not(:first-child){
border-top: 1px solid rgba(128,128,128,0.05);
}
:root .notouch:not(.dragging) &:not(.no-click).list__item--hover {
background: rgba(255,255,255,0.03);
cursor: pointer;
@ -86,11 +90,12 @@
}
&__content {
padding: 14px 0;
padding: 16px 0 12px;
}
&__name {
padding-bottom: 2px;
font-size: 15px;
.light-theme & .flag {
background: colour(light_grey);
@ -104,7 +109,8 @@
opacity: 0.5;
&__item {
display: inline-block;
display: inline;
overflow-wrap: break-word;
&:not(:first-child) {
@include bullet();
@ -127,11 +133,24 @@
display: none !important;
}
}
}
}
&--added {
&--has-extra-detail {
.list__item {
&__content {
width: 65%;
float: left;
}
}
}
&__extra-detail {
float: left;
width: 25%;
padding-top: 26px;
opacity: 0.5;
}
}
&.track-list {
@ -151,12 +170,13 @@
.drag-zone {
position: absolute;
top: 0;
left: 0;
left: 5px;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
color: colour(mid_grey);
padding: 0;
.icon {
position: absolute;
@ -213,37 +233,39 @@
@include responsive($bp_medium){
&__item {
padding: 12px !important;
&__details {
&__item {
&__content {
padding: 10px 0;
}
&--source {
&__name {
font-size: 14px;
}
&__actions {
padding-top: 10px;
}
&__extra-detail {
padding-top: 14px;
&--source {
display: none;
}
&--added {
.by,
.by-label {
display: none;
}
&--added {
width: auto !important;
float: none !important;
padding-left: 0.25em;
.from {
text-transform: capitalize;
}
.by,
.empty {
display: none;
}
.from {
@include bullet();
text-transform: capitalize;
&:after {
display: none !important;
}
.label {
display: none;
}
}
.from-label {
display: none;
}
}
}

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

@ -8,7 +8,7 @@
.current-track {
text-align: center;
padding: 40px 0;
padding: 40px 0 60px;
.artwork {
position: relative;