Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.

Browse Source 
- Added possibility to follow groups and be notified from new upcoming events
 - Export list of participants to CSV, `PDF` and `ODS`
 - Allow to set timezone for an event. The timezone is automatically defined from the address if one is defined. If the event timezone is different than the user's current one, a toggle is shown to switch between the two.
 - Added initial support for Right To Left languages (such as arabic) and [BiDi](https://en.wikipedia.org/wiki/Bidirectional_text)
 - Group followers and members get an notification email by default when a group publishes a new event (subject to activity notification settings)
 - Group admins can now approve or deny new memberships
 - Build releases in `arm` and `arm64` format in addition to `amd64`
 - Build Docker images in `arm` and `arm64` format in addition to `amd64`
 - Added possibility to indicate the event is fully online
 - Added possibility to search only for online events
 - Added possibility to search only in past events
 - Detect event, comments and posts languages automatically. Allows setting language
 - Allow to change an user's password through the users.modify mix task
 - Add instance setting so that only the admin can create groups
 - Add instance setting so that only groups can create events
 - Added JSON-LD metadata about the event in emails
 - Added a quick link to email notification settings at the bottom of emails
 - Allow to access Mobilizon with a specific language directly by using `https://instance.tld/lang` where `lang` is a language supported by Mobilizon
 - Added organizer actor name (profile or group) in the icalendar export
 - Add initial support for federation with Gancio
 
 - Multiple UI improvements, including post, event and participation cards, discussions and emails. The « My Events » page was also redesigned to allow showing events from your groups.
 - Various accessibility improvements
 - Event update notification is send to participants ~30 minutes after the event update, so that successive edits are throttled.
 - Event, post and comments titles and content now have expose their detected language in HTML, for improved screen reader experience
 - Delete current actor ID as well from local storage when unlogging
 - Show a default text for instance contact in default terms text when no instance contact is set
 - Only show locatecontrol button in leaflet map when we can do geolocation
 - Disable push column in notification settings when push is not available
 - Show actual language instead of language code in Users admin view
 - Empty old & new passwords fields when successful password change
 - Don't link to the group page from admin when actor is suspended
 - Warn participants when the event organizer is suspended (and therefore the event cancelled)
 - Improve metadata on public page
 - Make sure some event action pages (participate remotely or without an account) don't get indexed by search engines
 - Only send `Tombstone` element in `Delete` activities, not the whole previous deleted element.
 - Make sure `Delete` activity are send correctly to everyone
 - Only add address and tags to event icalendar export if they exist
 - `master` branch has been renamed to `main`
 - Mention following groups on the registration page
 - Add missing group name to activity notifications
 - Warn while registering and logging when the email contains uppercase characters
 - Improve json-ld metadata on event live streams
 - Add "eventAttendanceMode" to JSON-ld schema.org event representation
 - Improve sending pending participation notifications
 - Add "formerType" and "delete" attributes on Tombstones ActivityPub objects representation
 - Improve MyEvents page description text
 
 - Support for Elixir < 1.12 and OTP < 22
 
 - Fix tags autocomplete
 - Fix config onboarding after LDAP initial connexion
 - Fix events pagination on tags page
 - Fixed deduplicated files from orphan media being deleted as well
 - Fix deleting own account
 - Fix search returning user profiles instead of only groups
 - Fix federating geo coordinates
 - Fix an issue with group activity items when moving resources
 - Fix an issue with Identity Picker
 - Fix an issue with TagInput
 - Fix an issue when leaving a group
 - Fix admin settings edition
 - Fix an issue when showing public page of suspended group
 - Removed non existing page (`/about/mobilizon`) from sitemap
 - Fix action logs containing group suspension events
 - Fixed group physical address not exposed to ActivityPub
 - Release front-end files are no longer in duplicate
 - Only show datetime timezone toggle on event if the timezone offset is different from our own
 - Fix error when determining audience for Discussion when deleting a comment
 - Fix a couple of accessibility issues
 - Limit to acceptable tags when pasting raw HTML into comment fields on front-end
 - Fixed group map display
 - Fixed updating group physical address
 - Allow group members to access group drafts
 - Improve group refreshment workflow
 - Fixed date signature generation for federation
 - Fixed an issue when duplicating a group event from another profile
 - Fixed event metadata not saved on eventcreation
 - Use a different pagination parameter for searched events and featured events on search page
 - Fixed creating group activities when creating events with some fields
 - Move release package at correct path for CI upload
 - Fixed event contacts that were not exposed and fetched over federation
 - Don't sign fetch when fetching actor for a given signature
 - Some various HTTP signatures issues
 - Fixed actor AP representation of avatar
 - Handle errors when fetching actor pictures
 - Fixed sending group events to followers on Mastodon
 - Fixed actors avatars and banners being deleted if the same file was also an orphan media
 - Fix spacing in organizer picker
 - Increase number of close events and follow group events
 - Fix accessing user profile in admin section
 - Set initial values for some EventMetadata elements, fixing submitting them right away with no value
 - Avoid giving an error page if the apollo futureParticipations query is undefined
 - Fixed path to exports in production
 - Fixed padding below truncated title of event cards
 - Fixed exports that weren't enabled in Docker
 - Fixed error page when event end date is null
 - Fixed event language not being allowed to be null
 
 - Fixed private messages sent as event replies from Mastodon that were shown publically as public comments. They are now discarded.
 
 - Czech
 - Gaelic
 - German
 - Hungarian
 - Indonesian
 - Norwegian Nynorsk
 - Occitan
 - Persian
 - Portuguese (Brazil)
 - Russian
 - Slovenian
 - Spanish
 -----BEGIN PGP SIGNATURE-----
 
 iQIzBAABCAAdFiEExMITpfxOHHCvHn8FoGG53eDKB3MFAmGcqEMACgkQoGG53eDK
 B3NlaA/8DoAi7WtC+//xJn8tRSP04PuTRDi2+9/D9a6gjTsiPXDZdb7LtEHuCg1H
 PXsHNQOTafUM/T7b7XTGmKOST3Sz2kw4eKJArCyF+NuvCwiO/Iw/v1wev2Mo8vvC
 eDBbMkfiCnMHcytqheeM9gvGuRyIOfgQ9uPk54snfa9a+SGELR5XDRKhwBlGAs6i
 nkUPbOB72oCou79HZ6CjyLTG6CoWUVsheuvAEhYw52e5JlWSJb9yOUdnOYUV1sr6
 OzLct996Z3IOQX4ToaQ+Re99tOaEyqO98aHsv+Wbz128sku0WrfseKn9zi3PL6cF
 LYjtZ9+0dwdNi3MfgKoEoWJaMlN3+6WUw/blcVP+6b6Ibn5YV/HkVacke/rGoAry
 oiEjP4HFKnvT83dTBn+LRcU6MY3MrZsarjUACjcKIwpTiylw9gaqA0i7dPBdW35p
 Q4c1gIh1Q/aE5OKCxXGLrg6s1SNZ754cAyEVo85UnF8Iu4wiaY++ImvyG8xIoOWf
 vQuya3LcDT8Gj9KY/LWMrVT8LJ2ij5t8oRMFLIHLlfiWbq05m6QaBIWr5sLjLO/N
 w2N1//ZHNM3sJNl0bZgc9g4lhcdj52VhOcHLot4fdcg5RTektCK0ky5uTD4WJ3GP
 keihAR8ZtFLaiAQ+XN6ng3IhrgQcpIdJBLlHzgFBx2rTBy8a0Tw=
 =jyrf
 -----END PGP SIGNATURE-----

Merge tag '2.0.0' into chapril

Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.

- Added possibility to follow groups and be notified from new upcoming events
- Export list of participants to CSV, `PDF` and `ODS`
- Allow to set timezone for an event. The timezone is automatically defined from the address if one is defined. If the event timezone is different than the user's current one, a toggle is shown to switch between the two.
- Added initial support for Right To Left languages (such as arabic) and [BiDi](https://en.wikipedia.org/wiki/Bidirectional_text)
- Group followers and members get an notification email by default when a group publishes a new event (subject to activity notification settings)
- Group admins can now approve or deny new memberships
- Build releases in `arm` and `arm64` format in addition to `amd64`
- Build Docker images in `arm` and `arm64` format in addition to `amd64`
- Added possibility to indicate the event is fully online
- Added possibility to search only for online events
- Added possibility to search only in past events
- Detect event, comments and posts languages automatically. Allows setting language
- Allow to change an user's password through the users.modify mix task
- Add instance setting so that only the admin can create groups
- Add instance setting so that only groups can create events
- Added JSON-LD metadata about the event in emails
- Added a quick link to email notification settings at the bottom of emails
- Allow to access Mobilizon with a specific language directly by using `https://instance.tld/lang` where `lang` is a language supported by Mobilizon
- Added organizer actor name (profile or group) in the icalendar export
- Add initial support for federation with Gancio

- Multiple UI improvements, including post, event and participation cards, discussions and emails. The « My Events » page was also redesigned to allow showing events from your groups.
- Various accessibility improvements
- Event update notification is send to participants ~30 minutes after the event update, so that successive edits are throttled.
- Event, post and comments titles and content now have expose their detected language in HTML, for improved screen reader experience
- Delete current actor ID as well from local storage when unlogging
- Show a default text for instance contact in default terms text when no instance contact is set
- Only show locatecontrol button in leaflet map when we can do geolocation
- Disable push column in notification settings when push is not available
- Show actual language instead of language code in Users admin view
- Empty old & new passwords fields when successful password change
- Don't link to the group page from admin when actor is suspended
- Warn participants when the event organizer is suspended (and therefore the event cancelled)
- Improve metadata on public page
- Make sure some event action pages (participate remotely or without an account) don't get indexed by search engines
- Only send `Tombstone` element in `Delete` activities, not the whole previous deleted element.
- Make sure `Delete` activity are send correctly to everyone
- Only add address and tags to event icalendar export if they exist
- `master` branch has been renamed to `main`
- Mention following groups on the registration page
- Add missing group name to activity notifications
- Warn while registering and logging when the email contains uppercase characters
- Improve json-ld metadata on event live streams
- Add "eventAttendanceMode" to JSON-ld schema.org event representation
- Improve sending pending participation notifications
- Add "formerType" and "delete" attributes on Tombstones ActivityPub objects representation
- Improve MyEvents page description text

- Support for Elixir < 1.12 and OTP < 22

- Fix tags autocomplete
- Fix config onboarding after LDAP initial connexion
- Fix events pagination on tags page
- Fixed deduplicated files from orphan media being deleted as well
- Fix deleting own account
- Fix search returning user profiles instead of only groups
- Fix federating geo coordinates
- Fix an issue with group activity items when moving resources
- Fix an issue with Identity Picker
- Fix an issue with TagInput
- Fix an issue when leaving a group
- Fix admin settings edition
- Fix an issue when showing public page of suspended group
- Removed non existing page (`/about/mobilizon`) from sitemap
- Fix action logs containing group suspension events
- Fixed group physical address not exposed to ActivityPub
- Release front-end files are no longer in duplicate
- Only show datetime timezone toggle on event if the timezone offset is different from our own
- Fix error when determining audience for Discussion when deleting a comment
- Fix a couple of accessibility issues
- Limit to acceptable tags when pasting raw HTML into comment fields on front-end
- Fixed group map display
- Fixed updating group physical address
- Allow group members to access group drafts
- Improve group refreshment workflow
- Fixed date signature generation for federation
- Fixed an issue when duplicating a group event from another profile
- Fixed event metadata not saved on eventcreation
- Use a different pagination parameter for searched events and featured events on search page
- Fixed creating group activities when creating events with some fields
- Move release package at correct path for CI upload
- Fixed event contacts that were not exposed and fetched over federation
- Don't sign fetch when fetching actor for a given signature
- Some various HTTP signatures issues
- Fixed actor AP representation of avatar
- Handle errors when fetching actor pictures
- Fixed sending group events to followers on Mastodon
- Fixed actors avatars and banners being deleted if the same file was also an orphan media
- Fix spacing in organizer picker
- Increase number of close events and follow group events
- Fix accessing user profile in admin section
- Set initial values for some EventMetadata elements, fixing submitting them right away with no value
- Avoid giving an error page if the apollo futureParticipations query is undefined
- Fixed path to exports in production
- Fixed padding below truncated title of event cards
- Fixed exports that weren't enabled in Docker
- Fixed error page when event end date is null
- Fixed event language not being allowed to be null

- Fixed private messages sent as event replies from Mastodon that were shown publically as public comments. They are now discarded.

- Czech
- Gaelic
- German
- Hungarian
- Indonesian
- Norwegian Nynorsk
- Occitan
- Persian
- Portuguese (Brazil)
- Russian
- Slovenian
- Spanish
This commit is contained in:
Tykayn 2021-12-09 15:51:26 +01:00 committed by tykayn
commit fa372387aa
844 changed files with 53913 additions and 30535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.doctor.exs Normal file
View File

@ -0,0 +1,15 @@
%Doctor.Config{
exception_moduledoc_required: true,
failed: false,
ignore_modules: [Mobilizon.Web, Mobilizon.GraphQL.Schema, Mobilizon.Service.Activity.Renderer, Mobilizon.Service.Workers.Helper],
ignore_paths: [],
min_module_doc_coverage: 100,
min_module_spec_coverage: 50,
min_overall_doc_coverage: 100,
min_overall_spec_coverage: 90,
moduledoc_required: true,
raise: false,
reporter: Doctor.Reporters.Full,
struct_type_spec_required: true,
umbrella: false
}

5
.gitignore vendored
View File

@ -27,15 +27,19 @@ priv/data/*
priv/errors/* priv/errors/*
!priv/errors/.gitkeep !priv/errors/.gitkeep
priv/cert/ priv/cert/
priv/python/__pycache__/
.vscode/ .vscode/
cover/ cover/
site/ site/
test/fixtures/image_tmp.jpg test/fixtures/image_tmp.jpg
test/fixtures/picture_tmp.png
test/fixtures/DSCN0010_tmp.jpg test/fixtures/DSCN0010_tmp.jpg
test/uploads/ test/uploads/
uploads/* uploads/*
release/ release/
!uploads/.gitkeep !uploads/.gitkeep
!uploads/exports/.gitkeep
!uploads/exports/**/.gitkeep
.idea .idea
*.mo *.mo
*.po~ *.po~
@ -44,3 +48,4 @@ docker/production/.env
test-junit-report.xml test-junit-report.xml
js/junit.xml js/junit.xml
.env .env
demo/

153
.gitlab-ci.yml
View File

@ -28,6 +28,10 @@ variables:
# Release elements # Release elements
PACKAGE_REGISTRY_URL: "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${CI_PROJECT_NAME}" PACKAGE_REGISTRY_URL: "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${CI_PROJECT_NAME}"
ARCH: "amd64" ARCH: "amd64"
EXPORT_FORMATS: "csv,ods,pdf"
APP_VERSION: "${CI_COMMIT_REF_NAME}"
APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
CYPRESS_INSTALL_BINARY: 0
cache: cache:
key: "${CI_COMMIT_REF_SLUG}-${CI_COMMIT_SHORT_SHA}" key: "${CI_COMMIT_REF_SLUG}-${CI_COMMIT_SHORT_SHA}"
@ -100,23 +104,6 @@ deps:
needs: needs:
- install - install
exunit-1.11:
stage: test
image: tcitworld/mobilizon-ci:legacy
services:
- name: postgis/postgis:11-3.0
alias: postgres
variables:
MIX_ENV: test
before_script:
- mix deps.clean --all
- mix deps.get
- mix ecto.create
- mix ecto.migrate
script:
- mix coveralls
allow_failure: true
exunit: exunit:
stage: test stage: test
services: services:
@ -125,7 +112,7 @@ exunit:
variables: variables:
MIX_ENV: test MIX_ENV: test
before_script: before_script:
- mix deps.get - mix deps.get && mix tz_world.update
- mix ecto.create - mix ecto.create
- mix ecto.migrate - mix ecto.migrate
script: script:
@ -185,7 +172,7 @@ pages:
# #- yarn run --cwd "js" styleguide:build # #- yarn run --cwd "js" styleguide:build
# #- mv js/styleguide public/frontend # #- mv js/styleguide public/frontend
rules: rules:
- if: '$CI_COMMIT_BRANCH == "master"' - if: '$CI_COMMIT_BRANCH == "main"'
artifacts: artifacts:
expire_in: 1 hour expire_in: 1 hour
paths: paths:
@ -193,24 +180,50 @@ pages:
.docker: &docker .docker: &docker
stage: docker stage: docker
image: docker:stable
variables:
DOCKER_TLS_CERTDIR: "/certs"
DOCKER_HOST: tcp://docker:2376
DOCKER_TLS_VERIFY: 1
DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
DOCKER_DRIVER: overlay2
services:
- docker:stable-dind
cache: {} cache: {}
image:
name: gcr.io/kaniko-project/executor:debug
entrypoint: [""]
before_script: before_script:
- mkdir -p /kaniko/.docker # Install buildx
- echo "{\"auths\":{\"$CI_REGISTRY\":{\"auth\":\"$CI_REGISTRY_AUTH\",\"email\":\"$CI_REGISTRY_EMAIL\"}}}" > /kaniko/.docker/config.json - wget https://github.com/docker/buildx/releases/download/v0.6.3/buildx-v0.6.3.linux-amd64
- mkdir -p ~/.docker/cli-plugins/
- mv buildx-v0.6.3.linux-amd64 ~/.docker/cli-plugins/docker-buildx
- chmod a+x ~/.docker/cli-plugins/docker-buildx
# Create env
- docker context create tls-environment
- docker buildx create --use tls-environment
# Install qemu/binfmt
- docker pull tonistiigi/binfmt:latest
- docker run --rm --privileged tonistiigi/binfmt:latest --install all
# Login to DockerHub
- mkdir -p ~/.docker
- echo "{\"auths\":{\"$CI_REGISTRY\":{\"auth\":\"$CI_REGISTRY_AUTH\",\"email\":\"$CI_REGISTRY_EMAIL\"}}}" > ~/.docker/config.json
script: script:
- /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/docker/production/Dockerfile --destination $DOCKER_IMAGE_NAME --build-arg VCS_REF=$CI_VCS_REF --build-arg BUILD_DATE=$CI_JOB_TIMESTAMP - >
docker buildx build
--push
--platform linux/amd64,linux/arm64,linux/arm
-t $DOCKER_IMAGE_NAME
-f docker/production/Dockerfile .
tags:
- "privileged"
timeout: 3 hours
build-docker-master: build-docker-main:
<<: *docker <<: *docker
rules: rules:
- if: '$CI_PROJECT_NAMESPACE != "framasoft"' - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
when: never when: never
- if: '$CI_PIPELINE_SOURCE == "schedule"' - if: '$CI_PIPELINE_SOURCE == "schedule"'
variables: variables:
DOCKER_IMAGE_NAME: framasoft/mobilizon:master DOCKER_IMAGE_NAME: framasoft/mobilizon:main
build-docker-tag: build-docker-tag:
<<: *docker <<: *docker
@ -221,6 +234,7 @@ build-docker-tag:
variables: variables:
DOCKER_IMAGE_NAME: framasoft/mobilizon:$CI_COMMIT_TAG DOCKER_IMAGE_NAME: framasoft/mobilizon:$CI_COMMIT_TAG
# Packaging app for amd64
package-app: package-app:
stage: package stage: package
variables: &release-variables variables: &release-variables
@ -228,16 +242,21 @@ package-app:
script: &release-script script: &release-script
- mix local.hex --force - mix local.hex --force
- mix local.rebar --force - mix local.rebar --force
- mix deps.get - mix deps.get --only-prod
- mix phx.digest - mix compile
- mix phx.digest.clean --all && \
- mix release --path release/mobilizon - mix release --path release/mobilizon
- cd release/mobilizon && ln -s lib/mobilizon-*/priv priv - cd release/mobilizon && ln -s lib/mobilizon-*/priv priv && cd ../../
- du -sh release/
- 'echo "Artifact: ${APP_ASSET}"'
- tar czf ${APP_ASSET} -C release mobilizon
- du -sh ${APP_ASSET}
only: only:
- tags@framasoft/mobilizon - tags@framasoft/mobilizon
artifacts: artifacts:
expire_in: 30 days expire_in: 30 days
paths: paths:
- release - ${APP_ASSET}
package-app-dev: package-app-dev:
stage: package stage: package
@ -248,20 +267,63 @@ package-app-dev:
artifacts: artifacts:
expire_in: 2 days expire_in: 2 days
paths: paths:
- release - ${APP_ASSET}
# Packaging app for multi-arch
multi-arch-release:
stage: package
image: docker:stable
variables:
DOCKER_TLS_CERTDIR: "/certs"
DOCKER_HOST: tcp://docker:2376
DOCKER_TLS_VERIFY: 1
DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
DOCKER_DRIVER: overlay2
APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
services:
- docker:stable-dind
cache: {}
before_script:
# Install buildx
- wget https://github.com/docker/buildx/releases/download/v0.6.3/buildx-v0.6.3.linux-amd64
- mkdir -p ~/.docker/cli-plugins/
- mv buildx-v0.6.3.linux-amd64 ~/.docker/cli-plugins/docker-buildx
- chmod a+x ~/.docker/cli-plugins/docker-buildx
# Create env
- docker context create tls-environment
- docker buildx create --use tls-environment
# Install qemu/binfmt
- docker pull tonistiigi/binfmt:latest
- docker run --rm --privileged tonistiigi/binfmt:latest --install all
script:
- docker buildx build --platform linux/${ARCH} --output type=local,dest=releases --build-arg APP_ASSET=${APP_ASSET} -f docker/multiarch/Dockerfile .
- ls -alh releases/mobilizon/
- du -sh releases/mobilizon/${APP_ASSET}
- mv releases/mobilizon/${APP_ASSET} .
tags:
- "privileged"
artifacts:
expire_in: 30 days
paths:
- ${APP_ASSET}
parallel:
matrix:
- ARCH: ["arm", "arm64"]
rules:
- if: '$CI_PROJECT_NAMESPACE != "framasoft"'
when: never
- if: '$CI_PIPELINE_SOURCE == "schedule"'
- if: $CI_COMMIT_TAG
timeout: 3h
# Release
release-upload: release-upload:
stage: upload stage: upload
image: framasoft/yakforms-assets-deploy:latest image: framasoft/yakforms-assets-deploy:latest
variables:
APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
rules: *tag-rules rules: *tag-rules
script: script:
- APP_VERSION="${CI_COMMIT_TAG}"
- APP_ASSET="${CI_PROJECT_NAME}_${APP_VERSION}_${ARCH}.tar.gz"
- 'echo "Artifact: ${APP_ASSET}"'
- tar czf ${APP_ASSET} -C release mobilizon
- ls -al ${APP_ASSET}
- eval `ssh-agent -s` - eval `ssh-agent -s`
- ssh-add <(echo "${DEPLOYEMENT_KEY}" | base64 --decode -i) - ssh-add <(echo "${DEPLOYEMENT_KEY}" | base64 --decode -i)
- echo "put -r ${APP_ASSET}" | sftp -o "VerifyHostKeyDNS yes" ${DEPLOYEMENT_USER}@${DEPLOYEMENT_HOST}:public/ - echo "put -r ${APP_ASSET}" | sftp -o "VerifyHostKeyDNS yes" ${DEPLOYEMENT_USER}@${DEPLOYEMENT_HOST}:public/
@ -270,20 +332,27 @@ release-upload:
when: on_success when: on_success
paths: paths:
- mobilizon_*.tar.gz - mobilizon_*.tar.gz
parallel:
matrix:
- ARCH: ["amd64", "arm", "arm64"]
release-create: release-create:
stage: deploy stage: deploy
image: registry.gitlab.com/gitlab-org/release-cli:latest image: registry.gitlab.com/gitlab-org/release-cli:latest
rules: *tag-rules rules: *tag-rules
variables:
APP_ASSET_AMD64: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_amd64.tar.gz"
APP_ASSET_ARM: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_arm.tar.gz"
APP_ASSET_ARM64: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_arm64.tar.gz"
before_script: before_script:
- apk --no-cache add gawk sed grep - apk --no-cache add gawk sed grep
script: | script: |
APP_VERSION="${CI_COMMIT_TAG}"
APP_ASSET="${CI_PROJECT_NAME}_${APP_VERSION}_${ARCH}.tar.gz"
CHANGELOG=$(awk -v version="$APP_VERSION" '/^## / { printit = $2 == version }; printit' CHANGELOG.md | grep -v "## $APP_VERSION" | sed '1{/^$/d}') CHANGELOG=$(awk -v version="$APP_VERSION" '/^## / { printit = $2 == version }; printit' CHANGELOG.md | grep -v "## $APP_VERSION" | sed '1{/^$/d}')
ENDPOINT="https://packages.joinmobilizon.org" ENDPOINT="https://packages.joinmobilizon.org"
release-cli create --name "$CI_COMMIT_TAG" \ release-cli create --name "$CI_COMMIT_TAG" \
--description "$CHANGELOG" \ --description "$CHANGELOG" \
--tag-name "$CI_COMMIT_TAG" \ --tag-name "$CI_COMMIT_TAG" \
--assets-link "{\"name\":\"${APP_ASSET}\",\"url\":\"${ENDPOINT}/${APP_ASSET}\"}" --assets-link "{\"name\":\"${APP_ASSET_AMD64}\",\"url\":\"${ENDPOINT}/${APP_ASSET_AMD64}\"}" \
--assets-link "{\"name\":\"${APP_ASSET_ARM}\",\"url\":\"${ENDPOINT}/${APP_ASSET_ARM}\"}" \
--assets-link "{\"name\":\"${APP_ASSET_ARM64}\",\"url\":\"${ENDPOINT}/${APP_ASSET_ARM64}\"}"

1
.sobelow-skips
View File

@ -9,3 +9,4 @@
BBACD7F0BACD4A6D3010C26604671692 BBACD7F0BACD4A6D3010C26604671692
6D4D4A4821B93BCFAC9CDBB367B34C4B 6D4D4A4821B93BCFAC9CDBB367B34C4B
5674F0D127852889ED0132DC2F442AAB 5674F0D127852889ED0132DC2F442AAB
1600B7206E47F630D94AB54C360906F0

386
CHANGELOG.md
View File

@ -1,11 +1,344 @@
# Changelog # Changelog
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## 1.3.0 - 2021-08-12 ## 2.0.0 - 2021-11-23
Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
### Added
- Added possibility to follow groups and be notified from new upcoming events
- Export list of participants to CSV, `PDF` and `ODS`
- Allow to set timezone for an event. The timezone is automatically defined from the address if one is defined. If the event timezone is different than the user's current one, a toggle is shown to switch between the two.
- Added initial support for Right To Left languages (such as arabic) and [BiDi](https://en.wikipedia.org/wiki/Bidirectional_text)
- Group followers and members get an notification email by default when a group publishes a new event (subject to activity notification settings)
- Group admins can now approve or deny new memberships
- Build releases in `arm` and `arm64` format in addition to `amd64`
- Build Docker images in `arm` and `arm64` format in addition to `amd64`
- Added possibility to indicate the event is fully online
- Added possibility to search only for online events
- Added possibility to search only in past events
- Detect event, comments and posts languages automatically. Allows setting language
- Allow to change an user's password through the users.modify mix task
- Add instance setting so that only the admin can create groups
- Add instance setting so that only groups can create events
- Added JSON-LD metadata about the event in emails
- Added a quick link to email notification settings at the bottom of emails
- Allow to access Mobilizon with a specific language directly by using `https://instance.tld/lang` where `lang` is a language supported by Mobilizon
- Added organizer actor name (profile or group) in the icalendar export
- Add initial support for federation with Gancio
### Changed
- Multiple UI improvements, including post, event and participation cards, discussions and emails. The « My Events » page was also redesigned to allow showing events from your groups.
- Various accessibility improvements
- Event update notification is send to participants ~30 minutes after the event update, so that successive edits are throttled.
- Event, post and comments titles and content now have expose their detected language in HTML, for improved screen reader experience
- Delete current actor ID as well from local storage when unlogging
- Show a default text for instance contact in default terms text when no instance contact is set
- Only show locatecontrol button in leaflet map when we can do geolocation
- Disable push column in notification settings when push is not available
- Show actual language instead of language code in Users admin view
- Empty old & new passwords fields when successful password change
- Don't link to the group page from admin when actor is suspended
- Warn participants when the event organizer is suspended (and therefore the event cancelled)
- Improve metadata on public page
- Make sure some event action pages (participate remotely or without an account) don't get indexed by search engines
- Only send `Tombstone` element in `Delete` activities, not the whole previous deleted element.
- Make sure `Delete` activity are send correctly to everyone
- Only add address and tags to event icalendar export if they exist
- `master` branch has been renamed to `main`
- Mention following groups on the registration page
- Add missing group name to activity notifications
- Warn while registering and logging when the email contains uppercase characters
- Improve json-ld metadata on event live streams
- Add "eventAttendanceMode" to JSON-ld schema.org event representation
- Improve sending pending participation notifications
- Add "formerType" and "delete" attributes on Tombstones ActivityPub objects representation
- Improve MyEvents page description text
### Removed
- Support for Elixir < 1.12 and OTP < 22
### Fixed
- Fix tags autocomplete
- Fix config onboarding after LDAP initial connexion
- Fix events pagination on tags page
- Fixed deduplicated files from orphan media being deleted as well
- Fix deleting own account
- Fix search returning user profiles instead of only groups
- Fix federating geo coordinates
- Fix an issue with group activity items when moving resources
- Fix an issue with Identity Picker
- Fix an issue with TagInput
- Fix an issue when leaving a group
- Fix admin settings edition
- Fix an issue when showing public page of suspended group
- Removed non existing page (`/about/mobilizon`) from sitemap
- Fix action logs containing group suspension events
- Fixed group physical address not exposed to ActivityPub
- Release front-end files are no longer in duplicate
- Only show datetime timezone toggle on event if the timezone offset is different from our own
- Fix error when determining audience for Discussion when deleting a comment
- Fix a couple of accessibility issues
- Limit to acceptable tags when pasting raw HTML into comment fields on front-end
- Fixed group map display
- Fixed updating group physical address
- Allow group members to access group drafts
- Improve group refreshment workflow
- Fixed date signature generation for federation
- Fixed an issue when duplicating a group event from another profile
- Fixed event metadata not saved on eventcreation
- Use a different pagination parameter for searched events and featured events on search page
- Fixed creating group activities when creating events with some fields
- Move release package at correct path for CI upload
- Fixed event contacts that were not exposed and fetched over federation
- Don't sign fetch when fetching actor for a given signature
- Some various HTTP signatures issues
- Fixed actor AP representation of avatar
- Handle errors when fetching actor pictures
- Fixed sending group events to followers on Mastodon
- Fixed actors avatars and banners being deleted if the same file was also an orphan media
- Fix spacing in organizer picker
- Increase number of close events and follow group events
- Fix accessing user profile in admin section
- Set initial values for some EventMetadata elements, fixing submitting them right away with no value
- Avoid giving an error page if the apollo futureParticipations query is undefined
- Fixed path to exports in production
- Fixed padding below truncated title of event cards
- Fixed exports that weren't enabled in Docker
- Fixed error page when event end date is null
- Fixed event language not being allowed to be null
### Security
- Fixed private messages sent as event replies from Mastodon that were shown publically as public comments. They are now discarded.
### Translations
- Czech
- Gaelic
- German
- Hungarian
- Indonesian
- Norwegian Nynorsk
- Occitan
- Persian
- Portuguese (Brazil)
- Russian
- Slovenian
- Spanish
## 2.0.0-rc.3 - 2021-11-22
This lists changes since 2.0.0-rc.3. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
### Fixed
- Fixed path to exports in production
- Fixed padding below truncated title of event cards
- Fixed exports that weren't enabled in Docker
- Fixed error page when event end date is null
## 2.0.0-rc.2 - 2021-11-22
This lists changes since 2.0.0-rc.1. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
### Changed
- Improve MyEvents page description text
### Fixed
- Fix spacing in organizer picker
- Increase number of close events and follow group events
- Fix accessing user profile in admin section
- Set initial values for some EventMetadata elements, fixing submitting them right away with no value
- Avoid giving an error page if the apollo futureParticipations query is undefined
### Translations
- German
- Hungarian
## 2.0.0-rc.1 - 2021-11-20
This lists changes since 2.0.0-beta.2. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
### Changed
- Mention following groups on the registration page
- Add missing group name to activity notifications
- Warn while registering and logging when the email contains uppercase characters
- Improve json-ld metadata on event live streams
- Add "eventAttendanceMode" to JSON-ld schema.org event representation
- Improve sending pending participation notifications
- Add "formerType" and "delete" attributes on Tombstones ActivityPub objects representation
### Fixed
- Fixed creating group activities when creating events with some fields
- Move release package at correct path for CI upload
- Fixed event contacts that were not exposed and fetched over federation
- Don't sign fetch when fetching actor for a given signature
- Some various HTTP signatures issues
- Fixed actor AP representation of avatar
- Handle errors when fetching actor pictures
- Fixed sending group events to followers on Mastodon
- Fixed actors avatars and banners being deleted if the same file was also an orphan media
### Translations
- Gaelic
- Spanish
## 2.0.0-beta.2 - 2021-11-15
This lists changes since 2.0.0-beta.1. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
### Added
- Group followers and members get an notification email by default when a group publishes a new event (subject to activity notification settings)
- Group admins can now approve or deny new memberships
- Added organizer actor name (profile or group) in the icalendar export
- Add initial support for federation with Gancio
### Changed
- Event update notification is send to participants ~30 minutes after the event update, so that successive edits are throttled.
- Event, post and comments titles and content now have expose their detected language in HTML, for improved screen reader experience
### Fixed
- Release front-end files are no longer in duplicate
- Only show datetime timezone toggle on event if the timezone offset is different from our own
- Fix error when determining audience for Discussion when deleting a comment
- Fix a couple of accessibility issues
- Limit to acceptable tags when pasting raw HTML into comment fields on front-end
- Fixed group map display
- Fixed updating group physical address
- Allow group members to access group drafts
- Improve group refreshment workflow
- Fixed date signature generation for federation
- Fixed an issue when duplicating a group event from another profile
- Fixed event metadata not saved on eventcreation
- Use a different pagination parameter for searched events and featured events on search page
### Translations
- Gaelic
- Spanish
## 2.0.0-beta.1 - 2021-11-09
Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
### Added
- Added possibility to follow groups and be notified from new upcoming events
- Export list of participants to CSV, `PDF` and `ODS`
- Allow to set timezone for an event. The timezone is automatically defined from the address if one is defined. If the event timezone is different than the user's current one, a toggle is shown to switch between the two.
- Added initial support for Right To Left languages (such as arabic) and [BiDi](https://en.wikipedia.org/wiki/Bidirectional_text)
- Build releases in `arm` and `arm64` format in addition to `amd64`
- Build Docker images in `arm` and `arm64` format in addition to `amd64`
- Added possibility to indicate the event is fully online
- Added possibility to search only for online events
- Added possibility to search only in past events
- Detect event, comments and posts languages automatically. Allows setting language
- Allow to change an user's password through the users.modify mix task
- Add instance setting so that only the admin can create groups
- Add instance setting so that only groups can create events
- Added JSON-LD metadata about the event in emails
- Added a quick link to email notification settings at the bottom of emails
- Allow to access Mobilizon with a specific language directly by using `https://instance.tld/lang` where `lang` is a language supported by Mobilizon
### Changed
- Multiple UI improvements, including post, event and participation cards, discussions and emails. The « My Events » page was also redesigned to allow showing events from your groups.
- Various accessibility improvements
- Delete current actor ID as well from local storage when unlogging
- Show a default text for instance contact in default terms text when no instance contact is set
- Only show locatecontrol button in leaflet map when we can do geolocation
- Disable push column in notification settings when push is not available
- Show actual language instead of language code in Users admin view
- Empty old & new passwords fields when successful password change
- Don't link to the group page from admin when actor is suspended
- Warn participants when the event organizer is suspended (and therefore the event cancelled)
- Improve metadata on public page
- Make sure some event action pages (participate remotely or without an account) don't get indexed by search engines
- Only send `Tombstone` element in `Delete` activities, not the whole previous deleted element.
- Make sure `Delete` activity are send correctly to everyone
- Only add address and tags to event icalendar export if they exist
- `master` branch has been renamed to `main`
### Removed
- Support for Elixir < 1.12 and OTP < 22
### Fixed
- Fix tags autocomplete
- Fix config onboarding after LDAP initial connexion
- Fix events pagination on tags page
- Fixed deduplicated files from orphan media being deleted as well
- Fix deleting own account
- Fix search returning user profiles instead of only groups
- Fix federating geo coordinates
- Fix an issue with group activity items when moving resources
- Fix an issue with Identity Picker
- Fix an issue with TagInput
- Fix an issue when leaving a group
- Fix admin settings edition
- Fix an issue when showing public page of suspended group
- Removed non existing page (`/about/mobilizon`) from sitemap
- Fix action logs containing group suspension events
- Fixed group physical address not exposed to ActivityPub
### Security
- Fixed private messages sent as event replies from Mastodon that were shown publically as public comments. They are now discarded.
### Translations
- Czech
- Gaelic
- German
- Indonesian
- Norwegian Nynorsk
- Occitan
- Persian
- Portuguese (Brazil)
- Russian
- Slovenian
- Spanish
## 1.3.2 - 2021-08-23
### Fixed
- Fixed deduplicated files from orphan media being cleanup as well
- Fixed config onboarding after initial connection
- Fixed current actor ID not being deleted from localstorage after logout
- Fixed missing pagination on tag exploring page
- Fixed deleting own account
- Fixed user profiles that could show up in group search
- Fixed accessibility issues on the account settings page
## 1.3.1 - 2021-08-20
### Fixed
- Fixed default listen IP and sitemap creation for Docker configurations
- Fixed issues related to user timezone setting being shown as set when it wasn't, leading to timezone sometimes missing and causing issues (#746, #815)
- Fixed issues with managing resources (#837, #838)
### Translations
- Gaelic
- Finnish
- Spanish
## 1.3.0 - 2021-08-17
### Added ### Added
@ -688,23 +1021,23 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
### Special operations ### Special operations
- **Reattach media files to their entity.** * **Reattach media files to their entity.**
When media files were uploaded and added in events and posts bodies, they were only attached to the profile that uploaded them, not to the event or post. This task attaches them back to their entity so that the command to clean orphan media files doesn't remove them. When media files were uploaded and added in events and posts bodies, they were only attached to the profile that uploaded them, not to the event or post. This task attaches them back to their entity so that the command to clean orphan media files doesn't remove them.
- Source install * Source install
`MIX_ENV=prod mix mobilizon.maintenance.fix_unattached_media_in_body` `MIX_ENV=prod mix mobilizon.maintenance.fix_unattached_media_in_body`
- Docker * Docker
`docker-compose exec mobilizon mobilizon_ctl maintenance.fix_unattached_media_in_body` `docker-compose exec mobilizon mobilizon_ctl maintenance.fix_unattached_media_in_body`
- **Refresh remote profiles to save avatars locally** * **Refresh remote profiles to save avatars locally**
Profile avatars and banners were previously only proxified and cached. Now we save them locally. Refreshing all remote actors will save profile media locally instead. Profile avatars and banners were previously only proxified and cached. Now we save them locally. Refreshing all remote actors will save profile media locally instead.
- Source install * Source install
`MIX_ENV=prod mix mobilizon.actors.refresh --all` `MIX_ENV=prod mix mobilizon.actors.refresh --all`
- Docker * Docker
`docker-compose exec mobilizon mobilizon_ctl actors.refresh --all` `docker-compose exec mobilizon mobilizon_ctl actors.refresh --all`
- **imagemagick and webp are now a required dependency** to build Mobilizon. * **imagemagick and webp are now a required dependency** to build Mobilizon.
Optimized versions of Mobilizon's pictures are now produced during front-end build. Optimized versions of Mobilizon's pictures are now produced during front-end build.
See [the documentation](https://docs.joinmobilizon.org/administration/dependencies/#misc) to make sure these dependencies are installed. See [the documentation](https://docs.joinmobilizon.org/administration/dependencies/#misc) to make sure these dependencies are installed.
@ -756,7 +1089,6 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
### Translations ### Translations
Updated translations: Updated translations:
- Catalan - Catalan
- Dutch - Dutch
- English - English
@ -929,15 +1261,14 @@ Updated translations:
### Special operations ### Special operations
- We added `application/ld+json` as acceptable MIME type for ActivityPub requests, so you'll need to recompile the `mime` library we use before recompiling Mobilizon: * We added `application/ld+json` as acceptable MIME type for ActivityPub requests, so you'll need to recompile the `mime` library we use before recompiling Mobilizon:
```
MIX_ENV=prod mix deps.clean mime --build
```
``` * The [nginx configuration](https://framagit.org/framasoft/mobilizon/-/blob/main/support/nginx/mobilizon.conf) has been changed with improvements and support for custom error pages.
MIX_ENV=prod mix deps.clean mime --build
```
- The [nginx configuration](https://framagit.org/framasoft/mobilizon/-/blob/master/support/nginx/mobilizon.conf) has been changed with improvements and support for custom error pages. * The cmake dependency has been added (see [our documentation](https://docs.joinmobilizon.org/administration/dependencies/#basic-tools))
- The cmake dependency has been added (see [our documentation](https://docs.joinmobilizon.org/administration/dependencies/#basic-tools))
### Added ### Added
@ -972,17 +1303,15 @@ Updated translations:
## [1.0.0-beta.3] - 2020-06-24 ## [1.0.0-beta.3] - 2020-06-24
### Special operations ### Special operations
Config has moved from `.env` files to a more traditional way to handle things in the Elixir world, with `.exs` files. Config has moved from `.env` files to a more traditional way to handle things in the Elixir world, with `.exs` files.
To migrate existing configuration, you can simply run `mix mobilizon.instance gen` and fill in the adequate values previously in `.env` files (you don't need to perform the operations to create the database). To migrate existing configuration, you can simply run `mix mobilizon.instance gen` and fill in the adequate values previously in `.env` files (you don't need to perform the operations to create the database).
A minimal file template [is available](https://framagit.org/framasoft/mobilizon/blob/master/priv/templates/config.template.eex) to check for missing configuration. A minimal file template [is available](https://framagit.org/framasoft/mobilizon/blob/main/priv/templates/config.template.eex) to check for missing configuration.
Also make sure to remove the `EnvironmentFile=` line from the systemd service and set `Environment=MIX_ENV=prod` instead. See [the updated file](https://framagit.org/framasoft/mobilizon/blob/master/support/systemd/mobilizon.service). Also make sure to remove the `EnvironmentFile=` line from the systemd service and set `Environment=MIX_ENV=prod` instead. See [the updated file](https://framagit.org/framasoft/mobilizon/blob/main/support/systemd/mobilizon.service).
### Added ### Added
- Possibility to participate to an event without an account (confirmation through email required) - Possibility to participate to an event without an account (confirmation through email required)
- Possibility to participate to a remote event (being redirected by providing federated identity) - Possibility to participate to a remote event (being redirected by providing federated identity)
- Possibility to add a note as a participant when event participation is manually validated (required when participating without an account) - Possibility to add a note as a participant when event participation is manually validated (required when participating without an account)
@ -999,7 +1328,6 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
- Allow user to change language - Allow user to change language
### Changed ### Changed
- Configuration handling (see above) - Configuration handling (see above)
- Improved a bit color theme - Improved a bit color theme
- Signature validation also now checks if `Date` header has acceptable values - Signature validation also now checks if `Date` header has acceptable values
@ -1010,7 +1338,6 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
- Improved public event page - Improved public event page
### Fixed ### Fixed
- Fixed URL search - Fixed URL search
- Fixed content accessed through URL search being public - Fixed content accessed through URL search being public
- Fix event links in some emails - Fix event links in some emails
@ -1018,21 +1345,17 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
## [1.0.0-beta.2] - 2019-12-18 ## [1.0.0-beta.2] - 2019-12-18
### Special operations ### Special operations
These two operations couldn't be handled during migrations. These two operations couldn't be handled during migrations.
They are optional, but you won't be able to search or get participant stats on existing events if they are not executed. They are optional, but you won't be able to search or get participant stats on existing events if they are not executed.
These commands will be removed in Mobilizon 1.0.0-beta.3. These commands will be removed in Mobilizon 1.0.0-beta.3.
In order to populate search index for existing events, you need to run the following command (with prod environment): In order to populate search index for existing events, you need to run the following command (with prod environment):
* `mix mobilizon.setup_search`
- `mix mobilizon.setup_search`
In order to move participant stats to the event table for existing events, you need to run the following command (with prod environment): In order to move participant stats to the event table for existing events, you need to run the following command (with prod environment):
* `mix mobilizon.move_participant_stats`
- `mix mobilizon.move_participant_stats`
### Added ### Added
- Federation is active - Federation is active
- Added an interface for admins to view and manage instance followers and followings - Added an interface for admins to view and manage instance followers and followings
- Ability to comment below events - Ability to comment below events
@ -1057,7 +1380,6 @@ In order to move participant stats to the event table for existing events, you n
- Upgraded frontend and backend dependencies - Upgraded frontend and backend dependencies
### Changed ### Changed
- Move participant stats to event table **(read special instructions above)** - Move participant stats to event table **(read special instructions above)**
- Limit length (20 characters) and number (10) of tags allowed - Limit length (20 characters) and number (10) of tags allowed
- Added some backend changes and validation for field length - Added some backend changes and validation for field length
@ -1071,7 +1393,6 @@ In order to move participant stats to the event table for existing events, you n
- Also consider the PeerTube `CommentsEnabled` property to know if you can reply to an event - Also consider the PeerTube `CommentsEnabled` property to know if you can reply to an event
### Fixed ### Fixed
- Fix event URL validation and check if hostname is correct before showing it - Fix event URL validation and check if hostname is correct before showing it
- Fix participations stats on the MyEvents page - Fix participations stats on the MyEvents page
- Fix event description lists margin - Fix event description lists margin
@ -1101,11 +1422,8 @@ In order to move participant stats to the event table for existing events, you n
- Fixed event HTML representation when `GET` request has no `Accept` header - Fixed event HTML representation when `GET` request has no `Accept` header
### Security ### Security
- Sanitize event title to avoid XSS - Sanitize event title to avoid XSS
## [1.0.0-beta.1] - 2019-10-15 ## [1.0.0-beta.1] - 2019-10-15
### Added ### Added
- Initial release - Initial release

2
Dockerfile
View File

@ -1,6 +1,6 @@
FROM elixir:alpine FROM elixir:alpine
RUN apk add --no-cache inotify-tools postgresql-client yarn file make gcc libc-dev argon2 imagemagick cmake build-base libwebp-tools bash ncurses git RUN apk add --no-cache inotify-tools postgresql-client yarn file make gcc libc-dev argon2 imagemagick cmake build-base libwebp-tools bash ncurses git python3
RUN mix local.hex --force && mix local.rebar --force RUN mix local.hex --force && mix local.rebar --force

18
Makefile
View File

@ -1,5 +1,5 @@
init: init:
@bash docker/message.sh "start" @bash docker/message.sh "Start"
make start make start
setup: stop setup: stop
@ -10,16 +10,18 @@ migrate:
logs: logs:
docker-compose logs -f docker-compose logs -f
start: stop start: stop
@bash docker/message.sh "starting Mobilizon with docker" @bash docker/message.sh "Starting Mobilizon with Docker"
docker-compose up -d api docker-compose up -d api
@bash docker/message.sh "Docker server started." @bash docker/message.sh "Docker server started"
stop: stop:
@bash docker/message.sh "stopping Mobilizon" @bash docker/message.sh "Stopping Mobilizon"
docker-compose down docker-compose down
@bash docker/message.sh "stopped" @bash docker/message.sh "Mobilizon is stopped"
test: stop test: stop
@bash docker/message.sh "Running tests" @bash docker/message.sh "Running tests"
docker-compose -f docker-compose.yml -f docker-compose.test.yml run api mix test docker-compose -f docker-compose.yml -f docker-compose.test.yml run api mix test $(only)
@bash docker/message.sh "Tests runned" @bash docker/message.sh "Done running tests"
format:
docker-compose run --rm api bash -c "mix format && mix credo --strict"
@bash docker/message.sh "Code is now ready to commit :)"
target: init target: init

88
UPGRADE.md
View File

@ -1,3 +1,91 @@
# Upgrading from 1.3 to 2.0
Requirements dependencies depend on the way Mobilizon is installed.
## New Elixir version requirement
### Docker and Release install
You are already using latest Elixir version in the release tarball and Docker images.
### Source install
**Elixir 1.12 and Erlang OTP 22 are now required**. If your distribution or the repositories from Erlang Solutions don't provide these versions, you need to uninstall the current versions and install [Elixir](https://github.com/asdf-vm/asdf-elixir) through the [ASDF tool](https://asdf-vm.com/).
## Geographic timezone data
Mobilizon 2.0 uses data based on [timezone-boundary-builder](https://github.com/evansiroky/timezone-boundary-builder) (which is based itself on OpenStreetMap data) to determine the timezone of an event automatically, based on it's geocoordinates. However, this needs ~700Mio of disk, so we don't redistribute data directly, depending on the case. It's possible to skip this part, but users will need to manually pick the timezone for every event they created when it has a different timezone from their own.
### Docker install
The geographic timezone data is already bundled into the image, you have nothing to do.
### Release install
In order to keep the release tarballs light, the geographic timezone data is not bundled directly. You need to download the data :
* either raw from Github, but **requires an extra ~1Gio of memory** to process the data
```sh
sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
sudo -u mobilizon ./bin/mobilizon_ctl tz_world.update
```
* either already processed from our own distribution server
```sh
sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
sudo -u mobilizon curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
```
In both cases, ~700Mio of disk will be used. You may use the following configuration to specify where the data is expected:
```elixir
config :tz_world, data_dir: "/some/place"
```
### Source install
You need to download the data :
* either raw from Github, but **requires an extra ~1Gio of memory** to process the data
```sh
sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
sudo -u mobilizon mix mobilizon.tz_world.update
```
* either already processed from our own distribution server
```sh
sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
sudo -u mobilizon curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
```
In both cases, ~700Mio of disk will be used. You may use the following configuration to specify where the data is expected:
```elixir
config :tz_world, data_dir: "/some/place"
```
## Exports folder
Create the folder for default CSV export:
```sh
sudo -u mobilizon mkdir -p /var/lib/mobilizon/uploads/exports/csv
```
This path can be configured, see [the dedicated docs page about this](https://docs.joinmobilizon.org/administration/configure/exports/).
Files in this folder are temporary and are cleaned once an hour.
## New optional dependencies
These are optional, installing them will allow Mobilizon to export to PDF and ODS as well. Mobilizon 2.0 allows to export the participant list, but more is planned.
### Docker
Everything is included in our Docker image.
### Release and source install
New optional Python dependencies:
* `Python` >= 3.6
* `weasyprint` for PDF export (with [a few extra dependencies](https://doc.courtbouillon.org/weasyprint/stable/first_steps.html))
* `pyexcel-ods3` for ODS export (no extra dependencies)
Both can be installed through pip. You need to enable and configure exports for PDF and ODS in the configuration afterwards. Read [the dedicated docs page about this](https://docs.joinmobilizon.org/administration/configure/exports/).
# Upgrading from 1.0 to 1.1 # Upgrading from 1.0 to 1.1
The 1.1 version of Mobilizon brings Elixir releases support. An Elixir release is a self-contained directory that contains all of Mobilizon's code (front-end and backend), it's dependencies, as well as the Erlang Virtual Machine and runtime (only the parts you need). As long as the release has been assembled on the same OS and architecture, it can be deploy and run straight away. [Read more about releases](https://elixir-lang.org/getting-started/mix-otp/config-and-releases.html#releases). The 1.1 version of Mobilizon brings Elixir releases support. An Elixir release is a self-contained directory that contains all of Mobilizon's code (front-end and backend), it's dependencies, as well as the Erlang Virtual Machine and runtime (only the parts you need). As long as the release has been assembled on the same OS and architecture, it can be deploy and run straight away. [Read more about releases](https://elixir-lang.org/getting-started/mix-otp/config-and-releases.html#releases).

21
config/config.exs
View File

@ -40,9 +40,11 @@ config :mobilizon, :instance,
email_reply_to: "noreply@localhost" email_reply_to: "noreply@localhost"
config :mobilizon, :groups, enabled: true config :mobilizon, :groups, enabled: true
config :mobilizon, :events, creation: true config :mobilizon, :events, creation: true
config :mobilizon, :restrictions, only_admin_can_create_groups: false
config :mobilizon, :restrictions, only_groups_can_create_events: false
# Configures the endpoint # Configures the endpoint
config :mobilizon, Mobilizon.Web.Endpoint, config :mobilizon, Mobilizon.Web.Endpoint,
url: [ url: [
@ -86,6 +88,10 @@ config :mobilizon, Mobilizon.Web.Upload,
config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "/var/lib/mobilizon/uploads" config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "/var/lib/mobilizon/uploads"
config :tz_world, data_dir: "/var/lib/mobilizon/timezones"
config :mobilizon, Timex.Gettext, default_locale: "en"
config :mobilizon, :media_proxy, config :mobilizon, :media_proxy,
enabled: true, enabled: true,
proxy_opts: [ proxy_opts: [
@ -179,6 +185,8 @@ config :phoenix, :filter_parameters, ["password", "token"]
config :absinthe, schema: Mobilizon.GraphQL.Schema config :absinthe, schema: Mobilizon.GraphQL.Schema
config :absinthe, Absinthe.Logger, filter_variables: ["token", "password", "secret"] config :absinthe, Absinthe.Logger, filter_variables: ["token", "password", "secret"]
config :mobilizon, Mobilizon.Web.Gettext, one_module_per_locale: true
config :ex_cldr, config :ex_cldr,
default_locale: "en", default_locale: "en",
default_backend: Mobilizon.Cldr default_backend: Mobilizon.Cldr
@ -189,7 +197,9 @@ config :http_signatures,
config :mobilizon, :cldr, config :mobilizon, :cldr,
locales: [ locales: [
"fr", "fr",
"en" "en",
"ru",
"ar"
] ]
config :mobilizon, :activitypub, config :mobilizon, :activitypub,
@ -282,6 +292,7 @@ config :mobilizon, Oban,
{"17 4 * * *", Mobilizon.Service.Workers.RefreshGroups, queue: :background}, {"17 4 * * *", Mobilizon.Service.Workers.RefreshGroups, queue: :background},
{"@hourly", Mobilizon.Service.Workers.CleanOrphanMediaWorker, queue: :background}, {"@hourly", Mobilizon.Service.Workers.CleanOrphanMediaWorker, queue: :background},
{"@hourly", Mobilizon.Service.Workers.CleanUnconfirmedUsersWorker, queue: :background}, {"@hourly", Mobilizon.Service.Workers.CleanUnconfirmedUsersWorker, queue: :background},
{"@hourly", Mobilizon.Service.Workers.ExportCleanerWorker, queue: :background},
{"@hourly", Mobilizon.Service.Workers.SendActivityRecapWorker, queue: :notifications}, {"@hourly", Mobilizon.Service.Workers.SendActivityRecapWorker, queue: :notifications},
{"@daily", Mobilizon.Service.Workers.CleanOldActivityWorker, queue: :background} {"@daily", Mobilizon.Service.Workers.CleanOldActivityWorker, queue: :background}
]}, ]},
@ -317,6 +328,12 @@ config :mobilizon, Mobilizon.Service.Notifier.Email, enabled: true
config :mobilizon, Mobilizon.Service.Notifier.Push, enabled: true config :mobilizon, Mobilizon.Service.Notifier.Push, enabled: true
config :mobilizon, :exports,
path: "/var/lib/mobilizon/uploads/exports",
formats: [
Mobilizon.Service.Export.Participants.CSV
]
# Import environment specific config. This must remain at the bottom # Import environment specific config. This must remain at the bottom
# of this file so it overrides the configuration defined above. # of this file so it overrides the configuration defined above.
import_config "#{config_env()}.exs" import_config "#{config_env()}.exs"

6
config/dev.exs
View File

@ -58,6 +58,8 @@ config :logger, :console, format: "[$level] $message\n", level: :debug
config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Nominatim config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Nominatim
config :mobilizon, Mobilizon.Web.Gettext, allowed_locales: ["fr", "en", "ru", "ar"]
# Set a higher stacktrace during development. Avoid configuring such # Set a higher stacktrace during development. Avoid configuring such
# in production as building large stacktraces may be expensive. # in production as building large stacktraces may be expensive.
config :phoenix, :stacktrace_depth, 20 config :phoenix, :stacktrace_depth, 20
@ -92,6 +94,10 @@ config :mobilizon, Mobilizon.Web.Auth.Guardian,
config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "uploads" config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "uploads"
config :mobilizon, :exports, path: "uploads/exports"
config :tz_world, data_dir: "_build/dev/lib/tz_world/priv"
config :mobilizon, :anonymous, config :mobilizon, :anonymous,
reports: [ reports: [
allowed: true allowed: true

21
config/docker.exs
View File

@ -2,7 +2,7 @@
import Config import Config
listen_ip = System.get_env("MOBILIZON_INSTANCE_LISTEN_IP", "127.0.0.1") listen_ip = System.get_env("MOBILIZON_INSTANCE_LISTEN_IP", "0.0.0.0")
listen_ip = listen_ip =
case listen_ip |> to_charlist() |> :inet.parse_address() do case listen_ip |> to_charlist() |> :inet.parse_address() do
@ -14,7 +14,7 @@ config :mobilizon, Mobilizon.Web.Endpoint,
server: true, server: true,
url: [host: System.get_env("MOBILIZON_INSTANCE_HOST", "mobilizon.lan")], url: [host: System.get_env("MOBILIZON_INSTANCE_HOST", "mobilizon.lan")],
http: [ http: [
port: System.get_env("MOBILIZON_INSTANCE_PORT", "4000"), port: String.to_integer(System.get_env("MOBILIZON_INSTANCE_PORT", "4000")),
ip: listen_ip ip: listen_ip
], ],
secret_key_base: System.get_env("MOBILIZON_INSTANCE_SECRET_KEY_BASE", "changethis") secret_key_base: System.get_env("MOBILIZON_INSTANCE_SECRET_KEY_BASE", "changethis")
@ -33,9 +33,6 @@ config :mobilizon, :instance,
email_from: System.get_env("MOBILIZON_INSTANCE_EMAIL", "noreply@mobilizon.lan"), email_from: System.get_env("MOBILIZON_INSTANCE_EMAIL", "noreply@mobilizon.lan"),
email_reply_to: System.get_env("MOBILIZON_REPLY_EMAIL", "noreply@mobilizon.lan") email_reply_to: System.get_env("MOBILIZON_REPLY_EMAIL", "noreply@mobilizon.lan")
config :mobilizon, Mobilizon.Web.Upload.Uploader.Local,
uploads: System.get_env("MOBILIZON_UPLOADS", "/app/uploads")
config :mobilizon, Mobilizon.Storage.Repo, config :mobilizon, Mobilizon.Storage.Repo,
adapter: Ecto.Adapters.Postgres, adapter: Ecto.Adapters.Postgres,
username: System.get_env("MOBILIZON_DATABASE_USERNAME", "username"), username: System.get_env("MOBILIZON_DATABASE_USERNAME", "username"),
@ -68,4 +65,16 @@ config :geolix,
} }
] ]
config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "/var/lib/mobilizon/uploads" config :mobilizon, Mobilizon.Web.Upload.Uploader.Local,
uploads: System.get_env("MOBILIZON_UPLOADS", "/var/lib/mobilizon/uploads")
config :mobilizon, :exports,
path: System.get_env("MOBILIZON_UPLOADS_EXPORTS", "/var/lib/mobilizon/uploads/exports"),
formats: [
Mobilizon.Service.Export.Participants.CSV,
Mobilizon.Service.Export.Participants.PDF,
Mobilizon.Service.Export.Participants.ODS
]
config :tz_world,
data_dir: System.get_env("MOBILIZON_TIMEZONES_DIR", "/var/lib/mobilizon/timezones")

9
config/prod.exs
View File

@ -37,12 +37,3 @@ config :mobilizon, :cldr,
"ru", "ru",
"sv" "sv"
] ]
cond do
System.get_env("INSTANCE_CONFIG") &&
File.exists?("./config/#{System.get_env("INSTANCE_CONFIG")}") ->
import_config System.get_env("INSTANCE_CONFIG")
true ->
:ok
end

13
config/test.exs
View File

@ -60,15 +60,22 @@ config :mobilizon, Mobilizon.Web.Upload, filters: [], link_name: false
config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "test/uploads" config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "test/uploads"
config :exvcr, config :mobilizon, :exports, path: "test/uploads/exports"
vcr_cassette_library_dir: "test/fixtures/vcr_cassettes"
config :tz_world, data_dir: "_build/test/lib/tz_world/priv"
config :tesla, Mobilizon.Service.HTTP.ActivityPub, config :tesla, Mobilizon.Service.HTTP.ActivityPub,
adapter: Mobilizon.Service.HTTP.ActivityPub.Mock adapter: Mobilizon.Service.HTTP.ActivityPub.Mock
config :tesla, Mobilizon.Service.HTTP.WebfingerClient,
adapter: Mobilizon.Service.HTTP.WebfingerClient.Mock
config :tesla, Mobilizon.Service.HTTP.GeospatialClient, config :tesla, Mobilizon.Service.HTTP.GeospatialClient,
adapter: Mobilizon.Service.HTTP.GeospatialClient.Mock adapter: Mobilizon.Service.HTTP.GeospatialClient.Mock
config :tesla, Mobilizon.Service.HTTP.HostMetaClient,
adapter: Mobilizon.Service.HTTP.HostMetaClient.Mock
config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Mock config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Mock
config :mobilizon, Oban, queues: false, plugins: false config :mobilizon, Oban, queues: false, plugins: false
@ -77,6 +84,8 @@ config :mobilizon, Mobilizon.Web.Auth.Guardian, secret_key: "some secret"
config :mobilizon, :activitypub, sign_object_fetches: false config :mobilizon, :activitypub, sign_object_fetches: false
config :mobilizon, Mobilizon.Web.Gettext, allowed_locales: ["fr", "en", "es", "ru"]
config :junit_formatter, report_dir: "." config :junit_formatter, report_dir: "."
if System.get_env("DOCKER", "false") == "false" && File.exists?("./config/test.secret.exs") do if System.get_env("DOCKER", "false") == "false" && File.exists?("./config/test.secret.exs") do

2
docker-compose.test.yml
View File

@ -1,4 +1,4 @@
version: "3" version: "3.2"
services: services:
postgres: postgres:

44
docker/multiarch/Dockerfile Normal file
View File

@ -0,0 +1,44 @@
FROM elixir as build
SHELL ["/bin/bash", "-c"]
ENV MIX_ENV prod
# ENV LANG en_US.UTF-8
ARG APP_ASSET
# Set the right versions
ENV ELIXIR_VERSION latest
ENV ERLANG_VERSION latest
ENV NODE_VERSION 16
# Install system dependencies
RUN apt-get update -yq && apt-get install -yq build-essential cmake postgresql-client git curl gnupg unzip exiftool webp imagemagick gifsicle
RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
# # Install Node & yarn
# RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq
# RUN npm install -g yarn
# Install build tools
RUN source /root/.bashrc && \
mix local.rebar --force && \
mix local.hex -if-missing --force
RUN mkdir /mobilizon
COPY ./ /mobilizon
WORKDIR /mobilizon
# # Build front-end
# RUN yarn --cwd "js" install --frozen-lockfile
# RUN yarn --cwd "js" run build
# Elixir release
RUN source /root/.bashrc && \
mix deps.get --only prod && \
mix compile && \
mix phx.digest.clean --all && \
mix release --path release/mobilizon && \
cd release/mobilizon && \
ln -s lib/mobilizon-*/priv priv && \
cd ../../
# Make a release archive
RUN tar -zcf /mobilizon/${APP_ASSET} -C release mobilizon

1
docker/multiarch/README.md Normal file
View File

@ -0,0 +1 @@
Contains the Dockerfile used to generate multi-arch Elixir releases

14
docker/production/Dockerfile
View File

@ -4,7 +4,11 @@ FROM node:16-alpine as assets
RUN apk add --no-cache python3 build-base libwebp-tools bash imagemagick ncurses RUN apk add --no-cache python3 build-base libwebp-tools bash imagemagick ncurses
WORKDIR /build WORKDIR /build
COPY js . COPY js .
RUN yarn install \
ENV CYPRESS_INSTALL_BINARY 0
# Network timeout because it's slow when cross-compiling
RUN yarn install --network-timeout 100000 \
&& yarn run build && yarn run build
# Then, build the application binary # Then, build the application binary
@ -26,7 +30,7 @@ COPY rel ./rel
COPY support ./support COPY support ./support
COPY --from=assets ./priv/static ./priv/static COPY --from=assets ./priv/static ./priv/static
RUN mix phx.digest \ RUN mix phx.digest.clean --all \
&& mix release && mix release
# Finally setup the app # Finally setup the app
@ -45,9 +49,11 @@ LABEL org.opencontainers.image.title="mobilizon" \
org.opencontainers.image.revision=$VCS_REF \ org.opencontainers.image.revision=$VCS_REF \
org.opencontainers.image.created=$BUILD_DATE org.opencontainers.image.created=$BUILD_DATE
RUN apk add --no-cache openssl ca-certificates ncurses-libs file postgresql-client libgcc libstdc++ imagemagick RUN apk add --no-cache openssl ca-certificates ncurses-libs file postgresql-client libgcc libstdc++ imagemagick python3 py3-pip py3-pillow py3-cffi py3-brotli gcc musl-dev python3-dev pango libxslt-dev
RUN pip install weasyprint pyexcel-ods3
RUN mkdir -p /app/uploads && chown nobody:nobody /app/uploads RUN mkdir -p /var/lib/mobilizon/uploads && chown nobody:nobody /var/lib/mobilizon/uploads
RUN mkdir -p /var/lib/mobilizon/timezones && chown nobody:nobody /var/lib/mobilizon/timezones
RUN mkdir -p /etc/mobilizon && chown nobody:nobody /etc/mobilizon RUN mkdir -p /etc/mobilizon && chown nobody:nobody /etc/mobilizon
USER nobody USER nobody

9
docker/tests/Dockerfile
View File

@ -1,10 +1,15 @@
FROM elixir:latest FROM elixir:latest
LABEL maintainer="Thomas Citharel <tcit@tcit.fr>" LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"
ENV REFRESHED_AT=2021-06-07 ENV REFRESHED_AT=2021-10-04
RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 cmake exiftool RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 cmake exiftool python3-pip python3-setuptools
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq
RUN npm install -g yarn wait-on RUN npm install -g yarn wait-on
RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
RUN mix local.hex --force && mix local.rebar --force RUN mix local.hex --force && mix local.rebar --force
# Weasyprint 53 requires pango >= 1.44.0, which is not available in Stretch.
# TODO: Remove the version requirement when elixir:latest is based on Bullseye
# https://github.com/erlang/docker-erlang-otp/issues/362
# https://github.com/Kozea/WeasyPrint/issues/1384
RUN pip3 install -Iv weasyprint==52 pyexcel_ods3
RUN curl https://dbip.mirror.framasoft.org/files/dbip-city-lite-latest.mmdb --output GeoLite2-City.mmdb -s && mkdir -p /usr/share/GeoIP && mv GeoLite2-City.mmdb /usr/share/GeoIP/ RUN curl https://dbip.mirror.framasoft.org/files/dbip-city-lite-latest.mmdb --output GeoLite2-City.mmdb -s && mkdir -p /usr/share/GeoIP && mv GeoLite2-City.mmdb /usr/share/GeoIP/

28
docker/tests/Dockerfile-legacy
View File

@ -1,28 +0,0 @@
# We build Elixir manually to have the oldest acceptable version of OTP
FROM erlang:21
LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"
# elixir expects utf8.
ENV ELIXIR_VERSION="v1.11.4" \
LANG=C.UTF-8
RUN set -xe \
&& ELIXIR_DOWNLOAD_URL="https://github.com/elixir-lang/elixir/archive/${ELIXIR_VERSION}.tar.gz" \
&& ELIXIR_DOWNLOAD_SHA256="85c7118a0db6007507313db5bddf370216d9394ed7911fe80f21e2fbf7f54d29" \
&& curl -fSL -o elixir-src.tar.gz $ELIXIR_DOWNLOAD_URL \
&& echo "$ELIXIR_DOWNLOAD_SHA256 elixir-src.tar.gz" | sha256sum -c - \
&& mkdir -p /usr/local/src/elixir \
&& tar -xzC /usr/local/src/elixir --strip-components=1 -f elixir-src.tar.gz \
&& rm elixir-src.tar.gz \
&& cd /usr/local/src/elixir \
&& make install clean
CMD ["iex"]
ENV REFRESHED_AT=2021-06-07
RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 cmake exiftool
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash && apt-get install nodejs -yq
RUN npm install -g yarn wait-on
RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
RUN mix local.hex --force && mix local.rebar --force
RUN curl https://dbip.mirror.framasoft.org/files/dbip-city-lite-latest.mmdb --output GeoLite2-City.mmdb -s && mkdir -p /usr/share/GeoIP && mv GeoLite2-City.mmdb /usr/share/GeoIP/

1
docker/tests/README.md Normal file
View File

@ -0,0 +1 @@
Contains the Dockerfile for the image used to run the tests

3
js/.eslintrc.js
View File

@ -9,8 +9,7 @@ module.exports = {
"plugin:vue/essential", "plugin:vue/essential",
"eslint:recommended", "eslint:recommended",
"@vue/typescript/recommended", "@vue/typescript/recommended",
"@vue/prettier", "plugin:prettier/recommended",
"@vue/prettier/@typescript-eslint",
], ],
plugins: ["prettier"], plugins: ["prettier"],

74
js/fragmentTypes.json
View File

@ -5,79 +5,41 @@
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "ActionLogObject", "name": "ActionLogObject",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Comment" },
"name": "Comment" { "name": "Event" },
}, { "name": "Group" },
{ { "name": "Person" },
"name": "Event" { "name": "Report" },
}, { "name": "ReportNote" },
{ { "name": "User" }
"name": "Person"
},
{
"name": "Report"
},
{
"name": "ReportNote"
},
{
"name": "User"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "ActivityObject", "name": "ActivityObject",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Comment" },
"name": "Comment" { "name": "Discussion" },
}, { "name": "Event" },
{ { "name": "Group" },
"name": "Discussion" { "name": "Member" },
}, { "name": "Post" },
{ { "name": "Resource" }
"name": "Event"
},
{
"name": "Group"
},
{
"name": "Member"
},
{
"name": "Post"
},
{
"name": "Resource"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "Actor", "name": "Actor",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Application" },
"name": "Person" { "name": "Group" },
}, { "name": "Person" }
{
"name": "Group"
},
{
"name": "Application"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "Interactable", "name": "Interactable",
"possibleTypes": [ "possibleTypes": [{ "name": "Event" }, { "name": "Group" }]
{
"name": "Event"
},
{
"name": "Group"
}
]
} }
] ]
} }

65
js/package.json
View File

@ -1,11 +1,11 @@
{ {
"name": "mobilizon", "name": "mobilizon",
"version": "1.3.0", "version": "2.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "yarn run build:assets && yarn run build:pictures", "build": "yarn run build:assets && yarn run build:pictures",
"test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 vue-cli-service test:unit", "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 TZ=UTC vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e", "test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint",
"build:assets": "vue-cli-service build", "build:assets": "vue-cli-service build",
@ -15,7 +15,7 @@
"@absinthe/socket": "^0.2.1", "@absinthe/socket": "^0.2.1",
"@absinthe/socket-apollo-link": "^0.2.1", "@absinthe/socket-apollo-link": "^0.2.1",
"@apollo/client": "^3.3.16", "@apollo/client": "^3.3.16",
"@mdi/font": "^5.0.45", "@mdi/font": "^6.1.95",
"@tiptap/core": "^2.0.0-beta.41", "@tiptap/core": "^2.0.0-beta.41",
"@tiptap/extension-blockquote": "^2.0.0-beta.6", "@tiptap/extension-blockquote": "^2.0.0-beta.6",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.9", "@tiptap/extension-bubble-menu": "^2.0.0-beta.9",
@ -29,6 +29,8 @@
"@tiptap/extension-underline": "^2.0.0-beta.7", "@tiptap/extension-underline": "^2.0.0-beta.7",
"@tiptap/starter-kit": "^2.0.0-beta.37", "@tiptap/starter-kit": "^2.0.0-beta.37",
"@tiptap/vue-2": "^2.0.0-beta.21", "@tiptap/vue-2": "^2.0.0-beta.21",
"@vue-a11y/announcer": "^2.1.0",
"@vue-a11y/skip-to": "^2.1.2",
"@vue/apollo-option": "4.0.0-alpha.11", "@vue/apollo-option": "4.0.0-alpha.11",
"apollo-absinthe-upload-link": "^1.5.0", "apollo-absinthe-upload-link": "^1.5.0",
"blurhash": "^1.1.3", "blurhash": "^1.1.3",
@ -36,7 +38,8 @@
"bulma-divider": "^0.2.0", "bulma-divider": "^0.2.0",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"date-fns": "^2.16.0", "date-fns": "^2.16.0",
"graphql": "^15.0.0", "date-fns-tz": "^1.1.6",
"graphql": "^16.0.0",
"graphql-tag": "^2.10.3", "graphql-tag": "^2.10.3",
"intersection-observer": "^0.12.0", "intersection-observer": "^0.12.0",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
@ -45,8 +48,9 @@
"lodash": "^4.17.11", "lodash": "^4.17.11",
"ngeohash": "^0.6.3", "ngeohash": "^0.6.3",
"p-debounce": "^4.0.0", "p-debounce": "^4.0.0",
"phoenix": "^1.4.11", "phoenix": "^1.6",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"sanitize-html": "^2.5.3",
"tippy.js": "^6.2.3", "tippy.js": "^6.2.3",
"unfetch": "^4.2.0", "unfetch": "^4.2.0",
"v-tooltip": "^2.1.3", "v-tooltip": "^2.1.3",
@ -61,49 +65,50 @@
"vuedraggable": "^2.24.3" "vuedraggable": "^2.24.3"
}, },
"devDependencies": { "devDependencies": {
"@types/jest": "^26.0.18", "@types/jest": "^27.0.2",
"@types/leaflet": "^1.5.2", "@types/leaflet": "^1.5.2",
"@types/leaflet.locatecontrol": "^0.60.7", "@types/leaflet.locatecontrol": "^0.60.7",
"@types/lodash": "^4.14.141", "@types/lodash": "^4.14.141",
"@types/ngeohash": "^0.6.2", "@types/ngeohash": "^0.6.2",
"@types/phoenix": "^1.5.2",
"@types/prosemirror-inputrules": "^1.0.2", "@types/prosemirror-inputrules": "^1.0.2",
"@types/prosemirror-model": "^1.7.2", "@types/prosemirror-model": "^1.7.2",
"@types/prosemirror-state": "^1.2.4", "@types/prosemirror-state": "^1.2.4",
"@types/prosemirror-view": "^1.11.4", "@types/prosemirror-view": "^1.11.4",
"@typescript-eslint/eslint-plugin": "^4.18.0", "@types/sanitize-html": "^2.5.0",
"@typescript-eslint/parser": "^4.18.0", "@typescript-eslint/eslint-plugin": "^5.3.0",
"@vue/cli-plugin-babel": "~5.0.0-beta.3", "@typescript-eslint/parser": "^5.3.0",
"@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.3", "@vue/cli-plugin-babel": "~5.0.0-rc.0",
"@vue/cli-plugin-eslint": "~5.0.0-beta.3", "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.0",
"@vue/cli-plugin-pwa": "~5.0.0-beta.3", "@vue/cli-plugin-eslint": "~5.0.0-rc.0",
"@vue/cli-plugin-router": "~5.0.0-beta.3", "@vue/cli-plugin-pwa": "~5.0.0-rc.0",
"@vue/cli-plugin-typescript": "~5.0.0-beta.3", "@vue/cli-plugin-router": "~5.0.0-rc.0",
"@vue/cli-plugin-unit-jest": "~5.0.0-beta.3", "@vue/cli-plugin-typescript": "~5.0.0-rc.0",
"@vue/cli-service": "~5.0.0-beta.3", "@vue/cli-plugin-unit-jest": "~5.0.0-rc.0",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/cli-service": "~5.0.0-rc.0",
"@vue/eslint-config-typescript": "^7.0.0", "@vue/eslint-config-typescript": "^9.0.0",
"@vue/test-utils": "^1.1.0", "@vue/test-utils": "^1.1.0",
"eslint": "^7.20.0", "@vue/vue2-jest": "^27.0.0-alpha.3",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"cypress": "^8.3.0",
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-cypress": "^2.10.3", "eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "^2.20.2", "eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.3.1", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.6.0", "eslint-plugin-vue": "^8.0.3",
"flush-promises": "^1.0.2", "flush-promises": "^1.0.2",
"jest": "^26.6.3", "jest": "^27.1.0",
"jest-junit": "^12.0.0", "jest-junit": "^13.0.0",
"mock-apollo-client": "^1.1.0", "mock-apollo-client": "^1.1.0",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"prettier-eslint": "^13.0.0", "prettier-eslint": "^13.0.0",
"sass": "^1.34.1", "sass": "^1.34.1",
"sass-loader": "^12.0.0", "sass-loader": "^12.0.0",
"ts-jest": "^26.5.3", "ts-jest": "27",
"typescript": "~4.1.5", "typescript": "~4.4.3",
"vue-i18n-extract": "^1.0.2", "vue-i18n-extract": "^2.0.4",
"vue-jest": "^4.0.1",
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"webpack-cli": "^4.7.0" "webpack-cli": "^4.7.0"
},
"resolutions": {
"webpack": "5.44.0"
} }
} }

2
js/public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" dir="auto">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

53
js/src/App.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div id="mobilizon"> <div id="mobilizon">
<VueAnnouncer />
<VueSkipTo to="#main" :label="$t('Skip to main content')" />
<NavBar /> <NavBar />
<div v-if="config && config.demoMode"> <div v-if="config && config.demoMode">
<b-message <b-message
@ -7,7 +9,7 @@
type="is-danger" type="is-danger"
:title="$t('Warning').toLocaleUpperCase()" :title="$t('Warning').toLocaleUpperCase()"
closable closable
aria-close-label="Close" :aria-close-label="$t('Close')"
> >
<p> <p>
{{ $t("This is a demonstration site to test Mobilizon.") }} {{ $t("This is a demonstration site to test Mobilizon.") }}
@ -22,9 +24,9 @@
</div> </div>
<error v-if="error" :error="error" /> <error v-if="error" :error="error" />
<main v-else> <main id="main" v-else>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<router-view /> <router-view ref="routerView" />
</transition> </transition>
</main> </main>
<mobilizon-footer /> <mobilizon-footer />
@ -32,7 +34,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import NavBar from "./components/NavBar.vue"; import NavBar from "./components/NavBar.vue";
import { import {
AUTH_ACCESS_TOKEN, AUTH_ACCESS_TOKEN,
@ -52,6 +54,7 @@ import { IConfig } from "./types/config.model";
import { ICurrentUser } from "./types/current-user.model"; import { ICurrentUser } from "./types/current-user.model";
import jwt_decode, { JwtPayload } from "jwt-decode"; import jwt_decode, { JwtPayload } from "jwt-decode";
import { refreshAccessToken } from "./apollo/utils"; import { refreshAccessToken } from "./apollo/utils";
import { Route } from "vue-router";
@Component({ @Component({
apollo: { apollo: {
@ -82,6 +85,8 @@ export default class App extends Vue {
interval: number | undefined = undefined; interval: number | undefined = undefined;
@Ref("routerView") routerView!: Vue;
async created(): Promise<void> { async created(): Promise<void> {
if (await this.initializeCurrentUser()) { if (await this.initializeCurrentUser()) {
await initializeCurrentActor(this.$apollo.provider.defaultClient); await initializeCurrentActor(this.$apollo.provider.defaultClient);
@ -197,6 +202,41 @@ export default class App extends Vue {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = undefined; this.interval = undefined;
} }
@Watch("$route", { immediate: true })
updateAnnouncement(route: Route): void {
const pageTitle = this.extractPageTitleFromRoute(route);
if (pageTitle) {
this.$announcer.polite(
this.$t("Navigated to {pageTitle}", {
pageTitle,
}) as string
);
}
// Set the focus to the router view
// https://marcus.io/blog/accessible-routing-vuejs
setTimeout(() => {
const focusTarget = this.routerView?.$el as HTMLElement;
if (focusTarget) {
// Make focustarget programmatically focussable
focusTarget.setAttribute("tabindex", "-1");
// Focus element
focusTarget.focus();
// Remove tabindex from focustarget.
// Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
focusTarget.removeAttribute("tabindex");
}
}, 0);
}
extractPageTitleFromRoute(route: Route): string {
if (route.meta?.announcer?.message) {
return route.meta?.announcer?.message();
}
return document.title;
}
} }
</script> </script>
@ -206,7 +246,6 @@ export default class App extends Vue {
/* Icons */ /* Icons */
$mdi-font-path: "~@mdi/font/fonts"; $mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons"; @import "~@mdi/font/scss/materialdesignicons";
@import "common"; @import "common";
#mobilizon { #mobilizon {
@ -218,4 +257,8 @@ $mdi-font-path: "~@mdi/font/fonts";
flex-grow: 1; flex-grow: 1;
} }
} }
.vue-skip-to {
z-index: 40;
}
</style> </style>

67
js/src/common.scss
View File

@ -1,8 +1,11 @@
@use "@/styles/_mixins" as *;
@import "variables.scss"; @import "variables.scss";
@import "~bulma"; @import "~bulma";
@import "~bulma-divider"; @import "~bulma-divider";
@import "~buefy/src/scss/buefy"; @import "~buefy/src/scss/buefy";
@import "styles/vue-announcer.scss";
@import "styles/vue-skip-to.scss";
// a { // a {
// color: $violet-2; // color: $violet-2;
@ -79,7 +82,7 @@ $color-black: #000;
border-radius: 5px; border-radius: 5px;
padding: 0.2rem; padding: 0.2rem;
white-space: nowrap; white-space: nowrap;
margin-right: 0.2rem; @include margin-right(0.2rem);
} }
.mention-suggestion { .mention-suggestion {
@ -88,7 +91,7 @@ $color-black: #000;
.mention .mention { .mention .mention {
background: initial; background: initial;
margin-right: 0; @include margin-right(0);
} }
.select select { .select select {
@ -240,3 +243,63 @@ footer.footer[data-v-40ab164b] span.select select {
background: $chapril_blue_light; background: $chapril_blue_light;
color: $footer-text-color; color: $footer-text-color;
} }
@mixin focus() {
&:focus {
border: 2px solid black;
border-radius: 5px;
}
}
ul.menu-list > li,
p {
@include focus;
}
.navbar-item {
@include focus;
}
.navbar-dropdown span.navbar-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
/**
* Bulma/Buefy fixes
*/
.icon {
vertical-align: middle;
}
.tags .tag:not(:last-child) {
margin-right: unset;
@include margin-right(0.5rem);
}
.button .icon {
&:first-child:not(:last-child) {
@include margin-left(calc(-0.5em - 1px));
@include margin-right(0.25em);
}
&:last-child:not(:first-child) {
@include margin-right(calc(-0.5em - 1px));
@include margin-left(0.25em);
}
}
.buttons .button:not(:last-child):not(.is-fullwidth) {
margin-right: unset;
@include margin-right(0.5rem);
}
.breadcrumb li:first-child a {
padding-left: unset;
@include padding-left(0);
@include padding-right(0.75em);
}
.media-left {
@include margin-left(1rem);
}
a.dropdown-item {
@include padding-right(3rem);
}

4
js/src/components/About/InstanceContactLink.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<p> <p>
<a :title="contact" v-if="configLink" :href="configLink.uri">{{ <a dir="auto" :title="contact" v-if="configLink" :href="configLink.uri">{{
configLink.text configLink.text
}}</a> }}</a>
<span v-else-if="contact">{{ contact }}</span> <span dir="auto" v-else-if="contact">{{ contact }}</span>
<span v-else>{{ $t("contact uninformed") }}</span> <span v-else>{{ $t("contact uninformed") }}</span>
</p> </p>
</template> </template>

63
js/src/components/Account/ActorCard.vue
View File

@ -1,27 +1,25 @@
<template> <template>
<div> <div class="media" style="align-items: top" dir="auto">
<div class="media" style="align-items: top"> <div class="media-left">
<div class="media-left"> <figure class="image is-32x32" v-if="actor.avatar">
<figure class="image is-32x32" v-if="actor.avatar"> <img class="is-rounded" :src="actor.avatar.url" alt="" />
<img class="is-rounded" :src="actor.avatar.url" alt="" /> </figure>
</figure> <b-icon v-else size="is-medium" icon="account-circle" />
<b-icon v-else size="is-medium" icon="account-circle" /> </div>
</div>
<div class="media-content"> <div class="media-content">
<p> <p>
{{ actor.name || `@${usernameWithDomain(actor)}` }} {{ actor.name || `@${usernameWithDomain(actor)}` }}
</p> </p>
<p class="has-text-grey-dark" v-if="actor.name"> <p class="has-text-grey-dark" v-if="actor.name">
@{{ usernameWithDomain(actor) }} <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
</p> </p>
<div <div
v-if="full" v-if="full"
class="summary" class="summary"
:class="{ limit: limit }" :class="{ limit: limit }"
v-html="actor.summary" v-html="actor.summary"
/> />
</div>
</div> </div>
</div> </div>
</template> </template>
@ -53,6 +51,15 @@ export default class ActorCard extends Vue {
</style> </style>
<style lang="scss"> <style lang="scss">
@use "@/styles/_mixins" as *;
.media {
.media-left {
margin-right: initial;
@include margin-right(1rem);
}
}
.tooltip { .tooltip {
display: block !important; display: block !important;
z-index: 10000; z-index: 10000;
@ -105,7 +112,7 @@ export default class ActorCard extends Vue {
} }
&[x-placement^="right"] { &[x-placement^="right"] {
margin-left: 5px; @include margin-left(5px);
.tooltip-arrow { .tooltip-arrow {
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
@ -114,13 +121,13 @@ export default class ActorCard extends Vue {
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
left: -5px; left: -5px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; @include margin-left(0);
margin-right: 0; @include margin-right(0);
} }
} }
&[x-placement^="left"] { &[x-placement^="left"] {
margin-right: 5px; @include margin-right(5px);
.tooltip-arrow { .tooltip-arrow {
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
@ -129,8 +136,8 @@ export default class ActorCard extends Vue {
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
right: -5px; right: -5px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; @include margin-left(0);
margin-right: 0; @include margin-right(0);
} }
} }

3
js/src/components/Account/ActorInline.vue
View File

@ -26,6 +26,7 @@ export default class ActorInline extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
div.actor-inline { div.actor-inline {
align-items: flex-start; align-items: flex-start;
display: inline-flex; display: inline-flex;
@ -36,7 +37,7 @@ div.actor-inline {
flex-basis: auto; flex-basis: auto;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-right: 0.5rem; @include margin-right(0.5rem);
} }
div.actor-name { div.actor-name {
flex-basis: auto; flex-basis: auto;

2
js/src/components/Account/PopoverActorCard.vue
View File

@ -6,7 +6,7 @@
:class="{ inline, clickable: actor && actor.type === ActorType.GROUP }" :class="{ inline, clickable: actor && actor.type === ActorType.GROUP }"
> >
<slot></slot> <slot></slot>
<template slot="popover" class="popover"> <template slot="popover">
<actor-card :full="true" :actor="actor" :popover="true" /> <actor-card :full="true" :actor="actor" :popover="true" />
</template> </template>
</v-popover> </v-popover>

5
js/src/components/Account/ProfileOnboarding.vue
View File

@ -11,7 +11,7 @@
) )
}} }}
</p> </p>
<hr /> <hr role="presentation" />
<p class="content"> <p class="content">
<span> <span>
{{ {{
@ -21,6 +21,7 @@
}} }}
</span> </span>
<span <span
v-if="config"
v-html=" v-html="
$t( $t(
'This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.', 'This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.',
@ -32,7 +33,7 @@
" "
/> />
</p> </p>
<hr /> <hr role="presentation" />
<p class="content"> <p class="content">
{{ {{
$t( $t(

5
js/src/components/Activity/GroupActivityItem.vue
View File

@ -148,6 +148,11 @@ export default class GroupActivityItem extends mixins(ActivityMixin) {
case Openness.INVITE_ONLY: case Openness.INVITE_ONLY:
details.push("The group can now only be joined with an invite."); details.push("The group can now only be joined with an invite.");
break; break;
case Openness.MODERATED:
details.push(
"The group can now be joined by anyone, but new members need to be approved by an administrator."
);
break;
case Openness.OPEN: case Openness.OPEN:
details.push("The group can now be joined by anyone."); details.push("The group can now be joined by anyone.");
break; break;

34
js/src/components/Activity/MemberActivityItem.vue
View File

@ -9,13 +9,7 @@
:inline="true" :inline="true"
slot="member" slot="member"
> >
<b> <b> {{ displayName(activity.object.actor) }}</b></popover-actor-card
{{
$t("@{username}", {
username: usernameWithDomain(activity.object.actor),
})
}}</b
></popover-actor-card
> >
<b slot="member" v-else>{{ <b slot="member" v-else>{{
subjectParams.member_actor_federated_username subjectParams.member_actor_federated_username
@ -25,13 +19,7 @@
:inline="true" :inline="true"
slot="profile" slot="profile"
> >
<b> <b> {{ displayName(activity.author) }}</b></popover-actor-card
{{
$t("@{username}", {
username: usernameWithDomain(activity.author),
})
}}</b
></popover-actor-card
></i18n ></i18n
> >
<small class="has-text-grey-dark activity-date">{{ <small class="has-text-grey-dark activity-date">{{
@ -41,7 +29,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { usernameWithDomain } from "@/types/actor"; import { displayName } from "@/types/actor";
import { ActivityMemberSubject, MemberRole } from "@/types/enums"; import { ActivityMemberSubject, MemberRole } from "@/types/enums";
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
@ -62,7 +50,7 @@ export const MEMBER_ROLE_VALUE: Record<string, number> = {
}, },
}) })
export default class MemberActivityItem extends mixins(ActivityMixin) { export default class MemberActivityItem extends mixins(ActivityMixin) {
usernameWithDomain = usernameWithDomain; displayName = displayName;
RouteName = RouteName; RouteName = RouteName;
ActivityMemberSubject = ActivityMemberSubject; ActivityMemberSubject = ActivityMemberSubject;
@ -83,6 +71,14 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
return "You added the member {member}."; return "You added the member {member}.";
} }
return "{profile} added the member {member}."; return "{profile} added the member {member}.";
case ActivityMemberSubject.MEMBER_APPROVED:
if (this.isAuthorCurrentActor) {
return "You approved {member}'s membership.";
}
if (this.isObjectMemberCurrentActor) {
return "Your membership was approved by {profile}.";
}
return "{profile} approved {member}'s membership.";
case ActivityMemberSubject.MEMBER_JOINED: case ActivityMemberSubject.MEMBER_JOINED:
return "{member} joined the group."; return "{member} joined the group.";
case ActivityMemberSubject.MEMBER_UPDATED: case ActivityMemberSubject.MEMBER_UPDATED:
@ -94,6 +90,12 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
} }
return "{profile} updated the member {member}."; return "{profile} updated the member {member}.";
case ActivityMemberSubject.MEMBER_REMOVED: case ActivityMemberSubject.MEMBER_REMOVED:
if (this.subjectParams.member_role === MemberRole.NOT_APPROVED) {
if (this.isAuthorCurrentActor) {
return "You rejected {member}'s membership request.";
}
return "{profile} rejected {member}'s membership request.";
}
if (this.isAuthorCurrentActor) { if (this.isAuthorCurrentActor) {
return "You excluded member {member}."; return "You excluded member {member}.";
} }

3
js/src/components/Activity/ResourceActivityItem.vue
View File

@ -172,7 +172,8 @@ export default class ResourceActivityItem extends mixins(ActivityMixin) {
if (this.subjectParams.resource_path) { if (this.subjectParams.resource_path) {
const parentPath = this.parentPath(this.subjectParams.resource_path); const parentPath = this.parentPath(this.subjectParams.resource_path);
const directory = parentPath.split("/"); const directory = parentPath.split("/");
return directory.pop(); const res = directory.pop();
res === "" ? null : res;
} }
return null; return null;
} }

125
js/src/components/Address/AddressInfo.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<address dir="auto">
<b-icon
v-if="showIcon"
:icon="address.poiInfos.poiIcon.icon"
size="is-medium"
class="icon"
/>
<p>
<span
class="addressDescription"
:title="address.poiInfos.name"
v-if="address.poiInfos.name"
>
{{ address.poiInfos.name }}
</span>
<br v-if="address.poiInfos.name" />
<span class="has-text-grey-dark">
{{ address.poiInfos.alternativeName }}
</span>
<br />
<small
v-if="
userTimezoneDifferent &&
longShortTimezoneNamesDifferent &&
timezoneLongNameValid
"
class="has-text-grey-dark"
>
🌐
{{
$t("{timezoneLongName} ({timezoneShortName})", {
timezoneLongName,
timezoneShortName,
})
}}
</small>
<small v-else-if="userTimezoneDifferent" class="has-text-grey-dark">
🌐 {{ timezoneShortName }}
</small>
</p>
</address>
</template>
<script lang="ts">
import { IAddress } from "@/types/address.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class AddressInfo extends Vue {
@Prop({ required: true, type: Object as PropType<IAddress> })
address!: IAddress;
@Prop({ required: false, default: false, type: Boolean }) showIcon!: boolean;
@Prop({ required: false, default: false, type: Boolean })
showTimezone!: boolean;
@Prop({ required: false, type: String }) userTimezone!: string;
get userTimezoneDifferent(): boolean {
return (
this.userTimezone != undefined &&
this.address.timezone != undefined &&
this.userTimezone !== this.address.timezone
);
}
get longShortTimezoneNamesDifferent(): boolean {
return (
this.timezoneLongName != undefined &&
this.timezoneShortName != undefined &&
this.timezoneLongName !== this.timezoneShortName
);
}
get timezoneLongName(): string | undefined {
return this.timezoneName("long");
}
get timezoneShortName(): string | undefined {
return this.timezoneName("short");
}
get timezoneLongNameValid(): boolean {
return (
this.timezoneLongName != undefined && !this.timezoneLongName.match(/UTC/)
);
}
private timezoneName(format: "long" | "short"): string | undefined {
return this.extractTimezone(
new Intl.DateTimeFormat(undefined, {
timeZoneName: format,
timeZone: this.address.timezone,
}).formatToParts()
);
}
private extractTimezone(
parts: Intl.DateTimeFormatPart[]
): string | undefined {
return parts.find((part) => part.type === "timeZoneName")?.value;
}
}
</script>
<style lang="scss" scoped>
@use "@/styles/_mixins" as *;
address {
font-style: normal;
display: flex;
justify-content: flex-start;
span.addressDescription {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 0 auto;
min-width: 100%;
max-width: 4rem;
overflow: hidden;
}
span.icon {
@include padding-right(1rem);
}
}
</style>

45
js/src/components/Address/InlineAddress.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div
class="ellipsis"
:title="
isDescriptionDifferentFromLocality
? `${physicalAddress.description}, ${physicalAddress.locality}`
: physicalAddress.description
"
>
<b-icon icon="map-marker" />
<span v-if="isDescriptionDifferentFromLocality">
{{ physicalAddress.description }},
{{ physicalAddress.locality }}
</span>
<span v-else>
{{ physicalAddress.description }}
</span>
</div>
</template>
<script lang="ts">
import { IAddress } from "@/types/address.model";
import { PropType } from "vue";
import { Prop, Vue, Component } from "vue-property-decorator";
@Component
export default class InlineAddress extends Vue {
@Prop({ required: true, type: Object as PropType<IAddress> })
physicalAddress!: IAddress;
get isDescriptionDifferentFromLocality(): boolean {
return (
this.physicalAddress?.description !== this.physicalAddress?.locality &&
this.physicalAddress?.description !== undefined
);
}
}
</script>
<style lang="scss" scoped>
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>

34
js/src/components/Admin/Followers.vue
View File

@ -128,7 +128,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Mixins, Ref } from "vue-property-decorator"; import { Component, Mixins } from "vue-property-decorator";
import { SnackbarProgrammatic as Snackbar } from "buefy"; import { SnackbarProgrammatic as Snackbar } from "buefy";
import { formatDistanceToNow } from "date-fns"; import { formatDistanceToNow } from "date-fns";
import { import {
@ -173,8 +173,6 @@ export default class Followers extends Mixins(RelayMixin) {
FOLLOWERS_PER_PAGE = FOLLOWERS_PER_PAGE; FOLLOWERS_PER_PAGE = FOLLOWERS_PER_PAGE;
@Ref("table") readonly table!: any;
toggle(row: Record<string, unknown>): void { toggle(row: Record<string, unknown>): void {
this.table.toggleDetails(row); this.table.toggleDetails(row);
} }
@ -211,12 +209,14 @@ export default class Followers extends Mixins(RelayMixin) {
}); });
await this.$apollo.queries.relayFollowers.refetch(); await this.$apollo.queries.relayFollowers.refetch();
this.checkedRows = []; this.checkedRows = [];
} catch (e) { } catch (e: any) {
Snackbar.open({ if (e.message) {
message: e.message, Snackbar.open({
type: "is-danger", message: e.message,
position: "is-bottom", type: "is-danger",
}); position: "is-bottom",
});
}
} }
} }
@ -230,12 +230,14 @@ export default class Followers extends Mixins(RelayMixin) {
}); });
await this.$apollo.queries.relayFollowers.refetch(); await this.$apollo.queries.relayFollowers.refetch();
this.checkedRows = []; this.checkedRows = [];
} catch (e) { } catch (e: any) {
Snackbar.open({ if (e.message) {
message: e.message, Snackbar.open({
type: "is-danger", message: e.message,
position: "is-bottom", type: "is-danger",
}); position: "is-bottom",
});
}
} }
} }
@ -252,7 +254,7 @@ export default class Followers extends Mixins(RelayMixin) {
limit: FOLLOWERS_PER_PAGE, limit: FOLLOWERS_PER_PAGE,
}, },
}); });
} catch (err) { } catch (err: any) {
console.error(err); console.error(err);
} }
} }

30
js/src/components/Admin/Followings.vue
View File

@ -203,7 +203,7 @@ export default class Followings extends Mixins(RelayMixin) {
limit: FOLLOWINGS_PER_PAGE, limit: FOLLOWINGS_PER_PAGE,
}, },
}); });
} catch (err) { } catch (err: any) {
console.error(err); console.error(err);
} }
} }
@ -254,12 +254,14 @@ export default class Followings extends Mixins(RelayMixin) {
}, },
}); });
this.newRelayAddress = ""; this.newRelayAddress = "";
} catch (err) { } catch (err: any) {
Snackbar.open({ if (err.message) {
message: err.message, Snackbar.open({
type: "is-danger", message: err.message,
position: "is-bottom", type: "is-danger",
}); position: "is-bottom",
});
}
} }
} }
@ -295,12 +297,14 @@ export default class Followings extends Mixins(RelayMixin) {
}); });
await this.$apollo.queries.relayFollowings.refetch(); await this.$apollo.queries.relayFollowings.refetch();
this.checkedRows = []; this.checkedRows = [];
} catch (e) { } catch (e: any) {
Snackbar.open({ if (e.message) {
message: e.message, Snackbar.open({
type: "is-danger", message: e.message,
position: "is-bottom", type: "is-danger",
}); position: "is-bottom",
});
}
} }
} }
} }

57
js/src/components/Comment/Comment.vue
View File

@ -7,7 +7,7 @@
}" }"
class="comment-element" class="comment-element"
> >
<article class="media" :id="commentId"> <article class="media" :id="commentId" dir="auto">
<popover-actor-card <popover-actor-card
:actor="comment.actor" :actor="comment.actor"
:inline="true" :inline="true"
@ -32,11 +32,11 @@
</div> </div>
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
<span class="first-line" v-if="!comment.deletedAt"> <span class="first-line" v-if="!comment.deletedAt" dir="auto">
<strong :class="{ organizer: commentFromOrganizer }">{{ <strong :class="{ organizer: commentFromOrganizer }">{{
comment.actor.name comment.actor.name
}}</strong> }}</strong>
<small>{{ usernameWithDomain(comment.actor) }}</small> <small dir="ltr">@{{ usernameWithDomain(comment.actor) }}</small>
</span> </span>
<a v-else class="comment-link" :href="commentURL"> <a v-else class="comment-link" :href="commentURL">
<span>{{ $t("[deleted]") }}</span> <span>{{ $t("[deleted]") }}</span>
@ -63,7 +63,12 @@
</button> </button>
</span> </span>
<br /> <br />
<div v-if="!comment.deletedAt" v-html="comment.text" /> <div
v-if="!comment.deletedAt"
v-html="comment.text"
dir="auto"
:lang="comment.language"
/>
<div v-else>{{ $t("[This comment has been deleted]") }}</div> <div v-else>{{ $t("[This comment has been deleted]") }}</div>
<div class="load-replies" v-if="comment.totalReplies"> <div class="load-replies" v-if="comment.totalReplies">
<p v-if="!showReplies" @click="fetchReplies"> <p v-if="!showReplies" @click="fetchReplies">
@ -128,7 +133,7 @@
<div class="content"> <div class="content">
<span class="first-line"> <span class="first-line">
<strong>{{ currentActor.name }}</strong> <strong>{{ currentActor.name }}</strong>
<small>@{{ currentActor.preferredUsername }}</small> <small dir="ltr">@{{ currentActor.preferredUsername }}</small>
</span> </span>
<br /> <br />
<span class="editor-line"> <span class="editor-line">
@ -137,6 +142,7 @@
ref="commentEditor" ref="commentEditor"
v-model="newComment.text" v-model="newComment.text"
mode="comment" mode="comment"
:aria-label="$t('Comment body')"
/> />
<b-button <b-button
:disabled="newComment.text.trim().length === 0" :disabled="newComment.text.trim().length === 0"
@ -298,6 +304,10 @@ export default class Comment extends Vue {
onConfirm: this.reportComment, onConfirm: this.reportComment,
outsideDomain: this.comment.actor.domain, outsideDomain: this.comment.actor.domain,
}, },
// https://github.com/buefy/buefy/pull/3589
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
closeButtonAriaLabel: this.$t("Close"),
}); });
} }
@ -322,17 +332,20 @@ export default class Comment extends Vue {
position: "is-bottom-right", position: "is-bottom-right",
duration: 5000, duration: 5000,
}); });
} catch (e) { } catch (e: any) {
Snackbar.open({ if (e.message) {
message: e.message, Snackbar.open({
type: "is-danger", message: e.message,
position: "is-bottom", type: "is-danger",
}); position: "is-bottom",
});
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
form.reply { form.reply {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -352,7 +365,7 @@ form.reply {
} }
& > small { & > small {
margin-left: 0.3rem; @include margin-left(0.3rem);
} }
} }
@ -362,14 +375,14 @@ form.reply {
.editor { .editor {
flex: 1; flex: 1;
padding-right: 10px; @include padding-right(10px);
margin-bottom: 0; margin-bottom: 0;
} }
} }
a.comment-link { a.comment-link {
text-decoration: none; text-decoration: none;
margin-left: 5px; @include margin-left(5px);
color: $text; color: $text;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -398,6 +411,7 @@ a.comment-link {
color: $white; color: $white;
.reply-btn, .reply-btn,
small, small,
span,
strong, strong,
.icons button { .icons button {
color: $white; color: $white;
@ -412,7 +426,7 @@ a.comment-link {
} }
.media-left { .media-left {
margin-right: 0.5rem; @include margin-right(5px);
} }
} }
@ -423,7 +437,7 @@ a.comment-link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-right: 10px; @include margin-right(10px);
.vertical-border { .vertical-border {
width: 3px; width: 3px;
@ -441,9 +455,12 @@ a.comment-link {
.media .media-content { .media .media-content {
overflow-x: initial; overflow-x: initial;
.content .editor-line { .content {
display: flex; text-align: start;
align-items: center; .editor-line {
display: flex;
align-items: center;
}
} }
.icons { .icons {
@ -512,7 +529,7 @@ article {
} }
.reply-action .icon { .reply-action .icon {
padding-right: 0.4rem; @include padding-right(0.4rem);
} }
.visually-hidden { .visually-hidden {

63
js/src/components/Comment/CommentTree.vue
View File

@ -12,7 +12,7 @@
>{{ $t("Comments are closed for everybody else.") }}</b-notification >{{ $t("Comments are closed for everybody else.") }}</b-notification
> >
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left" v-if="newComment.actor">
<identity-picker-wrapper :inline="false" v-model="newComment.actor" /> <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
</figure> </figure>
<div class="media-content"> <div class="media-content">
@ -23,6 +23,7 @@
ref="commenteditor" ref="commenteditor"
mode="comment" mode="comment"
v-model="newComment.text" v-model="newComment.text"
:aria-label="$t('Comment body')"
/> />
</p> </p>
<p class="help is-danger" v-if="emptyCommentError"> <p class="help is-danger" v-if="emptyCommentError">
@ -30,9 +31,11 @@
</p> </p>
</div> </div>
<div class="field notify-participants" v-if="isEventOrganiser"> <div class="field notify-participants" v-if="isEventOrganiser">
<b-switch v-model="newComment.isAnnouncement">{{ <b-switch
$t("Notify participants") aria-labelledby="notify-participants-toggle"
}}</b-switch> v-model="newComment.isAnnouncement"
>{{ $t("Notify participants") }}</b-switch
>
</div> </div>
</div> </div>
</div> </div>
@ -42,8 +45,8 @@
type="is-primary" type="is-primary"
class="comment-button-submit" class="comment-button-submit"
icon-left="send" icon-left="send"
:aria-label="$t('Post a comment')" >{{ $t("Send") }}</b-button
/> >
</div> </div>
</article> </article>
</form> </form>
@ -56,11 +59,11 @@
> >
{{ $t("Loading comments…") }} {{ $t("Loading comments…") }}
</p> </p>
<transition-group name="comment-empty-list" mode="out-in" v-else> <transition-group tag="div" name="comment-empty-list" v-else>
<transition-group <transition-group
key="list" key="list"
name="comment-list" name="comment-list"
v-if="comments.length" v-if="filteredOrderedComments.length"
class="comment-list" class="comment-list"
tag="ul" tag="ul"
> >
@ -74,9 +77,9 @@
@delete-comment="deleteComment" @delete-comment="deleteComment"
/> />
</transition-group> </transition-group>
<div v-else class="no-comments" key="no-comments"> <empty-content v-else icon="comment" key="no-comments" :inline="true">
<span>{{ $t("No comments yet") }}</span> <span>{{ $t("No comments yet") }}</span>
</div> </empty-content>
</transition-group> </transition-group>
</div> </div>
</template> </template>
@ -96,6 +99,7 @@ import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { IPerson } from "../../types/actor"; import { IPerson } from "../../types/actor";
import { IEvent } from "../../types/event.model"; import { IEvent } from "../../types/event.model";
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core"; import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
import EmptyContent from "@/components/Utils/EmptyContent.vue";
@Component({ @Component({
apollo: { apollo: {
@ -116,6 +120,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
components: { components: {
Comment, Comment,
IdentityPickerWrapper, IdentityPickerWrapper,
EmptyContent,
editor: () => editor: () =>
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"), import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
}, },
@ -213,7 +218,7 @@ export default class CommentTree extends Vue {
// and reset the new comment field // and reset the new comment field
this.newComment = new CommentModel(); this.newComment = new CommentModel();
} catch (errors) { } catch (errors: any) {
console.error(errors); console.error(errors);
if (errors.graphQLErrors && errors.graphQLErrors.length > 0) { if (errors.graphQLErrors && errors.graphQLErrors.length > 0) {
const error = errors.graphQLErrors[0]; const error = errors.graphQLErrors[0];
@ -295,7 +300,7 @@ export default class CommentTree extends Vue {
}, },
}); });
// this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id); // this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id);
} catch (error) { } catch (error: any) {
console.error(error); console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) { if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message); this.$notifier.error(error.graphQLErrors[0].message);
@ -360,21 +365,35 @@ export default class CommentTree extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@import "~bulma/sass/utilities/mixins.sass";
form.new-comment { form.new-comment {
padding-bottom: 1rem; padding-bottom: 1rem;
.media-content { .media {
display: flex; flex-wrap: wrap;
align-items: center; justify-content: center;
align-content: center; .media-left {
@include mobile {
@include margin-right(0.5rem);
@include margin-left(0.5rem);
}
}
.field { .media-content {
flex: 1; display: flex;
padding-right: 10px; align-items: center;
margin-bottom: 0; align-content: center;
width: min-content;
&.notify-participants { .field {
margin-top: 0.5rem; flex: 1;
@include padding-right(10px);
margin-bottom: 0;
&.notify-participants {
margin-top: 0.5rem;
}
} }
} }
} }

21
js/src/components/Discussion/DiscussionComment.vue
View File

@ -10,7 +10,7 @@
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
<div class="body"> <div class="body">
<div class="meta"> <div class="meta" dir="auto">
<span <span
class="first-line name" class="first-line name"
v-if="comment.actor && !comment.deletedAt" v-if="comment.actor && !comment.deletedAt"
@ -64,7 +64,11 @@
> >
</div> </div>
</div> </div>
<div v-if="!editMode && !comment.deletedAt" class="text-wrapper"> <div
v-if="!editMode && !comment.deletedAt"
class="text-wrapper"
dir="auto"
>
<div class="description-content" v-html="comment.text"></div> <div class="description-content" v-html="comment.text"></div>
<p <p
v-if=" v-if="
@ -88,7 +92,7 @@
{{ $t("[This comment has been deleted by it's author]") }} {{ $t("[This comment has been deleted by it's author]") }}
</div> </div>
<form v-else class="edition" @submit.prevent="updateComment"> <form v-else class="edition" @submit.prevent="updateComment">
<editor v-model="updatedComment" /> <editor v-model="updatedComment" :aria-label="$t('Comment body')" />
<div class="buttons"> <div class="buttons">
<b-button <b-button
native-type="submit" native-type="submit"
@ -141,13 +145,16 @@ export default class DiscussionComment extends Vue {
} }
updateComment(): void { updateComment(): void {
this.comment.text = this.updatedComment; this.$emit("update-comment", {
this.$emit("update-comment", this.comment); ...this.comment,
text: this.updatedComment,
});
this.toggleEditMode(); this.toggleEditMode();
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
article.comment { article.comment {
display: flex; display: flex;
border-top: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9;
@ -163,7 +170,7 @@ article.comment {
padding: 0 1rem 0.3em; padding: 0 1rem 0.3em;
.name { .name {
margin-right: auto; @include margin-right(auto);
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
@ -216,7 +223,7 @@ article.comment {
::v-deep blockquote { ::v-deep blockquote {
border-left: 0.2em solid #333; border-left: 0.2em solid #333;
display: block; display: block;
padding-left: 1em; @include padding-left(1em);
} }
::v-deep p { ::v-deep p {

5
js/src/components/Discussion/DiscussionListItem.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<router-link <router-link
class="discussion-minimalist-card-wrapper" class="discussion-minimalist-card-wrapper"
dir="auto"
:to="{ :to="{
name: RouteName.DISCUSSION, name: RouteName.DISCUSSION,
params: { slug: discussion.slug, id: discussion.id }, params: { slug: discussion.slug, id: discussion.id },
@ -37,6 +38,7 @@
</div> </div>
<div <div
class="ellipsis has-text-grey-dark" class="ellipsis has-text-grey-dark"
dir="auto"
v-if="!discussion.lastComment.deletedAt" v-if="!discussion.lastComment.deletedAt"
> >
{{ htmlTextEllipsis }} {{ htmlTextEllipsis }}
@ -83,6 +85,7 @@ export default class DiscussionListItem extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.discussion-minimalist-card-wrapper { .discussion-minimalist-card-wrapper {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
@ -92,7 +95,7 @@ export default class DiscussionListItem extends Vue {
align-items: center; align-items: center;
.calendar-icon { .calendar-icon {
margin-right: 1rem; @include margin-right(1rem);
} }
.title-info-wrapper { .title-info-wrapper {

51
js/src/components/Editor.vue
View File

@ -16,6 +16,7 @@
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
type="button" type="button"
:title="$t('Bold')"
> >
<b-icon icon="format-bold" /> <b-icon icon="format-bold" />
</button> </button>
@ -25,6 +26,7 @@
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
type="button" type="button"
:title="$t('Italic')"
> >
<b-icon icon="format-italic" /> <b-icon icon="format-italic" />
</button> </button>
@ -34,6 +36,7 @@
:class="{ 'is-active': editor.isActive('underline') }" :class="{ 'is-active': editor.isActive('underline') }"
@click="editor.chain().focus().toggleUnderline().run()" @click="editor.chain().focus().toggleUnderline().run()"
type="button" type="button"
:title="$t('Underline')"
> >
<b-icon icon="format-underline" /> <b-icon icon="format-underline" />
</button> </button>
@ -44,6 +47,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
type="button" type="button"
:title="$t('Heading Level 1')"
> >
<b-icon icon="format-header-1" /> <b-icon icon="format-header-1" />
</button> </button>
@ -54,6 +58,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
type="button" type="button"
:title="$t('Heading Level 2')"
> >
<b-icon icon="format-header-2" /> <b-icon icon="format-header-2" />
</button> </button>
@ -64,6 +69,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
type="button" type="button"
:title="$t('Heading Level 3')"
> >
<b-icon icon="format-header-3" /> <b-icon icon="format-header-3" />
</button> </button>
@ -73,6 +79,7 @@
@click="showLinkMenu()" @click="showLinkMenu()"
:class="{ 'is-active': editor.isActive('link') }" :class="{ 'is-active': editor.isActive('link') }"
type="button" type="button"
:title="$t('Add link')"
> >
<b-icon icon="link" /> <b-icon icon="link" />
</button> </button>
@ -82,6 +89,7 @@
class="menubar__button" class="menubar__button"
@click="editor.chain().focus().unsetLink().run()" @click="editor.chain().focus().unsetLink().run()"
type="button" type="button"
:title="$t('Remove link')"
> >
<b-icon icon="link-off" /> <b-icon icon="link-off" />
</button> </button>
@ -91,6 +99,7 @@
v-if="!isBasicMode" v-if="!isBasicMode"
@click="showImagePrompt()" @click="showImagePrompt()"
type="button" type="button"
:title="$t('Add picture')"
> >
<b-icon icon="image" /> <b-icon icon="image" />
</button> </button>
@ -101,6 +110,7 @@
:class="{ 'is-active': editor.isActive('bulletList') }" :class="{ 'is-active': editor.isActive('bulletList') }"
@click="editor.chain().focus().toggleBulletList().run()" @click="editor.chain().focus().toggleBulletList().run()"
type="button" type="button"
:title="$t('Bullet list')"
> >
<b-icon icon="format-list-bulleted" /> <b-icon icon="format-list-bulleted" />
</button> </button>
@ -111,6 +121,7 @@
:class="{ 'is-active': editor.isActive('orderedList') }" :class="{ 'is-active': editor.isActive('orderedList') }"
@click="editor.chain().focus().toggleOrderedList().run()" @click="editor.chain().focus().toggleOrderedList().run()"
type="button" type="button"
:title="$t('Ordered list')"
> >
<b-icon icon="format-list-numbered" /> <b-icon icon="format-list-numbered" />
</button> </button>
@ -121,6 +132,7 @@
:class="{ 'is-active': editor.isActive('blockquote') }" :class="{ 'is-active': editor.isActive('blockquote') }"
@click="editor.chain().focus().toggleBlockquote().run()" @click="editor.chain().focus().toggleBlockquote().run()"
type="button" type="button"
:title="$t('Quote')"
> >
<b-icon icon="format-quote-close" /> <b-icon icon="format-quote-close" />
</button> </button>
@ -130,6 +142,7 @@
class="menubar__button" class="menubar__button"
@click="editor.chain().focus().undo().run()" @click="editor.chain().focus().undo().run()"
type="button" type="button"
:title="$t('Undo')"
> >
<b-icon icon="undo" /> <b-icon icon="undo" />
</button> </button>
@ -139,6 +152,7 @@
class="menubar__button" class="menubar__button"
@click="editor.chain().focus().redo().run()" @click="editor.chain().focus().redo().run()"
type="button" type="button"
:title="$t('Redo')"
> >
<b-icon icon="redo" /> <b-icon icon="redo" />
</button> </button>
@ -155,6 +169,7 @@
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
type="button" type="button"
:title="$t('Bold')"
> >
<b-icon icon="format-bold" /> <b-icon icon="format-bold" />
<span class="visually-hidden">{{ $t("Bold") }}</span> <span class="visually-hidden">{{ $t("Bold") }}</span>
@ -165,6 +180,7 @@
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
type="button" type="button"
:title="$t('Italic')"
> >
<b-icon icon="format-italic" /> <b-icon icon="format-italic" />
<span class="visually-hidden">{{ $t("Italic") }}</span> <span class="visually-hidden">{{ $t("Italic") }}</span>
@ -195,6 +211,8 @@ import ListItem from "@tiptap/extension-list-item";
import Underline from "@tiptap/extension-underline"; import Underline from "@tiptap/extension-underline";
import Link from "@tiptap/extension-link"; import Link from "@tiptap/extension-link";
import CharacterCount from "@tiptap/extension-character-count"; import CharacterCount from "@tiptap/extension-character-count";
import { AutoDir } from "./Editor/Autodir";
import sanitizeHtml from "sanitize-html";
@Component({ @Component({
components: { EditorContent, BubbleMenu }, components: { EditorContent, BubbleMenu },
@ -211,6 +229,8 @@ export default class EditorComponent extends Vue {
@Prop({ required: false, default: 100_000_000 }) maxSize!: number; @Prop({ required: false, default: 100_000_000 }) maxSize!: number;
@Prop({ required: false }) ariaLabel!: string;
currentActor!: IPerson; currentActor!: IPerson;
editor: Editor | null = null; editor: Editor | null = null;
@ -240,6 +260,14 @@ export default class EditorComponent extends Vue {
mounted(): void { mounted(): void {
this.editor = new Editor({ this.editor = new Editor({
editorProps: {
attributes: {
"aria-multiline": this.isShortMode.toString(),
"aria-label": this.ariaLabel,
role: "textbox",
},
transformPastedHTML: this.transformPastedHTML,
},
extensions: [ extensions: [
StarterKit, StarterKit,
Document, Document,
@ -249,6 +277,7 @@ export default class EditorComponent extends Vue {
ListItem, ListItem,
Mention.configure(MentionOptions), Mention.configure(MentionOptions),
CustomImage, CustomImage,
AutoDir,
Underline, Underline,
Link.configure({ Link.configure({
HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" }, HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
@ -265,6 +294,19 @@ export default class EditorComponent extends Vue {
}); });
} }
transformPastedHTML(html: string): string {
// When using comment mode, limit to acceptable tags
if (this.isCommentMode) {
return sanitizeHtml(html, {
allowedTags: ["b", "i", "em", "strong", "a"],
allowedAttributes: {
a: ["href", "rel", "target"],
},
});
}
return html;
}
@Watch("value") @Watch("value")
onValueChanged(val: string): void { onValueChanged(val: string): void {
if (!this.editor) return; if (!this.editor) return;
@ -315,7 +357,7 @@ export default class EditorComponent extends Vue {
}) })
.run(); .run();
} }
} catch (error) { } catch (error: any) {
console.error(error); console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) { if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message); this.$notifier.error(error.graphQLErrors[0].message);
@ -351,6 +393,7 @@ export default class EditorComponent extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@use "@/styles/_mixins" as *;
@import "./Editor/style.scss"; @import "./Editor/style.scss";
$color-black: #000; $color-black: #000;
@ -367,7 +410,7 @@ $color-white: #eee;
border: 0; border: 0;
color: $color-black; color: $color-black;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
margin-right: 0.2rem; @include margin-right(0.2rem);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
@ -439,7 +482,7 @@ $color-white: #eee;
ul, ul,
ol { ol {
padding-left: 1rem; @include padding-left(1rem);
} }
ul { ul {
@ -455,7 +498,7 @@ $color-white: #eee;
blockquote { blockquote {
border-left: 3px solid rgba($color-black, 0.1); border-left: 3px solid rgba($color-black, 0.1);
color: rgba($color-black, 0.8); color: rgba($color-black, 0.8);
padding-left: 0.8rem; @include padding-left(0.8rem);
font-style: italic; font-style: italic;
p { p {

30
js/src/components/Editor/Autodir.ts Normal file
View File

@ -0,0 +1,30 @@
import { Extension } from "@tiptap/core";
/**
* Allows to set dir="auto" on top nodes
* Taken from https://github.com/ueberdosis/tiptap/issues/1621#issuecomment-918990408
*/
export const AutoDir = Extension.create({
name: "AutoDir",
addGlobalAttributes() {
return [
{
types: [
"heading",
"paragraph",
"bulletList",
"orderedList",
"blockquote",
],
attributes: {
autoDir: {
renderHTML: () => ({
dir: "auto",
}),
parseHTML: (element) => element.dir || "auto",
},
},
},
];
},
});

1
js/src/components/Editor/Mention.ts
View File

@ -27,6 +27,7 @@ const debouncedFetchItems = pDebounce(fetchItems, 200);
const mentionOptions: Partial<any> = { const mentionOptions: Partial<any> = {
HTMLAttributes: { HTMLAttributes: {
class: "mention", class: "mention",
dir: "ltr",
}, },
suggestion: { suggestion: {
items: async (query: string): Promise<IPerson[]> => { items: async (query: string): Promise<IPerson[]> => {

8
js/src/components/Error.vue
View File

@ -103,9 +103,11 @@
:active="copied !== false" :active="copied !== false"
always always
> >
<b-button @click="copyErrorToClipboard">{{ <b-button
$t("Copy details to clipboard") @click="copyErrorToClipboard"
}}</b-button> @keyup.enter="copyErrorToClipboard"
>{{ $t("Copy details to clipboard") }}</b-button
>
</b-tooltip> </b-tooltip>
</div> </div>
</section> </section>

173
js/src/components/Event/AddressAutoComplete.vue
View File

@ -11,6 +11,8 @@
icon="map-marker" icon="map-marker"
expanded expanded
@select="updateSelected" @select="updateSelected"
v-bind="$attrs"
dir="auto"
> >
<template #default="{ option }"> <template #default="{ option }">
<b-icon :icon="option.poiInfos.poiIcon.icon" /> <b-icon :icon="option.poiInfos.poiIcon.icon" />
@ -20,12 +22,17 @@
</template> </template>
</b-autocomplete> </b-autocomplete>
</b-field> </b-field>
<b-field v-if="canDoGeoLocation"> <b-field
v-if="canDoGeoLocation"
:message="fieldErrors"
:type="{ 'is-danger': fieldErrors.length }"
>
<b-button <b-button
type="is-text" type="is-text"
v-if="!gettingLocation" v-if="!gettingLocation"
icon-right="target" icon-right="target"
@click="locateMe" @click="locateMe"
@keyup.enter="locateMe"
>{{ $t("Use my location") }}</b-button >{{ $t("Use my location") }}</b-button
> >
<span v-else>{{ $t("Getting location") }}</span> <span v-else>{{ $t("Getting location") }}</span>
@ -52,26 +59,16 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import { LatLng } from "leaflet";
import debounce from "lodash/debounce";
import { DebouncedFunc } from "lodash";
import { Address, IAddress } from "../../types/address.model"; import { Address, IAddress } from "../../types/address.model";
import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address"; import AddressAutoCompleteMixin from "@/mixins/AddressAutoCompleteMixin";
import { CONFIG } from "../../graphql/config";
import { IConfig } from "../../types/config.model";
@Component({ @Component({
components: { inheritAttrs: false,
"map-leaflet": () =>
import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
},
apollo: {
config: CONFIG,
},
}) })
export default class AddressAutoComplete extends Vue { export default class AddressAutoComplete extends Mixins(
@Prop({ required: true }) value!: IAddress; AddressAutoCompleteMixin
) {
@Prop({ required: false, default: false }) type!: string | false; @Prop({ required: false, default: false }) type!: string | false;
@Prop({ required: false, default: true, type: Boolean }) @Prop({ required: false, default: true, type: Boolean })
doGeoLocation!: boolean; doGeoLocation!: boolean;
@ -80,84 +77,20 @@ export default class AddressAutoComplete extends Vue {
selected: IAddress = new Address(); selected: IAddress = new Address();
isFetching = false;
initialQueryText = ""; initialQueryText = "";
addressModalActive = false; addressModalActive = false;
showmap = false; showmap = false;
private gettingLocation = false; get queryText2(): string {
// eslint-disable-next-line no-undef
private location!: GeolocationPosition;
private gettingLocationError: any;
private mapDefaultZoom = 15;
config!: IConfig;
fetchAsyncData!: DebouncedFunc<(query: string) => Promise<void>>;
// We put this in data because of issues like
// https://github.com/vuejs/vue-class-component/issues/263
data(): Record<string, unknown> {
return {
fetchAsyncData: debounce(this.asyncData, 200),
};
}
async asyncData(query: string): Promise<void> {
if (!query.length) {
this.addressData = [];
this.selected = new Address();
return;
}
if (query.length < 3) {
this.addressData = [];
return;
}
this.isFetching = true;
const variables: { query: string; locale: string; type?: string } = {
query,
locale: this.$i18n.locale,
};
if (this.type) {
variables.type = this.type;
}
const result = await this.$apollo.query({
query: ADDRESS,
fetchPolicy: "network-only",
variables,
});
this.addressData = result.data.searchAddress.map(
(address: IAddress) => new Address(address)
);
this.isFetching = false;
}
@Watch("config")
watchConfig(config: IConfig): void {
if (!config.geocoding.autocomplete) {
// If autocomplete is disabled, we put a larger debounce value
// so that we don't request with incomplete address
this.fetchAsyncData = debounce(this.asyncData, 2000);
}
}
get queryText(): string {
if (this.value !== undefined) { if (this.value !== undefined) {
return new Address(this.value).fullName; return new Address(this.value).fullName;
} }
return this.initialQueryText; return this.initialQueryText;
} }
set queryText(queryText: string) { set queryText2(queryText: string) {
this.initialQueryText = queryText; this.initialQueryText = queryText;
} }
@ -186,80 +119,6 @@ export default class AddressAutoComplete extends Vue {
this.showmap = !this.showmap; this.showmap = !this.showmap;
} }
async reverseGeoCode(e: LatLng, zoom: number): Promise<void> {
// If the position has been updated through autocomplete selection, no need to geocode it!
if (this.checkCurrentPosition(e)) return;
const result = await this.$apollo.query({
query: REVERSE_GEOCODE,
variables: {
latitude: e.lat,
longitude: e.lng,
zoom,
locale: this.$i18n.locale,
},
});
this.addressData = result.data.reverseGeocode.map(
(address: IAddress) => new Address(address)
);
if (this.addressData.length > 0) {
const defaultAddress = new Address(this.addressData[0]);
this.selected = defaultAddress;
this.$emit("input", this.selected);
this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
}
}
checkCurrentPosition(e: LatLng): boolean {
if (!this.selected || !this.selected.geom) return false;
const lat = parseFloat(this.selected.geom.split(";")[1]);
const lon = parseFloat(this.selected.geom.split(";")[0]);
return e.lat === lat && e.lng === lon;
}
async locateMe(): Promise<void> {
this.gettingLocation = true;
try {
this.location = await AddressAutoComplete.getLocation();
this.mapDefaultZoom = 12;
this.reverseGeoCode(
new LatLng(
this.location.coords.latitude,
this.location.coords.longitude
),
12
);
} catch (e) {
console.error(e);
this.gettingLocationError = e.message;
}
this.gettingLocation = false;
}
// eslint-disable-next-line no-undef
static async getLocation(): Promise<GeolocationPosition> {
return new Promise((resolve, reject) => {
if (!("geolocation" in navigator)) {
reject(new Error("Geolocation is not available."));
}
navigator.geolocation.getCurrentPosition(
(pos) => {
resolve(pos);
},
(err) => {
reject(err);
}
);
});
}
// eslint-disable-next-line class-methods-use-this
get isSecureContext(): boolean {
return window.isSecureContext;
}
get canDoGeoLocation(): boolean { get canDoGeoLocation(): boolean {
return this.isSecureContext && this.doGeoLocation; return this.isSecureContext && this.doGeoLocation;
} }

14
js/src/components/Event/DateCalendarIcon.vue
View File

@ -12,18 +12,17 @@
</docs> </docs>
<template> <template>
<time <div
class="datetime-container" class="datetime-container"
:class="{ small }" :class="{ small }"
:datetime="dateObj.getUTCSeconds()"
:style="`--small: ${smallStyle}`" :style="`--small: ${smallStyle}`"
> >
<div class="datetime-container-header" /> <div class="datetime-container-header" />
<div class="datetime-container-content"> <div class="datetime-container-content">
<span class="day">{{ day }}</span> <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
<span class="month">{{ month }}</span> <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
</div> </div>
</time> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
@ -54,14 +53,13 @@ export default class DateCalendarIcon extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
time.datetime-container { div.datetime-container {
background: $chapril_blue_light; background: $chapril_blue_light;
border: 1px solid $borders; border: 1px solid $borders;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 50px;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
overflow-y: hidden; overflow-y: hidden;
@ -80,7 +78,7 @@ time.datetime-container {
height: calc(30px * var(--small)); height: calc(30px * var(--small));
} }
span { time {
display: block; display: block;
font-weight: 600; font-weight: 600;
color: $violet-3; color: $violet-3;

160
js/src/components/Event/EventCard.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<router-link <router-link
class="card" class="card"
:to="{ name: 'Event', params: { uuid: event.uuid } }" :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
> >
<div class="card-image"> <div class="card-image">
<figure class="image is-16by9"> <figure class="image is-16by9">
@ -24,7 +24,7 @@
v-for="tag in (event.tags || []).slice(0, 3)" v-for="tag in (event.tags || []).slice(0, 3)"
:key="tag.slug" :key="tag.slug"
> >
<b-tag type="is-light">{{ tag.title }}</b-tag> <b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
</router-link> </router-link>
</div> </div>
</figure> </figure>
@ -39,79 +39,72 @@
/> />
</div> </div>
<div class="media-content"> <div class="media-content">
<p class="event-title" :title="event.title">{{ event.title }}</p> <h3
<div class="event-title"
class="event-subtitle" :title="event.title"
v-if="event.physicalAddress" dir="auto"
:title=" :lang="event.language"
isDescriptionDifferentFromLocality
? `${event.physicalAddress.description}, ${event.physicalAddress.locality}`
: event.physicalAddress.description
"
> >
<!-- <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>--> {{ event.title }}
<span v-if="isDescriptionDifferentFromLocality"> </h3>
{{ event.physicalAddress.description }}, <div class="content-end">
{{ event.physicalAddress.locality }} <div class="event-organizer" dir="auto">
</span> <figure
<span v-else> class="image is-24x24"
{{ event.physicalAddress.description }} v-if="organizer(event) && organizer(event).avatar"
</span> >
<img
class="is-rounded"
:src="organizer(event).avatar.url"
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
</div>
<inline-address
dir="auto"
v-if="event.physicalAddress"
class="event-subtitle"
:physical-address="event.physicalAddress"
/>
<div
class="event-subtitle"
dir="auto"
v-else-if="event.options && event.options.isOnline"
>
<b-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="date-and-title">-->
<!-- <div class="date-component">-->
<!-- <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
<!-- </div>-->
<!-- <div class="title-wrapper">-->
<!-- <h4>{{ event.title }}</h4>-->
<!-- <div class="organizer-place-wrapper has-text-grey">-->
<!-- <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
<!-- ·-->
<!-- <span v-if="event.physicalAddress">-->
<!-- {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-if="!mergedOptions.hideDetails" class="details">-->
<!-- <div v-if="event.participants.length > 0 &&-->
<!-- mergedOptions.loggedPerson &&-->
<!-- event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
<!-- <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
<!-- </div>-->
<!-- <div v-else-if="event.participants.length === 1">-->
<!-- <translate-->
<!-- :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
<!-- >{name} organizes this event</translate>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
<!-- {{ participant.actor.preferredUsername }}-->
<!-- <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
<!-- &lt;!&ndash; <translate-->
<!-- :translate-params="{name: participant.actor.preferredUsername}"-->
<!-- >&nbsp;{name} is in,</translate>&ndash;&gt;-->
<!-- </span>-->
<!-- </div>-->
</router-link> </router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
import { IEvent, IEventCardOptions } from "@/types/event.model"; import {
IEvent,
IEventCardOptions,
organizerDisplayName,
organizer,
} from "@/types/event.model";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue"; import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import { Actor, Person } from "@/types/actor"; import { Actor, Person } from "@/types/actor";
import { EventStatus, ParticipantRole } from "@/types/enums"; import { EventStatus, ParticipantRole } from "@/types/enums";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import InlineAddress from "@/components/Address/InlineAddress.vue";
@Component({ @Component({
components: { components: {
DateCalendarIcon, DateCalendarIcon,
LazyImageWrapper, LazyImageWrapper,
InlineAddress,
}, },
}) })
export default class EventCard extends Vue { export default class EventCard extends Vue {
@ -125,6 +118,10 @@ export default class EventCard extends Vue {
RouteName = RouteName; RouteName = RouteName;
organizerDisplayName = organizerDisplayName;
organizer = organizer;
defaultOptions: IEventCardOptions = { defaultOptions: IEventCardOptions = {
hideDate: false, hideDate: false,
loggedPerson: false, loggedPerson: false,
@ -143,18 +140,13 @@ export default class EventCard extends Vue {
this.event.organizerActor || this.mergedOptions.organizerActor this.event.organizerActor || this.mergedOptions.organizerActor
); );
} }
get isDescriptionDifferentFromLocality(): boolean {
return (
this.event?.physicalAddress?.description !==
this.event?.physicalAddress?.locality &&
this.event?.physicalAddress?.description !== undefined
);
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@use "@/styles/_event-card";
a.card { a.card {
display: block; display: block;
background: $secondary; background: $secondary;
@ -190,7 +182,7 @@ a.card {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0; right: 0;
margin-right: -3px; @include margin-right(-3px);
z-index: 10; z-index: 10;
max-width: 40%; max-width: 40%;
@ -220,12 +212,14 @@ a.card {
} }
.card-content { .card-content {
height: 100%;
padding: 0.5rem; padding: 0.5rem;
& > .media { & > .media {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
& > .media-left { & > .media-left {
margin-top: -15px; margin-top: -15px;
@ -234,37 +228,39 @@ a.card {
align-items: flex-end; align-items: flex-end;
align-self: flex-start; align-self: flex-start;
margin-bottom: 15px; margin-bottom: 15px;
margin-left: 0rem; @include margin-left(0);
}
& > .media-content {
flex: 1;
width: 100%;
overflow-x: inherit;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
} }
.event-title { .event-title {
font-size: 1.2rem; font-size: 18px;
line-height: 1.25rem; line-height: 24px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
min-height: 2.4rem;
font-weight: bold; font-weight: bold;
} }
.content-end {
padding-top: 8px;
}
.event-subtitle { .event-subtitle {
font-size: 0.85rem; font-size: 0.85rem;
display: inline-flex; }
flex-wrap: wrap;
color: #3c376e;
span { .organizer-name {
width: 14rem; font-size: 14px;
display: block;
overflow: hidden;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }

189
js/src/components/Event/EventFullDate.vue
View File

@ -18,66 +18,100 @@
</docs> </docs>
<template> <template>
<span v-if="!endsOn">{{ <p v-if="!endsOn">
beginsOn | formatDateTimeString(showStartTime) <span>{{
}}</span> formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
<span v-else-if="isSameDay() && showStartTime && showEndTime"> }}</span>
{{ <br />
<b-switch
size="is-small"
v-model="showLocalTimezone"
v-if="differentFromUserTimezone"
>
{{ singleTimeZone }}
</b-switch>
</p>
<p v-else-if="isSameDay() && showStartTime && showEndTime">
<span>{{
$t("On {date} from {startTime} to {endTime}", { $t("On {date} from {startTime} to {endTime}", {
date: formatDate(beginsOn), date: formatDate(beginsOn),
startTime: formatTime(beginsOn), startTime: formatTime(beginsOn, timezoneToShow),
endTime: formatTime(endsOn), endTime: formatTime(endsOn, timezoneToShow),
}) })
}} }}</span>
</span> <br />
<span v-else-if="isSameDay() && !showStartTime && showEndTime"> <b-switch
{{ size="is-small"
$t("On {date} ending at {endTime}", { v-model="showLocalTimezone"
date: formatDate(beginsOn), v-if="differentFromUserTimezone"
endTime: formatTime(endsOn), >
}) {{ singleTimeZone }}
}} </b-switch>
</span> </p>
<span v-else-if="isSameDay() && showStartTime && !showEndTime"> <p v-else-if="isSameDay() && showStartTime && !showEndTime">
{{ {{
$t("On {date} starting at {startTime}", { $t("On {date} starting at {startTime}", {
date: formatDate(beginsOn), date: formatDate(beginsOn),
startTime: formatTime(beginsOn), startTime: formatTime(beginsOn),
}) })
}} }}
</span> </p>
<span v-else-if="isSameDay()">{{ <p v-else-if="isSameDay()">
$t("On {date}", { date: formatDate(beginsOn) }) {{ $t("On {date}", { date: formatDate(beginsOn) }) }}
}}</span> </p>
<span v-else-if="endsOn && showStartTime && showEndTime"> <p v-else-if="endsOn && showStartTime && showEndTime">
{{ <span>
$t("From the {startDate} at {startTime} to the {endDate} at {endTime}", { {{
startDate: formatDate(beginsOn), $t(
startTime: formatTime(beginsOn), "From the {startDate} at {startTime} to the {endDate} at {endTime}",
endDate: formatDate(endsOn), {
endTime: formatTime(endsOn), startDate: formatDate(beginsOn),
}) startTime: formatTime(beginsOn, timezoneToShow),
}} endDate: formatDate(endsOn),
</span> endTime: formatTime(endsOn, timezoneToShow),
<span v-else-if="endsOn && showStartTime"> }
{{ )
$t("From the {startDate} at {startTime} to the {endDate}", { }}
startDate: formatDate(beginsOn), </span>
startTime: formatTime(beginsOn), <br />
endDate: formatDate(endsOn), <b-switch
}) size="is-small"
}} v-model="showLocalTimezone"
</span> v-if="differentFromUserTimezone"
<span v-else-if="endsOn"> >
{{ multipleTimeZones }}
</b-switch>
</p>
<p v-else-if="endsOn && showStartTime">
<span>
{{
$t("From the {startDate} at {startTime} to the {endDate}", {
startDate: formatDate(beginsOn),
startTime: formatTime(beginsOn, timezoneToShow),
endDate: formatDate(endsOn),
})
}}
</span>
<br />
<b-switch
size="is-small"
v-model="showLocalTimezone"
v-if="differentFromUserTimezone"
>
{{ singleTimeZone }}
</b-switch>
</p>
<p v-else-if="endsOn">
{{ {{
$t("From the {startDate} to the {endDate}", { $t("From the {startDate} to the {endDate}", {
startDate: formatDate(beginsOn), startDate: formatDate(beginsOn),
endDate: formatDate(endsOn), endDate: formatDate(endsOn),
}) })
}} }}
</span> </p>
</template> </template>
<script lang="ts"> <script lang="ts">
import { getTimezoneOffset } from "date-fns-tz";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
@ -90,14 +124,47 @@ export default class EventFullDate extends Vue {
@Prop({ required: false, default: true }) showEndTime!: boolean; @Prop({ required: false, default: true }) showEndTime!: boolean;
@Prop({ required: false }) timezone!: string;
@Prop({ required: false }) userTimezone!: string;
showLocalTimezone = true;
get timezoneToShow(): string {
if (this.showLocalTimezone) {
return this.timezone;
}
return this.userActualTimezone;
}
get userActualTimezone(): string {
if (this.userTimezone) {
return this.userTimezone;
}
return Intl.DateTimeFormat().resolvedOptions().timeZone;
}
formatDate(value: Date): string | undefined { formatDate(value: Date): string | undefined {
if (!this.$options.filters) return undefined; if (!this.$options.filters) return undefined;
return this.$options.filters.formatDateString(value); return this.$options.filters.formatDateString(value);
} }
formatTime(value: Date): string | undefined { formatTime(value: Date, timezone: string): string | undefined {
if (!this.$options.filters) return undefined; if (!this.$options.filters) return undefined;
return this.$options.filters.formatTimeString(value); return this.$options.filters.formatTimeString(value, timezone || undefined);
}
formatDateTimeString(
value: Date,
timezone: string,
showTime: boolean
): string | undefined {
if (!this.$options.filters) return undefined;
return this.$options.filters.formatDateTimeString(
value,
timezone,
showTime
);
} }
isSameDay(): boolean { isSameDay(): boolean {
@ -106,5 +173,37 @@ export default class EventFullDate extends Vue {
new Date(this.endsOn).toDateString(); new Date(this.endsOn).toDateString();
return this.endsOn !== undefined && sameDay; return this.endsOn !== undefined && sameDay;
} }
get differentFromUserTimezone(): boolean {
return (
!!this.timezone &&
!!this.userActualTimezone &&
getTimezoneOffset(this.timezone) !==
getTimezoneOffset(this.userActualTimezone) &&
this.timezone !== this.userActualTimezone
);
}
get singleTimeZone(): string {
if (this.showLocalTimezone) {
return this.$t("Local time ({timezone})", {
timezone: this.timezoneToShow,
}) as string;
}
return this.$t("Time in your timezone ({timezone})", {
timezone: this.timezoneToShow,
}) as string;
}
get multipleTimeZones(): string {
if (this.showLocalTimezone) {
return this.$t("Local time ({timezone})", {
timezone: this.timezoneToShow,
}) as string;
}
return this.$t("Times in your timezone ({timezone})", {
timezone: this.timezoneToShow,
}) as string;
}
} }
</script> </script>

5
js/src/components/Event/EventListViewCard.vue
View File

@ -12,7 +12,7 @@
<h2 class="title">{{ event.title }}</h2> <h2 class="title">{{ event.title }}</h2>
</router-link> </router-link>
</div> </div>
<div class="participation-actor has-text-grey"> <div class="participation-actor has-text-grey-dark">
<span v-if="event.physicalAddress && event.physicalAddress.locality"> <span v-if="event.physicalAddress && event.physicalAddress.locality">
{{ event.physicalAddress.locality }} {{ event.physicalAddress.locality }}
</span> </span>
@ -128,6 +128,7 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
article.box { article.box {
div.content { div.content {
padding: 5px; padding: 5px;
@ -148,7 +149,7 @@ article.box {
div.date-component { div.date-component {
flex: 0; flex: 0;
margin-right: 16px; @include margin-right(16px);
} }
.title { .title {

176
js/src/components/Event/EventMap.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="modal-card">
<header class="modal-card-head">
<button type="button" class="delete" @click="$emit('close')" />
</header>
<div class="modal-card-body">
<section class="map">
<map-leaflet
:coords="physicalAddress.geom"
:marker="{
text: physicalAddress.fullName,
icon: physicalAddress.poiInfos.poiIcon.icon,
}"
/>
</section>
<section class="columns is-centered map-footer">
<div class="column is-half has-text-centered">
<p class="address">
<i class="mdi mdi-map-marker"></i>
{{ physicalAddress.fullName }}
</p>
<p class="getting-there">{{ $t("Getting there") }}</p>
<div
class="buttons"
v-if="
addressLinkToRouteByCar ||
addressLinkToRouteByBike ||
addressLinkToRouteByFeet
"
>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByFeet"
:href="addressLinkToRouteByFeet"
>
<i class="mdi mdi-walk"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByBike"
:href="addressLinkToRouteByBike"
>
<i class="mdi mdi-bike"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByTransit"
:href="addressLinkToRouteByTransit"
>
<i class="mdi mdi-bus"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByCar"
:href="addressLinkToRouteByCar"
>
<i class="mdi mdi-car"></i>
</a>
</div>
</div>
</section>
</div>
</div>
</template>
<script lang="ts">
import { Address, IAddress } from "@/types/address.model";
import { RoutingTransportationType, RoutingType } from "@/types/enums";
import { PropType } from "vue";
import { Component, Vue, Prop } from "vue-property-decorator";
const RoutingParamType = {
[RoutingType.OPENSTREETMAP]: {
[RoutingTransportationType.FOOT]: "engine=fossgis_osrm_foot",
[RoutingTransportationType.BIKE]: "engine=fossgis_osrm_bike",
[RoutingTransportationType.TRANSIT]: null,
[RoutingTransportationType.CAR]: "engine=fossgis_osrm_car",
},
[RoutingType.GOOGLE_MAPS]: {
[RoutingTransportationType.FOOT]: "dirflg=w",
[RoutingTransportationType.BIKE]: "dirflg=b",
[RoutingTransportationType.TRANSIT]: "dirflg=r",
[RoutingTransportationType.CAR]: "driving",
},
};
@Component({
components: {
"map-leaflet": () =>
import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
},
})
export default class EventMap extends Vue {
@Prop({ type: Object as PropType<IAddress> }) address!: IAddress;
@Prop({ type: String }) routingType!: RoutingType;
get physicalAddress(): Address | null {
if (!this.address) return null;
return new Address(this.address);
}
makeNavigationPath(
transportationType: RoutingTransportationType
): string | undefined {
const geometry = this.physicalAddress?.geom;
if (geometry) {
/**
* build urls to routing map
*/
if (!RoutingParamType[this.routingType][transportationType]) {
return;
}
const urlGeometry = geometry.split(";").reverse().join(",");
switch (this.routingType) {
case RoutingType.GOOGLE_MAPS:
return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${
RoutingParamType[this.routingType][transportationType]
}`;
case RoutingType.OPENSTREETMAP:
default: {
const bboxX = geometry.split(";").reverse()[0];
const bboxY = geometry.split(";").reverse()[1];
return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${
RoutingParamType[this.routingType][transportationType]
}#map=14/${bboxX}/${bboxY}`;
}
}
}
}
get addressLinkToRouteByCar(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.CAR);
}
get addressLinkToRouteByBike(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.BIKE);
}
get addressLinkToRouteByFeet(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.FOOT);
}
get addressLinkToRouteByTransit(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.TRANSIT);
}
}
</script>
<style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.modal-card-head {
justify-content: flex-end;
button.delete {
@include margin-right(1rem);
}
}
section.map {
height: calc(100% - 8rem);
width: calc(100% - 20px);
}
section.map-footer {
p.address {
margin: 1rem auto;
}
div.buttons {
justify-content: center;
}
}
</style>

7
js/src/components/Event/EventMetadataBlock.vue
View File

@ -14,9 +14,9 @@
/> />
</span> </span>
<b-icon v-else-if="icon" :icon="icon" size="is-medium" /> <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
<p :class="{ 'padding-left': icon }"> <div class="content-wrapper" :class="{ 'padding-left': icon }">
<slot></slot> <slot></slot>
</p> </div>
</div> </div>
</div> </div>
</template> </template>
@ -42,8 +42,9 @@ div.eventMetadataBlock {
align-items: center; align-items: center;
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
p { .content-wrapper {
overflow: hidden; overflow: hidden;
width: 100%;
&.padding-left { &.padding-left {
padding: 0 20px; padding: 0 20px;

4
js/src/components/Event/EventMetadataItem.vue
View File

@ -9,6 +9,7 @@
:src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`" :src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`"
width="24" width="24"
height="24" height="24"
alt=""
/> />
<b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" /> <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
@ -130,11 +131,12 @@ export default class EventMetadataItem extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.card .media { .card .media {
align-items: center; align-items: center;
& > button { & > button {
margin-left: 1rem; @include margin-left(1rem);
} }
} }
</style> </style>

21
js/src/components/Event/EventMetadataList.vue
View File

@ -9,9 +9,14 @@
/> />
</div> </div>
</div> </div>
<b-field grouped :label="$t('Find or add an element')"> <b-field
grouped
:label="$t('Find or add an element')"
label-for="event-metadata-autocomplete"
>
<b-autocomplete <b-autocomplete
expanded expanded
:clear-on-select="true"
v-model="search" v-model="search"
ref="autocomplete" ref="autocomplete"
:data="filteredDataArray" :data="filteredDataArray"
@ -19,7 +24,9 @@
group-options="items" group-options="items"
open-on-focus open-on-focus
:placeholder="$t('e.g. Accessibility, Twitch, PeerTube')" :placeholder="$t('e.g. Accessibility, Twitch, PeerTube')"
id="event-metadata-autocomplete"
@select="(option) => addElement(option)" @select="(option) => addElement(option)"
dir="auto"
> >
<template slot-scope="props"> <template slot-scope="props">
<div class="media"> <div class="media">
@ -32,6 +39,7 @@
:src="`/img/${props.option.icon.substring(8)}_monochrome.svg`" :src="`/img/${props.option.icon.substring(8)}_monochrome.svg`"
width="24" width="24"
height="24" height="24"
alt=""
/> />
<b-icon v-else-if="props.option.icon" :icon="props.option.icon" /> <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
<b-icon v-else icon="help-circle" /> <b-icon v-else icon="help-circle" />
@ -55,7 +63,11 @@
</b-button> </b-button>
</p> </p>
</b-field> </b-field>
<b-modal has-modal-card v-model="showNewElementModal"> <b-modal
has-modal-card
v-model="showNewElementModal"
:close-button-aria-label="$t('Close')"
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
<button <button
@ -129,7 +141,10 @@ export default class EventMetadataList extends Vue {
} }
set metadata(metadata: IEventMetadata[]) { set metadata(metadata: IEventMetadata[]) {
this.$emit("input", metadata); this.$emit(
"input",
metadata.filter((elem) => elem)
);
} }
localizedCategories: Record<EventMetadataCategories, string> = { localizedCategories: Record<EventMetadataCategories, string> = {

222
js/src/components/Event/EventMetadataSidebar.vue
View File

@ -1,31 +1,22 @@
<template> <template>
<div> <div>
<event-metadata-block <event-metadata-block
v-if="!event.options.isOnline"
:title="$t('Location')" :title="$t('Location')"
:icon="physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'" :icon="physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'"
> >
<div class="address-wrapper"> <div class="address-wrapper">
<span v-if="!physicalAddress">{{ $t("No address defined") }}</span> <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
<div class="address" v-if="physicalAddress"> <div class="address" v-if="physicalAddress">
<div> <address-info :address="physicalAddress" />
<address> <b-button
<p type="is-text"
class="addressDescription"
:title="physicalAddress.poiInfos.name"
>
{{ physicalAddress.poiInfos.name }}
</p>
<p class="has-text-grey-dark">
{{ physicalAddress.poiInfos.alternativeName }}
</p>
</address>
</div>
<span
class="map-show-button" class="map-show-button"
@click="showMap = !showMap" @click="$emit('showMapModal', true)"
v-if="physicalAddress.geom" v-if="physicalAddress.geom"
>{{ $t("Show map") }}</span
> >
{{ $t("Show map") }}
</b-button>
</div> </div>
</div> </div>
</event-metadata-block> </event-metadata-block>
@ -34,6 +25,8 @@
:beginsOn="event.beginsOn" :beginsOn="event.beginsOn"
:show-start-time="event.options.showStartTime" :show-start-time="event.options.showStartTime"
:show-end-time="event.options.showEndTime" :show-end-time="event.options.showEndTime"
:timezone="event.options.timezone"
:userTimezone="userTimezone"
:endsOn="event.endsOn" :endsOn="event.endsOn"
/> />
</event-metadata-block> </event-metadata-block>
@ -140,91 +133,12 @@
> >
<span v-else>{{ extra.value }}</span> <span v-else>{{ extra.value }}</span>
</event-metadata-block> </event-metadata-block>
<b-modal
class="map-modal"
v-if="physicalAddress && physicalAddress.geom"
:active.sync="showMap"
has-modal-card
full-screen
>
<div class="modal-card">
<header class="modal-card-head">
<button type="button" class="delete" @click="showMap = false" />
</header>
<div class="modal-card-body">
<section class="map">
<map-leaflet
:coords="physicalAddress.geom"
:marker="{
text: physicalAddress.fullName,
icon: physicalAddress.poiInfos.poiIcon.icon,
}"
/>
</section>
<section class="columns is-centered map-footer">
<div class="column is-half has-text-centered">
<p class="address">
<i class="mdi mdi-map-marker"></i>
{{ physicalAddress.fullName }}
</p>
<p class="getting-there">{{ $t("Getting there") }}</p>
<div
class="buttons"
v-if="
addressLinkToRouteByCar ||
addressLinkToRouteByBike ||
addressLinkToRouteByFeet
"
>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByFeet"
:href="addressLinkToRouteByFeet"
>
<i class="mdi mdi-walk"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByBike"
:href="addressLinkToRouteByBike"
>
<i class="mdi mdi-bike"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByTransit"
:href="addressLinkToRouteByTransit"
>
<i class="mdi mdi-bus"></i
></a>
<a
class="button"
target="_blank"
v-if="addressLinkToRouteByCar"
:href="addressLinkToRouteByCar"
>
<i class="mdi mdi-car"></i>
</a>
</div>
</div>
</section>
</div>
</div>
</b-modal>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Address } from "@/types/address.model"; import { Address } from "@/types/address.model";
import { IConfig } from "@/types/config.model"; import { IConfig } from "@/types/config.model";
import { import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
EventMetadataKeyType,
EventMetadataType,
RoutingTransportationType,
RoutingType,
} from "@/types/enums";
import { IEvent } from "@/types/event.model"; import { IEvent } from "@/types/event.model";
import { PropType } from "vue"; import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
@ -234,11 +148,13 @@ import EventMetadataBlock from "./EventMetadataBlock.vue";
import EventFullDate from "./EventFullDate.vue"; import EventFullDate from "./EventFullDate.vue";
import PopoverActorCard from "../Account/PopoverActorCard.vue"; import PopoverActorCard from "../Account/PopoverActorCard.vue";
import ActorCard from "../../components/Account/ActorCard.vue"; import ActorCard from "../../components/Account/ActorCard.vue";
import AddressInfo from "../../components/Address/AddressInfo.vue";
import { import {
IEventMetadata, IEventMetadata,
IEventMetadataDescription, IEventMetadataDescription,
} from "@/types/event-metadata"; } from "@/types/event-metadata";
import { eventMetaDataList } from "../../services/EventMetadata"; import { eventMetaDataList } from "../../services/EventMetadata";
import { IUser } from "@/types/current-user.model";
@Component({ @Component({
components: { components: {
@ -246,15 +162,14 @@ import { eventMetaDataList } from "../../services/EventMetadata";
EventFullDate, EventFullDate,
PopoverActorCard, PopoverActorCard,
ActorCard, ActorCard,
"map-leaflet": () => AddressInfo,
import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
}, },
}) })
export default class EventMetadataSidebar extends Vue { export default class EventMetadataSidebar extends Vue {
@Prop({ type: Object as PropType<IEvent>, required: true }) event!: IEvent; @Prop({ type: Object as PropType<IEvent>, required: true }) event!: IEvent;
@Prop({ type: Object as PropType<IConfig>, required: true }) config!: IConfig; @Prop({ type: Object as PropType<IConfig>, required: true }) config!: IConfig;
@Prop({ required: true }) user!: IUser | undefined;
showMap = false; @Prop({ required: false, default: false }) showMap!: boolean;
RouteName = RouteName; RouteName = RouteName;
@ -265,21 +180,6 @@ export default class EventMetadataSidebar extends Vue {
EventMetadataType = EventMetadataType; EventMetadataType = EventMetadataType;
EventMetadataKeyType = EventMetadataKeyType; EventMetadataKeyType = EventMetadataKeyType;
RoutingParamType = {
[RoutingType.OPENSTREETMAP]: {
[RoutingTransportationType.FOOT]: "engine=fossgis_osrm_foot",
[RoutingTransportationType.BIKE]: "engine=fossgis_osrm_bike",
[RoutingTransportationType.TRANSIT]: null,
[RoutingTransportationType.CAR]: "engine=fossgis_osrm_car",
},
[RoutingType.GOOGLE_MAPS]: {
[RoutingTransportationType.FOOT]: "dirflg=w",
[RoutingTransportationType.BIKE]: "dirflg=b",
[RoutingTransportationType.TRANSIT]: "dirflg=r",
[RoutingTransportationType.CAR]: "driving",
},
};
get physicalAddress(): Address | null { get physicalAddress(): Address | null {
if (!this.event.physicalAddress) return null; if (!this.event.physicalAddress) return null;
@ -296,50 +196,6 @@ export default class EventMetadataSidebar extends Vue {
}); });
} }
makeNavigationPath(
transportationType: RoutingTransportationType
): string | undefined {
const geometry = this.physicalAddress?.geom;
if (geometry) {
const routingType = this.config.maps.routing.type;
/**
* build urls to routing map
*/
if (!this.RoutingParamType[routingType][transportationType]) {
return;
}
const urlGeometry = geometry.split(";").reverse().join(",");
switch (routingType) {
case RoutingType.GOOGLE_MAPS:
return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${this.RoutingParamType[routingType][transportationType]}`;
case RoutingType.OPENSTREETMAP:
default: {
const bboxX = geometry.split(";").reverse()[0];
const bboxY = geometry.split(";").reverse()[1];
return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${this.RoutingParamType[routingType][transportationType]}#map=14/${bboxX}/${bboxY}`;
}
}
}
}
get addressLinkToRouteByCar(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.CAR);
}
get addressLinkToRouteByBike(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.BIKE);
}
get addressLinkToRouteByFeet(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.FOOT);
}
get addressLinkToRouteByTransit(): undefined | string {
return this.makeNavigationPath(RoutingTransportationType.TRANSIT);
}
urlToHostname(url: string): string | null { urlToHostname(url: string): string | null {
try { try {
return new URL(url).hostname; return new URL(url).hostname;
@ -372,6 +228,10 @@ export default class EventMetadataSidebar extends Vue {
} }
} }
} }
get userTimezone(): string | undefined {
return this.user?.settings?.timezone;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -401,50 +261,6 @@ div.address-wrapper {
.map-show-button { .map-show-button {
cursor: pointer; cursor: pointer;
} }
address {
font-style: normal;
flex-wrap: wrap;
display: flex;
justify-content: flex-start;
span.addressDescription {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 0 auto;
min-width: 100%;
max-width: 4rem;
overflow: hidden;
}
:not(.addressDescription) {
flex: 1;
min-width: 100%;
}
}
}
}
.map-modal {
.modal-card-head {
justify-content: flex-end;
button.delete {
margin-right: 1rem;
}
}
section.map {
height: calc(100% - 8rem);
width: calc(100% - 20px);
}
section.map-footer {
p.address {
margin: 1rem auto;
}
div.buttons {
justify-content: center;
}
} }
} }
</style> </style>

125
js/src/components/Event/EventMinimalistCard.vue
View File

@ -1,19 +1,58 @@
<template> <template>
<router-link <router-link
class="event-minimalist-card-wrapper" class="event-minimalist-card-wrapper"
dir="auto"
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }" :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
> >
<date-calendar-icon <div class="event-preview mr-0 ml-0">
class="calendar-icon" <div>
:date="event.beginsOn" <div class="date-component">
:small="true" <date-calendar-icon :date="event.beginsOn" :small="true" />
/> </div>
<div class="title-info-wrapper"> <lazy-image-wrapper
<p class="event-minimalist-title">{{ event.title }}</p> :picture="event.picture"
<p v-if="event.physicalAddress" class="has-text-grey"> :rounded="true"
{{ event.physicalAddress.description }} style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
</p> />
<p v-else> </div>
</div>
<div class="title-info-wrapper has-text-grey-dark">
<h3 class="event-minimalist-title" :lang="event.language" dir="auto">
<b-tag
class="mr-2"
type="is-warning"
size="is-medium"
v-if="event.draft"
>{{ $t("Draft") }}</b-tag
>
{{ event.title }}
</h3>
<inline-address
v-if="event.physicalAddress"
class="event-subtitle"
:physical-address="event.physicalAddress"
/>
<div
class="event-subtitle"
v-else-if="event.options && event.options.isOnline"
>
<b-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
<div class="event-subtitle event-organizer" v-if="showOrganizer">
<figure
class="image is-24x24"
v-if="organizer(event) && organizer(event).avatar"
>
<img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
</div>
<p class="participant-metadata">
<b-icon icon="account-multiple" />
<span v-if="event.options.maximumAttendeeCapacity !== 0"> <span v-if="event.options.maximumAttendeeCapacity !== 0">
{{ {{
$tc( $tc(
@ -64,44 +103,88 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { IEvent } from "@/types/event.model"; import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { ParticipantRole } from "@/types/enums"; import { ParticipantRole } from "@/types/enums";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import InlineAddress from "@/components/Address/InlineAddress.vue";
@Component({ @Component({
components: { components: {
DateCalendarIcon, DateCalendarIcon,
LazyImageWrapper,
InlineAddress,
}, },
}) })
export default class EventMinimalistCard extends Vue { export default class EventMinimalistCard extends Vue {
@Prop({ required: true, type: Object }) event!: IEvent; @Prop({ required: true, type: Object }) event!: IEvent;
@Prop({ required: false, type: Boolean, default: false })
showOrganizer!: boolean;
RouteName = RouteName; RouteName = RouteName;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
organizerDisplayName = organizerDisplayName;
organizer = organizer;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass";
@import "@/variables.scss";
.event-minimalist-card-wrapper { .event-minimalist-card-wrapper {
display: flex; display: grid;
width: 100%; grid-gap: 5px 10px;
grid-template-areas: "preview" "body";
color: initial; color: initial;
align-items: flex-start;
@include desktop {
grid-template-columns: 200px 3fr;
grid-template-areas: "preview body";
}
.event-preview {
& > div {
position: relative;
height: 120px;
width: 100%;
div.date-component {
display: flex;
position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
}
}
}
.calendar-icon { .calendar-icon {
margin-right: 1rem; @include margin-right(1rem);
} }
.title-info-wrapper { .title-info-wrapper {
flex: 2; flex: 2;
.event-minimalist-title { .event-minimalist-title {
color: #3c376e; padding-bottom: 5px;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, font-size: 18px;
serif; line-height: 24px;
font-size: 1.25rem; display: -webkit-box;
font-weight: 700; -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: bold;
color: $title-color;
}
::v-deep .icon {
vertical-align: middle;
} }
} }
} }

328
js/src/components/Event/EventListCard.vue → js/src/components/Event/EventParticipationCard.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<article class="box"> <article class="box mb-5 mt-4">
<div class="identity-header"> <div class="identity-header" dir="auto">
<figure class="image is-24x24" v-if="participation.actor.avatar"> <figure class="image is-24x24" v-if="participation.actor.avatar">
<img <img
class="is-rounded" class="is-rounded"
@ -10,80 +10,107 @@
width="24" width="24"
/> />
</figure> </figure>
<b-icon v-else icon="account-circle" />
{{ displayNameAndUsername(participation.actor) }} {{ displayNameAndUsername(participation.actor) }}
</div> </div>
<div class="list-card"> <div class="list-card">
<div class="date-component">
<date-calendar-icon
:date="participation.event.beginsOn"
:small="true"
/>
</div>
<div class="content-and-actions"> <div class="content-and-actions">
<div class="list-card-content"> <div class="event-preview mr-0 ml-0">
<div class="title-wrapper"> <div>
<div class="date-component">
<date-calendar-icon
:date="participation.event.beginsOn"
:small="true"
/>
</div>
<router-link <router-link
:to="{ :to="{
name: RouteName.EVENT, name: RouteName.EVENT,
params: { uuid: participation.event.uuid }, params: { uuid: participation.event.uuid },
}" }"
> >
<h3 class="title">{{ participation.event.title }}</h3> <lazy-image-wrapper
:rounded="true"
:picture="participation.event.picture"
style="
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
"
/>
</router-link> </router-link>
</div> </div>
<div class="participation-actor"> </div>
<span> <div class="list-card-content">
<b-icon <div class="title-wrapper" dir="auto">
icon="earth" <router-link
v-if="participation.event.visibility === EventVisibility.PUBLIC" :to="{
/> name: RouteName.EVENT,
<b-icon params: { uuid: participation.event.uuid },
icon="link" }"
v-else-if="
participation.event.visibility === EventVisibility.UNLISTED
"
/>
<b-icon
icon="lock"
v-else-if="
participation.event.visibility === EventVisibility.PRIVATE
"
/>
</span>
<span
v-if="
participation.event.physicalAddress &&
participation.event.physicalAddress.locality
"
>{{ participation.event.physicalAddress.locality }} -</span
> >
<i18n <h3 class="title" :lang="participation.event.language">
tag="span" {{ participation.event.title }}
path="Organized by {name}" </h3>
v-if="organizerActor.id !== currentActor.id" </router-link>
>
<popover-actor-card
slot="name"
:actor="organizerActor"
:inline="true"
>
{{ organizerActor.displayName() }}
</popover-actor-card>
</i18n>
<span v-else>{{ $t("Organized by you") }}</span>
</div> </div>
<div> <inline-address
v-if="participation.event.physicalAddress"
class="event-subtitle"
:physical-address="participation.event.physicalAddress"
/>
<div
class="event-subtitle"
v-else-if="
participation.event.options &&
participation.event.options.isOnline
"
>
<b-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
<div class="event-subtitle event-organizer">
<figure
class="image is-24x24"
v-if="
organizer(participation.event) &&
organizer(participation.event).avatar
"
>
<img
class="is-rounded"
:src="organizer(participation.event).avatar.url"
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(participation.event) }}
</span>
</div>
<div class="event-subtitle event-participants">
<b-icon
:class="{ 'has-text-danger': lastSeatsLeft }"
icon="account-group"
/>
<span <span
class="participant-stats" class="participant-stats"
v-if=" v-if="participation.role !== ParticipantRole.NOT_APPROVED"
![
ParticipantRole.PARTICIPANT,
ParticipantRole.NOT_APPROVED,
].includes(participation.role)
"
> >
<!-- Less than 10 seats left -->
<span class="has-text-danger" v-if="lastSeatsLeft">
{{
$t("{number} seats left", {
number: seatsLeft,
})
}}
</span>
<span <span
v-if="participation.event.options.maximumAttendeeCapacity !== 0" v-else-if="
participation.event.options.maximumAttendeeCapacity !== 0
"
> >
{{ {{
$tc( $tc(
@ -111,28 +138,27 @@
) )
}} }}
</span> </span>
<span v-if="participation.event.participantStats.notApproved > 0"> <b-button
<b-button v-if="participation.event.participantStats.notApproved > 0"
type="is-text" type="is-text"
@click=" @click="
gotToWithCheck(participation, { gotToWithCheck(participation, {
name: RouteName.PARTICIPATIONS, name: RouteName.PARTICIPATIONS,
query: { role: ParticipantRole.NOT_APPROVED }, query: { role: ParticipantRole.NOT_APPROVED },
params: { eventId: participation.event.uuid }, params: { eventId: participation.event.uuid },
}) })
" "
> >
{{ {{
$tc( $tc(
"{count} requests waiting", "{count} requests waiting",
participation.event.participantStats.notApproved, participation.event.participantStats.notApproved,
{ {
count: participation.event.participantStats.notApproved, count: participation.event.participantStats.notApproved,
} }
) )
}} }}
</b-button> </b-button>
</span>
</span> </span>
</div> </div>
</div> </div>
@ -233,7 +259,11 @@ import { mixins } from "vue-class-component";
import { RawLocation, Route } from "vue-router"; import { RawLocation, Route } from "vue-router";
import { EventVisibility, ParticipantRole } from "@/types/enums"; import { EventVisibility, ParticipantRole } from "@/types/enums";
import { IParticipant } from "../../types/participant.model"; import { IParticipant } from "../../types/participant.model";
import { IEventCardOptions } from "../../types/event.model"; import {
IEventCardOptions,
organizer,
organizerDisplayName,
} from "../../types/event.model";
import { displayNameAndUsername, IActor, IPerson } from "../../types/actor"; import { displayNameAndUsername, IActor, IPerson } from "../../types/actor";
import ActorMixin from "../../mixins/actor"; import ActorMixin from "../../mixins/actor";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor"; import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
@ -241,6 +271,9 @@ import EventMixin from "../../mixins/event";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { changeIdentity } from "../../utils/auth"; import { changeIdentity } from "../../utils/auth";
import PopoverActorCard from "../Account/PopoverActorCard.vue"; import PopoverActorCard from "../Account/PopoverActorCard.vue";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import InlineAddress from "@/components/Address/InlineAddress.vue";
import { PropType } from "vue";
const defaultOptions: IEventCardOptions = { const defaultOptions: IEventCardOptions = {
hideDate: true, hideDate: true,
@ -254,6 +287,8 @@ const defaultOptions: IEventCardOptions = {
components: { components: {
DateCalendarIcon, DateCalendarIcon,
PopoverActorCard, PopoverActorCard,
LazyImageWrapper,
InlineAddress,
}, },
apollo: { apollo: {
currentActor: { currentActor: {
@ -261,11 +296,15 @@ const defaultOptions: IEventCardOptions = {
}, },
}, },
}) })
export default class EventListCard extends mixins(ActorMixin, EventMixin) { export default class EventParticipationCard extends mixins(
ActorMixin,
EventMixin
) {
/** /**
* The participation associated * The participation associated
*/ */
@Prop({ required: true }) participation!: IParticipant; @Prop({ required: true, type: Object as PropType<IParticipant> })
participation!: IParticipant;
/** /**
* Options are merged with default options * Options are merged with default options
@ -281,6 +320,10 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
displayNameAndUsername = displayNameAndUsername; displayNameAndUsername = displayNameAndUsername;
organizerDisplayName = organizerDisplayName;
organizer = organizer;
RouteName = RouteName; RouteName = RouteName;
get mergedOptions(): IEventCardOptions { get mergedOptions(): IEventCardOptions {
@ -304,13 +347,13 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
participation.actor.id !== this.currentActor.id && participation.actor.id !== this.currentActor.id &&
participation.event.organizerActor participation.event.organizerActor
) { ) {
const organizer = participation.event.organizerActor as IPerson; const organizerActor = participation.event.organizerActor as IPerson;
await changeIdentity(this.$apollo.provider.defaultClient, organizer); await changeIdentity(this.$apollo.provider.defaultClient, organizerActor);
this.$buefy.notification.open({ this.$buefy.notification.open({
message: this.$t( message: this.$t(
"Current identity has been changed to {identityName} in order to manage this event.", "Current identity has been changed to {identityName} in order to manage this event.",
{ {
identityName: organizer.preferredUsername, identityName: organizerActor.preferredUsername,
} }
) as string, ) as string,
type: "is-info", type: "is-info",
@ -330,16 +373,37 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
} }
return this.participation.event.organizerActor; return this.participation.event.organizerActor;
} }
get seatsLeft(): number | null {
if (this.participation.event.options.maximumAttendeeCapacity > 0) {
return (
this.participation.event.options.maximumAttendeeCapacity -
this.participation.event.participantStats.participant
);
}
return null;
}
get lastSeatsLeft(): boolean {
if (this.seatsLeft) {
return this.seatsLeft < 10;
}
return false;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass";
article.box { article.box {
div.tag-container { div.tag-container {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0; right: 0;
margin-right: -5px; @include margin-left(-5px);
z-index: 10; z-index: 10;
max-width: 40%; max-width: 40%;
@ -359,49 +423,67 @@ article.box {
.list-card { .list-card {
display: flex; display: flex;
padding: 0 6px; padding: 0 6px 0 0;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
div.date-component {
align-self: flex-start;
padding: 5px;
position: absolute;
top: 0;
left: 0;
margin-top: 1px;
height: 0;
display: flex;
align-items: flex-end;
margin-bottom: 15px;
margin-left: 0rem;
}
.content-and-actions { .content-and-actions {
display: flex; display: grid;
flex-wrap: wrap; grid-gap: 5px 10px;
align-items: center; grid-template-areas: "preview" "body" "actions";
justify-content: center;
padding-bottom: 1rem; @include tablet {
grid-template-columns: 1fr 3fr;
grid-template-areas: "preview body" "actions actions";
}
@include desktop {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas: "preview body actions";
}
.event-preview {
grid-area: preview;
& > div {
height: 128px;
width: 100%;
position: relative;
div.date-component {
display: flex;
position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
}
img {
width: 100%;
object-position: center;
object-fit: cover;
height: 100%;
}
}
}
.actions { .actions {
padding-right: 7.5px; padding: 7px;
cursor: pointer; cursor: pointer;
align-self: center;
justify-self: center;
grid-area: actions;
} }
div.list-card-content { div.list-card-content {
flex: 1; flex: 1;
padding: 5px; padding: 5px;
min-width: 350px; grid-area: body;
.participation-actor span, .participant-stats {
.participant-stats span { display: flex;
align-items: center;
padding: 0 5px; padding: 0 5px;
button {
height: auto;
padding-top: 0;
}
} }
div.title-wrapper { div.title-wrapper {
@ -419,11 +501,11 @@ article.box {
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
font-weight: 400; font-size: 18px;
line-height: 1em; line-height: 24px;
font-size: 1.4em;
padding-bottom: 5px;
margin: auto 0; margin: auto 0;
font-weight: bold;
color: $title-color;
} }
} }
} }
@ -434,10 +516,10 @@ article.box {
background: $yellow-2; background: $yellow-2;
display: flex; display: flex;
padding: 5px; padding: 5px;
padding-left: calc(48px + 15px);
figure { figure,
padding-right: 3px; span.icon {
@include padding-right(3px);
} }
} }

352
js/src/components/Event/FullAddressAutoComplete.vue
View File

@ -1,59 +1,94 @@
<template> <template>
<div class="address-autocomplete"> <div class="address-autocomplete columns is-desktop">
<b-field expanded> <div class="column">
<template slot="label"> <b-field
{{ actualLabel }} :label-for="id"
<b-button
v-if="canShowLocateMeButton && !gettingLocation"
size="is-small"
icon-right="map-marker"
@click="locateMe"
/>
<span v-else-if="gettingLocation">{{ $t("Getting location") }}</span>
</template>
<b-autocomplete
:data="addressData"
v-model="queryText"
:placeholder="$t('e.g. 10 Rue Jangot')"
field="fullName"
:loading="isFetching"
@typing="fetchAsyncData"
icon="map-marker"
expanded expanded
@select="updateSelected" :message="fieldErrors"
:type="{ 'is-danger': fieldErrors.length }"
> >
<template #default="{ option }"> <template slot="label">
<b-icon :icon="option.poiInfos.poiIcon.icon" /> {{ actualLabel }}
<b>{{ option.poiInfos.name }}</b <span
><br /> class="is-size-6 has-text-weight-normal"
<small>{{ option.poiInfos.alternativeName }}</small> v-if="gettingLocation"
>{{ $t("Getting location") }}</span
>
</template> </template>
<template slot="empty"> <p class="control" v-if="canShowLocateMeButton && !gettingLocation">
<span v-if="isFetching">{{ $t("Searching…") }}</span> <b-button
<div v-else-if="queryText.length >= 3" class="is-enabled"> icon-right="map-marker"
<span>{{ $t('No results for "{queryText}"', { queryText }) }}</span> @click="locateMe"
<span>{{ :title="$t('Use my location')"
$t( />
"You can try another search term or drag and drop the marker on the map", </p>
{ <b-autocomplete
queryText, :data="addressData"
} v-model="queryText"
) :placeholder="$t('e.g. 10 Rue Jangot')"
}}</span> field="fullName"
<!-- <p class="control" @click="openNewAddressModal">--> :loading="isFetching"
<!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>--> @typing="fetchAsyncData"
<!-- </p>--> :icon="canShowLocateMeButton ? null : 'map-marker'"
</div> expanded
</template> @select="updateSelected"
</b-autocomplete> v-bind="$attrs"
<b-button :id="id"
:disabled="!queryText" :disabled="disabled"
@click="resetAddress" dir="auto"
class="reset-area" >
icon-left="close" <template #default="{ option }">
/> <b-icon :icon="option.poiInfos.poiIcon.icon" />
</b-field> <b>{{ option.poiInfos.name }}</b
<div class="map" v-if="selected && selected.geom && selected.poiInfos"> ><br />
<small>{{ option.poiInfos.alternativeName }}</small>
</template>
<template #empty>
<span v-if="isFetching">{{ $t("Searching…") }}</span>
<div v-else-if="queryText.length >= 3" class="is-enabled">
<span>{{
$t('No results for "{queryText}"', { queryText })
}}</span>
<span>{{
$t(
"You can try another search term or drag and drop the marker on the map",
{
queryText,
}
)
}}</span>
<!-- <p class="control" @click="openNewAddressModal">-->
<!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
<!-- </p>-->
</div>
</template>
</b-autocomplete>
<b-button
:disabled="!queryText"
@click="resetAddress"
class="reset-area"
icon-left="close"
:title="$t('Clear address field')"
/>
</b-field>
<div
class="card"
v-if="!hideSelected && (selected.originId || selected.url)"
>
<div class="card-content">
<address-info
:address="selected"
:show-icon="true"
:show-timezone="true"
:user-timezone="userTimezone"
/>
</div>
</div>
</div>
<div
class="map column"
v-if="!hideMap && selected && selected.geom && selected.poiInfos"
>
<map-leaflet <map-leaflet
:coords="selected.geom" :coords="selected.geom"
:marker="{ :marker="{
@ -65,149 +100,47 @@
:readOnly="false" :readOnly="false"
/> />
</div> </div>
<!-- <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
<!-- <div class="modal-card" style="width: auto">-->
<!-- <header class="modal-card-head">-->
<!-- <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
<!-- </header>-->
<!-- <section class="modal-card-body">-->
<!-- <form>-->
<!-- <b-field :label="$t('Name')">-->
<!-- <b-input aria-required="true" required v-model="selected.description" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Street')">-->
<!-- <b-input v-model="selected.street" />-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Postal Code')">-->
<!-- <b-input v-model="selected.postalCode" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Locality')">-->
<!-- <b-input v-model="selected.locality" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Region')">-->
<!-- <b-input v-model="selected.region" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Country')">-->
<!-- <b-input v-model="selected.country" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- </form>-->
<!-- </section>-->
<!-- <footer class="modal-card-foot">-->
<!-- <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
<!-- </footer>-->
<!-- </div>-->
<!-- </b-modal>-->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { Component, Prop, Watch, Mixins } from "vue-property-decorator";
import { LatLng } from "leaflet"; import { LatLng } from "leaflet";
import debounce from "lodash/debounce";
import { DebouncedFunc } from "lodash";
import { Address, IAddress } from "../../types/address.model"; import { Address, IAddress } from "../../types/address.model";
import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address"; import AddressAutoCompleteMixin from "../../mixins/AddressAutoCompleteMixin";
import { CONFIG } from "../../graphql/config"; import AddressInfo from "../../components/Address/AddressInfo.vue";
import { IConfig } from "../../types/config.model";
@Component({ @Component({
inheritAttrs: false,
components: { components: {
"map-leaflet": () => AddressInfo,
import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
},
apollo: {
config: CONFIG,
}, },
}) })
export default class FullAddressAutoComplete extends Vue { export default class FullAddressAutoComplete extends Mixins(
@Prop({ required: true }) value!: IAddress; AddressAutoCompleteMixin
) {
@Prop({ required: false, default: "" }) label!: string; @Prop({ required: false, default: "" }) label!: string;
@Prop({ required: false }) userTimezone!: string;
addressData: IAddress[] = []; @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
@Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
selected: IAddress = new Address(); @Prop({ required: false, default: false, type: Boolean })
hideSelected!: boolean;
isFetching = false;
queryText: string = (this.value && new Address(this.value).fullName) || "";
addressModalActive = false; addressModalActive = false;
private gettingLocation = false; private static componentId = 0;
// eslint-disable-next-line no-undef created(): void {
private location!: GeolocationPosition; FullAddressAutoComplete.componentId += 1;
private gettingLocationError: any;
private mapDefaultZoom = 15;
config!: IConfig;
fetchAsyncData!: DebouncedFunc<(query: string) => Promise<void>>;
// We put this in data because of issues like
// https://github.com/vuejs/vue-class-component/issues/263
data(): Record<string, unknown> {
return {
fetchAsyncData: debounce(this.asyncData, 200),
};
} }
async asyncData(query: string): Promise<void> { get id(): string {
if (!query.length) { return `full-address-autocomplete-${FullAddressAutoComplete.componentId}`;
this.addressData = [];
this.selected = new Address();
return;
}
if (query.length < 3) {
this.addressData = [];
return;
}
this.isFetching = true;
const result = await this.$apollo.query({
query: ADDRESS,
fetchPolicy: "network-only",
variables: {
query,
locale: this.$i18n.locale,
},
});
this.addressData = result.data.searchAddress.map(
(address: IAddress) => new Address(address)
);
this.isFetching = false;
}
@Watch("config")
watchConfig(config: IConfig): void {
if (!config.geocoding.autocomplete) {
// If autocomplete is disabled, we put a larger debounce value
// so that we don't request with incomplete address
this.fetchAsyncData = debounce(this.asyncData, 2000);
}
} }
@Watch("value") @Watch("value")
updateEditing(): void { updateEditing(): void {
if (!(this.value && this.value.id)) return; if (!(this.value && this.value.id)) return;
this.selected = this.value; this.selected = this.value;
const address = new Address(this.selected);
if (address.poiInfos) {
this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
}
} }
updateSelected(option: IAddress): void { updateSelected(option: IAddress): void {
@ -225,30 +158,6 @@ export default class FullAddressAutoComplete extends Vue {
this.addressModalActive = true; this.addressModalActive = true;
} }
async reverseGeoCode(e: LatLng, zoom: number): Promise<void> {
// If the position has been updated through autocomplete selection, no need to geocode it!
if (this.checkCurrentPosition(e)) return;
const result = await this.$apollo.query({
query: REVERSE_GEOCODE,
variables: {
latitude: e.lat,
longitude: e.lng,
zoom,
locale: this.$i18n.locale,
},
});
this.addressData = result.data.reverseGeocode.map(
(address: IAddress) => new Address(address)
);
if (this.addressData.length > 0) {
const defaultAddress = new Address(this.addressData[0]);
this.selected = defaultAddress;
this.$emit("input", this.selected);
this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
}
}
checkCurrentPosition(e: LatLng): boolean { checkCurrentPosition(e: LatLng): boolean {
if (!this.selected || !this.selected.geom) return false; if (!this.selected || !this.selected.geom) return false;
const lat = parseFloat(this.selected.geom.split(";")[1]); const lat = parseFloat(this.selected.geom.split(";")[1]);
@ -257,25 +166,6 @@ export default class FullAddressAutoComplete extends Vue {
return e.lat === lat && e.lng === lon; return e.lat === lat && e.lng === lon;
} }
async locateMe(): Promise<void> {
this.gettingLocation = true;
try {
this.gettingLocation = false;
this.location = await FullAddressAutoComplete.getLocation();
this.mapDefaultZoom = 12;
this.reverseGeoCode(
new LatLng(
this.location.coords.latitude,
this.location.coords.longitude
),
12
);
} catch (e) {
this.gettingLocation = false;
this.gettingLocationError = e.message;
}
}
get actualLabel(): string { get actualLabel(): string {
return this.label || (this.$t("Find an address") as string); return this.label || (this.$t("Find an address") as string);
} }
@ -284,38 +174,6 @@ export default class FullAddressAutoComplete extends Vue {
get canShowLocateMeButton(): boolean { get canShowLocateMeButton(): boolean {
return window.isSecureContext; return window.isSecureContext;
} }
// eslint-disable-next-line no-undef
static async getLocation(): Promise<GeolocationPosition> {
return new Promise((resolve, reject) => {
if (!("geolocation" in navigator)) {
reject(new Error("Geolocation is not available."));
}
navigator.geolocation.getCurrentPosition(
(pos) => {
resolve(pos);
},
(err) => {
reject(err);
}
);
});
}
@Watch("queryText")
resetAddressOnEmptyField(queryText: string): void {
if (queryText === "" && this.selected?.id) {
console.log("doing reset");
this.resetAddress();
}
}
resetAddress(): void {
this.$emit("input", null);
this.queryText = "";
this.selected = new Address();
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">

90
js/src/components/Event/GroupedMultiEventMinimalistCard.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<div class="events-wrapper">
<div class="month-group" v-for="key of keys" :key="key">
<h2 class="is-size-5 month-name">
{{ monthName(groupEvents(key)[0]) }}
</h2>
<event-minimalist-card
class="py-4"
v-for="event in groupEvents(key)"
:key="event.id"
:event="event"
:isCurrentActorMember="isCurrentActorMember"
/>
</div>
</div>
</template>
<script lang="ts">
import { IEvent } from "@/types/event.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import EventMinimalistCard from "./EventMinimalistCard.vue";
@Component({
components: {
EventMinimalistCard,
},
})
export default class GroupedMultiEventMinimalistCard extends Vue {
@Prop({ type: Array as PropType<IEvent[]>, required: true })
events!: IEvent[];
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
get monthlyGroupedEvents(): Map<string, IEvent[]> {
return this.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
const beginsOn = new Date(event.beginsOn);
const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
const monthEvents = acc.get(month) || [];
acc.set(month, [...monthEvents, event]);
return acc;
}, new Map());
}
get keys(): string[] {
return Array.from(this.monthlyGroupedEvents.keys()).sort((a, b) =>
b.localeCompare(a)
);
}
groupEvents(key: string): IEvent[] {
return this.monthlyGroupedEvents.get(key) || [];
}
monthName(event: IEvent): string {
const beginsOn = new Date(event.beginsOn);
return new Intl.DateTimeFormat(undefined, {
month: "long",
year: "numeric",
}).format(beginsOn);
}
}
</script>
<style lang="scss" scoped>
.events-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr;
}
.month-group {
.month-name {
text-transform: capitalize;
text-transform: capitalize;
display: inline-block;
position: relative;
font-size: 1.3rem;
&::after {
background: $orange-3;
position: absolute;
left: 0;
right: 0;
top: 100%;
content: "";
width: calc(100% + 30px);
height: 3px;
max-width: 150px;
}
}
}
</style>

39
js/src/components/Event/MultiCard.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div class="multi-card-event">
<event-card
class="event-card"
v-for="event in events"
:event="event"
:key="event.uuid"
/>
</div>
</template>
<script lang="ts">
import { IEvent } from "@/types/event.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import EventCard from "./EventCard.vue";
@Component({
components: {
EventCard,
},
})
export default class MultiCard extends Vue {
@Prop({ type: Array as PropType<IEvent[]>, required: true })
events!: IEvent[];
}
</script>
<style lang="scss" scoped>
.multi-card-event {
display: grid;
grid-auto-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.event-card {
height: 100%;
display: flex;
flex-direction: column;
}
}
</style>

38
js/src/components/Event/MultiEventMinimalistCard.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="events-wrapper">
<event-minimalist-card
v-for="event in events"
:key="event.id"
:event="event"
:isCurrentActorMember="isCurrentActorMember"
:showOrganizer="showOrganizer"
/>
</div>
</template>
<script lang="ts">
import { IEvent } from "@/types/event.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import EventMinimalistCard from "./EventMinimalistCard.vue";
@Component({
components: {
EventMinimalistCard,
},
})
export default class MultiEventMinimalistCard extends Vue {
@Prop({ type: Array as PropType<IEvent[]>, required: true })
events!: IEvent[];
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
@Prop({ required: false, type: Boolean, default: false })
showOrganizer!: boolean;
}
</script>
<style lang="scss" scoped>
.events-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr;
}
</style>

10
js/src/components/Event/OrganizerPicker.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="list is-hoverable"> <div class="list is-hoverable">
<b-input <b-input
dir="auto"
:placeholder="$t('Filter by profile or group name')" :placeholder="$t('Filter by profile or group name')"
v-model="actorFilter" v-model="actorFilter"
/> />
@ -11,10 +12,10 @@
v-for="availableActor in actualFilteredAvailableActors" v-for="availableActor in actualFilteredAvailableActors"
:key="availableActor.id" :key="availableActor.id"
> >
<div class="media"> <div class="media" dir="auto">
<figure class="image is-48x48" v-if="availableActor.avatar"> <figure class="image is-48x48" v-if="availableActor.avatar">
<img <img
class="media-left is-rounded" class="image is-rounded"
:src="availableActor.avatar.url" :src="availableActor.avatar.url"
alt="" alt=""
/> />
@ -121,6 +122,7 @@ export default class OrganizerPicker extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
::v-deep .list-item { ::v-deep .list-item {
box-sizing: content-box; box-sizing: content-box;
@ -133,11 +135,11 @@ export default class OrganizerPicker extends Vue {
figure.image, figure.image,
span.icon.media-left { span.icon.media-left {
margin-right: 0.5rem; @include margin-right(0.5rem);
} }
span.icon.media-left { span.icon.media-left {
margin-left: -0.25rem; @include margin-left(-0.25rem);
} }
} }
} }

12
js/src/components/Event/OrganizerPickerWrapper.vue
View File

@ -4,6 +4,7 @@
<div <div
v-if="inline && selectedActor.id" v-if="inline && selectedActor.id"
class="inline box" class="inline box"
dir="auto"
@click="isComponentModalActive = true" @click="isComponentModalActive = true"
> >
<div class="media"> <div class="media">
@ -12,14 +13,14 @@
<img <img
class="image is-rounded" class="image is-rounded"
:src="selectedActor.avatar.url" :src="selectedActor.avatar.url"
:alt="selectedActor.avatar.alt" :alt="selectedActor.avatar.alt || ''"
/> />
</figure> </figure>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
<div class="media-content" v-if="selectedActor.name"> <div class="media-content" v-if="selectedActor.name">
<p class="is-4">{{ selectedActor.name }}</p> <p class="is-4">{{ selectedActor.name }}</p>
<p class="is-6 has-text-grey"> <p class="is-6 has-text-grey-dark">
{{ `@${selectedActor.preferredUsername}` }} {{ `@${selectedActor.preferredUsername}` }}
</p> </p>
</div> </div>
@ -45,7 +46,11 @@
/> />
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</span> </span>
<b-modal :active.sync="isComponentModalActive" has-modal-card> <b-modal
:active.sync="isComponentModalActive"
has-modal-card
:close-button-aria-label="$t('Close')"
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title">{{ $t("Pick a profile or a group") }}</p> <p class="modal-card-title">{{ $t("Pick a profile or a group") }}</p>
@ -65,6 +70,7 @@
<b-input <b-input
:placeholder="$t('Filter by name')" :placeholder="$t('Filter by name')"
v-model="contactFilter" v-model="contactFilter"
dir="auto"
/> />
<p <p
class="field" class="field"

42
js/src/components/Event/ParticipationButton.vue
View File

@ -30,18 +30,22 @@ A button to set your participation
position="is-bottom-left" position="is-bottom-left"
v-if="participation && participation.role === ParticipantRole.PARTICIPANT" v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
> >
<button class="button is-success is-large" type="button" slot="trigger"> <template #trigger="{ active }">
<b-icon icon="check" /> <b-button
<template> type="is-success"
<span>{{ $t("I participate") }}</span> size="is-large"
</template> icon-left="check"
<b-icon icon="menu-down" /> :icon-right="active ? 'menu-up' : 'menu-down'"
</button> >
{{ $t("I participate") }}
</b-button>
</template>
<b-dropdown-item <b-dropdown-item
:value="false" :value="false"
aria-role="listitem" aria-role="listitem"
@click="confirmLeave" @click="confirmLeave"
@keyup.enter="confirmLeave"
class="has-text-danger" class="has-text-danger"
>{{ $t("Cancel my participation…") }}</b-dropdown-item >{{ $t("Cancel my participation…") }}</b-dropdown-item
> >
@ -73,6 +77,7 @@ A button to set your participation
:value="false" :value="false"
aria-role="listitem" aria-role="listitem"
@click="confirmLeave" @click="confirmLeave"
@keyup.enter="confirmLeave"
class="has-text-danger" class="has-text-danger"
>{{ $t("Cancel my participation request…") }}</b-dropdown-item >{{ $t("Cancel my participation request…") }}</b-dropdown-item
> >
@ -101,21 +106,25 @@ A button to set your participation
position="is-bottom-left" position="is-bottom-left"
v-else-if="!participation && currentActor.id" v-else-if="!participation && currentActor.id"
> >
<button class="button is-primary is-large" type="button" slot="trigger"> <template #trigger="{ active }">
<template> <b-button
<span>{{ $t("Participate") }}</span> type="is-primary"
</template> size="is-large"
<b-icon icon="menu-down" /> :icon-right="active ? 'menu-up' : 'menu-down'"
</button> >
{{ $t("Participate") }}
</b-button>
</template>
<b-dropdown-item <b-dropdown-item
:value="true" :value="true"
aria-role="listitem" aria-role="listitem"
@click="joinEvent(currentActor)" @click="joinEvent(currentActor)"
@keyup.enter="joinEvent(currentActor)"
> >
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left" v-if="currentActor.avatar">
<figure class="image is-32x32" v-if="currentActor.avatar"> <figure class="image is-32x32">
<img class="is-rounded" :src="currentActor.avatar.url" alt /> <img class="is-rounded" :src="currentActor.avatar.url" alt />
</figure> </figure>
</div> </div>
@ -136,11 +145,13 @@ A button to set your participation
:value="false" :value="false"
aria-role="listitem" aria-role="listitem"
@click="joinModal" @click="joinModal"
@keyup.enter="joinModal"
v-if="identities.length > 1" v-if="identities.length > 1"
>{{ $t("with another identity…") }}</b-dropdown-item >{{ $t("with another identity…") }}</b-dropdown-item
> >
</b-dropdown> </b-dropdown>
<b-button <b-button
rel="nofollow"
tag="router-link" tag="router-link"
:to="{ :to="{
name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT, name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT,
@ -154,6 +165,7 @@ A button to set your participation
> >
<b-button <b-button
tag="router-link" tag="router-link"
rel="nofollow"
:to="{ :to="{
name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
params: { uuid: event.uuid }, params: { uuid: event.uuid },

11
js/src/components/Event/ShareEventModal.vue
View File

@ -86,11 +86,13 @@
/></a> /></a>
<a <a
:href="telegramShareUrl" :href="telegramShareUrl"
class="telegram"
target="_blank" target="_blank"
rel="nofollow noopener" rel="nofollow noopener"
title="Telegram" title="Telegram"
><b-icon icon="telegram" size="is-large" type="is-primary" >
/></a> <telegram-logo />
</a>
<a <a
:href="linkedInShareUrl" :href="linkedInShareUrl"
target="_blank" target="_blank"
@ -126,11 +128,13 @@ import { EventStatus, EventVisibility } from "@/types/enums";
import { IEvent } from "../../types/event.model"; import { IEvent } from "../../types/event.model";
import DiasporaLogo from "../Share/DiasporaLogo.vue"; import DiasporaLogo from "../Share/DiasporaLogo.vue";
import MastodonLogo from "../Share/MastodonLogo.vue"; import MastodonLogo from "../Share/MastodonLogo.vue";
import TelegramLogo from "../Share/TelegramLogo.vue";
@Component({ @Component({
components: { components: {
DiasporaLogo, DiasporaLogo,
MastodonLogo, MastodonLogo,
TelegramLogo,
}, },
}) })
export default class ShareEventModal extends Vue { export default class ShareEventModal extends Vue {
@ -207,7 +211,8 @@ export default class ShareEventModal extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.diaspora, .diaspora,
.mastodon { .mastodon,
.telegram {
::v-deep span svg { ::v-deep span svg {
width: 2.25rem; width: 2.25rem;
} }

75
js/src/components/Event/TagInput.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<b-field> <b-field :label-for="id">
<template slot="label"> <template slot="label">
{{ $t("Add some tags") }} {{ $t("Add some tags") }}
<b-tooltip <b-tooltip
@ -16,57 +16,82 @@
:data="filteredTags" :data="filteredTags"
autocomplete autocomplete
:allow-new="true" :allow-new="true"
:field="path" :field="'title'"
icon="label" icon="label"
maxlength="20" maxlength="20"
maxtags="10" maxtags="10"
:placeholder="$t('Eg: Stockholm, Dance, Chess…')" :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
@typing="getFilteredTags" @typing="getFilteredTags"
:id="id"
dir="auto"
> >
</b-taginput> </b-taginput>
</b-field> </b-field>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import get from "lodash/get";
import differenceBy from "lodash/differenceBy"; import differenceBy from "lodash/differenceBy";
import { ITag } from "../../types/tag.model"; import { ITag } from "../../types/tag.model";
import { FILTER_TAGS } from "@/graphql/tags";
@Component({ @Component({
computed: { apollo: {
tagsStrings: { tags: {
get() { query: FILTER_TAGS,
return this.$props.value.map((tag: ITag) => tag.title); variables() {
}, return {
set(tagStrings) { filter: this.text,
const tagEntities = tagStrings.map((tag: string | ITag) => { };
if (typeof tag !== "string") {
return tag;
}
return { title: tag, slug: tag } as ITag;
});
this.$emit("input", tagEntities);
}, },
}, },
}, },
}) })
export default class TagInput extends Vue { export default class TagInput extends Vue {
@Prop({ required: false, default: () => [] }) data!: ITag[];
@Prop({ required: true, default: "value" }) path!: string;
@Prop({ required: true }) value!: ITag[]; @Prop({ required: true }) value!: ITag[];
filteredTags: ITag[] = []; tags!: ITag[];
getFilteredTags(text: string): void { text = "";
this.filteredTags = differenceBy(this.data, this.value, "id").filter(
private static componentId = 0;
created(): void {
TagInput.componentId += 1;
}
get id(): string {
return `tag-input-${TagInput.componentId}`;
}
async getFilteredTags(text: string): Promise<void> {
this.text = text;
await this.$apollo.queries.tags.refetch();
}
get filteredTags(): ITag[] {
return differenceBy(this.tags, this.value, "id").filter(
(option) => (option) =>
get(option, this.path) option.title
.toString() .toString()
.toLowerCase() .toLowerCase()
.indexOf(text.toLowerCase()) >= 0 .indexOf(this.text.toLowerCase()) >= 0 ||
option.slug.toString().toLowerCase().indexOf(this.text.toLowerCase()) >=
0
); );
} }
get tagsStrings(): string[] {
return (this.value || []).map((tag: ITag) => tag.title);
}
set tagsStrings(tagsStrings: string[]) {
const tagEntities = tagsStrings.map((tag: string | ITag) => {
if (typeof tag !== "string") {
return tag;
}
return { title: tag, slug: tag } as ITag;
});
this.$emit("input", tagEntities);
}
} }
</script> </script>

34
js/src/components/Footer.vue
View File

@ -20,11 +20,17 @@
<ul> <ul>
<li> <li>
<b-select <b-select
:aria-label="$t('Language')"
v-if="$i18n" v-if="$i18n"
v-model="locale" v-model="locale"
:placeholder="$t('Select a language')" :placeholder="$t('Select a language')"
> >
<option v-for="(language, lang) in langs" :value="lang" :key="lang"> <option
v-for="(language, lang) in langs"
:value="lang"
:key="lang"
:selected="isLangSelected(lang)"
>
{{ language }} {{ language }}
</option> </option>
</b-select> </b-select>
@ -46,6 +52,7 @@
</li> </li>
<li> <li>
<a <a
rel="external"
hreflang="en" hreflang="en"
href="https://forge.april.org/Chapril/mobilizon.chapril.org-mobilizon/src/branch/chapril/LICENSE" href="https://forge.april.org/Chapril/mobilizon.chapril.org-mobilizon/src/branch/chapril/LICENSE"
> >
@ -55,19 +62,25 @@
<li> <li>
<a href="mailto:mobilizon-support@chapril.org">{{ $t("Contact") }}</a> <a href="mailto:mobilizon-support@chapril.org">{{ $t("Contact") }}</a>
</li> </li>
<li>
<a href="#navbar">{{ $t("Back to top") }}</a>
</li>
</ul> </ul>
<div class="content has-text-centered"> <div class="content has-text-centered">
<i18n <i18n
tag="span" tag="span"
path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}." path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
> >
<a slot="mobilizon" href="https://joinmobilizon.org">{{ <a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
$t("Mobilizon") $t("Mobilizon")
}}</a> }}</a>
<span slot="date">{{ new Date().getFullYear() }}</span> <span slot="date">{{ new Date().getFullYear() }}</span>
<a href="https://joinmobilizon.org/hall-of-fame" slot="contributors">{{ <a
$t("more than 1360 contributors") rel="external"
}}</a> href="https://joinmobilizon.org/hall-of-fame"
slot="contributors"
>{{ $t("more than 1360 contributors") }}</a
>
</i18n> </i18n>
</div> </div>
</footer> </footer>
@ -108,6 +121,10 @@ export default class Footer extends Vue {
this.locale = locale; this.locale = locale;
} }
} }
isLangSelected(lang: string): boolean {
return lang === this.locale;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -152,6 +169,13 @@ footer.footer {
color: $white; color: $white;
text-decoration: underline; text-decoration: underline;
text-decoration-color: $secondary; text-decoration-color: $secondary;
&:focus {
background-color: #000;
color: #fff;
outline: 3px solid #000;
text-decoration: none;
}
} }
::v-deep span.select { ::v-deep span.select {

130
js/src/components/Group/GroupCard.vue
View File

@ -1,7 +1,21 @@
<template> <template>
<div class="card"> <router-link
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group) },
}"
class="card"
>
<div class="card-image">
<figure class="image is-16by9">
<lazy-image-wrapper
:picture="group.banner"
style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
/>
</figure>
</div>
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media mb-2">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="group.avatar"> <figure class="image is-48x48" v-if="group.avatar">
<img class="is-rounded" :src="group.avatar.url" alt="" /> <img class="is-rounded" :src="group.avatar.url" alt="" />
@ -9,40 +23,114 @@
<b-icon v-else size="is-large" icon="account-group" /> <b-icon v-else size="is-large" icon="account-group" />
</div> </div>
<div class="media-content"> <div class="media-content">
<router-link <h3 class="is-size-5 group-title" dir="auto">
:to="{ {{ displayName(group) }}
name: RouteName.GROUP, </h3>
params: { preferredUsername: usernameWithDomain(group) }, <span class="is-6 has-text-grey-dark group-federated-username">
}" {{ `@${usernameWithDomain(group)}` }}
> </span>
<h3>{{ group.name }}</h3>
<p class="is-6 has-text-grey">
<span v-if="group.domain">{{
`@${group.preferredUsername}@${group.domain}`
}}</span>
<span v-else>{{ `@${group.preferredUsername}` }}</span>
</p>
</router-link>
</div> </div>
</div> </div>
<div class="content"> <div class="content mb-2" dir="auto" v-html="group.summary" />
<p>{{ group.summary }}</p> <div class="card-custom-footer">
<inline-address
class="has-text-grey-dark"
v-if="group.physicalAddress"
:physicalAddress="group.physicalAddress"
/>
<p class="has-text-grey-dark">
<b-icon icon="account" />
{{
$tc(
"{count} members or followers",
group.members.total + group.followers.total,
{
count: group.members.total + group.followers.total,
}
)
}}
</p>
</div> </div>
</div> </div>
</div> </router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { IGroup, usernameWithDomain } from "@/types/actor"; import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import InlineAddress from "@/components/Address/InlineAddress.vue";
@Component @Component({
components: {
LazyImageWrapper,
InlineAddress,
},
})
export default class GroupCard extends Vue { export default class GroupCard extends Vue {
@Prop({ required: true }) group!: IGroup; @Prop({ required: true }) group!: IGroup;
RouteName = RouteName; RouteName = RouteName;
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
} }
</script> </script>
<style lang="scss" scoped>
.card {
.card-content {
padding: 0.75rem;
display: flex;
flex-direction: column;
height: 100%;
.content {
flex: 1;
}
::v-deep .content {
& > *:first-child {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0;
* {
font-weight: normal;
text-transform: none;
font-style: normal;
text-decoration: none;
}
}
& > *:not(:first-child) {
display: none;
}
}
.media-left {
margin-right: inherit;
margin-inline-end: 0.5rem;
}
.media-content {
overflow: hidden;
text-overflow: ellipsis;
.group-title {
line-height: 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: bold;
}
.group-federated-username {
font-size: 14px;
}
}
}
}
</style>

24
js/src/components/Group/GroupMemberCard.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<div class="card"> <div class="card">
<div class="identity-header"> <div class="identity-header" dir="auto">
<figure class="image is-24x24" v-if="member.actor.avatar"> <figure class="image is-24x24" v-if="member.actor.avatar">
<img class="is-rounded" :src="member.actor.avatar.url" alt="" /> <img class="is-rounded" :src="member.actor.avatar.url" alt="" />
</figure> </figure>
<b-icon v-else icon="account-circle" />
{{ displayNameAndUsername(member.actor) }} {{ displayNameAndUsername(member.actor) }}
</div> </div>
<div class="card-content"> <div class="card-content" dir="auto">
<div> <div>
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -15,7 +16,7 @@
</figure> </figure>
<b-icon v-else size="is-large" icon="account-group" /> <b-icon v-else size="is-large" icon="account-group" />
</div> </div>
<div class="media-content"> <div class="media-content" dir="auto">
<router-link <router-link
:to="{ :to="{
name: RouteName.GROUP, name: RouteName.GROUP,
@ -24,12 +25,9 @@
}, },
}" }"
> >
<h3>{{ member.parent.name }}</h3> <h2>{{ member.parent.name }}</h2>
<p class="is-6 has-text-grey"> <p class="is-6 has-text-grey-dark">
<span v-if="member.parent.domain">{{ <span>{{ `@${usernameWithDomain(member.parent)}` }}</span>
`@${member.parent.preferredUsername}@${member.parent.domain}`
}}</span>
<span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
<b-taglist> <b-taglist>
<b-tag <b-tag
type="is-info" type="is-info"
@ -47,7 +45,7 @@
</div> </div>
</div> </div>
<div class="content" v-if="member.parent.summary"> <div class="content" v-if="member.parent.summary">
<p>{{ member.parent.summary }}</p> <p v-html="member.parent.summary" />
</div> </div>
</div> </div>
<div> <div>
@ -85,6 +83,7 @@ export default class GroupMemberCard extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.card { .card {
.card-content { .card-content {
display: flex; display: flex;
@ -110,8 +109,9 @@ export default class GroupMemberCard extends Vue {
display: flex; display: flex;
padding: 5px; padding: 5px;
figure { figure,
padding-right: 3px; span.icon {
@include padding-right(3px);
} }
} }
} }

5
js/src/components/Group/GroupSection.vue
View File

@ -33,6 +33,7 @@ export default class GroupSection extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
section { section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -44,7 +45,7 @@ section {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-right: 0.5rem; @include padding-right(0.5rem);
} }
.main-slot { .main-slot {
@ -68,7 +69,7 @@ div.group-section-title {
::v-deep & > a { ::v-deep & > a {
align-self: center; align-self: center;
margin-right: 5px; @include margin-right(5px);
color: var(--title-color); color: var(--title-color);
} }

113
js/src/components/Group/InvitationCard.vue
View File

@ -1,57 +1,65 @@
<template> <template>
<div class="media"> <div class="card">
<div class="media-content"> <div class="card-content media">
<div class="content"> <div class="media-content">
<i18n <div class="content">
tag="p" <i18n
path="You have been invited by {invitedBy} to the following group:" tag="p"
> path="You have been invited by {invitedBy} to the following group:"
<b slot="invitedBy">{{ member.invitedBy.name }}</b> >
</i18n> <b slot="invitedBy">{{ member.invitedBy.name }}</b>
</div> </i18n>
<div class="media subfield">
<div class="media-left">
<figure class="image is-48x48" v-if="member.parent.avatar">
<img class="is-rounded" :src="member.parent.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-group" />
</div> </div>
<div class="media-content"> <div class="media subfield">
<div class="level"> <div class="media-left">
<div class="level-left"> <figure class="image is-48x48" v-if="member.parent.avatar">
<div class="level-item"> <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
<router-link </figure>
:to="{ <b-icon v-else size="is-large" icon="account-group" />
name: RouteName.GROUP, </div>
params: { <div class="media-content">
preferredUsername: usernameWithDomain(member.parent), <div class="level">
}, <div class="level-left">
}" <div class="level-item mr-3">
> <router-link
<h3>{{ member.parent.name }}</h3> :to="{
<p class="is-6 has-text-grey"> name: RouteName.GROUP,
<span v-if="member.parent.domain"> params: {
{{ preferredUsername: usernameWithDomain(member.parent),
`@${member.parent.preferredUsername}@${member.parent.domain}` },
}} }"
</span> >
<span v-else>{{ <h3 class="is-size-5">{{ member.parent.name }}</h3>
`@${member.parent.preferredUsername}` <p class="is-size-7 has-text-grey-dark">
}}</span> <span v-if="member.parent.domain">
</p> {{
</router-link> `@${member.parent.preferredUsername}@${member.parent.domain}`
}}
</span>
<span v-else>{{
`@${member.parent.preferredUsername}`
}}</span>
</p>
</router-link>
</div>
</div> </div>
</div> <div class="level-right">
<div class="level-right"> <div class="level-item">
<div class="level-item"> <b-button
<b-button type="is-success" @click="$emit('accept', member.id)"> type="is-success"
{{ $t("Accept") }} @click="$emit('accept', member.id)"
</b-button> >
</div> {{ $t("Accept") }}
<div class="level-item"> </b-button>
<b-button type="is-danger" @click="$emit('reject', member.id)"> </div>
{{ $t("Decline") }} <div class="level-item">
</b-button> <b-button
type="is-danger"
@click="$emit('reject', member.id)"
>
{{ $t("Decline") }}
</b-button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -82,4 +90,7 @@ export default class InvitationCard extends Vue {
background: lighten($primary, 40%); background: lighten($primary, 40%);
padding: 10px; padding: 10px;
} }
h3 {
color: $violet-3;
}
</style> </style>

71
js/src/components/Group/Invitations.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<section v-if="invitations && invitations.length > 0"> <section class="card my-3" v-if="invitations && invitations.length > 0">
<InvitationCard <InvitationCard
v-for="member in invitations" v-for="member in invitations"
:key="member.id" :key="member.id"
@ -13,8 +13,9 @@
import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member"; import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import InvitationCard from "@/components/Group/InvitationCard.vue"; import InvitationCard from "@/components/Group/InvitationCard.vue";
import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor"; import { PERSON_STATUS_GROUP } from "@/graphql/actor";
import { IMember } from "@/types/actor/member.model"; import { IMember } from "@/types/actor/member.model";
import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
@Component({ @Component({
components: { components: {
@ -26,19 +27,26 @@ export default class Invitations extends Vue {
async acceptInvitation(id: string): Promise<void> { async acceptInvitation(id: string): Promise<void> {
try { try {
const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>( await this.$apollo.mutate<{ acceptInvitation: IMember }>({
{ mutation: ACCEPT_INVITATION,
mutation: ACCEPT_INVITATION, variables: {
variables: { id,
id, },
}, refetchQueries({ data }) {
refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }], const profile = data?.acceptInvitation?.actor as IPerson;
} const group = data?.acceptInvitation?.parent as IGroup;
); if (profile && group) {
if (data) { return [
this.$emit("accept-invitation", data.acceptInvitation); {
} query: PERSON_STATUS_GROUP,
} catch (error) { variables: { id: profile.id, group: usernameWithDomain(group) },
},
];
}
return [];
},
});
} catch (error: any) {
console.error(error); console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) { if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message); this.$notifier.error(error.graphQLErrors[0].message);
@ -48,19 +56,26 @@ export default class Invitations extends Vue {
async rejectInvitation(id: string): Promise<void> { async rejectInvitation(id: string): Promise<void> {
try { try {
const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>( await this.$apollo.mutate<{ rejectInvitation: IMember }>({
{ mutation: REJECT_INVITATION,
mutation: REJECT_INVITATION, variables: {
variables: { id,
id, },
}, refetchQueries({ data }) {
refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }], const profile = data?.rejectInvitation?.actor as IPerson;
} const group = data?.rejectInvitation?.parent as IGroup;
); if (profile && group) {
if (data) { return [
this.$emit("reject-invitation", data.rejectInvitation); {
} query: PERSON_STATUS_GROUP,
} catch (error) { variables: { id: profile.id, group: usernameWithDomain(group) },
},
];
}
return [];
},
});
} catch (error: any) {
console.error(error); console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) { if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message); this.$notifier.error(error.graphQLErrors[0].message);

39
js/src/components/Group/MultiGroupCard.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div class="multi-card-group">
<group-card
class="group-card"
v-for="group in groups"
:group="group"
:key="group.id"
/>
</div>
</template>
<script lang="ts">
import { IGroup } from "@/types/actor";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import GroupCard from "./GroupCard.vue";
@Component({
components: {
GroupCard,
},
})
export default class MultiGroupCard extends Vue {
@Prop({ type: Array as PropType<IGroup[]>, required: true })
groups!: IGroup[];
}
</script>
<style lang="scss" scoped>
.multi-card-group {
display: grid;
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.group-card {
height: 100%;
display: flex;
flex-direction: column;
}
}
</style>

11
js/src/components/Group/ShareGroupModal.vue
View File

@ -83,11 +83,13 @@
/></a> /></a>
<a <a
:href="telegramShareUrl" :href="telegramShareUrl"
class="telegram"
target="_blank" target="_blank"
rel="nofollow noopener" rel="nofollow noopener"
title="Telegram" title="Telegram"
><b-icon icon="telegram" size="is-large" type="is-primary" >
/></a> <telegram-logo />
</a>
<a <a
title="Diaspora" title="Diaspora"
:href="diasporaShareUrl" :href="diasporaShareUrl"
@ -115,12 +117,14 @@ import { Component, Prop, Vue, Ref } from "vue-property-decorator";
import { GroupVisibility } from "@/types/enums"; import { GroupVisibility } from "@/types/enums";
import DiasporaLogo from "../Share/DiasporaLogo.vue"; import DiasporaLogo from "../Share/DiasporaLogo.vue";
import MastodonLogo from "../Share/MastodonLogo.vue"; import MastodonLogo from "../Share/MastodonLogo.vue";
import TelegramLogo from "../Share/MastodonLogo.vue";
import { displayName, IGroup } from "@/types/actor"; import { displayName, IGroup } from "@/types/actor";
@Component({ @Component({
components: { components: {
DiasporaLogo, DiasporaLogo,
MastodonLogo, MastodonLogo,
TelegramLogo,
}, },
}) })
export default class ShareGroupModal extends Vue { export default class ShareGroupModal extends Vue {
@ -194,7 +198,8 @@ export default class ShareGroupModal extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.diaspora, .diaspora,
.mastodon { .mastodon,
.telegram {
::v-deep span svg { ::v-deep span svg {
width: 2.25rem; width: 2.25rem;
} }

19
js/src/components/Image/LazyImage.vue
View File

@ -16,8 +16,9 @@
:width="width" :width="width"
:height="height" :height="height"
class="absolute top-0 left-0 transition-opacity duration-500" class="absolute top-0 left-0 transition-opacity duration-500"
:class="isLoaded ? 'opacity-100' : 'opacity-0'" :class="{ isLoaded: isLoaded ? 'opacity-100' : 'opacity-0', rounded }"
alt="" alt=""
src=""
/> />
</div> </div>
</div> </div>
@ -37,6 +38,7 @@ export default class LazyImage extends Vue {
@Prop({ type: String, required: false, default: null }) blurhash!: string; @Prop({ type: String, required: false, default: null }) blurhash!: string;
@Prop({ type: Number, default: 1 }) width!: number; @Prop({ type: Number, default: 1 }) width!: number;
@Prop({ type: Number, default: 1 }) height!: number; @Prop({ type: Number, default: 1 }) height!: number;
@Prop({ type: Boolean, default: false }) rounded!: boolean;
inheritAttrs = false; inheritAttrs = false;
isLoaded = false; isLoaded = false;
@ -63,12 +65,14 @@ export default class LazyImage extends Vue {
onEnter(): void { onEnter(): void {
// Image is visible (means: has entered the viewport), // Image is visible (means: has entered the viewport),
// so start loading by setting the src attribute // so start loading by setting the src attribute
this.image.src = this.src; if (this.image) {
this.image.src = this.src;
this.image.onload = () => { this.image.onload = () => {
// Image is loaded, so start fading in // Image is loaded, so start fading in
this.isLoaded = true; this.isLoaded = true;
}; };
}
} }
@Watch("src") @Watch("src")
@ -113,5 +117,8 @@ img {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: 50% 50%; object-position: 50% 50%;
&.rounded {
border-radius: 8px;
}
} }
</style> </style>

2
js/src/components/Image/LazyImageWrapper.vue
View File

@ -5,6 +5,7 @@
:width="pictureOrDefault.metadata.width" :width="pictureOrDefault.metadata.width"
:height="pictureOrDefault.metadata.height" :height="pictureOrDefault.metadata.height"
:blurhash="pictureOrDefault.metadata.blurhash" :blurhash="pictureOrDefault.metadata.blurhash"
:rounded="rounded"
/> />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -34,6 +35,7 @@ const DEFAULT_PICTURE = {
export default class LazyImageWrapper extends Vue { export default class LazyImageWrapper extends Vue {
@Prop({ required: false, type: Object as PropType<IMedia | null> }) @Prop({ required: false, type: Object as PropType<IMedia | null> })
picture!: IMedia | null; picture!: IMedia | null;
@Prop({ required: false, type: Boolean, default: false }) rounded!: boolean;
get pictureOrDefault(): Partial<IMedia> { get pictureOrDefault(): Partial<IMedia> {
if (this.picture === null) { if (this.picture === null) {

9
js/src/components/Map.vue
View File

@ -19,7 +19,10 @@
:zoomInTitle="$t('Zoom in')" :zoomInTitle="$t('Zoom in')"
:zoomOutTitle="$t('Zoom out')" :zoomOutTitle="$t('Zoom out')"
></l-control-zoom> ></l-control-zoom>
<v-locatecontrol :options="{ icon: 'mdi mdi-map-marker' }" /> <v-locatecontrol
v-if="canDoGeoLocation"
:options="{ icon: 'mdi mdi-map-marker' }"
/>
<l-marker <l-marker
:lat-lng="[lat, lon]" :lat-lng="[lat, lon]"
@add="openPopup" @add="openPopup"
@ -152,6 +155,10 @@ export default class Map extends Vue {
(this.$t("© The OpenStreetMap Contributors") as string) (this.$t("© The OpenStreetMap Contributors") as string)
); );
} }
get canDoGeoLocation(): boolean {
return window.isSecureContext;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

55
js/src/components/NavBar.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<b-navbar <b-navbar
id="navbar"
type="is-secondary" type="is-secondary"
wrapper-class="container" wrapper-class="container"
:active.sync="mobileNavbarActive" :active.sync="mobileNavbarActive"
@ -48,6 +49,7 @@
" "
> >
<b-button <b-button
v-if="!hideCreateEventsButton"
tag="router-link" tag="router-link"
:to="{ name: RouteName.CREATE_EVENT }" :to="{ name: RouteName.CREATE_EVENT }"
type="is-primary" type="is-primary"
@ -60,7 +62,8 @@
tag="a" tag="a"
href="https://mediation.koena.net/framasoft/mobilizon/" href="https://mediation.koena.net/framasoft/mobilizon/"
target="_blank" target="_blank"
rel="noopener" rel="noopener external"
hreflang="fr"
> >
<img <img
src="/img/koena-a11y.svg" src="/img/koena-a11y.svg"
@ -87,12 +90,12 @@
v-if="currentActor.id && currentUser.isLoggedIn" v-if="currentActor.id && currentUser.isLoggedIn"
right right
collapsible collapsible
ref="user-dropdown"
tabindex="0"
tag="span"
@keyup.enter="toggleMenu"
> >
<template <template slot="label" v-if="currentActor">
slot="label"
v-if="currentActor"
class="navbar-dropdown-profile"
>
<div class="identity-wrapper"> <div class="identity-wrapper">
<div> <div>
<figure class="image is-32x32" v-if="currentActor.avatar"> <figure class="image is-32x32" v-if="currentActor.avatar">
@ -121,8 +124,11 @@
v-else v-else
:active="identity.id === currentActor.id" :active="identity.id === currentActor.id"
:key="identity.id" :key="identity.id"
tabindex="0"
@click="setIdentity(identity)"
@keyup.enter="setIdentity(identity)"
> >
<span @click="setIdentity(identity)"> <span>
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32" v-if="identity.avatar"> <figure class="image is-32x32" v-if="identity.avatar">
<img <img
@ -143,7 +149,7 @@
</div> </div>
</span> </span>
<hr class="navbar-divider" /> <hr class="navbar-divider" role="presentation" />
</b-navbar-item> </b-navbar-item>
<b-navbar-item <b-navbar-item
@ -158,8 +164,13 @@
>{{ $t("Administration") }} >{{ $t("Administration") }}
</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="span"> <b-navbar-item
<span @click="logout">{{ $t("Log out") }}</span> tag="span"
tabindex="0"
@click="logout"
@keyup.enter="logout"
>
<span>{{ $t("Log out") }}</span>
</b-navbar-item> </b-navbar-item>
</b-navbar-dropdown> </b-navbar-dropdown>
@ -185,7 +196,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator"; import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import Logo from "@/components/Logo.vue"; import Logo from "@/components/Logo.vue";
import { GraphQLError } from "graphql"; import { GraphQLError } from "graphql";
import { loadLanguageAsync } from "@/utils/i18n"; import { loadLanguageAsync } from "@/utils/i18n";
@ -206,12 +217,8 @@ import RouteName from "../router/name";
@Component({ @Component({
apollo: { apollo: {
currentUser: { currentUser: CURRENT_USER_CLIENT,
query: CURRENT_USER_CLIENT, currentActor: CURRENT_ACTOR_CLIENT,
},
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update: ({ identities }) => update: ({ identities }) =>
@ -257,6 +264,13 @@ export default class NavBar extends Vue {
displayName = displayName; displayName = displayName;
@Ref("user-dropdown") userDropDown!: any;
toggleMenu(): void {
console.debug("called toggleMenu");
this.userDropDown.showMenu();
}
@Watch("currentActor") @Watch("currentActor")
async initializeListOfIdentities(): Promise<void> { async initializeListOfIdentities(): Promise<void> {
if (!this.currentUser.isLoggedIn) return; if (!this.currentUser.isLoggedIn) return;
@ -326,9 +340,14 @@ export default class NavBar extends Vue {
}); });
return changeIdentity(this.$apollo.provider.defaultClient, identity); return changeIdentity(this.$apollo.provider.defaultClient, identity);
} }
get hideCreateEventsButton(): boolean {
return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
nav { nav {
.navbar-item { .navbar-item {
a.button { a.button {
@ -361,7 +380,7 @@ nav {
} }
.navbar-item.has-dropdown a.navbar-link figure { .navbar-item.has-dropdown a.navbar-link figure {
margin-right: 0.75rem; @include margin-right(0.75rem);
display: flex; display: flex;
align-items: center; align-items: center;
} }

8
js/src/components/Participation/ConfirmParticipation.vue
View File

@ -71,7 +71,13 @@ import { IParticipant } from "../../types/participant.model";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { CONFIRM_PARTICIPATION } from "../../graphql/event"; import { CONFIRM_PARTICIPATION } from "../../graphql/event";
@Component @Component({
metaInfo() {
return {
title: this.$t("Confirm participation") as string,
};
},
})
export default class ConfirmParticipation extends Vue { export default class ConfirmParticipation extends Vue {
@Prop({ type: String, required: true }) token!: string; @Prop({ type: String, required: true }) token!: string;

1
js/src/components/Participation/ParticipationSection.vue
View File

@ -65,6 +65,7 @@
<b-modal <b-modal
:active.sync="isAnonymousParticipationModalOpen" :active.sync="isAnonymousParticipationModalOpen"
has-modal-card has-modal-card
:close-button-aria-label="$t('Close')"
ref="anonymous-participation-modal" ref="anonymous-participation-modal"
> >
<div class="modal-card"> <div class="modal-card">

6
js/src/components/Participation/ParticipationWithAccount.vue
View File

@ -28,6 +28,12 @@ import { IEvent } from "@/types/event.model";
}, },
}, },
}, },
metaInfo() {
return {
title: this.$t("Participation with account") as string,
meta: [{ name: "robots", content: "noindex" }],
};
},
}) })
export default class ParticipationWithAccount extends Vue { export default class ParticipationWithAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;

9
js/src/components/Participation/ParticipationWithoutAccount.vue
View File

@ -155,6 +155,12 @@ import { ApolloCache, FetchResult } from "@apollo/client/core";
}, },
config: CONFIG, config: CONFIG,
}, },
metaInfo() {
return {
title: this.$t("Participation without account") as string,
meta: [{ name: "robots", content: "noindex" }],
};
},
}) })
export default class ParticipationWithoutAccount extends Vue { export default class ParticipationWithoutAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;
@ -195,6 +201,7 @@ export default class ParticipationWithoutAccount extends Vue {
email: this.anonymousParticipation.email, email: this.anonymousParticipation.email,
message: this.anonymousParticipation.message, message: this.anonymousParticipation.message,
locale: this.$i18n.locale, locale: this.$i18n.locale,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}, },
update: ( update: (
store: ApolloCache<{ joinEvent: IParticipant }>, store: ApolloCache<{ joinEvent: IParticipant }>,
@ -249,7 +256,7 @@ export default class ParticipationWithoutAccount extends Vue {
data.joinEvent.metadata.cancellationToken data.joinEvent.metadata.cancellationToken
); );
} }
} catch (e) { } catch (e: any) {
if ( if (
["TextEncoder is not defined", "crypto.subtle is undefined"].includes( ["TextEncoder is not defined", "crypto.subtle is undefined"].includes(
e.message e.message

6
js/src/components/Participation/UnloggedParticipation.vue
View File

@ -130,6 +130,12 @@ import RouteName from "../../router/name";
}, },
config: CONFIG, config: CONFIG,
}, },
metaInfo() {
return {
title: this.$t("Unlogged participation") as string,
meta: [{ name: "robots", content: "noindex" }],
};
},
}) })
export default class UnloggedParticipation extends Vue { export default class UnloggedParticipation extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;

12
js/src/components/PictureUpload.vue
View File

@ -38,7 +38,12 @@
</span> </span>
</b-upload> </b-upload>
</b-field> </b-field>
<b-button type="is-text" v-if="imageSrc" @click="removeOrClearPicture"> <b-button
type="is-text"
v-if="imageSrc"
@click="removeOrClearPicture"
@keyup.enter="removeOrClearPicture"
>
{{ $t("Clear") }} {{ $t("Clear") }}
</b-button> </b-button>
</div> </div>
@ -46,13 +51,14 @@
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/_mixins" as *;
.root { .root {
display: flex; display: flex;
align-items: center; align-items: center;
} }
figure.image { figure.image {
margin-right: 30px; @include margin-right(30px);
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
@ -94,7 +100,7 @@ figure.image {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-right: 5px; @include margin-right(5px);
} }
} }
} }

34
js/src/components/Post/MultiPostListItem.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="posts-wrapper">
<post-list-item
v-for="post in posts"
:key="post.id"
:post="post"
:isCurrentActorMember="isCurrentActorMember"
/>
</div>
</template>
<script lang="ts">
import { IPost } from "@/types/post.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import PostListItem from "./PostListItem.vue";
@Component({
components: {
PostListItem,
},
})
export default class MultiPostListItem extends Vue {
@Prop({ type: Array as PropType<IPost[]>, required: true }) posts!: IPost[];
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
}
</script>
<style lang="scss" scoped>
.posts-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr;
}
</style>

133
js/src/components/Post/PostElementItem.vue
View File

@ -1,133 +0,0 @@
<template>
<router-link
class="post-minimalist-card-wrapper"
:to="{ name: RouteName.POST, params: { slug: post.slug } }"
>
<div class="title-info-wrapper">
<div class="media">
<div class="media-left">
<figure class="image is-96x96" v-if="post.picture">
<img :src="post.picture.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="post" />
</div>
<div class="media-content">
<p class="post-minimalist-title">{{ post.title }}</p>
<div class="metadata">
<b-tag type="is-warning" size="is-small" v-if="post.draft">{{
$t("Draft")
}}</b-tag>
<small
v-if="
post.visibility === PostVisibility.PUBLIC &&
isCurrentActorMember
"
class="has-text-grey"
>
<b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small
>
<small
v-else-if="post.visibility === PostVisibility.UNLISTED"
class="has-text-grey"
>
<b-icon icon="link" size="is-small" />{{
$t("Accessible through link")
}}</small
>
<small
v-else-if="post.visibility === PostVisibility.PRIVATE"
class="has-text-grey"
>
<b-icon icon="lock" size="is-small" />{{
$t("Accessible only to members", {
group: post.attributedTo.name,
})
}}</small
>
<small class="has-text-grey">{{
$options.filters.formatDateTimeString(
new Date(post.insertedAt),
false
)
}}</small>
<small class="has-text-grey" v-if="isCurrentActorMember">{{
$t("Created by {username}", {
username: `@${usernameWithDomain(post.author)}`,
})
}}</small>
</div>
</div>
</div>
</div>
</router-link>
</template>
<script lang="ts">
import { usernameWithDomain } from "@/types/actor";
import { PostVisibility } from "@/types/enums";
import { Component, Prop, Vue } from "vue-property-decorator";
import RouteName from "../../router/name";
import { IPost } from "../../types/post.model";
@Component
export default class PostElementItem extends Vue {
@Prop({ required: true, type: Object }) post!: IPost;
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
RouteName = RouteName;
usernameWithDomain = usernameWithDomain;
PostVisibility = PostVisibility;
}
</script>
<style lang="scss" scoped>
.post-minimalist-card-wrapper {
text-decoration: none;
display: flex;
width: 100%;
color: initial;
border-bottom: 1px solid #e9e9e9;
align-items: center;
.title-info-wrapper {
flex: 2;
.post-minimalist-title {
color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif;
font-size: 1rem;
font-weight: 700;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.media .media-left {
& > span.icon {
height: 96px;
width: 96px;
}
& > figure.image > img {
object-fit: cover;
height: 100%;
object-position: center;
width: 100%;
}
}
.metadata {
& > span.tag {
margin-right: 5px;
}
& > small:not(:last-child):after {
content: "·";
padding: 0 5px;
}
}
}
}
</style>

105
js/src/components/Post/PostListItem.vue
View File

@ -1,55 +1,122 @@
<template> <template>
<router-link <router-link
class="post-minimalist-card-wrapper" class="post-minimalist-card-wrapper"
dir="auto"
:to="{ name: RouteName.POST, params: { slug: post.slug } }" :to="{ name: RouteName.POST, params: { slug: post.slug } }"
> >
<div class="title-info-wrapper"> <lazy-image-wrapper
<p class="post-minimalist-title">{{ post.title }}</p> :picture="post.picture"
<small class="has-text-grey-dark">{{ :rounded="true"
formatDistanceToNow(new Date(post.publishAt || post.insertedAt), { style="height: 120px"
locale: $dateFnsLocale, />
addSuffix: true, <div class="title-info-wrapper has-text-grey-dark">
}) <h3 class="post-minimalist-title" :lang="post.language">
}}</small> {{ post.title }}
</h3>
<p class="post-publication-date">
<b-icon icon="clock" />
<span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
publishedAt | formatDateTimeString(undefined, false, "short")
}}</span>
<span v-else>{{
formatDistanceToNow(publishedAt, {
locale: $dateFnsLocale,
addSuffix: true,
})
}}</span>
</p>
<b-taglist v-if="post.tags.length > 0" style="display: inline">
<b-icon icon="tag" />
<b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
</b-taglist>
<p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
<b-icon icon="account-edit" />
<i18n path="Published by {name}">
<b class="has-text-weight-medium" slot="name">{{
displayName(post.author)
}}</b>
</i18n>
</p>
</div> </div>
</router-link> </router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
import { formatDistanceToNow } from "date-fns"; import { formatDistanceToNow, subWeeks, isBefore } from "date-fns";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import { displayName } from "@/types/actor";
@Component @Component({
components: {
LazyImageWrapper,
},
})
export default class PostListItem extends Vue { export default class PostListItem extends Vue {
@Prop({ required: true, type: Object }) post!: IPost; @Prop({ required: true, type: Object }) post!: IPost;
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
RouteName = RouteName; RouteName = RouteName;
formatDistanceToNow = formatDistanceToNow; formatDistanceToNow = formatDistanceToNow;
displayName = displayName;
get publishedAt(): Date {
return new Date((this.post.publishAt || this.post.insertedAt) as Date);
}
get isBeforeLastWeek(): boolean {
return isBefore(this.publishedAt, subWeeks(new Date(), 1));
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
@import "~bulma/sass/utilities/mixins.sass";
.post-minimalist-card-wrapper { .post-minimalist-card-wrapper {
display: grid;
grid-gap: 5px 10px;
grid-template-areas: "preview" "body";
text-decoration: none; text-decoration: none;
display: flex;
width: 100%; width: 100%;
color: initial; color: initial;
border-bottom: 1px solid #e9e9e9;
align-items: center; @include desktop {
grid-template-columns: 200px 3fr;
grid-template-areas: "preview body";
}
.title-info-wrapper { .title-info-wrapper {
flex: 2;
.post-minimalist-title { .post-minimalist-title {
color: #3c376e; color: #3c376e;
font-family: Roboto, Helvetica, Arial, serif; font-size: 18px;
font-size: 16px; line-height: 24px;
font-weight: 500; font-weight: 700;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 3;
}
}
::v-deep .icon {
vertical-align: middle;
@include margin-right(5px);
}
::v-deep .tags {
display: inline;
span.tag {
max-width: 200px;
& > span {
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
} }

219
js/src/components/Post/SharePostModal.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t("Share this post") }}</p>
</header>
<section class="modal-card-body is-flex" v-if="post">
<div class="container has-text-centered">
<b-notification
type="is-warning"
v-if="post.visibility !== PostVisibility.PUBLIC"
:closable="false"
>
{{
$t(
"This post is accessible only through it's link. Be careful where you post this link."
)
}}
</b-notification>
<b-field :label="$t('Post URL')" label-for="post-url-text">
<b-input
id="post-url-text"
ref="postURLInput"
:value="postURL"
expanded
/>
<p class="control">
<b-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
type="is-success"
position="is-left"
>
<b-button
type="is-primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/>
</b-tooltip>
</p>
</b-field>
<div>
<a
:href="twitterShareUrl"
target="_blank"
rel="nofollow noopener"
title="Twitter"
><b-icon icon="twitter" size="is-large" type="is-primary"
/></a>
<a
:href="mastodonShareUrl"
class="mastodon"
target="_blank"
rel="nofollow noopener"
title="Mastodon"
>
<mastodon-logo />
</a>
<a
:href="facebookShareUrl"
target="_blank"
rel="nofollow noopener"
title="Facebook"
><b-icon icon="facebook" size="is-large" type="is-primary"
/></a>
<a
:href="whatsAppShareUrl"
target="_blank"
rel="nofollow noopener"
title="WhatsApp"
><b-icon icon="whatsapp" size="is-large" type="is-primary"
/></a>
<a
:href="telegramShareUrl"
class="telegram"
target="_blank"
rel="nofollow noopener"
title="Telegram"
>
<telegram-logo />
</a>
<a
:href="linkedInShareUrl"
target="_blank"
rel="nofollow noopener"
title="LinkedIn"
><b-icon icon="linkedin" size="is-large" type="is-primary"
/></a>
<a
:href="diasporaShareUrl"
class="diaspora"
target="_blank"
rel="nofollow noopener"
title="Diaspora"
>
<diaspora-logo />
</a>
<a
:href="emailShareUrl"
target="_blank"
rel="nofollow noopener"
title="Email"
><b-icon icon="email" size="is-large" type="is-primary"
/></a>
</div>
</div>
</section>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref } from "vue-property-decorator";
import { PostVisibility } from "@/types/enums";
import { IPost } from "../../types/post.model";
import DiasporaLogo from "../Share/DiasporaLogo.vue";
import MastodonLogo from "../Share/MastodonLogo.vue";
import TelegramLogo from "../Share/TelegramLogo.vue";
import { PropType } from "vue";
import RouteName from "@/router/name";
@Component({
components: {
DiasporaLogo,
MastodonLogo,
TelegramLogo,
},
})
export default class SharePostModal extends Vue {
@Prop({ type: Object as PropType<IPost>, required: true }) post!: IPost;
@Ref("postURLInput") readonly postURLInput!: any;
PostVisibility = PostVisibility;
RouteName = RouteName;
showCopiedTooltip = false;
get twitterShareUrl(): string {
return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
this.postURL
)}&text=${this.post.title}`;
}
get facebookShareUrl(): string {
return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
this.postURL
)}`;
}
get linkedInShareUrl(): string {
return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
this.postURL
)}&title=${this.post.title}`;
}
get whatsAppShareUrl(): string {
return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
}
get telegramShareUrl(): string {
return `https://t.me/share/url?url=${encodeURIComponent(
this.postURL
)}&text=${encodeURIComponent(this.post.title)}`;
}
get emailShareUrl(): string {
return `mailto:?to=&body=${this.postURL}&subject=${this.post.title}`;
}
get diasporaShareUrl(): string {
return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
this.post.title
)}&url=${encodeURIComponent(this.postURL)}`;
}
get mastodonShareUrl(): string {
return `https://toot.karamoff.dev/?text=${encodeURIComponent(
this.basicTextToEncode
)}`;
}
get basicTextToEncode(): string {
return `${this.post.title}\r\n${this.postURL}`;
}
get postURL(): string {
if (this.post.id) {
return this.$router.resolve({
name: RouteName.POST,
params: { id: this.post.id },
}).href;
}
return "";
}
copyURL(): void {
this.postURLInput.$refs.input.select();
document.execCommand("copy");
this.showCopiedTooltip = true;
setTimeout(() => {
this.showCopiedTooltip = false;
}, 2000);
}
}
</script>
<style lang="scss" scoped>
.diaspora,
.mastodon,
.telegram {
::v-deep span svg {
width: 2.25rem;
}
}
</style>

27
js/src/components/Report/ReportModal.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head" v-if="title"> <header class="modal-card-head" v-if="title">
<p class="modal-card-title">{{ title }}</p> <h2 class="modal-card-title">{{ title }}</h2>
</header> </header>
<section <section
@ -17,7 +17,7 @@
<article class="media"> <article class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="comment.actor.avatar"> <figure class="image is-48x48" v-if="comment.actor.avatar">
<img :src="comment.actor.avatar.url" alt="Image" /> <img :src="comment.actor.avatar.url" alt="" />
</figure> </figure>
<b-icon <b-icon
class="media-left" class="media-left"
@ -45,12 +45,16 @@
</p> </p>
<div class="control"> <div class="control">
<b-input <b-field
v-model="content" :label="$t('Additional comments')"
type="textarea" label-for="additonal-comments"
@keyup.enter="confirm" >
:placeholder="$t('Additional comments')" <b-input
/> v-model="content"
type="textarea"
id="additonal-comments"
/>
</b-field>
</div> </div>
<div class="control" v-if="outsideDomain"> <div class="control" v-if="outsideDomain">
@ -73,7 +77,12 @@
<button class="button" ref="cancelButton" @click="close"> <button class="button" ref="cancelButton" @click="close">
{{ translatedCancelText }} {{ translatedCancelText }}
</button> </button>
<button class="button is-primary" ref="confirmButton" @click="confirm"> <button
class="button is-primary"
ref="confirmButton"
@click="confirm"
@keyup.enter="confirm"
>
{{ translatedConfirmText }} {{ translatedConfirmText }}
</button> </button>
</footer> </footer>

6
js/src/components/Resource/FolderItem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="resource-wrapper"> <div class="resource-wrapper" dir="auto">
<router-link <router-link
:to="{ :to="{
name: RouteName.RESOURCE_FOLDER, name: RouteName.RESOURCE_FOLDER,
@ -61,7 +61,7 @@ export default class FolderItem extends Mixins(ResourceMixin) {
list = []; list = [];
groupObject: Record<string, unknown> = { groupObject: Record<string, unknown> = {
name: `folder-${this.resource.title}`, name: `folder-${this.resource?.title}`,
pull: false, pull: false,
put: ["resources"], put: ["resources"],
}; };
@ -110,7 +110,7 @@ export default class FolderItem extends Mixins(ResourceMixin) {
return undefined; return undefined;
} }
return data.updateResource; return data.updateResource;
} catch (e) { } catch (e: any) {
Snackbar.open({ Snackbar.open({
message: e.message, message: e.message,
type: "is-danger", type: "is-danger",

5
js/src/components/Resource/ResourceItem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="resource-wrapper"> <div class="resource-wrapper" dir="auto">
<a :href="resource.resourceUrl" target="_blank"> <a :href="resource.resourceUrl" target="_blank">
<div class="preview"> <div class="preview">
<div <div
@ -82,6 +82,7 @@ export default class ResourceItem extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.resource-wrapper { .resource-wrapper {
display: flex; display: flex;
flex: 1; flex: 1;
@ -137,7 +138,7 @@ a {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 6px; @include margin-right(6px);
vertical-align: middle; vertical-align: middle;
} }

2
js/src/components/Resource/ResourceSelector.vue
View File

@ -59,7 +59,7 @@
{{ $t("No resources in this folder") }} {{ $t("No resources in this folder") }}
</p> </p>
<b-pagination <b-pagination
v-if="resource.children.total > RESOURCES_PER_PAGE" v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
:total="resource.children.total" :total="resource.children.total"
v-model="page" v-model="page"
size="is-small" size="is-small"

1
js/src/components/SearchField.vue
View File

@ -7,6 +7,7 @@
icon="magnify" icon="magnify"
type="search" type="search"
rounded rounded
dir="auto"
:placeholder="defaultPlaceHolder" :placeholder="defaultPlaceHolder"
v-model="search" v-model="search"
@keyup.native.enter="enter" @keyup.native.enter="enter"

2
js/src/components/Settings/NotificationsOnboarding.vue
View File

@ -60,7 +60,7 @@ export default class NotificationsOnboarding extends mixins(Onboarding) {
async updateSetting(variables: Record<string, unknown>): Promise<void> { async updateSetting(variables: Record<string, unknown>): Promise<void> {
try { try {
this.doUpdateSetting(variables); this.doUpdateSetting(variables);
} catch (e) { } catch (e: any) {
Snackbar.open({ Snackbar.open({
message: e.message, message: e.message,
type: "is-danger", type: "is-danger",

16
js/src/components/Share/TelegramLogo.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<span class="icon has-text-primary is-large">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Telegram</title>
<path
d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"
/>
</svg>
</span>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class TelegramLogo extends Vue {}
</script>

5
js/src/components/Todo/CompactTodo.vue
View File

@ -55,7 +55,7 @@ export default class Todo extends Vue {
}, },
}); });
this.editMode = false; this.editMode = false;
} catch (e) { } catch (e: any) {
Snackbar.open({ Snackbar.open({
message: e.message, message: e.message,
type: "is-danger", type: "is-danger",
@ -66,7 +66,8 @@ export default class Todo extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
span.details { span.details {
margin-left: 1rem; @include margin-left(1rem);
} }
</style> </style>

2
js/src/components/Todo/FullTodo.vue
View File

@ -91,7 +91,7 @@ export default class Todo extends Vue {
}, },
}); });
this.editMode = false; this.editMode = false;
} catch (e) { } catch (e: any) {
Snackbar.open({ Snackbar.open({
message: e.message, message: e.message,
type: "is-danger", type: "is-danger",

1
js/src/components/Utils/EmptyContent.vue
View File

@ -32,6 +32,7 @@ export default class EmptyContent extends Vue {
} }
&.inline { &.inline {
margin-top: 5vh; margin-top: 5vh;
margin-bottom: 2vh;
} }
} }
</style> </style>

15
js/src/components/Utils/HomepageRedirectComponent.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>a</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import RouteName from "@/router/name";
@Component
export default class HomepageRedirectComponent extends Vue {
created(): void {
this.$router.replace({ name: RouteName.HOME });
}
}
</script>

Some files were not shown because too many files have changed in this diff Show More