diff --git a/packages/web-forms/e2e/vue.test.ts b/packages/web-forms/e2e/vue.test.ts index 682677a53..de7e02380 100644 --- a/packages/web-forms/e2e/vue.test.ts +++ b/packages/web-forms/e2e/vue.test.ts @@ -76,7 +76,7 @@ test('All forms are rendered and there is no console error', async ({ page, brow const langChanger = page.getByLabel('change language'); if ((await langChanger.count()) > 0) { - await langChanger.click(); + await langChanger.first().click(); await page.locator('.language-dd-label').last().click(); } diff --git a/packages/web-forms/icomoon.json b/packages/web-forms/icomoon.json index e79632dce..4ae4ef925 100644 --- a/packages/web-forms/icomoon.json +++ b/packages/web-forms/icomoon.json @@ -488,10 +488,34 @@ "setIdx": 0, "setId": 4, "iconIdx": 35 + }, + { + "icon": { + "paths": ["M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z"], + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": ["menu"], + "grid": 24 + }, + "attrs": [], + "properties": { + "ligatures": "menu", + "id": 600, + "order": 299, + "prevSize": 48, + "code": 59670, + "name": "menu" + }, + "setIdx": 0, + "setId": 4, + "iconIdx": 600 } ], "height": 1024, - "metadata": { "name": "icomoon" }, + "metadata": { + "name": "icomoon" + }, "preferences": { "showGlyphs": true, "showQuickUse": true, @@ -499,8 +523,16 @@ "showSVGs": true, "fontPref": { "prefix": "icon-", - "metadata": { "fontFamily": "icomoon", "majorVersion": 1, "minorVersion": 0 }, - "metrics": { "emSize": 1024, "baseline": 6.25, "whitespace": 50 }, + "metadata": { + "fontFamily": "icomoon", + "majorVersion": 1, + "minorVersion": 0 + }, + "metrics": { + "emSize": 1024, + "baseline": 6.25, + "whitespace": 50 + }, "embed": false, "showSelector": true, "showMetrics": true, diff --git a/packages/web-forms/src/assets/css/icomoon.css b/packages/web-forms/src/assets/css/icomoon.css index 584471742..9d81d985c 100644 --- a/packages/web-forms/src/assets/css/icomoon.css +++ b/packages/web-forms/src/assets/css/icomoon.css @@ -88,3 +88,6 @@ .icon-repeat:before { content: '\e914'; } +.icon-menu:before { + content: '\e916'; +} diff --git a/packages/web-forms/src/assets/css/style.scss b/packages/web-forms/src/assets/css/style.scss index 30617d18f..9bc75dd9a 100644 --- a/packages/web-forms/src/assets/css/style.scss +++ b/packages/web-forms/src/assets/css/style.scss @@ -1,3 +1,3 @@ body { - background: var(--gray-200); + margin: 0; } diff --git a/packages/web-forms/src/assets/fonts/icomoon.svg b/packages/web-forms/src/assets/fonts/icomoon.svg index 07de4fd2a..70038be2c 100644 --- a/packages/web-forms/src/assets/fonts/icomoon.svg +++ b/packages/web-forms/src/assets/fonts/icomoon.svg @@ -28,4 +28,5 @@ + \ No newline at end of file diff --git a/packages/web-forms/src/assets/fonts/icomoon.ttf b/packages/web-forms/src/assets/fonts/icomoon.ttf index 0d5c96682..8bd0fdf60 100644 Binary files a/packages/web-forms/src/assets/fonts/icomoon.ttf and b/packages/web-forms/src/assets/fonts/icomoon.ttf differ diff --git a/packages/web-forms/src/assets/fonts/icomoon.woff b/packages/web-forms/src/assets/fonts/icomoon.woff index 815878ca8..092e8cd5d 100644 Binary files a/packages/web-forms/src/assets/fonts/icomoon.woff and b/packages/web-forms/src/assets/fonts/icomoon.woff differ diff --git a/packages/web-forms/src/components/FormHeader.vue b/packages/web-forms/src/components/FormHeader.vue index 3ca0d624f..7f26f7c13 100644 --- a/packages/web-forms/src/components/FormHeader.vue +++ b/packages/web-forms/src/components/FormHeader.vue @@ -1,17 +1,86 @@ + - + + + + + + - {{ title }} + + {{ form.definition.bind.form.title }} - + + + + + + + {{ form.definition.bind.form.title }} + + + + + + + + + + + + + + diff --git a/packages/web-forms/src/components/FormLanguageDialog.vue b/packages/web-forms/src/components/FormLanguageDialog.vue new file mode 100644 index 000000000..f35731b75 --- /dev/null +++ b/packages/web-forms/src/components/FormLanguageDialog.vue @@ -0,0 +1,95 @@ + + + + + + + {{ lang.language }} + + + + + + + + + + + \ No newline at end of file diff --git a/packages/web-forms/src/components/FormLanguageMenu.vue b/packages/web-forms/src/components/FormLanguageMenu.vue index f0099ae05..b7e5ba9f3 100644 --- a/packages/web-forms/src/components/FormLanguageMenu.vue +++ b/packages/web-forms/src/components/FormLanguageMenu.vue @@ -15,6 +15,7 @@ const handleLanguageChange = (event: LanguageDropdownChangeEvent) => { }; + { .icon-language { margin-right: 10px; + font-size: 1.5rem; } } \ No newline at end of file diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue index edee496e6..617406fe2 100644 --- a/packages/web-forms/src/components/OdkWebForm.vue +++ b/packages/web-forms/src/components/OdkWebForm.vue @@ -4,7 +4,7 @@ import Button from 'primevue/button'; import Card from 'primevue/card'; import { reactive, ref } from 'vue'; import FormHeader from './FormHeader.vue'; -import FormLanguageMenu from './FormLanguageMenu.vue'; + import QuestionList from './QuestionList.vue'; const props = defineProps<{ formXml: string }>(); @@ -28,19 +28,13 @@ const handleSubmit = () => { emit('submit'); } -const print = () => window.print(); + - - - - - - - + @@ -60,12 +54,14 @@ const print = () => window.print(); - + \ No newline at end of file diff --git a/packages/web-forms/tests/components/FormHeader.test.ts b/packages/web-forms/tests/components/FormHeader.test.ts index 4fb597eb9..2ded90cca 100644 --- a/packages/web-forms/tests/components/FormHeader.test.ts +++ b/packages/web-forms/tests/components/FormHeader.test.ts @@ -1,15 +1,18 @@ import FormHeader from '@/components/FormHeader.vue'; import { mount } from '@vue/test-utils'; import { describe, expect, it } from 'vitest'; +import { getReactiveForm } from '../helpers'; describe('FormHeader', () => { - it('shows form title', () => { + it('shows form title', async () => { + const xform = await getReactiveForm('computations-demo/1-calculate-simple.xform.xml'); + const component = mount(FormHeader, { props: { - title: 'Test Form', + form: xform, }, }); - expect(component.text()).toBe('Test Form'); + expect(component.find('.form-title').text()).toBe('Calculate (simple)'); }); });