From 115db004ac0ddf787157c646bf248ff83a7a0b30 Mon Sep 17 00:00:00 2001
From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com>
Date: Fri, 21 Jan 2022 12:25:12 +0100
Subject: [PATCH] add possibility to copy pubkeys in the clipboard
---
assets/css/_bootstrap.scss | 8 +++----
assets/css/style.scss | 5 -----
assets/img/clipboard.svg | 1 +
components/btn/Clipboard.vue | 43 ++++++++++++++++++++++++++++++++++++
components/member/Card.vue | 11 ++-------
i18n/locales/en.json | 1 +
i18n/locales/es.json | 1 +
i18n/locales/fr.json | 1 +
nuxt.config.js | 9 +++++++-
plugins/bootstrap.js | 3 +++
10 files changed, 64 insertions(+), 19 deletions(-)
create mode 100644 assets/img/clipboard.svg
create mode 100644 components/btn/Clipboard.vue
create mode 100644 plugins/bootstrap.js
diff --git a/assets/css/_bootstrap.scss b/assets/css/_bootstrap.scss
index fdfe56e..19a1e15 100644
--- a/assets/css/_bootstrap.scss
+++ b/assets/css/_bootstrap.scss
@@ -11,10 +11,10 @@
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
-// @import "~bootstrap/scss/transitions";
+ @import "~bootstrap/scss/transitions";
// @import "~bootstrap/scss/dropdown";
// @import "~bootstrap/scss/button-group";
-// @import "~bootstrap/scss/input-group";
+ @import "~bootstrap/scss/input-group";
// @import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@@ -30,10 +30,10 @@
@import "~bootstrap/scss/close";
// @import "~bootstrap/scss/toasts";
// @import "~bootstrap/scss/modal";
-// @import "~bootstrap/scss/tooltip";
+ @import "~bootstrap/scss/tooltip";
// @import "~bootstrap/scss/popover";
// @import "~bootstrap/scss/carousel";
- @import "~bootstrap/scss/spinners";
+// @import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3b2926a..41df294 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -39,11 +39,6 @@ $close-font-weight: 500;
@import 'font';
@import 'bootstrap';
-.card-subtitle {
- font-style: italic;
- font-size: 90%;
-}
-
.table-hover tbody tr{
cursor: pointer;
}
\ No newline at end of file
diff --git a/assets/img/clipboard.svg b/assets/img/clipboard.svg
new file mode 100644
index 0000000..e2d4666
--- /dev/null
+++ b/assets/img/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M19,2h-4.2c-0.4-1.2-1.5-2-2.8-2S9.6,0.8,9.2,2H5C3.9,2,3,2.9,3,4v16c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V4 C21,2.9,20.1,2,19,2z M12,2c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1s-1-0.4-1-1C11,2.4,11.4,2,12,2z M19,20H5V4h2v2h10V4h2V20z"/></svg>
\ No newline at end of file
diff --git a/components/btn/Clipboard.vue b/components/btn/Clipboard.vue
new file mode 100644
index 0000000..212b311
--- /dev/null
+++ b/components/btn/Clipboard.vue
@@ -0,0 +1,43 @@
+<template>
+<div class="clipboard input-group input-group-sm mb-3 mx-auto">
+ <div class="input-group-prepend">
+ <button id="btncopy" class="btn btn-outline-secondary px-4 py-1" type="button" @click="copyText"></button>
+ </div>
+ <input type="text" class="form-control text-truncate" :value="textContent" disabled>
+</div>
+</template>
+
+<script>
+export default {
+ props: {
+ textContent: {
+ type: String,
+ required: true
+ }
+ },
+ methods: {
+ copyText() {
+ navigator.clipboard.writeText(this.textContent)
+ $('#btncopy').tooltip({
+ title: this.$t('copie') + ' !',
+ trigger: 'manual'
+ })
+ $('#btncopy').tooltip('show')
+ setTimeout(() => {
+ $('#btncopy').tooltip('hide')
+ },500)
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.clipboard {
+ max-width:500px;
+
+ button {
+ background: url("~assets/img/clipboard.svg") no-repeat 50% 50% #fff;
+ background-size: 40%;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/components/member/Card.vue b/components/member/Card.vue
index 525207b..973b6bf 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -5,7 +5,7 @@
{{ hash.uid }}
<BadgeStatus :membre="hash" />
</h2>
- <div class="card-subtitle mb-2 text-muted text-center">{{ hash.pubkey }}</div>
+ <BtnClipboard :textContent="this.hash.pubkey" />
<div class="table-responsive">
<table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
<tbody>
@@ -71,16 +71,12 @@ export default {
text-align: center;
width: auto;
margin: auto;
-
+
tr {
display: flex;
flex-direction: column;
-
-
}
}
-
-
}
@media (min-width:576px) {
@@ -89,10 +85,7 @@ export default {
tr {display: table-row;}
th {text-align: right;}
td {text-align: left;}
-
}
}
}
-
-
</style>
\ No newline at end of file
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index a781013..79765fe 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -8,6 +8,7 @@
"recues" : "Certificates received "
},
"chargement" : "Loading",
+ "copie" : "Copied",
"description": "Description",
"dev": "In development",
"expire": "Expires",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index fe54764..ca3fa96 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -8,6 +8,7 @@
"recues" : "Certificaciones recibidas "
},
"chargement" : "Cargando",
+ "copie" : "Copiada",
"description": "Descripción",
"dev": "En desarrollo",
"expire": "Expira el",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index 0d619f8..1aac9fc 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -8,6 +8,7 @@
"recues" : "Certifications reçues "
},
"chargement" : "Chargement",
+ "copie" : "Copiée",
"description": "Description",
"dev": "En Développement",
"expire": "Expire le",
diff --git a/nuxt.config.js b/nuxt.config.js
index 2b2f1f8..439bef4 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,4 +1,5 @@
import i18n from './i18n'
+import webpack from 'webpack'
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
@@ -28,7 +29,8 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
- '~plugins/filters.js'
+ '~plugins/filters.js',
+ '~plugins/bootstrap.js'
],
// Auto import components: https://go.nuxtjs.dev/config-components
@@ -91,5 +93,10 @@ export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
+ plugins: [
+ new webpack.ProvidePlugin({
+ $: "jquery"
+ })
+ ],
}
}
diff --git a/plugins/bootstrap.js b/plugins/bootstrap.js
new file mode 100644
index 0000000..18c3e09
--- /dev/null
+++ b/plugins/bootstrap.js
@@ -0,0 +1,3 @@
+if (process.browser) {
+ require("bootstrap")
+}
\ No newline at end of file
--
GitLab