Fix tooltip mismatching, when search results have been updated. (#8790)

* Fix tooltip mismatching, when search results have been updated. * Remove DOWNLOAD_URL * update bundles * Fix test * Fix style-lint * Update snapshot
pymedusa · Nov 30, 2020 · 7af1765 · 7af1765
1 parent fa791f6
commit 7af1765
Show file tree

Hide file tree

Showing 14 changed files with 258 additions and 293 deletions.
diff --git a/medusa/server/api/v2/config.py b/medusa/server/api/v2/config.py
@@ -166,7 +166,6 @@ class ConfigHandler(BaseRequestHandler):
         'wikiUrl': StringField(app, 'WIKI_URL'),
         'donationsUrl': StringField(app, 'DONATIONS_URL'),
         'sourceUrl': StringField(app, 'APPLICATION_URL'),
-        'downloadUrl': StringField(app, 'DOWNLOAD_URL'),
         'subtitlesMulti': BooleanField(app, 'SUBTITLES_MULTI'),
         'namingForceFolders': BooleanField(app, 'NAMING_FORCE_FOLDERS'),
         'subtitles.enabled': BooleanField(app, 'USE_SUBTITLES'),
@@ -593,7 +592,6 @@ def data_main():
         section_data['wikiUrl'] = app.WIKI_URL
         section_data['donationsUrl'] = app.DONATIONS_URL
         section_data['sourceUrl'] = app.APPLICATION_URL
-        section_data['downloadUrl'] = app.DOWNLOAD_URL
         section_data['subtitlesMulti'] = bool(app.SUBTITLES_MULTI)
         section_data['namingForceFolders'] = bool(app.NAMING_FORCE_FOLDERS)
         section_data['subtitles'] = {}

diff --git a/medusa/server/web/config/general.py b/medusa/server/web/config/general.py
@@ -82,7 +82,6 @@ def saveGeneral(self, log_dir=None, log_nr=5, log_size=1, web_port=None, notify_
         results = []
 
         # Misc
-        app.DOWNLOAD_URL = download_url
         app.INDEXER_DEFAULT_LANGUAGE = indexerDefaultLang
         app.EP_DEFAULT_DELETED_STATUS = int(ep_default_deleted_status)
         app.SKIP_REMOVED_FILES = config.checkbox_to_value(skip_removed_files)

diff --git a/tests/apiv2/test_config.py b/tests/apiv2/test_config.py
@@ -41,7 +41,6 @@ def config_main(monkeypatch, app_config):
     section_data['wikiUrl'] = app.WIKI_URL
     section_data['donationsUrl'] = app.DONATIONS_URL
     section_data['sourceUrl'] = app.APPLICATION_URL
-    section_data['downloadUrl'] = app.DOWNLOAD_URL
     section_data['subtitlesMulti'] = bool(app.SUBTITLES_MULTI)
     section_data['namingForceFolders'] = bool(app.NAMING_FORCE_FOLDERS)
     section_data['subtitles'] = {}

diff --git a/themes-default/slim/src/components/config-general.vue b/themes-default/slim/src/components/config-general.vue
@@ -229,10 +229,6 @@
                                         <p><b>Note:</b> Use local timezone to start searching for episodes minutes after show ends (depends on your dailysearch frequency)</p>
                                     </config-template>
 
-                                    <config-textbox v-model="general.downloadUrl" label="Download url" id="download_url">
-                                        <span class="component-desc">URL where the shows can be downloaded.</span>
-                                    </config-textbox>
-
                                     <config-toggle-slider v-model="layout.show.pagination.enable" label="Use table pagination" id="show_pagination" />
 
                                     <input type="submit" class="btn-medusa config_submitter" value="Save Changes">

diff --git a/themes-default/slim/src/components/display-show.vue b/themes-default/slim/src/components/display-show.vue
@@ -116,10 +116,6 @@
                             <span :title="props.row.file.location" class="addQTip">{{props.row.file.name}}</span>
                         </span>
 
-                        <span v-else-if="props.column.label == 'Download'">
-                            <app-link v-if="config.downloadUrl && props.row.file.location && ['Downloaded', 'Archived'].includes(props.row.status)" :href="config.downloadUrl + props.row.file.location">Download</app-link>
-                        </span>
-
                         <span v-else-if="props.column.label == 'Subtitles'" class="align-center">
                             <div class="subtitles" v-if="['Archived', 'Downloaded', 'Ignored', 'Skipped'].includes(props.row.status)">
                                 <div v-for="flag in props.row.subtitles" :key="flag">
@@ -282,10 +278,6 @@
                             <span :title="props.row.file.location" class="addQTip">{{props.row.file.name}}</span>
                         </span>
 
-                        <span v-else-if="props.column.label == 'Download'">
-                            <app-link v-if="config.downloadUrl && props.row.file.location && ['Downloaded', 'Archived'].includes(props.row.status)" :href="config.downloadUrl + props.row.file.location">Download</app-link>
-                        </span>
-
                         <span v-else-if="props.column.label == 'Subtitles'" class="align-center">
                             <div class="subtitles" v-if="['Archived', 'Downloaded', 'Ignored', 'Skipped'].includes(props.row.status)">
                                 <div v-for="flag in props.row.subtitles" :key="flag">

diff --git a/themes-default/slim/src/components/helpers/config-scene-exceptions.vue b/themes-default/slim/src/components/helpers/config-scene-exceptions.vue
@@ -155,6 +155,8 @@ export default {
 };
 </script>
 <style scoped>
+@import '../../style/v-tooltip.css';
+
 div.select-list ul {
     padding-left: 0;
 }
@@ -238,124 +240,4 @@ div.select-list .switch-input {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-
-/* We still need to move this to some sort of css import */
-.tooltip-wrapper {
-    float: left;
-    min-width: 340px;
-}
-
-.invalid {
-    background-color: #ff5b5b;
-}
-
-.tooltip {
-    display: block !important;
-    z-index: 10000;
-}
-
-.tooltip .tooltip-inner {
-    background: #ffef93;
-    color: #555;
-    border-radius: 16px;
-    padding: 5px 10px 4px;
-    border: 1px solid #f1d031;
-    -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
-    -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
-}
-
-.tooltip .tooltip-arrow {
-    width: 0;
-    height: 0;
-    position: absolute;
-    margin: 5px;
-    border: 1px solid #ffef93;
-    z-index: 1;
-}
-
-.tooltip[x-placement^='top'] {
-    margin-bottom: 5px;
-}
-
-.tooltip[x-placement^='top'] .tooltip-arrow {
-    border-width: 5px 5px 0 5px;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
-    bottom: -5px;
-    left: calc(50% - 4px);
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.tooltip[x-placement^='bottom'] {
-    margin-top: 5px;
-}
-
-.tooltip[x-placement^='bottom'] .tooltip-arrow {
-    border-width: 0 5px 5px 5px;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-top-color: transparent !important;
-    top: -5px;
-    left: calc(50% - 4px);
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.tooltip[x-placement^='right'] {
-    margin-left: 5px;
-}
-
-.tooltip[x-placement^='right'] .tooltip-arrow {
-    border-width: 5px 5px 5px 0;
-    border-left-color: transparent !important;
-    border-top-color: transparent !important;
-    border-bottom-color: transparent !important;
-    left: -4px;
-    top: calc(50% - 5px);
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.tooltip[x-placement^='left'] {
-    margin-right: 5px;
-}
-
-.tooltip[x-placement^='left'] .tooltip-arrow {
-    border-width: 5px 0 5px 5px;
-    border-top-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
-    right: -4px;
-    top: calc(50% - 5px);
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.tooltip.popover .popover-inner {
-    background: #ffef93;
-    color: #555;
-    padding: 24px;
-    border-radius: 5px;
-    box-shadow: 0 5px 30px rgba(black, 0.1);
-}
-
-.tooltip.popover .popover-arrow {
-    border-color: #ffef93;
-}
-
-.tooltip[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.15s, visibility 0.15s;
-}
-
-.tooltip[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.15s;
-}
-
 </style>
diff --git a/themes-default/slim/src/components/helpers/plot-info.vue b/themes-default/slim/src/components/helpers/plot-info.vue
@@ -24,6 +24,8 @@ export default {
 };
 </script>
 <style>
+@import '../../style/v-tooltip.css';
+
 .plotInfo {
     cursor: help;
     float: right;
@@ -38,114 +40,4 @@ export default {
     top: 2px;
     opacity: 0.4;
 }
-
-.tooltip {
-    display: block !important;
-    z-index: 10000;
-}
-
-.tooltip .tooltip-inner {
-    background: #ffef93;
-    color: #555;
-    border-radius: 16px;
-    padding: 5px 10px 4px;
-    border: 1px solid #f1d031;
-    -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
-    -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
-}
-
-.tooltip .tooltip-arrow {
-    width: 0;
-    height: 0;
-    position: absolute;
-    margin: 5px;
-    border: 1px solid #ffef93;
-    z-index: 1;
-}
-
-.tooltip[x-placement^="top"] {
-    margin-bottom: 5px;
-}
-
-.tooltip[x-placement^="top"] .tooltip-arrow {
-    border-width: 5px 5px 0 5px;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
-    bottom: -5px;
-    left: calc(50% - 4px);
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.tooltip[x-placement^="bottom"] {
-    margin-top: 5px;
-}
-
-.tooltip[x-placement^="bottom"] .tooltip-arrow {
-    border-width: 0 5px 5px 5px;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-top-color: transparent !important;
-    top: -5px;
-    left: calc(50% - 4px);
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.tooltip[x-placement^="right"] {
-    margin-left: 5px;
-}
-
-.tooltip[x-placement^="right"] .tooltip-arrow {
-    border-width: 5px 5px 5px 0;
-    border-left-color: transparent !important;
-    border-top-color: transparent !important;
-    border-bottom-color: transparent !important;
-    left: -4px;
-    top: calc(50% - 5px);
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.tooltip[x-placement^="left"] {
-    margin-right: 5px;
-}
-
-.tooltip[x-placement^="left"] .tooltip-arrow {
-    border-width: 5px 0 5px 5px;
-    border-top-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
-    right: -4px;
-    top: calc(50% - 5px);
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.tooltip.popover .popover-inner {
-    background: #ffef93;
-    color: #555;
-    padding: 24px;
-    border-radius: 5px;
-    box-shadow: 0 5px 30px rgba(black, 0.1);
-}
-
-.tooltip.popover .popover-arrow {
-    border-color: #ffef93;
-}
-
-.tooltip[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.15s, visibility 0.15s;
-}
-
-.tooltip[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.15s;
-}
-
 </style>
diff --git a/themes-default/slim/src/components/show-results.vue b/themes-default/slim/src/components/show-results.vue
@@ -31,8 +31,9 @@
                     <template slot="table-row" slot-scope="props">
                         <span v-if="props.column.label === 'Provider'" class="align-center">
                             <img :src="`images/providers/${props.row.provider.imageName}`"
-                                 :alt="props.row.provider.name" width="16" class="addQTip"
+                                 :alt="props.row.provider.name" width="16"
                                  :title="props.row.provider.name"
+                                 v-tooltip.right="props.row.provider.name"
                                  onError="this.onerror=null;this.src='images/providers/missing.png';"
                             >
                         </span>
@@ -88,7 +89,7 @@ import { manageCookieMixin } from '../mixins/manage-cookie';
 import { StateSwitch } from './helpers';
 import QualityPill from './helpers/quality-pill.vue';
 import { episodeToSlug, humanFileSize } from '../utils/core';
-import { addQTip } from '../utils/jquery';
+import { VTooltip } from 'v-tooltip';
 
 export default {
     name: 'show-results',
@@ -97,6 +98,9 @@ export default {
         StateSwitch,
         QualityPill
     },
+    directives: {
+        tooltip: VTooltip
+    },
     mixins: [
         manageCookieMixin('showResults')
     ],
@@ -208,8 +212,6 @@ export default {
         if (result.providersSearched > 0 && result.totalSearchResults.length === 0) {
             forceSearch();
         }
-
-        addQTip();
     },
     computed: {
         ...mapState({
@@ -400,9 +402,6 @@ export default {
                     await getShowEpisodeHistory({ showSlug: show.id.slug, episodeSlug });
                     await getProviderCacheResults({ showSlug: show.id.slug, season, episode });
                 }
-
-                // Update qTip
-                addQTip();
             },
             deep: true,
             immediate: false
@@ -411,4 +410,5 @@ export default {
 };
 </script>
 <style scoped>
+@import '../style/v-tooltip.css';
 </style>
diff --git a/themes-default/slim/src/store/modules/config/general.js b/themes-default/slim/src/store/modules/config/general.js
@@ -7,7 +7,6 @@ const state = {
     donationsUrl: null,
     namingForceFolders: null,
     sourceUrl: null,
-    downloadUrl: null,
     rootDirs: [],
     subtitles: {
         enabled: null