Cleaning line endings with proper JS;
This commit is contained in:
James Barnsley
@ -2440,13 +2440,16 @@
|
||||
@keyframes slideloader {
|
||||
0% {
|
||||
left: 0%;
|
||||
right: 100%; }
|
||||
right: 100%;
|
||||
border-radius: 3px 0 0 3px; }
|
||||
50% {
|
||||
left: 0%;
|
||||
right: 0%; }
|
||||
right: 0%;
|
||||
border-radius: 3px; }
|
||||
100% {
|
||||
left: 100%;
|
||||
right: 0%; } }
|
||||
right: 0%;
|
||||
border-radius: 0 3px 3px 0; } }
|
||||
|
||||
/**
|
||||
* Grid layout
|
||||
@ -2843,7 +2846,7 @@ footer {
|
||||
.flag.warning {
|
||||
background: #f16f19;
|
||||
color: #FFFFFF; }
|
||||
.flag.bad {
|
||||
.flag.error, .flag.bad {
|
||||
background: #cf2d2d;
|
||||
color: #FFFFFF; }
|
||||
.flag.dark {
|
||||
@ -2857,6 +2860,25 @@ footer {
|
||||
line-height: 1.4em;
|
||||
vertical-align: middle; }
|
||||
|
||||
.message {
|
||||
padding: 10px 12px 8px;
|
||||
background: #FFF39C;
|
||||
color: #181818;
|
||||
clear: both;
|
||||
font-size: 14px;
|
||||
border-radius: 3px; }
|
||||
.message.info {
|
||||
background: #FFF39C; }
|
||||
.message.notice {
|
||||
background: #32b5f2;
|
||||
color: #FFFFFF; }
|
||||
.message.warning {
|
||||
background: #f16f19;
|
||||
color: #FFFFFF; }
|
||||
.message.error, .message.bad {
|
||||
background: #cf2d2d;
|
||||
color: #FFFFFF; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
@ -3107,7 +3129,9 @@ input[type="submit"] {
|
||||
input[type="button"].working,
|
||||
input[type="submit"].working {
|
||||
position: relative;
|
||||
cursor: wait !important; }
|
||||
cursor: wait !important;
|
||||
background: #383734;
|
||||
color: #a3a19f; }
|
||||
.button.working:after,
|
||||
button.working:after,
|
||||
input[type="button"].working:after,
|
||||
@ -3117,7 +3141,7 @@ input[type="submit"] {
|
||||
display: block;
|
||||
content: '';
|
||||
animation: slideloader 1s infinite;
|
||||
background: rgba(200, 200, 200, 0.4);
|
||||
background: rgba(200, 200, 200, 0.3);
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -5825,35 +5849,41 @@ main .track-view {
|
||||
.discover-view .intro .liner h2 {
|
||||
padding-bottom: 8px; }
|
||||
|
||||
.discover-view .seeds,
|
||||
.discover-view .tunabilities {
|
||||
padding-top: 30px; }
|
||||
.discover-view .seeds h3,
|
||||
.discover-view .tunabilities h3 {
|
||||
padding-bottom: 6px; }
|
||||
.discover-view .parameters {
|
||||
padding-top: 50px; }
|
||||
.discover-view .parameters::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.discover-view .parameters .seeds,
|
||||
.discover-view .parameters .tunabilities {
|
||||
float: left; }
|
||||
|
||||
.discover-view .seeds .seed {
|
||||
display: inline-block;
|
||||
background: #32b5f2;
|
||||
color: #FFFFFF;
|
||||
padding: 8px 26px 8px 14px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
margin: 0 10px 10px 0;
|
||||
border-radius: 3px; }
|
||||
.discover-view .seeds .seed .type {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
padding: 0 10px 0 5px; }
|
||||
.discover-view .seeds .seed .remove {
|
||||
padding: 0 30px 30px 0;
|
||||
float: left; }
|
||||
.discover-view .seeds .seed .thumbnail-wrapper {
|
||||
float: left;
|
||||
width: 44px;
|
||||
border: 0 !important; }
|
||||
.discover-view .seeds .seed .label .remove {
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer; }
|
||||
padding: 4px;
|
||||
margin-left: 4px; }
|
||||
.discover-view .seeds .seed .label .remove:hover {
|
||||
color: #cf2d2d; }
|
||||
.discover-view .seeds .seed .name {
|
||||
font-size: 16px;
|
||||
padding-top: 3px; }
|
||||
.discover-view .seeds .seed.has-thumbnail .label,
|
||||
.discover-view .seeds .seed.has-thumbnail .name {
|
||||
padding-left: 52px; }
|
||||
|
||||
.discover-view .tunabilities::after {
|
||||
content: '';
|
||||
@ -5864,11 +5894,12 @@ main .track-view {
|
||||
width: 200px;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-right: 20px;
|
||||
padding: 0 30px 30px 0;
|
||||
position: relative; }
|
||||
.discover-view .tunabilities .tunability .input {
|
||||
float: none;
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
padding-top: 4px; }
|
||||
.discover-view .tunabilities .tunability .input-range .input-range__label-container {
|
||||
display: none; }
|
||||
.discover-view .tunabilities .tunability .remove {
|
||||
@ -5883,28 +5914,40 @@ main .track-view {
|
||||
.discover-view .tunabilities .tunability .remove:hover {
|
||||
color: #cf2d2d; }
|
||||
|
||||
.discover-view .autocomplete-field {
|
||||
width: 250px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0; }
|
||||
.discover-view .autocomplete-field .input {
|
||||
float: none;
|
||||
margin: 0 10px 10px 0; }
|
||||
.discover-view .autocomplete-field .input input {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
color: #FFFFFF;
|
||||
padding: 7px 13px;
|
||||
font-size: 16px;
|
||||
border: 1px solid transparent; }
|
||||
.discover-view .autocomplete-field .input input:focus, .discover-view .autocomplete-field .input input:active {
|
||||
border-color: #32b5f2; }
|
||||
.discover-view .autocomplete-field .input:after {
|
||||
background: #32b5f2; }
|
||||
|
||||
.discover-view .actions {
|
||||
padding-top: 60px;
|
||||
text-align: center; }
|
||||
padding-top: 40px; }
|
||||
.discover-view .actions .autocomplete-field {
|
||||
width: 250px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin-right: 1px; }
|
||||
.discover-view .actions .autocomplete-field .input {
|
||||
float: none;
|
||||
margin: 0 10px 10px 0; }
|
||||
.discover-view .actions .autocomplete-field .input input {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
color: #FFFFFF;
|
||||
padding: 15px 13px 10px;
|
||||
font-size: 16px;
|
||||
border: 1px solid transparent;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
.discover-view .actions .autocomplete-field .input input:focus, .discover-view .actions .autocomplete-field .input input:active {
|
||||
border-color: #32b5f2; }
|
||||
.discover-view .actions .autocomplete-field .input:after {
|
||||
background: #32b5f2; }
|
||||
.discover-view .actions .autocomplete-field .results {
|
||||
top: 49px; }
|
||||
.discover-view .actions .dropdown-field .button {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
color: #FFFFFF;
|
||||
padding: 16px 20px 14px 20px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
.discover-view .actions .dropdown-field .options {
|
||||
top: 50px;
|
||||
right: 20px; }
|
||||
|
||||
.discover-view section .grid {
|
||||
padding-bottom: 20px; }
|
||||
@ -5912,14 +5955,18 @@ main .track-view {
|
||||
@media (max-width: 800px) {
|
||||
.discover-view .intro {
|
||||
padding: 40px 20px; }
|
||||
.discover-view .seeds {
|
||||
padding-top: 20px; }
|
||||
.discover-view .tunabilities .tunability {
|
||||
width: 100%;
|
||||
float: none;
|
||||
padding: 15px 0; }
|
||||
.discover-view .tunabilities .dropdown-field {
|
||||
margin-top: 20px; }
|
||||
.discover-view .parameters .seeds {
|
||||
padding-top: 20px;
|
||||
float: none; }
|
||||
.discover-view .parameters .seeds .seed {
|
||||
float: none; }
|
||||
.discover-view .parameters .tunabilities {
|
||||
float: none; }
|
||||
.discover-view .parameters .tunabilities .tunability {
|
||||
width: 100%;
|
||||
float: none; }
|
||||
.discover-view .parameters .add .add-properties {
|
||||
margin-right: 0; }
|
||||
.discover-view .col.tracks {
|
||||
width: 100%; }
|
||||
.discover-view .col.others, .discover-view .col.w5 {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -38,7 +38,7 @@
|
||||
|
||||
// Release details
|
||||
// These are automatically injected to built HTML
|
||||
var build = "1516660429";
|
||||
var build = "1517341290";
|
||||
var version = "3.11.0";
|
||||
|
||||
// Construct the script tag
|
||||
|
||||
@ -73,6 +73,12 @@ class App extends React.Component{
|
||||
});
|
||||
hashHistory.push(global.baseURL);
|
||||
}
|
||||
|
||||
// show initial setup if required
|
||||
/*
|
||||
if (this.props.show_initial_setup){
|
||||
this.props.uiActions.openModal('initial_setup');
|
||||
}*/
|
||||
}
|
||||
|
||||
shouldTriggerShortcut(e){
|
||||
@ -293,6 +299,7 @@ class App extends React.Component{
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
touch_dragging: state.ui.touch_dragging,
|
||||
show_initial_setup: state.ui.show_initial_setup,
|
||||
slim_mode: state.ui.slim_mode,
|
||||
broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
|
||||
volume: (state.mopidy.volume ? state.mopidy.volume : false),
|
||||
|
||||
3
src/js/bootstrap.js
vendored
3
src/js/bootstrap.js
vendored
@ -44,6 +44,7 @@ var initialState = {
|
||||
tracks: {}
|
||||
},
|
||||
ui: {
|
||||
show_initial_setup: true,
|
||||
slim_mode: false,
|
||||
selected_tracks: [],
|
||||
notifications: [],
|
||||
@ -61,7 +62,7 @@ var initialState = {
|
||||
},
|
||||
pusher: {
|
||||
connected: false,
|
||||
username: 'Anonymous',
|
||||
username: false,
|
||||
connections: {},
|
||||
version: {
|
||||
current: '0.0.0'
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
import React, { PropTypes } from 'react';
|
||||
import FontAwesome from 'react-fontawesome';
|
||||
|
||||
import Icon from '../Icon'
|
||||
import Thumbnail from '../Thumbnail'
|
||||
import * as helpers from '../../helpers'
|
||||
import Icon from '../Icon';
|
||||
import Thumbnail from '../Thumbnail';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
export default class AddToPlaylistModal extends React.Component{
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
import React, { PropTypes } from 'react';
|
||||
import FontAwesome from 'react-fontawesome';
|
||||
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
import Icon from '../Icon';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
export default class AddToQueueModal extends React.Component{
|
||||
|
||||
@ -57,7 +57,7 @@ export default class AddToQueueModal extends React.Component{
|
||||
</div>
|
||||
|
||||
<div className="actions centered-text">
|
||||
<button type="submit" className="primary wide">Add</button>
|
||||
<button type="submit" className="primary large">Add</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Link } from 'react-router'
|
||||
import { createStore, bindActionCreators } from 'redux'
|
||||
import React, { PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router';
|
||||
import { createStore, bindActionCreators } from 'redux';
|
||||
|
||||
import * as uiActions from '../../services/ui/actions'
|
||||
import * as helpers from '../../helpers'
|
||||
@ -43,8 +43,8 @@ export default class extends React.Component{
|
||||
</div>
|
||||
|
||||
<div className="actions centered-text">
|
||||
<button onClick={e => this.props.uiActions.closeModal()}>Ignore</button>
|
||||
<button className="primary" onClick={e => this.handleImport(e)}>Import authorization</button>
|
||||
<button className="large" onClick={e => this.props.uiActions.closeModal()}>Ignore</button>
|
||||
<button className="primary large" onClick={e => this.handleImport(e)}>Import authorization</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import React, { PropTypes } from 'react';
|
||||
import FontAwesome from 'react-fontawesome';
|
||||
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
import Icon from '../Icon';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
export default class CreatePlaylistModal extends React.Component{
|
||||
|
||||
@ -122,7 +123,7 @@ export default class CreatePlaylistModal extends React.Component{
|
||||
{this.renderFields()}
|
||||
|
||||
<div className="actions centered-text">
|
||||
<button type="submit" className="primary wide">Create</button>
|
||||
<button type="submit" className="primary large">Create playlist</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
import React from 'react'
|
||||
import React from 'react';
|
||||
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
import Icon from '../Icon';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
export default class EditPlaylistModal extends React.Component{
|
||||
|
||||
@ -98,7 +98,7 @@ export default class EditPlaylistModal extends React.Component{
|
||||
{this.renderFields()}
|
||||
|
||||
<div className="actions centered-text">
|
||||
<button type="submit" className="primary wide">Save</button>
|
||||
<button type="submit" className="primary large">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
import React, { PropTypes } from 'react';
|
||||
import FontAwesome from 'react-fontawesome';
|
||||
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
import Icon from '../Icon';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
export default class EditRadioModal extends React.Component{
|
||||
|
||||
@ -214,8 +214,8 @@ export default class EditRadioModal extends React.Component{
|
||||
|
||||
<form>
|
||||
<div className="actions centered-text">
|
||||
{this.state.enabled ? <button className="destructive wide" onClick={e => this.handleStop(e)}>Stop</button> : null}
|
||||
{this.state.enabled ? <button className="primary wide" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="primary wide" onClick={e => this.handleStart(e)}>Start</button>}
|
||||
{this.state.enabled ? <button className="destructive large" onClick={e => this.handleStop(e)}>Stop</button> : null}
|
||||
{this.state.enabled ? <button className="primary large" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="primary large" onClick={e => this.handleStart(e)}>Start</button>}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Link } from 'react-router'
|
||||
import { createStore, bindActionCreators } from 'redux'
|
||||
import React, { PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router';
|
||||
import { createStore, bindActionCreators } from 'redux';
|
||||
|
||||
import * as uiActions from '../../services/ui/actions'
|
||||
import * as helpers from '../../helpers'
|
||||
|
||||
import Icon from '../Icon'
|
||||
import Icon from '../Icon';
|
||||
import * as uiActions from '../../services/ui/actions';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
class ImageZoomModal extends React.Component{
|
||||
|
||||
|
||||
53
src/js/components/Modal/InitialSetupModal.js
Executable file
53
src/js/components/Modal/InitialSetupModal.js
Executable file
@ -0,0 +1,53 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
|
||||
export default class InitialSetupModal extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
username: 'Anonymous'
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmit(e){
|
||||
// save and falseify show_initial_setup
|
||||
}
|
||||
|
||||
handleCancel(e){
|
||||
// falseify show_initial_setup
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<h1>Welcome to Iris</h1>
|
||||
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||||
|
||||
<div className="field">
|
||||
<div className="name">Username</div>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
onChange={e => this.setState({username: e.target.value.replace(/\W/g, '')})}
|
||||
value={this.state.username } />
|
||||
<div className="description">
|
||||
A non-unique string used to identify this client (no special characters)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="actions centered-text">
|
||||
<button className="large" onClick={e => this.handleCancel(e)}>Skip</button>
|
||||
<button className="primary large" onClick={e => this.handleSubmit(e)}>Save</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -14,7 +14,7 @@ import EditRadioModal from './EditRadioModal'
|
||||
import ImageZoomModal from './ImageZoomModal'
|
||||
import KioskModeModal from './KioskModeModal'
|
||||
import SearchURISchemesModal from './SearchURISchemesModal'
|
||||
import VolumeModal from './VolumeModal'
|
||||
import InitialSetupModal from './InitialSetupModal'
|
||||
import AuthorizationModal_Send from './AuthorizationModal_Send'
|
||||
import AuthorizationModal_Receive from './AuthorizationModal_Receive'
|
||||
|
||||
@ -131,11 +131,9 @@ class Modal extends React.Component{
|
||||
available_uri_schemes={this.props.uri_schemes}
|
||||
data={this.props.modal.data} /> : null }
|
||||
|
||||
{ this.props.modal.name == 'volume' ? <VolumeModal
|
||||
{ this.props.modal.name == 'initial_setup' ? <InitialSetupModal
|
||||
uiActions={this.props.uiActions}
|
||||
mopidyActions={this.props.mopidyActions}
|
||||
volume={this.props.volume}
|
||||
mute={this.props.mute} /> : null }
|
||||
pusherActions={this.props.pusherActions} /> : null }
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
import React, { PropTypes } from 'react';
|
||||
import FontAwesome from 'react-fontawesome';
|
||||
import Sortable from 'react-sortablejs';
|
||||
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
import Icon from '../Icon';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
export default class SearchURISchemesModal extends React.Component{
|
||||
|
||||
@ -95,7 +95,7 @@ export default class SearchURISchemesModal extends React.Component{
|
||||
</div>
|
||||
|
||||
<div className="actions centered-text">
|
||||
<button type="submit" className="primary wide">Save</button>
|
||||
<button type="submit" className="primary large">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
|
||||
export default class VolumeModal extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
}
|
||||
|
||||
changeVolume(e){
|
||||
var slider = e.target;
|
||||
|
||||
var sliderY = e.clientY - slider.getBoundingClientRect().top;
|
||||
var sliderHeight = slider.getBoundingClientRect().height;
|
||||
var percent = 100 - parseInt(sliderY / sliderHeight * 100 );
|
||||
|
||||
this.props.mopidyActions.setVolume(percent )
|
||||
}
|
||||
|
||||
toggleMute(e){
|
||||
this.props.mopidyActions.setMute(!this.props.mute)
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<a className="toggle-mute" onClick={e => this.toggleMute(e)}>
|
||||
{this.props.mute ? <FontAwesome className="muted" name="volume-off" /> : <FontAwesome name="volume-down" />}
|
||||
</a>
|
||||
<div className={this.props.mute ? "slider vertical disabled" : "slider vertical"} onClick={e => this.changeVolume(e)}>
|
||||
<div className="track">
|
||||
<div className="progress" style={{ height: this.props.volume+'%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user