From de3a64c4c08f44298156f002c5025bbe0cd706e2 Mon Sep 17 00:00:00 2001
From: vexorian <vexorian@gmail.com>
Date: Wed, 15 Nov 2023 01:04:05 -0400
Subject: [PATCH] Tweak the library browser, the placement of the add button is
 now consistent. The background of the row gets highlighted blue so that you
 know that the plus button is for a specific library element.

---
 web/public/style.css                   |  4 ++
 web/public/templates/plex-library.html | 56 +++++++++++++++++---------
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/web/public/style.css b/web/public/style.css
index 0ad24b1..4f63c88 100644
--- a/web/public/style.css
+++ b/web/public/style.css
@@ -390,4 +390,8 @@ div.programming-programs div.list-group-item {
   width: 1em;
   height: 1em;
   margin-bottom: 0.25em;
+}
+
+.list-group-item .library-item-hover:hover {
+  background: #D0D0FF
 }
\ No newline at end of file
diff --git a/web/public/templates/plex-library.html b/web/public/templates/plex-library.html
index 5fd6218..2410b65 100644
--- a/web/public/templates/plex-library.html
+++ b/web/public/templates/plex-library.html
@@ -28,46 +28,55 @@
                     </span>
                 </div>
                 <div class="modal-body">
-                    <select class="form-control form-control-sm custom-select" ng-model="currentOrigin"
+                    <div class="mb-3">
+                        <label for="source-selector" class="form-label">Source:</label>
+                        <select class="form-select form-select-sm custom-select" ng-model="currentOrigin"
+                        size="2"
+                        id="source-selector"
                         ng-options="x.name for x in origins" ng-change="selectOrigin(currentOrigin)"></select>
-                    <hr ></hr>
+
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Content:</label>
+                    </div>
                     <ul ng-show="currentOrigin.type=='plex' " class="list-group list-group-root plex-panel" ng-init="setHeight = {'height': height + 'px'}" ng-style="setHeight" lazy-img-container>
                         <li class="list-group-item" ng-repeat="a in libraries">
-                            <div class="flex-container {{ displayImages ? 'w_images' : 'wo_images' }}" ng-click="getNested(a, true);">
+                            <div class="flex-container library-item-hover {{ displayImages ? 'w_images' : 'wo_images' }}" ng-click="getNested(a, true);">
                                 <span class="fa {{ a.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
                                 <img ng-if="displayImages" lazy-img="{{a.icon}}" ></img>
                                 <span>{{ displayTitle(a) }}</span><!-- Library -->
                                 <span ng-if="a.type === 'show' || a.type === 'movie' || a.type === 'artist'" class="flex-pull-right" ng-click='$event.stopPropagation(); selectLibrary(a)'>
-                                    <span class="fa fa-plus btn"></span>
+                                    <span class="fa fa-plus-circle btn"></span>
                                 </span>
                             </div>
                             <ul ng-if="a.collapse" class="list-group">
                                 <li class="list-group-item {{ b.type !== 'movie' ? 'list-group-item-secondary' : 'list-group-item-video' }}"
                                     ng-repeat="b in a.nested">
-                                    <div class="flex-container"
+                                    <div class="flex-container library-item-hover"
                                         ng-click="b.type !== 'movie' ? getNested(b) : selectItem(b, true)">
-                                        <span ng-if="b.type === 'movie'" class="fa fa-plus-circle tab"></span>
                                         <span ng-if="b.type !== 'movie'" class="tab"></span>
                                         <span ng-if="b.type !== 'movie'" class="fa {{ b.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
                                         <img ng-if="displayImages" lazy-img="{{ b.type === 'episode' ? b.episodeIcon : b.icon }}" ></img>
-                                        {{ displayTitle(b) }}
-                                        <span ng-if="b.type === 'movie'" class="flex-pull-right">
+                                        <span class="flex-grow-1">{{ displayTitle(b) }}</span>
+                                        <span ng-if="b.type === 'movie'" class="">
                                             {{b.durationStr}}
                                         </span>
+                                        <span class="flex-pull-right" ng-if="b.type === 'movie'">
+                                            <span  class="fa fa-plus-circle btn"></span>
+                                        </span>
                                         <span ng-if="b.type === 'playlist'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectPlaylist(b);">
-                                            <span class="fa fa-plus btn"></span>
+                                            <span class="fa fa-plus-circle btn"></span>
                                         </span>
                                         <span ng-if="b.type === 'show' || b.type === 'collection' || b.type === 'genre' || b.type === 'artist'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectShow(b);">
-                                            <span class="fa fa-plus btn"></span>
+                                            <span class="fa fa-plus-circle btn"></span>
                                         </span>
                                     </div>
                                     <ul ng-if="b.collapse" class="list-group">
                                         <li ng-repeat="c in b.nested"
                                             class="list-group-item {{ c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track' ? 'list-group-item-dark' : 'list-group-item-video' }}">
-                                            <div class="flex-container"
+                                            <div class="flex-container library-item-hover"
                                                 ng-click="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track' ? getNested(c) : selectItem(c, true)">
-                                                <span ng-if="c.type === 'movie' || c.type === 'episode' || c.type === 'track'"
-                                                    class="fa fa-plus-circle tab"></span>
+
                                                 <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                     class="tab"></span>
                                                 <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
@@ -75,23 +84,30 @@
                                                 <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                     class="fa {{ c.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
                                                 <img ng-if="displayImages" lazy-img="{{c.type === 'episode' ? c.episodeIcon : c.icon }}" ></img>
-                                                {{ displayTitle(c) }}
+                                                <span class="flex-grow-1">{{ displayTitle(c) }}</span>
                                                 <span ng-if="c.type === 'movie' || c.type === 'episode' || c.type === 'track' "
-                                                    class="flex-pull-right">
+                                                    class="">
                                                     {{c.durationStr}}
                                                 </span>
+                                                <span ng-if="c.type === 'movie' || c.type === 'episode' || c.type === 'track'" class="flex-pull-right">
+                                                    <span
+                                                    class="fa fa-plus-circle btn"></span>
+                                                </span>
                                                 <span ng-if="c.type === 'season' || c.type === 'album'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectSeason(c);">
-                                                    <span class="fa fa-plus btn"></span>
+                                                    <span class="fa fa-plus-circle btn"></span>
                                                 </span>
                                             </div>
                                             <ul ng-if="c.collapse" class="list-group">
                                                 <li class="list-group-item list-group-item-video"
                                                     ng-repeat="d in c.nested">
-                                                    <div class="flex-container" ng-click="selectItem(d, true)">
-                                                        <span class="fa fa-plus-circle tab"></span>
+                                                    <div class="flex-container library-item-hover" ng-click="selectItem(d, true)">
+
                                                         <img ng-if="displayImages" lazy-img="{{d.episodeIcon}}" ></img>
-                                                        {{ displayTitle(d) }}
-                                                        <span class="flex-pull-right">{{d.durationStr}}</span>
+                                                        <span class="flex-grow-1">{{ displayTitle(d) }}</span>
+                                                        <span class="">{{d.durationStr}}</span>
+                                                        <span class="flex-pull-right">
+                                                            <span class="fa fa-plus-circle btn"></span>
+                                                        </span>
                                                         <!-- Episode -->
                                                     </div>
                                                 </li>