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

Consistency of icons

Browse Source
This commit is contained in:
James Barnsley
2018-05-16 21:08:45 +12:00
parent eb89ac29ee
commit 17a1169fd2
19 changed files with 23516 additions and 25465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
mopidy_iris/static/app.css
View File

@ -3007,6 +3007,11 @@ input[type="submit"] {
cursor: pointer;
letter-spacing: -0.01rem;
text-align: center; }
.button .icon,
button .icon,
input[type="button"] .icon,
input[type="submit"] .icon {
padding-right: 8px; }
.button:not(.no-hover),
button:not(.no-hover),
input[type="button"]:not(.no-hover),
@ -3556,12 +3561,6 @@ input[type="submit"] {
box-sizing: border-box; } }
.context-menu-trigger {
-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;
position: relative;
border-radius: 3px;
display: inline-block;
padding: 14px 12px;
cursor: pointer;
@ -3570,45 +3569,42 @@ input[type="submit"] {
position: relative;
border-radius: 3px;
text-align: center; }
.context-menu-trigger:before {
-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;
.actions .context-menu-trigger {
position: relative;
border-radius: 3px;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 9;
pointer-events: none;
background: -webkit-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: -moz-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
font-size: 24px;
padding: 2px 10px 1px; }
.actions .context-menu-trigger:before {
-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;
border-radius: 3px;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 9;
pointer-events: none;
background: -webkit-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: -moz-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
.actions .context-menu-trigger:hover {
cursor: pointer;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); }
.actions .context-menu-trigger:hover:before {
opacity: 0.15; }
.actions .context-menu-trigger:active {
margin-top: 0px;
margin-bottom: -1px; }
h4 .context-menu-trigger,
h4 .context-menu-trigger:active {
margin: -8px 0 0 10px; }
.context-menu-trigger .dot {
width: 6px;
height: 6px;
border-radius: 5px;
background: #FFFFFF;
display: inline-block;
margin: 1px;
pointer-events: none; }
.context-menu-trigger:active {
margin-top: 0px;
margin-bottom: -1px; }
.context-menu-trigger:hover {
cursor: pointer;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); }
.context-menu-trigger:hover:before {
opacity: 0.15; }
.loader {
height: 120px;
@ -4366,18 +4362,15 @@ input[type="submit"] {
width: 100px;
text-align: center; }
.playback-controls section.volume {
bottom: 10px;
bottom: 6px;
right: 20px;
width: 150px; }
width: 150px;
font-size: 18px; }
.playback-controls section.volume .modal-trigger {
display: none; }
.playback-controls section.volume .control {
position: absolute;
bottom: 0;
left: 0; }
.playback-controls section.volume .slider-wrapper {
position: absolute;
bottom: 2px;
bottom: 6px;
right: 0;
left: 30px; }
.playback-controls section.volume .muted .slider .progress {
@ -4452,11 +4445,11 @@ input[type="submit"] {
.snapcast .volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 10px;
padding: 0 5px;
border: 0; }
.snapcast .volume-control .slider-wrapper {
margin-left: 25px; }
margin-left: 30px; }
.snapcast .volume-control.muted .slider .progress {
background: #a3a19f; }
@ -4621,7 +4614,7 @@ aside {
background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
aside nav a .icon {
padding-right: 6px;
padding-right: 8px;
vertical-align: top;
margin-top: -1px;
font-size: 14px; }
@ -4717,12 +4710,8 @@ aside {
pointer-events: none; }
.list .list-item .context-menu-trigger {
position: absolute;
top: 6px;
top: 2px;
right: 0; }
.list .list-item .context-menu-trigger .dot {
width: 4px;
height: 4px;
margin-left: 0; }
.list .list-item .context-menu-trigger:before {
display: none !important; }
.list .list-item .source {
@ -5485,7 +5474,7 @@ main header {
position: relative;
display: inline-block; }
.dropdown-field .label .icon {
padding-right: 6px; }
padding-right: 8px; }
.dropdown-field .label:not(.button) {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;

48760
mopidy_iris/static/app.js
View File

File diff suppressed because it is too large Load Diff

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

@ -77,7 +77,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1526417401";
var build = "1526459564";
var version = "3.18.0";
// Construct the script tag

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

@ -1,6 +1,6 @@
import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'
import Icon from './Icon'
export default class ContextMenuTrigger extends React.Component{
@ -20,12 +20,8 @@ export default class ContextMenuTrigger extends React.Component{
className += ' '+this.props.className
}
return (
<span
className={className}
onClick={e => this.handleClick(e)}>
<span className="dot"></span>
<span className="dot"></span>
<span className="dot"></span>
<span className={className} onClick={e => this.handleClick(e)}>
<Icon name="more_horiz" />
</span>
);
}

6
src/js/components/Fields/VolumeControl.js
View File

@ -1,6 +1,6 @@
import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'
import Icon from '../Icon'
export default class VolumeControl extends React.Component{
@ -53,14 +53,14 @@ export default class VolumeControl extends React.Component{
if (this.props.mute){
return (
<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(false)}>
<FontAwesome className="red-text" name="volume-off" />
<Icon className="red-text" name="volume_off" />
<span className="tooltip">Unmute</span>
</a>
)
} else {
return (
<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(true)}>
<FontAwesome className="muted" name="volume-off" />
<Icon className="muted" name="volume_mute" />
<span className="tooltip">Mute</span>
</a>
)

3
src/js/components/List.js
View File

@ -9,6 +9,7 @@ import ArtistSentence from './ArtistSentence'
import Dater from './Dater'
import URILink from './URILink'
import ContextMenuTrigger from './ContextMenuTrigger'
import Icon from './Icon'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
@ -78,7 +79,7 @@ class List extends React.Component{
if (key_string === 'added_at') return <span><Dater type="ago" data={value} /> ago</span>
if (key_string === 'owner') return <URILink type="user" uri={value.uri}>{value.id}</URILink>
if (key[0] === 'artists') return <ArtistSentence artists={value} />
if (value === true) return <FontAwesome name="check" />
if (value === true) return <Icon name="check" />
if (typeof(value) === 'number') return <span>{value.toLocaleString()}</span>
return <span>{value}</span>
}

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

@ -308,7 +308,7 @@ export default class Track extends React.Component{
}
track_actions.push(
<ContextMenuTrigger key="context" onTrigger={e => this.props.handleContextMenu(e)} />
<ContextMenuTrigger className="subtle" key="context" onTrigger={e => this.props.handleContextMenu(e)} />
)
// If we're touchable, and can sort this tracklist
@ -319,7 +319,7 @@ export default class Track extends React.Component{
<span
className="drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<FontAwesome name="bars" fixedWidth />
<Icon name="drag_indicator" />
</span>
)
}

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

@ -229,7 +229,7 @@ class Artist extends React.Component{
name="Sort"
value={this.props.sort}
options={sort_options}
reverse={this.props.sort_reverse}
selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
</h4>

6
src/js/views/library/LibraryBrowse.js
View File

@ -110,12 +110,10 @@ class LibraryBrowse extends React.Component{
var options = (
<span>
<button className="no-hover" onClick={e => this.playAll(e)}>
<Icon name="play_circle_filled" />&nbsp;
Play all
<Icon name="play_circle_filled" />Play all
</button>
<button className="no-hover" onClick={e => this.goBack(e)}>
<Icon name="keyboard_backspace" />&nbsp;
Back
<Icon name="keyboard_backspace" />Back
</button>
</span>
);

3
src/js/views/library/LibraryPlaylists.js
View File

@ -261,8 +261,7 @@ class LibraryPlaylists extends React.Component{
handleChange={value => {this.props.uiActions.set({ library_playlists_source: value}); this.props.uiActions.hideContextMenu() }}
/>
<button className="no-hover" onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<Icon name="add" />
New
<Icon name="add_box" />New
</button>
</span>
)

3
src/js/views/library/LibraryTracks.js
View File

@ -66,8 +66,7 @@ class LibraryTracks extends React.Component{
var options = (
<span>
<button className="no-hover" onClick={e => this.playAll(e)}>
<Icon name="play_circle_filled" />&nbsp;
Play all
<Icon name="play_circle_filled" />Play all
</button>
</span>
);

46
src/scss/components/_context-menu.scss
View File

@ -282,8 +282,6 @@
}
.context-menu-trigger {
@include animate();
@include gradient_overlay(3px);
display: inline-block;
padding: 14px 12px;
cursor: pointer;
@ -293,32 +291,28 @@
border-radius: 3px;
text-align: center;
.actions & {
@include gradient_overlay(3px);
font-size: 24px;
padding: 2px 10px 1px;
&:hover{
cursor: pointer;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
&:before {
opacity: 0.15;
}
}
&:active {
margin-top: 0px;
margin-bottom: -1px;
}
}
h4 &,
h4 &:active {
margin: -8px 0 0 10px;
}
.dot {
width: 6px;
height: 6px;
border-radius: 5px;
background: $white;
display: inline-block;
margin: 1px;
pointer-events: none;
}
&:active {
margin-top: 0px;
margin-bottom: -1px;
}
&:hover{
cursor: pointer;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
&:before {
opacity: 0.15;
}
}
}

2
src/scss/components/_dropdown-field.scss
View File

@ -9,7 +9,7 @@
.label {
.icon {
padding-right: 6px;
padding-right: 8px;
}
&:not(.button) {

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

@ -43,15 +43,9 @@
.context-menu-trigger {
position: absolute;
top: 6px;
top: 2px;
right: 0;
.dot {
width: 4px;
height: 4px;
margin-left: 0;
}
&:before {
display: none !important;
}

11
src/scss/components/_playback-controls.scss
View File

@ -161,23 +161,18 @@
}
&.volume {
bottom: 10px;
bottom: 6px;
right: 20px;
width: 150px;
font-size: 18px;
.modal-trigger {
display: none;
}
.control {
position: absolute;
bottom: 0;
left: 0;
}
.slider-wrapper {
position: absolute;
bottom: 2px;
bottom: 6px;
right: 0;
left: 30px;
}

2
src/scss/components/_sidebar.scss
View File

@ -56,7 +56,7 @@ aside{
border-radius: 3px;
.icon {
padding-right: 6px;
padding-right: 8px;
vertical-align: top;
margin-top: -1px;
font-size: 14px;

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

@ -10,12 +10,12 @@
.mute-control {
display: inline-block;
float: left;
padding: 0 10px;
padding: 0 5px;
border: 0;
}
.slider-wrapper {
margin-left: 25px;
margin-left: 30px;
}
&.muted {

4
src/scss/global/_forms.scss
View File

@ -89,6 +89,10 @@ input[type="submit"] {
letter-spacing: -0.01rem;
text-align: center;
.icon {
padding-right: 8px;
}
&:not(.no-hover){
@include gradient_overlay(3px, 0.05);
}