diff --git a/UI/AllThemesGui.ts b/UI/AllThemesGui.ts index 06195d6e4..7f393fe0b 100644 --- a/UI/AllThemesGui.ts +++ b/UI/AllThemesGui.ts @@ -13,6 +13,7 @@ import { SubtleButton } from "./Base/SubtleButton" import { VariableUiElement } from "./Base/VariableUIElement" import Svg from "../Svg" import { ImportViewerLinks } from "./BigComponents/UserInformation" +import UserSurveyPanel from "./UserSurveyPanel" export default class AllThemesGui { setup() { @@ -28,6 +29,7 @@ export default class AllThemesGui { new Combine([ intro, new FeaturedMessage().SetClass("mb-4 block"), + new Combine([new UserSurveyPanel()]).SetClass("flex justify-center"), new MoreScreen(state, true), new Toggle( undefined, diff --git a/UI/BigComponents/ThemeIntroductionPanel.ts b/UI/BigComponents/ThemeIntroductionPanel.ts index 75b4fd1e2..f4cce6bae 100644 --- a/UI/BigComponents/ThemeIntroductionPanel.ts +++ b/UI/BigComponents/ThemeIntroductionPanel.ts @@ -9,6 +9,7 @@ import Svg from "../../Svg" import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig" import { OsmConnection } from "../../Logic/Osm/OsmConnection" import FullWelcomePaneWithTabs from "./FullWelcomePaneWithTabs" +import UserSurveyPanel from "../UserSurveyPanel" export default class ThemeIntroductionPanel extends Combine { constructor( @@ -51,7 +52,8 @@ export default class ThemeIntroductionPanel extends Combine { const hasPresets = layout.layers.some((l) => l.presets?.length > 0) super([ - layout.description.Clone().SetClass("blcok mb-4"), + layout.description.Clone().SetClass("block mb-4"), + new UserSurveyPanel(), new Combine([ t.welcomeExplanation.general, hasPresets diff --git a/UI/UserSurveyPanel.ts b/UI/UserSurveyPanel.ts new file mode 100644 index 000000000..992589561 --- /dev/null +++ b/UI/UserSurveyPanel.ts @@ -0,0 +1,50 @@ +import Combine from "./Base/Combine" +import { FixedUiElement } from "./Base/FixedUiElement" +import { SubtleButton } from "./Base/SubtleButton" +import Svg from "../Svg" +import { LocalStorageSource } from "../Logic/Web/LocalStorageSource" +import Toggle from "./Input/Toggle" + +export default class UserSurveyPanel extends Toggle { + private static readonly userSurveyHasBeenTaken = LocalStorageSource.GetParsed( + "usersurvey-has-been-taken", + false + ) + + constructor() { + super( + new Combine([ + new FixedUiElement("Thanks for taking the survey!").SetClass("thanks px-2"), + new SubtleButton(Svg.star_svg(), "Take the user survey again", { + imgSize: "h-6 w-6", + }) + .onClick(() => { + window.open( + "https://framaforms.org/mapcomplete-usage-survey-1672687708", + "_blank" + ) + UserSurveyPanel.userSurveyHasBeenTaken.setData(false) + }) + .SetClass("h-12"), + ]), + new Combine([ + new FixedUiElement("Please, fill in the user survey").SetClass("alert"), + "Hey! We'd like to get to know you better - would you mind to help out by filling out this form? Your opinion is important", + new FixedUiElement( + "We are specifically searching responses from underrepresented groups, such as non-technical people, minorities, women, people without an account, people of colour, ..." + ).SetClass("font-bold"), + "Results are fully anonymous and are used to improve MapComplete. We don't ask private information. So, don't hesitate and fill it out!", + new SubtleButton(Svg.star_outline_svg(), "Take the survey").onClick(() => { + window.open( + "https://framaforms.org/mapcomplete-usage-survey-1672687708", + "_blank" + ) + UserSurveyPanel.userSurveyHasBeenTaken.setData(true) + }), + ]).SetClass("block border-2 border-black rounded-xl flex flex-col p-2"), + UserSurveyPanel.userSurveyHasBeenTaken + ) + + this.SetStyle("max-width: 40rem") + } +} diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index e76ec2439..9d1212f18 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -624,6 +624,10 @@ video { position: relative; } +.\!relative { + position: relative !important; +} + .sticky { position: -webkit-sticky; position: sticky; @@ -811,10 +815,6 @@ video { margin-top: 1rem; } -.ml-3 { - margin-left: 0.75rem; -} - .mr-2 { margin-right: 0.5rem; } @@ -839,6 +839,10 @@ video { margin-left: 0.5rem; } +.ml-3 { + margin-left: 0.75rem; +} + .ml-12 { margin-left: 3rem; }