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

Polishing commands manager; Tweaking icons and actions for feedback

Browse Source
This commit is contained in:
James Barnsley
2019-04-17 08:40:33 +12:00
parent 63d453670f
commit 5dc082e36d
10 changed files with 110 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
mopidy_iris/static/app/app.css
View File

@ -3332,6 +3332,39 @@ select {
.text-button.destructive {
color: #cf2d2d; }
.action {
position: relative;
cursor: pointer; }
@keyframes click_feedback {
0% {
top: 50%;
left: 0;
width: 100%;
padding-bottom: 100%;
opacity: 1; }
100% {
top: 25%;
left: -25%;
width: 150%;
padding-bottom: 150%;
opacity: 0; } }
.action:after {
content: '';
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
z-index: 1;
opacity: 0;
border-radius: 50%;
margin-top: -50%;
pointer-events: none; }
.action:focus:after, .action:active:after {
animation-name: click_feedback;
animation-duration: 0.2s;
animation-timing-function: ease-out;
animation-iteration-count: 1; }
.button {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
@ -3510,8 +3543,6 @@ select {
content: '';
clear: both;
display: block; }
.field .icon {
padding-right: 0.32em; }
.field > .name {
display: block;
padding-top: 10px;
@ -4372,7 +4403,6 @@ select {
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;
@ -6370,6 +6400,12 @@ main header {
z-index: -1;
border-radius: 50%;
opacity: 1; }
.commands__item--small {
width: 20px;
height: 20px; }
.commands__item--small .commands__item__icon {
padding-top: 5px;
font-size: 10px; }
.commands__item--large {
width: 32px;
height: 32px; }
@ -7106,17 +7142,22 @@ main .track-view {
.settings-view .commands-setup__item {
position: relative;
padding-top: 10px;
padding-bottom: 10px; }
padding-bottom: 10px;
vertical-align: top; }
.settings-view .commands-setup__item .commands__item {
float: left;
margin-bottom: -5px; }
display: inline-block;
margin: 0; }
.settings-view .commands-setup__item__drag-handle {
cursor: move;
padding-right: 0.5em; }
.settings-view .commands-setup__item__url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
padding-top: 5px;
padding-left: 10px; }
padding-left: 10px;
display: inline-block;
margin-bottom: -5px; }
.settings-view .commands-setup__item__actions {
position: absolute;
top: 16px;

23
mopidy_iris/static/app/app.js
View File

@ -74287,6 +74287,9 @@ var SourcesPriority = function (_React$Component) {
return _react2.default.createElement(
_reactSortablejs2.default,
{
options: {
animation: 150
},
className: className,
onChange: function onChange(order, sortable, e) {
_this2.handleSort(order);
@ -88135,7 +88138,13 @@ var Commands = function (_React$Component) {
return _react2.default.createElement(
_reactSortablejs2.default,
{ className: 'list commands-setup', onChange: function onChange(order, sortable, e) {
{
options: {
handle: ".commands-setup__item__drag-handle",
animation: 150
},
className: 'list commands-setup',
onChange: function onChange(order, sortable, e) {
_this2.onChange(order);
} },
commands.map(function (command) {
@ -88145,11 +88154,10 @@ var Commands = function (_React$Component) {
_react2.default.createElement(
'div',
{ className: 'col col--w90' },
_react2.default.createElement(_Icon2.default, { className: 'commands-setup__item__drag-handle', name: 'drag_indicator' }),
_react2.default.createElement(
'div',
{ className: 'commands__item commands__item--interactive', onClick: function onClick(e) {
return _this2.props.runCommand(command.id, true);
} },
{ className: 'commands__item commands__item--small' },
_react2.default.createElement(_Icon2.default, { className: 'commands__item__icon', name: command.icon }),
_react2.default.createElement('span', { className: command.colour + '-background commands__item__background' })
),
@ -88166,6 +88174,13 @@ var Commands = function (_React$Component) {
_react2.default.createElement(
'div',
{ className: 'commands-setup__item__actions' },
_react2.default.createElement(
'a',
{ className: 'commands-setup__item__run-button action', onClick: function onClick(e) {
return _this2.props.runCommand(command.id, true);
} },
_react2.default.createElement(_Icon2.default, { name: 'play_arrow' })
),
_react2.default.createElement(
_Link2.default,
{ className: 'commands-setup__item__edit-button action', to: '/edit-command/' + command.id },

2
mopidy_iris/static/app/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 = "1555387101";
var build = "1555445732";
var version = "3.35.1";
// Construct the script tag

14
src/js/components/Fields/Commands.js
View File

@ -45,13 +45,20 @@ export default class Commands extends React.Component{
}
return (
<Sortable className="list commands-setup" onChange={(order, sortable, e) => {this.onChange(order)}}>
<Sortable
options={{
handle: ".commands-setup__item__drag-handle",
animation: 150
}}
className="list commands-setup"
onChange={(order, sortable, e) => {this.onChange(order)}}>
{
commands.map(command => {
return (
<div className="list__item commands-setup__item list__item--no-interaction" key={command.id} data-id={command.id}>
<div className="col col--w90">
<div className="commands__item commands__item--interactive" onClick={e => this.props.runCommand(command.id, true)}>
<Icon className="commands-setup__item__drag-handle" name="drag_indicator" />
<div className="commands__item commands__item--small">
<Icon className="commands__item__icon" name={command.icon} />
<span className={command.colour+'-background commands__item__background'}></span>
</div>
@ -60,6 +67,9 @@ export default class Commands extends React.Component{
</div>
</div>
<div className="commands-setup__item__actions">
<a className="commands-setup__item__run-button action" onClick={e => this.props.runCommand(command.id, true)}>
<Icon name="play_arrow" />
</a>
<Link className="commands-setup__item__edit-button action" to={'/edit-command/'+command.id}>
<Icon name="edit" />
</Link>

3
src/js/components/Fields/SourcesPriority.js
View File

@ -35,6 +35,9 @@ export default class SourcesPriority extends React.Component{
return (
<Sortable
options={{
animation: 150
}}
className={className}
onChange={(order, sortable, e) => {
this.handleSort(order)

10
src/scss/components/_commands.scss
View File

@ -30,6 +30,16 @@
opacity: 1;
}
&--small {
width: 20px;
height: 20px;
.commands__item__icon {
padding-top: 5px;
font-size: 10px;
}
}
&--large {
width: 32px;
height: 32px;

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

@ -27,7 +27,6 @@
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;

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

@ -188,6 +188,11 @@ select {
}
}
.action {
@include click_feedback();
cursor: pointer;
}
.button {
@include animate();
@include feature_font();
@ -397,10 +402,6 @@ select {
display: block;
padding-bottom: 12px;
.icon {
padding-right: 0.32em;
}
& > .name {
display: block;
padding-top: 10px;

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

@ -39,17 +39,24 @@
position: relative;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: top;
.commands__item {
float: left;
margin-bottom: -5px;
display: inline-block;
margin: 0;
}
&__drag-handle {
cursor: move;
padding-right: 0.5em;
}
&__url {
@include one_line_text();
max-width: 100%;
padding-top: 5px;
padding-left: 10px;
display: inline-block;
margin-bottom: -5px;
}
&__actions {