From defae17bef10c7b2f375092b1cded49ae0ba94ed Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Mon, 9 Oct 2023 17:49:57 -0700 Subject: [PATCH 1/5] initial commit --- libs/blocks/caas-config/caas-config.css | 2 +- libs/ui/controls/MultiField.js | 55 ++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.css b/libs/blocks/caas-config/caas-config.css index d52fcd3d42..3d06ae17c6 100644 --- a/libs/blocks/caas-config/caas-config.css +++ b/libs/blocks/caas-config/caas-config.css @@ -50,7 +50,7 @@ dd.content .sort-options > .field { } .multifield.filtersCustom > .multifield-set:nth-child(2) { - margin-top: -30px; + margin-top: -16px; } .multifield .multifield > .multifield-set:not(:nth-child(2)) { diff --git a/libs/ui/controls/MultiField.js b/libs/ui/controls/MultiField.js index 43de16c267..64f9c15c58 100644 --- a/libs/ui/controls/MultiField.js +++ b/libs/ui/controls/MultiField.js @@ -5,8 +5,12 @@ import { getConfig, loadStyle } from '../../utils/utils.js'; const { miloLibs, codeRoot } = getConfig(); loadStyle(`${miloLibs || codeRoot}/ui/controls/multifield.css`); -const FieldSet = ({ fields, onDelete }) => html` +const FieldSet = ({ fields, onDelete, onMoveUp, onMoveDown }) => html`
+
+ + +
${fields}
@@ -75,6 +79,22 @@ const MultiField = ({ onChange(newVals); }; + const moveFieldUp = (index) => () => { + if (index === 0) return; + console.log('*** *** *** moveFieldUp', index); + const newVals = [...fieldValues]; + [newVals[index], newVals[index - 1]] = [newVals[index - 1], newVals[index]]; + onChange(newVals); + }; + + const moveFieldDown = (index) => () => { + if (index === fieldValues.length - 1) return; + console.log('*** *** *** moveFieldDown', index); + const newVals = [...fieldValues]; + [newVals[index], newVals[index + 1]] = [newVals[index + 1], newVals[index]]; + onChange(newVals); + }; + useEffect(() => { if (parentValues) { setFieldValues([...parentValues[parentIndex][name] ?? []]); @@ -95,6 +115,35 @@ const MultiField = ({ }, [fieldValues]); return html` +

${title}

@@ -104,7 +153,9 @@ const MultiField = ({ ${fieldSets.map( (fields, idx) => { fields.forEach((field) => (field.props.parentIndex = idx)); - return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} />`; + // return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} />`; + return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} + onMoveUp=${moveFieldUp(idx)} onMoveDown=${moveFieldDown(idx)} />`; }, )}
From 1630e4bc60dc390cd56bf5ab4350c4b927b1ae21 Mon Sep 17 00:00:00 2001 From: Carlos Miqueo Date: Thu, 2 Nov 2023 11:43:41 -0700 Subject: [PATCH 2/5] MWPW-134656: adds the ability to move multifield items up or down --- libs/blocks/caas-config/caas-config.css | 46 ++++++++++++++++++++++++- libs/ui/controls/MultiField.js | 35 ++----------------- libs/ui/controls/multifield.css | 4 +++ 3 files changed, 52 insertions(+), 33 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.css b/libs/blocks/caas-config/caas-config.css index 3d06ae17c6..7e760d3efe 100644 --- a/libs/blocks/caas-config/caas-config.css +++ b/libs/blocks/caas-config/caas-config.css @@ -97,6 +97,50 @@ dd.content .sort-options > .field { margin-bottom: 20px; } -.config-panel::-webkit-scrollbar { +.config-panel::-webkit-scrollbar { display: none; /* Safari and Chrome */ } + +/* Extends multifield */ +[class^="multifield filters"] .multifield-header h3 { + display: flex; justify-content: space-between; +} + +[class^="multifield filters"] .multifield-set { + position: relative; +} + +[class^="multifield filters"] .multifield-set .up-down { + display:flex; + font-weight: 300; + position: absolute; + top: 20px; + right: 10px; + flex-direction: column; +} + +[class^="multifield filtersCustomItems"] .multifield-set .up-down { + top: 10px; +} + +[class^="multifield"] + .multifield-header ~ .multifield-set .up-down .move-up { + display: none !important; +} + +[class^="multifield"] .multifield-set .up-down button{ + height: 17px !important; + margin: 0; + clip-path: none; + padding: 0 6px; + background-color: transparent !important; + color: #bbb !important; +} + +[class^="multifield"] .multifield-set .up-down button:hover{ + color: #fff !important; +} + +[class^="multifield"] .move-down { + transform: rotate(180deg); + display: inline-block; +} diff --git a/libs/ui/controls/MultiField.js b/libs/ui/controls/MultiField.js index 64f9c15c58..8ac7f3bd79 100644 --- a/libs/ui/controls/MultiField.js +++ b/libs/ui/controls/MultiField.js @@ -8,8 +8,8 @@ loadStyle(`${miloLibs || codeRoot}/ui/controls/multifield.css`); const FieldSet = ({ fields, onDelete, onMoveUp, onMoveDown }) => html`
- - + +
${fields}
@@ -115,35 +115,6 @@ const MultiField = ({ }, [fieldValues]); return html` -

${title}

@@ -154,7 +125,7 @@ const MultiField = ({ (fields, idx) => { fields.forEach((field) => (field.props.parentIndex = idx)); // return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} />`; - return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} + return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} onMoveUp=${moveFieldUp(idx)} onMoveDown=${moveFieldDown(idx)} />`; }, )} diff --git a/libs/ui/controls/multifield.css b/libs/ui/controls/multifield.css index b8571ab5c3..adca6dcd4d 100644 --- a/libs/ui/controls/multifield.css +++ b/libs/ui/controls/multifield.css @@ -61,3 +61,7 @@ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cdefs%3E%3Cstyle%3E .fill %7B fill: %23464646; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3ES DeleteOutline 18 N%3C/title%3E%3Crect id='Canvas' fill='%23ff13dc' opacity='0' width='18' height='18' /%3E%3Cpath class='fill' d='M13.7455,4l-1.154,12H4.4085L3.2545,4ZM11,1H6A1,1,0,0,0,5,2V3H1.25A.25.25,0,0,0,1,3.25v.5A.25.25,0,0,0,1.25,4h1L3.4565,16.55a.5.5,0,0,0,.5.45H13.046a.5.5,0,0,0,.5-.45L14.75,4h1A.25.25,0,0,0,16,3.75v-.5A.25.25,0,0,0,15.75,3H12V2A1,1,0,0,0,11,1ZM6,3V2h5V3Z' /%3E%3Cpath class='fill' d='M8.5,14.5A.5.5,0,0,1,8,14V6A.5.5,0,0,1,9,6v8A.5.5,0,0,1,8.5,14.5Z' /%3E%3Cpath class='fill' d='M10.467,14.5a.5.5,0,0,1-.46718-.5308L10,13.9665l.5355-7.9975a.50112.50112,0,1,1,1,.067L11,14.034a.5.5,0,0,1-.53176.46608Z' /%3E%3Cpath class='fill' d='M6.533,14.5a.5.5,0,0,0,.46718-.5308L7,13.9665,6.4625,5.969a.50112.50112,0,1,0-1,.067l.5355,8a.5.5,0,0,0,.53348.46411Z' /%3E%3C/svg%3E"); } + +.multifield-set .up-down { + display: none; +} From 192d38c3ce085e3d649d2f51bd0df3b20e337581 Mon Sep 17 00:00:00 2001 From: cmiqueo <64917520+cmiqueo@users.noreply.github.com> Date: Mon, 27 Nov 2023 18:10:01 -0800 Subject: [PATCH 3/5] Update MultiField.js: Remove console statements --- libs/ui/controls/MultiField.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/libs/ui/controls/MultiField.js b/libs/ui/controls/MultiField.js index 8ac7f3bd79..48b4e2d8cb 100644 --- a/libs/ui/controls/MultiField.js +++ b/libs/ui/controls/MultiField.js @@ -81,7 +81,6 @@ const MultiField = ({ const moveFieldUp = (index) => () => { if (index === 0) return; - console.log('*** *** *** moveFieldUp', index); const newVals = [...fieldValues]; [newVals[index], newVals[index - 1]] = [newVals[index - 1], newVals[index]]; onChange(newVals); @@ -89,7 +88,6 @@ const MultiField = ({ const moveFieldDown = (index) => () => { if (index === fieldValues.length - 1) return; - console.log('*** *** *** moveFieldDown', index); const newVals = [...fieldValues]; [newVals[index], newVals[index + 1]] = [newVals[index + 1], newVals[index]]; onChange(newVals); From e1dc8bc0e9309e9715d1315a8a7a72fa3e66302c Mon Sep 17 00:00:00 2001 From: cmiqueo <64917520+cmiqueo@users.noreply.github.com> Date: Mon, 27 Nov 2023 18:15:07 -0800 Subject: [PATCH 4/5] Update MultiField.js removes comment --- libs/ui/controls/MultiField.js | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/ui/controls/MultiField.js b/libs/ui/controls/MultiField.js index 48b4e2d8cb..08b1bf9328 100644 --- a/libs/ui/controls/MultiField.js +++ b/libs/ui/controls/MultiField.js @@ -122,7 +122,6 @@ const MultiField = ({ ${fieldSets.map( (fields, idx) => { fields.forEach((field) => (field.props.parentIndex = idx)); - // return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} />`; return html`<${FieldSet} key=${idx} fields=${fields} onDelete=${deleteFields(idx)} onMoveUp=${moveFieldUp(idx)} onMoveDown=${moveFieldDown(idx)} />`; }, From 4d4af6373f763b1afa0467b9e2211ad8521ba843 Mon Sep 17 00:00:00 2001 From: cmiqueo <64917520+cmiqueo@users.noreply.github.com> Date: Wed, 6 Dec 2023 13:22:32 -0800 Subject: [PATCH 5/5] Update caas-config.css: Implements PR review suggestions --- libs/blocks/caas-config/caas-config.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/blocks/caas-config/caas-config.css b/libs/blocks/caas-config/caas-config.css index 7e760d3efe..761ecea0b0 100644 --- a/libs/blocks/caas-config/caas-config.css +++ b/libs/blocks/caas-config/caas-config.css @@ -103,7 +103,8 @@ dd.content .sort-options > .field { /* Extends multifield */ [class^="multifield filters"] .multifield-header h3 { - display: flex; justify-content: space-between; + display: flex; + justify-content: space-between; } [class^="multifield filters"] .multifield-set { @@ -111,7 +112,7 @@ dd.content .sort-options > .field { } [class^="multifield filters"] .multifield-set .up-down { - display:flex; + display: flex; font-weight: 300; position: absolute; top: 20px;