IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

setting up invite button

Browse Source
This commit is contained in:
Moriz Wahl 2021-03-16 10:36:07 +01:00
parent ff50273f94
commit e6dc3f42ce
3 changed files with 122 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
webapp/components/InviteButton/InviteButton.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<dropdown class="avatar-menu" offset="8" :placement="placement">
<template #default="{ toggleMenu }">
XXX
</template>
</dropdown>
</template>
<script>
import Dropdown from '~/components/Dropdown'
export default {
components: {
Dropdown,
},
}
</script>

2
webapp/config/index.js
View File

@ -29,6 +29,8 @@ const sentry = {
const options = {
VERSION: process.env.VERSION || pkg.version,
DESCRIPTION: process.env.DESCRIPTION || pkg.description,
PUBLIC_REGISTRATION: process.env.PUBLIC_REGISTRATION === 'true',
INVITE_REGISTRATION: process.env.INVITE_REGISTRATION === 'true',
// Cookies
COOKIE_EXPIRE_TIME: process.env.COOKIE_EXPIRE_TIME || 730, // Two years by default
COOKIE_HTTPS_ONLY: process.env.COOKIE_HTTPS_ONLY || process.env.NODE_ENV === 'production', // ensure true in production if not set explicitly

192
webapp/layouts/default.vue
View File

@ -40,9 +40,9 @@
<div
class="main-navigation-right"
:class="{
'desktop-view': !toggleMobileMenu,
'hide-mobile-menu': !toggleMobileMenu,
}"
'desktop-view': !toggleMobileMenu,
'hide-mobile-menu': !toggleMobileMenu,
}"
style="flex-basis: auto"
>
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
@ -50,6 +50,10 @@
<client-only>
<notification-menu placement="top" />
</client-only>
XXX {{ showInviteButton }}
<client-only v-if="showInviteButton">
<invite-button placement="top" />
</client-only>
<client-only>
<avatar-menu placement="top" />
</client-only>
@ -74,96 +78,106 @@
</template>
<script>
import Logo from '~/components/Logo/Logo'
import { mapGetters } from 'vuex'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import SearchField from '~/components/features/SearchField/SearchField.vue'
import Modal from '~/components/Modal'
import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
import seo from '~/mixins/seo'
import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
import PageFooter from '~/components/PageFooter/PageFooter'
import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
import Logo from '~/components/Logo/Logo'
import { mapGetters } from 'vuex'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import SearchField from '~/components/features/SearchField/SearchField.vue'
import Modal from '~/components/Modal'
import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
import seo from '~/mixins/seo'
import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
import PageFooter from '~/components/PageFooter/PageFooter'
import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
import InviteButton from '~/components/InviteButton/InviteButton'
export default {
components: {
Logo,
LocaleSwitch,
SearchField,
Modal,
NotificationMenu,
AvatarMenu,
FilterMenu,
PageFooter,
},
mixins: [seo],
data() {
return {
mobileSearchVisible: false,
toggleMobileMenu: false,
}
},
computed: {
...mapGetters({
isLoggedIn: 'auth/isLoggedIn',
}),
showFilterMenuDropdown() {
const [firstRoute] = this.$route.matched
return firstRoute && firstRoute.name === 'index'
},
},
methods: {
toggleMobileMenuView() {
this.toggleMobileMenu = !this.toggleMobileMenu
},
},
}
export default {
components: {
Logo,
LocaleSwitch,
SearchField,
Modal,
NotificationMenu,
AvatarMenu,
FilterMenu,
PageFooter,
InviteButton,
},
mixins: [seo],
data() {
return {
mobileSearchVisible: false,
toggleMobileMenu: false,
}
},
asyncData({ app }) {
return {
inviteRegistration: app.$env.INVITE_REGISTRATION,
}
},
computed: {
...mapGetters({
isLoggedIn: 'auth/isLoggedIn',
}),
showFilterMenuDropdown() {
const [firstRoute] = this.$route.matched
return firstRoute && firstRoute.name === 'index'
},
showInviteButton() {
return this.inviteRegistration
},
},
methods: {
toggleMobileMenuView() {
this.toggleMobileMenu = !this.toggleMobileMenu
},
},
}
</script>
<style lang="scss">
.topbar-locale-switch {
display: flex;
margin-right: $space-xx-small;
align-self: center;
display: inline-flex;
}
.main-container {
padding-top: 6rem;
padding-bottom: 5rem;
}
.topbar-locale-switch {
display: flex;
margin-right: $space-xx-small;
align-self: center;
display: inline-flex;
}
.main-container {
padding-top: 6rem;
padding-bottom: 5rem;
}
.main-navigation-flex {
align-items: center;
}
.main-navigation-flex {
align-items: center;
}
.main-navigation {
a {
color: $text-color-soft;
}
}
.main-navigation-right {
display: flex;
justify-content: flex-end;
}
.main-navigation-right .desktop-view {
float: right;
}
.ds-flex-item.mobile-hamburger-menu {
margin-left: auto;
text-align: right;
}
@media only screen and (min-width: 730px) {
.mobile-hamburger-menu {
display: none;
}
}
@media only screen and (max-width: 730px) {
#nav-search-box,
.main-navigation-right {
margin: 10px 0px;
}
.hide-mobile-menu {
display: none;
}
}
.main-navigation {
a {
color: $text-color-soft;
}
}
.main-navigation-right {
display: flex;
justify-content: flex-end;
}
.main-navigation-right .desktop-view {
float: right;
}
.ds-flex-item.mobile-hamburger-menu {
margin-left: auto;
text-align: right;
}
@media only screen and (min-width: 730px) {
.mobile-hamburger-menu {
display: none;
}
}
@media only screen and (max-width: 730px) {
#nav-search-box,
.main-navigation-right {
margin: 10px 0px;
}
.hide-mobile-menu {
display: none;
}
}
</style>