diff --git a/src/elements.tsx b/src/elements.tsx index d7246b1b..f49ea19b 100644 --- a/src/elements.tsx +++ b/src/elements.tsx @@ -95,9 +95,20 @@ class RemoteStatusLight extends React.Component<{remote : RemoteType}, {}> { } @mobxReact.observer -class InlineSettingsTextEdit extends React.Component<{text : string, value : string, onChange : (val : string) => void, maxLength : number, placeholder : string}, {}> { +class InlineSettingsTextEdit extends React.Component<{text : string, value : string, onChange : (val : string) => void, maxLength : number, placeholder : string, showIcon? : boolean}, {}> { isEditing : OV = mobx.observable.box(false, {name: "inlineedit-isEditing"}); tempText : OV; + shouldFocus : boolean = false; + inputRef : React.RefObject = React.createRef(); + + componentDidUpdate() : void { + if (this.shouldFocus) { + this.shouldFocus = false; + if (this.inputRef.current != null) { + this.inputRef.current.focus(); + } + } + } @boundMethod handleChangeText(e : any) : void { @@ -145,6 +156,7 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str clickEdit() : void { mobx.action(() => { this.isEditing.set(true); + this.shouldFocus = true; this.tempText = mobx.observable.box(this.props.value, {name: "inlineedit-tempText"}); })(); } @@ -155,7 +167,7 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
- +
@@ -170,7 +182,7 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str else { return (
- {this.props.text} + {this.props.text}
); } diff --git a/src/sh2.less b/src/sh2.less index bc8f134d..7b70da5c 100644 --- a/src/sh2.less +++ b/src/sh2.less @@ -3008,17 +3008,6 @@ input[type=checkbox] { margin-right: 15px; } } - - .remoteedit-error { - font-size: 14px; - color: @term-red; - margin-top: 20px; - padding: 10px; - border-radius: 5px; - background-color: #333; - border: 1px solid @term-red; - font-weight: bold; - } } } } @@ -3186,6 +3175,22 @@ input[type=checkbox] { } } + &.settings-error { + font-size: 14px; + color: @term-red; + margin-top: 20px; + padding: 10px; + border-radius: 5px; + background-color: #200707; + border: 1px solid @term-red; + font-weight: bold; + + .error-dismiss { + padding: 2px; + cursor: pointer; + } + } + .settings-label { font-weight: bold; color: #fff; @@ -3200,6 +3205,10 @@ input[type=checkbox] { &.inline-edit.edit-not-active { cursor: pointer; + i.fa-pen { + margin-left: 5px; + } + &:hover { text-decoration: underline; text-decoration-style: dotted; @@ -3226,6 +3235,11 @@ input[type=checkbox] { padding: 4px; border-radius: 3px; } + + .control { + font-size: 12px; + } + .tab-color-icon.color-green { color: desaturate(@tab-green, 30%); }