pkp/pkp-lib#7799 Add ActionPanel and improve UX of FileAttacher components

src/App.vue

@@ -61,6 +61,9 @@
 				<template slot="heading">
 					Components
 				</template>
+				<li>
+					<router-link to="/component/ActionPanel">ActionPanel</router-link>
+				</li>
 				<li><router-link to="/component/Badge">Badge</router-link></li>
 				<li><router-link to="/component/Button">Button</router-link></li>
 				<li><router-link to="/component/Chart">Chart</router-link></li>

src/components/ActionPanel/ActionPanel.vue

@@ -0,0 +1,66 @@
+<template>
+	<div class="actionPanel">
+		<div class="actionPanel__text">
+			<slot />
+		</div>
+		<div class="actionPanel__actions">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.actionPanel__text {
+	font-size: @font-sml;
+	line-height: @line-sml;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin: 0;
+		font-size: @font-base-larger;
+		line-height: @line-base;
+	}
+
+	p {
+		margin-top: 0.25rem;
+	}
+}
+
+.actionPanel__actions {
+	.pkpButton {
+		display: block;
+		width: 100%;
+
+		+ .pkpButton {
+			margin-top: 0.25rem;
+		}
+	}
+}
+
+@media (min-width: 767px) {
+	.actionPanel {
+		display: grid;
+		grid-template-columns: 1fr 15rem;
+	}
+
+	.actionPanel__text {
+		margin-right: 1rem;
+
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.actionPanel__actions {
+		justify-self: center;
+		align-self: center;
+		width: 100%;
+	}
+}
+</style>

src/components/Button/Button.vue

@@ -67,6 +67,7 @@ export default {
 	background: #fff;
 	border: @bg-border-light;
 	border-radius: @radius;
+	text-align: center;
 	font-size: @font-sml;
 	line-height: 2rem;
 	font-weight: @bold;

src/components/Composer/Composer.vue

@@ -217,6 +217,7 @@
 						:closeLabel="__('common.close')"
 						:name="fileAttacherModalId"
 						:title="attachFilesLabel"
+						@closed="resetFocusAfterAttachment"
 					>
 						<file-attacher
 							:attachers="attachers"
@@ -628,7 +629,8 @@ export default {
 		},
 
 		/**
-		 * The icon to match this document type
+		 * Get the icon to match this document type,
+		 * such as PDF, Word, spreadsheet, etc.
 		 *
 		 * @return {String}
 		 */
@@ -658,7 +660,7 @@ export default {
 		},
 
 		/**
-		 * Load message from a template
+		 * Load an email template and update the subject/body
 		 */
 		loadTemplate(key) {
 			this.isLoadingTemplate = true;
@@ -742,14 +744,21 @@ export default {
 		},
 
 		/**
-		 * Remove an attachment
+		 * Remove a file attachment
 		 */
 		removeAttachment(index) {
 			this.emitChange({
 				attachments: this.attachments.filter((attachment, i) => i !== index)
 			});
 		},
 
+		/**
+		 * Reset the focus when the attachment modal is closed
+		 */
+		resetFocusAfterAttachment() {
+			this.$refs.attachFiles.$el.focus();
+		},
+
 		/**
 		 * Search for email templates
 		 */

src/components/Container/AdminPage.vue

@@ -1,11 +1,13 @@
 <script type="text/javascript">
 import Page from '@/components/Container/Page.vue';
 import ThemeForm from '@/components/Form/context/ThemeForm.vue';
+import ActionPanel from '../ActionPanel/ActionPanel.vue';
 
 export default {
 	extends: Page,
 	name: 'AdminPage',
 	components: {
+		ActionPanel,
 		ThemeForm
 	}
 };
@@ -19,6 +21,19 @@ export default {
 		margin-bottom: 2rem;
 	}
 
+	.actionPanel {
+		margin-bottom: 1.5rem;
+		padding: 1rem;
+		border: @bg-border-light;
+		border-radius: @radius;
+		background: @lift;
+	}
+
+	// Account for <form> wrappers around some actions
+	.actionPanel__actions form + form {
+		margin-top: 0.25rem;
+	}
+
 	.app__contentPanel {
 		font-size: @font-sml;
 		line-height: 1.6em;
@@ -33,24 +48,6 @@ export default {
 			margin-top: 0;
 		}
 
-		h3 {
-			margin-bottom: 0.5rem;
-		}
-
-		ul {
-			margin: 0;
-			padding: 0;
-			list-style: none;
-		}
-
-		li {
-			padding: 0.25em 0;
-		}
-
-		ul + h2 {
-			margin-top: 1rem;
-		}
-
 		.app--admin__systemInfoGroup {
 			font-weight: @bold;
 		}

src/components/FileAttacher/FileAttacher.vue

@@ -1,40 +1,55 @@
 <template>
 	<div class="fileAttacher">
-		<panel v-if="!currentAttacher">
-			<panel-section v-for="(attacher, key) in attachers" :key="key">
-				<template slot="header">
-					<h2>{{ attacher.label }}</h2>
-					<p v-html="attacher.description" />
-				</template>
-				<pkp-button @click="setAttacher(attacher.component)">
+		<action-panel
+			v-for="(attacher, key) in attachers"
+			:key="key"
+			:id="'attacher' + key"
+		>
+			<h2>{{ attacher.label }}</h2>
+			<p v-html="attacher.description" />
+			<template slot="actions">
+				<pkp-button
+					:aria-describedby="'attacher' + key"
+					@click="setAttacher(attacher)"
+				>
 					{{ attacher.button }}
 				</pkp-button>
-			</panel-section>
-		</panel>
-		<component
-			v-else
-			:is="currentAttacher.component"
-			v-bind="currentAttacher"
-			ref="attacher"
-			@selected:files="attachFiles"
-			@cancel="cancel"
-		/>
+			</template>
+		</action-panel>
+		<modal
+			:closeLabel="__('common.close')"
+			name="attacher"
+			:title="currentAttacher ? currentAttacher.label : ''"
+			@closed="resetFocus"
+		>
+			<component
+				v-if="currentAttacher"
+				:is="currentAttacher.component"
+				v-bind="currentAttacher"
+				@selected:files="attachFiles"
+				@cancel="cancel"
+			/>
+		</modal>
 	</div>
 </template>
 
 <script>
+import ActionPanel from '../ActionPanel/ActionPanel.vue';
 import FileAttacherFileStage from './FileAttacherFileStage.vue';
 import FileAttacherLibrary from './FileAttacherLibrary.vue';
 import FileAttacherReviewFiles from './FileAttacherReviewFiles.vue';
 import FileAttacherUpload from './FileAttacherUpload.vue';
+import Modal from '../Modal/Modal.vue';
 
 export default {
 	name: 'FileAttacher',
 	components: {
+		ActionPanel,
 		FileAttacherFileStage,
 		FileAttacherLibrary,
 		FileAttacherReviewFiles,
-		FileAttacherUpload
+		FileAttacherUpload,
+		Modal
 	},
 	props: {
 		attachers: {
@@ -44,21 +59,28 @@ export default {
 	},
 	data() {
 		return {
-			currentAttacher: null
+			currentAttacher: null,
+			resetFocusTo: null
 		};
 	},
 	methods: {
 		attachFiles(files) {
 			this.$emit('attached:files', this.currentAttacher.component, files);
+			this.$modal.hide('attacher');
 		},
 		cancel() {
-			this.currentAttacher = null;
+			this.$modal.hide('attacher');
+			this.$nextTick(() => (this.currentAttacher = null));
 		},
-		setAttacher(component) {
-			this.currentAttacher = this.attachers.find(
-				attacher => attacher.component === component
-			);
-			this.setFocusToRef('attacher');
+		resetFocus() {
+			if (this.resetFocusTo) {
+				this.resetFocusTo.focus();
+			}
+		},
+		setAttacher(attacher) {
+			this.currentAttacher = attacher;
+			this.resetFocusTo = document.activeElement;
+			this.$modal.show('attacher');
 		}
 	}
 };
@@ -67,8 +89,20 @@ export default {
 <style lang="less">
 @import '../../styles/_import';
 
+.fileAttacher .actionPanel:not(:last-child) {
+	margin-bottom: 2rem;
+}
+
 .fileAttacher__footer {
 	display: flex;
 	padding-top: 1rem;
+
+	.pkpButton + .pkpButton {
+		margin-left: 0.25rem;
+	}
+}
+
+.fileAttacher__back {
+	margin-right: auto;
 }
 </style>

src/components/FileAttacher/FileAttacherFileStage.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="fileAttacherFileStage" aria-live="polite">
-		<list-panel :items="items" :isLoading="isLoading">
+		<list-panel :items="files" :isLoading="isLoading">
 			<pkp-header slot="header">
 				<h2>{{ currentFileStage.label }}</h2>
 				<template slot="actions">
@@ -37,10 +37,14 @@
 			</template>
 		</list-panel>
 		<div class="fileAttacher__footer">
-			<button class="fileAttacher__back -linkButton" @click="$emit('cancel')">
+			<pkp-button
+				class="fileAttacher__back"
+				:is-link="true"
+				@click="$emit('cancel')"
+			>
 				<icon icon="long-arrow-left" :inline="true" />
 				{{ backLabel }}
-			</button>
+			</pkp-button>
 			<pkp-button
 				:isDisabled="!selected.length"
 				@click="$emit('selected:files', selectedFiles)"
@@ -97,26 +101,26 @@ export default {
 		return {
 			currentFileStage: {},
 			isLoading: false,
-			items: [],
+			files: [],
 			selected: []
 		};
 	},
 	computed: {
 		selectedFiles() {
-			return this.items.filter(item => this.selected.includes(item.id));
+			return this.files.filter(item => this.selected.includes(item.id));
 		}
 	},
 	methods: {
 		getFiles() {
 			let self = this;
 			this.isLoading = true;
-			this.items = [];
+			this.files = [];
 			$.ajax({
 				url: this.submissionFilesApiUrl,
 				type: 'GET',
 				data: this.currentFileStage.queryParams,
 				success(r) {
-					self.items = r.items;
+					self.files = r.items;
 				},
 				error: this.ajaxErrorCallback,
 				complete(r) {