diff --git a/Logic/State/FeatureSwitchState.ts b/Logic/State/FeatureSwitchState.ts index e690307d0..d012ef3de 100644 --- a/Logic/State/FeatureSwitchState.ts +++ b/Logic/State/FeatureSwitchState.ts @@ -18,6 +18,7 @@ export default class FeatureSwitchState { public readonly featureSwitchBackgroundSelection: UIEventSource public readonly featureSwitchAddNew: UIEventSource public readonly featureSwitchWelcomeMessage: UIEventSource + public readonly featureSwitchCommunityIndex: UIEventSource public readonly featureSwitchExtraLinkEnabled: UIEventSource public readonly featureSwitchMoreQuests: UIEventSource public readonly featureSwitchShareScreen: UIEventSource @@ -91,6 +92,11 @@ export default class FeatureSwitchState { () => true, "Disables/enables the help menu or welcome message" ) + this.featureSwitchCommunityIndex = featSw( + "fs-community-index", + () => true, + "Disables/enables the button to get in touch with the community" + ) this.featureSwitchExtraLinkEnabled = featSw( "fs-iframe-popout", (_) => true, diff --git a/UI/Base/ToSvelte.svelte b/UI/Base/ToSvelte.svelte new file mode 100644 index 000000000..029984b4e --- /dev/null +++ b/UI/Base/ToSvelte.svelte @@ -0,0 +1,17 @@ + + diff --git a/UI/BigComponents/CommunityIndexView.svelte b/UI/BigComponents/CommunityIndexView.svelte index 61228990e..85742cc4c 100644 --- a/UI/BigComponents/CommunityIndexView.svelte +++ b/UI/BigComponents/CommunityIndexView.svelte @@ -1,14 +1,44 @@ + + +
+ + {#each $filteredResources as feature} + + {/each} + +
diff --git a/UI/BigComponents/ContactLink.svelte b/UI/BigComponents/ContactLink.svelte index 3dd7301e7..d6c389b2a 100644 --- a/UI/BigComponents/ContactLink.svelte +++ b/UI/BigComponents/ContactLink.svelte @@ -1,34 +1,46 @@
- {#if $country?.nameEn} -

{$country?.nameEn}

- {/if} - {#each $resources as resource} - + {/each}
diff --git a/UI/DefaultGUI.ts b/UI/DefaultGUI.ts index 97caccdb8..f2e3c8a4c 100644 --- a/UI/DefaultGUI.ts +++ b/UI/DefaultGUI.ts @@ -34,6 +34,8 @@ import { GeoLocationState } from "../Logic/State/GeoLocationState" import Hotkeys from "./Base/Hotkeys" import AvailableBaseLayers from "../Logic/Actors/AvailableBaseLayers" import CopyrightPanel from "./BigComponents/CopyrightPanel" +import SvelteUIElement from "./Base/SvelteUIElement" +import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte" /** * The default MapComplete GUI initializer @@ -237,6 +239,20 @@ export default class DefaultGUI { const welcomeMessageMapControl = Toggle.If(state.featureSwitchWelcomeMessage, () => self.InitWelcomeMessage() ) + + const communityIndex = Toggle.If(state.featureSwitchCommunityIndex, () => { + const communityIndexControl = new MapControlButton(Svg.community_svg()) + const communityIndex = new ScrollableFullScreen( + () => Translations.t.communityIndex.title, + () => new SvelteUIElement(CommunityIndexView, { ...state }), + "community_index" + ) + communityIndexControl.onClick(() => { + communityIndex.Activate() + }) + return communityIndexControl + }) + const testingBadge = Toggle.If(state.featureSwitchIsTesting, () => new FixedUiElement("TESTING").SetClass("alert m-2 border-2 border-black") ) @@ -253,6 +269,7 @@ export default class DefaultGUI { welcomeMessageMapControl, userInfoMapControl, copyright, + communityIndex, extraLink, testingBadge, ]) diff --git a/UI/i18n/Translation.ts b/UI/i18n/Translation.ts index 01b19304e..bed4c6c6a 100644 --- a/UI/i18n/Translation.ts +++ b/UI/i18n/Translation.ts @@ -2,6 +2,7 @@ import Locale from "./Locale" import { Utils } from "../../Utils" import BaseUIElement from "../BaseUIElement" import LinkToWeblate from "../Base/LinkToWeblate" +import { SvelteComponent } from "svelte" export class Translation extends BaseUIElement { public static forcedLanguage = undefined diff --git a/assets/svg/community.svg b/assets/svg/community.svg new file mode 100644 index 000000000..92fa0b3cf --- /dev/null +++ b/assets/svg/community.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 1b42e5aca..aa8020ac8 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -803,6 +803,11 @@ video { margin-bottom: 0.5rem; } +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + .mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; @@ -813,11 +818,6 @@ video { margin-bottom: 0.75rem; } -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - .mb-4 { margin-bottom: 1rem; } @@ -1123,6 +1123,12 @@ video { width: 2.75rem; } +.w-fit { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} + .w-max { width: -webkit-max-content; width: max-content; @@ -1187,6 +1193,11 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.\!transform { + -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; +} + @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); @@ -1417,6 +1428,11 @@ video { border-style: dotted; } +.border-subtle { + --tw-border-opacity: 1; + border-color: rgb(219 234 254 / var(--tw-border-opacity)); +} + .border-black { --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); @@ -1437,6 +1453,11 @@ video { border-color: rgb(252 165 165 / var(--tw-border-opacity)); } +.border-lime-500 { + --tw-border-opacity: 1; + border-color: rgb(132 204 22 / var(--tw-border-opacity)); +} + .border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); @@ -1461,11 +1482,21 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-unsubtle { + --tw-bg-opacity: 1; + background-color: rgb(191 219 254 / var(--tw-bg-opacity)); +} + .bg-red-400 { --tw-bg-opacity: 1; background-color: rgb(248 113 113 / var(--tw-bg-opacity)); } +.bg-subtle { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); +} + .bg-gray-400 { --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); @@ -1530,6 +1561,11 @@ video { padding: 0.125rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .px-0 { padding-left: 0px; padding-right: 0px; @@ -1708,6 +1744,11 @@ video { letter-spacing: -0.025em; } +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1741,6 +1782,10 @@ video { text-decoration-line: line-through; } +.no-underline { + text-decoration-line: none; +} + .opacity-50 { opacity: 0.5; } @@ -1815,12 +1860,6 @@ video { transition-duration: 150ms; } -.transition-shadow { - transition-property: box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -2591,11 +2630,6 @@ input { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.hover\:bg-unsubtle:hover { - background-color: var(--unsubtle-detail-color); - color: var(--unsubtle-detail-color-contrast); -} - @media (min-width: 640px) { .sm\:top-3 { top: 0.75rem; diff --git a/langs/en.json b/langs/en.json index 50605772e..01befaac4 100644 --- a/langs/en.json +++ b/langs/en.json @@ -5,6 +5,12 @@ "retrying": "Loading data failed. Trying again in {count} seconds…", "zoomIn": "Zoom in to view or edit the data" }, + "communityIndex": { + "available": "This community speaks {native}", + "intro": "Get in touch with other people to get to know them, learn from them, ...", + "notAvailable": "This community does not speak {native}", + "title": "Community index" + }, "delete": { "cancel": "Cancel", "cannotBeDeleted": "This feature can not be deleted", diff --git a/langs/nl.json b/langs/nl.json index 4ca58aed9..5f4c4cdf2 100644 --- a/langs/nl.json +++ b/langs/nl.json @@ -5,6 +5,12 @@ "retrying": "Data inladen mislukt - wordt opnieuw geprobeerd over {count} seconden", "zoomIn": "Zoom in om de data te zien en te bewerken" }, + "communityIndex": { + "available": "Op dit communicatiekanaal spreekt men {native}", + "intro": "Contacteer anderen die bezig zijn met OpenStreetMap om kennis te maken, tips uit te wisselen of van elkaar bij te leren.", + "notAvailable": "Op dit communicatiekanaal spreekt men geen {native}", + "title": "Community index" + }, "delete": { "cancel": "Annuleren", "cannotBeDeleted": "Dit object kan niet van de kaart verwijderd worden", diff --git a/package.json b/package.json index 779eff323..bc19dfc4a 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "weblate-merge": "git remote update weblate-github; git merge weblate-github/weblate-mapcomplete-core weblate-github/weblate-mapcomplete-layers weblate-github/weblate-mapcomplete-layer-translations", "weblate-fix-heavy": "git remote rm weblate-layers; git remote add weblate-layers https://hosted.weblate.org/git/mapcomplete/layers/; git remote update weblate-layers; git merge weblate-layers/master", "housekeeping": "npm run generate && npm run generate:docs && npm run generate:contributor-list && vite-node scripts/fetchLanguages.ts && npm run format && git add assets/ langs/ Docs/ **/*.ts Docs/* && git commit -m 'Housekeeping...'", - "parseSchools": "vite-node scripts/schools/amendSchoolData.ts", + "parseSchools": "vite-node scripts/schools/amendSchoolData.ts" }, "keywords": [ "OpenStreetMap",