ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add map button to header menu

Browse Source
This commit is contained in:
Wolfgang Huß 2023-01-31 13:06:34 +01:00
parent 55f699a130
commit 8ae6eff0e4
5 changed files with 162 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/assets/_new/icons/svgs/globe-detailed.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

67
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -20,7 +20,7 @@
<logo logoType="header" />
</nuxt-link>
</ds-flex-item>
<!-- dynamic-brand-menu -->
<!-- dynamic brand menus -->
<ds-flex-item
v-for="item in menu"
:key="item.name"
@ -39,8 +39,7 @@
</ds-text>
</nuxt-link>
</ds-flex-item>
<!-- search-field -->
<!-- search field -->
<ds-flex-item
v-if="isLoggedIn"
id="nav-search-box"
@ -55,26 +54,26 @@
>
<search-field />
</ds-flex-item>
<!-- filter-menu
TODO: Filter is only visible on index
-->
<!-- filter menu -->
<!-- TODO: Filter is only visible on index -->
<ds-flex-item v-if="isLoggedIn" style="flex-grow: 0; flex-basis: auto">
<client-only>
<filter-menu v-show="showFilterMenuDropdown" />
</client-only>
</ds-flex-item>
<!-- locale-switch -->
<!-- right symbols -->
<ds-flex-item style="flex-basis: auto">
<div class="main-navigation-right" style="flex-basis: auto">
<!-- locale switch -->
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
<template v-if="isLoggedIn">
<!-- notification menu -->
<client-only>
<!-- notification-menu -->
<notification-menu placement="top" />
</client-only>
<!-- invite button -->
<div v-if="inviteRegistration">
<client-only>
<!-- invite-button -->
<invite-button placement="top" />
</client-only>
</div>
@ -82,7 +81,11 @@
<client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
<group-button />
</client-only>
<!-- avatar-menu -->
<!-- map button -->
<client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
<map-button />
</client-only>
<!-- avatar menu -->
<client-only>
<avatar-menu placement="top" />
</client-only>
@ -122,9 +125,9 @@
<base-button icon="bars" @click="toggleMobileMenuView" circle />
</ds-flex-item>
</ds-flex>
<!-- search, filter-->
<!-- search, filter -->
<ds-flex class="mobile-menu">
<!-- search-field mobile-->
<!-- search field mobile -->
<ds-flex-item
v-if="isLoggedIn"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@ -132,7 +135,7 @@
>
<search-field />
</ds-flex-item>
<!-- filter menu mobile-->
<!-- filter menu mobile -->
<ds-flex-item
v-if="isLoggedIn"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@ -143,13 +146,17 @@
</client-only>
</ds-flex-item>
</ds-flex>
<!-- switch language, notification, invite, profil -->
<!-- right symbols -->
<ds-flex style="margin: 0 20px">
<!-- locale-switch mobile-->
<!-- locale switch mobile -->
<ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
<locale-switch
class="topbar-locale-switch topbar-locale-switch-mobile"
placement="top"
offset="8"
/>
</ds-flex-item>
<!-- invite-button mobile-->
<!-- invite button mobile -->
<ds-flex-item
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="text-align: center"
@ -160,14 +167,25 @@
</ds-flex-item>
<!-- group button -->
<ds-flex-item
v-if="SHOW_GROUP_BUTTON_IN_HEADER"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="text-align: center"
>
<client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
<client-only>
<group-button />
</client-only>
</ds-flex-item>
<!-- avatar-menu mobile-->
<!-- map button -->
<ds-flex-item
v-if="!isEmpty(this.$env.MAPBOX_TOKEN)"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
style="text-align: center"
>
<client-only>
<map-button />
</client-only>
</ds-flex-item>
<!-- avatar menu mobile -->
<ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
<client-only>
<avatar-menu placement="top" />
@ -175,7 +193,7 @@
</ds-flex-item>
</ds-flex>
<div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
<!-- dynamic branding menu -->
<!-- dynamic branding menus -->
<ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
<li v-for="item in menu" :key="item.name">
<a v-if="item.url" :href="item.url" :target="item.target">
@ -204,8 +222,10 @@
</div>
</ds-container>
</template>
<script>
import { mapGetters } from 'vuex'
import isEmpty from 'lodash/isEmpty'
import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
import LOGOS from '~/constants/logos.js'
import headerMenu from '~/constants/headerMenu.js'
@ -215,6 +235,7 @@ import GroupButton from '~/components/Group/GroupButton'
import InviteButton from '~/components/InviteButton/InviteButton'
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import Logo from '~/components/Logo/Logo'
import MapButton from '~/components/Map/MapButton'
import SearchField from '~/components/features/SearchField/SearchField.vue'
import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
import links from '~/constants/links.js'
@ -228,6 +249,7 @@ export default {
InviteButton,
LocaleSwitch,
Logo,
MapButton,
NotificationMenu,
PageParamsLink,
SearchField,
@ -237,6 +259,7 @@ export default {
},
data() {
return {
isEmpty,
links,
LOGOS,
SHOW_GROUP_BUTTON_IN_HEADER,
@ -277,9 +300,13 @@ export default {
.topbar-locale-switch {
display: flex;
margin-right: $space-xx-small;
margin-top: -$space-xx-small;
align-self: center;
display: inline-flex;
}
.topbar-locale-switch-mobile {
margin-top: $space-xx-small;
}
.main-navigation-flex {
align-items: center;
}

108
webapp/components/Map/MapButton.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div>
<nuxt-link to="/map">
<base-button class="map-button" circle ghost>
<base-icon name="globe-detailed" size="large" />
</base-button>
<!-- <img
class="map-icon"
src="/img/svg/map/map-globe.svg"
:style="'width: 34px;'"
v-tooltip="{
content: $t('map.button.tooltip'),
placement: 'bottom-start',
}"
/> -->
<!-- <mapGlobeSVG
class="map-icon"
aria-hidden="true"
focusable="false"
v-tooltip="{
content: $t('map.button.tooltip'),
placement: 'bottom-start',
}"
/> -->
</nuxt-link>
</div>
</template>
<script>
// import mapGlobeSVG from '/img/svg/map/map-globe.svg'
export default {
// components: {
// mapGlobeSVG,
// },
// data() {
// return {
// globe,
// }
// },
}
</script>
<style lang="scss">
// Wolle: .map-button {
// // position: relative;
// // height: $size-avatar-large;
// // width: $size-avatar-large;
// // overflow: hidden;
// display: inline-flex;
// justify-content: center;
// align-items: center;
// // &.--small {
// // width: $size-avatar-small;
// // height: $size-avatar-small;
// // }
// // &.--large {
// // width: $size-avatar-large;
// // height: $size-avatar-large;
// // }
// >.base-icon {
// // position: absolute;
// // top: 50%;
// // left: 50%;
// // top: 150%;
// // left: 150%;
// // width: 90px;
// // height: 90px;
// // transform: translate(-50%, -50%);
// height: auto;
// }
// }
// .base-icon {
// // display: inline-flex;
// // vertical-align: bottom;
// > .svg {
// height: 2.2em;
// // fill: currentColor;
// }
// }
// .map-icon {
// margin-left: 4px;
// margin-right: 4px;
// margin-top: 2px;
// color: red !important;
// // color: $color-locale-menu;
// // fill: $color-locale-menu;
// // fill: currentColor !important;
// // stroke: currentColor !important;
// // fill: currentColor;
// // stroke: currentColor;
// fill: red !important;
// stroke: red !important;
// }
// svg path {
// fill: red !important;
// stroke: red !important;
// }
.map-button {
margin-left: 4px;
margin-right: 4px;
}
</style>

3
webapp/locales/de.json
View File

@ -526,6 +526,9 @@
"title": "{APPLICATION_NAME} befindet sich in der Wartung"
},
"map": {
"button": {
"tooltip": "Landkarte anzeigen"
},
"markerTypes": {
"group": "Gruppe",
"theUser": "deine Position",

3
webapp/locales/en.json
View File

@ -526,6 +526,9 @@
"title": "{APPLICATION_NAME} is under maintenance"
},
"map": {
"button": {
"tooltip": "Show map"
},
"markerTypes": {
"group": "group",
"theUser": "your position",