sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix list input focus and improve styling

Browse Source
This commit is contained in:
hensm
2018-12-12 12:53:00 +00:00
parent c24c6412c0
commit 82e224fd80
2 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ext/src/options/EditableListItem.jsx
View File

@@ -26,6 +26,8 @@ export default class EditableListItem extends Component {
this.setState({
editing: true
, editValue: this.props.text
}, () => {
this.input.focus();
});
}
@@ -65,14 +67,17 @@ export default class EditableListItem extends Component {
}
render () {
const selected = this.state.editing
? "editable-list__item--selected" : "";
return (
<li className="editable-list__item">
<li className={`editable-list__item ${selected}`}>
<div className="editable-list__title"
onDoubleClick={ this.handleEditBegin }>
{ this.state.editing
? <input className="editable-list__edit-field"
type="text"
autoFocus
ref={ input => this.input = input }
value={ this.state.editValue }
onBlur={ this.handleEditEnd }
onChange={ this.handleInputChange }

34
ext/src/options/styles/index.css
View File

@@ -1,3 +1,7 @@
:root {
--border-color: rgb(225, 225, 225);;
}
*:invalid {
box-shadow: 0 0 1.5px 1px red;
}
@@ -74,18 +78,12 @@
}
.category:not(:first-of-type) {
border-top: 1px solid rgb(225, 225, 225);
border-top: 1px solid var(--border-color);
}
.category > .category {
background: rgba(235, 235, 235);
border-radius: 3px;
padding: 10px 0;
box-shadow: inset 6px 0 0 0 rgba(0, 0, 0, 0.1);
}
.category > .category:disabled {
background: rgba(245, 245, 245);
padding: 5px 0;
box-shadow: inset 6px 0 0 0 var(--border-color);
}
.category > .category > .category__name,
@@ -130,7 +128,9 @@
.editable-list {
border: 1px solid rgb(225, 225, 225);
background-color: -moz-field;
border: 1px solid var(--border-color);
color: -moz-fieldtext;
justify-content: end;
padding: 5px;
}
@@ -147,7 +147,7 @@
.editable-list hr {
border: initial;
border-top: 1px solid rgb(225, 225, 225);
border-top: 1px solid var(--border-color);
margin: 5px 0;
}
@@ -167,8 +167,16 @@
padding: 0 5px;
}
.editable-list__item:nth-of-type(even) {
background-color: rgb(245, 245, 245);
.editable-list__item:nth-child(even):not(:last-child) {
background-color: -moz-eventreerow;
}
.editable-list__item:nth-child(odd):not(:last-child) {
background-color: -moz-oddtreerow;
}
.editable-list__item--selected {
background-color: -moz-cellhighlight !important;
color: -moz-cellhighlighttext !important;
}
.editable-list__title {