Merge branch 'main' of https://git.tueit.de/jo.kuehner/TueIT_App into main
This commit is contained in:
Johanna Kuehner
@ -1,12 +1,16 @@
|
||||
<template>
|
||||
<aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||
<aside
|
||||
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
||||
@click="toggleActionbar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||
</div>
|
||||
<nav class="actions">
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
|
||||
<div class="icon" id="search-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Search-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
||||
@ -14,7 +18,8 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
|
||||
<div class="icon" id="filter-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Filter-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
||||
@ -22,7 +27,8 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
|
||||
<div class="icon" id="instances-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Instances-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
||||
@ -30,7 +36,8 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
|
||||
<div class="icon" id="attachments-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Attachments-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
||||
@ -38,7 +45,8 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
|
||||
<div class="icon" id="sell-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Sell-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
||||
@ -46,15 +54,17 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
|
||||
<div class="icon" id="archive-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Archive-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
|
||||
<div class="icon" id="new-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
||||
@ -62,15 +72,17 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
|
||||
<div class="icon" id="edit-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Edit-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
|
||||
<div class="icon" id="delete-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Delete-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
||||
@ -90,23 +102,23 @@ const isExpanded = ref(true)
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const toggleEditable = () => {
|
||||
store.commit('toggleEditableAsset');
|
||||
store.commit('toggleEditable');
|
||||
};
|
||||
const deleteAsset = () => {
|
||||
store.commit('doDeleteAsset');
|
||||
const deleteFunc = () => {
|
||||
store.commit('doDelete');
|
||||
};
|
||||
|
||||
const toggleActionbar = () => {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
};
|
||||
const toggleFiltered = () => {
|
||||
store.commit('toggleFilteredAsset');
|
||||
store.commit('toggleFiltered');
|
||||
};
|
||||
const toggleSearched = () => {
|
||||
store.commit('toggleAssetSearchable');
|
||||
store.commit('toggleSearchable');
|
||||
};
|
||||
const addAsset = () => {
|
||||
store.commit('addNewAsset');
|
||||
const add = () => {
|
||||
store.commit('add');
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -141,17 +153,21 @@ aside.actionbar {
|
||||
gap: 1.25rem;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.actionbar-darkmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.actionbar-lightmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
aside.is-expanded {
|
||||
animation: expand 0.5s linear both;
|
||||
}
|
||||
|
||||
aside.is-not-expanded {
|
||||
animation: contract 0.5s linear both;
|
||||
}
|
||||
@ -181,16 +197,30 @@ button {
|
||||
transition: 0.2s ease-in-out;
|
||||
overflow: clip;
|
||||
}
|
||||
.button-darkmode { background-color: #2C2C2C; }
|
||||
.button-lightmode { background-color: #FFFFFF; }
|
||||
|
||||
.button-darkmode:hover,
|
||||
.indicator-darkmode:hover { background-color: #444444; }
|
||||
.button-darkmode {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.button-lightmode:hover,
|
||||
.indicator-lightmode:hover { background-color: #ACACAC; }
|
||||
.button-lightmode {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.is-not-expanded>button { align-self: center; }
|
||||
.button-darkmode:hover,
|
||||
.indicator-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-lightmode:hover,
|
||||
.indicator-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.is-not-expanded>button {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
@ -202,6 +232,7 @@ button {
|
||||
justify-content: center;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.is-not-expanded .icon {
|
||||
align-self: center;
|
||||
}
|
||||
@ -211,8 +242,11 @@ button {
|
||||
height: 1.875rem;
|
||||
border-radius: 0.3125rem;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
.is-not-expanded #indicator-icon { transform: rotate(180deg); }
|
||||
}
|
||||
|
||||
.is-not-expanded #indicator-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
@ -222,8 +256,14 @@ img {
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-darkmode { filter: invert(100%); }
|
||||
#indicator-icon>img { height: 1.25rem; }
|
||||
|
||||
.img-darkmode {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
#indicator-icon>img {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.label {
|
||||
@ -234,13 +274,20 @@ img {
|
||||
letter-spacing: 0.02rem;
|
||||
white-space: nowrap;
|
||||
font: 400 0.875rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
.label-darkmode { color: #FFFFFF; }
|
||||
.label-lightmode { color: #000000; }
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -310,5 +357,4 @@ img {
|
||||
max-width: 0;
|
||||
max-inline-size: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
@ -20,7 +20,7 @@
|
||||
</router-link>
|
||||
</nav>
|
||||
<nav id="site-menu">
|
||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
|
||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
|
||||
<div class="icon" id="checklists-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
|
||||
</div>
|
||||
@ -36,7 +36,7 @@
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
|
||||
</Transition>
|
||||
</nuxt-link>
|
||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
|
||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
|
||||
<div class="icon" id="solutions-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
|
||||
</div>
|
||||
@ -77,10 +77,20 @@ const isExpanded = ref(true)
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const defaultAssetPage = () => {
|
||||
store.commit('resetAssetStore');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToAssetlist');
|
||||
};
|
||||
|
||||
const defaultMasterChecklistPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist')
|
||||
}
|
||||
|
||||
const defaultSolutionPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToSolutionlist')
|
||||
}
|
||||
|
||||
const ToggleSidebar = () => {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user