diff --git a/client/source/sass/components/_search.scss b/client/source/sass/components/_search.scss new file mode 100644 index 00000000..798d63ea --- /dev/null +++ b/client/source/sass/components/_search.scss @@ -0,0 +1,81 @@ +.search { + position: relative; + + .icon { + fill: $search-torrents--icon--foreground; + height: 22px; + left: 17px; + opacity: 0.5; + position: absolute; + top: 50%; + transition: fill 0.25s, opacity 0.25s; + transform: translateY(-50%); + width: 22px; + + &--close { + left: auto; + right: 17px; + } + } + + .button { + height: 100%; + position: absolute; + right: 0; + width: 30px; + + .icon { + position: absolute; + height: 10px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 10px; + } + } + + .textbox { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border: 1px solid $search-torrents--border; + border-left: none; + border-right: none; + border-radius: 0; + background: $search-torrents--background; + box-shadow: none; + color: $search-torrents--foreground; + display: block; + font-size: 1em; + outline: none; + padding: 12px 0 12px 45px; + transition: background 0.25s, border 0.25s, color 0.25s; + width: 100%; + + &::placeholder { + color: $search-torrents--placeholder; + font-style: italic; + transition: color 0.25s; + } + } + + &.is-in-use { + + .icon { + fill: $search-torrents--icon--foreground--active; + opacity: 1; + } + + .textbox { + background: $search-torrents--background--active; + border-bottom: 1px solid $search-torrents--border--active; + border-top: 1px solid $search-torrents--border--active; + color: $search-torrents--foreground--active; + padding-right: 45px; + + &::placeholder { + color: $search-torrents--placeholder--active; + } + } + } +} diff --git a/client/source/sass/components/_sidebar.scss b/client/source/sass/components/_sidebar.scss index 79ed0c11..15f903af 100644 --- a/client/source/sass/components/_sidebar.scss +++ b/client/source/sass/components/_sidebar.scss @@ -16,66 +16,6 @@ &__item { - &--search { - position: relative; - - .icon { - fill: $search-torrents--icon--foreground; - height: 22px; - left: 17px; - opacity: 0.5; - position: absolute; - top: 50%; - transition: fill 0.25s, opacity 0.25s; - transform: translateY(-50%); - width: 22px; - } - - .textbox { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - border: 1px solid $search-torrents--border; - border-left: none; - border-right: none; - border-radius: 0; - background: $search-torrents--background; - box-shadow: none; - color: $search-torrents--foreground; - display: block; - font-size: 1em; - outline: none; - padding: 12px 0 12px 45px; - transition: background 0.25s, border 0.25s, color 0.25s; - width: 100%; - - &::placeholder { - color: $search-torrents--placeholder; - font-style: italic; - transition: color 0.25s; - } - } - - &.is-in-use { - - .icon { - fill: $search-torrents--icon--foreground--active; - opacity: 1; - } - - .textbox { - background: $search-torrents--background--active; - border-bottom: 1px solid $search-torrents--border--active; - border-top: 1px solid $search-torrents--border--active; - color: $search-torrents--foreground--active; - - &::placeholder { - color: $search-torrents--placeholder--active; - } - } - } - } - &--speed-limit { padding-left: 5px; padding-top: 5px; diff --git a/client/source/sass/style.scss b/client/source/sass/style.scss index 00bdf9a7..de4d33ff 100644 --- a/client/source/sass/style.scss +++ b/client/source/sass/style.scss @@ -31,6 +31,7 @@ @import "components/priority-meter"; @import "components/progress-bar"; @import "components/scrollbars"; +@import "components/search"; @import "components/sidebar"; @import "components/sidebar-filter"; @import "components/textbox-repeater"; diff --git a/client/source/sass/tools/_colors.scss b/client/source/sass/tools/_colors.scss index 0506f2eb..2290706c 100644 --- a/client/source/sass/tools/_colors.scss +++ b/client/source/sass/tools/_colors.scss @@ -80,16 +80,16 @@ $client-stats--limits--icon--hover: $blue; $search-torrents--base: #091824; $search-torrents--background: rgba($search-torrents--base, 0.3); -$search-torrents--background--active: $green; +$search-torrents--background--active: rgba($blue, 0.25); $search-torrents--border: rgba($search-torrents--background, 0.4); -$search-torrents--border--active: $search-torrents--background--active; +$search-torrents--border--active: rgba($blue, 0.3); $search-torrents--foreground: $sidebar--foreground; -$search-torrents--foreground--active: #1e8954; +$search-torrents--foreground--active: $blue; $search-torrents--placeholder: rgba($sidebar--foreground, 0.4); -$search-torrents--placeholder--active: #2cad6d; +$search-torrents--placeholder--active: rgba($blue, 0.4); $search-torrents--icon--foreground: $sidebar--foreground; -$search-torrents--icon--foreground--active: #2c9e65; +$search-torrents--icon--foreground--active: $blue; $sidebar-filter--foreground: $sidebar--foreground; $sidebar-filter--foreground--header: rgba($sidebar-filter--foreground, 0.5); diff --git a/client/source/scripts/components/forms/SearchBox.js b/client/source/scripts/components/forms/SearchBox.js index fce592e9..14d3f9dd 100644 --- a/client/source/scripts/components/forms/SearchBox.js +++ b/client/source/scripts/components/forms/SearchBox.js @@ -1,11 +1,13 @@ import classnames from'classnames'; import React from'react'; +import Close from '../icons/Close'; import Search from '../icons/Search'; import UIActions from '../../actions/UIActions'; const METHODS_TO_BIND = [ - 'handleKeyUp' + 'handleSearchChange', + 'resetSearch' ]; export default class SearchBox extends React.Component { @@ -21,28 +23,46 @@ export default class SearchBox extends React.Component { }); } - handleKeyUp(event) { - let value = event.target.value; - this.setState({ - searchValue: value - }); - UIActions.setTorrentsSearchFilter(value); + handleSearchChange(event) { + let searchValue = event.target.value; + this.setState({searchValue}); + UIActions.setTorrentsSearchFilter(searchValue); + } + + isSearchActive() { + return this.state.searchValue !== ''; + } + + resetSearch() { + this.setState({searchValue: ''}); + UIActions.setTorrentsSearchFilter(''); } render() { - let classSet = classnames({ + let clearSearchButton = null; + let classes = classnames({ 'sidebar__item': true, - 'sidebar__item--search': true, - 'is-in-use': this.state.searchValue !== '' + 'search': true, + 'is-in-use': this.isSearchActive() }); + if (this.isSearchActive()) { + clearSearchButton = ( +
+ +
+ ); + } + return ( -
+
+ {clearSearchButton} + onChange={this.handleSearchChange} + value={this.state.searchValue} />
); } diff --git a/server/assets/app.js b/server/assets/app.js index 1053d9fc..c36de4cd 100644 --- a/server/assets/app.js +++ b/server/assets/app.js @@ -1532,7 +1532,7 @@ /* 248 */ /***/ function(module, exports, __webpack_require__) { - eval("'use strict';\n\nObject.defineProperty(exports, '__esModule', {\n value: true\n});\n\nvar _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();\n\nvar _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar _classnames = __webpack_require__(171);\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _iconsSearch = __webpack_require__(249);\n\nvar _iconsSearch2 = _interopRequireDefault(_iconsSearch);\n\nvar _actionsUIActions = __webpack_require__(206);\n\nvar _actionsUIActions2 = _interopRequireDefault(_actionsUIActions);\n\nvar METHODS_TO_BIND = ['handleKeyUp'];\n\nvar SearchBox = (function (_React$Component) {\n _inherits(SearchBox, _React$Component);\n\n function SearchBox() {\n var _this = this;\n\n _classCallCheck(this, SearchBox);\n\n _get(Object.getPrototypeOf(SearchBox.prototype), 'constructor', this).call(this);\n\n this.state = {\n searchValue: ''\n };\n\n METHODS_TO_BIND.forEach(function (method) {\n _this[method] = _this[method].bind(_this);\n });\n }\n\n _createClass(SearchBox, [{\n key: 'handleKeyUp',\n value: function handleKeyUp(event) {\n var value = event.target.value;\n this.setState({\n searchValue: value\n });\n _actionsUIActions2['default'].setTorrentsSearchFilter(value);\n }\n }, {\n key: 'render',\n value: function render() {\n var classSet = (0, _classnames2['default'])({\n 'sidebar__item': true,\n 'sidebar__item--search': true,\n 'is-in-use': this.state.searchValue !== ''\n });\n\n return _react2['default'].createElement(\n 'div',\n { className: classSet },\n _react2['default'].createElement(_iconsSearch2['default'], null),\n _react2['default'].createElement('input', { className: 'textbox',\n type: 'text',\n placeholder: 'Search Torrents',\n onKeyUp: this.handleKeyUp })\n );\n }\n }]);\n\n return SearchBox;\n})(_react2['default'].Component);\n\nexports['default'] = SearchBox;\nmodule.exports = exports['default'];//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9jbGllbnQvc291cmNlL3NjcmlwdHMvY29tcG9uZW50cy9mb3Jtcy9TZWFyY2hCb3guanM/ZGQ1YyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7QUFFQTtBQUNBO0FBQ0EsQ0FBQzs7QUFFRCxpQ0FBaUMsMkNBQTJDLGdCQUFnQixrQkFBa0IsT0FBTywyQkFBMkIsd0RBQXdELGdDQUFnQyx1REFBdUQsMkRBQTJELEVBQUUsRUFBRSx5REFBeUQscUVBQXFFLDZEQUE2RCxvQkFBb0IsR0FBRyxFQUFFOztBQUVsakIsdUNBQXVDLG1CQUFtQiw0QkFBNEIsaURBQWlELGdCQUFnQixrREFBa0QsOERBQThELDBCQUEwQiw0Q0FBNEMsdUJBQXVCLGtCQUFrQixFQUFFLE9BQU8sYUFBYSxnQkFBZ0IsZ0JBQWdCLGVBQWUsMkJBQTJCLG9CQUFvQixFQUFFLEVBQUUsNEJBQTRCLG1CQUFtQixFQUFFLE9BQU8sdUJBQXVCLDRCQUE0QixrQkFBa0IsRUFBRSw4QkFBOEIsRUFBRSxFQUFFOztBQUUvb0Isc0NBQXNDLHVDQUF1QyxrQkFBa0I7O0FBRS9GLGlEQUFpRCwwQ0FBMEMsMERBQTBELEVBQUU7O0FBRXZKLDBDQUEwQywrREFBK0QscUdBQXFHLEVBQUUseUVBQXlFLGVBQWUseUVBQXlFLEVBQUUsRUFBRSx1SEFBdUg7O0FBRTVlOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTs7QUFFQTs7QUFFQTtBQUNBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBLEtBQUs7QUFDTDs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxPQUFPO0FBQ1A7QUFDQTtBQUNBLEdBQUc7QUFDSDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxPQUFPOztBQUVQO0FBQ0E7QUFDQSxTQUFTLHNCQUFzQjtBQUMvQjtBQUNBLG1EQUFtRDtBQUNuRDtBQUNBO0FBQ0EscUNBQXFDO0FBQ3JDO0FBQ0E7QUFDQSxHQUFHOztBQUVIO0FBQ0EsQ0FBQzs7QUFFRDtBQUNBIiwiZmlsZSI6IjI0OC5qcyIsInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0JztcblxuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsICdfX2VzTW9kdWxlJywge1xuICB2YWx1ZTogdHJ1ZVxufSk7XG5cbnZhciBfY3JlYXRlQ2xhc3MgPSAoZnVuY3Rpb24gKCkgeyBmdW5jdGlvbiBkZWZpbmVQcm9wZXJ0aWVzKHRhcmdldCwgcHJvcHMpIHsgZm9yICh2YXIgaSA9IDA7IGkgPCBwcm9wcy5sZW5ndGg7IGkrKykgeyB2YXIgZGVzY3JpcHRvciA9IHByb3BzW2ldOyBkZXNjcmlwdG9yLmVudW1lcmFibGUgPSBkZXNjcmlwdG9yLmVudW1lcmFibGUgfHwgZmFsc2U7IGRlc2NyaXB0b3IuY29uZmlndXJhYmxlID0gdHJ1ZTsgaWYgKCd2YWx1ZScgaW4gZGVzY3JpcHRvcikgZGVzY3JpcHRvci53cml0YWJsZSA9IHRydWU7IE9iamVjdC5kZWZpbmVQcm9wZXJ0eSh0YXJnZXQsIGRlc2NyaXB0b3Iua2V5LCBkZXNjcmlwdG9yKTsgfSB9IHJldHVybiBmdW5jdGlvbiAoQ29uc3RydWN0b3IsIHByb3RvUHJvcHMsIHN0YXRpY1Byb3BzKSB7IGlmIChwcm90b1Byb3BzKSBkZWZpbmVQcm9wZXJ0aWVzKENvbnN0cnVjdG9yLnByb3RvdHlwZSwgcHJvdG9Qcm9wcyk7IGlmIChzdGF0aWNQcm9wcykgZGVmaW5lUHJvcGVydGllcyhDb25zdHJ1Y3Rvciwgc3RhdGljUHJvcHMpOyByZXR1cm4gQ29uc3RydWN0b3I7IH07IH0pKCk7XG5cbnZhciBfZ2V0ID0gZnVuY3Rpb24gZ2V0KF94LCBfeDIsIF94MykgeyB2YXIgX2FnYWluID0gdHJ1ZTsgX2Z1bmN0aW9uOiB3aGlsZSAoX2FnYWluKSB7IHZhciBvYmplY3QgPSBfeCwgcHJvcGVydHkgPSBfeDIsIHJlY2VpdmVyID0gX3gzOyBfYWdhaW4gPSBmYWxzZTsgaWYgKG9iamVjdCA9PT0gbnVsbCkgb2JqZWN0ID0gRnVuY3Rpb24ucHJvdG90eXBlOyB2YXIgZGVzYyA9IE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3Iob2JqZWN0LCBwcm9wZXJ0eSk7IGlmIChkZXNjID09PSB1bmRlZmluZWQpIHsgdmFyIHBhcmVudCA9IE9iamVjdC5nZXRQcm90b3R5cGVPZihvYmplY3QpOyBpZiAocGFyZW50ID09PSBudWxsKSB7IHJldHVybiB1bmRlZmluZWQ7IH0gZWxzZSB7IF94ID0gcGFyZW50OyBfeDIgPSBwcm9wZXJ0eTsgX3gzID0gcmVjZWl2ZXI7IF9hZ2FpbiA9IHRydWU7IGRlc2MgPSBwYXJlbnQgPSB1bmRlZmluZWQ7IGNvbnRpbnVlIF9mdW5jdGlvbjsgfSB9IGVsc2UgaWYgKCd2YWx1ZScgaW4gZGVzYykgeyByZXR1cm4gZGVzYy52YWx1ZTsgfSBlbHNlIHsgdmFyIGdldHRlciA9IGRlc2MuZ2V0OyBpZiAoZ2V0dGVyID09PSB1bmRlZmluZWQpIHsgcmV0dXJuIHVuZGVmaW5lZDsgfSByZXR1cm4gZ2V0dGVyLmNhbGwocmVjZWl2ZXIpOyB9IH0gfTtcblxuZnVuY3Rpb24gX2ludGVyb3BSZXF1aXJlRGVmYXVsdChvYmopIHsgcmV0dXJuIG9iaiAmJiBvYmouX19lc01vZHVsZSA/IG9iaiA6IHsgJ2RlZmF1bHQnOiBvYmogfTsgfVxuXG5mdW5jdGlvbiBfY2xhc3NDYWxsQ2hlY2soaW5zdGFuY2UsIENvbnN0cnVjdG9yKSB7IGlmICghKGluc3RhbmNlIGluc3RhbmNlb2YgQ29uc3RydWN0b3IpKSB7IHRocm93IG5ldyBUeXBlRXJyb3IoJ0Nhbm5vdCBjYWxsIGEgY2xhc3MgYXMgYSBmdW5jdGlvbicpOyB9IH1cblxuZnVuY3Rpb24gX2luaGVyaXRzKHN1YkNsYXNzLCBzdXBlckNsYXNzKSB7IGlmICh0eXBlb2Ygc3VwZXJDbGFzcyAhPT0gJ2Z1bmN0aW9uJyAmJiBzdXBlckNsYXNzICE9PSBudWxsKSB7IHRocm93IG5ldyBUeXBlRXJyb3IoJ1N1cGVyIGV4cHJlc3Npb24gbXVzdCBlaXRoZXIgYmUgbnVsbCBvciBhIGZ1bmN0aW9uLCBub3QgJyArIHR5cGVvZiBzdXBlckNsYXNzKTsgfSBzdWJDbGFzcy5wcm90b3R5cGUgPSBPYmplY3QuY3JlYXRlKHN1cGVyQ2xhc3MgJiYgc3VwZXJDbGFzcy5wcm90b3R5cGUsIHsgY29uc3RydWN0b3I6IHsgdmFsdWU6IHN1YkNsYXNzLCBlbnVtZXJhYmxlOiBmYWxzZSwgd3JpdGFibGU6IHRydWUsIGNvbmZpZ3VyYWJsZTogdHJ1ZSB9IH0pOyBpZiAoc3VwZXJDbGFzcykgT2JqZWN0LnNldFByb3RvdHlwZU9mID8gT2JqZWN0LnNldFByb3RvdHlwZU9mKHN1YkNsYXNzLCBzdXBlckNsYXNzKSA6IHN1YkNsYXNzLl9fcHJvdG9fXyA9IHN1cGVyQ2xhc3M7IH1cblxudmFyIF9jbGFzc25hbWVzID0gcmVxdWlyZSgnY2xhc3NuYW1lcycpO1xuXG52YXIgX2NsYXNzbmFtZXMyID0gX2ludGVyb3BSZXF1aXJlRGVmYXVsdChfY2xhc3NuYW1lcyk7XG5cbnZhciBfcmVhY3QgPSByZXF1aXJlKCdyZWFjdCcpO1xuXG52YXIgX3JlYWN0MiA9IF9pbnRlcm9wUmVxdWlyZURlZmF1bHQoX3JlYWN0KTtcblxudmFyIF9pY29uc1NlYXJjaCA9IHJlcXVpcmUoJy4uL2ljb25zL1NlYXJjaCcpO1xuXG52YXIgX2ljb25zU2VhcmNoMiA9IF9pbnRlcm9wUmVxdWlyZURlZmF1bHQoX2ljb25zU2VhcmNoKTtcblxudmFyIF9hY3Rpb25zVUlBY3Rpb25zID0gcmVxdWlyZSgnLi4vLi4vYWN0aW9ucy9VSUFjdGlvbnMnKTtcblxudmFyIF9hY3Rpb25zVUlBY3Rpb25zMiA9IF9pbnRlcm9wUmVxdWlyZURlZmF1bHQoX2FjdGlvbnNVSUFjdGlvbnMpO1xuXG52YXIgTUVUSE9EU19UT19CSU5EID0gWydoYW5kbGVLZXlVcCddO1xuXG52YXIgU2VhcmNoQm94ID0gKGZ1bmN0aW9uIChfUmVhY3QkQ29tcG9uZW50KSB7XG4gIF9pbmhlcml0cyhTZWFyY2hCb3gsIF9SZWFjdCRDb21wb25lbnQpO1xuXG4gIGZ1bmN0aW9uIFNlYXJjaEJveCgpIHtcbiAgICB2YXIgX3RoaXMgPSB0aGlzO1xuXG4gICAgX2NsYXNzQ2FsbENoZWNrKHRoaXMsIFNlYXJjaEJveCk7XG5cbiAgICBfZ2V0KE9iamVjdC5nZXRQcm90b3R5cGVPZihTZWFyY2hCb3gucHJvdG90eXBlKSwgJ2NvbnN0cnVjdG9yJywgdGhpcykuY2FsbCh0aGlzKTtcblxuICAgIHRoaXMuc3RhdGUgPSB7XG4gICAgICBzZWFyY2hWYWx1ZTogJydcbiAgICB9O1xuXG4gICAgTUVUSE9EU19UT19CSU5ELmZvckVhY2goZnVuY3Rpb24gKG1ldGhvZCkge1xuICAgICAgX3RoaXNbbWV0aG9kXSA9IF90aGlzW21ldGhvZF0uYmluZChfdGhpcyk7XG4gICAgfSk7XG4gIH1cblxuICBfY3JlYXRlQ2xhc3MoU2VhcmNoQm94LCBbe1xuICAgIGtleTogJ2hhbmRsZUtleVVwJyxcbiAgICB2YWx1ZTogZnVuY3Rpb24gaGFuZGxlS2V5VXAoZXZlbnQpIHtcbiAgICAgIHZhciB2YWx1ZSA9IGV2ZW50LnRhcmdldC52YWx1ZTtcbiAgICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgICBzZWFyY2hWYWx1ZTogdmFsdWVcbiAgICAgIH0pO1xuICAgICAgX2FjdGlvbnNVSUFjdGlvbnMyWydkZWZhdWx0J10uc2V0VG9ycmVudHNTZWFyY2hGaWx0ZXIodmFsdWUpO1xuICAgIH1cbiAgfSwge1xuICAgIGtleTogJ3JlbmRlcicsXG4gICAgdmFsdWU6IGZ1bmN0aW9uIHJlbmRlcigpIHtcbiAgICAgIHZhciBjbGFzc1NldCA9ICgwLCBfY2xhc3NuYW1lczJbJ2RlZmF1bHQnXSkoe1xuICAgICAgICAnc2lkZWJhcl9faXRlbSc6IHRydWUsXG4gICAgICAgICdzaWRlYmFyX19pdGVtLS1zZWFyY2gnOiB0cnVlLFxuICAgICAgICAnaXMtaW4tdXNlJzogdGhpcy5zdGF0ZS5zZWFyY2hWYWx1ZSAhPT0gJydcbiAgICAgIH0pO1xuXG4gICAgICByZXR1cm4gX3JlYWN0MlsnZGVmYXVsdCddLmNyZWF0ZUVsZW1lbnQoXG4gICAgICAgICdkaXYnLFxuICAgICAgICB7IGNsYXNzTmFtZTogY2xhc3NTZXQgfSxcbiAgICAgICAgX3JlYWN0MlsnZGVmYXVsdCddLmNyZWF0ZUVsZW1lbnQoX2ljb25zU2VhcmNoMlsnZGVmYXVsdCddLCBudWxsKSxcbiAgICAgICAgX3JlYWN0MlsnZGVmYXVsdCddLmNyZWF0ZUVsZW1lbnQoJ2lucHV0JywgeyBjbGFzc05hbWU6ICd0ZXh0Ym94JyxcbiAgICAgICAgICB0eXBlOiAndGV4dCcsXG4gICAgICAgICAgcGxhY2Vob2xkZXI6ICdTZWFyY2ggVG9ycmVudHMnLFxuICAgICAgICAgIG9uS2V5VXA6IHRoaXMuaGFuZGxlS2V5VXAgfSlcbiAgICAgICk7XG4gICAgfVxuICB9XSk7XG5cbiAgcmV0dXJuIFNlYXJjaEJveDtcbn0pKF9yZWFjdDJbJ2RlZmF1bHQnXS5Db21wb25lbnQpO1xuXG5leHBvcnRzWydkZWZhdWx0J10gPSBTZWFyY2hCb3g7XG5tb2R1bGUuZXhwb3J0cyA9IGV4cG9ydHNbJ2RlZmF1bHQnXTtcblxuXG4vKioqKioqKioqKioqKioqKipcbiAqKiBXRUJQQUNLIEZPT1RFUlxuICoqIC4vY2xpZW50L3NvdXJjZS9zY3JpcHRzL2NvbXBvbmVudHMvZm9ybXMvU2VhcmNoQm94LmpzXG4gKiogbW9kdWxlIGlkID0gMjQ4XG4gKiogbW9kdWxlIGNodW5rcyA9IDBcbiAqKi8iXSwic291cmNlUm9vdCI6IiJ9"); + eval("'use strict';\n\nObject.defineProperty(exports, '__esModule', {\n value: true\n});\n\nvar _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();\n\nvar _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar _classnames = __webpack_require__(171);\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _iconsClose = __webpack_require__(201);\n\nvar _iconsClose2 = _interopRequireDefault(_iconsClose);\n\nvar _iconsSearch = __webpack_require__(249);\n\nvar _iconsSearch2 = _interopRequireDefault(_iconsSearch);\n\nvar _actionsUIActions = __webpack_require__(206);\n\nvar _actionsUIActions2 = _interopRequireDefault(_actionsUIActions);\n\nvar METHODS_TO_BIND = ['handleSearchChange', 'resetSearch'];\n\nvar SearchBox = (function (_React$Component) {\n _inherits(SearchBox, _React$Component);\n\n function SearchBox() {\n var _this = this;\n\n _classCallCheck(this, SearchBox);\n\n _get(Object.getPrototypeOf(SearchBox.prototype), 'constructor', this).call(this);\n\n this.state = {\n searchValue: ''\n };\n\n METHODS_TO_BIND.forEach(function (method) {\n _this[method] = _this[method].bind(_this);\n });\n }\n\n _createClass(SearchBox, [{\n key: 'handleSearchChange',\n value: function handleSearchChange(event) {\n var searchValue = event.target.value;\n this.setState({ searchValue: searchValue });\n _actionsUIActions2['default'].setTorrentsSearchFilter(searchValue);\n }\n }, {\n key: 'isSearchActive',\n value: function isSearchActive() {\n return this.state.searchValue !== '';\n }\n }, {\n key: 'resetSearch',\n value: function resetSearch() {\n this.setState({ searchValue: '' });\n _actionsUIActions2['default'].setTorrentsSearchFilter('');\n }\n }, {\n key: 'render',\n value: function render() {\n var clearSearchButton = null;\n var classes = (0, _classnames2['default'])({\n 'sidebar__item': true,\n 'search': true,\n 'is-in-use': this.isSearchActive()\n });\n\n if (this.isSearchActive()) {\n clearSearchButton = _react2['default'].createElement(\n 'div',\n { className: 'button search__reset-button', onClick: this.resetSearch },\n _react2['default'].createElement(_iconsClose2['default'], null)\n );\n }\n\n return _react2['default'].createElement(\n 'div',\n { className: classes },\n clearSearchButton,\n _react2['default'].createElement(_iconsSearch2['default'], null),\n _react2['default'].createElement('input', { className: 'textbox',\n type: 'text',\n placeholder: 'Search Torrents',\n onChange: this.handleSearchChange,\n value: this.state.searchValue })\n );\n }\n }]);\n\n return SearchBox;\n})(_react2['default'].Component);\n\nexports['default'] = SearchBox;\nmodule.exports = exports['default'];//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9jbGllbnQvc291cmNlL3NjcmlwdHMvY29tcG9uZW50cy9mb3Jtcy9TZWFyY2hCb3guanM/ZGQ1YyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7QUFFQTtBQUNBO0FBQ0EsQ0FBQzs7QUFFRCxpQ0FBaUMsMkNBQTJDLGdCQUFnQixrQkFBa0IsT0FBTywyQkFBMkIsd0RBQXdELGdDQUFnQyx1REFBdUQsMkRBQTJELEVBQUUsRUFBRSx5REFBeUQscUVBQXFFLDZEQUE2RCxvQkFBb0IsR0FBRyxFQUFFOztBQUVsakIsdUNBQXVDLG1CQUFtQiw0QkFBNEIsaURBQWlELGdCQUFnQixrREFBa0QsOERBQThELDBCQUEwQiw0Q0FBNEMsdUJBQXVCLGtCQUFrQixFQUFFLE9BQU8sYUFBYSxnQkFBZ0IsZ0JBQWdCLGVBQWUsMkJBQTJCLG9CQUFvQixFQUFFLEVBQUUsNEJBQTRCLG1CQUFtQixFQUFFLE9BQU8sdUJBQXVCLDRCQUE0QixrQkFBa0IsRUFBRSw4QkFBOEIsRUFBRSxFQUFFOztBQUUvb0Isc0NBQXNDLHVDQUF1QyxrQkFBa0I7O0FBRS9GLGlEQUFpRCwwQ0FBMEMsMERBQTBELEVBQUU7O0FBRXZKLDBDQUEwQywrREFBK0QscUdBQXFHLEVBQUUseUVBQXlFLGVBQWUseUVBQXlFLEVBQUUsRUFBRSx1SEFBdUg7O0FBRTVlOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTs7QUFFQTs7QUFFQTtBQUNBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBLEtBQUs7QUFDTDs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLHFCQUFxQiwyQkFBMkI7QUFDaEQ7QUFDQTtBQUNBLEdBQUc7QUFDSDtBQUNBO0FBQ0E7QUFDQTtBQUNBLEdBQUc7QUFDSDtBQUNBO0FBQ0EscUJBQXFCLGtCQUFrQjtBQUN2QztBQUNBO0FBQ0EsR0FBRztBQUNIO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsT0FBTzs7QUFFUDtBQUNBO0FBQ0E7QUFDQSxXQUFXLHNFQUFzRTtBQUNqRjtBQUNBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBLFNBQVMscUJBQXFCO0FBQzlCO0FBQ0E7QUFDQSxtREFBbUQ7QUFDbkQ7QUFDQTtBQUNBO0FBQ0EseUNBQXlDO0FBQ3pDO0FBQ0E7QUFDQSxHQUFHOztBQUVIO0FBQ0EsQ0FBQzs7QUFFRDtBQUNBIiwiZmlsZSI6IjI0OC5qcyIsInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0JztcblxuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsICdfX2VzTW9kdWxlJywge1xuICB2YWx1ZTogdHJ1ZVxufSk7XG5cbnZhciBfY3JlYXRlQ2xhc3MgPSAoZnVuY3Rpb24gKCkgeyBmdW5jdGlvbiBkZWZpbmVQcm9wZXJ0aWVzKHRhcmdldCwgcHJvcHMpIHsgZm9yICh2YXIgaSA9IDA7IGkgPCBwcm9wcy5sZW5ndGg7IGkrKykgeyB2YXIgZGVzY3JpcHRvciA9IHByb3BzW2ldOyBkZXNjcmlwdG9yLmVudW1lcmFibGUgPSBkZXNjcmlwdG9yLmVudW1lcmFibGUgfHwgZmFsc2U7IGRlc2NyaXB0b3IuY29uZmlndXJhYmxlID0gdHJ1ZTsgaWYgKCd2YWx1ZScgaW4gZGVzY3JpcHRvcikgZGVzY3JpcHRvci53cml0YWJsZSA9IHRydWU7IE9iamVjdC5kZWZpbmVQcm9wZXJ0eSh0YXJnZXQsIGRlc2NyaXB0b3Iua2V5LCBkZXNjcmlwdG9yKTsgfSB9IHJldHVybiBmdW5jdGlvbiAoQ29uc3RydWN0b3IsIHByb3RvUHJvcHMsIHN0YXRpY1Byb3BzKSB7IGlmIChwcm90b1Byb3BzKSBkZWZpbmVQcm9wZXJ0aWVzKENvbnN0cnVjdG9yLnByb3RvdHlwZSwgcHJvdG9Qcm9wcyk7IGlmIChzdGF0aWNQcm9wcykgZGVmaW5lUHJvcGVydGllcyhDb25zdHJ1Y3Rvciwgc3RhdGljUHJvcHMpOyByZXR1cm4gQ29uc3RydWN0b3I7IH07IH0pKCk7XG5cbnZhciBfZ2V0ID0gZnVuY3Rpb24gZ2V0KF94LCBfeDIsIF94MykgeyB2YXIgX2FnYWluID0gdHJ1ZTsgX2Z1bmN0aW9uOiB3aGlsZSAoX2FnYWluKSB7IHZhciBvYmplY3QgPSBfeCwgcHJvcGVydHkgPSBfeDIsIHJlY2VpdmVyID0gX3gzOyBfYWdhaW4gPSBmYWxzZTsgaWYgKG9iamVjdCA9PT0gbnVsbCkgb2JqZWN0ID0gRnVuY3Rpb24ucHJvdG90eXBlOyB2YXIgZGVzYyA9IE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3Iob2JqZWN0LCBwcm9wZXJ0eSk7IGlmIChkZXNjID09PSB1bmRlZmluZWQpIHsgdmFyIHBhcmVudCA9IE9iamVjdC5nZXRQcm90b3R5cGVPZihvYmplY3QpOyBpZiAocGFyZW50ID09PSBudWxsKSB7IHJldHVybiB1bmRlZmluZWQ7IH0gZWxzZSB7IF94ID0gcGFyZW50OyBfeDIgPSBwcm9wZXJ0eTsgX3gzID0gcmVjZWl2ZXI7IF9hZ2FpbiA9IHRydWU7IGRlc2MgPSBwYXJlbnQgPSB1bmRlZmluZWQ7IGNvbnRpbnVlIF9mdW5jdGlvbjsgfSB9IGVsc2UgaWYgKCd2YWx1ZScgaW4gZGVzYykgeyByZXR1cm4gZGVzYy52YWx1ZTsgfSBlbHNlIHsgdmFyIGdldHRlciA9IGRlc2MuZ2V0OyBpZiAoZ2V0dGVyID09PSB1bmRlZmluZWQpIHsgcmV0dXJuIHVuZGVmaW5lZDsgfSByZXR1cm4gZ2V0dGVyLmNhbGwocmVjZWl2ZXIpOyB9IH0gfTtcblxuZnVuY3Rpb24gX2ludGVyb3BSZXF1aXJlRGVmYXVsdChvYmopIHsgcmV0dXJuIG9iaiAmJiBvYmouX19lc01vZHVsZSA/IG9iaiA6IHsgJ2RlZmF1bHQnOiBvYmogfTsgfVxuXG5mdW5jdGlvbiBfY2xhc3NDYWxsQ2hlY2soaW5zdGFuY2UsIENvbnN0cnVjdG9yKSB7IGlmICghKGluc3RhbmNlIGluc3RhbmNlb2YgQ29uc3RydWN0b3IpKSB7IHRocm93IG5ldyBUeXBlRXJyb3IoJ0Nhbm5vdCBjYWxsIGEgY2xhc3MgYXMgYSBmdW5jdGlvbicpOyB9IH1cblxuZnVuY3Rpb24gX2luaGVyaXRzKHN1YkNsYXNzLCBzdXBlckNsYXNzKSB7IGlmICh0eXBlb2Ygc3VwZXJDbGFzcyAhPT0gJ2Z1bmN0aW9uJyAmJiBzdXBlckNsYXNzICE9PSBudWxsKSB7IHRocm93IG5ldyBUeXBlRXJyb3IoJ1N1cGVyIGV4cHJlc3Npb24gbXVzdCBlaXRoZXIgYmUgbnVsbCBvciBhIGZ1bmN0aW9uLCBub3QgJyArIHR5cGVvZiBzdXBlckNsYXNzKTsgfSBzdWJDbGFzcy5wcm90b3R5cGUgPSBPYmplY3QuY3JlYXRlKHN1cGVyQ2xhc3MgJiYgc3VwZXJDbGFzcy5wcm90b3R5cGUsIHsgY29uc3RydWN0b3I6IHsgdmFsdWU6IHN1YkNsYXNzLCBlbnVtZXJhYmxlOiBmYWxzZSwgd3JpdGFibGU6IHRydWUsIGNvbmZpZ3VyYWJsZTogdHJ1ZSB9IH0pOyBpZiAoc3VwZXJDbGFzcykgT2JqZWN0LnNldFByb3RvdHlwZU9mID8gT2JqZWN0LnNldFByb3RvdHlwZU9mKHN1YkNsYXNzLCBzdXBlckNsYXNzKSA6IHN1YkNsYXNzLl9fcHJvdG9fXyA9IHN1cGVyQ2xhc3M7IH1cblxudmFyIF9jbGFzc25hbWVzID0gcmVxdWlyZSgnY2xhc3NuYW1lcycpO1xuXG52YXIgX2NsYXNzbmFtZXMyID0gX2ludGVyb3BSZXF1aXJlRGVmYXVsdChfY2xhc3NuYW1lcyk7XG5cbnZhciBfcmVhY3QgPSByZXF1aXJlKCdyZWFjdCcpO1xuXG52YXIgX3JlYWN0MiA9IF9pbnRlcm9wUmVxdWlyZURlZmF1bHQoX3JlYWN0KTtcblxudmFyIF9pY29uc0Nsb3NlID0gcmVxdWlyZSgnLi4vaWNvbnMvQ2xvc2UnKTtcblxudmFyIF9pY29uc0Nsb3NlMiA9IF9pbnRlcm9wUmVxdWlyZURlZmF1bHQoX2ljb25zQ2xvc2UpO1xuXG52YXIgX2ljb25zU2VhcmNoID0gcmVxdWlyZSgnLi4vaWNvbnMvU2VhcmNoJyk7XG5cbnZhciBfaWNvbnNTZWFyY2gyID0gX2ludGVyb3BSZXF1aXJlRGVmYXVsdChfaWNvbnNTZWFyY2gpO1xuXG52YXIgX2FjdGlvbnNVSUFjdGlvbnMgPSByZXF1aXJlKCcuLi8uLi9hY3Rpb25zL1VJQWN0aW9ucycpO1xuXG52YXIgX2FjdGlvbnNVSUFjdGlvbnMyID0gX2ludGVyb3BSZXF1aXJlRGVmYXVsdChfYWN0aW9uc1VJQWN0aW9ucyk7XG5cbnZhciBNRVRIT0RTX1RPX0JJTkQgPSBbJ2hhbmRsZVNlYXJjaENoYW5nZScsICdyZXNldFNlYXJjaCddO1xuXG52YXIgU2VhcmNoQm94ID0gKGZ1bmN0aW9uIChfUmVhY3QkQ29tcG9uZW50KSB7XG4gIF9pbmhlcml0cyhTZWFyY2hCb3gsIF9SZWFjdCRDb21wb25lbnQpO1xuXG4gIGZ1bmN0aW9uIFNlYXJjaEJveCgpIHtcbiAgICB2YXIgX3RoaXMgPSB0aGlzO1xuXG4gICAgX2NsYXNzQ2FsbENoZWNrKHRoaXMsIFNlYXJjaEJveCk7XG5cbiAgICBfZ2V0KE9iamVjdC5nZXRQcm90b3R5cGVPZihTZWFyY2hCb3gucHJvdG90eXBlKSwgJ2NvbnN0cnVjdG9yJywgdGhpcykuY2FsbCh0aGlzKTtcblxuICAgIHRoaXMuc3RhdGUgPSB7XG4gICAgICBzZWFyY2hWYWx1ZTogJydcbiAgICB9O1xuXG4gICAgTUVUSE9EU19UT19CSU5ELmZvckVhY2goZnVuY3Rpb24gKG1ldGhvZCkge1xuICAgICAgX3RoaXNbbWV0aG9kXSA9IF90aGlzW21ldGhvZF0uYmluZChfdGhpcyk7XG4gICAgfSk7XG4gIH1cblxuICBfY3JlYXRlQ2xhc3MoU2VhcmNoQm94LCBbe1xuICAgIGtleTogJ2hhbmRsZVNlYXJjaENoYW5nZScsXG4gICAgdmFsdWU6IGZ1bmN0aW9uIGhhbmRsZVNlYXJjaENoYW5nZShldmVudCkge1xuICAgICAgdmFyIHNlYXJjaFZhbHVlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xuICAgICAgdGhpcy5zZXRTdGF0ZSh7IHNlYXJjaFZhbHVlOiBzZWFyY2hWYWx1ZSB9KTtcbiAgICAgIF9hY3Rpb25zVUlBY3Rpb25zMlsnZGVmYXVsdCddLnNldFRvcnJlbnRzU2VhcmNoRmlsdGVyKHNlYXJjaFZhbHVlKTtcbiAgICB9XG4gIH0sIHtcbiAgICBrZXk6ICdpc1NlYXJjaEFjdGl2ZScsXG4gICAgdmFsdWU6IGZ1bmN0aW9uIGlzU2VhcmNoQWN0aXZlKCkge1xuICAgICAgcmV0dXJuIHRoaXMuc3RhdGUuc2VhcmNoVmFsdWUgIT09ICcnO1xuICAgIH1cbiAgfSwge1xuICAgIGtleTogJ3Jlc2V0U2VhcmNoJyxcbiAgICB2YWx1ZTogZnVuY3Rpb24gcmVzZXRTZWFyY2goKSB7XG4gICAgICB0aGlzLnNldFN0YXRlKHsgc2VhcmNoVmFsdWU6ICcnIH0pO1xuICAgICAgX2FjdGlvbnNVSUFjdGlvbnMyWydkZWZhdWx0J10uc2V0VG9ycmVudHNTZWFyY2hGaWx0ZXIoJycpO1xuICAgIH1cbiAgfSwge1xuICAgIGtleTogJ3JlbmRlcicsXG4gICAgdmFsdWU6IGZ1bmN0aW9uIHJlbmRlcigpIHtcbiAgICAgIHZhciBjbGVhclNlYXJjaEJ1dHRvbiA9IG51bGw7XG4gICAgICB2YXIgY2xhc3NlcyA9ICgwLCBfY2xhc3NuYW1lczJbJ2RlZmF1bHQnXSkoe1xuICAgICAgICAnc2lkZWJhcl9faXRlbSc6IHRydWUsXG4gICAgICAgICdzZWFyY2gnOiB0cnVlLFxuICAgICAgICAnaXMtaW4tdXNlJzogdGhpcy5pc1NlYXJjaEFjdGl2ZSgpXG4gICAgICB9KTtcblxuICAgICAgaWYgKHRoaXMuaXNTZWFyY2hBY3RpdmUoKSkge1xuICAgICAgICBjbGVhclNlYXJjaEJ1dHRvbiA9IF9yZWFjdDJbJ2RlZmF1bHQnXS5jcmVhdGVFbGVtZW50KFxuICAgICAgICAgICdkaXYnLFxuICAgICAgICAgIHsgY2xhc3NOYW1lOiAnYnV0dG9uIHNlYXJjaF9fcmVzZXQtYnV0dG9uJywgb25DbGljazogdGhpcy5yZXNldFNlYXJjaCB9LFxuICAgICAgICAgIF9yZWFjdDJbJ2RlZmF1bHQnXS5jcmVhdGVFbGVtZW50KF9pY29uc0Nsb3NlMlsnZGVmYXVsdCddLCBudWxsKVxuICAgICAgICApO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gX3JlYWN0MlsnZGVmYXVsdCddLmNyZWF0ZUVsZW1lbnQoXG4gICAgICAgICdkaXYnLFxuICAgICAgICB7IGNsYXNzTmFtZTogY2xhc3NlcyB9LFxuICAgICAgICBjbGVhclNlYXJjaEJ1dHRvbixcbiAgICAgICAgX3JlYWN0MlsnZGVmYXVsdCddLmNyZWF0ZUVsZW1lbnQoX2ljb25zU2VhcmNoMlsnZGVmYXVsdCddLCBudWxsKSxcbiAgICAgICAgX3JlYWN0MlsnZGVmYXVsdCddLmNyZWF0ZUVsZW1lbnQoJ2lucHV0JywgeyBjbGFzc05hbWU6ICd0ZXh0Ym94JyxcbiAgICAgICAgICB0eXBlOiAndGV4dCcsXG4gICAgICAgICAgcGxhY2Vob2xkZXI6ICdTZWFyY2ggVG9ycmVudHMnLFxuICAgICAgICAgIG9uQ2hhbmdlOiB0aGlzLmhhbmRsZVNlYXJjaENoYW5nZSxcbiAgICAgICAgICB2YWx1ZTogdGhpcy5zdGF0ZS5zZWFyY2hWYWx1ZSB9KVxuICAgICAgKTtcbiAgICB9XG4gIH1dKTtcblxuICByZXR1cm4gU2VhcmNoQm94O1xufSkoX3JlYWN0MlsnZGVmYXVsdCddLkNvbXBvbmVudCk7XG5cbmV4cG9ydHNbJ2RlZmF1bHQnXSA9IFNlYXJjaEJveDtcbm1vZHVsZS5leHBvcnRzID0gZXhwb3J0c1snZGVmYXVsdCddO1xuXG5cbi8qKioqKioqKioqKioqKioqKlxuICoqIFdFQlBBQ0sgRk9PVEVSXG4gKiogLi9jbGllbnQvc291cmNlL3NjcmlwdHMvY29tcG9uZW50cy9mb3Jtcy9TZWFyY2hCb3guanNcbiAqKiBtb2R1bGUgaWQgPSAyNDhcbiAqKiBtb2R1bGUgY2h1bmtzID0gMFxuICoqLyJdLCJzb3VyY2VSb290IjoiIn0="); /***/ }, /* 249 */ diff --git a/server/assets/style.css b/server/assets/style.css index 38f9b9f3..bf3df55d 100644 --- a/server/assets/style.css +++ b/server/assets/style.css @@ -1612,22 +1612,9 @@ body { .scrollbars:hover .scrollbars__thumb { opacity: 1; } -.application__sidebar { - box-shadow: 1px 0 rgba(6, 9, 11, 0.3); - color: #53718a; - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - min-width: 200px; - max-width: 240px; - overflow: auto; - position: relative; - z-index: 2; } - -.sidebar__item--search { +.search { position: relative; } - .sidebar__item--search .icon { + .search .icon { fill: #53718a; height: 22px; left: 17px; @@ -1639,7 +1626,23 @@ body { -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 22px; } - .sidebar__item--search .textbox, .sidebar__item--search .dropzone__selected-files { + .search .icon--close { + left: auto; + right: 17px; } + .search .button { + height: 100%; + position: absolute; + right: 0; + width: 30px; } + .search .button .icon { + position: absolute; + height: 10px; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 10px; } + .search .textbox, .search .dropzone__selected-files { appearance: none; -webkit-appearance: none; -moz-appearance: none; @@ -1657,42 +1660,56 @@ body { -webkit-transition: background 0.25s, border 0.25s, color 0.25s; transition: background 0.25s, border 0.25s, color 0.25s; width: 100%; } - .sidebar__item--search .textbox::-webkit-input-placeholder, .sidebar__item--search .dropzone__selected-files::-webkit-input-placeholder { + .search .textbox::-webkit-input-placeholder, .search .dropzone__selected-files::-webkit-input-placeholder { color: rgba(83, 113, 138, 0.4); font-style: italic; -webkit-transition: color 0.25s; transition: color 0.25s; } - .sidebar__item--search .textbox::-moz-placeholder, .sidebar__item--search .dropzone__selected-files::-moz-placeholder { + .search .textbox::-moz-placeholder, .search .dropzone__selected-files::-moz-placeholder { color: rgba(83, 113, 138, 0.4); font-style: italic; -webkit-transition: color 0.25s; transition: color 0.25s; } - .sidebar__item--search .textbox:-ms-input-placeholder, .sidebar__item--search .dropzone__selected-files:-ms-input-placeholder { + .search .textbox:-ms-input-placeholder, .search .dropzone__selected-files:-ms-input-placeholder { color: rgba(83, 113, 138, 0.4); font-style: italic; -webkit-transition: color 0.25s; transition: color 0.25s; } - .sidebar__item--search .textbox::placeholder, .sidebar__item--search .dropzone__selected-files::placeholder { + .search .textbox::placeholder, .search .dropzone__selected-files::placeholder { color: rgba(83, 113, 138, 0.4); font-style: italic; -webkit-transition: color 0.25s; transition: color 0.25s; } - .sidebar__item--search.is-in-use .icon { - fill: #2c9e65; + .search.is-in-use .icon { + fill: #258de5; opacity: 1; } - .sidebar__item--search.is-in-use .textbox, .sidebar__item--search.is-in-use .dropzone__selected-files { - background: #39ce83; - border-bottom: 1px solid #39ce83; - border-top: 1px solid #39ce83; - color: #1e8954; } - .sidebar__item--search.is-in-use .textbox::-webkit-input-placeholder, .sidebar__item--search.is-in-use .dropzone__selected-files::-webkit-input-placeholder { - color: #2cad6d; } - .sidebar__item--search.is-in-use .textbox::-moz-placeholder, .sidebar__item--search.is-in-use .dropzone__selected-files::-moz-placeholder { - color: #2cad6d; } - .sidebar__item--search.is-in-use .textbox:-ms-input-placeholder, .sidebar__item--search.is-in-use .dropzone__selected-files:-ms-input-placeholder { - color: #2cad6d; } - .sidebar__item--search.is-in-use .textbox::placeholder, .sidebar__item--search.is-in-use .dropzone__selected-files::placeholder { - color: #2cad6d; } + .search.is-in-use .textbox, .search.is-in-use .dropzone__selected-files { + background: rgba(37, 141, 229, 0.25); + border-bottom: 1px solid rgba(37, 141, 229, 0.3); + border-top: 1px solid rgba(37, 141, 229, 0.3); + color: #258de5; + padding-right: 45px; } + .search.is-in-use .textbox::-webkit-input-placeholder, .search.is-in-use .dropzone__selected-files::-webkit-input-placeholder { + color: rgba(37, 141, 229, 0.4); } + .search.is-in-use .textbox::-moz-placeholder, .search.is-in-use .dropzone__selected-files::-moz-placeholder { + color: rgba(37, 141, 229, 0.4); } + .search.is-in-use .textbox:-ms-input-placeholder, .search.is-in-use .dropzone__selected-files:-ms-input-placeholder { + color: rgba(37, 141, 229, 0.4); } + .search.is-in-use .textbox::placeholder, .search.is-in-use .dropzone__selected-files::placeholder { + color: rgba(37, 141, 229, 0.4); } + +.application__sidebar { + box-shadow: 1px 0 rgba(6, 9, 11, 0.3); + color: #53718a; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 200px; + max-width: 240px; + overflow: auto; + position: relative; + z-index: 2; } .sidebar__item--speed-limit { padding-left: 5px;