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")} -