- [Proxmox](#proxmox)
- [rTorrent](#rtorrent)
- [qBittorrent](#qbittorrent)
+ - [CopyToClipboard](#copy-to-clipboard)
If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
torrentInterval: 5000 # Interval for updating the torrent count.
target: "_blank" # optional html a tag target attribute
```
+
+## Copy to Clipboard
+
+This service displays the same information of a generic one, but shows an icon button on the indicator place (right side) you can click to get the content of the `clipboard` field copied to your clipboard.
+
+You can still provide an `url` that would be open when clicked anywhere but on the icon button.
+
+Configuration example:
+
+```yaml
+- name: "Copy me!"
+ logo: "assets/tools/sample.png"
+ subtitle: "Subtitle text goes here"
+ url: "#"
+ type: "CopyToClipboard"
+ clipboard: "this text will be copied to your clipboard"
+```
--- /dev/null
+<template>
+ <Generic :item="item">
+ <template #indicator>
+ <div class="status">
+ <i
+ class="fa-regular fa-copy fa-xl"
+ :class="{ scale: animate }"
+ @click="copy()"
+ @animationend="animate = false"
+ ></i>
+ </div>
+ </template>
+ </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+ name: "CopyToClipboard",
+ mixins: [service],
+ props: {
+ item: Object,
+ },
+ components: {
+ Generic,
+ },
+ data: () => ({
+ animate: false,
+ }),
+ methods: {
+ copy() {
+ navigator.clipboard.writeText(this.item.clipboard);
+ this.animate = true;
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.scale {
+ -webkit-animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+ animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.is-light i {
+ color: black;
+}
+.is-dark i {
+ color: white;
+}
+/**
+ * ----------------------------------------
+ * animation scale-down-center
+ * ----------------------------------------
+ */
+@-webkit-keyframes scale-up {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 50% {
+ -webkit-transform: scale(1.25);
+ transform: scale(1.25);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@keyframes scale-up {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 50% {
+ -webkit-transform: scale(1.25);
+ transform: scale(1.25);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+</style>