diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 3051e8b99..e80a293c6 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -7,7 +7,7 @@ import { useQuasar } from 'quasar'; import PinnedModules from './PinnedModules.vue'; import UserPanel from 'components/UserPanel.vue'; import VnBreadcrumbs from './common/VnBreadcrumbs.vue'; -import VnImg from 'src/components/ui/VnImg.vue'; +import VnAvatar from './ui/VnAvatar.vue'; const { t } = useI18n(); const stateStore = useStateStore(); @@ -72,22 +72,13 @@ const pinnedModulesRef = ref(); - - - - + + {{ t('globals.userPanel') }} diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue index 589524258..15d88d615 100644 --- a/src/components/UserPanel.vue +++ b/src/components/UserPanel.vue @@ -11,8 +11,8 @@ import VnSelect from 'src/components/common/VnSelect.vue'; import VnRow from 'components/ui/VnRow.vue'; import FetchData from 'components/FetchData.vue'; import { useClipboard } from 'src/composables/useClipboard'; -import VnImg from 'src/components/ui/VnImg.vue'; import { useRole } from 'src/composables/useRole'; +import VnAvatar from './ui/VnAvatar.vue'; const state = useState(); const session = useSession(); @@ -136,7 +136,7 @@ const isEmployee = computed(() => useRole().isEmployee()); @update:model-value="saveLanguage" :label="t(`globals.lang['${userLocale}']`)" icon="public" - color="orange" + color="primary" false-value="es" true-value="en" /> @@ -145,7 +145,7 @@ const isEmployee = computed(() => useRole().isEmployee()); @update:model-value="saveDarkMode" :label="t(`globals.darkMode`)" checked-icon="dark_mode" - color="orange" + color="primary" unchecked-icon="light_mode" /> @@ -153,10 +153,12 @@ const isEmployee = computed(() => useRole().isEmployee());
- - - - +
{{ user.nickname }}
@@ -168,7 +170,7 @@ const isEmployee = computed(() => useRole().isEmployee());
- +
-import { computed, ref } from 'vue'; +import { computed, ref, watch } from 'vue'; import { useI18n } from 'vue-i18n'; import { useSession } from 'src/composables/useSession'; import { useColor } from 'src/composables/useColor'; +import { getCssVar } from 'quasar'; const $props = defineProps({ workerId: { type: Number, required: true }, description: { type: String, default: null }, - size: { type: String, default: null }, title: { type: String, default: null }, + color: { type: String, default: null }, }); + const { getTokenMultimedia } = useSession(); const token = getTokenMultimedia(); const { t } = useI18n(); -const title = computed(() => $props.title ?? t('globals.system')); +const src = computed( + () => `/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}` +); +const title = computed(() => $props.title?.toUpperCase() || t('globals.system')); const showLetter = ref(false); +const backgroundColor = computed(() => { + const color = $props.color || useColor(title.value); + return getCssVar(color) || color; +}); + +watch(src, () => (showLetter.value = false)); + diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue index 985c9cc53..9585b81d8 100644 --- a/src/components/ui/VnImg.vue +++ b/src/components/ui/VnImg.vue @@ -1,6 +1,8 @@ -