Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-10 19:58:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

inlineedit -- icon and focus

Browse Source
This commit is contained in:
sawka 2023-04-04 16:22:42 -07:00
parent e6aa2bae86
commit 0b3c7db1d4
2 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/elements.tsx
View File

@ -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<boolean> = mobx.observable.box(false, {name: "inlineedit-isEditing"});
tempText : OV<string>;
shouldFocus : boolean = false;
inputRef : React.RefObject<any> = 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
<div className={cn("settings-input inline-edit", "edit-active")}>
<div className="field has-addons">
<div className="control">
<input className="input" type="text" onKeyDown={this.handleKeyDown} placeholder={this.props.placeholder} onChange={this.handleChangeText} value={this.tempText.get()} maxLength={this.props.maxLength}/>
<input ref={this.inputRef} className="input" type="text" onKeyDown={this.handleKeyDown} placeholder={this.props.placeholder} onChange={this.handleChangeText} value={this.tempText.get()} maxLength={this.props.maxLength}/>
</div>
<div className="control">
<div onClick={this.cancelChange} title="Cancel (Esc)" className="button is-prompt-danger is-outlined is-small"><span className="icon is-small"><i className="fa-sharp fa-solid fa-xmark"/></span></div>
@ -170,7 +182,7 @@ class InlineSettingsTextEdit extends React.Component<{text : string, value : str
else {
return (
<div onClick={this.clickEdit} className={cn("settings-input inline-edit", "edit-not-active")}>
{this.props.text}
{this.props.text}<If condition={this.props.showIcon}> <i className="fa-sharp fa-solid fa-pen"/></If>
</div>
);
}

36
src/sh2.less
View File

@ -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%);
}