cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix: fix pressed color on media dialog buttons (#931)

This commit is contained in:
Nolan Lawson 2019-02-03 11:10:52 -08:00 committed by GitHub
parent 5e082e5f5f
commit 9231e66612
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/routes/_components/IconButton.html
View File

@ -55,19 +55,20 @@
fill: var(--action-button-fill-color-hover); fill: var(--action-button-fill-color-hover);
} }
.icon-button.not-pressable:active .icon-button-svg { .icon-button.not-pressable:active .icon-button-svg,
.icon-button.same-pressed:active .icon-button-svg {
fill: var(--action-button-fill-color-active); fill: var(--action-button-fill-color-active);
} }
.icon-button.pressed .icon-button-svg { .icon-button.pressed.not-same-pressed .icon-button-svg {
fill: var(--action-button-fill-color-pressed); fill: var(--action-button-fill-color-pressed);
} }
.icon-button.pressed:hover .icon-button-svg { .icon-button.pressed.not-same-pressed:hover .icon-button-svg {
fill: var(--action-button-fill-color-pressed-hover); fill: var(--action-button-fill-color-pressed-hover);
} }
.icon-button.pressed:active .icon-button-svg { .icon-button.pressed.not-same-pressed:active .icon-button-svg {
fill: var(--action-button-fill-color-pressed-active); fill: var(--action-button-fill-color-pressed-active);
} }
@ -83,38 +84,23 @@
fill: var(--action-button-deemphasized-fill-color-hover); fill: var(--action-button-deemphasized-fill-color-hover);
} }
.icon-button.muted-style.not-pressable:active .icon-button-svg { .icon-button.muted-style.not-pressable:active .icon-button-svg,
.icon-button.muted-style.same-pressed:active .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-active); fill: var(--action-button-deemphasized-fill-color-active);
} }
.icon-button.muted-style.pressed .icon-button-svg { .icon-button.muted-style.pressed.not-same-pressed .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed); fill: var(--action-button-deemphasized-fill-color-pressed);
} }
.icon-button.muted-style.pressed:hover .icon-button-svg { .icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed-hover); fill: var(--action-button-deemphasized-fill-color-pressed-hover);
} }
.icon-button.muted-style.pressed:active .icon-button-svg { .icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed-active); fill: var(--action-button-deemphasized-fill-color-pressed-active);
} }
/*
* disable the separate press color (noPressColor)
*/
.icon-button.pressed.no-press-color .icon-button-svg {
fill: var(--action-button-fill-color);
}
.icon-button.pressed.no-press-color:hover .icon-button-svg {
fill: var(--action-button-fill-color-hover);
}
.icon-button.pressed.no-press-color:active .icon-button-svg {
fill: var(--action-button-fill-color-active);
}
</style> </style>
<script> <script>
import { classname } from '../_utils/classname' import { classname } from '../_utils/classname'
@ -131,18 +117,18 @@
pressed: false, pressed: false,
className: void 0, className: void 0,
delegateKey: void 0, delegateKey: void 0,
noPressColor: false sameColorWhenPressed: false
}), }),
store: () => store, store: () => store,
computed: { computed: {
computedClass: ({ pressable, pressed, big, muted, noPressColor, className }) => { computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => {
return classname( return classname(
'icon-button', 'icon-button',
!pressable && 'not-pressable', !pressable && 'not-pressable',
pressed && 'pressed', pressed && 'pressed',
big && 'big-icon', big && 'big-icon',
muted && 'muted-style', muted && 'muted-style',
noPressColor && 'no-press-color', sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
className className
) )
} }

2
src/routes/_components/dialog/components/MediaDialog.html
View File

@ -33,7 +33,7 @@
label="Show {nth(i)} media" label="Show {nth(i)} media"
pressed={i === scrolledItem} pressed={i === scrolledItem}
href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'} href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
noPressColor={true} sameColorWhenPressed={true}
on:click="onClick(i)" on:click="onClick(i)"
/> />
{/each} {/each}