KAZ/webtransfer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add custom progressBar

Browse Source
This commit is contained in:
GMrrc 2024-11-22 17:00:53 +01:00
parent 0fb612c9a5
commit b4107232d8
2 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/FileTable.vue
View File

@ -16,7 +16,7 @@
<span>Nouveau</span> <span>Nouveau</span>
</button> </button>
<span v-else> <span v-else>
<NcProgressBar :value="transferProgress" size="medium" :color="transferStatus" /> <ProgressBar :value="transferProgress" :color="transferStatus" />
</span> </span>
</div> </div>
</template> </template>
@ -133,7 +133,8 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'; import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
import Delete from 'vue-material-design-icons/Delete.vue'; import Delete from 'vue-material-design-icons/Delete.vue';
import Pencil from 'vue-material-design-icons/Pencil.vue' import Pencil from 'vue-material-design-icons/Pencil.vue'
import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js' //import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
import ProgressBar from './ProgressBar.vue';
import EditFileName from './EditFileName.vue'; import EditFileName from './EditFileName.vue';
export default { export default {
@ -144,7 +145,7 @@ export default {
Plus, Plus,
NcActions, NcActions,
NcActionButton, NcActionButton,
NcProgressBar, ProgressBar,
Delete, Delete,
Pencil, Pencil,
EditFileName, EditFileName,
@ -169,7 +170,7 @@ export default {
initialFileName: '', // Nom originel du fichier/dossier edite initialFileName: '', // Nom originel du fichier/dossier edite
isDirectory: false, // Si l'element edite est un dossier ou non isDirectory: false, // Si l'element edite est un dossier ou non
transferProgress: 0, transferProgress: 0,
transferStatus: 'green', transferStatus: 'bg-blue-500',
}; };
}, },
async mounted() { async mounted() {
@ -297,7 +298,7 @@ export default {
} catch (error) { } catch (error) {
console.error('Erreur lors du drop :', error); console.error('Erreur lors du drop :', error);
this.transferStatus = 'red'; this.transferStatus = 'bg-red-500';
this.isTransfering = false; this.isTransfering = false;
} }
}, },

37
src/components/ProgressBar.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<div class="flex items-center w-48 h-full">
<div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
<div
:style="{ width: value + '%' }"
class="h-full rounded-full"
:class="color"
></div>
</div>
</div>
</template>
<script>
export default {
name: "ProgressBar",
props: {
value: {
type: Number,
required: true,
validator: (v) => v >= 0 && v <= 100,
},
label: {
type: String,
default: "Progress",
},
color: {
type: String,
default: "bg-blue-500",
},
},
};
</script>
<style scoped>
/* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
</style>