4379 feat update resources panel layout with new designs (#4421)

Co-authored-by: Brittany Kondo <[email protected]> Co-authored-by: Brittany Kondo <[email protected]> Co-authored-by: Yohann Paris <[email protected]>
DARPA-ASKEM · Aug 12, 2024 · f1ced2f · f1ced2f
1 parent 3ad7cb2
commit f1ced2f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 49 deletions.
diff --git a/packages/client/hmi-client/src/assets/css/style.scss b/packages/client/hmi-client/src/assets/css/style.scss
@@ -1,7 +1,7 @@
 /** CSS Layers order
  * https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
  */
-@layer vendor, reset, theme, terarium, layout;
+@layer vendor, reset, theme, terarium;
 
 /* Vendor */
 @import '@jupyterlab/application/style/index.css' layer(vendor);
@@ -23,7 +23,7 @@
 /* Terarium PrimeVue Theme */
 @import '@assets/css/theme/theme.scss' layer(terarium);
 
-@layer layout {
+@layer terarium {
 	:root {
 		--navbar-outer-height: 51px;
 		-webkit-font-smoothing: antialiased;

diff --git a/packages/client/hmi-client/src/components/project/tera-resource-sidebar.vue b/packages/client/hmi-client/src/components/project/tera-resource-sidebar.vue
@@ -1,21 +1,24 @@
 <template>
 	<nav>
 		<header>
-			<div class="p-inputgroup">
-				<InputText
-					v-model="searchAsset"
-					placeholder="Filter resources"
-					id="searchAsset"
-					@focus="inputFocused = true"
-					@blur="inputFocused = false"
-				/>
-				<span v-if="searchAsset || inputFocused" class="clear-icon" @click="clearSearch()">
-					<i class="pi pi-times"></i>
-				</span>
-				<span class="p-inputgroup-addon">
-					<i class="pi pi-filter"></i>
-				</span>
-			</div>
+			<InputText
+				v-model="searchAsset"
+				class="resource-panel-search"
+				placeholder="Filter"
+				id="searchAsset"
+				@focus="inputFocused = true"
+				@blur="inputFocused = false"
+			/>
+			<Button
+				class="upload-resources-button"
+				size="small"
+				label="Upload"
+				@click="isUploadResourcesModalVisible = true"
+			/>
+			<tera-upload-resources-modal
+				:visible="isUploadResourcesModalVisible"
+				@close="isUploadResourcesModalVisible = false"
+			/>
 		</header>
 		<Button
 			class="asset-button"
@@ -48,7 +51,8 @@
 					<div class="flex justify-space-between w-full">
 						<div class="flex align-items-center w-full">
 							<template v-if="type === AssetType.Document">Documents</template>
-							<template v-else>{{ capitalize(type) }}</template>
+							<template v-else-if="type === AssetType.Code">Code Files</template>
+							<template v-else>{{ capitalize(type) }}s</template>
 							<aside>({{ assetItems.length }})</aside>
 						</div>
 						<!-- New asset buttons for some types -->
@@ -156,6 +160,7 @@ import InputText from 'primevue/inputtext';
 import Skeleton from 'primevue/skeleton';
 import { computed, ref } from 'vue';
 import { getElapsedTimeText } from '@/utils/date';
+import TeraUploadResourcesModal from '@/components/project/tera-upload-resources-modal.vue';
 
 defineProps<{
 	pageType: ProjectPages | AssetType;
@@ -172,6 +177,7 @@ const draggedAsset = ref<AssetRoute | null>(null);
 const assetToDelete = ref<AssetItem | null>(null);
 const searchAsset = ref<string>('');
 const inputFocused = ref(false);
+const isUploadResourcesModalVisible = ref(false);
 
 const assetItemsMap = computed(() => generateProjectAssetsMap(searchAsset.value));
 const assetItemsKeysNotEmpty = computed(() => getNonNullSetOfVisibleItems(assetItemsMap.value));
@@ -182,10 +188,6 @@ const activeAccordionTabs = ref(
 	)
 );
 
-function clearSearch() {
-	searchAsset.value = '';
-}
-
 function removeAsset() {
 	if (assetToDelete.value) {
 		const { assetId, pageType } = assetToDelete.value;
@@ -326,6 +328,7 @@ header {
 	text-align: left;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	font-weight: var(--font-weight);
 }
 
 .loading-spinner {
@@ -350,6 +353,7 @@ p.remove {
 
 .resource-panel-search {
 	width: 100%;
+	margin-left: var(--gap-2);
 }
 
 :deep(.p-button-icon-left.icon) {
@@ -362,4 +366,13 @@ p.remove {
 	align-items: center;
 	row-gap: 0.5rem;
 }
+
+.upload-resources-button {
+	margin: 0 var(--gap-2);
+	justify-content: center;
+
+	& :deep(.p-button-label) {
+		flex-grow: 0;
+	}
+}
 </style>
diff --git a/packages/client/hmi-client/src/page/tera-project.vue b/packages/client/hmi-client/src/page/tera-project.vue
@@ -16,19 +16,6 @@
 					@open-new-asset="openNewAsset"
 				/>
 			</template>
-			<template v-slot:footerButtons>
-				<Button
-					class="upload-resources-button"
-					size="small"
-					icon="pi pi-upload"
-					label="Upload resources"
-					@click="isUploadResourcesModalVisible = true"
-				/>
-				<tera-upload-resources-modal
-					:visible="isUploadResourcesModalVisible"
-					@close="isUploadResourcesModalVisible = false"
-				/>
-			</template>
 		</tera-slider-panel>
 		<section class="project-page">
 			<tera-model v-if="pageType === AssetType.Model" :asset-id="assetId" />
@@ -78,11 +65,9 @@ import { AssetType } from '@/types/Types';
 import { AssetRoute } from '@/types/common';
 import { logger } from '@/utils/logger';
 import { isEqual } from 'lodash';
-import Button from 'primevue/button';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
-import TeraUploadResourcesModal from '@/components/project/tera-upload-resources-modal.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -91,7 +76,6 @@ const isResourcesSliderOpen = ref(true);
 const isNotesSliderOpen = ref(false);
 const showSaveAssetModal = ref(false);
 const assetTypeToCreate = ref<AssetType>(AssetType.Model);
-const isUploadResourcesModalVisible = ref(false);
 
 const pageType = computed(() => (route.params.pageType as ProjectPages | AssetType) ?? '');
 const assetId = computed(() => (route.params.assetId as string) ?? '');
@@ -142,6 +126,7 @@ onMounted(() => {
 .resource-panel {
 	z-index: 1000;
 	isolation: isolate;
+	outline-color: var(--surface-border);
 }
 
 .tab-group {
@@ -158,17 +143,6 @@ section {
 	overflow-y: hidden;
 }
 
-.upload-resources-button {
-	margin: 0 1rem;
-	flex-grow: 1;
-	min-width: 140px;
-	justify-content: center;
-
-	& :deep(.p-button-label) {
-		flex-grow: 0;
-	}
-}
-
 .p-tabmenu:deep(.p-tabmenuitem) {
 	display: inline;
 	max-width: 15rem;