Add active styling to existing bangs while editing.
This commit is contained in:
parent
06a1ee5550
commit
d66b43e9fd
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue