forked from OctoLinker/OctoLinker
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor options page (OctoLinker#386)
* Add preact * Refactor options page to Preact * Fix link state * Remove unused container div
- Loading branch information
1 parent
0501d5b
commit fd662b5
Showing
11 changed files
with
337 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,7 +4,6 @@ | |
| <title></title> | ||
| </head> | ||
| <body> | ||
| <div id="options"></div> | ||
| <script src="options.js"></script> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,17 @@ | ||
| export default ({ name, label, value, defaultValue, description }) => { | ||
| const val = value === undefined ? defaultValue : value; | ||
| const note = description ? `<p class="note">${description}</p>` : ''; | ||
| import { h } from 'preact'; | ||
|
|
||
| return `<div class="form-checkbox"> | ||
| <label> | ||
| <input type="checkbox" name="${name}" ${val ? 'checked' : ''}> | ||
| ${label} | ||
| </label>${note} | ||
| </div>`; | ||
| }; | ||
| export default ({ name, label, description, checked, onClick }) => ( | ||
| <div className="form-checkbox"> | ||
| <label htmlFor={name}> | ||
| <input | ||
| id={name} | ||
| name={name} | ||
| type="checkbox" | ||
| checked={checked} | ||
| onClick={onClick} | ||
| /> | ||
| {label} | ||
| </label> | ||
| <p className="note">{description}</p> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,5 @@ | ||
| import checkbox from './checkbox'; | ||
| import input from './input'; | ||
| import 'primer-core/build/build.css'; | ||
| import 'primer-forms/build/build.css'; | ||
|
|
||
| export default function({ type, ...rest }) { | ||
| if (type === 'checkbox') { | ||
| return checkbox(rest); | ||
| } else if (type === 'text' || type === 'password') { | ||
| return input({ type, ...rest }); | ||
| } | ||
| } | ||
| export { default as Input } from './input'; | ||
| export { default as Checkbox } from './checkbox'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,25 @@ | ||
| export default ({ type, name, label, value, defaultValue, description }) => { | ||
| const val = value === undefined ? defaultValue : value; | ||
| const note = description ? `<p class="note">${description}</p>` : ''; | ||
| import { h } from 'preact'; | ||
|
|
||
| return `<dl class="form-group"> | ||
| <dt><label>${label}</label></dt> | ||
| <dd><input class="form-control" type="${type}" name="${name}" value="${val}">${note}</dd> | ||
| </dl>`; | ||
| }; | ||
| export default ({ | ||
| name, | ||
| label, | ||
| description, | ||
| value, | ||
| onInput, | ||
| type = 'text', | ||
| }) => ( | ||
| <div className="form-group"> | ||
| <label htmlFor={name}> | ||
| {label} | ||
| <input | ||
| className="form-control" | ||
| type={type} | ||
| id={name} | ||
| name={name} | ||
| value={value} | ||
| onInput={onInput} | ||
| /> | ||
| </label> | ||
| <p className="note">{description}</p> | ||
| </div> | ||
| ); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,80 @@ | ||
| import 'primer-core/build/build.css'; | ||
| import 'primer-forms/build/build.css'; | ||
| import './options.css'; | ||
| import { h, render, Component } from 'preact'; | ||
| import linkState from 'linkstate'; | ||
|
|
||
| import components from './components'; | ||
| import './options.css'; | ||
| import { Input, Checkbox } from './components'; | ||
| import * as storage from './storage'; | ||
| import { options } from './options'; | ||
|
|
||
| const formEl = document.querySelector('#options'); | ||
| const githubTokenDescription = () => ( | ||
| <span> | ||
| If you want better <strong>Sass, Less or Haskell support</strong> for | ||
| private repositories, you'll need to{' '} | ||
| <a href="https://github.com/settings/tokens/new?scopes=repo&description=OctoLinker%20browser%20extension"> | ||
| create a token | ||
| </a>{' '} | ||
| with the repo permissions. | ||
| </span> | ||
| ); | ||
|
|
||
| storage.load().then(() => { | ||
| options.forEach(item => { | ||
| formEl.innerHTML += components({ | ||
| ...item, | ||
| value: storage.get(item.name), | ||
| }); | ||
| }); | ||
| }); | ||
| class App extends Component { | ||
| async componentWillMount() { | ||
| const store = { ...(await storage.load()) }; | ||
| this.setState(store); | ||
| } | ||
|
|
||
| formEl.addEventListener('change', ({ target }) => { | ||
| const tag = target.tagName.toLowerCase(); | ||
| componentWillUpdate(nextProps, nextState) { | ||
| storage.save(nextState); | ||
| } | ||
|
|
||
| if (tag === 'input' && target.type === 'checkbox') { | ||
| storage.set(target.name, target.checked); | ||
| } else { | ||
| storage.set(target.name, target.value); | ||
| render(props, state) { | ||
| return ( | ||
| <div> | ||
| <Input | ||
| type="password" | ||
| name="githubToken" | ||
| label="Access token" | ||
| description={githubTokenDescription()} | ||
| value={state.githubToken} | ||
| onInput={linkState(this, 'githubToken')} | ||
| /> | ||
| <Checkbox | ||
| name="newWindow" | ||
| label="New tab" | ||
| description="Open link in a new tab." | ||
| checked={state.newWindow} | ||
| onClick={linkState(this, 'newWindow')} | ||
| /> | ||
| <Checkbox | ||
| name="newWindowActive" | ||
| label="Focus new tab" | ||
| description="Focus new tab when opening a link." | ||
| checked={state.newWindowActive} | ||
| onClick={linkState(this, 'newWindowActive')} | ||
| /> | ||
| <Checkbox | ||
| name="showLinkIndicator" | ||
| label="Line indicator" | ||
| description="Show an indicator if line contains OctoLinker links." | ||
| checked={state.showLinkIndicator} | ||
| onClick={linkState(this, 'showLinkIndicator')} | ||
| /> | ||
| <Checkbox | ||
| name="showUpdateNotification" | ||
| label="Update notification" | ||
| description="Show a notification if a new version is available." | ||
| checked={state.showUpdateNotification} | ||
| onClick={linkState(this, 'showUpdateNotification')} | ||
| /> | ||
| <Checkbox | ||
| name="doTrack" | ||
| label="Usage reports" | ||
| description="Send anonymous usage reports to Google Analytics." | ||
| checked={state.doTrack} | ||
| onClick={linkState(this, 'doTrack')} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| render(<App />, document.body); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.