Mirrors/WebTools-NG
2
0
Fork 0
mirror of https://github.com/WebTools-NG/WebTools-NG synced 2024-11-26 13:00:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #571 from WebTools-NG/#553-Tooltips-revisited

Browse source 
#553 tooltips revisited
This commit is contained in:
Tommy Mikkelsen 2022-08-16 12:27:15 +02:00 committed by GitHub
commit fb82ef7172
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 138 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/modules/ExportTools/Custom/custom.vue
View file

@ -8,7 +8,8 @@
</div>
<br>
<!-- Media type to export -->
<b-form-group id="etTypeGroup" v-bind:label="$t('Modules.ET.Custom.SelCustType')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.ET.Custom.TT-CustType" label="Modules.ET.Custom.SelCustType" />
<b-form-select
style="width: 50%"
v-model="selMediaType"
@ -17,10 +18,10 @@
@change="changeType()"
name="mediaType">
</b-form-select>
<WTNGtt tt="Modules.ET.Custom.TT-CustType" size="20px"></WTNGtt>
</b-form-group>
<div> <!-- Select Custom Level -->
<b-form-group id="etLevelGroup" v-bind:label="$t('Modules.ET.Custom.CustomLevel')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.ET.Custom.TT-ETEditLevel" label="Modules.ET.Custom.CustomLevel" />
<b-form-select
style="width: 50%"
class="form-control"
@ -31,7 +32,6 @@
:options="optionsLevels"
name="selLevel">
</b-form-select>
<WTNGtt tt="Modules.ET.Custom.TT-ETEditLevel" size="20px"></WTNGtt>
</b-form-group>
</div>
<b-modal ref="showNewLevel" hide-footer v-bind:title=this.customTitle @hide="newLevelHidden">
@ -89,14 +89,14 @@
import i18n from '../../../../i18n';
import { wtconfig, dialog } from '../../General/wtutils';
import draggable from 'vuedraggable';
import WTNGtt from '../../General/wtng-tt.vue';
import WTNGttlabel from '../../General/wtng-ttlabel.vue'
const log = require("electron-log");
export default {
components: {
draggable,
WTNGtt
WTNGttlabel
},
data() {
return {

26
src/components/modules/ExportTools/Export.vue
View file

@ -22,13 +22,13 @@
<b-form-row> <!-- Select Export type -->
<b-col> <!-- Main type -->
<div class="d-flex align-items-center">
<b-form-group id="etLibTypeMainGroup" v-bind:label="$t('Modules.ET.optExpType.lblMainExp')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.ET.optExpType.ttExpType" label="Modules.ET.optExpType.lblMainExp" />
<b-form-select
v-model="selExpTypeMain"
id="selExpTypeMain"
:options="optExpTypeMain"
@change="selExpTypeMainChanged"
style="width: Auto"
name="selExpTypeMain">
</b-form-select>
<WTNGtt tt="Modules.ET.optExpType.ttExpType" size="20px"></WTNGtt>
@ -37,16 +37,15 @@
</b-col>
<b-col> <!-- Sec type -->
<div class="d-flex align-items-center">
<b-form-group id="etLibTypeSecGroup" v-bind:label="$t('Modules.ET.optExpType.lblSecExp')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.ET.optExpType.ttExpTypeSec" label="Modules.ET.optExpType.lblSecExp" />
<b-form-select
v-model="selExpTypeSec"
id="selExpTypeSec"
:options="optExpTypeSec"
@change="selExpTypeSecChanged"
style="width: Auto"
name="selExpTypeSec">
</b-form-select>
<WTNGtt tt="Modules.ET.optExpType.ttExpTypeSec" size="20px"></WTNGtt>
</b-form-group>
</div>
</b-col>
@ -54,7 +53,8 @@
<b-form-row> <!-- Select Library -->
<b-col>
<div class="d-flex align-items-center">
<b-form-group id="etLibraryGroup" v-bind:label="$t('Modules.ET.optExpType.lblSelectSelection')" label-size="lg" label-class="font-weight-bold pt-0" :disabled=this.etLibraryGroupDisabled>
<b-form-group :disabled=this.etLibraryGroupDisabled>
<WTNGttlabel tt="Modules.ET.optExpType.ttExpLibrary" label="Modules.ET.optExpType.lblSelectSelection" />
<div ref="libSpinner" id="libSpinner" :hidden="selLibraryWait">
<b-spinner id="libLoad" class="ml-auto text-danger"></b-spinner>
</div>
@ -63,10 +63,8 @@
id="selLibrary"
:options="selLibraryOptions"
@change="selLibraryChanged"
style="width: 75%"
name="selLibrary">
</b-form-select>
<WTNGtt tt="Modules.ET.optExpType.ttExpLibrary" size="20px"></WTNGtt>
</b-form-group>
</div>
</b-col>
@ -74,17 +72,16 @@
<b-form-row> <!-- Select Export Level -->
<b-col>
<div>
<b-form-group id="etLevelGroup" v-bind:label="$t('Modules.ET.optExpType.lblExportLevel')" label-size="lg" label-class="font-weight-bold pt-0" :disabled=this.etLevelGroupDisabled>
<b-form-group :disabled=this.etLevelGroupDisabled>
<WTNGttlabel tt="Modules.ET.optExpType.ttExpLevel" label="Modules.ET.optExpType.lblExportLevel" />
<b-form-select
class="form-control"
v-model="selLevel"
id="selLevel"
:options="exportLevels"
@change="selLevelChanged"
style="width: 75%"
name="selLevel">
</b-form-select>
<WTNGtt tt="Modules.ET.optExpType.ttExpLevel" size="20px"></WTNGtt>
</b-form-group>
</div>
</b-col>
@ -133,11 +130,12 @@
import { etHelper } from "./scripts/ethelper";
import statusDiv from '../General/status.vue';
import { status } from '../General/status';
import WTNGtt from '../General/wtng-tt.vue'
import WTNGttlabel from '../General/wtng-ttlabel.vue'
const log = require("electron-log");
export default {
components: {
statusDiv, WTNGtt
statusDiv,
WTNGttlabel
},
data() {
return {
@ -195,7 +193,7 @@
};
},
watch: {
/*
/*
// Watch for status update
ETStatus: function() {
this.statusMsg = this.$store.getters.getETStatus;

2
src/components/modules/General/wtng-tt.vue
View file

@ -19,7 +19,7 @@
},
color:{
type:String,
default: 'teal'
default: 'limegreen'
}
},
computed:{

76
src/components/modules/General/wtng-ttlabel.vue Normal file
View file

@ -0,0 +1,76 @@
<template v-slot:label>
<p class="icon is-right font-weight-bold" :style="getStyle">
{{ getLabel }}
<span :id="ttid"><i :style="getIconStyle" class="ttqmark far fa-question-circle"></i></span>
<b-tooltip v-bind:target="ttid" triggers="hover">
{{ tooltip }}
</b-tooltip>
</p>
</template>
<script>
import i18n from '../../../i18n'
export default{
name: "WTNGttlabel",
props:{
tt:{
type:String
},
size:{
type:String,
default: "20px"
},
color:{
type:String,
default: 'black'
},
iconColor:{
type:String,
default: 'limegreen'
},
label:{
type: String
}
},
computed:{
ttid: function () {
return this.makeid(16)
},
tooltip: function() {
return i18n.t(this.tt);
},
getLabel: function() {
return i18n.t(this.label);
},
getStyle: function(){
return {
color: this.color,
fontSize: this.size
}
},
getIconStyle: function(){
return {
color: this.iconColor,
fontSize: this.size
}
}
},
methods:{
makeid: function(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
}
return result;
}
}
}
</script>
<style scoped>
i.ttqmark{
margin-left:5px;
}
</style>

2
src/components/modules/Main/Settings/SettingsGeneral.vue
View file

@ -50,7 +50,7 @@
<script>
import i18n from '../../../../i18n';
import { wtconfig } from '../../General/wtutils';
import WTNGtt from '../../General/wtng-tt.vue'
import WTNGtt from '../../General/wtng-tt.vue';
const log = require("electron-log");
export default {

10
src/components/modules/Main/Settings/SettingsLibraryMapping.vue
View file

@ -9,7 +9,8 @@
<br>
<!-- Select Lib -->
<div class="d-flex align-items-center">
<b-form-group id="SelLibGroup" v-bind:label="$t('Modules.ET.optExpType.lblSelectSelection')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Common.Settings.LibMapping.ttSelectLibrary" label="Modules.ET.optExpType.lblSelectSelection" />
<b-form-select
v-model="selLib"
id="selLib"
@ -18,10 +19,10 @@
style="width: auto"
name="selLib">
</b-form-select>
<WTNGtt tt="Common.Settings.LibMapping.ttSelectLibrary" size="20px"></WTNGtt>
</b-form-group>
</div>
<br>
<!-- Table of section path -->
<b-table ref="table"
striped
@ -48,13 +49,14 @@
import i18n from '../../../../i18n';
import store from '../../../../store';
import { wtconfig, dialog } from '../../General/wtutils';
import WTNGtt from '../../General/wtng-tt.vue'
import WTNGttlabel from '../../General/wtng-ttlabel.vue'
import { pms } from '../../General/pms';
const log = require("electron-log");
export default {
components: {
WTNGtt
WTNGttlabel
},
data() {
return {

24
src/components/modules/PMS/Butler/butler.vue
View file

@ -8,16 +8,16 @@
</div>
<br>
<div class="d-flex align-items-center">
<b-form-group id="ButlerGroup" v-bind:label="$t('Modules.PMS.Butler.SelectTask')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-select
v-model="selTask"
id="selTask"
:options="selTaskOptions"
style="width: auto"
name="selTask">
</b-form-select>
<WTNGtt tt="Modules.PMS.Butler.TTSelectTask" size="20px"></WTNGtt>
</b-form-group>
<b-form-group>
<WTNGttlabel tt="Modules.PMS.Butler.TTSelectTask" label="Modules.PMS.Butler.SelectTask" />
<b-form-select
v-model="selTask"
id="selTask"
:options="selTaskOptions"
style="width: auto"
name="selTask">
</b-form-select>
</b-form-group>
</div>
<br>
<br>
@ -36,10 +36,10 @@
const log = require("electron-log");
import i18n from '../../../../i18n';
import store from '../../../../store';
import WTNGtt from '../../General/wtng-tt.vue'
import WTNGttlabel from '../../General/wtng-ttlabel.vue'
export default {
components: {
WTNGtt
WTNGttlabel
},
data() {
return {

8
src/components/modules/PMS/DVR/DVR.vue
View file

@ -10,7 +10,8 @@
<br>
<br>
<div class="d-flex align-items-center">
<b-form-group id="dvrSelDVRGroup" v-bind:label="$t('Modules.PMS.DVR.selDVR')" label-size="lg" label-class="font-weight-bold pt-0" name="dvrSelDVRGroup">
<b-form-group name="dvrSelDVRGroup">
<WTNGttlabel tt="Modules.PMS.DVR.ttselDVR" label="Modules.PMS.DVR.selDVR" />
<b-form-select
v-model="selDVR"
id="selDVR"
@ -18,7 +19,6 @@
style="width: auto"
name="selDVR">
</b-form-select>
<WTNGtt tt="Modules.PMS.DVR.ttselDVR" size="20px"></WTNGtt>
</b-form-group>
</div>
<br>
@ -60,14 +60,14 @@
//import store from '../../../store';
//import { wtconfig } from '../General/wtutils';
import { dvr } from "./scripts/dvr";
import WTNGtt from '../../General/wtng-tt.vue'
import WTNGttlabel from './../../General/wtng-ttlabel.vue'
i18n, dvr
const log = require("electron-log");
export default {
components: {
WTNGtt
WTNGttlabel
},
data() {
return {

12
src/components/modules/PMS/FindMedia/FindMedia.vue
View file

@ -20,7 +20,8 @@
<br>
<div>
<div class="d-flex align-items-center"> <!-- Select Lib -->
<b-form-group id="SelLibGroup" v-bind:label="$t('Modules.ET.optExpType.lblSelectSelection')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.PMS.FindMedia.TTSelectLibrary" label="Modules.ET.optExpType.lblSelectSelection" />
<b-form-select
v-model="selLib"
id="selLib"
@ -28,7 +29,6 @@
style="width: auto"
name="selLib">
</b-form-select>
<WTNGtt tt="Modules.PMS.FindMedia.TTSelectLibrary" size="20px"></WTNGtt>
</b-form-group>
</div>
<br>
@ -54,22 +54,18 @@
<script>
import i18n from '../../../../i18n';
//import store from '../../../store';
import { dialog } from '../../General/wtutils';
import WTNGtt from '../../General/wtng-tt.vue'
import WTNGttlabel from '../../General/wtng-ttlabel.vue'
import { pms } from '../../General/pms';
import { findMedia } from './scripts/FindMedia.js';
import statusDiv from '../../General/status.vue';
import { status } from '../../General/status';
i18n
const log = require("electron-log");
export default {
components: {
statusDiv,
WTNGtt
WTNGttlabel
},
data() {
return {

12
src/components/modules/PMS/Settings/settings.vue
View file

@ -11,8 +11,8 @@
<p>{{ $t("Modules.PMS.Settings.Notice") }}</p>
<br>
<div> <!-- Settings to show -->
<WTNGtt tt="Modules.PMS.Settings.TTSettingsFilter" size="20px"></WTNGtt>
<b-form-group id="FilterSettingsGroup" v-bind:label="$t('Modules.PMS.Settings.SettingsFilter')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.PMS.Settings.TTSettingsFilter" label="Modules.PMS.Settings.SettingsFilter" />
<b-form-radio-group
id="FilterSettings"
v-model="selFilterSetting"
@ -24,7 +24,8 @@
</b-form-group>
</div>
<div class="d-flex align-items-center">
<b-form-group id="etLibraryGroup" v-bind:label="$t('Modules.PMS.Settings.SelectSettingsSelection')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.PMS.Settings.TTSelectSettingsSelection" label="Modules.PMS.Settings.SelectSettingsSelection" />
<b-form-select
v-model="selSection"
id="selSection"
@ -33,7 +34,6 @@
style="width: 75%"
name="selSection">
</b-form-select>
<WTNGtt tt="Modules.PMS.Settings.TTSelectSettingsSelection" size="20px"></WTNGtt>
</b-form-group>
</div>
<div> <!-- Modal popup -->
@ -114,13 +114,13 @@
const log = require("electron-log");
const {JSONPath} = require('jsonpath-plus');
import {wtconfig} from './../../General/wtutils';
import WTNGtt from './../../General/wtng-tt.vue'
import WTNGttlabel from './../../General/wtng-ttlabel.vue'
import i18n from '../../../../i18n';
import store from '../../../../store';
import { pmssettings } from "./scripts/settings";
export default {
components: {
WTNGtt
WTNGttlabel
},
data() {
return {

12
src/components/modules/PMS/ViewState/ViewState.vue
View file

@ -7,7 +7,8 @@
<h5>{{ $t(`Modules.PMS.ViewState.Description`) }}</h5>
</div>
<div class="d-flex align-items-center">
<b-form-group id="ViewStateSelSourceUsrGroup" v-bind:label="$t('Modules.PMS.ViewState.selSourceUsr')" label-size="lg" label-class="font-weight-bold pt-0" name="ViewStateSelSourceUsrGroup">
<b-form-group name="ViewStateSelSourceUsrGroup">
<WTNGttlabel tt="Modules.PMS.ViewState.ttSelSourceUsr" label="Modules.PMS.ViewState.selSourceUsr" />
<b-form-select
v-model="selSrcUsr"
id="selSrcUsr"
@ -16,14 +17,14 @@
style="width: 75%"
name="selSrcUsr">
</b-form-select>
<WTNGtt tt="Modules.PMS.ViewState.ttSelSourceUsr" size="20px"></WTNGtt>
</b-form-group>
</div>
<div ref="libSpinner" id="libSpinner" :hidden="WaitForUsers">
<b-spinner id="libLoad" class="ml-auto text-danger"></b-spinner>
</div>
<div class="d-flex align-items-center">
<b-form-group id="ViewStateSelTargetUsrGroup" v-bind:label="$t('Modules.PMS.ViewState.selTargetUsr')" label-size="lg" label-class="font-weight-bold pt-0" name="ViewStateSelTargetUsrGroup">
<b-form-group name="ViewStateSelTargetUsrGroup">
<WTNGttlabel tt="Modules.PMS.ViewState.ttSelTargetUsr" label="Modules.PMS.ViewState.selTargetUsr" />
<b-form-select
v-model="selTargetUsr"
@change="selTargetUsrChanged"
@ -32,7 +33,6 @@
style="width: 75%"
name="selTargetUsr">
</b-form-select>
<WTNGtt tt="Modules.PMS.ViewState.ttSelTargetUsr" size="20px"></WTNGtt>
</b-form-group>
</div>
<br>
@ -72,7 +72,7 @@
import i18n from '../../../../i18n';
import store from '../../../../store';
import { wtconfig } from '../../General/wtutils'
import WTNGtt from '../../General/wtng-tt.vue'
import WTNGttlabel from './../../General/wtng-ttlabel.vue'
import { status } from '../../General/status';
import { viewstate } from "./scripts/viewstate";
import statusDiv from '../../General/status.vue'
@ -80,7 +80,7 @@
export default {
components: {
statusDiv,
WTNGtt
WTNGttlabel
},
data() {
return {

8
src/components/modules/PlexTV/PlexTV.vue
View file

@ -9,7 +9,8 @@
<b-link id="general" :to="{ path: '/settings/export', query: { return: 'plextv' } }">{{ $t("Modules.ET.Settings.Note") }} </b-link>
<br>
<div class="d-flex align-items-center"> <!-- Select User -->
<b-form-group id="plexTVUsers" v-bind:label="$t('Modules.PlexTV.SelUsr')" label-size="lg" label-class="font-weight-bold pt-0">
<b-form-group>
<WTNGttlabel tt="Modules.PlexTV.TT-User" label="Modules.PlexTV.SelUsr" />
<div ref="libSpinner" id="libSpinner" :hidden="selUserWait">
<b-spinner id="libLoad" class="ml-auto text-danger"></b-spinner>
</div>
@ -20,7 +21,6 @@
style="width: Auto"
name="selLibrary">
</b-form-select>
<WTNGtt tt="Modules.PlexTV.TT-User" size="20px"></WTNGtt>
</b-form-group>
</div>
<b-input-group id="UserIDGrp" :prepend="$t('Modules.PlexTV.UsrID')" class="mt-3">
@ -63,12 +63,12 @@
import { plextv } from "./scripts/plextv";
import i18n from '../../../i18n';
import { wtconfig } from '../General/wtutils';
import WTNGtt from '../General/wtng-tt.vue'
import WTNGttlabel from '../General/wtng-ttlabel.vue';
const log = require("electron-log");
export default {
components: {
WTNGtt
WTNGttlabel
},
data() {
return {