Holllo/fangs
Holllo
/
fangs
1
Fork 0
Code Issues 2 Releases 9 Activity

Add active styling to existing bangs while editing.

This commit is contained in:
Bauke 2022-03-15 11:29:42 +01:00
parent 06a1ee5550
commit d66b43e9fd
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
source/options/components/page-main.ts
View File

@ -118,6 +118,7 @@ export class PageMain extends Component<Props, State> {
const {bangs, editorError} = this.state; const {bangs, editorError} = this.state;
const availableBangs = bangs.map((bang) => { const availableBangs = bangs.map((bang) => {
const active = bang.id === this.state.editorBang.id ? 'active' : '';
const onClick = () => { const onClick = () => {
this.setState({ this.setState({
editorBang: {...bang}, editorBang: {...bang},
@ -126,7 +127,7 @@ export class PageMain extends Component<Props, State> {
return html` return html`
<li> <li>
<button onClick=${onClick}> <button class="${active}" onClick=${onClick}>
${bang.name}<span class="bang-id">${bang.id}</span> ${bang.name}<span class="bang-id">${bang.id}</span>
</button> </button>
</li> </li>

5
source/options/scss/components/page-main.scss
View File

@ -123,6 +123,11 @@
padding: 16px; padding: 16px;
width: 100%; width: 100%;
&.active {
border-color: var(--da-3);
color: var(--da-3);
}
&:hover { &:hover {
background-color: var(--da-3); background-color: var(--da-3);
border-color: var(--da-3); border-color: var(--da-3);