Merge pull request SkalskiP#304 from SkalskiP/fix/303_if_label_is_too…

…_long_delete_button_is_hidden fix/303_if_label_is_too_long_delete_button_is_hidden
PowZone · Dec 27, 2022 · d32c392 · d32c392
2 parents da14ab6 + eae9e34
commit d32c392
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
@@ -13,6 +13,7 @@ export class Settings {
     public static readonly SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX: number = Settings.SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX + 300 + 1;
     public static readonly TOOLKIT_TAB_HEIGHT_PX: number = 40;
     public static readonly TOOLBOX_PANEL_WIDTH_PX: number = 50 + 1;
+    public static readonly MAX_DROPDOWN_OPTION_LENGTH: number = 20;
 
     public static readonly EDITOR_MIN_WIDTH: number = 900;
     public static readonly EDITOR_MIN_HEIGHT: number = 500;

diff --git a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss
@@ -52,7 +52,7 @@
         font-size: 14px;
         cursor: pointer;
         user-select: none;
-        min-width: 150px;
+        width: 150px;
         height: 30px;
         padding: 0 5px;
         color: white;
@@ -62,7 +62,8 @@
         flex-wrap: nowrap;
         justify-content: space-between;
         align-items: center;
-        align-content: space-between;
+
+        overflow: hidden;
 
         &:hover {
           &::after {

diff --git a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx
@@ -15,6 +15,8 @@ import {LabelName} from '../../../../store/labels/types';
 import {LabelsSelector} from '../../../../store/selectors/LabelsSelector';
 import {PopupWindowType} from '../../../../data/enums/PopupWindowType';
 import {updateActivePopupType} from '../../../../store/general/actionCreators';
+import {truncate} from 'lodash';
+import { Settings } from '../../../../settings/Settings';
 
 interface IProps {
     size: ISize;
@@ -110,23 +112,25 @@ class LabelInputField extends React.Component<IProps, IState> {
     };
 
     private getDropdownOptions = () => {
-        const onClick = (id: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            this.setState({isOpen: false});
-            window.removeEventListener(EventType.MOUSE_DOWN, this.closeDropdown);
-            this.props.onSelectLabel(this.props.id, id);
-            this.props.updateHighlightedLabelId(null);
-            this.props.updateActiveLabelId(this.props.id);
-            event.stopPropagation();
-        };
+        const wrapOnClick = (id: string): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void => {
+            return (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+                this.setState({isOpen: false});
+                window.removeEventListener(EventType.MOUSE_DOWN, this.closeDropdown);
+                this.props.onSelectLabel(this.props.id, id);
+                this.props.updateHighlightedLabelId(null);
+                this.props.updateActiveLabelId(this.props.id);
+                event.stopPropagation();
+            };
+        }
 
         return this.props.options.map((option: LabelName) => {
             return <div
                 className='DropdownOption'
                 key={option.id}
                 style={{height: this.dropdownOptionHeight}}
-                onClick={(event) => onClick(option.id, event)}
+                onClick={wrapOnClick(option.id)}
             >
-                {option.name}
+                {truncate(option.name, {length: Settings.MAX_DROPDOWN_OPTION_LENGTH})}
             </div>
         })
     };
@@ -189,7 +193,7 @@ class LabelInputField extends React.Component<IProps, IState> {
                                  ref={ref => this.dropdownLabel = ref}
                                  onClick={this.openDropdown}
                             >
-                                {value ? value.name : 'Select label'}
+                                {value ? truncate(value.name, {length: Settings.MAX_DROPDOWN_OPTION_LENGTH}) : 'Select label'}
                             </div>
                             {this.state.isOpen && <div
                                 className='Dropdown'