adam.goldsmith/PrinterStatus
2
0
Fork 0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-21 15:03:48 -05:00
Code Issues 1 Releases Wiki Activity

Add a corner ribbon thing with link to Git source

Browse Source 
Basically a simplified version of https://github.com/tholman/github-corners
This commit is contained in:
Adam Goldsmith 2023-03-27 23:27:09 -04:00
parent a6a097a7f7
commit b3b26464ce
3 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -1,5 +1,9 @@
{ {
"name": "printer_status", "name": "printer_status",
"repository": {
"type": "git",
"url": "https://github.com/ad1217/PrinterStatus"
},
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"devDependencies": { "devDependencies": {

3
src/App.vue
View File

@ -18,14 +18,17 @@
</PrinterCard> </PrinterCard>
</div> </div>
</div> </div>
<git-source-corner :href="package_info.repository.url"> </git-source-corner>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, Ref } from 'vue'; import { computed, ref, Ref } from 'vue';
import package_info from '../package.json';
import { Message } from '../types/messages'; import { Message } from '../types/messages';
import PrinterCard, { PrinterInfo } from './PrinterCard.vue'; import PrinterCard, { PrinterInfo } from './PrinterCard.vue';
import GitSourceCorner from './GitSourceCorner.vue';
const printers: Ref<{ [key: string]: PrinterInfo }> = ref({}); const printers: Ref<{ [key: string]: PrinterInfo }> = ref({});
const hasPrinters = computed(() => Object.keys(printers.value).length > 0); const hasPrinters = computed(() => Object.keys(printers.value).length > 0);

40
src/GitSourceCorner.vue Normal file
View File

@ -0,0 +1,40 @@
<!-- Icon from https://icons.getbootstrap.com/icons/git/ -->
<template>
<a :href="href" class="source-corner">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 32 32"
>
<path
transform="translate(14 2)"
d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.031 1.031 0 0 0 0-1.457"
/>
</svg>
</a>
</template>
<script setup lang="ts">
export interface Props {
href: string;
}
const props = defineProps<Props>();
</script>
<style>
.source-corner {
width: 4rem;
height: 4rem;
position: absolute;
top: 0;
right: 0;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
color: white;
background-color: black;
}
.source-corner:hover {
color: tomato;
}
</style>