forked from Ivasoft/geovisio-website
135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
|
<div class="wrapper-terminal">
|
|
<div class="header">
|
|
<div class="round red"></div>
|
|
<div class="round yellow"></div>
|
|
<div class="round green"></div>
|
|
</div>
|
|
<div class="editor">
|
|
<code class="code">
|
|
<div class="screen">
|
|
<div class="upload-command">
|
|
<span class="tilde">~</span><span>{{ textInstall }}</span>
|
|
</div>
|
|
<div class="entry-button-terminal">
|
|
<Button
|
|
look="button--transparent"
|
|
:text="$t('pages.share_pictures.button_copy')"
|
|
:icon="clipboardIcon"
|
|
@trigger="copyText(textInstall)"
|
|
class="entry-button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="screen">
|
|
<div class="upload-command">
|
|
<span class="tilde">~</span><span>{{ textUpload }}</span>
|
|
</div>
|
|
<div class="entry-button-terminal">
|
|
<Button
|
|
look="button--transparent"
|
|
:text="$t('pages.share_pictures.button_copy')"
|
|
:icon="clipboardIcon"
|
|
@trigger="copyText(textUpload)"
|
|
class="entry-button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { updateClipboard } from '@/utils/copyToClipboard'
|
|
import Button from '@/components/Button.vue'
|
|
let uploadIsCopied = ref<boolean>(false)
|
|
|
|
defineProps({
|
|
textUpload: { type: String, default: '' },
|
|
textInstall: { type: String, default: '' }
|
|
})
|
|
const clipboardIcon = computed((): string =>
|
|
uploadIsCopied.value ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'
|
|
)
|
|
async function copyText(text: string): Promise<void> {
|
|
uploadIsCopied.value = await updateClipboard(text)
|
|
setTimeout(function () {
|
|
uploadIsCopied.value = false
|
|
}, 1000)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
border-top-right-radius: toRem(1.5);
|
|
border-top-left-radius: toRem(1.5);
|
|
background-color: var(--grey);
|
|
padding-left: toRem(0.5);
|
|
height: toRem(3);
|
|
width: 100%;
|
|
}
|
|
.editor {
|
|
border-bottom-right-radius: toRem(1.5);
|
|
border-bottom-left-radius: toRem(1.5);
|
|
background-color: var(--black-pale);
|
|
height: toRem(32);
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.screen {
|
|
padding: toRem(3) toRem(2) toRem(2);
|
|
height: 100%;
|
|
}
|
|
.screen:nth-child(2n) {
|
|
border-top: 2px solid white;
|
|
}
|
|
.upload-command {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: toRem(2);
|
|
}
|
|
.entry-button-terminal {
|
|
margin-top: toRem(2);
|
|
margin-left: auto;
|
|
}
|
|
.code {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: var(--white);
|
|
@include text(s-regular);
|
|
}
|
|
.tilde {
|
|
color: var(--green);
|
|
margin-right: toRem(1);
|
|
}
|
|
.round {
|
|
height: toRem(1.5);
|
|
width: toRem(1.5);
|
|
border-radius: 50%;
|
|
margin: toRem(0.5);
|
|
}
|
|
.red {
|
|
background-color: var(--red);
|
|
}
|
|
.yellow {
|
|
background-color: var(--yellow);
|
|
}
|
|
.green {
|
|
background-color: var(--green);
|
|
}
|
|
|
|
@media (max-width: toRem(50)) {
|
|
.editor {
|
|
min-height: toRem(27);
|
|
}
|
|
.upload-command {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
</style>
|