mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 19:56:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

make editable list look like something closer to design

Browse source
This commit is contained in:
Bruno Windels 2020-03-16 17:29:35 +01:00
parent f7eecc0921
commit db10fcd2b7
2 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
res/css/views/elements/_EditableItemList.scss
View file

@ -20,14 +20,21 @@ limitations under the License.
} }
.mx_EditableItem { .mx_EditableItem {
display: flex;
margin-bottom: 5px; margin-bottom: 5px;
margin-left: 15px;
} }
.mx_EditableItem_delete { .mx_EditableItem_delete {
order: 3;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
width: 14px;
height: 14px;
mask-image: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
background-color: $warning-color;
mask-size: 100%;
} }
.mx_EditableItem_email { .mx_EditableItem_email {
@ -36,12 +43,19 @@ limitations under the License.
.mx_EditableItem_promptText { .mx_EditableItem_promptText {
margin-right: 10px; margin-right: 10px;
order: 2;
} }
.mx_EditableItem_confirmBtn { .mx_EditableItem_confirmBtn {
margin-right: 5px; margin-right: 5px;
} }
.mx_EditableItem_item {
flex: auto 1 0;
order: 1;
}
.mx_EditableItemList_label { .mx_EditableItemList_label {
margin-bottom: 5px; margin-bottom: 5px;
} }

3
src/components/views/elements/EditableItemList.js
View file

@ -78,8 +78,7 @@ export class EditableItem extends React.Component {
return ( return (
<div className="mx_EditableItem"> <div className="mx_EditableItem">
<img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14} <div onClick={this._onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
onClick={this._onRemove} className="mx_EditableItem_delete" alt={_t("Remove")} />
<span className="mx_EditableItem_item">{this.props.value}</span> <span className="mx_EditableItem_item">{this.props.value}</span>
</div> </div>
); );