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

Better UX on dropdown field; Adding search added_from in queue

Browse Source
This commit is contained in:
James Barnsley
2019-10-13 09:29:41 +13:00
parent 9b2216ca62
commit 68de0feed6
21 changed files with 667 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
mopidy_iris/static/app.css
View File

@ -5537,16 +5537,18 @@ main header {
vertical-align: bottom;
margin-bottom: 8px;
font-size: 0.9em; }
main header .options {
main header .header__options {
position: absolute;
top: 2.6rem;
right: 40px; }
main header .options .context-menu-trigger {
main header .header__options__wrapper {
display: flex; }
main header .header__options .context-menu-trigger {
display: none;
font-size: 18px;
padding: 16px 14px; }
main header .options .button,
main header .options button {
main header .header__options .button,
main header .header__options button {
font-size: 13px;
font-weight: 800;
font-family: "Overpass";
@ -5557,21 +5559,21 @@ main header {
min-width: 0;
color: #cecac4;
vertical-align: unset; }
main header .options .button:hover,
main header .options button:hover {
main header .header__options .button:hover,
main header .header__options button:hover {
color: #32b5f2;
box-shadow: none; }
main header .options .button:hover:before,
main header .options button:hover:before {
main header .header__options .button:hover:before,
main header .header__options button:hover:before {
display: none; }
.light-theme main header .options .button, .light-theme
main header .options button {
.light-theme main header .header__options .button, .light-theme
main header .header__options button {
color: #121212; }
.light-theme main header .options .button:hover, .light-theme
main header .options button:hover {
.light-theme main header .header__options .button:hover, .light-theme
main header .header__options button:hover {
color: #32b5f2; }
.light-theme main header .options .button:active, .light-theme
main header .options button:active {
.light-theme main header .header__options .button:active, .light-theme
main header .header__options button:active {
background: transparent; }
main header.overlay {
position: absolute;
@ -5590,12 +5592,12 @@ main header {
margin-bottom: 2px;
padding-right: 6px;
margin-left: 10px; }
main header .options {
main header .header__options {
top: 0;
right: 0; }
main header .options .context-menu-trigger {
main header .header__options .context-menu-trigger {
display: block; }
main header .options .items {
main header .header__options__wrapper {
display: none; } }
.notifications {
@ -5798,35 +5800,37 @@ main header {
font-family: "Overpass";
position: relative;
display: inline-block; }
.dropdown-field .label {
.dropdown-field__label {
display: flex; }
.dropdown-field .label .icon {
.dropdown-field__label__name {
display: none; }
.dropdown-field__label .icon {
padding-right: 8px; }
.dropdown-field .label:not(.button) {
.dropdown-field__label:not(.button) {
-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;
padding: 14px 10px;
cursor: pointer; }
.notouch .dropdown-field .label:not(.button):hover {
.notouch .dropdown-field__label:not(.button):hover {
color: #32b5f2; }
.dropdown-field.expanded .label:not(.button) {
.dropdown-field--expanded .label:not(.button) {
color: #32b5f2; }
.dropdown-field.expanded .options {
.dropdown-field--expanded .dropdown-field__options {
display: block; }
.dropdown-field.no-status-icon .options .option {
.dropdown-field--no-status-icon .dropdown-field__options__item {
padding-left: 12px; }
.dropdown-field.no-label .label > .text {
.dropdown-field--no-label .label > .text {
display: none; }
.dropdown-field .options {
.dropdown-field__options {
position: absolute;
top: 46px;
right: 10px;
z-index: 97;
display: none;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); }
.dropdown-field .options:before {
.dropdown-field__options:before {
content: '';
display: block;
width: 6px;
@ -5838,18 +5842,18 @@ main header {
position: absolute;
top: -3px;
right: 9px; }
.light-theme .dropdown-field .options:before {
.light-theme .dropdown-field__options:before {
background: #f4f2f0; }
.dropdown-field .options > .liner {
.dropdown-field__options__liner {
color: #000000;
background: #FFFFFF;
min-width: 120px;
max-height: 70vh;
overflow-y: auto;
border-radius: 3px; }
.light-theme .dropdown-field .options > .liner {
.light-theme .dropdown-field__options__liner {
background: #f4f2f0; }
.dropdown-field .options > .liner .option {
.dropdown-field__options__item {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
@ -5858,7 +5862,7 @@ main header {
padding: 9px 12px 8px 24px;
cursor: pointer;
color: #000000; }
.dropdown-field .options > .liner .option:before {
.dropdown-field__options__item: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;
@ -5876,14 +5880,14 @@ main header {
background: -moz-linear-gradient(to bottom right, white, rgba(0, 0, 0, 0.5));
background: -o-linear-gradient(to bottom right, white, rgba(0, 0, 0, 0.5));
background: linear-gradient(to bottom right, white, rgba(0, 0, 0, 0.5)); }
.dropdown-field .options > .liner .option .icon {
.dropdown-field__options__item .icon {
position: absolute;
top: 8px;
left: 6px;
font-size: 16px; }
.notouch .dropdown-field .options > .liner .option:hover {
.notouch .dropdown-field__options__item:hover {
color: #000000; }
.notouch .dropdown-field .options > .liner .option:hover:before {
.notouch .dropdown-field__options__item:hover:before {
opacity: 0.15; }
#context-menu .dropdown-field {
@ -5891,17 +5895,21 @@ main header {
display: block; }
#context-menu .dropdown-field:active, #context-menu .dropdown-field:focus {
background: none !important; }
#context-menu .dropdown-field .label {
#context-menu .dropdown-field__label {
padding: 0 0 3px 0;
opacity: 0.5;
font-size: 1rem;
display: block;
cursor: default; }
#context-menu .dropdown-field .label, #context-menu .dropdown-field .label:hover {
#context-menu .dropdown-field__label__value {
display: none; }
#context-menu .dropdown-field__label__name {
display: inline-block; }
#context-menu .dropdown-field__label, #context-menu .dropdown-field__label:hover {
color: #FFFFFF; }
.light-theme #context-menu .dropdown-field .label, .light-theme #context-menu .dropdown-field .label:hover {
.light-theme #context-menu .dropdown-field__label, .light-theme #context-menu .dropdown-field__label:hover {
color: #181818 !important; }
#context-menu .dropdown-field .options {
#context-menu .dropdown-field__options {
display: block;
position: static;
background: transparent;
@ -5910,26 +5918,26 @@ main header {
box-shadow: none;
font-weight: 700;
font-size: 1.2rem; }
#context-menu .dropdown-field .options:before {
#context-menu .dropdown-field__options:before {
display: none !important; }
#context-menu .dropdown-field .options > .liner {
#context-menu .dropdown-field__options__liner {
background: transparent;
color: #FFFFFF !important;
margin: -3px -5px; }
.light-theme #context-menu .dropdown-field .options > .liner {
.light-theme #context-menu .dropdown-field__options__liner {
color: #181818 !important; }
#context-menu .dropdown-field .options > .liner:before {
#context-menu .dropdown-field__options__liner:before {
display: none !important; }
#context-menu .dropdown-field .options > .liner .option {
display: inline-block;
#context-menu .dropdown-field__options__item {
display: block;
padding: 3px 5px;
border-radius: 0;
color: #FFFFFF !important; }
.light-theme #context-menu .dropdown-field .options > .liner .option {
.light-theme #context-menu .dropdown-field__options__item {
color: #181818 !important; }
#context-menu .dropdown-field .options > .liner .option:before {
#context-menu .dropdown-field__options__item:before {
display: none !important; }
#context-menu .dropdown-field .options > .liner .option .icon {
#context-menu .dropdown-field__options__item .icon {
display: inline-block;
position: static;
padding-right: 2px;
@ -5991,7 +5999,7 @@ main header {
.filter-field .icon {
position: absolute;
top: 10px;
top: 12px;
left: 15px;
pointer-events: none; }
@ -6949,12 +6957,12 @@ main .track-view {
align-items: center; }
.queue-view .current-track__added-from__text {
border: 0 !important;
display: flex;
padding-left: 15px; }
display: flex; }
.queue-view .current-track__added-from__text .links-sentence {
padding-left: 0.15em; }
.queue-view .current-track__added-from__thumbnail {
border: 0 !important; }
border: 0 !important;
margin-right: 15px; }
.queue-view .current-track__added-from__thumbnail .thumbnail {
width: 30px; }
.queue-view .current-track__queue-details {

2
mopidy_iris/static/app.css.map
View File

File diff suppressed because one or more lines are too long

342
mopidy_iris/static/app.js
View File

@ -55569,16 +55569,20 @@ var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
var _reactRedux = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
var _helpers = __webpack_require__(/*! ../../helpers */ "./src/js/helpers.js");
var _redux = __webpack_require__(/*! redux */ "./node_modules/redux/es/redux.js");
var helpers = _interopRequireWildcard(_helpers);
var _Icon = __webpack_require__(/*! ../Icon */ "./src/js/components/Icon.js");
var _Icon2 = _interopRequireDefault(_Icon);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@ -55601,7 +55605,8 @@ var DropdownField = function (_React$Component) {
}
_this.state = {
expanded: false
expanded: false,
changed: false
};
_this.handleClick = _this.handleClick.bind(_this);
@ -55624,11 +55629,14 @@ var DropdownField = function (_React$Component) {
var expanded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this.state.expanded;
if (expanded) {
this.setState({ expanded: expanded });
this.setState({ expanded: expanded, changed: false });
window.addEventListener('click', this.handleClick, false);
} else {
this.setState({ expanded: expanded });
window.removeEventListener('click', this.handleClick, false);
if (this.props.onClose && this.state.changed) {
this.props.onClose();
}
}
}
}, {
@ -55643,6 +55651,8 @@ var DropdownField = function (_React$Component) {
key: 'handleChange',
value: function handleChange(value, is_selected) {
var current_value = this.props.value;
this.setState({ changed: true });
if (this.isMultiSelect()) {
if (value == 'select-all') {
var new_value = [];
@ -55657,6 +55667,7 @@ var DropdownField = function (_React$Component) {
current_value.push(value);
var new_value = current_value;
}
new_value = helpers.removeDuplicates(new_value);
} else {
var new_value = value;
@ -55671,44 +55682,86 @@ var DropdownField = function (_React$Component) {
value: function isMultiSelect() {
return this.props.value instanceof Array;
}
}, {
key: 'selectedOptions',
value: function selectedOptions() {
var _props = this.props,
optionsProp = _props.options,
value = _props.value;
var selectedOptions = [];
if (optionsProp) {
// Value not set, default to first option
if (value === null || value === undefined) {
selectedOptions = [optionsProp[0]];
} else {
if (this.isMultiSelect()) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
var _loop = function _loop() {
var multiSelectValue = _step.value;
selectedOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(optionsProp.filter(function (option) {
return option.value === multiSelectValue;
})));
};
for (var _iterator = value[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
_loop();
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
} else {
selectedOptions = optionsProp.filter(function (option) {
return option.value === value;
});
}
}
}
return selectedOptions;
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
if (!this.props.options) {
return null;
}
var _props2 = this.props,
optionsProp = _props2.options,
no_status_icon = _props2.no_status_icon,
no_label = _props2.no_label,
button = _props2.button,
classNameProp = _props2.className,
name = _props2.name,
value = _props2.value,
icon = _props2.icon,
icon_type = _props2.icon_type,
selectedIconProp = _props2.selected_icon,
valueAsLabel = _props2.valueAsLabel;
var expanded = this.state.expanded;
var className = 'dropdown-field';
if (this.state.expanded) {
className += ' expanded';
}
if (this.props.no_status_icon) {
className += ' no-status-icon';
}
if (this.props.no_label) {
className += ' no-label';
}
if (this.props.button) {
className += ' buttonify';
}
if (this.props.className) {
className += ' ' + this.props.className;
}
var current_value = null;
if (this.props.value !== undefined) {
current_value = this.props.value;
} else if (this.props.options.length > 0) {
current_value = this.props.options[0].value;
}
var selected_icon = _react2.default.createElement(_Icon2.default, { name: 'check' });
if (this.props.selected_icon) {
selected_icon = _react2.default.createElement(_Icon2.default, { name: this.props.selected_icon });
}
if (!optionsProp) return null;
var options = Object.assign([], this.props.options);
var selectedOptions = this.selectedOptions();
var options = Object.assign([], optionsProp);
if (this.isMultiSelect()) {
options.push({
value: 'select-all',
@ -55717,40 +55770,60 @@ var DropdownField = function (_React$Component) {
});
}
var className = 'dropdown-field ' + classNameProp;
if (expanded) className += ' dropdown-field--expanded';
if (no_status_icon) className += ' dropdown-field--no-status-icon';
if (no_label) className += ' dropdown-field--no-label';
if (button) className += ' dropdown-field--buttonify';
var selected_icon = _react2.default.createElement(_Icon2.default, { name: 'check' });
if (selectedIconProp) {
selected_icon = _react2.default.createElement(_Icon2.default, { name: selectedIconProp });
}
return _react2.default.createElement(
'div',
{ className: className, 'data-uid': this.uid },
_react2.default.createElement(
'div',
{ className: 'label' + (this.props.button ? ' button ' + this.props.button : ''), onClick: function onClick(e) {
{ className: 'dropdown-field__label' + (button ? ' button ' + button : ''), onClick: function onClick(e) {
return _this2.setExpanded();
} },
this.props.icon ? _react2.default.createElement(_Icon2.default, { name: this.props.icon, type: this.props.icon_type ? this.props.icon_type : 'material' }) : null,
icon ? _react2.default.createElement(_Icon2.default, { name: icon, type: icon_type ? icon_type : 'material' }) : null,
_react2.default.createElement(
'span',
{ className: 'text' },
this.props.name,
this.isMultiSelect() ? ' (' + current_value.length + ')' : null
_react2.default.createElement(
'span',
{ className: 'dropdown-field__label__value' },
valueAsLabel && selectedOptions.length === 1 ? selectedOptions[0].label : name
),
_react2.default.createElement(
'span',
{ className: 'dropdown-field__label__name' },
name
),
this.isMultiSelect() ? ' (' + selectedOptions.length + ')' : null
)
),
_react2.default.createElement(
'div',
{ className: 'options' },
{ className: 'dropdown-field__options' },
_react2.default.createElement(
'div',
{ className: 'liner' },
{ className: 'dropdown-field__options__liner' },
options.map(function (option) {
if (_this2.isMultiSelect()) {
var is_selected = current_value.indexOf(option.value) > -1;
} else {
var is_selected = current_value === option.value;
}
var is_selected = selectedOptions.includes(option);
return _react2.default.createElement(
'div',
{ className: 'option ' + (option.className ? option.className : ''), key: option.value, onClick: function onClick(e) {
{
className: 'dropdown-field__options__item ' + (option.className ? option.className : ''),
key: option.value,
onClick: function onClick(e) {
return _this2.handleChange(option.value, is_selected);
} },
!_this2.props.no_status_icon && is_selected ? selected_icon : null,
}
},
!no_status_icon && is_selected && selected_icon,
option.label
);
})
@ -58434,16 +58507,12 @@ var Header = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: 'options' },
{ className: 'header__options' },
this.renderContextMenuTrigger(),
_react2.default.createElement(
'span',
{ className: 'items' },
_react2.default.createElement(
'span',
{ className: 'liner' },
this.props.options ? this.props.options : null
)
'div',
{ className: 'header__options__wrapper' },
this.props.options || null
)
);
}
@ -63135,7 +63204,7 @@ var Track = function (_React$Component) {
case 'browse':
var link = _react2.default.createElement(
_URILink2.default,
{ type: 'browse', uri: track.added_from.replace('iris:browse:', '') },
{ uri: track.added_from },
'Browse'
);
break;
@ -63143,7 +63212,7 @@ var Track = function (_React$Component) {
case 'search':
var link = _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: track.added_from.replace('iris:', '') },
{ uri: track.added_from },
'Search'
);
break;
@ -63942,7 +64011,7 @@ exports.default = (0, _react.memo)(function (props) {
case 'search':
var exploded = uri.split('%3A');
to = '/search/' + exploded[1] + '/' + exploded[2];
to = '/search/' + exploded[2] + '/' + exploded[3];
break;
default:
@ -65353,15 +65422,7 @@ var uriType = exports.uriType = function uriType(uri) {
}
if (exploded[0] === 'iris') {
switch (exploded[1]) {
case 'search':
case 'discover':
case 'browse':
case 'radio':
return exploded[1];
default:
return null;
}
}
switch (exploded[1]) {
@ -65483,14 +65544,14 @@ var getFromUri = exports.getFromUri = function getFromUri(element) {
break;
case 'searchtype':
if (exploded[0] == 'search') {
return exploded[1];
if (exploded[1] == 'search') {
return exploded[2];
}
break;
case 'searchterm':
if (exploded[0] == 'search') {
return exploded[2];
if (exploded[1] == 'search') {
return exploded[3];
}
break;
@ -78807,7 +78868,7 @@ var Artist = function (_React$Component) {
)
),
_react2.default.createElement('div', { className: 'col col--w5' }),
artist.related_artists && artist.related_artists.length > 0 ? _react2.default.createElement(
artist.related_artists && artist.related_artists.length > 0 && _react2.default.createElement(
'div',
{ className: 'col col--w25 related-artists' },
_react2.default.createElement(
@ -78825,9 +78886,9 @@ var Artist = function (_React$Component) {
{ to: '/artist/' + encodeURIComponent(this.props.uri) + '/related-artists', scrollTo: '#sub-views-menu', className: 'button button--default' },
'All related artists'
)
) : null,
),
_react2.default.createElement('div', { className: 'cf' }),
artist.albums ? _react2.default.createElement(
artist.albums && _react2.default.createElement(
'div',
{ className: 'albums' },
_react2.default.createElement(
@ -78839,9 +78900,10 @@ var Artist = function (_React$Component) {
'Albums'
),
_react2.default.createElement(_DropdownField2.default, {
icon: 'sort',
icon: 'swap_vert',
name: 'Sort',
value: this.props.sort,
valueAsLabel: true,
options: sort_options,
selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
handleChange: function handleChange(value) {
@ -78852,6 +78914,7 @@ var Artist = function (_React$Component) {
icon: 'filter_list',
name: 'Filter',
value: this.props.filter,
valueAsLabel: true,
options: filter_options,
handleChange: function handleChange(value) {
_this2.setFilter(value);_this2.props.uiActions.hideContextMenu();
@ -78878,7 +78941,7 @@ var Artist = function (_React$Component) {
}
})
)
) : null
)
);
}
}, {
@ -80569,7 +80632,8 @@ var Queue = function (_React$Component) {
var items = [];
// Radio nests it's seed URIs in an encoded URI format
if (uri_type === 'radio') {
switch (uri_type) {
case 'radio':
var radio_seeds = helpers.getFromUri('seeds', added_from_uri);
var _iteratorNormalCompletion = true;
@ -80581,9 +80645,9 @@ var Queue = function (_React$Component) {
var seed = _step.value;
var item_type = helpers.uriType(seed);
var item_library = this.props[item_type + 's'];
if (item_library && item_library[seed]) {
items.push(item_library[seed]);
var _item_library = this.props[item_type + 's'];
if (_item_library && _item_library[seed]) {
items.push(_item_library[seed]);
}
}
} catch (err) {
@ -80600,11 +80664,22 @@ var Queue = function (_React$Component) {
}
}
}
} else {
var _item_library = this.props[uri_type + 's'];
if (_item_library && _item_library[added_from_uri]) {
items.push(_item_library[added_from_uri]);
break;
case 'search':
items.push({
uri: added_from_uri,
name: '"' + helpers.getFromUri('searchterm', added_from_uri) + '" search'
});
break;
default:
var item_library = this.props[uri_type + 's'];
if (item_library && item_library[added_from_uri]) {
items.push(item_library[added_from_uri]);
}
break;
}
if (items.length <= 0) return null;
@ -80612,7 +80687,7 @@ var Queue = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: 'current-track__added-from' },
_react2.default.createElement(
items[0].images && _react2.default.createElement(
_URILink2.default,
{
uri: items[0].uri,
@ -80801,13 +80876,15 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
for (var _iterator2 = state.core.queue[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var queue_track = _step2.value;
var track = _extends({}, queue_track);
var track = _extends({}, queue_track, {
playing: current_track && current_track.tlid == queue_track.tlid
});
// If we have the track in our index, merge it in.
// We prioritise queue track over index track as queue has unique data, like which track
// is playing and tlids.
if (state.core.tracks.hasOwnProperty(track.uri)) {
track = _extends({}, state.core.tracks[track.uri], track, { playing: current_track && current_track.tlid == track.tlid });
track = _extends({}, state.core.tracks[track.uri], track);
}
// Now merge in our queue metadata
@ -80815,8 +80892,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
track = _extends({}, track, state.core.queue_metadata['tlid_' + track.tlid]);
}
// Siphon off this track if it's a full representation of our current track (by tlid)
if (current_track && current_track.uri == track.uri) {
// Siphon off this track if it's a full representation of our current track
if (track.playing) {
current_track = track;
}
@ -81269,6 +81346,12 @@ var Search = function (_React$Component) {
};
this.props.uiActions.set(data);
}
}, {
key: 'handleSourceChange',
value: function handleSourceChange(value) {
this.props.uiActions.set({ uri_schemes_search_enabled: value });
this.props.uiActions.hideContextMenu();
}
}, {
key: 'renderArtists',
value: function renderArtists(artists, spotify_search_enabled) {
@ -81286,7 +81369,7 @@ var Search = function (_React$Component) {
'Search'
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
'\xA0 Artists'
' Artists'
),
_react2.default.createElement(
'section',
@ -81315,7 +81398,7 @@ var Search = function (_React$Component) {
'Search '
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
'\xA0 Albums'
' Albums'
),
_react2.default.createElement(
'section',
@ -81344,7 +81427,7 @@ var Search = function (_React$Component) {
'Search '
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
'\xA0 Playlists'
' Playlists'
),
_react2.default.createElement(
'section',
@ -81373,7 +81456,7 @@ var Search = function (_React$Component) {
'Search '
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
'\xA0 Tracks'
' Tracks'
),
_react2.default.createElement(
'section',
@ -81407,13 +81490,11 @@ var Search = function (_React$Component) {
)
),
_react2.default.createElement(_ArtistGrid2.default, { mini: true, show_source_icon: true, artists: artists.slice(0, 6) }),
artists.length >= 6 ? _react2.default.createElement(
artists.length >= 6 && _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:artist:' + this.state.term, className: 'button button--default' },
'All artists (',
artists.length,
')'
) : null
'All artists (' + artists.length + ')'
)
)
);
} else {
@ -81437,13 +81518,11 @@ var Search = function (_React$Component) {
)
),
_react2.default.createElement(_AlbumGrid2.default, { mini: true, show_source_icon: true, albums: albums.slice(0, 6) }),
albums.length >= 6 ? _react2.default.createElement(
albums.length >= 6 && _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:album:' + this.state.term, className: 'button button--default' },
'All albums (',
albums.length,
')'
) : null
'All albums (' + albums.length + ')'
)
)
);
} else {
@ -81467,13 +81546,11 @@ var Search = function (_React$Component) {
)
),
_react2.default.createElement(_PlaylistGrid2.default, { mini: true, show_source_icon: true, playlists: playlists.slice(0, 6) }),
playlists.length >= 6 ? _react2.default.createElement(
playlists.length >= 6 && _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:playlist:' + this.state.term, className: 'button button--default' },
'All playlists (',
playlists.length,
')'
) : null
'All playlists (' + playlists.length + ')'
)
)
);
} else {
@ -81595,9 +81672,10 @@ var Search = function (_React$Component) {
'span',
null,
_react2.default.createElement(_DropdownField2.default, {
icon: 'sort',
icon: 'swap_vert',
name: 'Sort',
value: this.props.sort,
valueAsLabel: true,
options: sort_options,
selected_icon: this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
handleChange: function handleChange(value) {
@ -81610,7 +81688,12 @@ var Search = function (_React$Component) {
value: this.props.uri_schemes_search_enabled,
options: provider_options,
handleChange: function handleChange(value) {
_this8.props.uiActions.set({ uri_schemes_search_enabled: value });_this8.props.uiActions.hideContextMenu();
return _this8.handleSourceChange(value);
},
onClose: function onClose() {
_this8.props.spotifyActions.clearSearchResults();
_this8.props.mopidyActions.clearSearchResults();
_this8.search();
}
})
);
@ -85452,7 +85535,7 @@ var LibraryAlbums = function (_React$Component) {
var sort_options = [{
value: null,
label: 'Default'
label: 'As loaded'
}, {
value: 'name',
label: 'Name'
@ -85471,8 +85554,8 @@ var LibraryAlbums = function (_React$Component) {
}];
var options = _react2.default.createElement(
'span',
null,
'div',
{ className: 'header__options__wrapper' },
_react2.default.createElement(_FilterField2.default, {
initialValue: this.state.filter,
handleChange: function handleChange(value) {
@ -85483,9 +85566,10 @@ var LibraryAlbums = function (_React$Component) {
}
}),
_react2.default.createElement(_DropdownField2.default, {
icon: 'sort',
icon: 'swap_vert',
name: 'Sort',
value: this.props.sort,
valueAsLabel: true,
options: sort_options,
selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
handleChange: function handleChange(val) {
@ -85496,6 +85580,7 @@ var LibraryAlbums = function (_React$Component) {
icon: 'visibility',
name: 'View',
value: this.props.view,
valueAsLabel: true,
options: view_options,
handleChange: function handleChange(val) {
_this3.props.uiActions.set({ library_albums_view: val });_this3.props.uiActions.hideContextMenu();
@ -85505,6 +85590,7 @@ var LibraryAlbums = function (_React$Component) {
icon: 'cloud',
name: 'Source',
value: this.props.source,
valueAsLabel: true,
options: source_options,
handleChange: function handleChange(val) {
_this3.props.uiActions.set({ library_albums_source: val });_this3.props.uiActions.hideContextMenu();
@ -85951,17 +86037,17 @@ var LibraryArtists = function (_React$Component) {
}];
var sort_options = [{
label: 'Default',
value: null
value: null,
label: 'As loaded'
}, {
label: 'Name',
value: 'name'
value: 'name',
label: 'Name'
}, {
label: 'Followers',
value: 'followers'
value: 'followers',
label: 'Followers'
}, {
label: 'Popularity',
value: 'popularity'
value: 'popularity',
label: 'Popularity'
}];
var options = _react2.default.createElement(
@ -85977,9 +86063,10 @@ var LibraryArtists = function (_React$Component) {
}
}),
_react2.default.createElement(_DropdownField2.default, {
icon: 'sort',
icon: 'swap_vert',
name: 'Sort',
value: this.props.sort,
valueAsLabel: true,
options: sort_options,
selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
handleChange: function handleChange(value) {
@ -85990,6 +86077,7 @@ var LibraryArtists = function (_React$Component) {
icon: 'visibility',
name: 'View',
value: this.props.view,
valueAsLabel: true,
options: view_options,
handleChange: function handleChange(value) {
_this3.props.uiActions.set({ library_artists_view: value });_this3.props.uiActions.hideContextMenu();
@ -85999,6 +86087,7 @@ var LibraryArtists = function (_React$Component) {
icon: 'cloud',
name: 'Source',
value: this.props.source,
valueAsLabel: true,
options: source_options,
handleChange: function handleChange(value) {
_this3.props.uiActions.set({ library_artists_source: value });_this3.props.uiActions.hideContextMenu();
@ -86948,7 +87037,7 @@ var LibraryPlaylists = function (_React$Component) {
var sort_options = [{
value: null,
label: 'Default'
label: 'As loaded'
}, {
value: 'name',
label: 'Name'
@ -86979,9 +87068,10 @@ var LibraryPlaylists = function (_React$Component) {
}
}),
_react2.default.createElement(_DropdownField2.default, {
icon: 'sort',
icon: 'swap_vert',
name: 'Sort',
value: this.props.sort,
valueAsLabel: true,
options: sort_options,
selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
handleChange: function handleChange(value) {
@ -86991,6 +87081,7 @@ var LibraryPlaylists = function (_React$Component) {
_react2.default.createElement(_DropdownField2.default, {
icon: 'visibility',
name: 'View',
valueAsLabel: true,
value: this.props.view,
options: view_options,
handleChange: function handleChange(value) {
@ -87000,6 +87091,7 @@ var LibraryPlaylists = function (_React$Component) {
_react2.default.createElement(_DropdownField2.default, {
icon: 'cloud',
name: 'Source',
valueAsLabel: true,
value: this.props.source,
options: source_options,
handleChange: function handleChange(value) {

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

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1570579898";
var build = "1570908071";
var version = "3.41.1";
// Construct the script tag

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

@ -1,7 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as helpers from '../../helpers';
import Icon from '../Icon';
@ -18,6 +17,7 @@ export default class DropdownField extends React.Component {
this.state = {
expanded: false,
changed: false,
};
this.handleClick = this.handleClick.bind(this);
@ -33,11 +33,14 @@ export default class DropdownField extends React.Component {
setExpanded(expanded = !this.state.expanded) {
if (expanded) {
this.setState({ expanded });
this.setState({ expanded, changed: false, });
window.addEventListener('click', this.handleClick, false);
} else {
this.setState({ expanded });
window.removeEventListener('click', this.handleClick, false);
if (this.props.onClose && this.state.changed) {
this.props.onClose();
}
}
}
@ -50,6 +53,8 @@ export default class DropdownField extends React.Component {
handleChange(value, is_selected) {
const current_value = this.props.value;
this.setState({ changed: true });
if (this.isMultiSelect()) {
if (value == 'select-all') {
var new_value = [];
@ -64,6 +69,7 @@ export default class DropdownField extends React.Component {
current_value.push(value);
var new_value = current_value;
}
new_value = helpers.removeDuplicates(new_value);
} else {
var new_value = value;
@ -78,40 +84,55 @@ export default class DropdownField extends React.Component {
return this.props.value instanceof Array;
}
selectedOptions() {
const {
options: optionsProp,
value,
} = this.props;
let selectedOptions = [];
if (optionsProp) {
// Value not set, default to first option
if (value === null || value === undefined) {
selectedOptions = [optionsProp[0]];
} else {
if (this.isMultiSelect()) {
for (let multiSelectValue of value) {
selectedOptions = [
...selectedOptions,
...optionsProp.filter(option => option.value === multiSelectValue),
];
}
} else {
selectedOptions = optionsProp.filter(option => option.value === value);
}
}
}
return selectedOptions;
}
render() {
if (!this.props.options) {
return null;
}
const {
options: optionsProp,
no_status_icon,
no_label,
button,
className: classNameProp,
name,
value,
icon,
icon_type,
selected_icon: selectedIconProp,
valueAsLabel,
} = this.props;
const { expanded } = this.state;
let className = 'dropdown-field';
if (this.state.expanded) {
className += ' expanded';
}
if (this.props.no_status_icon) {
className += ' no-status-icon';
}
if (this.props.no_label) {
className += ' no-label';
}
if (this.props.button) {
className += ' buttonify';
}
if (this.props.className) {
className += ` ${this.props.className}`;
}
let current_value = null;
if (this.props.value !== undefined) {
current_value = this.props.value;
} else if (this.props.options.length > 0) {
current_value = this.props.options[0].value;
}
if (!optionsProp) return null;
let selected_icon = <Icon name="check" />;
if (this.props.selected_icon) {
selected_icon = <Icon name={this.props.selected_icon} />;
}
const selectedOptions = this.selectedOptions();
const options = Object.assign([], this.props.options);
const options = Object.assign([], optionsProp);
if (this.isMultiSelect()) {
options.push({
value: 'select-all',
@ -120,27 +141,43 @@ export default class DropdownField extends React.Component {
});
}
let className = `dropdown-field ${classNameProp}`;
if (expanded) className += ' dropdown-field--expanded';
if (no_status_icon) className += ' dropdown-field--no-status-icon';
if (no_label) className += ' dropdown-field--no-label';
if (button) className += ' dropdown-field--buttonify';
let selected_icon = <Icon name="check" />;
if (selectedIconProp) {
selected_icon = <Icon name={selectedIconProp} />;
}
return (
<div className={className} data-uid={this.uid}>
<div className={`label${this.props.button ? ` button ${this.props.button}` : ''}`} onClick={(e) => this.setExpanded()}>
{this.props.icon ? <Icon name={this.props.icon} type={this.props.icon_type ? this.props.icon_type : 'material'} /> : null}
<div className={`dropdown-field__label${button ? ` button ${button}` : ''}`} onClick={(e) => this.setExpanded()}>
{icon ? <Icon name={icon} type={icon_type ? icon_type : 'material'} /> : null}
<span className="text">
{this.props.name}
{this.isMultiSelect() ? ` (${current_value.length})` : null}
<span className="dropdown-field__label__value">
{valueAsLabel && selectedOptions.length === 1 ? selectedOptions[0].label : name}
</span>
<span className="dropdown-field__label__name">
{name}
</span>
{this.isMultiSelect() ? ` (${selectedOptions.length})` : null}
</span>
</div>
<div className="options">
<div className="liner">
<div className="dropdown-field__options">
<div className="dropdown-field__options__liner">
{
options.map((option) => {
if (this.isMultiSelect()) {
var is_selected = current_value.indexOf(option.value) > -1;
} else {
var is_selected = current_value === option.value;
}
const is_selected = selectedOptions.includes(option);
return (
<div className={`option ${option.className ? option.className : ''}`} key={option.value} onClick={(e) => this.handleChange(option.value, is_selected)}>
{!this.props.no_status_icon && is_selected ? selected_icon : null}
<div
className={`dropdown-field__options__item ${option.className ? option.className : ''}`}
key={option.value}
onClick={(e) => this.handleChange(option.value, is_selected)}
>
{!no_status_icon && is_selected && selected_icon}
{option.label}
</div>
);

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

@ -43,13 +43,11 @@ export default class Header extends React.Component {
}
return (
<div className="options">
<div className="header__options">
{this.renderContextMenuTrigger()}
<span className="items">
<span className="liner">
{this.props.options ? this.props.options : null}
</span>
</span>
<div className="header__options__wrapper">
{this.props.options || null}
</div>
</div>
);
}

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

@ -223,11 +223,11 @@ export default class Track extends React.Component {
break;
case 'browse':
var link = <URILink type="browse" uri={track.added_from.replace('iris:browse:', '')}>Browse</URILink>;
var link = <URILink uri={track.added_from}>Browse</URILink>;
break;
case 'search':
var link = <URILink type="search" uri={track.added_from.replace('iris:', '')}>Search</URILink>;
var link = <URILink uri={track.added_from}>Search</URILink>;
break;
case 'radio':

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

@ -42,7 +42,7 @@ export default memo((props) => {
case 'search':
var exploded = uri.split('%3A');
to = `/search/${exploded[1]}/${exploded[2]}`;
to = `/search/${exploded[2]}/${exploded[3]}`;
break;
default:

16
src/js/helpers.js
View File

@ -1027,15 +1027,7 @@ export const uriType = function (uri) {
}
if (exploded[0] === 'iris') {
switch (exploded[1]) {
case 'search':
case 'discover':
case 'browse':
case 'radio':
return exploded[1];
default:
return null;
}
}
switch (exploded[1]) {
@ -1153,14 +1145,14 @@ export const getFromUri = function (element, uri = '') {
break;
case 'searchtype':
if (exploded[0] == 'search') {
return exploded[1];
if (exploded[1] == 'search') {
return exploded[2];
}
break;
case 'searchterm':
if (exploded[0] == 'search') {
return exploded[2];
if (exploded[1] == 'search') {
return exploded[3];
}
break;

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

@ -180,24 +180,25 @@ class Artist extends React.Component {
<div className="col col--w5" />
{artist.related_artists && artist.related_artists.length > 0 ? (
{artist.related_artists && artist.related_artists.length > 0 && (
<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={`/artist/${encodeURIComponent(this.props.uri)}/related-artists`} scrollTo="#sub-views-menu" className="button button--default">All related artists</Link>
</div>
) : null}
)}
<div className="cf" />
{artist.albums ? (
{artist.albums && (
<div className="albums">
<h4>
<div>Albums</div>
<DropdownField
icon="sort"
icon="swap_vert"
name="Sort"
value={this.props.sort}
valueAsLabel
options={sort_options}
selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(value) => { this.setSort(value); this.props.uiActions.hideContextMenu(); }}
@ -206,6 +207,7 @@ class Artist extends React.Component {
icon="filter_list"
name="Filter"
value={this.props.filter}
valueAsLabel
options={filter_options}
handleChange={(value) => { this.setFilter(value); this.props.uiActions.hideContextMenu(); }}
/>
@ -226,7 +228,7 @@ class Artist extends React.Component {
/>
</section>
</div>
) : null}
)}
</div>
);
}

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

@ -144,7 +144,8 @@ class Queue extends React.Component {
const items = [];
// Radio nests it's seed URIs in an encoded URI format
if (uri_type === 'radio') {
switch (uri_type){
case 'radio':
const radio_seeds = helpers.getFromUri('seeds', added_from_uri);
for (let seed of radio_seeds) {
@ -154,17 +155,28 @@ class Queue extends React.Component {
items.push(item_library[seed]);
}
}
} else {
break;
case 'search':
items.push({
uri: added_from_uri,
name: `"${helpers.getFromUri('searchterm', added_from_uri)}" search`,
})
break;
default:
const item_library = this.props[`${uri_type}s`];
if (item_library && item_library[added_from_uri]) {
items.push(item_library[added_from_uri]);
}
break;
}
if (items.length <= 0) return null;
return (
<div className="current-track__added-from">
{items[0].images && (
<URILink
uri={items[0].uri}
className="current-track__added-from__thumbnail"
@ -175,6 +187,7 @@ class Queue extends React.Component {
circle={helpers.uriType(items[0].uri) === 'artist'}
/>
</URILink>
)}
<div className="current-track__added-from__text">
{'Playing from '}
<LinksSentence items={items} />
@ -299,26 +312,31 @@ const mapStateToProps = (state, ownProps) => {
if (state.core.queue && state.core.tracks) {
for (const queue_track of state.core.queue) {
let track = { ...queue_track };
let track = {
...queue_track,
playing: current_track && current_track.tlid == queue_track.tlid,
};
// If we have the track in our index, merge it in.
// We prioritise queue track over index track as queue has unique data, like which track
// is playing and tlids.
if (state.core.tracks.hasOwnProperty(track.uri)) {
track = { ...state.core.tracks[track.uri], ...track, playing: current_track && current_track.tlid == track.tlid };
track = {
...state.core.tracks[track.uri],
...track,
};
}
// Now merge in our queue metadata
if (state.core.queue_metadata[`tlid_${track.tlid}`] !== undefined) {
track = {
...track,
...state.core.queue_metadata[`tlid_${track.tlid}`],
};
}
// Siphon off this track if it's a full representation of our current track (by tlid)
if (current_track && current_track.uri == track.uri) {
// Siphon off this track if it's a full representation of our current track
if (track.playing) {
current_track = track;
}

57
src/js/views/Search.js
View File

@ -126,6 +126,11 @@ class Search extends React.Component {
this.props.uiActions.set(data);
}
handleSourceChange(value) {
this.props.uiActions.set({ uri_schemes_search_enabled: value });
this.props.uiActions.hideContextMenu();
}
renderArtists(artists, spotify_search_enabled) {
return (
<div>
@ -134,8 +139,7 @@ class Search extends React.Component {
Search
</URILink>
<Icon type="fontawesome" name="angle-right" />
&nbsp;
Artists
{` Artists`}
</h4>
<section className="grid-wrapper">
<ArtistGrid artists={artists} show_source_icon />
@ -150,11 +154,10 @@ class Search extends React.Component {
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
Search
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
&nbsp;
Albums
{` Albums`}
</h4>
<section className="grid-wrapper">
<AlbumGrid albums={albums} show_source_icon />
@ -169,11 +172,10 @@ class Search extends React.Component {
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
Search
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
&nbsp;
Playlists
{` Playlists`}
</h4>
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} show_source_icon />
@ -188,11 +190,10 @@ class Search extends React.Component {
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
Search
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
&nbsp;
Tracks
{` Tracks`}
</h4>
<section className="list-wrapper">
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${this.state.term}`} show_source_icon />
@ -211,13 +212,11 @@ class Search extends React.Component {
<h4>Artists</h4>
</URILink>
<ArtistGrid mini show_source_icon artists={artists.slice(0, 6)} />
{artists.length >= 6 ? (
{artists.length >= 6 && (
<URILink type="search" uri={`search:artist:${this.state.term}`} className="button button--default">
All artists (
{artists.length}
)
{`All artists (${artists.length})`}
</URILink>
) : null}
)}
</div>
</section>
);
@ -233,13 +232,11 @@ class Search extends React.Component {
<h4>Albums</h4>
</URILink>
<AlbumGrid mini show_source_icon albums={albums.slice(0, 6)} />
{albums.length >= 6 ? (
{albums.length >= 6 && (
<URILink type="search" uri={`search:album:${this.state.term}`} className="button button--default">
All albums (
{albums.length}
)
{`All albums (${albums.length})`}
</URILink>
) : null}
)}
</div>
</section>
);
@ -255,13 +252,11 @@ class Search extends React.Component {
<h4>Playlists</h4>
</URILink>
<PlaylistGrid mini show_source_icon playlists={playlists.slice(0, 6)} />
{playlists.length >= 6 ? (
{playlists.length >= 6 && (
<URILink type="search" uri={`search:playlist:${this.state.term}`} className="button button--default">
All playlists (
{playlists.length}
)
{`All playlists (${playlists.length})`}
</URILink>
) : null}
)}
</div>
</section>
);
@ -381,9 +376,10 @@ class Search extends React.Component {
const options = (
<span>
<DropdownField
icon="sort"
icon="swap_vert"
name="Sort"
value={this.props.sort}
valueAsLabel
options={sort_options}
selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
handleChange={(value) => { this.setSort(value); this.props.uiActions.hideContextMenu(); }}
@ -393,7 +389,12 @@ class Search extends React.Component {
name="Sources"
value={this.props.uri_schemes_search_enabled}
options={provider_options}
handleChange={(value) => { this.props.uiActions.set({ uri_schemes_search_enabled: value }); this.props.uiActions.hideContextMenu(); }}
handleChange={(value) => this.handleSourceChange(value)}
onClose={() => {
this.props.spotifyActions.clearSearchResults();
this.props.mopidyActions.clearSearchResults();
this.search()
}}
/>
</span>
);

11
src/js/views/library/LibraryAlbums.js
View File

@ -277,7 +277,7 @@ class LibraryAlbums extends React.Component {
const sort_options = [
{
value: null,
label: 'Default',
label: 'As loaded',
},
{
value: 'name',
@ -302,16 +302,17 @@ class LibraryAlbums extends React.Component {
];
const options = (
<span>
<div className="header__options__wrapper">
<FilterField
initialValue={this.state.filter}
handleChange={(value) => this.setState({ filter: value, limit: this.state.per_page })}
onSubmit={e => this.props.uiActions.hideContextMenu()}
/>
<DropdownField
icon="sort"
icon="swap_vert"
name="Sort"
value={this.props.sort}
valueAsLabel
options={sort_options}
selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(val) => { this.setSort(val); this.props.uiActions.hideContextMenu(); }}
@ -320,6 +321,7 @@ class LibraryAlbums extends React.Component {
icon="visibility"
name="View"
value={this.props.view}
valueAsLabel
options={view_options}
handleChange={(val) => { this.props.uiActions.set({ library_albums_view: val }); this.props.uiActions.hideContextMenu(); }}
/>
@ -327,10 +329,11 @@ class LibraryAlbums extends React.Component {
icon="cloud"
name="Source"
value={this.props.source}
valueAsLabel
options={source_options}
handleChange={(val) => { this.props.uiActions.set({ library_albums_source: val }); this.props.uiActions.hideContextMenu(); }}
/>
</span>
</div>
);
return (

13
src/js/views/library/LibraryArtists.js
View File

@ -257,20 +257,20 @@ class LibraryArtists extends React.Component {
const sort_options = [
{
label: 'Default',
value: null,
label: 'As loaded',
},
{
label: 'Name',
value: 'name',
label: 'Name',
},
{
label: 'Followers',
value: 'followers',
label: 'Followers',
},
{
label: 'Popularity',
value: 'popularity',
label: 'Popularity',
},
];
@ -282,9 +282,10 @@ class LibraryArtists extends React.Component {
onSubmit={e => this.props.uiActions.hideContextMenu()}
/>
<DropdownField
icon="sort"
icon="swap_vert"
name="Sort"
value={this.props.sort}
valueAsLabel
options={sort_options}
selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(value) => { this.setSort(value); this.props.uiActions.hideContextMenu(); }}
@ -293,6 +294,7 @@ class LibraryArtists extends React.Component {
icon="visibility"
name="View"
value={this.props.view}
valueAsLabel
options={view_options}
handleChange={(value) => { this.props.uiActions.set({ library_artists_view: value }); this.props.uiActions.hideContextMenu(); }}
/>
@ -300,6 +302,7 @@ class LibraryArtists extends React.Component {
icon="cloud"
name="Source"
value={this.props.source}
valueAsLabel
options={source_options}
handleChange={(value) => { this.props.uiActions.set({ library_artists_source: value }); this.props.uiActions.hideContextMenu(); }}
/>

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

@ -208,7 +208,7 @@ class LibraryPlaylists extends React.Component {
const sort_options = [
{
value: null,
label: 'Default',
label: 'As loaded',
},
{
value: 'name',
@ -240,9 +240,10 @@ class LibraryPlaylists extends React.Component {
onSubmit={e => this.props.uiActions.hideContextMenu()}
/>
<DropdownField
icon="sort"
icon="swap_vert"
name="Sort"
value={this.props.sort}
valueAsLabel
options={sort_options}
selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(value) => { this.setSort(value); this.props.uiActions.hideContextMenu(); }}
@ -250,6 +251,7 @@ class LibraryPlaylists extends React.Component {
<DropdownField
icon="visibility"
name="View"
valueAsLabel
value={this.props.view}
options={view_options}
handleChange={(value) => { this.props.uiActions.set({ library_playlists_view: value }); this.props.uiActions.hideContextMenu(); }}
@ -257,6 +259,7 @@ class LibraryPlaylists extends React.Component {
<DropdownField
icon="cloud"
name="Source"
valueAsLabel
value={this.props.source}
options={source_options}
handleChange={(value) => { this.props.uiActions.set({ library_playlists_source: value }); this.props.uiActions.hideContextMenu(); }}

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

@ -7,9 +7,13 @@
position: relative;
display: inline-block;
.label {
&__label {
display: flex;
&__name {
display: none;
}
.icon {
padding-right: 8px;
}
@ -25,30 +29,30 @@
}
}
&.expanded {
&--expanded {
.label:not(.button) {
color: colour(blue);
}
.options {
.dropdown-field__options {
display: block;
}
}
&.no-status-icon {
.options {
.option {
&--no-status-icon {
.dropdown-field__options {
&__item {
padding-left: 12px;
}
}
}
&.no-label {
&--no-label {
.label > .text {
display: none;
}
}
.options {
&__options {
position: absolute;
top: 46px;
right: 10px;
@ -74,7 +78,7 @@
}
}
& > .liner {
&__liner {
color: colour(black);
background: colour(white);
min-width: 120px;
@ -85,8 +89,9 @@
.light-theme & {
background: colour(faint_grey);
}
}
.option {
&__item {
@include animate();
position: relative;
padding: 9px 12px 8px 24px;
@ -127,7 +132,6 @@
}
}
}
}
#context-menu {
.dropdown-field {
@ -139,13 +143,21 @@
background: none !important;
}
.label {
&__label {
padding: 0 0 3px 0;
opacity: 0.5;
font-size: 1rem;
display: block;
cursor: default;
&__value {
display: none;
}
&__name {
display: inline-block;
}
&,
&:hover {
color: colour(white);
@ -156,7 +168,7 @@
}
}
.options {
&__options {
display: block;
position: static;
background: transparent;
@ -170,7 +182,7 @@
display: none !important;
}
& > .liner {
&__liner {
background: transparent;
color: colour(white) !important;
margin: -3px -5px;
@ -182,9 +194,10 @@
&:before {
display: none !important;
}
}
.option {
display: inline-block;
&__item {
display: block;
padding: 3px 5px;
border-radius: 0;
color: colour(white) !important;
@ -208,4 +221,3 @@
}
}
}
}

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

@ -7,7 +7,7 @@
.icon {
position: absolute;
top: 10px;
top: 12px;
left: 15px;
pointer-events: none;
}

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

@ -17,11 +17,15 @@ main {
}
}
.options {
.header__options {
position: absolute;
top: 2.6rem;
right: 40px;
&__wrapper {
display: flex;
}
.context-menu-trigger {
display: none;
font-size: 18px;
@ -87,7 +91,7 @@ main {
}
}
.options {
.header__options {
top: 0;
right: 0;
@ -95,7 +99,7 @@ main {
display: block;
}
.items {
&__wrapper {
display: none;
}
}

3
src/scss/views/_queue.scss
View File

@ -52,7 +52,6 @@
&__text {
border: 0 !important;
display: flex;
padding-left: 15px;
.links-sentence {
padding-left: 0.15em;
@ -61,6 +60,8 @@
&__thumbnail {
border: 0 !important;
margin-right: 15px;
.thumbnail {
width: 30px;
}