Merge pull request #3236 from nextcloud/enh/related-resources-design

Update design of related resources panel

l10n/messages.pot

@@ -17,6 +17,9 @@ msgstr ""
 msgid "Animals & Nature"
 msgstr ""
 
+msgid "Anything shared with the same group of people will show up here"
+msgstr ""
+
 msgid "Avatar of {displayName}"
 msgstr ""
 

src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue

@@ -47,11 +47,13 @@ export default {
 	<div v-if="appEnabled && isVisible" class="related-resources">
 		<div class="related-resources__header">
 			<h5>{{ headerTranslated }}</h5>
+			<p>{{ descriptionTranslated }}</p>
 		</div>
 
 		<NcResource v-for="resource in resources"
 			:key="resource.itemId"
 			class="related-resources__entry"
+			:icon="resource.icon"
 			:title="resource.title"
 			:subtitle="resource.subtitle"
 			:tooltip="resource.tooltip"
@@ -63,6 +65,7 @@ export default {
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
+import { t } from '../../l10n.js'
 
 import NcResource from './NcResource.vue'
 
@@ -107,6 +110,7 @@ export default {
 		return {
 			appEnabled: OC?.appswebroots?.related_resources !== undefined,
 			headerTranslated: t('Related resources'),
+			descriptionTranslated: t('Anything shared with the same group of people will show up here'),
 			loading: false,
 			resources: [],
 		}
@@ -187,13 +191,15 @@ export default {
 <style lang="scss" scoped>
 .related-resources {
 	&__header {
-		display: flex;
-		height: 44px;
-		align-items: center;
-	}
+		margin: 0 0 10px 46px;
+
+		h5 {
+			font-weight: bold;
+		}
 
-	&__entry {
-		padding-left: 36px;
+		p {
+			color: var(--color-text-maxcontrast);
+		}
 	}
 }
 </style>

src/components/NcRelatedResourcesPanel/NcResource.vue

@@ -22,33 +22,29 @@
 
 <template>
 	<li class="resource">
-		<div v-tooltip="tooltip" class="resource__desc">
-			<h5>{{ title }}</h5>
-			<p v-if="subtitle">
-				{{ subtitle }}
-			</p>
-		</div>
-		<NcButton :aria-label="labelTranslated"
+		<NcButton class="resource__button"
+			:aria-label="labelTranslated"
 			type="tertiary"
 			:href="url">
 			<template #icon>
-				<ArrowRight :size="20" />
+				<div class="resource__icon">
+					<img :src="icon">
+				</div>
 			</template>
+			{{ title }}
 		</NcButton>
 	</li>
 </template>
 
 <script>
 import NcButton from '../NcButton/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
-
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import { t } from '../../l10n.js'
 
 export default {
 	name: 'NcResource',
 
 	components: {
-		ArrowRight,
 		NcButton,
 	},
 
@@ -57,6 +53,10 @@ export default {
 	},
 
 	props: {
+		icon: {
+			type: String,
+			required: true,
+		},
 		title: {
 			type: String,
 			required: true,
@@ -89,22 +89,31 @@ export default {
 	align-items: center;
 	height: 44px;
 
-	&__desc {
-		padding: 8px;
-		line-height: 1.2em;
-		position: relative;
-		flex: 1 1;
-		min-width: 0;
+	// Override default NcButton styles
+	&__button {
+		width: 100%;
+		justify-content: flex-start;
+		padding: 0;
 
-		h5 {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			max-width: inherit;
+		&:deep(.button-vue__text) {
+			font-weight: normal;
+			margin-left: 2px;
 		}
+	}
+
+	&__icon {
+		width: 32px;
+		height: 32px;
+		background-color: var(--color-text-maxcontrast);
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 
-		p {
-			color: var(--color-text-maxcontrast);
+		img {
+			width: 16px;
+			height: 16px;
+			filter: var(--background-invert-if-dark);
 		}
 	}
 }

styleguide/global.requires.js

@@ -88,6 +88,20 @@ window.OC = {
 			return aa.length - bb.length
 		},
 	},
+	coreApps: [
+		'',
+		'admin',
+		'log',
+		'core/search',
+		'core',
+		'3rdparty',
+	],
+	appswebroots: {
+		calendar: '/apps/calendar',
+		deck: '/apps/deck',
+		files: '/apps/files',
+		spreed: '/apps/spreed',
+	},
 	webroot: '',
 }
 window.OCA = {}

tests/OC.js

@@ -16,5 +16,21 @@ export default {
 		naturalSortCompare(a, b) {
 			return 0
 		}
-	}
+	},
+
+	coreApps: [
+		'',
+		'admin',
+		'log',
+		'core/search',
+		'core',
+		'3rdparty',
+	],
+
+	appswebroots: {
+		calendar: '/apps/calendar',
+		deck: '/apps/deck',
+		files: '/apps/files',
+		spreed: '/apps/spreed',
+	},
 }