Skip to content

Commit 7459371

Browse files
taslangrahamtaslangraham
committed
pkp/pkp-lib#11327 Code cleanup and refactoring
1 parent a758102 commit 7459371

File tree

16 files changed

+438
-255
lines changed

16 files changed

+438
-255
lines changed

‎src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue‎

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

‎src/frontend/components/PkpButton/PkpButton.vue‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,12 @@ const props = defineProps({
1313
type: Boolean,
1414
default: false,
1515
},
16-
/** Use when this button represents an action such as delete, go back, revert or cancel. */
17-
isWarnable: Boolean,
1816
});
1917
2018
const buttonClass = computed(() => {
2119
return [
2220
'pkpButton',
2321
props.isSecondary ? 'pkpButton--secondary' : 'pkpButton--primary',
24-
props.isWarnable ? 'pkpButton--warnable' : '',
2522
];
2623
});
2724
</script>
@@ -76,17 +73,4 @@ const buttonClass = computed(() => {
7673
border-color: var(--pkp-text-color-disabled);
7774
color: var(--pkp-text-color-disabled);
7875
}
79-
80-
.pkpButton--warnable {
81-
color: var(--pkp-color-negative);
82-
border-color: var(--pkp-border-color-light);
83-
background-color: var(--pkp-background-color-secondary);
84-
}
85-
86-
.pkpButton--warnable:disabled {
87-
color: var(--pkp-text-color-disabled);
88-
}
89-
.pkpButton--warnable:hover {
90-
background-color: var(--pkp-background-color-secondary);
91-
}
9276
</style>

‎src/frontend/components/PkpIcon/PkpIcon.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ import MoreOptions from './icons/MoreOptions.vue';
55
import Error from './icons/Error.vue';
66
import Help from './icons/Help.vue';
77
import User from './icons/User.vue';
8+
import Orcid from '@/frontend/components/PkpIcon/icons/Orcid.vue';
9+
import OrcidUnauthenticated from '@/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue';
810
const svgIcons = {
911
Cancel,
1012
MoreOptions,
1113
Error,
1214
Help,
1315
User,
16+
Orcid,
17+
OrcidUnauthenticated,
1418
};
1519
1620
const props = defineProps({

‎src/frontend/components/PkpIcon/icons/Orcid.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<g clip-path="url(#clip0_11_315)">
4+
<path
5+
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
6+
fill="#A6CE39"
7+
/>
8+
<path
9+
d="M8.10938 17.4375H6.65625V7.40625H8.10938V17.4375ZM10.2188 7.40625H14.1094C17.8125 7.40625 19.4531 10.0781 19.4531 12.4219C19.4531 15 17.4375 17.4375 14.1094 17.4375H10.1719L10.2188 7.40625ZM11.6719 16.1719H13.9688C17.25 16.1719 18 13.6875 18 12.4688C18 10.4531 16.7344 8.76562 13.9219 8.76562H11.7188L11.6719 16.1719ZM8.34375 5.34375C8.34375 5.85938 7.92188 6.28125 7.40625 6.28125C6.89062 6.28125 6.46875 5.85938 6.46875 5.34375C6.46875 5.09511 6.56752 4.85665 6.74334 4.68084C6.91915 4.50502 7.15761 4.40625 7.40625 4.40625C7.92188 4.40625 8.34375 4.82812 8.34375 5.34375Z"
10+
fill="white"
11+
/>
12+
</g>
13+
<defs>
14+
<clipPath id="clip0_11_315">
15+
<rect width="24" height="24" fill="white" />
16+
</clipPath>
17+
</defs>
18+
</svg>
19+
</template>

‎src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<svg
3+
viewBox="0 0 32 32"
4+
fill="none"
5+
xmlns="http://www.w3.org/2000/svg"
6+
class="mr-2 inline-block w-6 align-middle"
7+
>
8+
<path
9+
fill-rule="evenodd"
10+
clip-rule="evenodd"
11+
d="M29.474 16c0 7.442-6.032 13.474-13.474 13.474S2.526 23.442 2.526 16 8.558 2.526 16 2.526 29.474 8.558 29.474 16Z"
12+
fill="#fff"
13+
/>
14+
<path
15+
fill-rule="evenodd"
16+
clip-rule="evenodd"
17+
d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16ZM16 29.474c7.442 0 13.474-6.032 13.474-13.474S23.442 2.526 16 2.526 2.526 8.558 2.526 16 8.558 29.474 16 29.474Z"
18+
fill="#7FAA26"
19+
/>
20+
<path
21+
fill-rule="evenodd"
22+
clip-rule="evenodd"
23+
d="M18.22 10.973h-4.547v11.6h4.569c3.8 0 6.133-2.82 6.133-5.8 0-1.365-.469-2.815-1.478-3.925-1.013-1.115-2.557-1.875-4.676-1.875Zm-.177 9.732h-2.347v-7.864h2.264c1.521 0 2.603.46 3.304 1.167.703.709 1.046 1.688 1.046 2.765 0 .654-.2 1.641-.83 2.46-.621.808-1.677 1.473-3.437 1.473Zm-.083-8.073c3.13 0 4.558 1.898 4.558 4.141 0-2.243-1.429-4.141-4.558-4.141h-2.472 2.472Zm6.205 4.017.001.124c0 2.869-2.242 5.591-5.924 5.591h-4.36V11.182v11.182h4.36c3.682 0 5.924-2.722 5.924-5.591l-.001-.124ZM9.5 11.005v11.588h2.024V11.005H9.5Zm1.815.208v11.172-11.172H9.71h1.606ZM10.512 10.15c.7 0 1.262-.575 1.262-1.263 0-.687-.561-1.262-1.262-1.262-.7 0-1.262.563-1.262 1.262 0 .688.561 1.262 1.262 1.262Zm.614-.408a1.044 1.044 0 0 0 0 0Z"
24+
fill="#7FAA26"
25+
/>
26+
</svg>
27+
</template>

‎src/frontend/components/PkpModal/PkpDialog.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@ import {
6767
DialogTitle,
6868
} from 'reka-ui';
6969
import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
70+
import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
7071
71-
import {useLocalize} from '@/composables/useLocalize';
72-
const {t} = useLocalize();
72+
const {t} = usePkpLocalize();
7373
7474
const props = defineProps({
7575
/** Used only internally, don't pass this prop via openDialog */

‎src/frontend/components/PkpModal/PkpDialogBody.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
:element="action.element || 'button'"
2020
:href="action.href || null"
2121
:is-primary="action.isPrimary || null"
22-
:is-warnable="action.isWarnable || null"
22+
:is-secondary="action.isSecondary || null"
2323
:is-disabled="isLoading"
2424
@click="action.callback ? fireCallback(action.callback) : null"
2525
>

‎src/frontend/components/PkpModal/PkpModalBody.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<div class="pkpModalBody__closeWrapper">
4242
<DialogClose
4343
ref="closeModalButton"
44-
type="button"
44+
as="button"
4545
class="pkpModalBody__close"
4646
>
4747
<span class="pkpModalBody__srOnly">
@@ -78,8 +78,8 @@ import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
7878
import {focusFirstHeading} from '@/components/Modal/modalHelpers';
7979
8080
const containerId = useId();
81-
import {useLocalize} from '@/composables/useLocalize';
82-
const {t} = useLocalize();
81+
import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
82+
const {t} = usePkpLocalize();
8383
const closeModal = inject('closeModal');
8484
const closeModalButton = inject('closeModalButton');
8585
/* Initial focus */
@@ -230,6 +230,7 @@ function handleAutoFocus(event) {
230230
position: relative;
231231
outline: none;
232232
background-color: var(--pkp-background-color-secondary);
233+
cursor: pointer;
233234
}
234235
235236
.pkpModalBody__close:hover {

‎src/frontend/components/PkpTextarea/PkpTextarea.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
22
<div class="pkpTextarea">
3-
<Label class="pkpTextarea__label" :for="textareaId">
3+
<Label
4+
class="pkpTextarea__label"
5+
:class="{'-screenReader': isLabelSrOnly}"
6+
:for="textareaId"
7+
>
48
{{ props.label }}
59
</Label>
610
<textarea
@@ -35,6 +39,11 @@ const props = defineProps({
3539
type: Boolean,
3640
default: false,
3741
},
42+
// Whether the label should be visually hidden but still accessible to screen readers
43+
isLabelSrOnly: {
44+
type: Boolean,
45+
default: false,
46+
},
3847
});
3948
4049
defineEmits(['update:modelValue']);

‎src/frontend/components/PkpUserComment/PkpScrollToComments.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div>
3+
<a
4+
id="scrollToComments"
5+
style="cursor: pointer"
6+
@click.prevent="scrollToComments"
7+
>
8+
{{ t('userComment.allComments', {commentCount: allCommentsCount}) }}
9+
</a>
10+
<div style="margin-top: 1.5rem">
11+
<a
12+
v-if="!currentUser"
13+
class="pkpScrollToComments__login"
14+
:href="loginUrl"
15+
>
16+
{{ t('userComment.login') }}
17+
</a>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script setup>
23+
import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
24+
25+
const {t} = usePkpLocalize();
26+
const currentUser = pkp.currentUser;
27+
28+
defineProps({
29+
/** The total number of approved comments across all publication versions */
30+
allCommentsCount: {
31+
type: Number,
32+
required: true,
33+
},
34+
/** The URL to the login page */
35+
loginUrl: {
36+
type: String,
37+
required: true,
38+
},
39+
});
40+
41+
const scrollToComments = () => {
42+
// Element with ID 'pkpUserCommentsContainer' is defined in the pkpUserComment component.
43+
const commentsContainer = document.getElementById('pkpUserCommentsContainer');
44+
if (commentsContainer) {
45+
commentsContainer.scrollIntoView({behavior: 'smooth'});
46+
}
47+
};
48+
</script>
49+
50+
<style>
51+
.pkpScrollToComments__login {
52+
display: inline-flex;
53+
align-items: center;
54+
justify-content: center;
55+
padding: var(--pkp-spacing-2) var(--pkp-spacing-4);
56+
font: var(--pkp-font-base-bold);
57+
border-radius: var(--pkp-radius);
58+
cursor: pointer;
59+
border: 1px solid var(--pkp-color-transparent);
60+
gap: var(--pkp-spacing-2);
61+
background-color: var(--pkp-color-primary);
62+
color: var(--pkp-text-color-on-dark);
63+
text-decoration: none;
64+
}
65+
66+
.pkpScrollToComments__login:hover {
67+
background-color: var(--pkp-color-hover);
68+
color: var(--pkp-text-color-on-dark);
69+
}
70+
</style>

0 commit comments

Comments
 (0)