diff options
| author | Shpuld Shpludson <shp@cock.li> | 2020-12-01 11:02:46 +0000 |
|---|---|---|
| committer | Shpuld Shpludson <shp@cock.li> | 2020-12-01 11:02:46 +0000 |
| commit | fdfb8810c1d8ab64969c38aa1a6bce1daf013249 (patch) | |
| tree | 14efedfdbbfca297da51819235c71ca685cc9902 /src/components/extra_buttons/extra_buttons.vue | |
| parent | c655699935ce6fd8b5d0a744dafd6403e32277b7 (diff) | |
| parent | 655d985a82d194cd38c5ec75f1b0153804965d5f (diff) | |
Merge branch 'fix/use-semantically-correct-buttons' into 'develop'
Fix #1001 Accessibility: Use semantically correct buttons (almost) everywhere
Closes #1001
See merge request pleroma/pleroma-fe!1293
Diffstat (limited to 'src/components/extra_buttons/extra_buttons.vue')
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 32 |
1 files changed, 18 insertions, 14 deletions
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index a33f6e87..e687d487 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -2,8 +2,9 @@ <Popover trigger="click" placement="top" - class="extra-button-popover" + :offset="{ y: 5 }" :bound-to="{ x: 'container' }" + remove-padding > <div slot="content" @@ -12,7 +13,7 @@ <div class="dropdown-menu"> <button v-if="canMute && !status.thread_muted" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="muteConversation" > <FAIcon @@ -22,7 +23,7 @@ </button> <button v-if="canMute && status.thread_muted" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unmuteConversation" > <FAIcon @@ -32,7 +33,7 @@ </button> <button v-if="!status.pinned && canPin" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="pinStatus" @click="close" > @@ -43,7 +44,7 @@ </button> <button v-if="status.pinned && canPin" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" @click="close" > @@ -54,7 +55,7 @@ </button> <button v-if="!status.bookmarked" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="bookmarkStatus" @click="close" > @@ -65,7 +66,7 @@ </button> <button v-if="status.bookmarked" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unbookmarkStatus" @click="close" > @@ -76,7 +77,7 @@ </button> <button v-if="canDelete" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" @click="close" > @@ -86,7 +87,7 @@ /><span>{{ $t("status.delete") }}</span> </button> <button - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="copyLink" @click="close" > @@ -97,9 +98,12 @@ </button> </div> </div> - <span slot="trigger"> + <span + slot="trigger" + class="ExtraButtons" + > <FAIcon - class="ExtraButtons fa-scale-110 fa-old-padding" + class="fa-scale-110 fa-old-padding" icon="ellipsis-h" /> </span> @@ -112,11 +116,11 @@ @import '../../_variables.scss'; .ExtraButtons { - cursor: pointer; position: static; + padding: 10px; + margin: -10px; - &:hover, - .extra-button-popover.open & { + &:hover .svg-inline--fa { color: $fallback--text; color: var(--text, $fallback--text); } |