refactor: adjust tag item UI (#14)

src/react/components/common/tagInput/tagInput.scss

@@ -1,6 +1,7 @@
 @import "../../../../index.scss";
 
 $tagInputWidth: 250px;
+$tagColorWidth: 12px;
 
 .tag {
     &-input {
@@ -51,7 +52,13 @@ $tagInputWidth: 250px;
     }
 
     &-item-block {
+        display: flex;
+        flex-direction: row;
         margin: 2px 0;
+
+        &-2 {
+            min-width: $tagInputWidth - $tagColorWidth;
+        }
     }
 
     &-item {
@@ -121,13 +128,11 @@ $tagInputWidth: 250px;
             text-overflow: ellipsis;
             white-space: nowrap;
             align-items: center;
-            padding: 0px 0px 4px 0px; 
         }
     }
 
-    &-index {
+    &-icons-container {
         display: inline-flex;
-        padding: 0 5px;
         font-weight: 600;
         align-items: center;
     }
@@ -138,6 +143,10 @@ $tagInputWidth: 250px;
         cursor: pointer;
     }
 
+    &-item-label {
+        color: #808080;
+    }
+
     &-item-label:hover {
         color: #fff;
         background: $lighter-4;
@@ -150,7 +159,7 @@ $tagInputWidth: 250px;
     }
 
     &-color {
-        width: 12px;
+        width: $tagColorWidth;
     }
 
     &-lock-icon {

src/react/components/common/tagInput/tagInputItem.scss

@@ -1,14 +1,5 @@
-@import "../../../../index.scss";
-
-.dropdown {
-    &-background {
-        background: $darker-15;
-    }
-    &-border{
-        border: 0px;
-    }
-}
-
-.icon-color {
-    color: white;
-}
+@import "../../../../index.scss";
+
+.icon-color {
+    color: white;
+}

src/react/components/common/tagInput/tagInputItem.tsx

@@ -81,26 +81,28 @@ export default class TagInputItem extends React.Component<ITagInputItemProps, IT
         };
         return (
             <div className={"tag-item-block"}>
-                {
-                    this.props.tag &&
-                    <li className={this.getItemClassName()} style={style}>
-                        <div
-                            className={`tag-color`}
-                            onClick={this.onColorClick}>
-                        </div>
-                        <div
-                            className={"tag-content"}
-                            onClick={this.onNameClick}>
-                            {this.getTagContent()}
-                        </div>
-                        {this.getDropDownButton()}
-                        {
-                            this.state.isLocked &&
-                            <div></div>
-                        }
-                    </li>
-                }
-                {this.renderTagDetail()}
+                <div
+                    className={"tag-color"}
+                    style={style}
+                    onClick={this.onColorClick}>
+                </div>
+                <div className={"tag-item-block-2"}>
+                    {
+                        this.props.tag &&
+                        <li className={this.getItemClassName()} style={style}>
+                            <div
+                                className={"tag-content"}
+                                onClick={this.onNameClick}>
+                                {this.getTagContent()}
+                            </div>
+                            {
+                                this.state.isLocked &&
+                                <div></div>
+                            }
+                        </li>
+                    }
+                    {this.renderTagDetail()}
+                </div>
             </div>
         );
     }
@@ -121,10 +123,10 @@ export default class TagInputItem extends React.Component<ITagInputItemProps, IT
 
     private getDropDownButton = () => {
         return (
-            <button
-                type ="button"
-                onClick = {this.onInputFieldClick}
-                className = "ms-Icon ms-Icon--ChevronDown dropdown-background dropdown-border icon-color" ></button>
+            <span
+                className = "ms-Icon ms-Icon--ChevronDown icon-color pl-2"
+                onClick={this.onInputFieldClick}>
+            </span>
         );
     }
 
@@ -189,10 +191,11 @@ export default class TagInputItem extends React.Component<ITagInputItemProps, IT
                             </span>
                     }
                 </div>
-                <div className={"tag-index"}>
+                <div className={"tag-icons-container px-1"}>
                     {(displayIndex !== null) &&
                         <span className="tag-index-span border border-white rounded-sm ">{displayIndex}</span>
                     }
+                    {this.getDropDownButton()}
                 </div>
             </div>
         );
@@ -224,7 +227,7 @@ export default class TagInputItem extends React.Component<ITagInputItemProps, IT
     }
 
     private getContentClassName = () => {
-        const classNames = ["tag-name-text px-2"];
+        const classNames = ["tag-name-text px-2 pb-1"];
         if (this.state.isBeingEdited && this.state.tagEditMode === TagEditMode.Color) {
             classNames.push(" tag-color-edit");
         }

src/react/components/common/tagInput/tagInputItemLabel.tsx

@@ -16,7 +16,7 @@ export default class TagInputItemLabel extends React.Component<ITagInputItemLabe
     public render() {
         return (
             <li
-                className="tag-item-label"
+                className={"tag-item-label px-2"}
                 onMouseEnter={this.handleMouseEnter}
                 onMouseLeave={this.handleMouseLeave}>
                 {this.props.label.value.map((formRegion: IFormRegion) => formRegion.text).join(" ")}

src/react/components/common/tagInput/tagTypeFormat.scss

@@ -1,73 +1,72 @@
-@import "../../../../index.scss";
-
-.field-background {
-    width:250px;
-    padding: 0px 0px 5px 0px;
-    &-color {
-        background-color: #32363B;
-    }
-    &-container {
-        display: flex;
-        justify-content: space-between;
-        color: white;
-        padding: 0px 0px 0px 20px;
-    }
-}
-
-.horizontal-line {
-    height: 0.1;
-    width: 100%;
-    border: 0.5px solid white;
-    margin: 5px 0px;
-}
-
-.tag-field {
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-    //padding: 0px 0px 0px 15px;
-}
-
-.tag-field-item {
-    width: 100%;
-    padding: 4px 0px 4px 0px;
-}
-
-.format-list {
-    width: 100%;
-    border: white 1px;
-}
-
-.format-items-hide {
-    display:none;
-}
-
-.format-items-list {
-    width: 100%;
-    list-style-type: none;
-    padding: 0px;
-    margin: 0px;
-    display: inline-flex;
-    flex-direction: column;
-    justify-items: self-start;
-}
-
-.list-items {
-    border: 0px;
-    width:100%;
-    display: inline-flex;
-    justify-items: flex-start;
-    padding: 0px 0px 0px 20px;
-
-    &-color {
-        background-color: #32363B;
-        color: white;
-    }
-
-    &-color:hover {
-        background-color: #2D2F31;
-        color: white;
-    }
-}
-
-
+@import "tagInput.scss";
+
+.field-background {
+    width: $tagInputWidth - $tagColorWidth;
+    padding: 0px 0px 5px 0px;
+    &-color {
+        background-color: #32363B;
+    }
+    &-container {
+        display: flex;
+        justify-content: space-between;
+        color: white;
+        padding: 0px 0px 0px 20px;
+    }
+}
+
+.horizontal-line {
+    height: 0.1;
+    width: 100%;
+    border: 0.5px solid white;
+    margin: 5px 0px;
+}
+
+.tag-field {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+}
+
+.tag-field-item {
+    width: 100%;
+    padding: 4px 0px 4px 0px;
+}
+
+.format-list {
+    width: 100%;
+    border: white 1px;
+}
+
+.format-items-hide {
+    display:none;
+}
+
+.format-items-list {
+    width: 100%;
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-items: self-start;
+}
+
+.list-items {
+    border: 0px;
+    width:100%;
+    display: inline-flex;
+    justify-items: flex-start;
+    padding: 0px 0px 0px 20px;
+
+    &-color {
+        background-color: #32363B;
+        color: white;
+    }
+
+    &-color:hover {
+        background-color: #2D2F31;
+        color: white;
+    }
+}
+
+

src/react/components/common/tagInput/tagTypeFormat.tsx

@@ -1,203 +1,203 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-import React from "react";
-import { ITag, FieldType, FieldFormat  } from "../../../../models/applicationState";
-import "./tagTypeFormat.scss";
-import "./tagInputItem.scss";
-
-/**
- * Properties for Tag Type Format component
- * @member tag - ITag
- */
-export interface ITagTypeFormatProps {
-    tag: ITag;
-    onChange?: (oldTag: ITag, newTag: ITag) => void;
-}
-
-/**
- * State for Tag Type Format
- * @member tag - ITag
- */
-export interface ITagFormatState {
-    tag: ITag;
-    showFormat?: boolean;
-    showType?: boolean;
-}
-
-/**
- * Generic modal that displays a message
- */
-export default class TagTypeFormat extends React.Component<ITagTypeFormatProps, ITagFormatState> {
-
-    private static filterFormat(type: FieldType): FieldFormat[] {
-        switch (type) {
-            case FieldType.String:
-                return [
-                    FieldFormat.NotSpecified,
-                    FieldFormat.Alphanumberic,
-                    FieldFormat.NoWhiteSpaces,
-                ];
-            case FieldType.Number:
-                return [
-                    FieldFormat.NotSpecified,
-                    FieldFormat.Currency,
-                ];
-            case FieldType.Integer:
-                return [
-                    FieldFormat.NotSpecified,
-                ];
-            case FieldType.Date:
-                return [
-                    FieldFormat.NotSpecified,
-                    FieldFormat.DMY,
-                    FieldFormat.MDY,
-                    FieldFormat.YMD,
-                ];
-            case FieldType.Time:
-                return [
-                    FieldFormat.NotSpecified,
-                ];
-            default:
-                return [ FieldFormat.NotSpecified ];
-        }
-    }
-    public state: ITagFormatState = {
-        tag: this.props.tag,
-        showFormat: false,
-        showType: false,
-    };
-
-    public render() {
-        const tag = this.state.tag;
-        const types = Object.keys(FieldType);
-        const formats = TagTypeFormat.filterFormat(tag.type);
-
-        return (
-            <div className = "field-background field-background-color">
-                <div className = "tag-field justify-content-start">
-                    <div className = "row-4 tag-field-item">
-                        <div onClick = {this.handleTypeShow} className = "field-background-container">
-                            <span className = "type-selected">{tag.type}</span>
-                            <button
-                                type="button"
-                                className="ms-Icon ms-Icon--ChevronDown field-background-color dropdown-border icon-color"></button>
-                        </div>
-                        <div className = {this.showHideType()}>
-                            <ol className = "format-items-list">
-                                {
-                                    types.map((type) => {
-                                        return(
-                                            this.getTypeListItem(this, type)
-                                        );
-                                    })
-                                }
-                            </ol>
-                        </div>
-                    </div>
-                    <div className = "horizontal-line"></div>
-                    <div className = "row-4 tag-field-item">
-                        <div onClick={this.handleFormatShow} className = "field-background-container">
-                            <span>{tag.format}</span>
-                            <button
-                                type="button"
-                                className="ms-Icon ms-Icon--ChevronDown field-background-color dropdown-border icon-color"></button>
-                         </div>
-                        <div className = {this.showHideFormat()}>
-                            <ol className = "format-items-list">
-                                {
-                                    formats.map((format) => {
-                                        return (
-                                            this.getFormatListItem(this, format)
-                                        );
-                                    })
-                                }
-                            </ol>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    private handleTypeChange = (event) => {
-        const oldTag = this.state.tag;
-        const newTag: ITag = {
-            ...oldTag,
-            type: event.target.value as FieldType,
-            format: FieldFormat.NotSpecified,
-        };
-        this.setState({ tag: newTag, showType: false }, () => {
-            if (this.props.onChange) {
-                this.props.onChange(oldTag, newTag);
-            }
-        });
-    }
-
-    private handleTypeShow = (e) => {
-        if (e.type === "click") {
-            this.setState({showType: !this.state.showType, showFormat: false});
-        }
-    }
-
-    private showHideType = () => {
-        let formatHideClass = ["format-items-hide"];
-        if (this.state.showType) {
-            formatHideClass = [];
-        }
-        return formatHideClass.join(" ");
-    }
-
-    private handleFormatShow = (e) => {
-        if (e.type === "click") {
-            this.setState({showFormat: !this.state.showFormat, showType: false}); }
-        }
-
-    private showHideFormat = () => {
-        let formatHideClass = ["format-items-hide", "format-list"];
-        if (this.state.showFormat) {
-            formatHideClass = ["format-list"];
-        }
-        return formatHideClass.join(" ");
-    }
-
-    private handleFormatChange = (event) => {
-        const oldTag = this.state.tag;
-        const newTag: ITag = {
-            ...oldTag,
-            format: event.target.value,
-        };
-
-        this.setState({ tag: newTag, showFormat: false }, () => {
-            if (this.props.onChange) {
-                this.props.onChange(oldTag, newTag);
-            }
-        });
-    }
-
-    private getTypeListItem(props, type) {
-        return (
-            <button type = "button"
-                key = {type}
-                onClick = {props.handleTypeChange}
-                value = {FieldType[type]}
-                className="list-items list-items-color"
-            >
-                {FieldType[type]}
-            </button>
-        );
-    }
-
-    private getFormatListItem(props, format) {
-        return(
-            <button type = "button"
-                key = {format}
-                onClick = {props.handleFormatChange}
-                value = {format}
-                className="list-items list-items-color"
-            >
-                {format}
-            </button>
-        );
-    }
-}
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from "react";
+import { ITag, FieldType, FieldFormat  } from "../../../../models/applicationState";
+import "./tagTypeFormat.scss";
+import "./tagInputItem.scss";
+
+/**
+ * Properties for Tag Type Format component
+ * @member tag - ITag
+ */
+export interface ITagTypeFormatProps {
+    tag: ITag;
+    onChange?: (oldTag: ITag, newTag: ITag) => void;
+}
+
+/**
+ * State for Tag Type Format
+ * @member tag - ITag
+ */
+export interface ITagFormatState {
+    tag: ITag;
+    showFormat?: boolean;
+    showType?: boolean;
+}
+
+/**
+ * Generic modal that displays a message
+ */
+export default class TagTypeFormat extends React.Component<ITagTypeFormatProps, ITagFormatState> {
+
+    private static filterFormat(type: FieldType): FieldFormat[] {
+        switch (type) {
+            case FieldType.String:
+                return [
+                    FieldFormat.NotSpecified,
+                    FieldFormat.Alphanumberic,
+                    FieldFormat.NoWhiteSpaces,
+                ];
+            case FieldType.Number:
+                return [
+                    FieldFormat.NotSpecified,
+                    FieldFormat.Currency,
+                ];
+            case FieldType.Integer:
+                return [
+                    FieldFormat.NotSpecified,
+                ];
+            case FieldType.Date:
+                return [
+                    FieldFormat.NotSpecified,
+                    FieldFormat.DMY,
+                    FieldFormat.MDY,
+                    FieldFormat.YMD,
+                ];
+            case FieldType.Time:
+                return [
+                    FieldFormat.NotSpecified,
+                ];
+            default:
+                return [ FieldFormat.NotSpecified ];
+        }
+    }
+
+    public state: ITagFormatState = {
+        tag: this.props.tag,
+        showFormat: false,
+        showType: false,
+    };
+
+    public render() {
+        const tag = this.state.tag;
+        const types = Object.keys(FieldType);
+        const formats = TagTypeFormat.filterFormat(tag.type);
+        const dropdownIconClass = [
+            "ms-Icon", "ms-Icon--ChevronDown", "field-background-color", "icon-color", "pr-1",
+        ].join(" ");
+
+        return (
+            <div className = "field-background field-background-color">
+                <div className = "tag-field justify-content-start">
+                    <div className = "row-4 tag-field-item">
+                        <div onClick={this.handleTypeShow} className = "field-background-container">
+                            <span className="type-selected">{tag.type}</span>
+                            <span className={dropdownIconClass}></span>
+                        </div>
+                        <div className = {this.showHideType()}>
+                            <ol className = "format-items-list">
+                                {
+                                    types.map((type) => {
+                                        return(
+                                            this.getTypeListItem(this, type)
+                                        );
+                                    })
+                                }
+                            </ol>
+                        </div>
+                    </div>
+                    <div className = "horizontal-line"></div>
+                    <div className = "row-4 tag-field-item">
+                        <div onClick={this.handleFormatShow} className = "field-background-container">
+                            <span>{tag.format}</span>
+                            <span className={dropdownIconClass}></span>
+                         </div>
+                        <div className = {this.showHideFormat()}>
+                            <ol className = "format-items-list">
+                                {
+                                    formats.map((format) => {
+                                        return (
+                                            this.getFormatListItem(this, format)
+                                        );
+                                    })
+                                }
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    private handleTypeChange = (event) => {
+        const oldTag = this.state.tag;
+        const newTag: ITag = {
+            ...oldTag,
+            type: event.target.value as FieldType,
+            format: FieldFormat.NotSpecified,
+        };
+        this.setState({ tag: newTag, showType: false }, () => {
+            if (this.props.onChange) {
+                this.props.onChange(oldTag, newTag);
+            }
+        });
+    }
+
+    private handleTypeShow = (e) => {
+        if (e.type === "click") {
+            this.setState({showType: !this.state.showType, showFormat: false});
+        }
+    }
+
+    private showHideType = () => {
+        let formatHideClass = ["format-items-hide"];
+        if (this.state.showType) {
+            formatHideClass = [];
+        }
+        return formatHideClass.join(" ");
+    }
+
+    private handleFormatShow = (e) => {
+        if (e.type === "click") {
+            this.setState({showFormat: !this.state.showFormat, showType: false}); }
+        }
+
+    private showHideFormat = () => {
+        let formatHideClass = ["format-items-hide", "format-list"];
+        if (this.state.showFormat) {
+            formatHideClass = ["format-list"];
+        }
+        return formatHideClass.join(" ");
+    }
+
+    private handleFormatChange = (event) => {
+        const oldTag = this.state.tag;
+        const newTag: ITag = {
+            ...oldTag,
+            format: event.target.value,
+        };
+
+        this.setState({ tag: newTag, showFormat: false }, () => {
+            if (this.props.onChange) {
+                this.props.onChange(oldTag, newTag);
+            }
+        });
+    }
+
+    private getTypeListItem(props, type) {
+        return (
+            <button type = "button"
+                key = {type}
+                onClick = {props.handleTypeChange}
+                value = {FieldType[type]}
+                className="list-items list-items-color"
+            >
+                {FieldType[type]}
+            </button>
+        );
+    }
+
+    private getFormatListItem(props, format) {
+        return(
+            <button type = "button"
+                key = {format}
+                onClick = {props.handleFormatChange}
+                value = {format}
+                className="list-items list-items-color"
+            >
+                {format}
+            </button>
+        );
+    }
+}