Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: simplify overview page - make banner fit in the actual header #2001

Merged
merged 6 commits into from
Oct 11, 2023
Merged

style: simplify overview page - make banner fit in the actual header #2001

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5dd2a7c
simplify overview page - make banner fit in the actual header
shawnyama Oct 11, 2023
6c06381
rm rule
shawnyama Oct 11, 2023
54293b4
useRoute to get pageType instead of prop
shawnyama Oct 11, 2023
535ed54
switch condition
shawnyama Oct 11, 2023
8db2209
Merge branch 'main' into overview-adjust
shawnyama Oct 11, 2023
a8e0af3
use binding
shawnyama Oct 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions packages/client/hmi-client/src/components/asset/tera-asset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@
</aside>
</header>
<template v-if="!hideIntro">
<header id="asset-top" ref="headerRef">
<header
id="asset-top"
:class="{ 'overview-banner': pageType === ProjectPages.OVERVIEW }"
ref="headerRef"
>
<section>
<!-- put the buttons above the title if there is an overline -->
<div v-if="overline" class="vertically-center">
Expand Down Expand Up @@ -46,8 +50,9 @@
<div class="header-buttons">
<slot name="bottom-header-buttons" />
</div>
<slot name="overview-summary" />
</section>
<aside class="spread-out">
<aside v-if="pageType !== ProjectPages.OVERVIEW" class="spread-out">
<Button
v-if="featureConfig.isPreview"
icon="pi pi-times"
Expand All @@ -65,8 +70,11 @@

<script setup lang="ts">
import { ref, computed, watch, PropType } from 'vue';
import { useRoute } from 'vue-router';
import Button from 'primevue/button';
import { FeatureConfig } from '@/types/common';
import { ProjectPages } from '@/types/Project';
import { AssetType } from '@/types/Types';

const props = defineProps({
name: {
Expand Down Expand Up @@ -114,6 +122,8 @@ const shrinkHeader = computed(() => {
);
});

const pageType = useRoute().params.pageType as ProjectPages | AssetType;

// Scroll margin for anchors are adjusted depending on the header (inserted in css)
const scrollMarginTopStyle = computed(() => (shrinkHeader.value ? '3.5rem' : '0.5rem'));
const stretchContentStyle = computed(() =>
Expand Down Expand Up @@ -209,6 +219,16 @@ header aside {
header.shrinked aside {
align-self: center;
}
header.overview-banner section {
width: 100%;
max-width: 100%;
}

.overview-banner {
background: url('@/assets/svg/terarium-icon-transparent.svg') no-repeat right 20% center,
linear-gradient(45deg, #8bd4af1a, #d5e8e5 100%) no-repeat;
background-size: 25%, 100%;
}

.nudge-down {
margin-top: 0.25rem;
Expand Down
198 changes: 88 additions & 110 deletions packages/client/hmi-client/src/page/project/components/tera-project-overview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,98 +1,86 @@
<template>
<main>
<tera-asset
:name="useProjects().activeProject.value?.name"
:authors="useProjects().activeProject.value?.username"
:is-naming-asset="isRenamingProject"
:publisher="`Last updated ${DateUtils.formatLong(
useProjects().activeProject.value?.timestamp
)}`"
class="overview-banner"
>
<template #name-input>
<InputText
v-if="isRenamingProject"
v-model="newProjectName"
ref="inputElement"
@keyup.enter="updateProjectName"
/>
</template>
<template #edit-buttons>
<Button
icon="pi pi-ellipsis-v"
class="p-button-icon-only p-button-text p-button-rounded"
@click="showProjectMenu"
/>
<Menu ref="projectMenu" :model="projectMenuItems" :popup="true" />
</template>
<section>
<section class="summary">
<!-- This div is so that child elements will automatically collapse margins -->
<div>
<!-- Description & Contributors -->
<section class="description">
<p>
{{ useProjects().activeProject.value?.description }}
</p>
</section>
</div>
</section>
<!-- Project summary KPIs -->
<section class="summary-KPI-bar">
<div
class="summary-KPI"
v-for="(assets, type) of useProjects().activeProject.value?.assets"
:key="type"
>
<span class="summary-KPI-number">{{ assets.length ?? 0 }}</span>
<span class="summary-KPI-label">{{ capitalize(type) }}</span>
</div>
</section>
<tera-asset
:name="useProjects().activeProject.value?.name"
:authors="useProjects().activeProject.value?.username"
:is-naming-asset="isRenamingProject"
:publisher="`Last updated ${DateUtils.formatLong(
useProjects().activeProject.value?.timestamp
)}`"
>
<template #name-input>
<InputText
v-if="isRenamingProject"
v-model="newProjectName"
ref="inputElement"
@keyup.enter="updateProjectName"
/>
</template>
<template #edit-buttons>
<Button
icon="pi pi-ellipsis-v"
class="p-button-icon-only p-button-text p-button-rounded"
@click="showProjectMenu"
/>
<Menu ref="projectMenu" :model="projectMenuItems" :popup="true" />
</template>
<template #overview-summary>
<!-- Description & Contributors -->
<p>
{{ useProjects().activeProject.value?.description }}
</p>
<!-- Project summary KPIs -->
<section class="summary-KPI-bar">
<div
class="summary-KPI"
v-for="(assets, type) of useProjects().activeProject.value?.assets"
:key="type"
>
<span class="summary-KPI-number">{{ assets.length ?? 0 }}</span>
<span class="summary-KPI-label">{{ capitalize(type) }}</span>
</div>
</section>
</tera-asset>
</template>
<section class="content-container">
<h5>Quick links</h5>
<!-- Quick link buttons go here -->
<section>
<div class="quick-links">
<Button
label="Upload resources"
size="large"
icon="pi pi-cloud-upload"
class="p-button p-button-secondary quick-link-button"
@click="isUploadResourcesModalVisible = true"
/>
<Button
label="New model"
size="large"
icon="pi pi-share-alt"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Models)"
/>
<Button
size="large"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Workflows)"
>
<vue-feather
class="p-button-icon-left"
type="git-merge"
size="1.25rem"
stroke="rgb(16, 24, 40)"
/>
<span class="p-button-label">New workflow</span>
</Button>
<Button size="large" class="p-button p-button-secondary quick-link-button">
<compare-models-icon class="icon" />
<span class="p-button-label">Compare models</span>
</Button>
<Button
label="New simulation"
size="large"
icon="pi pi-play"
class="p-button p-button-secondary quick-link-button"
<section class="quick-links">
<Button
label="Upload resources"
size="large"
icon="pi pi-cloud-upload"
class="p-button p-button-secondary quick-link-button"
@click="isUploadResourcesModalVisible = true"
/>
<Button
label="New model"
size="large"
icon="pi pi-share-alt"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Models)"
/>
<Button
size="large"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Workflows)"
>
<vue-feather
class="p-button-icon-left"
type="git-merge"
size="1.25rem"
stroke="rgb(16, 24, 40)"
/>
</div>
<span class="p-button-label">New workflow</span>
</Button>
<Button size="large" class="p-button p-button-secondary quick-link-button">
<compare-models-icon class="icon" />
<span class="p-button-label">Compare models</span>
</Button>
<Button
label="New simulation"
size="large"
icon="pi pi-play"
class="p-button p-button-secondary quick-link-button"
/>
</section>
<!-- Resources list table goes here -->
<section class="resource-list">
Expand Down Expand Up @@ -168,19 +156,17 @@
</template>
</DataTable>
</section>
<section class="drag-n-drop">
<tera-upload-resources-modal
:visible="isUploadResourcesModalVisible"
@close="isUploadResourcesModalVisible = false"
/>
</section>
<tera-upload-resources-modal
:visible="isUploadResourcesModalVisible"
@close="isUploadResourcesModalVisible = false"
/>
</section>
<tera-multi-select-modal
:is-visible="showMultiSelect"
:selected-resources="selectedResources"
:buttons="multiSelectButtons"
></tera-multi-select-modal>
</main>
/>
</tera-asset>
</template>

<script setup lang="ts">
Expand Down Expand Up @@ -364,13 +350,6 @@ a {
text-decoration: underline;
}

.overview-banner {
background: url('@/assets/svg/terarium-icon-transparent.svg') no-repeat right 20% center,
linear-gradient(45deg, #8bd4af1a, #d5e8e5 100%) no-repeat;
background-size: 25%, 100%;
height: auto;
}

.content-container {
overflow-y: auto;
padding: 1rem;
Expand All @@ -379,21 +358,20 @@ a {
flex-direction: column;
}

.description {
margin: 1rem;
}

.contributors {
flex-direction: row;
align-items: center;
gap: 0.75rem;
}

p,
.summary-KPI-bar {
color: var(--text-color-primary);
}

.summary-KPI-bar {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--border-radius);
Expand Down