Project info (#701)

* Make DL styles global

* Show project info in sidebar on settings

src/lang/en-US/index.json

@@ -84,6 +84,10 @@
 	"settings_update_success": "Settings updated",
 	"settings_update_failed": "Updating settings failed",
 
+	"php_api": "PHP API",
+	"php_version": "PHP Version",
+	"max_upload_size": "Max Upload Size",
+
 	"title": "Title",
 
 	"revision_delta_created": "Created",

src/modules/files/routes/detail/components/file-info-drawer-detail.vue

@@ -185,33 +185,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-dl > div {
-	display: flex;
-	margin-bottom: 12px;
-}
-
-dt,
-dd {
-	display: inline-block;
-}
-
-dt {
-	margin-right: 8px;
-	font-weight: 600;
-}
-
-dd {
-	flex-grow: 1;
-	overflow: hidden;
-	color: var(--foreground-subdued);
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-dd a {
-	color: var(--primary-key);
-}
-
 .checksum {
 	dd {
 		font-family: var(--family-monospace);

src/modules/settings/routes/project/components/project-info-drawer-detail.vue

@@ -0,0 +1,32 @@
+<template>
+	<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<dl v-if="project">
+			<div>
+				<dt>{{ $t('php_api') }}</dt>
+				<dd>{{ project.server.general.php_api }}</dd>
+			</div>
+			<div>
+				<dt>{{ $t('php_version') }}</dt>
+				<dd>{{ project.server.general.php_version.split('-')[0] }}</dd>
+			</div>
+			<div>
+				<dt>{{ $t('max_upload_size') }}</dt>
+				<dd>{{ bytes(project.server.max_upload_size) }}</dd>
+			</div>
+		</dl>
+	</drawer-detail>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import useProjectsStore from '@/stores/projects';
+import bytes from 'bytes';
+
+export default defineComponent({
+	setup() {
+		const projectsStore = useProjectsStore();
+
+		return { project: projectsStore.currentProject, bytes };
+	},
+});
+</script>

src/modules/settings/routes/project/project.vue

@@ -21,9 +21,7 @@
 		</div>
 
 		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="format-markdown" v-html="marked($t('page_help_settings_project'))" />
-			</drawer-detail>
+			<project-info-drawer-detail />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
 				<div class="format-markdown" v-html="marked($t('page_help_settings_project'))" />
 			</drawer-detail>
@@ -37,9 +35,10 @@ import SettingsNavigation from '../../components/navigation/';
 import useCollection from '@/composables/use-collection';
 import useSettingsStore from '@/stores/settings';
 import marked from 'marked';
+import ProjectInfoDrawerDetail from './components/project-info-drawer-detail.vue';
 
 export default defineComponent({
-	components: { SettingsNavigation },
+	components: { SettingsNavigation, ProjectInfoDrawerDetail },
 	setup() {
 		const settingsStore = useSettingsStore();
 		const { fields } = useCollection(ref('directus_settings'));

src/modules/users/routes/detail/components/user-info-drawer-detail.vue

@@ -55,32 +55,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-dl > div {
-	display: flex;
-	margin-bottom: 12px;
-}
-
-dt,
-dd {
-	display: inline-block;
-}
-
-dt {
-	margin-right: 8px;
-	font-weight: 600;
-}
-
-dd {
-	flex-grow: 1;
-	overflow: hidden;
-	color: var(--foreground-subdued);
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-dd a {
-	color: var(--primary);
-}
-</style>

src/stores/projects/projects.ts

@@ -29,6 +29,7 @@ export const useProjectsStore = createStore({
 					color: project?.api?.project_color || null,
 					note: project?.api?.project_public_note || null,
 					sso: project?.api?.sso || [],
+					server: project?.server,
 				};
 			});
 		},

src/styles/_base.scss

@@ -108,3 +108,30 @@ strong {
 ::selection {
 	background: #e1f0fa;
 }
+
+dl > div {
+	display: flex;
+	margin-bottom: 12px;
+}
+
+dt,
+dd {
+	display: inline-block;
+}
+
+dt {
+	margin-right: 8px;
+	font-weight: 600;
+}
+
+dd {
+	flex-grow: 1;
+	overflow: hidden;
+	color: var(--foreground-subdued);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+dd a {
+	color: var(--primary-key);
+}