Random stuff with icons (#737)

* Clickable tag for channels

* Improve platforms checkbox in project versions page

* Add platform icon for new version upload page

* Add category logo to project card

* Add icons for licenses

* Fix Type "LPGL" => "LGPL"

frontend/src/components/logos/licenses/LicenseLogo.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import MITLogo from "~/components/logos/licenses/MITLogo.vue";
+import GPLLogo from "~/components/logos/licenses/GPLLogo.vue";
+import LGPLLogo from "~/components/logos/licenses/LGPLLogo.vue";
+
+const props = withDefaults(
+  defineProps<{
+    license: string;
+    size?: number;
+  }>(),
+  {
+    size: 72,
+  }
+);
+</script>
+<template>
+  <icon-mdi-help v-if="license === 'Unspecified'" v-bind="$attrs" :width="size" :height="size" />
+  <MITLogo v-else-if="license === 'MIT'" v-bind="$attrs" :width="size" :height="size" />
+  <icon-mdi-feather v-else-if="license === 'Apache 2.0'" v-bind="$attrs" :width="size" :height="size" />
+  <GPLLogo v-else-if="license === 'GPL'" v-bind="$attrs" :width="size" :height="size" />
+  <LGPLLogo v-else-if="license === 'LGPL'" v-bind="$attrs" :width="size" :height="size" />
+  <icon-mdi-gavel v-else-if="license === 'Other'" v-bind="$attrs" :width="size" :height="size" />
+</template>

frontend/src/components/logos/licenses/MITLogo.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 300 180">
+    <g stroke-width="35" stroke="currentColor">
+      <path d="m17.5,0v166m57-166v113m57-113v166m57-166v33m58,20v113" />
+      <path d="m188.5,53v113" stroke="currentColor" />
+      <path d="m229,16.5h92" stroke-width="33" />
+    </g>
+  </svg>
+</template>

frontend/src/components/projects/ProjectCard.vue

@@ -8,6 +8,7 @@ import { useI18n } from "vue-i18n";
 import Tooltip from "~/lib/components/design/Tooltip.vue";
 import { Project } from "hangar-api";
 import { Visibility } from "~/types/enums";
+import CategoryLogo from "~/components/logos/categories/CategoryLogo.vue";
 
 const i18n = useI18n();
 
@@ -46,7 +47,10 @@ function getBorderClasses(): string {
         </span>
 
         <p v-if="project.description" class="mb-1">{{ project.description }}</p>
-        <span class="<sm:hidden text-gray-500 dark:text-gray-400"> {{ i18n.t("project.category." + project.category) }} </span>
+        <span class="<sm:hidden text-gray-500 dark:text-gray-400 flex flex-row items-center">
+          <CategoryLogo :category="project.category" :size="16" class="mr-1" />
+          {{ i18n.t("project.category." + project.category) }}
+        </span>
       </div>
       <div class="flex-grow"></div>
       <div class="<sm:hidden flex flex-col flex-shrink-0 min-w-40">

frontend/src/pages/[user]/[project]/versions/index.vue

@@ -180,8 +180,9 @@ function getBorderClasses(version: Version): string {
 
           <ul>
             <li v-for="channel in channels" :key="channel.name" class="inline-flex w-full">
-              <InputCheckbox v-model="filter.channels" :value="channel.name" @change="updateChannelCheckAll" />
-              <Tag :name="channel.name" :color="{ background: channel.color }"></Tag>
+              <InputCheckbox v-model="filter.channels" :value="channel.name" @change="updateChannelCheckAll">
+                <Tag :name="channel.name" :color="{ background: channel.color }"></Tag>
+              </InputCheckbox>
             </li>
           </ul>
         </Card>
@@ -196,9 +197,9 @@ function getBorderClasses(version: Version): string {
 
           <ul>
             <li v-for="platform in platforms" :key="platform.name" class="inline-flex w-full">
-              <InputCheckbox v-model="filter.platforms" :value="platform.enumName" @change="updatePlatformCheckAll" />
-              <PlatformLogo :platform="platform.enumName" :size="24" class="mr-1" />
-              {{ platform.name }}
+              <InputCheckbox v-model="filter.platforms" :value="platform.enumName" :label="platform.name" @change="updatePlatformCheckAll">
+                <PlatformLogo :platform="platform.enumName" :size="24" class="mr-1" />
+              </InputCheckbox>
             </li>
           </ul>
         </Card>

frontend/src/pages/[user]/[project]/versions/new.vue

@@ -27,6 +27,7 @@ import DependencyTable from "~/components/projects/DependencyTable.vue";
 import InputTag from "~/lib/components/ui/InputTag.vue";
 import { LastDependencies } from "hangar-api";
 import Tabs, { Tab } from "~/lib/components/design/Tabs.vue";
+import PlatformLogo from "~/components/logos/platforms/PlatformLogo.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -273,7 +274,9 @@ useHead(
           :rules="platformVersionRules"
           :label="platform.name"
           @update:modelValue="togglePlatform(platform.enumName)"
-        />
+        >
+          <PlatformLogo :platform="platform.enumName" :size="24" class="mr-1" />
+        </InputCheckbox>
       </div>
     </template>
     <template #dependencies>

frontend/src/pages/index.vue

@@ -20,6 +20,7 @@ import { Platform } from "~/types/enums";
 import InputRadio from "~/lib/components/ui/InputRadio.vue";
 import PlatformLogo from "~/components/logos/platforms/PlatformLogo.vue";
 import CategoryLogo from "~/components/logos/categories/CategoryLogo.vue";
+import LicenseLogo from "~/components/logos/licenses/LicenseLogo.vue";
 
 const i18n = useI18n();
 const route = useRoute();
@@ -202,7 +203,9 @@ useHead(meta);
       <div class="licenses">
         <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.licenses") }}</h3>
         <div class="flex flex-col gap-1">
-          <InputCheckbox v-for="license in backendData.licenses" :key="license" v-model="filters.licenses" :value="license" :label="license" />
+          <InputCheckbox v-for="license in backendData.licenses" :key="license" v-model="filters.licenses" :value="license" :label="license">
+            <LicenseLogo :license="license" :size="22" class="mr-1" />
+          </InputCheckbox>
         </div>
       </div>
     </Card>

frontend/src/types/generated/icons.d.ts

@@ -7,35 +7,74 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    IconMdiAccountPlus: typeof import('~icons/mdi/account-plus')['default']
     IconMdiAlert: typeof import('~icons/mdi/alert')['default']
     IconMdiAlertBox: typeof import('~icons/mdi/alert-box')['default']
     IconMdiAlertOutline: typeof import('~icons/mdi/alert-outline')['default']
+    IconMdiBell: typeof import('~icons/mdi/bell')['default']
+    IconMdiBellOutline: typeof import('~icons/mdi/bell-outline')['default']
     IconMdiCalendar: typeof import('~icons/mdi/calendar')['default']
     IconMdiCancel: typeof import('~icons/mdi/cancel')['default']
     IconMdiCashMultiple: typeof import('~icons/mdi/cash-multiple')['default']
     IconMdiChat: typeof import('~icons/mdi/chat')['default']
     IconMdiCheck: typeof import('~icons/mdi/check')['default']
     IconMdiCheckBold: typeof import('~icons/mdi/check-bold')['default']
+    IconMdiCheckboxMarkedCircle: typeof import('~icons/mdi/checkbox-marked-circle')['default']
+    IconMdiCheckCircleOutline: typeof import('~icons/mdi/check-circle-outline')['default']
+    IconMdiChevronDoubleDown: typeof import('~icons/mdi/chevron-double-down')['default']
     IconMdiCircle: typeof import('~icons/mdi/circle')['default']
     IconMdiClipboardOutline: typeof import('~icons/mdi/clipboard-outline')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
+    IconMdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    IconMdiCloudSearch: typeof import('~icons/mdi/cloud-search')['default']
     IconMdiCodeBracesBox: typeof import('~icons/mdi/code-braces-box')['default']
+    IconMdiContentSave: typeof import('~icons/mdi/content-save')['default']
     IconMdiController: typeof import('~icons/mdi/controller')['default']
+    IconMdiDelete: typeof import('~icons/mdi/delete')['default']
     IconMdiDownload: typeof import('~icons/mdi/download')['default']
+    IconMdiDownloadOutline: typeof import('~icons/mdi/download-outline')['default']
     IconMdiEarth: typeof import('~icons/mdi/earth')['default']
+    IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
+    IconMdiFeather: typeof import('~icons/mdi/feather')['default']
+    IconMdiFile: typeof import('~icons/mdi/file')['default']
+    IconMdiFlag: typeof import('~icons/mdi/flag')['default']
     IconMdiGamepadRoundLeft: typeof import('~icons/mdi/gamepad-round-left')['default']
     IconMdiGameplayRoundLeft: typeof import('~icons/mdi/gameplay-round-left')['default']
+    IconMdiGavel: typeof import('~icons/mdi/gavel')['default']
+    IconMdiHelp: typeof import('~icons/mdi/help')['default']
+    IconMdiHome: typeof import('~icons/mdi/home')['default']
     IconMdiHorseVariant: typeof import('~icons/mdi/horse-variant')['default']
     IconMdiInformation: typeof import('~icons/mdi/information')['default']
     IconMdiKeyOutline: typeof import('~icons/mdi/key-outline')['default']
+    IconMdiLicense: typeof import('~icons/mdi/license')['default']
+    IconMdiLink: typeof import('~icons/mdi/link')['default']
+    IconMdiListStatus: typeof import('~icons/mdi/list-status')['default']
+    IconMdiLock: typeof import('~icons/mdi/lock')['default']
+    IconMdiLockOpenOutline: typeof import('~icons/mdi/lock-open-outline')['default']
+    IconMdiLockOutline: typeof import('~icons/mdi/lock-outline')['default']
     IconMdiMenu: typeof import('~icons/mdi/menu')['default']
+    IconMdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
+    IconMdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    IconMdiOther: typeof import('~icons/mdi/other')['default']
+    IconMdiPencil: typeof import('~icons/mdi/pencil')['default']
+    IconMdiPin: typeof import('~icons/mdi/pin')['default']
+    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiPlus: typeof import('~icons/mdi/plus')['default']
+    IconMdiRenameBox: typeof import('~icons/mdi/rename-box')['default']
     IconMdiShape: typeof import('~icons/mdi/shape')['default']
     IconMdiShieldSun: typeof import('~icons/mdi/shield-sun')['default']
+    IconMdiSort: typeof import('~icons/mdi/sort')['default']
+    IconMdiSortAscending: typeof import('~icons/mdi/sort-ascending')['default']
+    IconMdiSortDescending: typeof import('~icons/mdi/sort-descending')['default']
     IconMdiSortVariant: typeof import('~icons/mdi/sort-variant')['default']
     IconMdiStar: typeof import('~icons/mdi/star')['default']
+    IconMdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     IconMdiTools: typeof import('~icons/mdi/tools')['default']
     IconMdiTrophy: typeof import('~icons/mdi/trophy')['default']
+    IconMdiUpload: typeof import('~icons/mdi/upload')['default']
+    IconMdiWall: typeof import('~icons/mdi/wall')['default']
     IconMdiWeatherNight: typeof import('~icons/mdi/weather-night')['default']
     IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/main/resources/application.yml

@@ -66,7 +66,7 @@ hangar:
     - "MIT"
     - "Apache 2.0"
     - "GPL"
-    - "LPGL"
+    - "LGPL"
     - "Other"
 
   announcements: