Mentions légales du service

Skip to content
Snippets Groups Projects
Commit 25bc49ae authored by VIAUD Nathan's avatar VIAUD Nathan
Browse files

Functionnal hamburger menu

parent aa259d11
No related branches found
No related tags found
1 merge request!82Resolve "Add hamburger menu for topbar"
Pipeline #881365 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/features/topBar/HamburgerMenu.vue 0 → 100644
+ 131
− 0
View file @ 25bc49ae
<script setup lang="ts">
import { useEditorStore } from '@/src/shared/stores';
const editorStore = useEditorStore();
defineProps<{
undoDisabled: boolean;
redoDisabled: boolean;
saving: boolean;
loadingPreview: boolean;
exporting: boolean;
zoomString: string;
zoom: number;
}>();
const emit = defineEmits<{
(e: 'undo'): void;
(e: 'redo'): void;
(e: 'save'): void;
(e: 'runPreview'): void;
(e: 'exportProject'): void;
(e: 'updateZoom', value: number): void;
}>();
function toggleMenu() {
editorStore.hamburgerMenu = !editorStore.hamburgerMenu;
}
</script>
<template>
<button
class="btn btn-top-bar btn-squared"
:class="{ 'active': editorStore.hamburgerMenu }"
@mousdown.stop
@mouseup.stop
@click.stop="toggleMenu"
>
<i class="icon-menu"></i>
</button>
<div
v-if="editorStore.hamburgerMenu"
class="select-menu"
@click.stop
@mouseup.stop
@mousedown.stop
>
<button class="menu-item" :disabled="undoDisabled" @click="emit('undo')">
<i class="icon-arriere"></i>
<span>Undo</span>
</button>
<button class="menu-item" :disabled="redoDisabled" @click="emit('redo')">
<i class="icon-avant"></i>
<span>Redo</span>
</button>
<button class="menu-item" :disabled="saving" @click="emit('save')">
<i class="icon-save"></i>
<span>Sauvegarder</span>
</button>
<button class="menu-item" :disabled="loadingPreview" @click="emit('runPreview')">
<i class="icon-play"></i>
<span>Aperçu</span>
</button>
<button class="menu-item" :disabled="exporting" @click="emit('exportProject')">
<i class="icon-export"></i>
<span>Exporter</span>
</button>
</div>
</template>
<style scoped lang="scss">
.btn-squared {
padding: .7rem;
&.active {
background-color: var(--content);
}
i {
font-size: 1.5rem;
}
}
.select-menu {
z-index: 100;
position: fixed;
top: calc(80px + 0.3rem);
right: 0.3rem;
background-color: var(--content);
padding: .5rem;
border: 1px solid var(--border);
border-radius: 8px;
display: flex;
flex-direction: column;
box-shadow: 0 1px 8px var(--shadow);
.menu-item {
padding: 1rem;
border-radius: 8px;
display: flex;
gap: .5rem;
align-items: center;
border: none;
background: none;
font-size: 1rem;
font-weight: 500;
color: var(--text);
&:disabled {
opacity: .5;
}
&:hover:not(:disabled) {
background: var(--button-blue);
cursor: pointer;
}
select {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
src/features/topBar/TopActionsMenu.vue 0 → 100644
+ 108
− 0
View file @ 25bc49ae
<script setup lang="ts">
import TopActionButton from '@/src/features/topBar/TopActionButton.vue';
import TopActionDropdown from '@/src/features/topBar/TopActionDropdown.vue';
import HamburgerMenu from '@/src/features/topBar/HamburgerMenu.vue';
import { editorService } from '@/src/shared/services';
defineProps<{
undoDisabled: boolean;
redoDisabled: boolean;
saving: boolean;
loadingPreview: boolean;
exporting: boolean;
zoomString: string;
zoom: number;
}>();
const emit = defineEmits<{
(e: 'undo'): void;
(e: 'redo'): void;
(e: 'save'): void;
(e: 'runPreview'): void;
(e: 'exportProject'): void;
(e: 'updateZoom', value: number): void;
}>();
</script>
<template>
<div class="top-bar-actions">
<TopActionDropdown
icon="icon-chevron"
:text="zoomString"
position="left"
:input-value="zoom"
@change="emit('updateZoom', $event)"
/>
<div class="menu-md-container top-bar-actions">
<hr class="vertical-separator">
<TopActionButton icon="icon-arriere" :disabled="undoDisabled" @click="emit('undo')" />
<TopActionButton icon="icon-avant" :disabled="redoDisabled" @click="emit('redo')" />
<hr class="vertical-separator">
<TopActionButton
icon="icon-save"
text="Sauvegarder"
position="right"
:disabled="saving"
@click="emit('save')"
/>
<TopActionButton
icon="icon-play"
text="Aperçu"
position="right"
:disabled="loadingPreview"
@click="emit('runPreview')"
/>
<TopActionButton
icon="icon-export"
text="Exporter archive"
position="right"
:disabled="exporting"
@click="emit('exportProject')"
/>
</div>
<div class="menu-xs-container top-bar-actions">
<HamburgerMenu
:undo-disabled="undoDisabled"
:redo-disabled="redoDisabled"
:saving="saving"
:loading-preview="loadingPreview"
:exporting="exporting"
:zoom-string="zoomString"
:zoom="zoom"
@undo="emit('undo')"
@redo="emit('redo')"
@save="emit('save')"
@run-preview="emit('runPreview')"
@export-project="emit('exportProject')"
@update-zoom="emit('updateZoom', $event)"
/>
</div>
</div>
</template>
<style scoped lang="scss">
@use '@/src/mixins';
.top-bar-actions {
display: flex;
flex-direction: row;
align-items: center;
margin-left: auto;
min-width: fit-content;
}
.menu-md-container {
@include mixins.sm {
display: none;
}
}
.menu-xs-container {
@include mixins.md {
display: none;
}
}
</style>
\ No newline at end of file
src/features/topBar/TopBar.vue
+ 16
− 35
View file @ 25bc49ae
<script setup lang="ts">
import TopActionButton from './TopActionButton.vue';
import TopActionDropdown from './TopActionDropdown.vue';
import { useEditorStore, useUndoRedoStore } from '@/src/shared/stores';
import { computed, ref } from 'vue';
import { editorService } from '@/src/shared/services';
import { useVueFlow } from '@vue-flow/core';
import TopActionsMenu from '@/src/features/topBar/TopActionsMenu.vue';
const editorStore = useEditorStore();
const undoRedoStore = useUndoRedoStore();
......@@ -59,20 +58,21 @@ setInterval(() => {
<h3>{{ editorStore.currentProject.filepath ? editorStore.currentProject.filepath : 'Nouvel ePoc' }}</h3>
<small>Dernière sauvegarde : {{ savedSince }}</small>
</div>
<div class="top-bar-actions">
<TopActionDropdown icon="icon-chevron" :text="zoomString" position="left" :input-value="zoom" @change="updateZoom" />
<hr class="vertical-separator">
<TopActionButton icon="icon-arriere" :disabled="undoRedoStore.undoStack.length <= 0" @click="undoRedoStore.undo()" />
<TopActionButton icon="icon-avant" :disabled="undoRedoStore.redoStack.length <= 0" @click="undoRedoStore.redo()" />
<hr class="vertical-separator">
<TopActionButton icon="icon-save" text="Sauvegarder" position="right" :disabled="editorStore.saving" @click="editorService.saveEpocProject" />
<TopActionButton icon="icon-play" text="Aperçu" position="right" :disabled="editorStore.loadingPreview" @click="editorService.runPreviewAtPage()" />
<TopActionButton icon="icon-export" text="Exporter archive" position="right" :disabled="editorStore.exporting" @click="editorService.exportProject()" />
</div>
<div class="menu-xs-container">
<button>hamburger menu</button>
</div>
<TopActionsMenu
:undo-disabled="undoRedoStore.undoStack.length <= 0"
:redo-disabled="undoRedoStore.redoStack.length <= 0"
:saving="editorStore.saving"
:loading-preview="editorStore.loadingPreview"
:exporting="editorStore.exporting"
:zoom-string="zoomString"
:zoom="zoom"
@undo="undoRedoStore.undo()"
@redo="undoRedoStore.redo()"
@save="editorService.saveEpocProject"
@run-preview="editorService.runPreviewAtPage()"
@export-project="editorService.exportProject()"
@update-zoom="updateZoom"
/>
</div>
</div>
</template>
......@@ -103,13 +103,6 @@ setInterval(() => {
}
min-width: 0;
}
&-actions {
display: flex;
flex-direction: row;
align-items: center;
margin-left: auto;
min-width: fit-content;
}
h3 {
margin: 0 0 .2rem 0;
......@@ -132,16 +125,4 @@ setInterval(() => {
}
.top-bar-actions {
@include mixins.sm {
display: none;
}
}
.menu-xs-container {
@include mixins.md {
display: none;
}
}
</style>
\ No newline at end of file
src/shared/stores/editorStore.ts
+ 3
− 0
View file @ 25bc49ae
......@@ -51,6 +51,7 @@ interface EditorState {
conditionModal: boolean;
validationModal: boolean;
iconModal: boolean;
hamburgerMenu: boolean;
// Mode
selectNodeMode: boolean;
......@@ -90,6 +91,7 @@ export const useEditorStore = defineStore('editor', {
conditionModal: false,
validationModal: false,
iconModal: false,
hamburgerMenu: false,
// Mode
selectNodeMode: false,
......@@ -126,6 +128,7 @@ export const useEditorStore = defineStore('editor', {
dismissModals(): void {
this.questionMenu = false;
this.modelMenu = false;
this.hamburgerMenu = false;
},
openBadgeFormPanel(id: string, _type: 'custom' | 'meta', scrollPosY?: number): void {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment