diff --git a/v3/src/assets/icons/attribute-icon.svg b/v3/src/assets/icons/attribute-icon.svg new file mode 100644 index 0000000000..0cf49c3455 --- /dev/null +++ b/v3/src/assets/icons/attribute-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/v3/src/components/case-table/attribute-menu/attribute-menu.scss b/v3/src/components/case-table/attribute-menu/attribute-menu.scss new file mode 100644 index 0000000000..075167de06 --- /dev/null +++ b/v3/src/components/case-table/attribute-menu/attribute-menu.scss @@ -0,0 +1,27 @@ +// Edit Attribute Modal Styles +.edit-attribute-form-row { + display: flex !important; + flex-direction: row; + align-items: center; + justify-content: space-between; + + input, .chakra-select__wrapper { + margin-left: 10px; + } + input { + padding: 0 8px; + } +} +.edit-attribute-form-row.editable { + justify-content: flex-start; + .chakra-radio-group { + margin-left: 10px; + } +} + +// Formula Editor Styles +.formula-form-control { + input { + max-width: 270px; + } +} diff --git a/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx b/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx index de1adde7a7..23122de3af 100644 --- a/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx +++ b/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx @@ -7,6 +7,9 @@ import { updateAttributesNotification } from "../../../models/data/data-set-noti import { uniqueName } from "../../../utilities/js-utils" import { t } from "../../../utilities/translation/translate" import { CodapModal } from "../../codap-modal" +import AttributeIcon from "../../../assets/icons/attribute-icon.svg" + +import "./attribute-menu.scss" // for use in menus of attribute types const selectableAttributeTypes = ["none", ...attributeTypes] as const @@ -78,90 +81,105 @@ export const EditAttributePropertiesModal = ({ attributeId, isOpen, onClose }: I onClose() } + const handleKeyDown = (e: React.KeyboardEvent) => { + e.stopPropagation() + if (e.key === "Escape") { + closeModal() + } + if (e.key === "Enter") { + applyChanges() + } + } + const buttons = [ { label: t("DG.AttrFormView.cancelBtnTitle"), tooltip: t("DG.AttrFormView.cancelBtnTooltip"), onClick: closeModal }, - { label: t("DG.AttrFormView.applyBtnTitle"), onClick: applyChanges } + { label: t("DG.AttrFormView.applyBtnTitle"), onClick: applyChanges, default: true } ] return ( - + + + {t("DG.TableController.attributeEditor.title")} - - {t("DG.CaseTable.attributeEditor.name")} - e.target.select()} - onChange={event => setAttributeName(event.target.value)} data-testid="attr-name-input" - onKeyDown={(e) => e.stopPropagation()} - /> - - {t("DG.CaseTable.attributeEditor.description")} - e.target.select()} onKeyDown={(e) => e.stopPropagation()} - onChange={event => setDescription(event.target.value)} data-testid="attr-description-input" - /> - - {t("DG.CaseTable.attributeEditor.type")} - setUserType(e.target.value as AttributeType)}> - {selectableAttributeTypes.map(aType => { - return ( - {t(`DG.CaseTable.attribute.type.${aType}`)} - ) - })} - - - {t("DG.CaseTable.attributeEditor.unit")} - e.target.select()} - onChange={event => setUnits(event.target.value)} data-testid="attr-unit-input" - onKeyDown={(e) => e.stopPropagation()} - /> - - {t("DG.CaseTable.attributeEditor.precision")} - setPrecision(e.target.value)}> - - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - - - {t("DG.CaseTable.attributeEditor.editable")} - setEditable(value as YesNoValue)} - onKeyDown={(e) => e.stopPropagation()}> - - {t("V3.general.yes")} - {t("V3.general.no")} - - - - + + + {t("DG.CaseTable.attributeEditor.name")} + e.target.select()} + onChange={event => setAttributeName(event.target.value)} data-testid="attr-name-input" + onKeyDown={handleKeyDown} + /> + + {t("DG.CaseTable.attributeEditor.description")} + e.target.select()} onKeyDown={handleKeyDown} + onChange={event => setDescription(event.target.value)} data-testid="attr-description-input" + /> + + {t("DG.CaseTable.attributeEditor.type")} + setUserType(e.target.value as AttributeType)}> + {selectableAttributeTypes.map(aType => { + return ( + {t(`DG.CaseTable.attribute.type.${aType}`)} + ) + })} + + + {t("DG.CaseTable.attributeEditor.unit")} + e.target.select()} + onChange={event => setUnits(event.target.value)} data-testid="attr-unit-input" + onKeyDown={handleKeyDown} + /> + + {t("DG.CaseTable.attributeEditor.precision")} + setPrecision(e.target.value)}> + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + + + {t("DG.CaseTable.attributeEditor.editable")} + setEditable(value as YesNoValue)} + onKeyDown={handleKeyDown}> + + {t("V3.general.yes")} + {t("V3.general.no")} + + + + {buttons.map((b: any, i)=>{ - const key = `${i}-${b.className}` + const key = `${i}-${b.label}` return ( - + {b.label} diff --git a/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx b/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx index 04cf4c610f..c8fe97ceda 100644 --- a/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx +++ b/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx @@ -9,6 +9,8 @@ import { updateAttributesNotification, updateCasesNotification } from "../../../ import { t } from "../../../utilities/translation/translate" import { CodapModal } from "../../codap-modal" +import "./attribute-menu.scss" + interface IProps { attributeId: string isOpen: boolean @@ -53,14 +55,16 @@ export const EditFormulaModal = observer(function EditFormulaModal({ attributeId onClick: closeModal }, { label: t("DG.AttrFormView.applyBtnTitle"), - onClick: applyFormula + onClick: applyFormula, + default: true }] return ( @@ -68,7 +72,7 @@ export const EditFormulaModal = observer(function EditFormulaModal({ attributeId - + {t("DG.AttrFormView.attrNamePrompt")} { - buttons.map((b, idx) => ( - - - {b.label} - - - )) + buttons.map((b, idx) => { + const key = `${idx}-${b.label}` + return ( + + + {b.label} + + + ) + }) } diff --git a/v3/src/components/codap-modal.scss b/v3/src/components/codap-modal.scss index 3854e00931..48cc48c06d 100644 --- a/v3/src/components/codap-modal.scss +++ b/v3/src/components/codap-modal.scss @@ -10,6 +10,7 @@ $header-height: 30px; flex-direction: row; align-items: center; box-shadow: none; + background-color: #f0f0f0; .codap-modal-icon-container { width: 30px; @@ -17,6 +18,9 @@ $header-height: 30px; background-color: $teal-dark; top: 0; left: 0; + display: flex; + align-items: center; + justify-content: center; } .codap-header-title { @@ -41,7 +45,22 @@ $header-height: 30px; } } + .chakra-modal__body { + background-color: #f0f0f0; + padding: 0 8px; + box-sizing: border-box; + width: inherit; + } + + .chakra-modal__footer { + background-color: #f0f0f0; + } + .chakra-form__label { - align-items: center !important; + align-items: center; + margin-inline-end: 0; + } + input, textarea, select, .chakra-radio__control { + background-color: white; } } diff --git a/v3/src/utilities/translation/lang/en-US.json5 b/v3/src/utilities/translation/lang/en-US.json5 index 15d857d702..dccd85d66a 100644 --- a/v3/src/utilities/translation/lang/en-US.json5 +++ b/v3/src/utilities/translation/lang/en-US.json5 @@ -767,16 +767,16 @@ "DG.CaseTable.attribute.type.qualitative": "qualitative", "DG.CaseTable.attribute.type.boundary": "boundary", "DG.CaseTable.attribute.type.checkbox": "checkbox", - "DG.CaseTable.attributeEditor.name": "name", - "DG.CaseTable.attributeEditor.description": "description", - "DG.CaseTable.attributeEditor.type": "type", - "DG.CaseTable.attributeEditor.unit": "unit", - "DG.CaseTable.attributeEditor.precision": "precision", + "DG.CaseTable.attributeEditor.name": "Name", + "DG.CaseTable.attributeEditor.description": "Description", + "DG.CaseTable.attributeEditor.type": "Type", + "DG.CaseTable.attributeEditor.unit": "Unit", + "DG.CaseTable.attributeEditor.precision": "Precision", "DG.CaseTable.attributeEditor.datePrecisionOptions": "year month day hour minute second millisecond", - "DG.CaseTable.attributeEditor.editable": "editable", + "DG.CaseTable.attributeEditor.editable": "Editable", "DG.CaseTable.insertCasesDialog.title": "Insert Cases", "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# cases to insert:", - "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "location:", + "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Location:", "DG.CaseTable.insertCasesDialog.beforeAfter.before": "before", "DG.CaseTable.insertCasesDialog.beforeAfter.after": "after", "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Insert Cases", diff --git a/v3/src/utilities/translation/lang/es.json b/v3/src/utilities/translation/lang/es.json index 9377bb7291..4f355f0e00 100644 --- a/v3/src/utilities/translation/lang/es.json +++ b/v3/src/utilities/translation/lang/es.json @@ -460,15 +460,15 @@ "DG.CaseTable.attribute.type.date": "fecha", "DG.CaseTable.attribute.type.qualitative": "cualitativo", "DG.CaseTable.attribute.type.boundary": "límite", - "DG.CaseTable.attributeEditor.name": "nombre", - "DG.CaseTable.attributeEditor.description": "descripción", - "DG.CaseTable.attributeEditor.type": "tipo", - "DG.CaseTable.attributeEditor.unit": "unidad", - "DG.CaseTable.attributeEditor.precision": "precisión", - "DG.CaseTable.attributeEditor.editable": "editable", + "DG.CaseTable.attributeEditor.name": "Nombre", + "DG.CaseTable.attributeEditor.description": "Descripción", + "DG.CaseTable.attributeEditor.type": "Tipo", + "DG.CaseTable.attributeEditor.unit": "Unidad", + "DG.CaseTable.attributeEditor.precision": "Precisión", + "DG.CaseTable.attributeEditor.editable": "Editable", "DG.CaseTable.insertCasesDialog.title": "Insertar Casos", "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# de casos a insertar:", - "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "ubicación:", + "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Ubicación:", "DG.CaseTable.insertCasesDialog.beforeAfter.before": "antes", "DG.CaseTable.insertCasesDialog.beforeAfter.after": "después", "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Insertar Casos", diff --git a/v3/src/utilities/translation/lang/nb.json b/v3/src/utilities/translation/lang/nb.json index 9029afe7a3..e30b5daaf9 100644 --- a/v3/src/utilities/translation/lang/nb.json +++ b/v3/src/utilities/translation/lang/nb.json @@ -453,15 +453,15 @@ "DG.CaseTable.attribute.type.date": "dato", "DG.CaseTable.attribute.type.qualitative": "kvalitativ", "DG.CaseTable.attribute.type.boundary": "grense", - "DG.CaseTable.attributeEditor.name": "navn", - "DG.CaseTable.attributeEditor.description": "beskrivelse", - "DG.CaseTable.attributeEditor.type": "type", - "DG.CaseTable.attributeEditor.unit": "enhet", - "DG.CaseTable.attributeEditor.precision": "presisjon", - "DG.CaseTable.attributeEditor.editable": "redigerbar", + "DG.CaseTable.attributeEditor.name": "Navn", + "DG.CaseTable.attributeEditor.description": "Beskrivelse", + "DG.CaseTable.attributeEditor.type": "Type", + "DG.CaseTable.attributeEditor.unit": "Enhet", + "DG.CaseTable.attributeEditor.precision": "Presisjon", + "DG.CaseTable.attributeEditor.editable": "Redigerbar", "DG.CaseTable.insertCasesDialog.title": "Sett inn observasjoner", "DG.CaseTable.insertCasesDialog.numCasesPrompt": "#observasjoner som settes inn:", - "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "plassering:", + "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Plassering:", "DG.CaseTable.insertCasesDialog.beforeAfter.before": "før", "DG.CaseTable.insertCasesDialog.beforeAfter.after": "etter", "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Sett inn Observasjoner", @@ -1067,4 +1067,4 @@ "DG.plugin.Transformers.title": "Transformers", "DG.plugin.Transformers.description": "Transform datasets with a collection of powerful tools.", "DG.plugin.Sampler.top-bar.pause": "PAUSE" -} \ No newline at end of file +} diff --git a/v3/src/utilities/translation/lang/nn.json b/v3/src/utilities/translation/lang/nn.json index 0fb61cebd0..1e482b3b6a 100644 --- a/v3/src/utilities/translation/lang/nn.json +++ b/v3/src/utilities/translation/lang/nn.json @@ -453,15 +453,15 @@ "DG.CaseTable.attribute.type.date": "dato", "DG.CaseTable.attribute.type.qualitative": "kvalitativ", "DG.CaseTable.attribute.type.boundary": "grense", - "DG.CaseTable.attributeEditor.name": "navn", - "DG.CaseTable.attributeEditor.description": "skildring", - "DG.CaseTable.attributeEditor.type": "type", - "DG.CaseTable.attributeEditor.unit": "eining", - "DG.CaseTable.attributeEditor.precision": "presisjon", - "DG.CaseTable.attributeEditor.editable": "redigerbar", + "DG.CaseTable.attributeEditor.name": "Navn", + "DG.CaseTable.attributeEditor.description": "Skildring", + "DG.CaseTable.attributeEditor.type": "Type", + "DG.CaseTable.attributeEditor.unit": "Eining", + "DG.CaseTable.attributeEditor.precision": "Presisjon", + "DG.CaseTable.attributeEditor.editable": "Redigerbar", "DG.CaseTable.insertCasesDialog.title": "Sett inn observasjonar", "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# observasjonar å setja inn", - "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "plassering:", + "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Plassering:", "DG.CaseTable.insertCasesDialog.beforeAfter.before": "før", "DG.CaseTable.insertCasesDialog.beforeAfter.after": "etter", "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Sett inn observasjonar", @@ -1067,4 +1067,4 @@ "DG.plugin.Transformers.title": "Transformers", "DG.plugin.Transformers.description": "Transform datasets with a collection of powerful tools.", "DG.plugin.Sampler.top-bar.pause": "PAUSE" -} \ No newline at end of file +} diff --git a/v3/src/utilities/translation/lang/pt-BR.json b/v3/src/utilities/translation/lang/pt-BR.json index d8565c39a5..63ce07ce36 100644 --- a/v3/src/utilities/translation/lang/pt-BR.json +++ b/v3/src/utilities/translation/lang/pt-BR.json @@ -453,15 +453,15 @@ "DG.CaseTable.attribute.type.date": "data", "DG.CaseTable.attribute.type.qualitative": "qualitativa", "DG.CaseTable.attribute.type.boundary": "limitada", - "DG.CaseTable.attributeEditor.name": "nome", - "DG.CaseTable.attributeEditor.description": "descrição", - "DG.CaseTable.attributeEditor.type": "tipo", - "DG.CaseTable.attributeEditor.unit": "unidade", - "DG.CaseTable.attributeEditor.precision": "precisão", - "DG.CaseTable.attributeEditor.editable": "editável", + "DG.CaseTable.attributeEditor.name": "Nome", + "DG.CaseTable.attributeEditor.description": "Descrição", + "DG.CaseTable.attributeEditor.type": "Tipo", + "DG.CaseTable.attributeEditor.unit": "Unidade", + "DG.CaseTable.attributeEditor.precision": "Precisão", + "DG.CaseTable.attributeEditor.editable": "Editável", "DG.CaseTable.insertCasesDialog.title": "Inserir Dados", "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# dados para inserir:", - "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "localização:", + "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Localização:", "DG.CaseTable.insertCasesDialog.beforeAfter.before": "antes", "DG.CaseTable.insertCasesDialog.beforeAfter.after": "depois", "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Inserir Dados", @@ -1067,4 +1067,4 @@ "DG.plugin.Transformers.title": "Transformador", "DG.plugin.Transformers.description": "Transforme conjuntos de dados com ferramentas poderosas.", "DG.plugin.Sampler.top-bar.pause": "PAUSAR" -} \ No newline at end of file +} diff --git a/v3/src/utilities/translation/lang/tr.json b/v3/src/utilities/translation/lang/tr.json index 8e7275c94d..d94b828ffd 100644 --- a/v3/src/utilities/translation/lang/tr.json +++ b/v3/src/utilities/translation/lang/tr.json @@ -453,15 +453,15 @@ "DG.CaseTable.attribute.type.date": "tarih", "DG.CaseTable.attribute.type.qualitative": "nitel", "DG.CaseTable.attribute.type.boundary": "sınır", - "DG.CaseTable.attributeEditor.name": "isim", - "DG.CaseTable.attributeEditor.description": "açıklama", - "DG.CaseTable.attributeEditor.type": "tür", - "DG.CaseTable.attributeEditor.unit": "birim", - "DG.CaseTable.attributeEditor.precision": "kesinlik", - "DG.CaseTable.attributeEditor.editable": "düzenlenebilir", + "DG.CaseTable.attributeEditor.name": "Isim", + "DG.CaseTable.attributeEditor.description": "Açıklama", + "DG.CaseTable.attributeEditor.type": "Tür", + "DG.CaseTable.attributeEditor.unit": "Birim", + "DG.CaseTable.attributeEditor.precision": "Kesinlik", + "DG.CaseTable.attributeEditor.editable": "Düzenlenebilir", "DG.CaseTable.insertCasesDialog.title": "Durum Ekle", "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# tane durum ekle:", - "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "yer:", + "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Yer:", "DG.CaseTable.insertCasesDialog.beforeAfter.before": "önce", "DG.CaseTable.insertCasesDialog.beforeAfter.after": "sonra", "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Durum Ekle", @@ -1067,4 +1067,4 @@ "DG.plugin.Transformers.title": "Transformers", "DG.plugin.Transformers.description": "Transform datasets with a collection of powerful tools.", "DG.plugin.Sampler.top-bar.pause": "PAUSE" -} \ No newline at end of file +}