Updates to UI, Update NLog to 4.4.12

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