Skip to content

Commit 13004f0

Browse files
taslangrahamtaslangraham
committed
pkp/pkp-lib#11576 update UI to match designs
1 parent 0bde1a9 commit 13004f0

10 files changed

+539
-311
lines changed

‎src/components/Icon/Icon.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ import UsefulTipsPrimary from './icons/UsefulTipsPrimary.vue';
122122
import User from './icons/User.vue';
123123
import View from './icons/View.vue';
124124
import Workflow from './icons/Workflow.vue';
125+
import Content from './icons/Content.vue';
125126
126127
const svgIcons = {
127128
Add,
@@ -240,6 +241,7 @@ const svgIcons = {
240241
View,
241242
Workflow,
242243
OrcidUnauthenticated,
244+
Content,
243245
};
244246
245247
const props = defineProps({

‎src/components/Icon/icons/Content.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<svg
3+
width="18"
4+
height="18"
5+
viewBox="0 0 18 18"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
d="M10.029 2.467H16.9042M10.029 4.5295H16.9042M10.029 6.592H16.9042M10.029 11.4048H16.9042M10.029 13.4672H16.9042M10.029 15.5297H16.9042M7.96874 16.219C7.96874 16.4013 7.89638 16.5761 7.76757 16.705C7.63875 16.834 7.46401 16.9066 7.28174 16.9067H1.78124C1.59897 16.9066 1.42423 16.834 1.29541 16.705C1.16659 16.5761 1.09424 16.4013 1.09424 16.219V10.7192C1.09424 10.537 1.16659 10.3622 1.29541 10.2332C1.42423 10.1042 1.59897 10.0317 1.78124 10.0315H7.28249C7.46476 10.0317 7.6395 10.1042 7.76832 10.2332C7.89713 10.3622 7.96949 10.537 7.96949 10.7192L7.96874 16.219ZM7.96874 7.28125C7.96874 7.46352 7.89638 7.63834 7.76757 7.7673C7.63875 7.89625 7.46401 7.9688 7.28174 7.969H1.78124C1.59897 7.9688 1.42423 7.89625 1.29541 7.7673C1.16659 7.63834 1.09424 7.46352 1.09424 7.28125V1.7815C1.09424 1.59923 1.16659 1.42441 1.29541 1.29545C1.42423 1.1665 1.59897 1.09395 1.78124 1.09375H7.28249C7.46476 1.09395 7.6395 1.1665 7.76832 1.29545C7.89713 1.42441 7.96949 1.59923 7.96949 1.7815L7.96874 7.28125Z"
11+
stroke="#006798"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
/>
15+
</svg>
16+
</template>

‎src/pages/userComments/UserCommentDetailModal.vue

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<SideModalBody>
3+
<template #pre-title>
4+
<div class="overflow-hidden text-ellipsis whitespace-nowrap">
5+
<span class="mr-1">{{ comment.id }}.</span>
6+
<span>{{ comment.publication.authorsStringShort }}</span>
7+
<span>;</span>
8+
<span>{{ comment.publication.fullTitle }}</span>
9+
</div>
10+
</template>
11+
<template #title>
12+
<span>{{ t('manager.userComment.viewDetailsCommentBy') }}</span>
13+
</template>
14+
15+
<template #description>
16+
{{ comment.userName }}
17+
</template>
18+
19+
<div class="min-w-fit p-4">
20+
<div class="flex w-full bg-secondary">
21+
<div
22+
class="flex w-full flex-col border-y border-e border-s border-light"
23+
>
24+
<div class="flex-grow">
25+
<div class="flex h-full">
26+
<div class="flex-grow border-e border-light">
27+
<div class="flex flex-col gap-y-5 bg-secondary p-5">
28+
<Panel>
29+
<PanelSection>
30+
<template #header>
31+
<span class="font-bold text-heading">
32+
{{ t('manager.userComment.commentPreview') }}
33+
</span>
34+
</template>
35+
</PanelSection>
36+
37+
<PanelSection>
38+
<div>
39+
<span class="text-sm-light text-secondary">
40+
{{ formatShortDateTime(comment.createdAt) }}
41+
</span>
42+
43+
<div
44+
v-strip-unsafe-html="comment.commentText"
45+
class="mt-3 text-lg-normal"
46+
></div>
47+
<div class="mt-4">
48+
<div class="text-base-normal font-bold leading-5">
49+
{{ comment.userName }}
50+
</div>
51+
<div
52+
v-if="comment.userOrcidDisplayValue"
53+
class="mb-1 flex items-center"
54+
>
55+
<Icon
56+
:icon="
57+
comment.isUserOrcidAuthenticated
58+
? 'Orcid'
59+
: 'OrcidUnauthenticated'
60+
"
61+
/>
62+
<a
63+
class="text-sm-light text-secondary"
64+
target="_blank"
65+
:href="comment.userOrcidDisplayValue"
66+
>
67+
{{ comment.userOrcidDisplayValue }}
68+
</a>
69+
</div>
70+
71+
<div
72+
v-if="comment.userAffiliation"
73+
class="text-base-normal"
74+
>
75+
{{ comment.userAffiliation }}
76+
</div>
77+
</div>
78+
</div>
79+
</PanelSection>
80+
</Panel>
81+
82+
<div class="mt-6">
83+
<UserCommentReportsTable
84+
:items="userCommentStore.currentCommentReports"
85+
/>
86+
</div>
87+
</div>
88+
</div>
89+
<div class="w-96 border-s border-light">
90+
<div class="border-b border-light p-8">
91+
<div class="text-lg-normal">
92+
<span v-if="comment.isApproved">
93+
{{
94+
t('manager.userComment.approved.note', {
95+
approvedBy: comment.approvedByUserName,
96+
approvedAt: formatShortDate(comment.approvedAt),
97+
})
98+
}}
99+
</span>
100+
<span v-else>
101+
{{ t('manager.userComment.approval.warning') }}
102+
</span>
103+
</div>
104+
</div>
105+
<div class="flex flex-col items-start space-y-4 p-4">
106+
<PkpButton
107+
:is-primary="!comment.isApproved"
108+
:is-disabled="comment.isApproved"
109+
@click="userCommentStore.commentToggleApproval(true)"
110+
>
111+
{{ t('manager.userComment.approveComment') }}
112+
</PkpButton>
113+
<PkpButton
114+
:is-warnable="true"
115+
@click="userCommentStore.commentDelete(comment)"
116+
>
117+
{{ t('manager.userComment.deleteComment') }}
118+
</PkpButton>
119+
120+
<PkpButton
121+
:is-disabled="!comment.isApproved"
122+
@click="userCommentStore.commentToggleApproval(false)"
123+
>
124+
{{ t('manager.userComment.hideComment') }}
125+
</PkpButton>
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
</SideModalBody>
134+
</template>
135+
136+
<script setup>
137+
import SideModalBody from '@/components/Modal/SideModalBody.vue';
138+
import Panel from '@/components/Panel/Panel.vue';
139+
import PanelSection from '@/components/Panel/PanelSection.vue';
140+
import PkpButton from '@/components/Button/Button.vue';
141+
import Icon from '@/components/Icon/Icon.vue';
142+
import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
143+
import {useLocalize} from '@/composables/useLocalize';
144+
import {useDate} from '@/composables/useDate';
145+
import UserCommentReportsTable from '@/pages/userComments/UserCommentReportsTable.vue';
146+
147+
const {formatShortDate, formatShortDateTime} = useDate();
148+
const {t} = useLocalize();
149+
150+
const props = defineProps({
151+
comment: {
152+
type: Object,
153+
required: true,
154+
},
155+
});
156+
157+
const userCommentStore = useUserCommentStore(props);
158+
</script>

‎src/pages/userComments/UserCommentReportDetail.vue

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/pages/userComments/UserCommentReportDetailModal.vue

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<template>
2+
<SideModalBody>
3+
<template #title>
4+
<span>{{ t('manager.userComment.viewReportDetailsBy') }}</span>
5+
</template>
6+
7+
<template #description>
8+
{{ report.userName }}
9+
</template>
10+
11+
<div class="min-w-fit p-4">
12+
<div class="flex w-full bg-secondary">
13+
<div
14+
class="flex w-full flex-col border-y border-e border-s border-light"
15+
>
16+
<div class="flex-grow">
17+
<div class="flex h-full">
18+
<div class="flex-grow border-e border-light">
19+
<div class="flex flex-col gap-y-5 bg-secondary p-5">
20+
<Panel>
21+
<PanelSection>
22+
<template #header>
23+
<span class="font-bold text-heading">
24+
{{ t('manager.userComment.reportPreview') }}
25+
</span>
26+
</template>
27+
</PanelSection>
28+
29+
<PanelSection>
30+
<div>
31+
<span class="text-sm-light text-secondary">
32+
{{ formatShortDateTime(report.createdAt) }}
33+
</span>
34+
35+
<div
36+
v-strip-unsafe-html="report.note"
37+
class="mt-3 text-lg-normal"
38+
></div>
39+
<div class="mt-4">
40+
<div class="text-base-normal font-bold leading-5">
41+
{{ report.userName }}
42+
</div>
43+
<div
44+
v-if="report.userOrcidDisplayValue"
45+
class="mb-1 flex items-center"
46+
>
47+
<Icon
48+
:icon="
49+
report.isUserOrcidAuthenticated
50+
? 'Orcid'
51+
: 'OrcidUnauthenticated'
52+
"
53+
/>
54+
<a
55+
class="text-sm-light text-secondary"
56+
target="_blank"
57+
:href="report.userOrcidDisplayValue"
58+
>
59+
{{ report.userOrcidDisplayValue }}
60+
</a>
61+
</div>
62+
63+
<div
64+
v-if="report.userAffiliation"
65+
class="text-base-normal"
66+
>
67+
{{ report.userAffiliation }}
68+
</div>
69+
</div>
70+
</div>
71+
</PanelSection>
72+
</Panel>
73+
</div>
74+
</div>
75+
<div class="w-96 border-s border-light">
76+
<div class="flex flex-col items-start space-y-4 p-4">
77+
<PkpButton
78+
:is-warnable="true"
79+
@click="userCommentStore.reportDelete(report)"
80+
>
81+
{{ t('manager.userComment.deleteReport') }}
82+
</PkpButton>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</SideModalBody>
91+
</template>
92+
93+
<script setup>
94+
import SideModalBody from '@/components/Modal/SideModalBody.vue';
95+
import {useDate} from '@/composables/useDate';
96+
import PanelSection from '@/components/Panel/PanelSection.vue';
97+
import Icon from '@/components/Icon/Icon.vue';
98+
import Panel from '@/components/Panel/Panel.vue';
99+
import PkpButton from '@/components/Button/Button.vue';
100+
import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
101+
102+
const {formatShortDateTime} = useDate();
103+
104+
defineProps({
105+
comment: {
106+
type: Object,
107+
required: true,
108+
},
109+
report: {
110+
type: Object,
111+
required: true,
112+
},
113+
});
114+
115+
116+
117+
const userCommentStore = useUserCommentStore();
118+
</script>

0 commit comments

Comments
 (0)