Updates to UI, Update NLog to 4.4.12

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
   }
 }

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'
-        ]
-      })
-    ];
   }
 };
 

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;
+};

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;
+};

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 &&

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 {

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;

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;

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;

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;

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;

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 {

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;

frontend/src/Components/Icon.js

@@ -14,7 +14,7 @@ function Icon(props) {
   } = props;
 
   return (
-    <icon
+    <i
       className={classNames(
         name,
         className,
@@ -25,7 +25,7 @@ function Icon(props) {
         fontSize: `${size}px`
       }}
     >
-    </icon>
+    </i>
   );
 }
 

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;

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;

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 {

frontend/src/Components/Page/Header/ArtistSearchResult.css

@@ -29,6 +29,6 @@
   .titles,
   .title,
   .alternateTitle {
-    composes: truncate from 'Styles/Mixins/truncate.css';
+    @add-mixin truncate;
   }
 }

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;
     }
 

frontend/src/Components/Page/Sidebar/PageSidebarItem.js

@@ -63,7 +63,7 @@ class PageSidebarItem extends Component {
               </span>
           }
 
-          <span className={isChildItem && styles.noIcon}>
+          <span className={isChildItem ? styles.noIcon : null}>
             {title}
           </span>
 

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 {

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();
   }
 
   //

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;

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;
 }

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;
 }

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;

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;
 }

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;

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;
 }

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;

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;

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;

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;

frontend/src/Styles/Mixins/cover.css

@@ -1,4 +1,4 @@
-.cover {
+@define-mixin cover {
   position: absolute;
   top: 0;
   left: 0;

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;

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;

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;

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 (
-                          <CutoffUnmetRow
+                          <CutoffUnmetRowConnector
                             key={item.id}
                             isSelected={selectedState[item.id]}
                             columns={columns}

frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import CutoffUnmetRow from './CutoffUnmetRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createArtistSelector(),
+    (artist) => {
+      return {
+        artist
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(CutoffUnmetRow);

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 (
-                          <MissingRow
+                          <MissingRowConnector
                             key={item.id}
                             isSelected={selectedState[item.id]}
                             columns={columns}

frontend/src/Wanted/Missing/MissingRowConnector.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import MissingRow from './MissingRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createArtistSelector(),
+    (artist) => {
+      return {
+        artist
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(MissingRow);

frontend/src/index.html

@@ -48,8 +48,8 @@
   </head>
 
   <body>
-    <div id="root" class="root">
-    </div>
+    <div id="modal-root"></div>
+    <div id="root" class="root"></div>
   </body>
 
   <script type="text/javascript">