-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #835 from geoadmin/feat-PB-491-3d-menu-2
PB-491: 3D menu only when active
- Loading branch information
Showing
16 changed files
with
339 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <script setup> | ||
| import { computed, toRefs } from 'vue' | ||
| import { useStore } from 'vuex' | ||
| import MenuItemCheckBox from '@/modules/menu/components/common/MenuItemCheckBox.vue' | ||
| import { useTippyTooltip } from '@/utils/composables/useTippyTooltip' | ||
| const dispatcher = { dispatcher: 'MenuThreeD.vue' } | ||
| useTippyTooltip('.menu-three-d [data-tippy-content]') | ||
| const props = defineProps({ | ||
| compact: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| }) | ||
| const { compact } = toRefs(props) | ||
| const store = useStore() | ||
| const labels = computed({ | ||
| get: () => store.state.cesium.showLabels, | ||
| set: (value) => store.dispatch('setShowLabels', { showLabels: !!value, ...dispatcher }), | ||
| }) | ||
| const vegetation = computed({ | ||
| get: () => store.state.cesium.showVegetation, | ||
| set: (value) => store.dispatch('setShowVegetation', { showVegetation: !!value, ...dispatcher }), | ||
| }) | ||
| const constructions = computed({ | ||
| get: () => store.state.cesium.showBuildings && store.state.cesium.showConstructions, | ||
| set: (value) => | ||
| store.dispatch('setShowConstructionsBuildings', { | ||
| showConstructionsBuildings: !!value, | ||
| ...dispatcher, | ||
| }), | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="menu-three-d" data-cy="menu-three-d"> | ||
| <MenuItemCheckBox v-model="labels" label="3d_labels" :compact="compact" /> | ||
| <MenuItemCheckBox v-model="vegetation" label="3d_vegetation" :compact="compact" /> | ||
| <MenuItemCheckBox v-model="constructions" label="3d_constructions" :compact="compact" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import '@/modules/menu/scss/menu-items'; | ||
| .menu-three-d { | ||
| @extend .menu-list; | ||
| overflow-y: auto; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <script setup> | ||
| import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' | ||
| import { toRefs } from 'vue' | ||
| import { useI18n } from 'vue-i18n' | ||
| const model = defineModel({ type: Boolean }) | ||
| const emits = defineEmits(['click']) | ||
| const i18n = useI18n() | ||
| const props = defineProps({ | ||
| label: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| compact: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| dataCy: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| }) | ||
| const { compact } = toRefs(props) | ||
| function onClick(ev) { | ||
| model.value = !model.value | ||
| emits('click', ev) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="menu-check-box-item" :class="{ compact: compact }" @click="onClick"> | ||
| <div class="menu-check-box-item-title"> | ||
| <button | ||
| class="btn border-0 d-flex align-items-center" | ||
| :class="{ 'btn-lg': !compact }" | ||
| :data-cy="dataCy" | ||
| > | ||
| <FontAwesomeIcon :icon="`far fa-${model ? 'check-' : ''}square`" /> | ||
| </button> | ||
| <label v-if="label" class="ms-2 menu-check-box-item-name">{{ i18n.t(label) }}</label> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import '@/modules/menu/scss/menu-items'; | ||
| .menu-check-box-item { | ||
| @extend .menu-item; | ||
| border-bottom: none; | ||
| &-title { | ||
| @extend .menu-title; | ||
| cursor: pointer; | ||
| border-bottom-width: 1px; | ||
| border-bottom-color: $gray-400; | ||
| border-bottom-style: solid; | ||
| } | ||
| &-name { | ||
| @extend .menu-name; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.