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

Icon structure; Adding Genius icon; Fixing LastFM me loader

Browse Source
This commit is contained in:
James Barnsley
2018-08-22 08:13:08 +12:00
parent e8eae52cf2
commit 5e51a95a40
12 changed files with 14397 additions and 10780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
mopidy_iris/static/app.css
View File

File diff suppressed because one or more lines are too long

24529
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 = "1534844405";
var build = "1534879749";
var version = "3.23.2";
// Construct the script tag

13
src/assets/icons/genius.svg Executable file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.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 192 192" style="enable-background:new 0 0 192 192;" xml:space="preserve">
<path fill="white" d="M54.8,38.5c-10,33.6-5.1,64.3,20,89.4s55.9,29.7,89.5,20.2c-17.7,17.6-39.2,24.3-63.4,21.6
c-35-4.1-59.6-30.3-66.6-59.5C27.2,80.8,39.6,50.9,54.8,38.5z"/>
<path fill="white" d="M91,43.9c2.3-4.1,5.5-7.6,9.1-10.7c17.3-14.7,43.6-14.7,61-0.1c2.9,2.4,4.5,5,4.1,9c-0.4,4.6-0.1,9.3-0.1,14.5
c-6.3,0-12.3,0.1-18.2-0.1c-0.8,0-1.6-0.8-2.3-1.3c-14.9-12.7-31.7-16.5-50.5-10.9c-0.8,0.2-1.7,0.3-2.5,0.5
C91.5,44.6,91.2,44.2,91,43.9z"/>
<path fill="white" d="M143,118.2c-0.1-2.4-0.2-4.6-0.3-7.3c-1.3-0.1-2.6-0.2-3.8-0.3c-3.9-0.1-7.8,0.2-11.7-0.1
c-9.3-0.5-16.9-8.2-17-17.1c-0.2-9.6,6.9-17.1,17-17.9c0.2,0.8,0.4,1.6,0.5,2.5c2,9.3,9,15,18.6,15.1c4.8,0.1,9.6,0,14.4,0
c1.2,0,2.6,0.1,4.4,0.2c0,4.7,0.1,9.2-0.1,13.7c0,0.8-0.7,1.6-1.2,2.3C159.7,113.3,149.8,117.6,143,118.2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -15,17 +15,20 @@ export default class Icon extends React.Component{
}
render(){
var className = "icon";
var className = "icon icon--"+(this.props.type ? this.props.type : 'material');
if (this.props.className){
className += ' '+this.props.className;
}
switch (this.props.type){
case 'svg':
var src = require('../../assets/icons/'+this.props.name+'.svg');
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)} />;
default:
className += ' material-icon';
return <i className={className} onClick={e => this.handleClick(e)}>{this.props.name}</i>;
}
}

5
src/js/components/Services.js
View File

@ -162,7 +162,7 @@ class Services extends React.Component{
}
renderLastfm(){
var user_object = (this.props.lastfm.session ? this.props.core.users["lastfm:user:"+this.props.lastfm.session.name] : null);
var user_object = (this.props.lastfm.me ? this.props.core.users["lastfm:user:"+this.props.lastfm.me.name] : null);
if (user_object){
var user = (
<span className="user">
@ -298,9 +298,10 @@ class Services extends React.Component{
if (this.props.genius.me && this.props.core.users["genius:user:"+this.props.genius.me.id]){
var genius_icon = <Thumbnail circle={true} size="small" image={this.props.core.users["genius:user:"+this.props.genius.me.id].photo_url} />
} else {
var genius_icon = <Icon name="extension" />
var genius_icon = <Icon name="genius" type="svg" />
}
return (
<div className="menu">
<div className="menu-item-wrapper">

4
src/js/services/lastfm/actions.js
View File

@ -147,7 +147,9 @@ export function authorizationGranted(data){
}
export function revokeAuthorization(){
return { type: 'LASTFM_AUTHORIZATION_REVOKED' }
return {
type: 'LASTFM_AUTHORIZATION_REVOKED'
}
}

32
src/js/services/lastfm/middleware.js
View File

@ -1,51 +1,27 @@
var helpers = require('./../../helpers')
var lastfmActions = require('./actions')
var uiActions = require('../ui/actions')
var pusherActions = require('../pusher/actions')
var helpers = require('./../../helpers');
var coreActions = require('../core/actions');
const LastfmMiddleware = (function(){
/**
* The actual middleware inteceptor
**/
return store => next => action => {
var state = store.getState();
switch(action.type){
case 'LASTFM_SET':
console.log(action);
next(action);
break;
case 'LASTFM_ME_LOADED':
store.dispatch({
type: 'LASTFM_USER_LOADED',
user: action.me
});
next(action);
break;
case 'LASTFM_USER_LOADED':
var user = Object.assign(
{},
action.user,
action.me,
{
uri: "lastfm:user:"+action.user.name
uri: "lastfm:user:"+action.me.name
}
);
store.dispatch(coreActions.userLoaded(user));
next(action);
break;
// This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);
}
}
})();
export default LastfmMiddleware

2
src/js/services/localstorage/middleware.js
View File

@ -121,7 +121,7 @@ const localstorageMiddleware = (function(){
helpers.setStorage(
'lastfm',
{
me: action.data.session.user
me: action.me
}
);
break;

95
src/scss/components/_icon.scss
View File

@ -1,7 +1,58 @@
/**
* Iris icon font
**/
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;;
src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'iris';
src:
url('../assets/fonts/iris.ttf?wncwx9') format('truetype'),
url('../assets/fonts/iris.woff?wncwx9') format('woff'),
url('../assets/fonts/iris.svg?wncwx9#iris') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
@include noselect();
&--material {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: bottom;
font-size: 1.3em;
margin-bottom: 0.1em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
&--fontawesome {
}
&--svg {
}
}
/*
@font-face {
font-family: 'iris';
@ -168,40 +219,4 @@ $icon-websocket: \e920;
content: "\e922";
}
/**
* Material icons
**/
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;;
src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icon {
@include noselect();
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: bottom;
font-size: 1.3em;
margin-bottom: 0.1em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
*/

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

@ -68,6 +68,10 @@
height: 40px;
margin-top: 10px;
margin-bottom: 15px;
&--svg {
opacity: 0.8;
}
}
.title {