implemented rights and fixed some appearance bugs
This commit is contained in:
@ -1,58 +1,65 @@
|
||||
<template>
|
||||
<aside
|
||||
:class="['actionbar', loggedInUserDarkModeBoolean ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
||||
@click="toggleActionbar">
|
||||
<div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
|
||||
id="indicator-icon" @click="toggleActionbar">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||
</div>
|
||||
<nav class="actions">
|
||||
<button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="search"
|
||||
@click="toggleSearched">
|
||||
<button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="search" @click="toggleSearched">
|
||||
<div class="icon" id="search-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Search-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="filter"
|
||||
@click="toggleFiltered">
|
||||
<button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="filter" @click="toggleFiltered">
|
||||
<div class="icon" id="filter-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Filter-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="instances">
|
||||
<button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="instances">
|
||||
<div class="icon" id="instances-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Instances-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions"
|
||||
@click="changeToSolutions">
|
||||
<button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="solutions" @click="changeToSolutions">
|
||||
<div class="icon" id="instances-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Instances-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="attachments">
|
||||
<button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="attachments">
|
||||
<div class="icon" id="attachments-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Attachments-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="sellIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="sell">
|
||||
@ -61,66 +68,78 @@
|
||||
src="/icons/actionbar-icons/Sell-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="archive">
|
||||
<button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="archive">
|
||||
<div class="icon" id="archive-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Archive-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
|
||||
<button v-if="addIcon && !loggedInUserReaderBool"
|
||||
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
|
||||
<div class="icon" id="new-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="addInstanceIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
|
||||
<button v-if="addInstanceIcon && !loggedInUserReaderBool"
|
||||
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
|
||||
<div class="icon" id="new-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<router-link v-if="addSolutionIcon" to="/solutions" class="button"
|
||||
<router-link v-if="addSolutionIcon && !loggedInUserReaderBool" to="/solutions" class="button"
|
||||
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
|
||||
<button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution" @click="addSolution">
|
||||
<button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
|
||||
@click="addSolution">
|
||||
<div class="icon" id="new-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
</router-link>
|
||||
<button v-if="editIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
|
||||
<button v-if="editIcon && !loggedInUserReaderBool"
|
||||
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
|
||||
@click="toggleEditable">
|
||||
<div class="icon" id="edit-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Edit-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button v-if="deleteIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete"
|
||||
@click="deleteFunc">
|
||||
<button v-if="deleteIcon && !loggedInUserReaderBool"
|
||||
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
|
||||
<div class="icon" id="delete-icon">
|
||||
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="/icons/actionbar-icons/Delete-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
||||
<pre v-if="isExpanded"
|
||||
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
</nav>
|
||||
@ -147,8 +166,9 @@ const editIcon = computed(() => store.state.editIcon);
|
||||
const deleteIcon = computed(() => store.state.deleteIcon);
|
||||
|
||||
const loggedInUserDarkModeBoolean = ref('');
|
||||
const isExpanded = ref(true)
|
||||
const isExpanded = ref(true);
|
||||
const modeChanged = computed(() => store.state.updateDarkMode);
|
||||
const loggedInUserReaderBool = ref(true);
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
@ -191,20 +211,26 @@ const changeToSolutions = () => {
|
||||
// watch(changeToSet, changeToSettingsPage)
|
||||
|
||||
const getSession = async () => {
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
if (loggedInUserDarkModeBool == 1) {
|
||||
loggedInUserDarkModeBoolean.value = true;
|
||||
} else {
|
||||
loggedInUserDarkModeBoolean.value = false;
|
||||
}
|
||||
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
||||
if (loggedInUserDarkModeBool == 1) {
|
||||
loggedInUserDarkModeBoolean.value = true;
|
||||
} else {
|
||||
loggedInUserDarkModeBoolean.value = false;
|
||||
}
|
||||
const readerBool = getItem('logged-in-user-readerBool');
|
||||
if (readerBool == 1) {
|
||||
loggedInUserReaderBool.value = true;
|
||||
} else {
|
||||
loggedInUserReaderBool.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getItem(item) {
|
||||
if (process.client) {
|
||||
return localStorage.getItem(item)
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
if (process.client) {
|
||||
return localStorage.getItem(item)
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
watch(modeChanged, getSession)
|
||||
|
||||
Reference in New Issue
Block a user