2019-05-14 01:15:45 +02:00
|
|
|
<!--
|
|
|
|
- @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
|
|
|
|
-
|
|
|
|
- @author René Gieling <github@dartcafe.de>
|
|
|
|
- @author Nick Gallo
|
2020-03-31 18:20:55 +02:00
|
|
|
- @author John Molakvoæ <skjnldsv@protonmail.com>
|
2019-05-14 01:15:45 +02:00
|
|
|
-
|
|
|
|
- @license GNU AGPL version 3 or any later version
|
|
|
|
-
|
|
|
|
- This program is free software: you can redistribute it and/or modify
|
|
|
|
- it under the terms of the GNU Affero General Public License as
|
|
|
|
- published by the Free Software Foundation, either version 3 of the
|
|
|
|
- License, or (at your option) any later version.
|
|
|
|
-
|
|
|
|
- This program is distributed in the hope that it will be useful,
|
|
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
- GNU Affero General Public License for more details.
|
|
|
|
-
|
|
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
|
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
-
|
|
|
|
-->
|
|
|
|
|
|
|
|
<template>
|
2020-04-21 18:03:43 +02:00
|
|
|
<AppContent v-if="isLoadingForm">
|
2020-04-10 17:35:40 +02:00
|
|
|
<EmptyContent icon="icon-loading">
|
2020-04-25 00:21:27 +02:00
|
|
|
{{ t('forms', 'Loading {title} …', { title: form.title }) }}
|
2020-04-10 17:35:40 +02:00
|
|
|
</EmptyContent>
|
|
|
|
</AppContent>
|
|
|
|
|
|
|
|
<AppContent v-else>
|
2020-03-27 16:54:17 +01:00
|
|
|
<!-- Show results & sidebar button -->
|
|
|
|
<TopBar>
|
2020-04-23 14:22:58 +02:00
|
|
|
<button @click="showResults">
|
2020-04-25 00:31:03 +02:00
|
|
|
<span class="icon-comment" role="img" />
|
|
|
|
{{ t('forms', 'Responses') }}
|
2020-03-27 16:54:17 +01:00
|
|
|
</button>
|
2020-03-31 18:20:55 +02:00
|
|
|
<button v-tooltip="t('forms', 'Toggle settings')"
|
|
|
|
:aria-label="t('forms', 'Toggle settings')"
|
|
|
|
@click="toggleSidebar">
|
2020-04-23 14:34:20 +02:00
|
|
|
<span class="icon-menu-sidebar" role="img" />
|
2020-03-27 16:54:17 +01:00
|
|
|
</button>
|
|
|
|
</TopBar>
|
|
|
|
|
|
|
|
<!-- Forms title & description-->
|
2020-03-27 16:12:01 +01:00
|
|
|
<header>
|
2020-04-29 01:45:20 +02:00
|
|
|
<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
|
2020-03-27 16:12:01 +01:00
|
|
|
<input
|
|
|
|
id="form-title"
|
2020-04-10 17:35:40 +02:00
|
|
|
v-model="form.title"
|
2020-03-27 16:12:01 +01:00
|
|
|
:minlength="0"
|
2020-04-29 01:45:20 +02:00
|
|
|
:placeholder="t('forms', 'Form title')"
|
2020-03-27 16:12:01 +01:00
|
|
|
:required="true"
|
2020-03-27 18:30:38 +01:00
|
|
|
autofocus
|
2020-03-31 18:20:55 +02:00
|
|
|
type="text"
|
2020-04-22 17:57:31 +02:00
|
|
|
@click="selectIfUnchanged"
|
|
|
|
@keyup="onTitleChange">
|
2020-03-27 16:12:01 +01:00
|
|
|
<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
|
|
|
|
<textarea
|
|
|
|
id="form-desc"
|
|
|
|
ref="description"
|
2020-04-10 17:35:40 +02:00
|
|
|
v-model="form.description"
|
2020-03-27 16:12:01 +01:00
|
|
|
:placeholder="t('forms', 'Description')"
|
2020-04-22 17:57:31 +02:00
|
|
|
@change="autoSizeDescription"
|
|
|
|
@keydown="autoSizeDescription"
|
|
|
|
@keyup="onDescChange" />
|
2020-03-27 16:12:01 +01:00
|
|
|
</header>
|
|
|
|
|
|
|
|
<section>
|
2020-03-27 18:30:38 +01:00
|
|
|
<!-- Add new questions toolbar -->
|
2020-03-31 18:20:55 +02:00
|
|
|
<div class="question-toolbar" role="toolbar">
|
|
|
|
<Actions ref="questionMenu"
|
|
|
|
:open.sync="questionMenuOpened"
|
2020-04-29 13:26:38 +02:00
|
|
|
:menu-title="t('forms', 'Add a question')"
|
|
|
|
:primary="true"
|
2020-04-21 18:03:43 +02:00
|
|
|
:default-icon="isLoadingQuestions ? 'icon-loading-small' : 'icon-add-white'">
|
2020-04-10 17:35:40 +02:00
|
|
|
<ActionButton v-for="(answer, type) in answerTypes"
|
|
|
|
:key="answer.label"
|
2020-04-21 18:03:43 +02:00
|
|
|
:close-after-click="true"
|
|
|
|
:disabled="isLoadingQuestions"
|
2020-04-10 17:35:40 +02:00
|
|
|
:icon="answer.icon"
|
2020-03-31 18:20:55 +02:00
|
|
|
class="question-toolbar__question"
|
2020-04-10 17:35:40 +02:00
|
|
|
@click="addQuestion(type)">
|
|
|
|
{{ answer.label }}
|
2020-03-31 18:20:55 +02:00
|
|
|
</ActionButton>
|
|
|
|
</Actions>
|
|
|
|
</div>
|
2020-03-27 18:30:38 +01:00
|
|
|
|
|
|
|
<!-- Questions list -->
|
2020-04-22 17:57:31 +02:00
|
|
|
<Draggable v-model="form.questions"
|
|
|
|
:animation="200"
|
|
|
|
tag="ul"
|
2020-04-24 18:41:01 +02:00
|
|
|
handle=".question__drag-handle"
|
2020-04-22 17:57:31 +02:00
|
|
|
@change="onQuestionOrderChange"
|
|
|
|
@start="isDragging = true"
|
|
|
|
@end="isDragging = false">
|
|
|
|
<Questions
|
|
|
|
:is="answerTypes[question.type].component"
|
|
|
|
v-for="(question, index) in form.questions"
|
|
|
|
ref="questions"
|
|
|
|
:key="question.id"
|
|
|
|
:model="answerTypes[question.type]"
|
|
|
|
:index="index + 1"
|
|
|
|
v-bind.sync="question"
|
|
|
|
@delete="deleteQuestion(question)" />
|
|
|
|
</Draggable>
|
2020-03-27 16:12:01 +01:00
|
|
|
</section>
|
2020-03-20 12:22:07 +01:00
|
|
|
</AppContent>
|
2019-05-14 01:15:45 +02:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-03-31 18:20:55 +02:00
|
|
|
import { emit } from '@nextcloud/event-bus'
|
2020-03-27 10:29:30 +01:00
|
|
|
import { generateUrl } from '@nextcloud/router'
|
2020-04-21 20:33:19 +02:00
|
|
|
import { showError } from '@nextcloud/dialogs'
|
2020-02-25 20:28:30 +01:00
|
|
|
import axios from '@nextcloud/axios'
|
2020-03-21 19:07:46 +01:00
|
|
|
import debounce from 'debounce'
|
2020-03-31 18:20:55 +02:00
|
|
|
import Draggable from 'vuedraggable'
|
2020-02-26 14:00:27 +01:00
|
|
|
|
2020-03-27 18:30:38 +01:00
|
|
|
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
|
|
|
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
2020-03-20 12:22:07 +01:00
|
|
|
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
|
|
|
|
2020-03-27 18:30:38 +01:00
|
|
|
import answerTypes from '../models/AnswerTypes'
|
|
|
|
import EmptyContent from '../components/EmptyContent'
|
2020-03-31 18:20:55 +02:00
|
|
|
import Question from '../components/Questions/Question'
|
|
|
|
import QuestionLong from '../components/Questions/QuestionLong'
|
|
|
|
import QuestionMultiple from '../components/Questions/QuestionMultiple'
|
2020-04-29 11:23:08 +02:00
|
|
|
import QuestionShort from '../components/Questions/QuestionShort'
|
2020-03-27 16:54:17 +01:00
|
|
|
import TopBar from '../components/TopBar'
|
2020-03-20 12:22:07 +01:00
|
|
|
import ViewsMixin from '../mixins/ViewsMixin'
|
|
|
|
|
2020-04-10 17:35:40 +02:00
|
|
|
window.axios = axios
|
|
|
|
|
2019-05-14 01:15:45 +02:00
|
|
|
export default {
|
|
|
|
name: 'Create',
|
|
|
|
components: {
|
2020-03-27 18:30:38 +01:00
|
|
|
ActionButton,
|
|
|
|
Actions,
|
2020-03-20 12:22:07 +01:00
|
|
|
AppContent,
|
2020-03-31 18:20:55 +02:00
|
|
|
Draggable,
|
2020-03-27 18:30:38 +01:00
|
|
|
EmptyContent,
|
2020-03-31 18:20:55 +02:00
|
|
|
Question,
|
|
|
|
QuestionLong,
|
|
|
|
QuestionShort,
|
|
|
|
QuestionMultiple,
|
2020-03-27 16:54:17 +01:00
|
|
|
TopBar,
|
2019-05-14 01:15:45 +02:00
|
|
|
},
|
|
|
|
|
2020-03-20 12:22:07 +01:00
|
|
|
mixins: [ViewsMixin],
|
|
|
|
|
2019-05-14 01:15:45 +02:00
|
|
|
data() {
|
|
|
|
return {
|
2020-03-31 18:20:55 +02:00
|
|
|
questionMenuOpened: false,
|
2020-03-27 18:30:38 +01:00
|
|
|
answerTypes,
|
2020-04-21 18:03:43 +02:00
|
|
|
|
|
|
|
// Various states
|
|
|
|
isLoadingForm: true,
|
|
|
|
isLoadingQuestions: false,
|
2020-04-10 17:35:40 +02:00
|
|
|
errorForm: false,
|
2020-04-21 18:03:43 +02:00
|
|
|
|
|
|
|
isDragging: false,
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
title() {
|
2020-04-10 17:35:40 +02:00
|
|
|
if (this.form.title === '') {
|
2019-05-14 01:15:45 +02:00
|
|
|
return t('forms', 'Create new form')
|
|
|
|
} else {
|
2020-04-10 17:35:40 +02:00
|
|
|
return this.form.title
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
},
|
2020-04-10 17:35:40 +02:00
|
|
|
hasQuestions() {
|
|
|
|
return this.form.questions && this.form.questions.length === 0
|
2019-05-14 01:15:45 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
2020-04-21 18:03:43 +02:00
|
|
|
// Fetch full form on change
|
|
|
|
hash() {
|
|
|
|
// TODO: cancel previous request if not done
|
|
|
|
this.fetchFullForm(this.form.id)
|
2020-03-21 19:07:46 +01:00
|
|
|
},
|
2019-05-14 01:15:45 +02:00
|
|
|
},
|
|
|
|
|
2020-04-10 17:35:40 +02:00
|
|
|
beforeMount() {
|
|
|
|
this.fetchFullForm(this.form.id)
|
2019-05-14 01:15:45 +02:00
|
|
|
},
|
|
|
|
|
2020-04-10 17:35:40 +02:00
|
|
|
updated() {
|
2020-03-31 18:20:55 +02:00
|
|
|
this.autoSizeDescription()
|
|
|
|
},
|
|
|
|
|
2019-05-14 01:15:45 +02:00
|
|
|
methods: {
|
2020-04-10 17:35:40 +02:00
|
|
|
/**
|
|
|
|
* Fetch the full form data and update parent
|
|
|
|
*
|
|
|
|
* @param {number} id the unique form hash
|
|
|
|
*/
|
|
|
|
async fetchFullForm(id) {
|
2020-04-21 18:03:43 +02:00
|
|
|
this.isLoadingForm = true
|
2020-04-10 17:35:40 +02:00
|
|
|
console.debug('Loading form', id)
|
|
|
|
|
|
|
|
try {
|
|
|
|
const form = await axios.get(generateUrl('/apps/forms/api/v1/form/{id}', { id }))
|
|
|
|
this.$emit('update:form', form.data)
|
|
|
|
} catch (error) {
|
|
|
|
console.error(error)
|
|
|
|
this.errorForm = true
|
|
|
|
} finally {
|
2020-04-21 18:03:43 +02:00
|
|
|
this.isLoadingForm = false
|
2020-04-10 17:35:40 +02:00
|
|
|
}
|
2019-05-14 01:15:45 +02:00
|
|
|
},
|
|
|
|
|
2020-04-21 18:39:05 +02:00
|
|
|
/**
|
|
|
|
* Title & description save methods
|
|
|
|
*/
|
|
|
|
onTitleChange: debounce(function() {
|
|
|
|
this.saveFormProperty('title')
|
|
|
|
}, 200),
|
|
|
|
onDescChange: debounce(function() {
|
|
|
|
this.saveFormProperty('description')
|
|
|
|
}, 200),
|
|
|
|
|
2020-04-10 17:35:40 +02:00
|
|
|
/**
|
|
|
|
* Add a new question to the current form
|
|
|
|
*
|
|
|
|
* @param {string} type the question type, see AnswerTypes
|
|
|
|
*/
|
|
|
|
async addQuestion(type) {
|
|
|
|
const text = t('forms', 'New question')
|
2020-04-21 18:03:43 +02:00
|
|
|
this.isLoadingQuestions = true
|
2020-04-10 17:35:40 +02:00
|
|
|
|
|
|
|
try {
|
|
|
|
const response = await axios.post(generateUrl('/apps/forms/api/v1/question'), {
|
|
|
|
formId: this.form.id,
|
|
|
|
type,
|
|
|
|
text,
|
|
|
|
})
|
|
|
|
const question = response.data
|
|
|
|
|
|
|
|
// Add newly created question
|
|
|
|
this.form.questions.push(Object.assign({
|
|
|
|
text,
|
|
|
|
type,
|
|
|
|
answers: [],
|
|
|
|
}, question))
|
|
|
|
|
2020-04-21 18:03:43 +02:00
|
|
|
// Focus newly added question
|
|
|
|
this.$nextTick(() => {
|
|
|
|
const lastQuestion = this.$refs.questions[this.$refs.questions.length - 1]
|
|
|
|
lastQuestion.focus()
|
|
|
|
})
|
|
|
|
|
2020-04-10 17:35:40 +02:00
|
|
|
} catch (error) {
|
|
|
|
console.error(error)
|
|
|
|
showError(t('forms', 'There was an error while adding the new question'))
|
|
|
|
} finally {
|
2020-04-21 18:03:43 +02:00
|
|
|
this.isLoadingQuestions = false
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-04-20 13:51:48 +02:00
|
|
|
/**
|
|
|
|
* Delete a question
|
2020-04-21 18:03:43 +02:00
|
|
|
*
|
2020-04-20 13:51:48 +02:00
|
|
|
* @param {Object} question the question to delete
|
|
|
|
* @param {number} question.id the question id to delete
|
|
|
|
*/
|
2020-04-21 18:03:43 +02:00
|
|
|
async deleteQuestion({ id }) {
|
|
|
|
this.isLoadingQuestions = true
|
2020-04-20 13:51:48 +02:00
|
|
|
|
|
|
|
try {
|
|
|
|
await axios.delete(generateUrl('/apps/forms/api/v1/question/{id}', { id }))
|
|
|
|
const index = this.form.questions.findIndex(search => search.id === id)
|
|
|
|
this.form.questions.splice(index, 1)
|
|
|
|
} catch (error) {
|
|
|
|
console.error(error)
|
|
|
|
showError(t('forms', 'There was an error while removing the question'))
|
|
|
|
} finally {
|
2020-04-21 18:03:43 +02:00
|
|
|
this.isLoadingQuestions = false
|
2020-04-20 13:51:48 +02:00
|
|
|
}
|
2020-03-27 10:29:30 +01:00
|
|
|
},
|
|
|
|
|
2020-04-20 13:51:48 +02:00
|
|
|
/**
|
2020-04-21 18:39:05 +02:00
|
|
|
* Reorder questions on dragEnd
|
2020-04-20 13:51:48 +02:00
|
|
|
*/
|
2020-04-21 18:39:05 +02:00
|
|
|
async onQuestionOrderChange() {
|
|
|
|
this.isLoadingQuestions = true
|
|
|
|
const newOrder = this.form.questions.map(question => question.id)
|
2020-03-21 19:07:46 +01:00
|
|
|
|
2020-04-10 17:35:40 +02:00
|
|
|
try {
|
2020-04-21 20:33:41 +02:00
|
|
|
await axios.post(generateUrl('/apps/forms/api/v1/question/reorder'), {
|
2020-04-21 18:39:05 +02:00
|
|
|
formId: this.form.id,
|
|
|
|
newOrder,
|
|
|
|
})
|
2020-04-10 17:35:40 +02:00
|
|
|
} catch (error) {
|
2020-04-21 18:23:28 +02:00
|
|
|
showError(t('forms', 'Error while saving form'))
|
2020-04-10 17:35:40 +02:00
|
|
|
console.error(error)
|
2020-04-21 18:39:05 +02:00
|
|
|
} finally {
|
|
|
|
this.isLoadingQuestions = false
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
},
|
2020-03-27 16:54:17 +01:00
|
|
|
|
2020-04-21 18:39:05 +02:00
|
|
|
/**
|
|
|
|
* Add question methods
|
|
|
|
*/
|
|
|
|
openQuestionMenu() {
|
|
|
|
// TODO: fix the vue components to allow external click triggers without
|
|
|
|
// conflicting with the click outside directive
|
|
|
|
setTimeout(() => {
|
|
|
|
this.questionMenuOpened = true
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$refs.questionMenu.focusFirstAction()
|
|
|
|
})
|
|
|
|
}, 10)
|
|
|
|
},
|
|
|
|
|
2020-03-27 16:54:17 +01:00
|
|
|
/**
|
|
|
|
* Topbar methods
|
|
|
|
*/
|
|
|
|
showResults() {
|
|
|
|
this.$router.push({
|
|
|
|
name: 'results',
|
|
|
|
params: {
|
2020-04-21 18:04:37 +02:00
|
|
|
hash: this.form.hash,
|
2020-03-27 16:54:17 +01:00
|
|
|
},
|
|
|
|
})
|
|
|
|
},
|
|
|
|
toggleSidebar() {
|
|
|
|
emit('toggleSidebar')
|
|
|
|
},
|
2020-03-27 18:30:38 +01:00
|
|
|
|
2020-03-31 18:20:55 +02:00
|
|
|
/**
|
2020-04-29 01:45:20 +02:00
|
|
|
* Select the text in the input if it is still set to 'Form title'
|
2020-03-31 18:20:55 +02:00
|
|
|
* @param {Event} e the click event
|
|
|
|
*/
|
|
|
|
selectIfUnchanged(e) {
|
2020-04-29 01:45:20 +02:00
|
|
|
if (e.target && e.target.value === t('forms', 'Form title')) {
|
2020-03-31 18:20:55 +02:00
|
|
|
e.target.select()
|
|
|
|
}
|
2020-03-27 18:30:38 +01:00
|
|
|
},
|
2020-04-21 18:23:28 +02:00
|
|
|
|
|
|
|
/**
|
2020-04-21 18:39:05 +02:00
|
|
|
* Auto adjust the description height based on lines number
|
2020-04-21 18:23:28 +02:00
|
|
|
*/
|
2020-04-21 18:39:05 +02:00
|
|
|
autoSizeDescription() {
|
|
|
|
const textarea = this.$refs.description
|
|
|
|
if (textarea) {
|
|
|
|
textarea.style.cssText = 'height:auto; padding:0'
|
|
|
|
textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
|
2020-04-21 18:23:28 +02:00
|
|
|
}
|
|
|
|
},
|
2020-02-26 13:39:50 +01:00
|
|
|
},
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-04-22 17:57:31 +02:00
|
|
|
#app-content-vue {
|
2020-03-21 19:07:46 +01:00
|
|
|
display: flex;
|
2020-03-27 16:12:01 +01:00
|
|
|
align-items: center;
|
2020-03-31 18:20:55 +02:00
|
|
|
flex-direction: column;
|
|
|
|
|
2020-03-27 16:12:01 +01:00
|
|
|
header,
|
|
|
|
section {
|
|
|
|
width: 100%;
|
2020-04-23 14:59:07 +02:00
|
|
|
max-width: 750px;
|
2020-03-27 16:12:01 +01:00
|
|
|
}
|
2020-03-21 19:07:46 +01:00
|
|
|
|
2020-03-31 18:20:55 +02:00
|
|
|
// Title & description header
|
2020-03-27 16:12:01 +01:00
|
|
|
header {
|
2020-03-21 19:07:46 +01:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2020-03-27 16:12:01 +01:00
|
|
|
margin: 44px;
|
|
|
|
|
|
|
|
#form-title,
|
|
|
|
#form-desc {
|
|
|
|
width: 100%;
|
2020-04-24 16:51:47 +02:00
|
|
|
padding: 0 16px;
|
2020-03-31 18:20:55 +02:00
|
|
|
border: none;
|
2020-03-27 16:12:01 +01:00
|
|
|
}
|
|
|
|
#form-title {
|
|
|
|
font-size: 2em;
|
2020-04-24 17:00:00 +02:00
|
|
|
font-weight: bold;
|
2020-04-28 14:59:45 +02:00
|
|
|
margin: 32px 0;
|
2020-04-24 16:51:47 +02:00
|
|
|
padding-left: 14px; // align with description (compensate font size diff)
|
2020-04-29 03:41:02 +02:00
|
|
|
overflow: hidden;
|
2020-04-24 16:51:47 +02:00
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
2020-03-27 16:12:01 +01:00
|
|
|
}
|
|
|
|
#form-desc {
|
|
|
|
min-height: 60px;
|
2020-03-31 18:20:55 +02:00
|
|
|
resize: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty-content__button {
|
|
|
|
margin: 5px;
|
|
|
|
> span {
|
|
|
|
margin-right: 5px;
|
|
|
|
cursor: pointer;
|
|
|
|
opacity: 1;
|
2020-03-27 16:12:01 +01:00
|
|
|
}
|
2020-03-21 19:07:46 +01:00
|
|
|
}
|
2020-03-27 18:30:38 +01:00
|
|
|
|
2020-03-31 18:20:55 +02:00
|
|
|
// Questions container
|
2020-03-27 18:30:38 +01:00
|
|
|
section {
|
|
|
|
position: relative;
|
2020-03-31 18:20:55 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
margin-bottom: 250px;
|
|
|
|
|
|
|
|
.question-toolbar {
|
|
|
|
position: sticky;
|
2020-04-20 13:51:48 +02:00
|
|
|
// Above other menus
|
|
|
|
z-index: 55;
|
2020-03-31 18:20:55 +02:00
|
|
|
top: var(--header-height);
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-04-23 14:43:08 +02:00
|
|
|
align-self: flex-start;
|
2020-03-31 18:20:55 +02:00
|
|
|
width: 44px;
|
2020-04-28 14:50:35 +02:00
|
|
|
// To not overlap navigation toggle
|
|
|
|
margin-left: 44px;
|
2020-03-31 18:20:55 +02:00
|
|
|
height: var(--top-bar-height);
|
2020-04-20 13:51:48 +02:00
|
|
|
|
2020-03-31 18:20:55 +02:00
|
|
|
.icon-add-white {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
2020-03-27 18:30:38 +01:00
|
|
|
}
|
2019-05-14 01:15:45 +02:00
|
|
|
}
|
|
|
|
</style>
|