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

Whitelist editor localisation + formatting fixes

Browse Source
This commit is contained in:
hensm
2018-10-23 13:31:54 +01:00
parent 430f45a240
commit 6fd3cb1c76
3 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ext/src/_locales/en/messages.json
View File

@@ -40,7 +40,28 @@
"message": "Enabled" "message": "Enabled"
} }
, "options_option_uaWhitelist": { , "options_option_uaWhitelist": {
"message": "Match patterns (newline-separated)" "message": "Match matterns (newline-separated)"
}
, "options_option_uaWhitelistBasicView": {
"message": "Basic View"
}
, "options_option_uaWhitelistRawView": {
"message": "Raw View"
}
, "options_option_uaWhitelistSaveRaw": {
"message": "Save Raw"
}
, "options_option_uaWhitelistAddItem": {
"message": "Add Item"
}
, "options_option_uaWhitelistItemEdit": {
"message": "Edit"
}
, "options_option_uaWhitelistItemRemove": {
"message": "Remove"
}
, "options_option_uaWhitelistInvalidMatchPattern": {
"message": "Invalid match pattern $1"
} }
, "options_submit": { , "options_submit": {

8
ext/src/options/index.css
View File

@@ -45,6 +45,10 @@
.editable-list { .editable-list {
justify-content: end; justify-content: end;
} }
.editable-list__items {
display: flex;
flex-direction: column;
}
.editable-list__item { .editable-list__item {
align-items: center; align-items: center;
display: flex; display: flex;
@@ -62,4 +66,6 @@
resize: vertical; resize: vertical;
width: 100%; width: 100%;
} }
.editable-list__add-button {
align-self: end;
}

92
ext/src/options/index.jsx
View File

@@ -38,7 +38,7 @@ class EditableListItem extends React.Component {
handleEditEnd (ev) { handleEditEnd (ev) {
if (this.props.editing if (this.props.editing
&& !this.props.itemPattern.test(this.state.editValue)) { && !this.props.itemPattern.test(this.state.editValue)) {
ev.target.setCustomValidity(this.props.itemPatternError); ev.target.setCustomValidity(this.props.itemPatternError());
} }
if (!ev.target.validity.valid) { if (!ev.target.validity.valid) {
@@ -58,7 +58,7 @@ class EditableListItem extends React.Component {
}); });
if (!this.props.itemPattern.test(ev.target.value)) { if (!this.props.itemPattern.test(ev.target.value)) {
ev.target.setCustomValidity(this.props.itemPatternError); ev.target.setCustomValidity(this.props.itemPatternError());
} else { } else {
ev.target.setCustomValidity(""); ev.target.setCustomValidity("");
} }
@@ -74,22 +74,22 @@ class EditableListItem extends React.Component {
return ( return (
<li className="editable-list__item"> <li className="editable-list__item">
<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 autoFocus
value={this.state.editValue} value={ this.state.editValue }
onBlur={this.handleEditEnd} onBlur={ this.handleEditEnd }
onChange={this.handleInputChange} onChange={ this.handleInputChange }
onKeyPress={this.handleInputKeyPress}/> onKeyPress={ this.handleInputKeyPress }/>
: this.props.text } : this.props.text }
</div> </div>
<button onClick={this.handleEditBegin}> <button onClick={ this.handleEditBegin }>
Edit { _("options_option_uaWhitelistItemEdit") }
</button> </button>
<button onClick={this.handleRemove}> <button onClick={ this.handleRemove }>
Remove { _("options_option_uaWhitelistItemRemove") }
</button> </button>
</li> </li>
); );
@@ -155,6 +155,7 @@ class EditableList extends React.Component {
handleSaveRaw () { handleSaveRaw () {
this.setState(currentState => { this.setState(currentState => {
console.log(currentState.rawViewValue);
const newItems = currentState.rawViewValue.split("\n") const newItems = currentState.rawViewValue.split("\n")
.filter(item => item !== ""); .filter(item => item !== "");
@@ -162,10 +163,12 @@ class EditableList extends React.Component {
for (const item of newItems) { for (const item of newItems) {
if (!this.props.itemPattern.test(item)) { if (!this.props.itemPattern.test(item)) {
this.rawViewTextArea.setCustomValidity( this.rawViewTextArea.setCustomValidity(
`${this.props.itemPatternError}: ${item}`); this.props.itemPatternError(item));
return; return;
} }
} }
this.rawViewTextArea.setCustomValidity("");
} }
return { return {
@@ -213,42 +216,46 @@ class EditableList extends React.Component {
return ( return (
<div className="editable-list"> <div className="editable-list">
<button className="editable-list__view-button" <button className="editable-list__view-button"
onClick={this.handleSwitchView}> onClick={ this.handleSwitchView }>
{ this.state.rawView ? "Basic" : "Raw" } View { this.state.rawView
? _("options_option_uaWhitelistBasicView")
: _("options_option_uaWhitelistRawView") }
</button> </button>
{ this.state.rawView && { this.state.rawView &&
<button className="editable-list__save-raw-button" <button className="editable-list__save-raw-button"
onClick={this.handleSaveRaw}> onClick={ this.handleSaveRaw }>
Save Raw { _("options_option_uaWhitelistSaveRaw") }
</button> } </button> }
<hr /> <hr />
{ {
this.state.rawView this.state.rawView
? ( <textarea className="editable-list__raw-view" ? ( <textarea className="editable-list__raw-view"
rows={items.length} rows={ items.length}
value={this.state.rawViewValue} value={ this.state.rawViewValue}
onChange={this.handleRawViewTextAreaChange} onChange={ this.handleRawViewTextAreaChange }
ref={el => { this.rawViewTextArea = el }}> ref={ el => { this.rawViewTextArea = el }}>
</textarea> ) </textarea> )
: ( <ul className="editable-list__items"> : ( <ul className="editable-list__items">
{ items.map((item, i) => { items.map((item, i) =>
<EditableListItem text={item} <EditableListItem text={ item }
itemPattern={this.props.itemPattern} itemPattern={ this.props.itemPattern }
itemPatternError={this.props.itemPatternError} itemPatternError={ this.props.itemPatternError }
onRemove={this.handleItemRemove} onRemove={ this.handleItemRemove }
onEdit={this.handleItemEdit} onEdit={ this.handleItemEdit }
key={i} /> )} key={ i } /> )}
{ this.state.addingNewItem && { this.state.addingNewItem &&
<EditableListItem text={""} <EditableListItem text=""
itemPattern={this.props.itemPattern} itemPattern={ this.props.itemPattern }
itemPatternError={this.props.itemPatternError} itemPatternError={ this.props.itemPatternError }
onRemove={this.handleNewItemRemove} onRemove={ this.handleNewItemRemove }
onEdit={this.handleNewItemEdit} onEdit={ this.handleNewItemEdit }
editing={true} /> } editing={ true } /> }
<div className="editable-list__item editable-list__item-actions">
<button className="editable-list__add-button" <button className="editable-list__add-button"
onClick={this.handleAddItem}> onClick={ this.handleAddItem }>
Add Item { _("options_option_uaWhitelistAddItem") }
</button> </button>
</div>
</ul> ) </ul> )
} }
</div> </div>
@@ -269,6 +276,7 @@ class OptionsApp extends Component {
this.handleFormChange = this.handleFormChange.bind(this); this.handleFormChange = this.handleFormChange.bind(this);
this.handleInputChange = this.handleInputChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this);
this.handleListChange = this.handleListChange.bind(this); this.handleListChange = this.handleListChange.bind(this);
this.getItemPatternError = this.getItemPatternError.bind(this);
} }
/** /**
@@ -277,10 +285,10 @@ class OptionsApp extends Component {
setStorage () { setStorage () {
return browser.storage.sync.set({ return browser.storage.sync.set({
options: { options: {
option_localMediaEnabled : this.state.option_localMediaEnabled option_localMediaEnabled: this.state.option_localMediaEnabled
, option_localMediaServerPort : this.state.option_localMediaServerPort , option_localMediaServerPort: this.state.option_localMediaServerPort
, option_uaWhitelistEnabled : this.state.option_uaWhitelistEnabled , option_uaWhitelistEnabled: this.state.option_uaWhitelistEnabled
, option_uaWhitelist : this.state.option_uaWhitelist , option_uaWhitelist: this.state.option_uaWhitelist
} }
}); });
} }
@@ -341,6 +349,10 @@ class OptionsApp extends Component {
}); });
} }
getItemPatternError (info) {
return _("options_option_uaWhitelistInvalidMatchPattern", info);
}
render () { render () {
return ( return (
<form id="form" ref={ form => { this.form = form; }} <form id="form" ref={ form => { this.form = form; }}
@@ -402,8 +414,8 @@ class OptionsApp extends Component {
</div> </div>
<EditableList data={ this.state.option_uaWhitelist } <EditableList data={ this.state.option_uaWhitelist }
onListChange={ this.handleListChange } onListChange={ this.handleListChange }
itemPattern={MATCH_PATTERN_REGEX} itemPattern={ MATCH_PATTERN_REGEX }
itemPatternError="Invalid match pattern"/> itemPatternError={ this.getItemPatternError }/>
</label> </label>
</fieldset> </fieldset>