Frontend: Add tooltips #277

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-04-07 15:58:08 +02:00
parent 8577c8e08f
commit 055ed7cecf
2 changed files with 61 additions and 15 deletions

View file

@ -6,11 +6,12 @@
<span v-if="fileName">Importing {{fileName}}...</span>
<span v-else-if="busy">Importing files from import folder...</span>
<span v-else-if="completed">Done.</span>
<span v-else>Press button to copy photos from import folder...</span>
<span v-else>Press button to import photos...</span>
</p>
<p class="options">
<v-progress-linear color="secondary-dark" :value="completed" :indeterminate="busy"></v-progress-linear>
<v-progress-linear color="secondary-dark" :value="completed"
:indeterminate="busy"></v-progress-linear>
</p>
<v-checkbox
@ -18,8 +19,19 @@
v-model="options.move"
color="secondary-dark"
:disabled="busy"
:label="labels.move"
></v-checkbox>
>
<template v-slot:label>
<div>
<v-tooltip right max-width="90%" open-delay="750">
<template v-slot:activator="{ on }">
<span v-on="on">{{labels.move}}</span>
</template>
<span>Instead of creating a copy, move files from import to originals to save storage.
Unsupported file types will never be deleted, they remain in their current folder.</span>
</v-tooltip>
</div>
</template>
</v-checkbox>
<p class="subheading">
When you import files to your library, they will be sorted by date
@ -40,11 +52,11 @@
</v-btn>
<v-btn v-if="!this.$config.values.readonly"
:disabled="busy"
color="secondary-dark"
class="white--text ml-0 mt-2 hidden-xs-only"
depressed
@click.stop="showUpload()"
:disabled="busy"
color="secondary-dark"
class="white--text ml-0 mt-2 hidden-xs-only"
depressed
@click.stop="showUpload()"
>
<translate>Upload</translate>
<v-icon right dark>cloud_upload</v-icon>

View file

@ -19,22 +19,55 @@
v-model="options.skipUnchanged"
color="secondary-dark"
:disabled="busy"
:label="labels.skipUnchanged"
></v-checkbox>
>
<template v-slot:label>
<div>
<v-tooltip right max-width="90%" :open-delay="tooltipDelay">
<template v-slot:activator="{ on }">
<span v-on="on">{{labels.skipUnchanged}}</span>
</template>
<span>Enable to re-index all originals, including already indexed and unchanged files.</span>
</v-tooltip>
</div>
</template>
</v-checkbox>
<v-checkbox
class="ma-0 pa-0"
v-model="options.convertRaw"
color="secondary-dark"
:disabled="busy || readonly"
:label="labels.convertRaw"
></v-checkbox>
>
<template v-slot:label>
<div>
<v-tooltip right max-width="90%" :open-delay="tooltipDelay">
<template v-slot:activator="{ on }">
<span v-on="on">{{labels.convertRaw}}</span>
</template>
<span>RAW image files can not be indexed and displayed directly. They need to be converted to JPEG if not done already. You can also convert your files manually.</span>
</v-tooltip>
</div>
</template>
</v-checkbox>
<v-checkbox
class="ma-0 pa-0"
v-model="options.createThumbs"
color="secondary-dark"
:disabled="busy"
:label="labels.createThumbs"
></v-checkbox>
>
<template v-slot:label>
<div>
<v-tooltip right max-width="90%" :open-delay="tooltipDelay">
<template v-slot:activator="{ on }">
<span v-on="on">{{labels.createThumbs}}</span>
</template>
<span>Enable to pre-render thumbnails if not done already.
On-demand rendering saves storage but requires a powerful CPU.</span>
</v-tooltip>
</div>
</template>
</v-checkbox>
<!-- v-checkbox
class="ma-0 pa-0"
v-model="options.groomMetadata"
@ -86,6 +119,7 @@
action: "",
fileName: "",
source: null,
tooltipDelay: 750, // ms
options: {
skipUnchanged: true,
createThumbs: false,