From 9e93c81e0b00b09d34602d64ed3ab274bdc6f653 Mon Sep 17 00:00:00 2001 From: Sadiq Khoja Date: Mon, 10 Jun 2024 16:58:56 -0400 Subject: [PATCH] feat #128: first step towards responsive layout --- packages/web-forms/e2e/vue.test.ts | 2 +- packages/web-forms/icomoon.json | 38 ++++++- packages/web-forms/src/assets/css/icomoon.css | 3 + packages/web-forms/src/assets/css/style.scss | 2 +- .../web-forms/src/assets/fonts/icomoon.svg | 1 + .../web-forms/src/assets/fonts/icomoon.ttf | Bin 2936 -> 3004 bytes .../web-forms/src/assets/fonts/icomoon.woff | Bin 3012 -> 3080 bytes .../web-forms/src/components/FormHeader.vue | 107 +++++++++++++++++- .../src/components/FormLanguageDialog.vue | 102 +++++++++++++++++ .../src/components/FormLanguageMenu.vue | 2 + .../web-forms/src/components/OdkWebForm.vue | 50 +++++--- .../tests/components/FormHeader.test.ts | 9 +- 12 files changed, 289 insertions(+), 27 deletions(-) create mode 100644 packages/web-forms/src/components/FormLanguageDialog.vue 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 0d5c966829c24021f6cba7901b03d6292f6cfd12..8bd0fdf6067b46e6824efb126d7f85dc3416a6b0 100644 GIT binary patch delta 399 zcmXv~KS%;m9R5Au)p=fErKcec3I)+n(jOZNvehN1Lzk!yH66S>(BXujn`+jZf`*o+ zMpp-EZz>vUiJH#2LI}CO2le24zxRE=|8E%U#m|WmkxCA6O7HG3uY{+^7oqfkx)!Lw4wLQcJAN0Z@~?gaA%Z~ en^h$DOj(O^v86~&kWL{HNCDSSBi%>kmi+=(*IQly delta 317 zcmdlZ{zI&ufsuiMft#U$ftkU;KUm+0Ux-Z|D6$8L6OwZi3&g`N&1PU=lmYTX(i4jd zfV2RR5288Jb1Ks$ZgUF*`4tQd>@FFpi7D!*tQ~<;ApK?;Kmqnc%(sC2FF?LZMs7(( z6p+Edz$pPFQgZT>9TSDDgkJ##YJdVJxrr483@Qv^K>h|GUm-6sH+7~L=WihY0??AS zg8bqVphJOxI|3xnz|8z|;sJX`kx7i!+7>_&E(Q(;CLm;FP1A&NpnZm diff --git a/packages/web-forms/src/assets/fonts/icomoon.woff b/packages/web-forms/src/assets/fonts/icomoon.woff index 815878ca8f41c786563738690434b1ce0308015f..092e8cd5dbdef182306c3b3b7a84dc0917573f7d 100644 GIT binary patch delta 444 zcmX>i-XS4Y?(gQtz{mguJRA(%Aews*1LNe4+`ung91!g zQB+aXR8f=_h#Qz0{sP58m}zy`m5`8YVPQZ6fto>h5_jdI3g}q?(gQtz{mgu+(#I=!E^-!(!HU6AKs^7&CwpAs{Rsc4>Bc zVlhZ;50K9R#RBO$m1#h+BMc1eE+8y%n_D;|H8F*OffJ<0420EBSvzI`1%YA?K)wnH zvmau0>VO8!mn}@D}WYr{sHn8z*vPLEH5!P zm4Sgv255O32+#E5{9TY=TmtmZ61X~MAd8v# -import Card from 'primevue/card'; -defineProps<{title: string}>(); +import { type RootNode } from '@getodk/xforms-engine'; +import PrimeButton from 'primevue/button'; +import PrimeCard from 'primevue/card'; +import PrimeMenu from 'primevue/menu'; +import { ref } from 'vue'; +import FormLanguageDialog from './FormLanguageDialog.vue'; +import FormLanguageMenu from './FormLanguageMenu.vue'; + +const props = defineProps<{form: RootNode}>(); +const languageDialogState = ref(false); +const menu = ref(); +const languages = props.form.languages.filter(language => !language.isSyntheticDefault); + +const print = () => window.print(); + +const items = ref([ + { + label: 'Print', + icon: 'icon-local_printshop', + command: print + } +]); + +if(languages.length > 0){ + items.value.unshift({ + label: 'Change language', + icon: 'icon-language', + command: () => languageDialogState.value = true + }) +} + diff --git a/packages/web-forms/src/components/FormLanguageDialog.vue b/packages/web-forms/src/components/FormLanguageDialog.vue new file mode 100644 index 000000000..6f1c417db --- /dev/null +++ b/packages/web-forms/src/components/FormLanguageDialog.vue @@ -0,0 +1,102 @@ + + + + + + + \ 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) => { }; +