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

More user-friendly editing of commands; COommands style as component

Browse Source
This commit is contained in:
James Barnsley
2018-10-13 15:57:01 +13:00
parent 11f21e252b
commit a4a02bcd6d
33 changed files with 1435 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -343,7 +343,7 @@ class ContextMenu extends React.Component{
)
}
var list = <span className="menu-item-wrapper"><span className="menu-item grey-text">No writable playlists</span></span>
var list = <span className="menu-item-wrapper"><span className="menu-item mid_grey-text">No writable playlists</span></span>
if (playlists.length > 0){
list = playlists.map(playlist => {
return (
@ -522,7 +522,7 @@ class ContextMenu extends React.Component{
var toggle_loved = (
<span className="menu-item-wrapper">
<a className="menu-item">
<span className="label grey-text">
<span className="label mid_grey-text">
Love track
</span>
</a>

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

@ -51,7 +51,7 @@ class DebugInfo extends React.Component{
renderLoadQueue(){
if (!this.props.ui.load_queue){
return <div className="debug-info-item grey-text">Nothing loading</div>;
return <div className="debug-info-item mid_grey-text">Nothing loading</div>;
}
var load_queue = this.props.ui.load_queue
@ -69,7 +69,7 @@ class DebugInfo extends React.Component{
</div>
)
} else {
return <div className="debug-info-item grey-text">Nothing loading</div>;
return <div className="debug-info-item mid_grey-text">Nothing loading</div>;
}
}

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

@ -19,7 +19,7 @@ export default class ErrorBoundary extends React.Component {
render() {
if (this.state.hasError){
// You can render any custom fallback UI
return <p className="grey-text">Failed to render</p>;
return <p className="mid_grey-text">Failed to render</p>;
}
return this.props.children;
}

4
src/js/components/Fields/AddSeedField.js
View File

@ -84,13 +84,13 @@ class AddSeedField extends React.Component{
return (
<div className="type">
<h4 className="grey-text">{type}</h4>
<h4 className="mid_grey-text">{type}</h4>
{
items.map(item => {
return (
<div className="result" key={item.uri} onClick={e => this.handleSelect(e,item)}>
{item.name}
{type == 'tracks' ? <span className="grey-text"> <ArtistSentence artists={item.artists} nolinks /></span> : null}
{type == 'tracks' ? <span className="mid_grey-text"> <ArtistSentence artists={item.artists} nolinks /></span> : null}
</div>
)
})

4
src/js/components/Fields/AddTunabilityField.js
View File

@ -96,13 +96,13 @@ class AddSeedField extends React.Component{
return (
<div className="type">
<h4 className="grey-text">{type}</h4>
<h4 className="mid_grey-text">{type}</h4>
{
items.map(item => {
return (
<div className="result" key={item.uri} onClick={e => this.handleSelect(e,item)}>
{item.name}
{type == 'tracks' ? <span className="grey-text"> <ArtistSentence artists={item.artists} nolinks /></span> : null}
{type == 'tracks' ? <span className="mid_grey-text"> <ArtistSentence artists={item.artists} nolinks /></span> : null}
</div>
)
})

45
src/js/components/Fields/ColourField.js Executable file
View File

@ -0,0 +1,45 @@
import React from 'react';
import Icon from '../Icon';
export default class ColourField extends React.Component{
constructor(props){
super(props);
}
render(){
var colours = [
'',
'mid_grey',
'grey',
'dark_grey',
'black',
'turquoise',
'green',
'blue',
'light_blue',
'yellow',
'orange',
'red'
];
return (
<div className="colour-field">
{
colours.map(colour => {
return (
<div
key={colour}
className={"colour-field__option "+(colour ? colour+"-background " : "")+(this.props.colour == colour ? "colour-field__option--selected" : "")}
onClick={e => this.props.onChange(colour)}>
{this.props.colour == colour ? <Icon name="check" className="colour-field__option__icon" /> : null}
</div>
);
})
}
</div>
);
}
}

2
src/js/components/Fields/DropdownField.js
View File

@ -118,7 +118,7 @@ export default class DropdownField extends React.Component{
options.push({
value: 'select-all',
label: 'Select all',
className: 'grey-text'
className: 'mid_grey-text'
});
}

2
src/js/components/Fields/OutputControl.js
View File

@ -148,7 +148,7 @@ class OutputControl extends React.Component{
return (
<div
key={command.id}
className="commands__item"
className="commands__item commands__item--interactive"
onClick={e => this.props.pusherActions.sendCommand(command.id)}>
<Icon className="commands__item__icon" name={command.icon} />
<span className={command.colour+'-background commands__item__background'}></span>

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

@ -102,7 +102,7 @@ export default class GridItem extends React.Component{
<div className={"grid-item "+this.props.type+"-grid-item"} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
<Thumbnail size="medium" images={images} />
<div className="name">
{item.name ? item.name : <span className="dark-grey-text">{item.uri}</span>}
{item.name ? item.name : <span className="dark-mid_grey-text">{item.uri}</span>}
</div>
<div className="secondary">
{this.props.show_source_icon ? <Icon name={helpers.sourceIcon(item.uri)} type="fontawesome" className="source" /> : null}

10
src/js/components/PusherConnectionList.js
View File

@ -26,7 +26,7 @@ class PusherConnectionList extends React.Component{
render(){
if (!this.props.connected){
return <div className="pusher-connection-list grey-text">Not connected</div>;
return <div className="pusher-connection-list mid_grey-text">Not connected</div>;
}
var connections = [];
@ -37,7 +37,7 @@ class PusherConnectionList extends React.Component{
}
if (connections.length <= 0){
return <div className="pusher-connection-list grey-text">No connections</div>;
return <div className="pusher-connection-list mid_grey-text">No connections</div>;
}
return (
@ -51,10 +51,10 @@ class PusherConnectionList extends React.Component{
return (
<div className={is_me ? 'connection cf me':'connection cf'} key={connection.connection_id}>
<div className="col w30">{ connection.username } {is_me ? <span>(you)</span> : null }</div>
<div className="col w70">
<div className="col col--w30">{ connection.username } {is_me ? <span>(you)</span> : null }</div>
<div className="col col--w70">
{connection.ip}
<span className="grey-text"> ({connection.connection_id})</span>
<span className="mid_grey-text"> ({connection.connection_id})</span>
</div>
</div>
);

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

@ -76,7 +76,7 @@ class Services extends React.Component{
<Thumbnail circle={true} size="small" images={user_object.images} />
<span className="user-name">
{user_object.name ? user_object.name : user_object.id}
{!this.props.spotify.authorization ? <span className="grey-text">&nbsp;&nbsp;(Limited access)</span> : null}
{!this.props.spotify.authorization ? <span className="mid_grey-text">&nbsp;&nbsp;(Limited access)</span> : null}
</span>
</URILink>
)
@ -303,7 +303,7 @@ class Services extends React.Component{
<div className="menu-item__title">
Spotify
</div>
{this.props.spotify.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
{this.props.spotify.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Read-only</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' menu-item--active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'}>
@ -312,7 +312,7 @@ class Services extends React.Component{
<div className="menu-item__title">
LastFM
</div>
{this.props.lastfm.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
{this.props.lastfm.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Read-only</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'genius' ? ' menu-item--active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'}>
@ -321,7 +321,7 @@ class Services extends React.Component{
<div className="menu-item__title">
Genius
</div>
{this.props.genius.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Unauthorized</span>}
{this.props.genius.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Unauthorized</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' menu-item--active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}>
@ -330,7 +330,7 @@ class Services extends React.Component{
<div className="menu-item__title">
Snapcast
</div>
{this.props.pusher.config.snapcast_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
{this.props.pusher.config.snapcast_enabled ? <span className="status green-text">Enabled</span> : <span className="status mid_grey-text">Disabled</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' menu-item--active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}>
@ -339,7 +339,7 @@ class Services extends React.Component{
<div className="menu-item__title">
Icecast
</div>
{this.props.core.http_streaming_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
{this.props.core.http_streaming_enabled ? <span className="status green-text">Enabled</span> : <span className="status mid_grey-text">Disabled</span>}
</div>
</Link>
</div>

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

@ -70,7 +70,7 @@ class Snapcast extends React.Component{
if (!clients || clients.length <= 0){
return (
<div className="text grey-text">
<div className="text mid_grey-text">
No clients
</div>
);
@ -257,7 +257,7 @@ class Snapcast extends React.Component{
<div className="input">
<div className="text">
{group.name} &nbsp;
<span className="grey-text">({group.id})</span>
<span className="mid_grey-text">({group.id})</span>
</div>
</div>
</div>

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

@ -205,7 +205,7 @@ export default class Track extends React.Component{
track_columns.push(
<span className="col name" key="name">
{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
)
@ -247,7 +247,7 @@ export default class Track extends React.Component{
var link = <URILink type={type} uri={track.added_from}>{type}</URILink>;
}
var added = <span><span className="by">{track.added_by}</span><span className="grey-text from"><span className="label">from </span>{link}</span></span>
var added = <span><span className="by">{track.added_by}</span><span className="mid_grey-text from"><span className="label">from </span>{link}</span></span>
} else if (track.added_by){
var added = <span className="by">{track.added_by}</span>
@ -258,7 +258,7 @@ export default class Track extends React.Component{
track_columns.push(
<span className="col name" key="name">
{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
)
@ -292,7 +292,7 @@ export default class Track extends React.Component{
track_columns.push(
<span className="col name" key="name">
{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
)

2
src/js/services/genius/actions.js
View File

@ -172,7 +172,7 @@ export function getTrackLyrics(uri, path){
});
var lyrics_html = lyrics.html();
lyrics_html = lyrics_html.replace(/(\[)/g, '<span class="grey-text">[');
lyrics_html = lyrics_html.replace(/(\[)/g, '<span class="mid_grey-text">[');
lyrics_html = lyrics_html.replace(/(\])/g, ']</span>');
dispatch(coreActions.trackLoaded({

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

@ -147,7 +147,7 @@ class Artist extends React.Component{
return (
<div className="body about">
<div className="col w40 tiles artist-stats">
<div className="col col--w40 tiles artist-stats">
{artist.images ? <div className="tile thumbnail-wrapper"><Thumbnail size="huge" canZoom images={artist.images} /></div> : null}
{artist.images_additional ? <div className="tile thumbnail-wrapper"><Thumbnail size="huge" canZoom images={artist.images_additional} /></div> : null}
{artist.followers ? <div className="tile"><span className="content"><Icon type="fontawesome" name="users" />{artist.followers.toLocaleString()} followers</span></div> : null}
@ -155,11 +155,11 @@ class Artist extends React.Component{
{artist.listeners ? <div className="tile"><span className="content"><Icon type="fontawesome" name="headphones" />{ artist.listeners.toLocaleString() } listeners</span></div> : null }
</div>
<div className="col w60 biography">
<div className="col col--w60 biography">
<section>
{ artist.biography ? <div className="biography-text"><p>{artist.biography}</p><br />
<div className="grey-text">Published: { artist.biography_publish_date }</div>
<div className="grey-text">Origin: <a href={ artist.biography_link } target="_blank">{ artist.biography_link }</a></div></div> : null }
<div className="mid_grey-text">Published: { artist.biography_publish_date }</div>
<div className="mid_grey-text">Origin: <a href={ artist.biography_link } target="_blank">{ artist.biography_link }</a></div></div> : null }
</section>
</div>
</div>
@ -213,7 +213,7 @@ class Artist extends React.Component{
return (
<div className="body overview">
<div className={"top-tracks col w"+(artist.related_artists && artist.related_artists.length > 0 ? "70" : "100")}>
<div className={"top-tracks col col--w"+(artist.related_artists && artist.related_artists.length > 0 ? "70" : "100")}>
<h4>Top tracks</h4>
<div className="list-wrapper">
<TrackList className="artist-track-list" uri={artist.uri} tracks={artist.tracks} />
@ -221,9 +221,9 @@ class Artist extends React.Component{
</div>
</div>
<div className="col w5"></div>
<div className="col col--w5"></div>
{artist.related_artists ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} className="button grey">All related artists</Link></div> : null}
{artist.related_artists ? <div className="col col--w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} className="button grey">All related artists</Link></div> : null}
<div className="cf"></div>

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

@ -205,7 +205,7 @@ class Playlist extends React.Component{
<div className="title">
<h1>{playlist.name}</h1>
{playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: playlist.description}}></h2> : null }
{playlist.description ? <h2 className="description mid_grey-text" dangerouslySetInnerHTML={{__html: playlist.description}}></h2> : null }
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /><span className="tooltip__content">{helpers.uriSource(playlist.uri)} playlist</span></li> : null }

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

@ -60,7 +60,7 @@ class Queue extends React.Component{
var total_time = 0
return (
<div className="queue-stats grey-text">
<div className="queue-stats mid_grey-text">
<span>{this.props.current_tracklist.length} tracks</span>
&nbsp;&nbsp;|&nbsp;&nbsp;
{this.props.current_tracklist.length > 0 ? <Dater type="total-time" data={this.props.current_tracklist} /> : <span>0 mins</span>}

16
src/js/views/Settings.js
View File

@ -161,21 +161,21 @@ class Settings extends React.Component {
}
return (
<div className="list commands">
<div className="list commands-setup">
{
commands.map(command => {
return (
<div className="list__item commands__item commands-setup__item" key={command.id}>
<div className="list__item commands-setup__item" key={command.id}>
<span className="col col--w90">
<Icon name={command.icon} />
<div className="commands__item commands__item--interactive" onClick={e => this.props.pusherActions.sendCommand(command.id, true)}>
<Icon className="commands__item__icon" name={command.icon} />
<span className={command.colour+'-background commands__item__background'}></span>
</div>
&nbsp;&nbsp;
{command.command && command.command.url ? command.command.url : "-"}
</span>
<div className="commands__item__actions">
<a className="commands__item__trigger-button action" onClick={e => this.props.pusherActions.sendCommand(command.id, true)}>
<Icon name="send" />
</a>
<Link className="commands__item__edit-button action" to={global.baseURL+'edit-command/'+command.id}>
<div className="commands-setup__item__actions">
<Link className="commands-setup__item__edit-button action" to={global.baseURL+'edit-command/'+command.id}>
<Icon name="edit" />
</Link>
</div>

4
src/js/views/Track.js
View File

@ -175,7 +175,7 @@ class Track extends React.Component{
return (
<div className="lyrics">
<div className="content" dangerouslySetInnerHTML={{__html: this.props.track.lyrics}}></div>
<div className="origin grey-text">
<div className="origin mid_grey-text">
Origin: <a href={"https://genius.com"+this.props.track.lyrics_path} target="_blank">{"https://genius.com"+this.props.track.lyrics_path}</a>
</div>
</div>
@ -216,7 +216,7 @@ class Track extends React.Component{
<div className="title">
<h1>{track.name}</h1>
<h2 className="grey-text">
<h2 className="mid_grey-text">
{track.album && track.album.uri ? <Link to={global.baseURL+'album/'+track.album.uri}>{track.album.name}</Link> : null}
{track.album && !track.album.uri ? track.album.name : null}
{!track.album ? "Unknown album" : null}

8
src/js/views/discover/DiscoverRecommendations.js
View File

@ -446,7 +446,7 @@ class Discover extends React.Component{
return (
<div className="content-wrapper recommendations-results cf">
<section className="col w70 tracks">
<section className="col col--w70 tracks">
<h4>
Tracks
<div className="pull-right">
@ -457,9 +457,9 @@ class Discover extends React.Component{
<TrackList className="discover-track-list" uri={uri} tracks={tracks} />
</section>
<div className="col w5"></div>
<div className="col col--w5"></div>
<div className="col w25 others">
<div className="col col--w25 others">
<section>
<h4>Artists</h4>
<RelatedArtists artists={artists} />
@ -507,7 +507,7 @@ class Discover extends React.Component{
<div className="liner">
<h1>Explore new music</h1>
<h2 className="grey-text">
<h2 className="mid_grey-text">
Add seeds and musical properties below to build your sound
</h2>
<div className="parameters">

4
src/js/views/modals/AddToPlaylist.js
View File

@ -54,7 +54,7 @@ class AddToPlaylist extends React.Component{
return (
<Modal className="modal--add-to-playlist">
<h1>Add to playlist</h1>
<h2 className="grey-text">Select playlist to add {this.props.uris.length} track{this.props.uris.length>1?'s':null} to</h2>
<h2 className="mid_grey-text">Select playlist to add {this.props.uris.length} track{this.props.uris.length>1?'s':null} to</h2>
{playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
<div className="list small playlists">
{
@ -65,7 +65,7 @@ class AddToPlaylist extends React.Component{
<h3 className="name">{ playlist.name }</h3>
<ul className="details">
<li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
<li>{ playlist.tracks_total ? <span className="grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
<li>{ playlist.tracks_total ? <span className="mid_grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
</ul>
</div>
)

2
src/js/views/modals/AddToQueue.js
View File

@ -38,7 +38,7 @@ class AddToQueue extends React.Component{
return (
<Modal className="modal--add-to-queue">
<h1>Add to queue</h1>
<h2 className="grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
<h2 className="mid_grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field text">

1002
src/js/views/modals/EditCommand.js
View File

File diff suppressed because it is too large Load Diff

6
src/js/views/modals/EditRadio.js
View File

@ -189,8 +189,8 @@ class EditRadio extends React.Component{
seeds.map((seed,index) => {
return (
<div className="list__item" key={seed.uri}>
{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
{!seed.unresolved ? <span className="grey-text">&nbsp;({seed.type})</span> : null}
{seed.unresolved ? <span className="mid_grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
{!seed.unresolved ? <span className="mid_grey-text">&nbsp;({seed.type})</span> : null}
<span className="button discrete remove-uri no-hover" onClick={e => this.removeSeed(seed.uri)}>
<Icon name="delete" />Remove
</span>
@ -212,7 +212,7 @@ class EditRadio extends React.Component{
return (
<Modal className="modal--edit-radio">
<h1>Radio</h1>
<h2 className="grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>
<h2 className="mid_grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>
<form onSubmit={e => {(this.state.enabled ? this.handleUpdate(e) : this.handleStart(e))}}>

10
src/js/views/modals/ShareConfiguration.js
View File

@ -102,7 +102,7 @@ class ShareConfiguration extends React.Component {
<span className="label">
{ connection.username }
&nbsp;
<span className="grey-text">
<span className="mid_grey-text">
({ connection.ip })
</span>
</span>
@ -115,7 +115,7 @@ class ShareConfiguration extends React.Component {
} else {
var recipients = (
<div className="input text">
<span className="grey-text">
<span className="mid_grey-text">
No peer connections
</span>
</div>
@ -152,7 +152,7 @@ class ShareConfiguration extends React.Component {
checked={this.state.spotify}
onChange={ e => this.setState({ spotify: !this.state.spotify })} />
<span className="label">
Spotify authorization <span className="grey-text">&nbsp;Logged in as {this.props.spotify_me.name}</span>
Spotify authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.spotify_me.name}</span>
</span>
</label> : null}
@ -163,7 +163,7 @@ class ShareConfiguration extends React.Component {
checked={this.state.lastfm}
onChange={ e => this.setState({ lastfm: !this.state.lastfm })} />
<span className="label">
LastFM authorization <span className="grey-text">&nbsp;Logged in as {this.props.lastfm_me.name}</span>
LastFM authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.lastfm_me.name}</span>
</span>
</label> : null}
@ -174,7 +174,7 @@ class ShareConfiguration extends React.Component {
checked={this.state.genius}
onChange={ e => this.setState({ genius: !this.state.genius })} />
<span className="label">
Genius authorization <span className="grey-text">&nbsp;Logged in as {this.props.genius_me.name}</span>
Genius authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.genius_me.name}</span>
</span>
</label> : null}
</div>

2
src/scss/app.scss
View File

@ -31,6 +31,8 @@
@import 'components/services';
@import 'components/snapcast';
@import 'components/popularity';
@import 'components/colour-field';
@import 'components/commands';
@import 'views/artist';
@import 'views/user';

25
src/scss/components/_colour-field.scss Executable file
View File

@ -0,0 +1,25 @@
.colour-field {
&__option {
display: inline-block;
border-radius: 3px;
background: colour(grey);
width: 26px;
height: 26px;
margin: 2px 8px 2px 0;
position: relative;
cursor: pointer;
border: 2px solid colour(grey);
&--selected {
border-color: colour(turquoise);
}
&__icon {
position: absolute;
top: 3px;
left: 3px;
font-size: 20px;
}
}
}

48
src/scss/components/_commands.scss Executable file
View File

@ -0,0 +1,48 @@
.commands {
&__item {
text-align: center;
color: colour(white);
display: inline-block;
position: relative;
width: 26px;
height: 26px;
margin-bottom: 4px;
margin-right: 6px;
z-index: 1;
&__icon {
padding-top: 6px;
padding-right: 0 !important;
font-size: 12px;
}
&__background {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 100%;
background: colour(grey);
z-index: -1;
border-radius: 50%;
opacity: 1;
}
&--large {
width: 32px;
height: 32px;
.commands__item__icon {
padding-top: 7px;
font-size: 16px;
}
}
&--interactive {
@include click_feedback(rgba(0,0,0,0.5));
cursor: pointer;
}
}
}

30
src/scss/components/_output-control.scss
View File

@ -52,36 +52,6 @@
&--commands {
@include clearfix();
background: rgba(0,0,0,0.1);
.commands__item {
@include click_feedback(rgba(0,0,0,0.5));
width: 26px;
height: 26px;
margin-bottom: 4px;
text-align: center;
color: colour(white);
cursor: pointer;
margin-right: 6px;
float: left;
&__icon {
padding-top: 7px;
font-size: 12px;
}
&__background {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 100%;
background: colour(light_grey);
z-index: -1;
border-radius: 50%;
opacity: 1;
}
}
}
&:not(:first-child) {

8
src/scss/views/_settings.scss
View File

@ -32,15 +32,19 @@
}
}
.commands {
.commands-setup {
padding-bottom: 20px;
&__item {
position: relative;
.commands__item {
margin-bottom: -5px;
}
&__actions {
position: absolute;
top: 12px;
top: 16px;
right: 0;
.action {