diff options
author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2021-05-11 15:16:41 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-05-11 15:16:41 +0300 |
commit | 732a53bcc7d8dff0e068ed8b1ae23aeba8c547a4 (patch) | |
tree | 6d112947589511016f99f2c369b7bfe463400871 /src | |
parent | e14928fe77567d67220bb22d4fa7eb09278b0c96 (diff) | |
parent | a519338281ef69a4058f3cab63535824ca175745 (diff) |
Merge pull request #5573 from nextcloud/feature/1478/share-location-frontend
Location sharing frontend
Diffstat (limited to 'src')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 6 | ||||
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue | 132 | ||||
-rw-r--r-- | src/main.js | 6 | ||||
-rw-r--r-- | src/mainFilesSidebar.js | 6 | ||||
-rw-r--r-- | src/mainPublicShareAuthSidebar.js | 6 | ||||
-rw-r--r-- | src/mainPublicShareSidebar.js | 6 |
6 files changed, 162 insertions, 0 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index ee90753f7..6671b01ad 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -214,6 +214,7 @@ import { TOAST_DEFAULT_TIMEOUT, } from '@nextcloud/dialogs' import { generateUrl } from '@nextcloud/router' +import Location from './MessagePart/Location' export default { name: 'Message', @@ -494,6 +495,11 @@ export default { component: DeckCard, props: this.messageParameters[p], } + } else if (type === 'geo-location') { + richParameters[p] = { + component: Location, + props: this.messageParameters[p], + } } else { richParameters[p] = { component: DefaultParameter, diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue new file mode 100644 index 000000000..1e81f14f5 --- /dev/null +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue @@ -0,0 +1,132 @@ +<!-- + - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@pm.me> + - + - @author Marco Ambrosini <marcoambrosini@pm.me> + - + - @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> + <a :href="mapLink" + target="_blank" + rel="noopener noreferrer" + class="location" + :aria-label="linkAriaLabel"> + <LMap + :zoom="previewZoom" + :center="center" + :options="{ + scrollWheelZoom: false, + zoomControl: false, + dragging: false, + attributionControl: false, + }" + @scroll.prevent=""> + <LTileLayer :url="url" /> + <LMarker :lat-lng="center"> + <LTooltip + :options="{ + direction: 'top', + permanent: 'true', + offset: [-16,-14]}"> + {{ name }} + </LTooltip> + </LMarker> + </LMap> + </a> +</template> + +<script> +import { LMap, LTileLayer, LMarker, LTooltip } from 'vue2-leaflet' + +export default { + name: 'Location', + + components: { + LMap, + LTileLayer, + LMarker, + LTooltip, + }, + + props: { + /** + * The latitude of the location + */ + latitude: { + type: String, + required: true, + }, + + /** + * The longitude of the location + */ + longitude: { + type: String, + required: true, + }, + + /** + * The name of the location + */ + name: { + type: String, + default: '', + }, + }, + + data() { + return { + url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + // The zoom level of the map in the messages list + previewZoom: 13, + // The zoom level of the map in the new openstreetmap tab upon + // Opening the link + linkZoom: 18, + + } + }, + + computed: { + center() { + return [this.latitude, this.longitude] + }, + + mapLink() { + return `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=${this.linkZoom}/${this.latitude}/${this.longitude}` + }, + + linkAriaLabel() { + return t('spreed', 'Open this location in Openstreetmap') + }, + }, +} +</script> + +<style lang="scss" scoped> +.location { + display: flex; + flex-direction: column; + position: relative; + z-index: 1; + white-space: initial; + overflow: hidden; + border-radius: var(--border-radius-large); + height: 300px; + max-height: 30vh; + margin: 4px; +} +</style> diff --git a/src/main.js b/src/main.js index 2332e0463..3d0e43e8e 100644 --- a/src/main.js +++ b/src/main.js @@ -48,6 +48,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' // Styles import '@nextcloud/dialogs/styles/toast.scss' +import 'leaflet/dist/leaflet.css' + +// Leaflet icon patch +import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package +// eslint-disable-next-line +import 'leaflet-defaulticon-compatibility' // CSP config for webpack dynamic chunk loading // eslint-disable-next-line diff --git a/src/mainFilesSidebar.js b/src/mainFilesSidebar.js index c0ce3c230..469616847 100644 --- a/src/mainFilesSidebar.js +++ b/src/mainFilesSidebar.js @@ -43,6 +43,12 @@ import vOutsideEvents from 'vue-outside-events' // Styles import '@nextcloud/dialogs/styles/toast.scss' +import 'leaflet/dist/leaflet.css' + +// Leaflet icon patch +import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package +// eslint-disable-next-line +import 'leaflet-defaulticon-compatibility' // CSP config for webpack dynamic chunk loading // eslint-disable-next-line diff --git a/src/mainPublicShareAuthSidebar.js b/src/mainPublicShareAuthSidebar.js index dd28fca0f..9d72012a3 100644 --- a/src/mainPublicShareAuthSidebar.js +++ b/src/mainPublicShareAuthSidebar.js @@ -39,6 +39,12 @@ import vOutsideEvents from 'vue-outside-events' // Styles import '@nextcloud/dialogs/styles/toast.scss' +import 'leaflet/dist/leaflet.css' + +// Leaflet icon patch +import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package +// eslint-disable-next-line +import 'leaflet-defaulticon-compatibility' // CSP config for webpack dynamic chunk loading // eslint-disable-next-line diff --git a/src/mainPublicShareSidebar.js b/src/mainPublicShareSidebar.js index a47184a55..40d1f90ee 100644 --- a/src/mainPublicShareSidebar.js +++ b/src/mainPublicShareSidebar.js @@ -38,6 +38,12 @@ import vOutsideEvents from 'vue-outside-events' // Styles import '@nextcloud/dialogs/styles/toast.scss' +import 'leaflet/dist/leaflet.css' + +// Leaflet icon patch +import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package +// eslint-disable-next-line +import 'leaflet-defaulticon-compatibility' // CSP config for webpack dynamic chunk loading // eslint-disable-next-line |