From 2d0e81dd92bae2715eec1855e813edc4f8b0ddda Mon Sep 17 00:00:00 2001 From: Sadiq Khoja Date: Fri, 31 May 2024 10:23:13 -0400 Subject: [PATCH] Move styles from theme.scss to SFCs (#113) --- .../web-forms/src/components/ControlLabel.vue | 16 +- .../web-forms/src/components/FormHeader.vue | 18 ++ .../src/components/FormLanguageMenu.vue | 23 ++ .../web-forms/src/components/FormPanel.vue | 62 ++++- .../web-forms/src/components/OdkWebForm.vue | 45 +++- .../web-forms/src/components/RepeatRange.vue | 17 ++ .../src/components/controls/InputText.vue | 15 +- .../src/components/controls/SelectControl.vue | 21 ++ .../src/themes/2024-light/theme.scss | 216 ------------------ .../tests/components/ControlLabel.test.ts | 4 +- 10 files changed, 214 insertions(+), 223 deletions(-) diff --git a/packages/web-forms/src/components/ControlLabel.vue b/packages/web-forms/src/components/ControlLabel.vue index 8b619938..a09983c9 100644 --- a/packages/web-forms/src/components/ControlLabel.vue +++ b/packages/web-forms/src/components/ControlLabel.vue @@ -4,6 +4,20 @@ const props = defineProps<{question: AnyLeafNode}>(); + \ No newline at end of file diff --git a/packages/web-forms/src/components/FormHeader.vue b/packages/web-forms/src/components/FormHeader.vue index ada76310..3ca0d624 100644 --- a/packages/web-forms/src/components/FormHeader.vue +++ b/packages/web-forms/src/components/FormHeader.vue @@ -11,3 +11,21 @@ defineProps<{title: string}>(); + diff --git a/packages/web-forms/src/components/FormLanguageMenu.vue b/packages/web-forms/src/components/FormLanguageMenu.vue index 11812d48..f0099ae0 100644 --- a/packages/web-forms/src/components/FormLanguageMenu.vue +++ b/packages/web-forms/src/components/FormLanguageMenu.vue @@ -37,3 +37,26 @@ const handleLanguageChange = (event: LanguageDropdownChangeEvent) => { + \ No newline at end of file diff --git a/packages/web-forms/src/components/FormPanel.vue b/packages/web-forms/src/components/FormPanel.vue index d125bdbf..78c4764f 100644 --- a/packages/web-forms/src/components/FormPanel.vue +++ b/packages/web-forms/src/components/FormPanel.vue @@ -24,7 +24,6 @@ const props = withDefaults(defineProps(), { }); const panelClass = computed(() => [ - 'with-title', props.menuItems && props.menuItems.length > 0 ? 'with-context-menu' : 'no-context-menu', props.class ]); @@ -69,3 +68,64 @@ const toggleMenu = (event: Event) => { + \ 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 05d312c3..edee496e 100644 --- a/packages/web-forms/src/components/OdkWebForm.vue +++ b/packages/web-forms/src/components/OdkWebForm.vue @@ -35,7 +35,7 @@ const print = () => window.print();
-
@@ -60,3 +60,46 @@ const print = () => window.print();
+ \ No newline at end of file diff --git a/packages/web-forms/src/components/RepeatRange.vue b/packages/web-forms/src/components/RepeatRange.vue index 5dc39151..73a539ce 100644 --- a/packages/web-forms/src/components/RepeatRange.vue +++ b/packages/web-forms/src/components/RepeatRange.vue @@ -20,3 +20,20 @@ const label = computed(() => props.node.currentState.label?.asString); + \ No newline at end of file diff --git a/packages/web-forms/src/components/controls/InputText.vue b/packages/web-forms/src/components/controls/InputText.vue index c2ea97ee..59014c98 100644 --- a/packages/web-forms/src/components/controls/InputText.vue +++ b/packages/web-forms/src/components/controls/InputText.vue @@ -16,11 +16,22 @@ const setValue = (value = '') => { + \ No newline at end of file diff --git a/packages/web-forms/src/components/controls/SelectControl.vue b/packages/web-forms/src/components/controls/SelectControl.vue index 9a60ce1b..6d0cb224 100644 --- a/packages/web-forms/src/components/controls/SelectControl.vue +++ b/packages/web-forms/src/components/controls/SelectControl.vue @@ -71,3 +71,24 @@ const value = computed(() => {
+ + diff --git a/packages/web-forms/src/themes/2024-light/theme.scss b/packages/web-forms/src/themes/2024-light/theme.scss index a707add0..ebe4d260 100644 --- a/packages/web-forms/src/themes/2024-light/theme.scss +++ b/packages/web-forms/src/themes/2024-light/theme.scss @@ -13,219 +13,3 @@ $primary50: #d8ecf5; :root { --primary-50: #{$primary50}; } - -.odk-form { - width: 100%; - - .form-wrapper { - max-width: 800px; - margin: auto; - padding-top: 10px; - padding-bottom: 20px; - - label { - font-weight: 400; - - span { - // it is required asterisk - be more specific - color: var(--red-500); // TODO maybe theme should export color of danger / error - } - } - - .footer { - margin-top: 20px; - - button { - min-width: 160px; - } - } - - .p-button.p-button-secondary { - &:enabled:focus, - &:enabled.p-focus { - background: var(--primary-100); - } - - &:enabled:hover { - background: var(--primary-100); - } - - &:enabled:active { - background: $primary50; - } - } - - .p-button.p-button-outlined { - box-shadow: inset 0 0 0 1px #cbcacc; - // border: 2px solid #CBCACC; - - &:hover { - background: var(--primary-100); - } - } - - .p-card { - border-radius: 10px; - border-top: 15px solid $primary50; - box-shadow: 0px 1px 3px 1px #00000026; - } - - .btn-add { - margin-left: 35px; - } - - // for all panels - .p-panel { - background: var(--surface-0); - box-shadow: none; - - .p-panel { - margin-left: -10px; - } - - .p-panel-header { - display: flex; - padding: 0; - height: 40px; - align-items: start; - } - - .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 { - display: none; - } - - .panel-title { - cursor: pointer; - - 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 { - font-size: 1.5rem; - font-weight: 500; - } - - h2 { - font-size: 1.2rem; - font-weight: 500; - } - - .p-dropdown.rounded { - border-radius: 30px; - border: none; - width: 160px; - color: #424242; - - &.p-focus { - box-shadow: inset 0 0 0 1px var(--primary-500); - } - - .p-dropdown-label { - padding: 5px 16px; - - span { - vertical-align: middle; - } - } - - &.with-icon { - [class^='icon-'], - [class*=' icon-'] { - // font-size: 22px; - margin-right: 10px; - } - } - } - - .form-title { - border-top: none; - margin-top: 20px; - - .p-card-content { - padding: 0 1rem; - - h1 { - margin: 10px 0; - } - } - } - - .questions-card { - border-top: none; - margin-top: 20px; - - .p-card-content { - padding: 1rem; - } - } - - .odk-menu-bar { - .p-button.p-button-icon-only.p-button-rounded { - height: 2rem; - width: 2rem; - } - } - - input.p-inputtext { - &:read-only { - cursor: not-allowed; - } - - &.p-variant-filled:enabled:focus { - background-color: var(--surface-100); - } - } - .select1, - .selectN { - display: flex; - align-items: center; - - label { - margin-left: 0.5rem; - margin-bottom: 0; - cursor: pointer; - } - - &.disabled, - &.disabled label { - cursor: not-allowed; - } - } - } -} diff --git a/packages/web-forms/tests/components/ControlLabel.test.ts b/packages/web-forms/tests/components/ControlLabel.test.ts index 0090fc00..cac00c01 100644 --- a/packages/web-forms/tests/components/ControlLabel.test.ts +++ b/packages/web-forms/tests/components/ControlLabel.test.ts @@ -22,7 +22,7 @@ describe('ControlLabel', () => { }, }); - const requireSpan = component.find('label span'); + const requireSpan = component.find('span.required'); expect(requireSpan.exists()).toBe(true); expect(requireSpan.text()).toBe('*'); @@ -37,7 +37,7 @@ describe('ControlLabel', () => { }, }); - const requireSpan = component.find('label span'); + const requireSpan = component.find('span.required'); expect(requireSpan.exists()).toBe(false);