Borja Sánchez
2 years ago
commit
dbd590ec21
@ -1,61 +1,55 @@ |
||||
input.p-inputtext { |
||||
@apply bg-white border border-solid border-support-3 p-3.5 rounded-lg transition outline-none w-full |
||||
hover:border-primary focus:border-primary; |
||||
|
||||
&:focus, |
||||
&.p-filled { |
||||
~ { |
||||
label { |
||||
@apply text-caption text-primary; |
||||
} |
||||
} |
||||
} |
||||
.p-inputtext { |
||||
@apply border border-support-3 px-4 py-3 text-body-1 bg-white rounded-lg text-gray-90 transition w-full duration-200 |
||||
placeholder:text-support-3 |
||||
hover:border-primary hover:text-gray-90 hover:outline-0 hover:outline-none |
||||
focus:border-primary focus:text-gray-90 hover:outline-0 hover:outline-none; |
||||
|
||||
&.p-invalid.p-component { |
||||
@apply border-error text-error; |
||||
@apply border-error |
||||
placeholder:text-error; |
||||
} |
||||
|
||||
&.p-inputtext-sm { |
||||
@apply px-2 py-1; |
||||
@apply px-2 py-1.5 text-body-2; |
||||
} |
||||
|
||||
&.p-inputtext-lg { |
||||
@apply px-6 py-5; |
||||
@apply py-4; |
||||
} |
||||
} |
||||
|
||||
&.p-invalid { |
||||
~ label, |
||||
&:focus ~ label { |
||||
@apply text-error; |
||||
} |
||||
} |
||||
.p-input-icon-left > i:first-of-type { |
||||
//left: nth($inputPadding, 2); |
||||
//color: $inputIconColor; |
||||
} |
||||
|
||||
.p-input-icon-right { |
||||
> .p-inputtext { |
||||
@apply pr-10; |
||||
} |
||||
.p-input-icon-left > .p-inputtext { |
||||
//padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize; |
||||
} |
||||
|
||||
> i:last-of-type { |
||||
@apply right-3; |
||||
} |
||||
.p-input-icon-left.p-float-label > label { |
||||
//left: nth($inputPadding, 2) * 2 + $primeIconFontSize; |
||||
} |
||||
|
||||
.p-float-label { |
||||
input.p-inputtext { |
||||
@apply w-full; |
||||
|
||||
&:focus, |
||||
&.p-filled { |
||||
~ { |
||||
label { |
||||
@apply top-0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.p-input-icon-right > i:last-of-type { |
||||
//right: nth($inputPadding, 2); |
||||
//color: $inputIconColor; |
||||
} |
||||
|
||||
.p-input-icon-right > .p-inputtext { |
||||
//padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize; |
||||
} |
||||
|
||||
> label { |
||||
@apply bg-white duration-200 left-2 px-1 text-support-3; |
||||
.p-inputtext-sm { |
||||
.p-inputtext { |
||||
//@include scaledFontSize($inputTextFontSize, $scaleSM); |
||||
//@include scaledPadding($inputPadding, $scaleSM); |
||||
} |
||||
} |
||||
|
||||
.p-inputtext-lg { |
||||
.p-inputtext { |
||||
//@include scaledFontSize($inputTextFontSize, $scaleLG); |
||||
//@include scaledPadding($inputPadding, $scaleLG); |
||||
} |
||||
} |
||||
@ -0,0 +1,46 @@ |
||||
$color_1: #01579B; |
||||
$color_2: #1B5E20; |
||||
$color_3: #7f6003; |
||||
$color_4: #B71C1C; |
||||
|
||||
.p-toast { |
||||
@apply opacity-95; |
||||
|
||||
&-message { |
||||
@apply rounded-md mb-3.5 shadow-gray-30 shadow-md; |
||||
|
||||
&-content { |
||||
@apply py-4 px-6 gap-2.5; |
||||
|
||||
.p-toast-message-text { |
||||
@apply text-body-1; |
||||
} |
||||
.p-toast-message-icon { |
||||
} |
||||
.p-toast-summary { |
||||
@apply font-semibold; |
||||
} |
||||
.p-toast-detail { |
||||
} |
||||
} |
||||
|
||||
.p-toast-icon-close { |
||||
@apply rounded-full transition duration-200 w-4 h-6 |
||||
focus:outline-none; |
||||
} |
||||
|
||||
&.p-toast-message-info { |
||||
@apply bg-primary text-white; |
||||
} |
||||
|
||||
&.p-toast-message-success { |
||||
@apply bg-success text-white; |
||||
} |
||||
&.p-toast-message-warn { |
||||
@apply bg-warning text-gray-90; |
||||
} |
||||
&.p-toast-message-error { |
||||
@apply bg-error text-white; |
||||
} |
||||
} |
||||
} |
||||
@ -1,87 +1,102 @@ |
||||
<template> |
||||
<div v-if="item && item['resourceLinkListFromEntity']"> |
||||
<v-card> |
||||
<v-list-item |
||||
v-for="link in item['resourceLinkListFromEntity']" |
||||
> |
||||
<v-list-item-content> |
||||
<div v-if="link['course']"> |
||||
<v-icon icon="mdi-book" /> |
||||
{{ $t('Course') }}: {{ link.course.resourceNode.title }} |
||||
</div> |
||||
<div |
||||
v-for="(link, index) in item.resourceLinkListFromEntity" |
||||
:key="index" |
||||
class="field space-y-2" |
||||
> |
||||
<div |
||||
v-if="link.course" |
||||
:class="{ 'text-right text-body-2': editStatus }" |
||||
> |
||||
<span class="mdi mdi-book" /> |
||||
{{ t('Course: {0}', [ link.course.resourceNode.title ]) }} |
||||
</div> |
||||
|
||||
<div v-if="link['session']"> |
||||
<v-icon icon="mdi-book-open" /> |
||||
{{ $t('Session') }}: {{ link.session.name }} |
||||
</div> |
||||
<div |
||||
v-if="link.session" |
||||
:class="{ 'text-right text-body-2': editStatus }" |
||||
> |
||||
<span class="mdi mdi-book-open" /> |
||||
{{ t('Session: {0}', [ link.session.name ]) }} |
||||
</div> |
||||
|
||||
<div v-if="link['group']"> |
||||
<v-icon icon="mdi-people" /> |
||||
{{ $t('Group') }}: {{ link.group.resourceNode.title }} |
||||
</div> |
||||
<div |
||||
v-if="link.group" |
||||
:class="{ 'text-right text-body-2': editStatus }" |
||||
> |
||||
<span class="mdi mdi-people" /> |
||||
{{ t('Group: {0}', [ link.group.resourceNode.title ]) }} |
||||
</div> |
||||
|
||||
<div v-if="link['userGroup']"> |
||||
{{ $t('Class') }}: {{ link.userGroup.resourceNode.title }} |
||||
</div> |
||||
<div |
||||
v-if="link.userGroup" |
||||
v-t="{ path: 'Class: {0}', args: [ link.userGroup.resourceNode.title ] }" |
||||
/> |
||||
|
||||
<div v-if="link['user']"> |
||||
<v-icon icon="mdi-account" /> |
||||
<!-- @todo add avatar --> |
||||
<!-- <q-avatar size="32px">--> |
||||
<!-- <img :src="link.user.illustrationUrl + '?w=80&h=80&fit=crop'" />--> |
||||
<!-- </q-avatar>--> |
||||
{{ link.user.username }} |
||||
</div> |
||||
<div |
||||
v-if="link.user" |
||||
> |
||||
<span class="mdi mdi-account" /> |
||||
<!-- @todo add avatar --> |
||||
<!-- <q-avatar size="32px">--> |
||||
<!-- <img :src="link.user.illustrationUrl + '?w=80&h=80&fit=crop'" />--> |
||||
<!-- </q-avatar>--> |
||||
{{ link.user.username }} |
||||
</div> |
||||
|
||||
<div v-if="showStatus"> |
||||
{{ $t('Status') }}: {{ link.visibilityName }} |
||||
</div> |
||||
<div |
||||
v-if="showStatus" |
||||
v-t="{ path: 'Status: {0}', args: [link.visibilityName] }" |
||||
/> |
||||
|
||||
<q-select |
||||
v-if="editStatus" |
||||
v-model="link.visibility" |
||||
:options="visibilityList" |
||||
emit-value |
||||
filled |
||||
label="Status" |
||||
map-options |
||||
/> |
||||
</v-list-item-content> |
||||
</v-list-item> |
||||
</v-card> |
||||
<div |
||||
v-if="editStatus" |
||||
> |
||||
<div class="p-float-label"> |
||||
<Dropdown |
||||
v-model="link.visibility" |
||||
:input-id="`link-${link.id}-status`" |
||||
:options="visibilityOptions" |
||||
option-label="label" |
||||
option-value="value" |
||||
/> |
||||
<label |
||||
v-t="'Status'" |
||||
:for="`link-${link.id}-status`" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {RESOURCE_LINK_PUBLISHED, RESOURCE_LINK_DRAFT} from "./visibility"; |
||||
<script setup> |
||||
import { RESOURCE_LINK_PUBLISHED, RESOURCE_LINK_DRAFT } from "./visibility"; |
||||
import { useI18n } from 'vue-i18n'; |
||||
|
||||
export default { |
||||
name: 'ShowLinks', |
||||
props: { |
||||
item: { |
||||
type: Object, |
||||
required: true |
||||
}, |
||||
showStatus: { |
||||
type: Boolean, |
||||
required: false, |
||||
default: true |
||||
}, |
||||
editStatus: { |
||||
type: Boolean, |
||||
required: false, |
||||
default: false |
||||
} |
||||
}, |
||||
setup() { |
||||
const visibilityList = [ |
||||
{value: RESOURCE_LINK_PUBLISHED, label: 'Published'}, |
||||
{value: RESOURCE_LINK_DRAFT, label: 'Draft'}, |
||||
]; |
||||
const { t } = useI18n(); |
||||
|
||||
return { |
||||
visibilityList, |
||||
}; |
||||
defineProps({ |
||||
item: { |
||||
type: Object, |
||||
required: true, |
||||
default: () => ({ |
||||
resourceLinkListFromEntity: [], |
||||
}) |
||||
}, |
||||
showStatus: { |
||||
type: Boolean, |
||||
required: false, |
||||
default: true |
||||
}, |
||||
editStatus: { |
||||
type: Boolean, |
||||
required: false, |
||||
default: false |
||||
} |
||||
}; |
||||
}); |
||||
|
||||
const visibilityOptions = [ |
||||
{ value: RESOURCE_LINK_PUBLISHED, label: t('Published') }, |
||||
{ value: RESOURCE_LINK_DRAFT, label: t('Draft') }, |
||||
]; |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue