PointTrackApp / src /components /EnrichedSection.vue
2nzi's picture
first commit
b4f9490 verified
<template>
<div class="enriched-section">
<div class="enriched-header">
<div class="view-navigation">
<button
class="nav-button"
@click="previousView"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</button>
<span class="view-indicator">
{{ currentViewIndex + 1 }} / {{ views.length }}
</span>
<button
class="nav-button"
@click="nextView"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg>
</button>
</div>
</div>
<div class="enriched-content">
<transition :name="transitionName" mode="out-in">
<component
:is="currentView.component"
:key="currentViewIndex"
class="view-content"
/>
</transition>
</div>
</div>
</template>
<script>
import LabelingView from './LabelingView.vue'
import EmptyView from './EmptyView.vue'
import ShortcutsView from './ShortcutsView.vue'
export default {
name: 'EnrichedSection',
components: {
LabelingView,
EmptyView,
ShortcutsView
},
data() {
return {
currentViewIndex: 0,
transitionName: 'slide-right',
views: [
{
name: 'Labeling',
component: 'LabelingView'
},
{
name: 'Export',
component: 'EmptyView'
},
{
name: 'Shortcuts',
component: 'ShortcutsView'
}
]
}
},
computed: {
currentView() {
return this.views[this.currentViewIndex]
}
},
methods: {
nextView() {
this.transitionName = 'slide-right'
this.currentViewIndex = (this.currentViewIndex + 1) % this.views.length
},
previousView() {
this.transitionName = 'slide-left'
this.currentViewIndex = this.currentViewIndex === 0
? this.views.length - 1
: this.currentViewIndex - 1
}
}
}
</script>
<style scoped>
.enriched-section {
width: 100%;
height: 100%;
background: #2c2c2c;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.enriched-header {
padding: 8px 12px;
background: #3c3c3c;
border-bottom: 1px solid #4a4a4a;
display: flex;
justify-content: center;
align-items: center;
}
.view-navigation {
display: flex;
align-items: center;
gap: 8px;
}
.nav-button {
background: #4a4a4a;
border: none;
border-radius: 4px;
color: white;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.nav-button:hover:not(:disabled) {
background: #5a5a5a;
}
.view-indicator {
color: #ccc;
font-size: 0.8rem;
min-width: 40px;
text-align: center;
}
.enriched-content {
flex: 1;
position: relative;
overflow: hidden;
}
.view-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Animations de transition */
.slide-right-enter-active, .slide-right-leave-active,
.slide-left-enter-active, .slide-left-leave-active {
transition: transform 0.3s ease;
}
/* Animation vers la droite */
.slide-right-enter-from {
transform: translateX(100%);
}
.slide-right-leave-to {
transform: translateX(-100%);
}
/* Animation vers la gauche */
.slide-left-enter-from {
transform: translateX(-100%);
}
.slide-left-leave-to {
transform: translateX(100%);
}
</style>