Skip to content

Commit

Permalink
fixes #90: minor design tweaks (#95)
Browse files Browse the repository at this point in the history 
* wire print button to default print functionality

* remove draft button
get rid of submission data from submit event

* align left border with the caret

removed outline for repeat, instead show icon
repeat instance display instance number with the label
  • Loading branch information
@sadiqkhoja
sadiqkhoja authored May 1, 2024
1 parent 6fa43d8 commit 22b9054
Show file tree
Hide file tree
Showing 14 changed files with 105 additions and 77 deletions.
7 changes: 6 additions & 1 deletion eslint.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import vue3Essential from 'eslint-plugin-vue/lib/configs/vue3-essential.js';
import vue3Recommended from 'eslint-plugin-vue/lib/configs/vue3-recommended.js';
import vue3StronglyRecommended from 'eslint-plugin-vue/lib/configs/vue3-strongly-recommended.js';
import vueProcessor from 'eslint-plugin-vue/lib/processor.js';
import globals from 'globals';
import { builtinModules } from 'node:module';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
Expand Down Expand Up @@ -373,7 +374,11 @@ export default tseslint.config(

{
files: [vuePackageGlob],

languageOptions: {
globals: {
...globals.browser,
},
},
/**
* These are the rules applied by the Vue project template. We can of course
* refine from there to suit our needs.
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.22.0",
"globals": "15.0.0",
"nan": "^2.17.0",
"node-gyp": "^9.4.0",
"npm-run-all2": "^6.1.2",
Expand Down
24 changes: 24 additions & 0 deletions packages/ui-vue/icomoon.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -464,6 +464,30 @@
"setIdx": 0,
"setId": 4,
"iconIdx": 903
},
{
"icon": {
"paths": [
"M726 726v-172h84v256h-512v128l-170-170 170-170v128h428zM298 298v172h-84v-256h512v-128l170 170-170 170v-128h-428z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": ["repeat"],
"grid": 24
},
"attrs": [],
"properties": {
"ligatures": "repeat",
"id": 35,
"order": 297,
"prevSize": 48,
"code": 59668,
"name": "repeat"
},
"setIdx": 0,
"setId": 4,
"iconIdx": 35
}
],
"height": 1024,
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-vue/src/OdkWebFormDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ demoForms.forEach(f => {
const selectForm = ref<[string, string] | null>(null);
const handleSubmit = (data: string) => {
alert(`Submit button was pressed. Data: ${data}`); // eslint-disable-line no-undef -- alert is defined globally
const handleSubmit = () => {
alert(`Submit button was pressed`);
}
</script>
Expand Down
3 changes: 3 additions & 0 deletions packages/ui-vue/src/assets/css/icomoon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,6 @@
.icon-calendar_today:before {
content: '\e913';
}
.icon-repeat:before {
content: '\e914';
}
1 change: 1 addition & 0 deletions packages/ui-vue/src/assets/fonts/icomoon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/ui-vue/src/assets/fonts/icomoon.ttf
View file
Binary file not shown.
Binary file modified packages/ui-vue/src/assets/fonts/icomoon.woff
View file
Binary file not shown.
22 changes: 18 additions & 4 deletions packages/ui-vue/src/components/FormPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,22 @@ import { type MenuItem } from 'primevue/menuitem';
import Panel from 'primevue/panel';
import { computed, ref } from 'vue';
const props = withDefaults(defineProps<{title?: string, menuItems?: MenuItem[], noUi?: boolean, class?: string}>(), {
interface PanelProps {
title?: string;
menuItems?: MenuItem[];
noUi?: boolean;
class?: string;
labelIcon?: string;
labelNumber?: number;
}
const props = withDefaults(defineProps<PanelProps>(), {
title: undefined,
menuItems: undefined,
noUi: false,
class: undefined
class: undefined,
labelIcon: undefined,
labelNumber: undefined
});
const panelClass = computed(() => [
Expand All @@ -35,8 +46,11 @@ const toggleMenu = (event: Event) => {
<Panel v-if="!noUi" :class="panelClass" :toggleable="true" :collapsed="panelState">
<template #header>
<div class="panel-title" role="button" @click="toggle">
<h2>
<span :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" /> {{ title }}
<h2>
<span :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" />
<span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
<span>{{ title }}</span>
<span v-if="labelIcon" class="ml-2" :class="labelIcon" />
</h2>
</div>
</template>
Expand Down
9 changes: 4 additions & 5 deletions packages/ui-vue/src/components/OdkWebForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@ initializeForm(props.formXml, {
}).catch(() => {}); // eslint-disable-line -- noop
const handleSubmit = () => {
// TODO/sk: it is not yet decided where engine will return submission data
// following is just a temporary line for personal satisfaction
emit('submit', (odkForm as any).value.contextNode.outerHTML); // eslint-disable-line
emit('submit');
}
const print = () => window.print();
</script>

<template>
<div v-if="odkForm" class="odk-form">
<div class="form-wrapper">
<div class="odk-menu-bar flex justify-content-end flex-wrap gap-3">
<Button severity="secondary" rounded icon="icon-local_printshop" />
<Button severity="secondary" rounded icon="icon-local_printshop" @click="print" />
<FormLanguageMenu :form="odkForm" />
</div>

Expand All @@ -53,7 +53,6 @@ const handleSubmit = () => {
</Card>

<div class="footer flex justify-content-end flex-wrap gap-3">
<Button label="Save as draft" severity="secondary" rounded raised />
<!-- maybe current state is in odkForm.state.something -->
<Button label="Send" rounded raised @click="handleSubmit()" />
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-vue/src/components/RepeatInstance.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ const label = computed(() => {
// Use RepeatRangeNode label if it's there
// TODO/sk: use state.label.asString
if(props.instance.parent.definition.bodyElement.label?.children[0]?.stringValue){
return `${props.instance.parent.definition.bodyElement.label?.children[0].stringValue} ${props.instanceIndex + 1}`;
return `${props.instance.parent.definition.bodyElement.label?.children[0].stringValue}`;
}
return `Repeats ${props.instanceIndex+1}`;
return `Repeat Item`;
});
const children = computed(() => {
Expand All @@ -52,7 +52,7 @@ const menuItems: MenuItem[] = [
</script>
<template>
<FormPanel :title="label" :menu-items="menuItems" class="repeat">
<FormPanel :title="label" :menu-items="menuItems" class="repeat" :label-number="instanceIndex + 1">
<QuestionList :nodes="children" />
</FormPanel>
</template>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-vue/src/components/RepeatRange.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ const label = computed(() => props.node.currentState.label?.asString);
</script>
<template>
<FormPanel :title="label" :no-ui="!label" class="repeat">
<FormPanel :title="label" :no-ui="!label" class="repeat" label-icon="icon-repeat">
<RepeatInstance v-for="(instance, index) in node.currentState.children" :key="index" :instance="instance" :instance-index="index" @remove="node.removeInstances(index)" />

<div class="flex justify-content-start flex-wrap">
<Button label="Add" rounded outlined class="w-2" @click="node.addInstances()" />
<Button label="Add" rounded outlined class="w-2 btn-add" @click="node.addInstances()" />
</div>
</FormPanel>
</template>
Expand Down
96 changes: 36 additions & 60 deletions packages/ui-vue/src/themes/2024-light/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,76 +70,31 @@ $primary50: #d8ecf5;
box-shadow: 0px 1px 3px 1px #00000026;
}

// first level
.form-questions > div > .p-panel {
box-shadow: none;

&.repeat {
border-radius: 10px;
border: 2px solid var(--gray-200);
margin-top: 20px;
}

&.group {
border-left: 2px solid var(--gray-200);
border-radius: 0;
padding-top: 0;
padding-bottom: 0;

.p-panel-header {
padding-top: 0;
}

.p-panel-content {
padding-bottom: 0;
}
}

&.with-context-menu {
padding-top: 5px;
padding-bottom: 5px;
}

// child groups/repeats
.p-panel {
border-radius: 0;
box-shadow: none;
border-left: 2px solid var(--gray-200);
padding: 0 0 0 1rem;
margin-top: 1rem;

> .p-panel-header {
padding: 0;
align-items: start;

.btn-context {
margin-top: -10px;

.p-button-icon {
font-size: 1.5rem;
}
}
}

> .p-toggleable-content > .p-panel-content {
padding: 1rem 0 0 0.5rem;
}
}
.btn-add {
margin-left: 35px;
}

// for all panels
.p-panel {
background: var(--surface-0);
padding: 1rem;
box-shadow: none;

.p-panel {
margin-left: -10px;
}

.p-panel-header {
background: transparent;
display: flex;
padding: 0;
height: 40px;
align-items: start;
}

.p-panel-content:last-child {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
.p-panel-content {
border-left: 2px solid var(--gray-200);
margin-left: 10px;
border-radius: 0;
padding: 0 0 0 1.5rem;
}

.p-panel-toggler {
Expand All @@ -151,14 +106,34 @@ $primary50: #d8ecf5;

h2 {
margin: 0;
display: flex;
}
}

.btn-context {
margin-top: -10px;

.p-button-icon {
font-size: 1.5rem;
}
}

.btn-add {
margin-left: 25px;
}

.label-number {
display: inline-block;
margin: 2px 5px 0 17px;
padding-top: 4px;
width: 20px;
height: 20px;
font-weight: 400;
border-radius: 30px;
background-color: var(--gray-200);
font-size: 10px;
text-align: center;
}
}

h1 {
Expand Down Expand Up @@ -243,6 +218,7 @@ $primary50: #d8ecf5;

label {
margin-left: 0.5rem;
margin-bottom: 0;
cursor: pointer;
}

Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3571,6 +3571,11 @@ glob@^7.1.3, glob@^7.1.4:
once "^1.3.0"
path-is-absolute "^1.0.0"

[email protected]:
version "15.0.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-15.0.0.tgz#9c6cd4e54327ceaab563b4c17ee5e9d181c03fd2"
integrity sha512-m/C/yR4mjO6pXDTm9/R/SpYTAIyaUB4EOzcaaMEl7mds7Mshct9GfejiJNQGjHHbdMPey13Kpu4TMbYi9ex1pw==

globals@^11.1.0:
version "11.12.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
Expand Down

0 comments on commit 22b9054

Please sign in to comment.