[Enhancement] Improve Feature action panel style (#2099)

keplergl · Jan 27, 2023 · 630e8ed · 630e8ed
1 parent 20134f0
commit 630e8ed
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 12 deletions.
diff --git a/src/components/src/common/action-panel.tsx b/src/components/src/common/action-panel.tsx
@@ -51,7 +51,7 @@ const StyledItem = styled.div`
   align-items: center;
   font-size: 12px;
   line-height: 14px;
-  padding: 8px;
+  padding: 8px 16px 8px 8px;
   min-height: ${props => props.theme.actionPanelHeight}px;
   text-transform: capitalize;
   background-color: ${props => props.theme.dropdownListBgd};
@@ -73,9 +73,15 @@ const StyledItem = styled.div`
   }
 
   .label-icon {
-    margin-left: auto;
+    margin-left: 4px;
+    margin-bottom: -2px;
+  }
+  .icon {
+    width: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-
   .nested-group {
     max-width: 200px;
     overflow: hidden;

diff --git a/src/components/src/common/modal.tsx b/src/components/src/common/modal.tsx
@@ -123,7 +123,27 @@ const defaultConfirmButton = {
   children: 'modal.button.defaultConfirm'
 };
 
-export const ModalFooter = ({cancel, confirm, cancelButton, confirmButton}) => {
+type ModalButtonProps = {
+  style?: React.CSSProperties;
+  large?: boolean;
+  disabled?: boolean;
+  negative?: boolean;
+  children?: string;
+};
+
+type ModalFooterProps = {
+  cancel: () => void;
+  confirm: (data?: any) => void;
+  cancelButton?: ModalButtonProps;
+  confirmButton?: ModalButtonProps;
+};
+
+export const ModalFooter: React.FC<ModalFooterProps> = ({
+  cancel,
+  confirm,
+  cancelButton,
+  confirmButton
+}) => {
   const cancelButtonProps = {...defaultCancelButton, ...cancelButton};
   const confirmButtonProps = {...defaultConfirmButton, ...confirmButton};
   return (
@@ -146,11 +166,11 @@ interface ModalDialogOwnProps {
   isOpen: boolean;
   title?: string;
   className?: string;
-  onConfirm?: (...args: any) => void;
+  onConfirm: (...args: any) => void;
   onCancel: (...args: any) => void;
-  confirmButton: object;
+  confirmButton?: ModalButtonProps;
   confirmButtonLabel?: string;
-  cancelButton: object;
+  cancelButton?: ModalButtonProps;
   cancelButtonLabel?: string;
   cssStyle?: FlattenSimpleInterpolation | string;
   style?: React.CSSProperties;

diff --git a/src/components/src/common/styled-components.tsx b/src/components/src/common/styled-components.tsx
@@ -596,6 +596,7 @@ export const StyledExportSection = styled.div<StyledExportSectionProps>`
     width: 185px;
     .title {
       font-weight: 500;
+      font-family: ${props => props.theme.fontFamilyMedium ?? props.theme.fontFamily};
     }
     .subtitle {
       color: ${props => props.theme.subtextColorLT};

diff --git a/src/components/src/editor/feature-action-panel.tsx b/src/components/src/editor/feature-action-panel.tsx
@@ -40,7 +40,12 @@ const StyledActionsLayer = styled.div`
     color: ${props => props.theme.textColor};
   }
 `;
-
+const defaultActionIcons = {
+  remove: Trash,
+  layer: Layers,
+  copy: Copy,
+  copied: Checkmark
+};
 PureFeatureActionPanelFactory.deps = [];
 
 export interface FeatureActionPanelProps {
@@ -57,6 +62,9 @@ export interface FeatureActionPanelProps {
   onDeleteFeature: () => void;
   onClose?: () => void;
   children?: React.ReactNode;
+  actionIcons?: {
+    [id: string]: React.ElementType;
+  };
 }
 
 export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProps> {
@@ -69,6 +77,7 @@ export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProp
     currentFilter,
     onToggleLayer,
     onDeleteFeature,
+    actionIcons = defaultActionIcons,
     children
   }: FeatureActionPanelProps) => {
     const [copied, setCopied] = useState(false);
@@ -96,7 +105,7 @@ export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProp
           <ActionPanelItem
             className="editor-layers-list"
             label={intl.formatMessage({id: 'editor.filterLayer', defaultMessage: 'Filter layers'})}
-            Icon={Layers}
+            Icon={actionIcons.layer}
           >
             {layers.length ? (
               layers.map((layer, index) => (
@@ -127,14 +136,14 @@ export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProp
           <ActionPanelItem
             label={intl.formatMessage({id: 'editor.copyGeometry', defaultMessage: 'Copy Geometry'})}
             className="delete-panel-item"
-            Icon={copied ? Checkmark : Copy}
+            Icon={copied ? actionIcons.copied : actionIcons.copy}
             onClick={copyGeometry}
           />
           {children}
           <ActionPanelItem
             label={intl.formatMessage({id: 'tooltip.delete', defaultMessage: 'Delete'})}
             className="delete-panel-item"
-            Icon={Trash}
+            Icon={actionIcons.remove}
             onClick={onDeleteFeature}
           />
         </ActionPanel>
@@ -144,7 +153,8 @@ export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProp
 
   FeatureActionPanel.displayName = 'FeatureActionPanel';
   FeatureActionPanel.defaultProps = {
-    position: null
+    position: null,
+    actionIcons: defaultActionIcons
   };
 
   return FeatureActionPanel;