refactor: replace icons with MS Fabric icons (#5)
* refactor: replace icons with MS Fabric icons replace tag toolbar rename icon and remove font awesome classes from tags issue-6049115 * Update tagInputToolbar.tsx Co-authored-by: kunzheng <58841788+kunzms@users.noreply.github.com>
This commit is contained in:
Родитель
367ba7dae9
Коммит
427705a627
|
@ -121,7 +121,7 @@ $tagInputWidth: 250px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0px 0px 5px 0px;
|
padding: 0px 0px 4px 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -78,7 +78,7 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
|
||||||
{
|
{
|
||||||
displayName: strings.tags.toolbar.edit,
|
displayName: strings.tags.toolbar.edit,
|
||||||
className: "edit",
|
className: "edit",
|
||||||
icon: "ms-Icon ms-Icon--Edit ms-Icon-1x",
|
icon: "ms-Icon ms-Icon--Rename ms-Icon-1x",
|
||||||
category: Categories.Modifier,
|
category: Categories.Modifier,
|
||||||
handler: this.handleEdit,
|
handler: this.handleEdit,
|
||||||
},
|
},
|
||||||
|
@ -107,7 +107,8 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleTagIcon = () => {
|
private handleTagIcon = () => {
|
||||||
const classNames = ["tag-input-toolbar-icon", "fas"];
|
const classNames = ["tag-input-toolbar-icon"];
|
||||||
|
|
||||||
if (this.props.selectedTag === null) {
|
if (this.props.selectedTag === null) {
|
||||||
classNames.push("tag-input-toolbar-icon-unselected");
|
classNames.push("tag-input-toolbar-icon-unselected");
|
||||||
}
|
}
|
||||||
|
@ -118,7 +119,7 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
|
||||||
key={itemConfig.displayName}
|
key={itemConfig.displayName}
|
||||||
className={`tag-input-toolbar-item ${itemConfig.className}`}
|
className={`tag-input-toolbar-item ${itemConfig.className}`}
|
||||||
onClick={(e) => this.onToolbarItemClick(e, itemConfig)}>
|
onClick={(e) => this.onToolbarItemClick(e, itemConfig)}>
|
||||||
<i className={`tag-input-toolbar-icon fas ${itemConfig.icon}`}/>
|
<i className={`tag-input-toolbar-icon ${itemConfig.icon}`}/>
|
||||||
</div>);
|
</div>);
|
||||||
} else if (itemConfig.category === Categories.Separator) {
|
} else if (itemConfig.category === Categories.Separator) {
|
||||||
return (<div className="tag-tool-bar-vertical-line"></div>);
|
return (<div className="tag-tool-bar-vertical-line"></div>);
|
||||||
|
|
|
@ -32,10 +32,6 @@
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $darker-2;
|
background-color: $darker-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fas {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.prev {
|
.prev {
|
||||||
|
|
|
@ -89,7 +89,7 @@ export abstract class ToolbarItem extends React.Component<IToolbarItemProps> {
|
||||||
className={className.join(" ")}
|
className={className.join(" ")}
|
||||||
title={this.getTitle()}
|
title={this.getTitle()}
|
||||||
onClick={this.onClick}>
|
onClick={this.onClick}>
|
||||||
<i className={"fas " + this.props.icon} />
|
<i className={this.props.icon} />
|
||||||
</button>
|
</button>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
Загрузка…
Ссылка в новой задаче