Refactor layout components and update theme configuration

This commit is contained in:
andrea.terzani
2024-10-28 19:22:04 +01:00
parent d5492e596f
commit fc7f20c2a4
6 changed files with 45 additions and 24 deletions

View File

@@ -77,18 +77,14 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
<ProgressSpinner v-if="loadingStore.isLoading" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>
<button @click="router.push('/canvas')" class="layout-topbar-action" >
<i class="pi pi-file-edit"></i>
</button >
<button @click="router.push('/mdcanvas')" class="layout-topbar-action" >
<i class="pi pi-pencil"></i>
</button >
<button type="button" class="layout-topbar-action" @click="toggleDarkMode">
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
</button>
<div class="relative">
<button
<!----> <button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
type="button"
class="layout-topbar-action layout-topbar-action-highlight"
@@ -97,24 +93,26 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
</button>
<AppConfigurator />
</div>
<div>
<h1 v-if="userPrefStore.user.selectedProject">
{{ userPrefStore.user.selectedProject.fe_name }}
</h1>
</div>
</div>
<div class="topbar-project">
<span v-if="userPrefStore.user.selectedProject">
<small>PROJECT:</small> {{ userPrefStore.user.selectedProject.fe_name }}
</span>
</div>
<Dropdown
v-model="selectedApp"
:options="userPrefStore.availableApp"
optionLabel="fe_name"
placeholder="Select an Application"
class="dropdown-list"
class="dropdown-list menu-list"
@change="updateApplication()"
:disabled="route.path === '/projects'"
/>
/>
<button
class="layout-topbar-menu-button layout-topbar-action"
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
@@ -138,3 +136,19 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
</div>
</div>
</template>
<style scoped>
.topbar-project {
display: flex;
align-items: center;
justify-content: left;
margin-left: 1rem;
font-size: 1.2rem;
min-width: 100px;
}
.menu-list {
width: 200px;
margin-right: 1rem;
}
</style>