Refactor layout components and update theme configuration
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user