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

Removing X image placeholder in favor of contextual icons

Browse Source
This commit is contained in:
James Barnsley
2020-04-16 20:43:02 +12:00
parent e4267256af
commit 0021883913
11 changed files with 85 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
mopidy_iris/static/app.css
View File

@ -4308,6 +4308,15 @@ select {
perspective: 100px;
width: 100%;
max-width: 300px; }
.thumbnail__placeholder.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-0.5em, -0.5em);
opacity: 0.15;
font-size: 3rem;
line-height: 1em;
width: 1em; }
.thumbnail__image {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;

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

File diff suppressed because one or more lines are too long

32
mopidy_iris/static/app.js
View File

@ -66878,7 +66878,8 @@ var GridItem = function (_React$Component) {
glow: true,
size: 'medium',
className: 'grid__item__thumbnail',
images: item.images || item.icons
images: item.images || item.icons,
type: type
}),
_react2.default.createElement(
'div',
@ -71646,10 +71647,35 @@ exports.default = (0, _react.memo)(function (props) {
);
}
var placeholderIcon = function placeholderIcon() {
switch (props.type) {
case 'artist':
case 'user':
return 'person';
case 'album':
return 'album';
case 'playlist':
return 'queue_music';
case 'track':
return 'audio_track';
default:
return 'image';
};
};
var placeholder = 'image';
return _react2.default.createElement(
'div',
{ className: class_name },
props.useImageTag ? _react2.default.createElement('img', { alt: 'Artwork thumbnail', className: 'thumbnail__image thumbnail__image--use-image-tag', src: '' + (image || '/iris/assets/no-image.svg') }) : _react2.default.createElement('div', { className: 'thumbnail__image', style: { backgroundImage: 'url("' + (image || '/iris/assets/no-image.svg') + '")' } }),
!image && _react2.default.createElement(_Icon2.default, { className: 'thumbnail__placeholder', name: placeholderIcon() }),
props.useImageTag && image ? _react2.default.createElement('img', {
alt: 'Artwork thumbnail',
className: 'thumbnail__image thumbnail__image--use-image-tag',
src: image
}) : _react2.default.createElement('div', {
className: 'thumbnail__image',
style: { backgroundImage: 'url("' + image + '")' }
}),
props.glow && image && _react2.default.createElement('div', { className: 'thumbnail__image thumbnail__image--glow', style: { backgroundImage: 'url("' + image + '")' } }),
_react2.default.createElement(
'div',
@ -88611,7 +88637,7 @@ var Artist = function (_React$Component) {
_react2.default.createElement(
'div',
{ className: 'heading__thumbnail' },
_react2.default.createElement(_Thumbnail2.default, { size: 'medium', circle: true, canZoom: true, image: image })
_react2.default.createElement(_Thumbnail2.default, { size: 'medium', circle: true, canZoom: true, type: 'artist', image: image })
),
_react2.default.createElement(
'div',

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

File diff suppressed because one or more lines are too long

8
mopidy_iris/static/assets/no-image.svg
View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="4.167" x2="27.833" y2="27.833" opacity="0.3" />
<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="27.833" x2="27.833" y2="4.167" opacity="0.3" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 765 B

2
mopidy_iris/static/index.html
View File

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1587010996";
var build = "1587020100";
var version = "3.46.0";
// Construct the script tag

8
src/assets/no-image.svg
View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="4.167" x2="27.833" y2="27.833" opacity="0.3" />
<line fill="none" stroke="#777777" stroke-width="0.1417" stroke-miterlimit="10" x1="4.167" y1="27.833" x2="27.833" y2="4.167" opacity="0.3" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 765 B

1
src/js/components/GridItem.js
View File

@ -118,6 +118,7 @@ export default class GridItem extends React.Component {
size="medium"
className="grid__item__thumbnail"
images={item.images || item.icons}
type={type}
/>
<div className="grid__item__name">
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}

33
src/js/components/Thumbnail.js
View File

@ -52,12 +52,39 @@ export default memo((props) => {
zoom_icon = <Link className="thumbnail__zoom" to={`/image-zoom?url=${image}`}><Icon name="search" /></Link>;
}
const placeholderIcon = () => {
switch (props.type) {
case 'artist':
case 'user':
return 'person';
case 'album':
return 'album';
case 'playlist':
return 'queue_music';
case 'track':
return 'audio_track';
default:
return 'image';
};
}
let placeholder = 'image';
return (
<div className={class_name}>
{props.useImageTag ? (
<img alt="Artwork thumbnail" className="thumbnail__image thumbnail__image--use-image-tag" src={`${image || '/iris/assets/no-image.svg'}`} />
{!image && (
<Icon className="thumbnail__placeholder" name={placeholderIcon()} />
)}
{props.useImageTag && image ? (
<img
alt="Artwork thumbnail"
className="thumbnail__image thumbnail__image--use-image-tag"
src={image}
/>
) : (
<div className="thumbnail__image" style={{ backgroundImage: `url("${image || '/iris/assets/no-image.svg'}")` }} />
<div
className="thumbnail__image"
style={{ backgroundImage: `url("${image}")` }}
/>
)}
{props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{ backgroundImage: `url("${image}")` }} />}
<div className="thumbnail__actions">

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

@ -407,7 +407,7 @@ class Artist extends React.Component {
<div className="heading">
<div className="heading__thumbnail">
<Thumbnail size="medium" circle canZoom image={image} />
<Thumbnail size="medium" circle canZoom type="artist" image={image} />
</div>
<div className="heading__content">

11
src/scss/components/_images.scss
View File

@ -7,6 +7,17 @@
width: 100%;
max-width: 300px;
&__placeholder.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-0.5em, -0.5em);
opacity: 0.15;
font-size: 3rem;
line-height: 1em;
width: 1em;
}
&__image {
@include animate(0.1s);
position: relative;