mirror of
https://github.com/HangarMC/Hangar.git
synced 2024-12-21 06:51:19 +08:00
add platform logos
This commit is contained in:
MiniDigger | Martin
parent
c5fafb8496
commit
c4dc3b0b9a
9
frontend-new/src/components/logos/PaperLogo.vue
Normal file
9
frontend-new/src/components/logos/PaperLogo.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1" width="72" height="72" fill="currentColor" viewBox="0 0 2000 2000">
|
||||
<title>Paper</title>
|
||||
<path
|
||||
class="platform-logo"
|
||||
d="M1625.4 316.8c16.8 12 24.8 31.2 21.6 51.1l-204.5 1227.2c-2.4 15.2-12 28-25.6 36-7.2 4-16 6.4-24.8 6.4-6.4 0-12.8-1.6-19.2-4L1011 1485.6l-193.3 235.7c-9.6 12-24 18.4-39.2 18.4-5.6 0-12-.8-17.6-3.2-20-7.2-33.6-26.4-33.6-47.9v-278.8l690.3-846.1-854.1 739L248 1173.2c-18.4-7.2-30.4-24-32-43.9-.8-19.2 8.8-37.6 25.6-47.1l1329.4-767c8-4.8 16.8-7.2 25.6-7.2 10.4 0 20.8 3.2 28.8 8.8z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
21
frontend-new/src/components/logos/PlatformLogo.vue
Normal file
21
frontend-new/src/components/logos/PlatformLogo.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script lang="ts" setup>
|
||||
import { Platform } from "~/types/enums";
|
||||
import PaperLogo from "~/components/logos/PaperLogo.vue";
|
||||
import VelocityLogo from "~/components/logos/VelocityLogo.vue";
|
||||
import WaterfallLogo from "~/components/logos/WaterfallLogo.vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
platform: Platform;
|
||||
size?: number;
|
||||
}>(),
|
||||
{
|
||||
size: 72,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<PaperLogo v-if="platform === Platform.PAPER" v-bind="$attrs" :width="size" :height="size" />
|
||||
<VelocityLogo v-else-if="platform === Platform.VELOCITY" v-bind="$attrs" :width="size" :height="size" />
|
||||
<WaterfallLogo v-else-if="platform === Platform.WATERFALL" v-bind="$attrs" :width="size" :height="size" />
|
||||
</template>
|
||||
14
frontend-new/src/components/logos/VelocityLogo.vue
Normal file
14
frontend-new/src/components/logos/VelocityLogo.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<title>Velocity</title>
|
||||
<g class="platform-logo">
|
||||
<path
|
||||
d="M236.25 232.55l-54.08-73.79a11.86 11.86 0 00-11.91-4.62L84 171.57a11.88 11.88 0 00-8 5.88l-42.64 77.07a11.84 11.84 0 00.81 12.75l54.21 74a11.86 11.86 0 0011.91 4.62l86-17.37a11.85 11.85 0 008-5.89l42.78-77.3a11.86 11.86 0 00-.82-12.78zm-59.45 74.21a9.57 9.57 0 01-13.39-2.06l-31-42.24a16 16 0 00-16-6.21l-52.58 10.63a9.58 9.58 0 01-11.29-7.49A9.58 9.58 0 0160 248.1l57-11.52a16 16 0 0010.81-7.92L156.42 177a9.58 9.58 0 0113-3.75 9.58 9.58 0 013.75 13L146.81 234a16 16 0 001.09 17.16l31 42.23a9.58 9.58 0 01-2.1 13.37z"
|
||||
/>
|
||||
<circle cx="416.44" cy="236.11" r="9.83" />
|
||||
<path
|
||||
d="M458.29 265.6H280.52a9.83 9.83 0 110-19.66h106.22a9.84 9.84 0 000-19.67h-70.2a9.83 9.83 0 110-19.66H422.9a9.84 9.84 0 000-19.67H202.83l33.42 45.61a11.86 11.86 0 01.81 12.75l-42.78 77.3a11.75 11.75 0 01-1.4 2h212.29a9.83 9.83 0 100-19.66h-53.53a9.84 9.84 0 110-19.67h106.65a9.84 9.84 0 100-19.67z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
28
frontend-new/src/components/logos/WaterfallLogo.vue
Normal file
28
frontend-new/src/components/logos/WaterfallLogo.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<!-- TODO better waterfall svg?-->
|
||||
<template>
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 1000 1000"
|
||||
enable-background="new 0 0 1000 1000"
|
||||
xml:space="preserve"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title>Waterfall</title>
|
||||
<g class="platform-logo">
|
||||
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
|
||||
<path
|
||||
d="M3180.5,5009.8c-162.9-72.8-182-272.1-34.5-350.7c28.7-15.3,205-28.7,484.8-38.3c427.3-13.4,701.3-46,938.9-105.4c206.9-53.6,469.5-143.7,469.5-161c0-9.6-55.6-80.5-122.6-157.1c-900.6-1023.2-1456.3-2103.9-1783.9-3474c-61.3-251-174.4-833.5-185.9-956.2c-5.7-53.7-9.6-55.6-293.2-128.4c-866.1-218.4-1559.8-557.6-2017.7-984.9C101.2-1844.3-40.6-2447.9,243-3013.1c151.4-298.9,471.4-618.9,869.9-866.1c1030.9-643.8,2780.4-988.7,4487.7-887.2c1716.9,103.5,3146.3,599.8,3847.6,1333.6c216.5,229.9,316.2,387.1,404.3,651.5c86.2,258.7,49.8,651.5-84.3,917.9C9381.2-1102.7,8227.7-483.8,6715.8-225.1c-136,23-260.6,46-274,49.8c-24.9,7.7-26.8-7.6,26.8,505.9c145.6,1435.2,515.4,2812.9,963.8,3590.9c176.3,306.6,212.7,344.9,412,419.6c515.4,197.4,831.6,258.7,1458.2,279.8c243.4,9.6,465.6,26.8,494.4,38.3c65.2,24.9,116.9,136,99.6,212.7c-5.8,28.7-32.6,72.8-59.4,97.7c-47.9,46-53.7,46-425.4,44.1c-720.5-5.7-1124.8-78.6-1732.2-316.2c-274-109.2-298.9-128.4-500.1-438.8c-576.8-891-1000.2-2521.7-1155.4-4451.2c-30.7-400.5-59.4-1906.6-38.3-2050.3c21.1-132.2,82.4-195.5,191.6-195.5c69,0,97.7,11.5,139.9,53.7l53.6,53.7v314.3c0,174.4,5.8,316.2,13.4,316.2c44.1,0,492.5-161,615.1-220.4c249.1-120.7,383.2-270.2,341.1-377.5c-42.1-115-293.2-279.8-594-392.8c-251-93.9-768.4-216.5-1121-264.4c-51.7-7.7-231.8-23-400.5-36.4l-306.6-24.9l-57.5-63.2c-47.9-53.6-55.6-72.8-46-141.8c7.7-51.7,28.7-93.9,61.3-120.7c46-40.2,69-44.1,256.8-44.1c224.2,0,666.8,53.7,973.4,115c869.9,180.1,1406.5,444.6,1580.8,785.6c34.5,69,44.1,116.9,44.1,239.5c0,134.1-7.7,166.7-57.5,254.8c-153.3,279.8-576.8,513.5-1211,674.5l-82.4,21.1v151.4c0,84.3,5.8,153.3,15.3,153.3c7.7,0,130.3-28.8,272.1-65.2c643.8-164.8,1117.1-396.6,1410.3-689.8c184-185.8,247.2-316.2,245.3-509.7c0-118.8-9.6-162.9-57.5-258.7c-67.1-138-272.1-352.6-448.4-467.6c-492.5-321.9-1295.3-557.6-2165.3-636.1c-308.5-26.8-994.5-26.8-1303,0c-869.9,78.6-1672.8,314.2-2165.3,636.1c-176.3,115-381.3,329.6-448.4,467.6c-80.5,162.9-82.4,354.5-5.8,511.6c115,233.8,379.4,456,766.5,645.7c128.4,63.2,258.7,120.7,289.3,128.4c55.6,13.4,55.6,13.4,44.1-61.3c-7.7-40.3-13.4-101.6-13.4-136.1c0-55.6-11.5-67.1-147.5-141.8c-394.7-216.5-567.2-423.5-569.1-687.9c-3.8-389,415.8-718.6,965.7-760.7c216.5-15.3,306.6,40.3,306.6,193.5c0,111.1-61.3,162.9-220.4,185.8c-329.6,49.8-530.8,134.1-617,264.4c-70.9,105.4-59.4,166.7,49.8,272.1c51.7,49.8,120.7,105.4,153.3,120.7l57.5,30.6l-1.9-93.9c0-160.9,101.6-249.1,243.4-210.8c115,32.6,138,93.9,151.4,406.2c76.6,1632.6,346.8,2908.7,845,4000.9c279.8,615.1,707.1,1257,1237.8,1856.8c298.9,337.2,304.7,344.9,304.7,425.4c0,116.9-67.1,168.6-358.3,281.7c-291.3,111.1-607.4,199.3-868,239.5C4002.5,5011.7,3259.1,5044.3,3180.5,5009.8z M6700.5-617.9c1312.6-243.3,2322.4-753,2673-1352.8c105.4-178.2,136-298.9,126.5-509.7c-5.7-159-15.3-189.7-88.1-337.2c-321.9-649.6-1385.4-1195.7-2801.4-1439c-605.5-105.4-1293.4-147.5-1989-122.6c-1950.7,67.1-3610.1,710.9-4033.5,1563.6L507.5-2651v220.4v222.3l86.2,172.5c70.9,143.7,116.9,203.1,268.3,354.5c99.6,101.6,247.2,228,327.7,281.7c369.8,252.9,952.3,503.9,1477.4,638.1c80.5,21.1,161,44.1,178.2,49.8c24.9,9.6,30.7,3.8,24.9-30.6c-3.8-34.5-38.3-53.7-183.9-105.4c-701.3-251-1230.2-684.1-1366.2-1119C1180-2421,1390.8-2894.3,1889-3250.8c1469.7-1046.2,4754-1046.2,6223.7,0c823.9,588.3,812.4,1418-30.7,2015.8c-346.8,245.3-938.9,482.9-1490.8,597.8c-90.1,19.2-170.5,42.2-180.1,49.8C6382.4-562.4,6407.3-564.3,6700.5-617.9z"
|
||||
/>
|
||||
<path
|
||||
d="M6666,4578.7c-53.7-46-182-220.4-333.4-454.1c-908.3-1406.5-1303-2989.2-1446.7-5806c-9.6-205-19.2-473.3-19.2-595.9c0-195.4,5.7-228,38.3-272.1c86.2-109.2,283.6-76.6,323.8,51.7c11.5,32.6,28.7,279.8,40.3,548c126.5,3021.8,549.9,4685,1561.7,6108.7c124.6,174.4,143.7,212.7,143.7,283.6c0,67.1-9.6,90.1-59.4,130.3C6840.4,4636.2,6735,4640,6666,4578.7z"
|
||||
/>
|
||||
<path
|
||||
d="M5958.9,4534.6c-26.8-17.2-105.4-101.6-176.3-187.8C4933.8,3308.3,4381.9,2053.2,4073.4,455.1c-138-718.6-256.8-1820.3-266.3-2494.8c-3.8-281.7-1.9-291.3,42.2-339.2c67.1-70.9,157.1-82.4,237.6-32.6c93.9,57.5,88.1,30.7,128.4,749.2c76.6,1356.6,310.4,2623.2,661.1,3594.7c289.3,793.3,687.9,1521.4,1140.1,2077.1c214.6,262.5,229.9,287.4,229.9,367.9C6246.4,4526.9,6085.4,4613.2,5958.9,4534.6z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@ -11,6 +11,7 @@ import DropdownItem from "~/components/design/DropdownItem.vue";
|
||||
import { useInternalApi } from "~/composables/useApi";
|
||||
import Modal from "~/components/modals/Modal.vue";
|
||||
import Alert from "~/components/design/Alert.vue";
|
||||
import PlatformLogo from "~/components/logos/PlatformLogo.vue";
|
||||
|
||||
const i18n = useI18n();
|
||||
const backendData = useBackendDataStore();
|
||||
@ -126,14 +127,16 @@ async function requiresConfirmation() {
|
||||
<template>
|
||||
<!-- todo make this actually look nice -->
|
||||
<div class="flex">
|
||||
<DropdownButton v-if="platformSelection && Object.keys(project.recommendedVersions).length !== 1" :button-size="small ? 'small' : 'large'">
|
||||
<!-- && Object.keys(project.recommendedVersions).length !== 1 -->
|
||||
<DropdownButton v-if="platformSelection" :button-size="small ? 'small' : 'large'">
|
||||
<template #button-label>
|
||||
<span class="items-center inline-flex"
|
||||
><IconMdiDownloadOutline /> {{ external ? i18n.t("version.page.downloadExternal") : i18n.t("version.page.download") }}</span
|
||||
></template
|
||||
>
|
||||
<span class="items-center inline-flex">
|
||||
<IconMdiDownloadOutline class="mr-1" />
|
||||
{{ external ? i18n.t("version.page.downloadExternal") : i18n.t("version.page.download") }}
|
||||
</span>
|
||||
</template>
|
||||
<DropdownItem v-for="(pl, i) in Object.keys(project.recommendedVersions)" :key="i" class="flex items-center" @click="checkAndDownloadPlatform(pl)">
|
||||
<IconMdiDownloadOutline class="mr-1" /><!-- todo platform icons -->
|
||||
<PlatformLogo :platform="pl" :size="24" class="mr-1" />
|
||||
{{ backendData.platforms.get(pl).name }}
|
||||
</DropdownItem>
|
||||
</DropdownButton>
|
||||
@ -159,7 +162,10 @@ async function requiresConfirmation() {
|
||||
<template #content>
|
||||
<span>{{ i18n.t("version.page.downloadUrlCopied") }}</span>
|
||||
</template>
|
||||
<Tooltip :content="i18n.t('version.page.downloadUrlHover')">
|
||||
<Tooltip>
|
||||
<template #content>
|
||||
{{ i18n.t("version.page.downloadUrlHover") }}
|
||||
</template>
|
||||
<Button :size="small ? 'small' : 'large'" class="ml-1" @click="copyDownloadUrl">
|
||||
<IconMdiContentCopy />
|
||||
</Button>
|
||||
|
||||
@ -35,7 +35,9 @@ const { v, errors, hasError } = useValidation(props.label, props.rules, internal
|
||||
@blur="v.$touch()"
|
||||
/>
|
||||
<icon-mdi-check-bold class="absolute h-4 w-4 opacity-0 text-white" />
|
||||
<template v-if="props.label">{{ props.label }}</template>
|
||||
<slot name="label">
|
||||
<template v-if="props.label">{{ props.label }}</template>
|
||||
</slot>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ import PlatformVersionEditModal from "~/components/modals/PlatformVersionEditMod
|
||||
import { AxiosError } from "axios";
|
||||
import Tooltip from "~/components/design/Tooltip.vue";
|
||||
import DownloadButton from "~/components/projects/DownloadButton.vue";
|
||||
import PlatformLogo from "~/components/logos/PlatformLogo.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const i18n = useI18n();
|
||||
@ -225,9 +226,11 @@ async function restoreVersion() {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- todo platform icon -->
|
||||
{{ platform?.name }}
|
||||
{{ platformTag?.data }}
|
||||
<div class="flex items-center">
|
||||
<PlatformLogo :platform="platform.enumName" size="24" class="mr-1" />
|
||||
{{ platform?.name }}
|
||||
{{ platformTag?.data }}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
|
||||
@ -18,6 +18,7 @@ import { PaginatedResult, Project } from "hangar-api";
|
||||
import Alert from "~/components/design/Alert.vue";
|
||||
import { Platform } from "~/types/enums";
|
||||
import { toNumber } from "lodash-es";
|
||||
import PlatformLogo from "~/components/logos/PlatformLogo.vue";
|
||||
|
||||
const i18n = useI18n();
|
||||
const route = useRoute();
|
||||
@ -163,13 +164,12 @@ useHead(meta);
|
||||
<div class="platforms">
|
||||
<h3 class="font-bold mb-1">Platforms</h3>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputCheckbox
|
||||
v-for="platform in backendData.visiblePlatforms"
|
||||
:key="platform.enumName"
|
||||
v-model="filters.platforms"
|
||||
:value="platform.enumName"
|
||||
:label="platform.name"
|
||||
/>
|
||||
<InputCheckbox v-for="platform in backendData.visiblePlatforms" :key="platform.enumName" v-model="filters.platforms" :value="platform.enumName">
|
||||
<template #label>
|
||||
<PlatformLogo :platform="platform.enumName" size="24" class="mr-1" />
|
||||
{{ platform.name }}
|
||||
</template>
|
||||
</InputCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="licenses">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user