Zoom in on real browser screenshot (#3925)

* Screenshot in modal

* Update src/components/ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Update src/pages/Details.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Added title

* Update ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Add translations

---------

Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Adam Hancock 2023-11-23 18:58:33 +00:00 committed by GitHub
parent dc42420193
commit ac452bbcb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 71 additions and 3 deletions

View File

@ -635,6 +635,10 @@ $shadow-box-padding: 20px;
}
}
.zoom-cursor {
cursor: zoom-in;
}
// Localization
@import "localization.scss";

View File

@ -0,0 +1,52 @@
<template>
<div ref="modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ $t("Browser Screenshot") }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body"></div>
<img :src="imageURL" alt="screenshot of the website">
</div>
</div>
</div>
</template>
<script lang="ts">
import { Modal } from "bootstrap";
export default {
props: {
imageURL: {
type: String,
required: true,
},
},
data() {
return {
modal: null,
};
},
mounted() {
this.modal = new Modal(this.$refs.modal);
},
methods: {
show() {
this.modal.show();
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dark {
.modal-dialog .form-text, .modal-dialog p {
color: $dark-font-color;
}
}
</style>

View File

@ -859,5 +859,6 @@
"successEnabled": "Enabled Successfully.",
"tagNotFound": "Tag not found.",
"foundChromiumVersion": "Found Chromium/Chrome. Version: {0}",
"GrafanaOncallUrl": "Grafana Oncall URL"
"GrafanaOncallUrl": "Grafana Oncall URL",
"Browser Screenshot": "Browser Screenshot"
}

View File

@ -184,9 +184,10 @@
<!-- Screenshot -->
<div v-if="monitor.type === 'real-browser'" class="shadow-box">
<div class="row">
<div class="col-md-6">
<img :src="screenshotURL" alt style="width: 100%;">
<div class="col-md-6 zoom-cursor">
<img :src="screenshotURL" style="width: 100%;" alt="screenshot of the website" @click="showScreenshotDialog">
</div>
<ScreenshotDialog ref="screenshotDialog" :imageURL="screenshotURL" />
</div>
</div>
@ -283,6 +284,7 @@ import "prismjs/components/prism-javascript";
import "prismjs/components/prism-css";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import ScreenshotDialog from "../components/ScreenshotDialog.vue";
export default {
components: {
@ -297,6 +299,7 @@ export default {
Tag,
CertificateInfo,
PrismEditor,
ScreenshotDialog
},
data() {
return {
@ -476,6 +479,14 @@ export default {
this.$refs.confirmDelete.show();
},
/**
* Show Screenshot Dialog
* @returns {void}
*/
showScreenshotDialog() {
this.$refs.screenshotDialog.show();
},
/**
* Show dialog to confirm clearing events
* @returns {void}