sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 02:29: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({ this.setState({
editing: true editing: true
, editValue: this.props.text , editValue: this.props.text
}, () => {
this.input.focus();
}); });
} }
@@ -65,14 +67,17 @@ export default class EditableListItem extends Component {
} }
render () { render () {
const selected = this.state.editing
? "editable-list__item--selected" : "";
return ( return (
<li className="editable-list__item"> <li className={`editable-list__item ${selected}`}>
<div className="editable-list__title" <div className="editable-list__title"
onDoubleClick={ this.handleEditBegin }> onDoubleClick={ this.handleEditBegin }>
{ this.state.editing { this.state.editing
? <input className="editable-list__edit-field" ? <input className="editable-list__edit-field"
type="text" type="text"
autoFocus ref={ input => this.input = input }
value={ this.state.editValue } value={ this.state.editValue }
onBlur={ this.handleEditEnd } onBlur={ this.handleEditEnd }
onChange={ this.handleInputChange } onChange={ this.handleInputChange }

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

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