From 10d72742f548d4e9ed187b1960dd3d5adab6a0e6 Mon Sep 17 00:00:00 2001
From: Balazs Nadasdi <yitsushi@gmail.com>
Date: Sun, 5 Apr 2020 10:55:51 +0200
Subject: [PATCH] Ability to set header image for a Page (#6210)

* Ability to set header image for a Page

 - Add header image to Page
 - Show it on Page view
 - Show correctly it on Page list view
 - On the Page list view, pages have a light border
   to make it easier to see an image belongs to a page

* Maybe it looks better

* Use <img> instead if <x-image>

* src -> :src; set width

* Update page.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 src/client/components/page-preview.vue       | 6 +++---
 src/client/pages/page-editor/page-editor.vue | 5 ++---
 src/client/pages/page.vue                    | 5 ++++-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue
index 5ba226c48..8c41a070b 100644
--- a/src/client/components/page-preview.vue
+++ b/src/client/components/page-preview.vue
@@ -35,6 +35,7 @@ export default Vue.extend({
 	border: solid var(--lineWidth) var(--urlPreviewBorder);
 	border-radius: 4px;
 	overflow: hidden;
+	border: 1px solid var(--divider);
 
 	&:hover {
 		text-decoration: none;
@@ -42,9 +43,8 @@ export default Vue.extend({
 	}
 
 	> .thumbnail {
-		position: absolute;
-		width: 100px;
-		height: 100%;
+		width: 100%;
+		height: 200px;
 		background-position: center;
 		background-size: cover;
 		display: flex;
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index 6144b0bd9..04117b501 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -102,6 +102,7 @@ import { blockDefs } from '../../scripts/aiscript/index';
 import { ASTypeChecker } from '../../scripts/aiscript/type-checker';
 import { url } from '../../config';
 import { collectPageVars } from '../../scripts/collect-page-vars';
+import { selectDriveFile } from '../../scripts/select-drive-file';
 
 export default Vue.extend({
 	i18n,
@@ -405,9 +406,7 @@ export default Vue.extend({
 		},
 
 		setEyeCatchingImage() {
-			this.$chooseDriveFile({
-				multiple: false
-			}).then(file => {
+			selectDriveFile(this.$root, false).then(file => {
 				this.eyeCatchingImageId = file.id;
 			});
 		},
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index d55596ae7..0f7108a5d 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -5,6 +5,7 @@
 
 	<div class="_card" v-if="page" :key="page.id">
 		<div class="_title">{{ page.title }}</div>
+		<img class="header" :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId" />
 		<div class="_content">
 			<x-page :page="page"/>
 		</div>
@@ -115,6 +116,8 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .xcukqgmh {
-
+	> ._card > .header {
+		max-width: 100%;
+	}
 }
 </style>