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

feat: operator image carousel #2319

Merged
merged 8 commits into from
Nov 29, 2023
Merged

feat: operator image carousel #2319

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
25fc074
volar and types/react conflict
Nov 27, 2023
b321813
use gallery primevue component
shawnyama Nov 29, 2023
4f40b2d
adjust galleria props and rm tsconfig rule as it stopped working
shawnyama Nov 29, 2023
11fcd36
Merge branch 'main' into op-img-carousel
shawnyama Nov 29, 2023
555870a
css adjust
shawnyama Nov 29, 2023
3c4a601
Merge branch 'main' into op-img-carousel
shawnyama Nov 29, 2023
590b78a
base64 works
shawnyama Nov 29, 2023
ed484a8
rm line
shawnyama Nov 29, 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
2 changes: 1 addition & 1 deletion packages/client/hmi-client/src/assets/css/theme/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,7 @@ $galleriaIndicatorBorderRadius: 50% !default;
$galleriaIndicatorWidth: 1.25rem !default;
$galleriaIndicatorHeight: 1.25rem !default;
$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, .5) !default;
$galleriaIndicatorBgOnItem: rgba(255, 255, 255, .4) !default;
$galleriaIndicatorBgOnItem: $primaryColor !default;
$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, .6) !default;

$galleriaThumbnailContainerBg: rgba(0, 0, 0, .9) !default;
Expand Down
4 changes: 2 additions & 2 deletions ...ages/client/hmi-client/src/assets/css/theme/designer/components/multimedia/_galleria.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@
border-radius: $galleriaIndicatorBorderRadius;

&:hover {
background: $galleriaIndicatorHoverBg;
background-color: var(--surface-highlight);
}
}

&.p-highlight {
button {
background: $highlightBg;
background: $galleriaIndicatorBgOnItem;
color: $highlightTextColor;
}
}
Expand Down
25 changes: 0 additions & 25 deletions packages/client/hmi-client/src/assets/css/theme/extensions/_galleria.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,2 @@
.p-galleria {
.p-galleria-indicators {
padding: $galleriaIndicatorsPadding;

.p-galleria-indicator {
&.p-highlight {
button {
background: $accentColor;
color: $accentTextColor;
}
}
}
}

&.p-galleria-indicator-onitem {
.p-galleria-indicators {
.p-galleria-indicator {
&.p-highlight {
button {
background: rgba($accentColor, .68);
color: $accentTextColor;
}
}
}
}
}
}
49 changes: 49 additions & 0 deletions packages/client/hmi-client/src/workflow/operator/tera-operator-image-carousel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<template>
<Galleria v-if="!isEmpty(images)" :value="images" :showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item" alt="Alt" />
</template>
</Galleria>
<div v-else class="no-image">
<i class="pi pi-image" />
</div>
</template>

<script setup lang="ts">
import { isEmpty } from 'lodash';
import { PropType } from 'vue';
import Galleria from 'primevue/galleria';

defineProps({
images: {
type: Array as PropType<string[]>,
default: () => []
}
});
shawnyama marked this conversation as resolved.
Show resolved Hide resolved
</script>

<style scoped>
.p-galleria:deep(.p-galleria-indicators .p-galleria-indicator button) {
width: 0.5rem;
height: 0.5rem;
}

.p-galleria:deep(.p-galleria-item-container),
.no-image {
height: 240px;
max-height: 240px;
shawnyama marked this conversation as resolved.
Show resolved Hide resolved
border: 1px solid #e7e9ee;
border-radius: 0.5rem;
shawnyama marked this conversation as resolved.
Show resolved Hide resolved
background-color: var(--surface-ground);
}

i {
margin: auto;
color: rgb(226, 227, 229);
font-size: 3rem;
}

.p-galleria:deep(img) {
background-color: var(--surface-section);
}
</style>
11 changes: 10 additions & 1 deletion packages/client/hmi-client/src/workflow/ops/model-from-code/tera-model-from-code-node.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
<template>
<main>model from code node</main>
<tera-operator-image-carousel :images="images" />
YohannParis marked this conversation as resolved.
Show resolved Hide resolved
</template>

<script setup lang="ts"></script>
<script setup lang="ts">
import TeraOperatorImageCarousel from '@/workflow/operator/tera-operator-image-carousel.vue';

const images = [
new URL('@/assets/svg/terarium-icon.svg', import.meta.url).href,
new URL('@/assets/svg/uncharted-logo-official.svg', import.meta.url).href,
new URL('@/assets/svg/terarium-logo.svg', import.meta.url).href
];
</script>
5 changes: 4 additions & 1 deletion packages/client/hmi-client/src/workflow/tera-operator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,10 @@ main > ul:empty {
gap: 0.25rem;
}

:deep(li:hover) {
/* TODO: Now that it's supported this would be a great place to use css nesting.
The formatter doesn't recognize it yet though, maybe there could be a way to tweak that?
*/
YohannParis marked this conversation as resolved.
Show resolved Hide resolved
:deep(main > ul > li:hover) {
background-color: var(--surface-highlight);
}

Expand Down