Merge pull request #510 from codeworks-projects/feat/target-blank-hea…

…der-links Feat/target blank header links
noi-techpark · Jan 16, 2024 · fbfb3c3 · fbfb3c3
2 parents 1ca9627 + 8c6dc51
commit fbfb3c3
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 4 deletions.
diff --git a/databrowser/src/components/header/HeaderExternalLink.vue b/databrowser/src/components/header/HeaderExternalLink.vue
@@ -5,7 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <a :href="href" :class="classes" class="flex items-center gap-2 no-underline">
+  <a
+    :href="href"
+    :class="classes"
+    class="flex items-center gap-2 no-underline"
+    target="_blank"
+  >
     <slot></slot>
     <IconExternal />
   </a>

diff --git a/databrowser/src/components/svg/IconUser.vue b/databrowser/src/components/svg/IconUser.vue
@@ -0,0 +1,25 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="16" cy="16" r="16" />
+    <path
+      d="M13 9.8849C13 10.7931 13.3687 11.6641 14.0251 12.3063C14.6815 12.9486 15.5717 13.3093 16.5 13.3093C17.4283 13.3093 18.3185 12.9486 18.9749 12.3063C19.6313 11.6641 20 10.7931 20 9.8849C20 8.97668 19.6313 8.10565 18.9749 7.46345C18.3185 6.82124 17.4283 6.46045 16.5 6.46045C15.5717 6.46045 14.6815 6.82124 14.0251 7.46345C13.3687 8.10565 13 8.97668 13 9.8849Z"
+      stroke="#50742F"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10 23.0936C10 21.4069 10.6848 19.7893 11.9038 18.5966C13.1228 17.4039 14.7761 16.7339 16.5 16.7339C18.2239 16.7339 19.8772 17.4039 21.0962 18.5966C22.3152 19.7893 23 21.4069 23 23.0936"
+      stroke="#50742F"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/databrowser/src/domain/auth/MenuUserSection.vue b/databrowser/src/domain/auth/MenuUserSection.vue
@@ -49,8 +49,39 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     v-else
     class="flex flex-col items-start gap-x-5 gap-y-4 md:flex-row md:items-center"
   >
-    <HeaderButton @click="onLogin">{{ t('auth.login') }}</HeaderButton>
-    <HeaderButton @click="onRegister">{{ t('auth.register') }}</HeaderButton>
+    <HeaderButton class="md:hidden" @click="onLogin">{{
+      t('auth.login')
+    }}</HeaderButton>
+    <HeaderButton class="md:hidden" @click="onRegister">{{
+      t('auth.register')
+    }}</HeaderButton>
+    <PopoverCustom class="hidden h-8 md:flex">
+      <template #trigger>
+        <PopoverCustomButton class="rounded focus-visible:outline-offset-2">
+          <ProfileButton
+            icon-name="IconUser"
+            custom-bg-color="bg-hint-info/10"
+          />
+        </PopoverCustomButton>
+      </template>
+      <template #container>
+        <PopoverCustomPanel class="mt-1 w-56" :has-close-button="false">
+          <button
+            class="flex w-full rounded p-4 hover:bg-gray-50 focus-visible:outline-offset-2"
+            @click="onLogin"
+          >
+            {{ t('auth.login') }}
+          </button>
+          <PopoverContentDivider />
+          <button
+            class="flex w-full rounded p-4 hover:bg-gray-50 focus-visible:outline-offset-2"
+            @click="onRegister"
+          >
+            {{ t('auth.register') }}
+          </button>
+        </PopoverCustomPanel>
+      </template>
+    </PopoverCustom>
   </div>
 </template>
 

diff --git a/databrowser/src/domain/auth/ProfileButton.vue b/databrowser/src/domain/auth/ProfileButton.vue
@@ -10,15 +10,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     :class="bgColorClass"
     :title="username"
   >
-    {{ letter }}
+    <IconParser v-if="iconName" :name="iconName" class="h-full w-full" />
+    <span v-else>
+      {{ letter }}
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, toRefs } from 'vue';
+import IconParser from '../../components/utils/IconParser.vue';
 
 const props = defineProps<{
   username?: string;
+  iconName?: string;
+  customBgColor?: string;
 }>();
 
 const { username } = toRefs(props);
@@ -39,6 +45,8 @@ const bgColorClasses = [
   'bg-yellow-500',
 ];
 const bgColorClass = computed(() => {
+  if (props.customBgColor) return props.customBgColor;
+
   const ascii = letter.value?.charCodeAt(0) ?? 0;
   const colorIndex = ascii % bgColorClasses.length;
   return bgColorClasses[colorIndex];