From c8ed46850a6675e159e11a07e528045378fded8c Mon Sep 17 00:00:00 2001 From: Qstick Date: Sun, 1 Oct 2017 23:05:28 -0400 Subject: [PATCH] Updates to UI, Update NLog to 4.4.12 --- frontend/.eslintrc | 3 +- frontend/gulp/webpack.js | 128 +- frontend/gulp/webpack/css-variables-loader.js | 11 + frontend/postcss.config.js | 33 + .../Activity/History/HistoryRowConnector.js | 8 +- .../AddNewArtist/AddNewArtistModalContent.css | 2 +- .../Index/Banners/ArtistIndexBanner.css | 2 +- .../Index/Posters/ArtistIndexPoster.css | 2 +- frontend/src/Calendar/Agenda/AgendaEvent.css | 2 +- .../src/Calendar/Events/CalendarEvent.css | 2 +- .../DescriptionListItemTitle.css | 2 +- frontend/src/Components/Form/PathInput.css | 6 +- .../RootFolderSelectInputSelectedValue.css | 4 +- frontend/src/Components/Icon.js | 4 +- frontend/src/Components/Menu/MenuItem.css | 2 +- frontend/src/Components/Modal/ModalHeader.css | 2 +- .../Page/Header/ArtistSearchInput.css | 6 +- .../Page/Header/ArtistSearchResult.css | 2 +- .../Components/Page/Sidebar/PageSidebar.js | 13 +- .../Page/Sidebar/PageSidebarItem.js | 2 +- frontend/src/Components/Scroller/Scroller.css | 6 +- frontend/src/Components/SignalRConnector.js | 18 +- .../Table/Cells/VirtualTableRowCell.css | 2 +- .../src/Episode/Summary/EpisodeSummary.css | 2 +- .../DownloadClients/AddDownloadClientItem.css | 4 +- .../DownloadClients/DownloadClient.css | 2 +- .../Indexers/Indexers/AddIndexerItem.css | 4 +- .../Settings/Indexers/Indexers/Indexer.css | 2 +- .../Notifications/AddNotificationItem.css | 4 +- .../Notifications/Notification.css | 2 +- .../Profiles/Language/LanguageProfile.css | 2 +- .../Profiles/Quality/QualityProfile.css | 2 +- .../Quality/Definition/QualityDefinition.css | 14 +- frontend/src/Styles/Mixins/cover.css | 2 +- frontend/src/Styles/Mixins/linkOverlay.css | 4 +- frontend/src/Styles/Mixins/scroller.css | 6 +- frontend/src/Styles/Mixins/truncate.css | 2 +- .../src/Wanted/CutoffUnmet/CutoffUnmet.js | 4 +- .../CutoffUnmet/CutoffUnmetRowConnector.js | 17 + frontend/src/Wanted/Missing/Missing.js | 4 +- .../src/Wanted/Missing/MissingRowConnector.js | 17 + frontend/src/index.html | 4 +- package.json | 127 +- src/Lidarr.Api.V3/History/HistoryModule.cs | 23 +- src/Lidarr.Api.V3/Lidarr.Api.V3.csproj | 2 +- src/Lidarr.Api.V3/Queue/QueueModule.cs | 2 +- src/Lidarr.Api.V3/Wanted/CutoffModule.cs | 6 +- src/Lidarr.Api.V3/Wanted/MissingModule.cs | 5 +- src/Lidarr.Api.V3/packages.config | 2 +- src/Lidarr.Http/Lidarr.Http.csproj | 2 +- src/Lidarr.Http/packages.config | 2 +- src/LogentriesNLog/LogentriesNLog.csproj | 2 +- src/LogentriesNLog/packages.config | 2 +- .../NzbDrone.Host.Test.csproj | 2 +- src/NzbDrone.App.Test/packages.config | 2 +- .../NzbDrone.Automation.Test.csproj | 2 +- src/NzbDrone.Automation.Test/packages.config | 2 +- .../NzbDrone.Common.Test.csproj | 2 +- src/NzbDrone.Common.Test/packages.config | 2 +- .../EnvironmentInfo/AppFolderFactory.cs | 7 +- src/NzbDrone.Common/NzbDrone.Common.csproj | 2 +- src/NzbDrone.Common/packages.config | 2 +- src/NzbDrone.Console/NzbDrone.Console.csproj | 2 +- src/NzbDrone.Console/packages.config | 2 +- .../Checks/MonoVersionCheckFixture.cs | 13 +- .../NzbDrone.Core.Test.csproj | 2 +- src/NzbDrone.Core.Test/packages.config | 2 +- .../HealthCheck/Checks/MonoVersionCheck.cs | 44 +- src/NzbDrone.Core/NzbDrone.Core.csproj | 2 +- .../Update/InstallUpdateService.cs | 2 +- src/NzbDrone.Core/packages.config | 2 +- src/NzbDrone.Host/NzbDrone.Host.csproj | 2 +- src/NzbDrone.Host/packages.config | 2 +- .../NzbDrone.Integration.Test.csproj | 2 +- src/NzbDrone.Integration.Test/packages.config | 2 +- src/NzbDrone.Mono/NzbDrone.Mono.csproj | 2 +- src/NzbDrone.Mono/packages.config | 2 +- .../NzbDrone.Test.Common.csproj | 2 +- src/NzbDrone.Test.Common/packages.config | 2 +- .../NzbDrone.Update.Test.csproj | 2 +- src/NzbDrone.Update.Test/packages.config | 2 +- src/NzbDrone.Update/NzbDrone.Update.csproj | 2 +- src/NzbDrone.Update/packages.config | 2 +- src/NzbDrone.Windows/NzbDrone.Windows.csproj | 2 +- src/NzbDrone.Windows/packages.config | 2 +- src/NzbDrone/NzbDrone.csproj | 2 +- src/NzbDrone/packages.config | 2 +- yarn.lock | 9158 +++++++++++++++++ 88 files changed, 9550 insertions(+), 269 deletions(-) create mode 100644 frontend/gulp/webpack/css-variables-loader.js create mode 100644 frontend/postcss.config.js create mode 100644 frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js create mode 100644 frontend/src/Wanted/Missing/MissingRowConnector.js create mode 100644 yarn.lock diff --git a/frontend/.eslintrc b/frontend/.eslintrc index b4d4187e3..9b096f3ff 100644 --- a/frontend/.eslintrc +++ b/frontend/.eslintrc @@ -240,7 +240,6 @@ one-var-declaration-per-line: ["error", "always"], operator-assignment: ["off", "never"], operator-linebreak: ["error", "after"], - padded-blocks: ["error", "never"], quote-props: ["error", "as-needed"], quotes: ["error", "single"], require-jsdoc: "off", @@ -283,6 +282,6 @@ "react/react-in-jsx-scope": 2, "react/self-closing-comp": 2, "react/sort-comp": 2, - "react/wrap-multilines": 2 + "react/jsx-wrap-multilines": 2 } } diff --git a/frontend/gulp/webpack.js b/frontend/gulp/webpack.js index aa238d271..5faec4c87 100644 --- a/frontend/gulp/webpack.js +++ b/frontend/gulp/webpack.js @@ -1,14 +1,9 @@ -const _ = require('lodash'); const gulp = require('gulp'); -const simpleVars = require('postcss-simple-vars'); -const nested = require('postcss-nested'); -const autoprefixer = require('autoprefixer'); const webpackStream = require('webpack-stream'); const livereload = require('gulp-livereload'); const path = require('path'); const webpack = require('webpack'); const errorHandler = require('./helpers/errorHandler'); -const reload = require('require-nocache')(module); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const uiFolder = 'UI'; @@ -18,13 +13,20 @@ const isProduction = process.argv.indexOf('--production') > -1; console.log('ROOT:', root); console.log('isProduction:', isProduction); -const cssVariables = [ +const cssVarsFiles = [ '../src/Styles/Variables/colors', '../src/Styles/Variables/dimensions', '../src/Styles/Variables/fonts', '../src/Styles/Variables/animations' ].map(require.resolve); +const extractCSSPlugin = new ExtractTextPlugin({ + filename: path.join('_output', uiFolder, 'Content', 'styles.css'), + allChunks: true, + disable: false, + ignoreOrder: true +}); + const config = { devtool: '#source-map', stats: { @@ -39,9 +41,10 @@ const config = { index: 'index.js' }, resolve: { - root: [ + modules: [ root, - path.join(root, 'Shims') + path.join(root, 'Shims'), + 'node_modules' ], alias: { jquery: 'jquery/src/jquery' @@ -52,10 +55,11 @@ const config = { sourceMapFilename: '[file].map' }, plugins: [ - new ExtractTextPlugin(path.join('_output', uiFolder, 'Content', 'styles.css'), { allChunks: true }), + extractCSSPlugin, new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), + new webpack.DefinePlugin({ __DEV__: !isProduction, 'process.env': { @@ -64,22 +68,23 @@ const config = { }) ], resolveLoader: { - modulesDirectories: [ + modules: [ 'node_modules', - 'gulp/webpack/' + 'frontend/gulp/webpack/' ] }, - eslint: { - formatter: function(results) { - return JSON.stringify(results); - } - }, + // TODO: Do we need this loader? + // eslint: { + // formatter: function(results) { + // return JSON.stringify(results); + // } + // }, module: { - loaders: [ + rules: [ { test: /\.js?$/, exclude: /(node_modules|JsLibraries)/, - loader: 'babel', + loader: 'babel-loader', query: { plugins: ['transform-class-properties'], presets: ['es2015', 'decorators-legacy', 'react', 'stage-2'], @@ -95,51 +100,80 @@ const config = { { test: /\.css$/, exclude: /(node_modules|globals.css)/, - loader: ExtractTextPlugin.extract('style', 'css-loader?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') + use: extractCSSPlugin.extract({ + fallback: 'style-loader', + use: [ + { + loader: 'css-variables-loader', + options: { + cssVarsFiles + } + }, + { + loader: 'css-loader', + options: { + modules: true, + importLoaders: 1, + localIdentName: '[name]-[local]-[hash:base64:5]', + sourceMap: true + } + }, + { + loader: 'postcss-loader', + options: { + config: { + ctx: { + cssVarsFiles + }, + path: 'frontend/postcss.config.js' + } + } + } + ] + }) }, // Global styles { test: /\.css$/, include: /(node_modules|globals.css)/, - loader: 'style!css-loader' + use: [ + 'style-loader', + { + loader: 'css-loader' + } + ] }, // Fonts { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'url?limit=10240&mimetype=application/font-woff&emitFile=false&name=Content/Fonts/[name].[ext]' + use: [ + { + loader: 'url-loader', + options: { + limit: 10240, + mimetype: 'application/font-woff', + emitFile: false, + name: 'Content/Fonts/[name].[ext]' + } + } + ] }, + { test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'file-loader?emitFile=false&name=Content/Fonts/[name].[ext]' + use: [ + { + loader: 'file-loader', + options: { + emitFile: false, + name: 'Content/Fonts/[name].[ext]' + } + } + ] } ] - }, - postcss: function(wpack) { - cssVariables.forEach(wpack.addDependency); - - return [ - simpleVars({ - variables: function() { - return cssVariables.reduce(function(obj, vars) { - return _.extend(obj, reload(vars)); - }, {}); - } - }), - nested(), - autoprefixer({ - browsers: [ - 'Chrome >= 30', - 'Firefox >= 30', - 'Safari >= 6', - 'Edge >= 12', - 'Explorer >= 10', - 'iOS >= 7', - 'Android >= 4.4' - ] - }) - ]; } }; diff --git a/frontend/gulp/webpack/css-variables-loader.js b/frontend/gulp/webpack/css-variables-loader.js new file mode 100644 index 000000000..5683c98be --- /dev/null +++ b/frontend/gulp/webpack/css-variables-loader.js @@ -0,0 +1,11 @@ +const loaderUtils = require('loader-utils'); + +module.exports = function cssVariablesLoader(source) { + const options = loaderUtils.getOptions(this); + + options.cssVarsFiles.forEach((cssVarsFile) => { + this.addDependency(cssVarsFile); + }); + + return source; +}; diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js new file mode 100644 index 000000000..b9c229e48 --- /dev/null +++ b/frontend/postcss.config.js @@ -0,0 +1,33 @@ +const reload = require('require-nocache')(module); + +module.exports = (ctx, configPath, options) => { + const config = { + plugins: { + 'postcss-simple-vars': { + variables: () => + ctx.options.cssVarsFiles.reduce((acc, vars) => { + return Object.assign(acc, reload(vars)); + }, {}) + }, + 'postcss-nested': {}, + 'postcss-mixins': { + mixinsDir: [ + 'frontend/src/Styles/Mixins' + ] + }, + autoprefixer: { + browsers: [ + 'Chrome >= 30', + 'Firefox >= 30', + 'Safari >= 6', + 'Edge >= 12', + 'Explorer >= 11', + 'iOS >= 7', + 'Android >= 4.4' + ] + } + } + }; + + return config; +}; diff --git a/frontend/src/Activity/History/HistoryRowConnector.js b/frontend/src/Activity/History/HistoryRowConnector.js index 7ffcdbb57..036a4e240 100644 --- a/frontend/src/Activity/History/HistoryRowConnector.js +++ b/frontend/src/Activity/History/HistoryRowConnector.js @@ -3,16 +3,19 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions'; +import createArtistSelector from 'Store/Selectors/createArtistSelector'; import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector'; import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector'; import HistoryRow from './HistoryRow'; function createMapStateToProps() { return createSelector( + createArtistSelector(), createEpisodeSelector(), createUISettingsSelector(), - (episode, uiSettings) => { + (artist, episode, uiSettings) => { return { + artist, episode, shortDateFormat: uiSettings.shortDateFormat, timeFormat: uiSettings.timeFormat @@ -28,6 +31,9 @@ const mapDispatchToProps = { class HistoryRowConnector extends Component { + // + // Lifecycle + componentDidUpdate(prevProps) { if ( prevProps.isMarkingAsFailed && diff --git a/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css b/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css index f88543dd1..59e993ff8 100644 --- a/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css +++ b/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css @@ -52,8 +52,8 @@ } .addButton { + @add-mixin truncate; composes: button from 'Components/Link/SpinnerButton.css'; - composes: truncate from 'Styles/mixins/truncate.css'; } .hideLanguageProfile { diff --git a/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css b/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css index 6e2dd7812..91026d17e 100644 --- a/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css +++ b/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css @@ -42,7 +42,7 @@ $hoverScale: 1.05; } .title { - composes: truncate from 'Styles/mixins/truncate.css'; + @add-mixin truncate; background-color: $defaultColor; color: $white; diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css b/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css index eb1fd8be0..9a8161ca2 100644 --- a/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css +++ b/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css @@ -41,7 +41,7 @@ $hoverScale: 1.05; } .title { - composes: truncate from 'Styles/mixins/truncate.css'; + @add-mixin truncate; background-color: $defaultColor; color: $white; diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css b/frontend/src/Calendar/Agenda/AgendaEvent.css index 07aa0fae2..f85b87cef 100644 --- a/frontend/src/Calendar/Agenda/AgendaEvent.css +++ b/frontend/src/Calendar/Agenda/AgendaEvent.css @@ -28,7 +28,7 @@ .artistName, .albumTitle { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; flex: 0 1 300px; margin-right: 10px; diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css index dcb7d4308..c30f3562e 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css +++ b/frontend/src/Calendar/Events/CalendarEvent.css @@ -14,7 +14,7 @@ .artistName, .albumTitle { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; flex: 1 0 1px; margin-right: 10px; diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css index a1eb377cb..efe6d8103 100644 --- a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css +++ b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css @@ -8,7 +8,7 @@ @media (min-width: 768px) { .title { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; float: left; clear: left; diff --git a/frontend/src/Components/Form/PathInput.css b/frontend/src/Components/Form/PathInput.css index fd6128544..d3851b204 100644 --- a/frontend/src/Components/Form/PathInput.css +++ b/frontend/src/Components/Form/PathInput.css @@ -24,9 +24,9 @@ } .pathContainer { - composes: scrollbar from 'Styles/Mixins/scroller.css'; - composes: scrollbarTrack from 'Styles/Mixins/scroller.css'; - composes: scrollbarThumb from 'Styles/Mixins/scroller.css'; + @add-mixin scrollbar; + @add-mixin scrollbarTrack; + @add-mixin scrollbarThumb; } .pathInputContainerOpen { diff --git a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css index 1f1683dc6..d1fdcb08e 100644 --- a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css @@ -8,13 +8,13 @@ } .path { - composes: truncate from 'Styles/mixins/truncate.css'; + @add-mixin truncate; flex: 1 0 0; } .freeSpace { - composes: truncate from 'Styles/mixins/truncate.css'; + @add-mixin truncate; flex: 1 0 0; margin-left: 15px; diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js index d8b17d095..6cb8f5d49 100644 --- a/frontend/src/Components/Icon.js +++ b/frontend/src/Components/Icon.js @@ -14,7 +14,7 @@ function Icon(props) { } = props; return ( - - + ); } diff --git a/frontend/src/Components/Menu/MenuItem.css b/frontend/src/Components/Menu/MenuItem.css index b2ad5d312..bae1a649c 100644 --- a/frontend/src/Components/Menu/MenuItem.css +++ b/frontend/src/Components/Menu/MenuItem.css @@ -1,5 +1,5 @@ .menuItem { - composes: truncate from 'Styles/mixins/truncate.css'; + @add-mixin truncate; display: block; flex-shrink: 0; diff --git a/frontend/src/Components/Modal/ModalHeader.css b/frontend/src/Components/Modal/ModalHeader.css index 9ebaad61c..eab77a9f8 100644 --- a/frontend/src/Components/Modal/ModalHeader.css +++ b/frontend/src/Components/Modal/ModalHeader.css @@ -1,5 +1,5 @@ .modalHeader { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; flex-shrink: 0; padding: 15px 50px 15px 30px; diff --git a/frontend/src/Components/Page/Header/ArtistSearchInput.css b/frontend/src/Components/Page/Header/ArtistSearchInput.css index aaf8a5be5..c34b0d256 100644 --- a/frontend/src/Components/Page/Header/ArtistSearchInput.css +++ b/frontend/src/Components/Page/Header/ArtistSearchInput.css @@ -37,9 +37,9 @@ } .seriesContainer { - composes: scrollbar from 'Styles/Mixins/scroller.css'; - composes: scrollbarTrack from 'Styles/Mixins/scroller.css'; - composes: scrollbarThumb from 'Styles/Mixins/scroller.css'; + @add-mixin scrollbar; + @add-mixin scrollbarTrack; + @add-mixin scrollbarThumb; } .containerOpen { diff --git a/frontend/src/Components/Page/Header/ArtistSearchResult.css b/frontend/src/Components/Page/Header/ArtistSearchResult.css index 35dc98df5..87988a35b 100644 --- a/frontend/src/Components/Page/Header/ArtistSearchResult.css +++ b/frontend/src/Components/Page/Header/ArtistSearchResult.css @@ -29,6 +29,6 @@ .titles, .title, .alternateTitle { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; } } diff --git a/frontend/src/Components/Page/Sidebar/PageSidebar.js b/frontend/src/Components/Page/Sidebar/PageSidebar.js index 8b38466d9..d805669df 100644 --- a/frontend/src/Components/Page/Sidebar/PageSidebar.js +++ b/frontend/src/Components/Page/Sidebar/PageSidebar.js @@ -330,9 +330,9 @@ class PageSidebar extends Component { return; } - if (isSidebarVisible && (touchStartX > 210 || touchStartX < 50)) { + if (isSidebarVisible && (touchStartX > 210 || touchStartX < 180)) { return; - } else if (!isSidebarVisible && touchStartX > 50) { + } else if (!isSidebarVisible && touchStartX > 30) { return; } @@ -373,6 +373,15 @@ class PageSidebar extends Component { } if (Math.abs(this._touchStartY - currentTouchY) > 20) { + this.setState({ + transition: 'none', + transform: 0 + }); + + return; + } + + if (Math.abs(this._touchStartX - currentTouchX) < 20) { return; } diff --git a/frontend/src/Components/Page/Sidebar/PageSidebarItem.js b/frontend/src/Components/Page/Sidebar/PageSidebarItem.js index 23c6ccaf3..cfc694395 100644 --- a/frontend/src/Components/Page/Sidebar/PageSidebarItem.js +++ b/frontend/src/Components/Page/Sidebar/PageSidebarItem.js @@ -63,7 +63,7 @@ class PageSidebarItem extends Component { } - + {title} diff --git a/frontend/src/Components/Scroller/Scroller.css b/frontend/src/Components/Scroller/Scroller.css index 61005a527..c8783a8de 100644 --- a/frontend/src/Components/Scroller/Scroller.css +++ b/frontend/src/Components/Scroller/Scroller.css @@ -1,7 +1,7 @@ .scroller { - composes: scrollbar from 'Styles/Mixins/scroller.css'; - composes: scrollbarTrack from 'Styles/Mixins/scroller.css'; - composes: scrollbarThumb from 'Styles/Mixins/scroller.css'; + @add-mixin scrollbar; + @add-mixin scrollbarTrack; + @add-mixin scrollbarThumb; } .none { diff --git a/frontend/src/Components/SignalRConnector.js b/frontend/src/Components/SignalRConnector.js index 09c76b87a..3e10ca604 100644 --- a/frontend/src/Components/SignalRConnector.js +++ b/frontend/src/Components/SignalRConnector.js @@ -306,15 +306,17 @@ class SignalRConnector extends Component { } onDisconnected = () => { - if (this.props.isReconnecting) { - this.props.setAppValue({ - isConnected: false, - isReconnecting: true, - isDisconnected: true - }); - - this.retryConnection(); + if (window.Sonarr.unloading) { + return; } + + this.props.setAppValue({ + isConnected: false, + isReconnecting: true, + isDisconnected: true + }); + + this.retryConnection(); } // diff --git a/frontend/src/Components/Table/Cells/VirtualTableRowCell.css b/frontend/src/Components/Table/Cells/VirtualTableRowCell.css index 90edf0285..e4cffe1c4 100644 --- a/frontend/src/Components/Table/Cells/VirtualTableRowCell.css +++ b/frontend/src/Components/Table/Cells/VirtualTableRowCell.css @@ -1,6 +1,6 @@ .cell { + @add-mixin truncate; composes: cell from 'Components/Table/Cells/TableRowCell.css'; - composes: truncate from 'Styles/Mixins/truncate.css'; flex-grow: 0; flex-shrink: 1; diff --git a/frontend/src/Episode/Summary/EpisodeSummary.css b/frontend/src/Episode/Summary/EpisodeSummary.css index fb04508f3..c05234997 100644 --- a/frontend/src/Episode/Summary/EpisodeSummary.css +++ b/frontend/src/Episode/Summary/EpisodeSummary.css @@ -25,7 +25,7 @@ } .path { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; flex: 1 0 1px; } diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css b/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css index 1635faeac..e1032ddef 100644 --- a/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css +++ b/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css @@ -7,11 +7,11 @@ } .underlay { - composes: cover from 'Styles/Mixins/cover.css'; + @add-mixin cover; } .overlay { - composes: linkOverlay from 'Styles/Mixins/linkOverlay.css'; + @add-mixin linkOverlay; padding: 10px; } diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css index 609cea818..cfeacec77 100644 --- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css +++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css @@ -5,7 +5,7 @@ } .name { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; margin-bottom: 20px; font-weight: 300; diff --git a/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css b/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css index e9dd6d1d5..d228b842b 100644 --- a/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css +++ b/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css @@ -7,11 +7,11 @@ } .underlay { - composes: cover from 'Styles/Mixins/cover.css'; + @add-mixin cover; } .overlay { - composes: linkOverlay from 'Styles/Mixins/linkOverlay.css'; + @add-mixin linkOverlay; padding: 10px; } diff --git a/frontend/src/Settings/Indexers/Indexers/Indexer.css b/frontend/src/Settings/Indexers/Indexers/Indexer.css index 9cd62404c..d8e1a731e 100644 --- a/frontend/src/Settings/Indexers/Indexers/Indexer.css +++ b/frontend/src/Settings/Indexers/Indexers/Indexer.css @@ -5,7 +5,7 @@ } .name { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; margin-bottom: 20px; font-weight: 300; diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css index 3415de2e1..e2181150c 100644 --- a/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css +++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css @@ -7,11 +7,11 @@ } .underlay { - composes: cover from 'Styles/Mixins/cover.css'; + @add-mixin cover; } .overlay { - composes: linkOverlay from 'Styles/Mixins/linkOverlay.css'; + @add-mixin linkOverlay; padding: 10px; } diff --git a/frontend/src/Settings/Notifications/Notifications/Notification.css b/frontend/src/Settings/Notifications/Notifications/Notification.css index 8d28cef8e..5a17a4c20 100644 --- a/frontend/src/Settings/Notifications/Notifications/Notification.css +++ b/frontend/src/Settings/Notifications/Notifications/Notification.css @@ -5,7 +5,7 @@ } .name { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; margin-bottom: 20px; font-weight: 300; diff --git a/frontend/src/Settings/Profiles/Language/LanguageProfile.css b/frontend/src/Settings/Profiles/Language/LanguageProfile.css index f94aef43a..d23bd1734 100644 --- a/frontend/src/Settings/Profiles/Language/LanguageProfile.css +++ b/frontend/src/Settings/Profiles/Language/LanguageProfile.css @@ -5,7 +5,7 @@ } .name { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; margin-bottom: 20px; font-weight: 300; diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfile.css b/frontend/src/Settings/Profiles/Quality/QualityProfile.css index 785047cd4..1ac9041bd 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfile.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfile.css @@ -5,7 +5,7 @@ } .name { - composes: truncate from 'Styles/Mixins/truncate.css'; + @add-mixin truncate; margin-bottom: 20px; font-weight: 300; diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.css b/frontend/src/Settings/Quality/Definition/QualityDefinition.css index 5eced5bf4..69e8018f5 100644 --- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css +++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css @@ -25,25 +25,23 @@ } .bar { - top: 6px; + top: 9px; margin: 0 5px; - height: 10px; - border: 1px solid $sliderAccentColor; - border-radius: 4px; + height: 3px; background-color: $sliderAccentColor; box-shadow: 0 0 0 #000; &:nth-child(odd) { - background-color: $white; + background-color: #ddd; } } .handle { top: 1px; z-index: 0 !important; - width: 20px; - height: 20px; - border: 1px solid $sliderAccentColor; + width: 18px; + height: 18px; + border: 3px solid $sliderAccentColor; border-radius: 50%; background-color: $white; text-align: center; diff --git a/frontend/src/Styles/Mixins/cover.css b/frontend/src/Styles/Mixins/cover.css index b266846d4..e44c99be6 100644 --- a/frontend/src/Styles/Mixins/cover.css +++ b/frontend/src/Styles/Mixins/cover.css @@ -1,4 +1,4 @@ -.cover { +@define-mixin cover { position: absolute; top: 0; left: 0; diff --git a/frontend/src/Styles/Mixins/linkOverlay.css b/frontend/src/Styles/Mixins/linkOverlay.css index 971f96b13..74c3fd753 100644 --- a/frontend/src/Styles/Mixins/linkOverlay.css +++ b/frontend/src/Styles/Mixins/linkOverlay.css @@ -1,5 +1,5 @@ -.linkOverlay { - composes: cover from 'Styles/Mixins/cover.css'; +@define-mixin linkOverlay { + @add-mixin cover; pointer-events: none; user-select: none; diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css index 6a982646a..62a619103 100644 --- a/frontend/src/Styles/Mixins/scroller.css +++ b/frontend/src/Styles/Mixins/scroller.css @@ -1,17 +1,17 @@ -.scrollbar { +@define-mixin scrollbar { &::-webkit-scrollbar { width: 6px; height: 6px; } } -.scrollbarTrack { +@define-mixin scrollbarTrack { &&::-webkit-scrollbar-track { background-color: transparent; } } -.scrollbarThumb { +@define-mixin scrollbarThumb { &::-webkit-scrollbar-thumb { min-height: 50px; border: 1px solid transparent; diff --git a/frontend/src/Styles/Mixins/truncate.css b/frontend/src/Styles/Mixins/truncate.css index aa157178f..d0762a029 100644 --- a/frontend/src/Styles/Mixins/truncate.css +++ b/frontend/src/Styles/Mixins/truncate.css @@ -10,7 +10,7 @@ * occur. */ -.truncate { + @define-mixin truncate { overflow: hidden !important; max-width: 100%; /* 1 */ text-overflow: ellipsis !important; diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js index f1510dba3..2a097e276 100644 --- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js +++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js @@ -20,7 +20,7 @@ import FilterMenu from 'Components/Menu/FilterMenu'; import MenuContent from 'Components/Menu/MenuContent'; import FilterMenuItem from 'Components/Menu/FilterMenuItem'; import ConfirmModal from 'Components/Modal/ConfirmModal'; -import CutoffUnmetRow from './CutoffUnmetRow'; +import CutoffUnmetRowConnector from './CutoffUnmetRowConnector'; class CutoffUnmet extends Component { @@ -219,7 +219,7 @@ class CutoffUnmet extends Component { { items.map((item) => { return ( - { + return { + artist + }; + } + ); +} + +export default connect(createMapStateToProps)(CutoffUnmetRow); diff --git a/frontend/src/Wanted/Missing/Missing.js b/frontend/src/Wanted/Missing/Missing.js index 427b153ef..0914e3c3a 100644 --- a/frontend/src/Wanted/Missing/Missing.js +++ b/frontend/src/Wanted/Missing/Missing.js @@ -21,7 +21,7 @@ import MenuContent from 'Components/Menu/MenuContent'; import FilterMenuItem from 'Components/Menu/FilterMenuItem'; import ConfirmModal from 'Components/Modal/ConfirmModal'; import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal'; -import MissingRow from './MissingRow'; +import MissingRowConnector from './MissingRowConnector'; class Missing extends Component { @@ -236,7 +236,7 @@ class Missing extends Component { { items.map((item) => { return ( - { + return { + artist + }; + } + ); +} + +export default connect(createMapStateToProps)(MissingRow); diff --git a/frontend/src/index.html b/frontend/src/index.html index 0c50d3bc3..fd93b8500 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -48,8 +48,8 @@ -
-
+ +