diff options
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 4 | ||||
| -rw-r--r-- | src/components/moderation_tools/moderation_tools.vue | 4 | ||||
| -rw-r--r-- | src/components/popper/popper.scss | 147 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 1 |
4 files changed, 91 insertions, 65 deletions
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 73f3d936..23c1adb6 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -2,10 +2,12 @@ <v-popover v-if="enabled" trigger="click" + placement="top" class="extra-button-popover" + :offset="5" :container="false" > - <div class="popper-wrapper" slot="popover"> + <div slot="popover"> <div class="dropdown-menu"> <button v-if="!status.pinned && canPin" diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 4990a151..d97ca3aa 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -4,10 +4,12 @@ trigger="click" class="moderation-tools-popover" :container="false" + placement="bottom-end" + :offset="5" @show="showDropDown = true" @hide="showDropDown = false" > - <div class="popper-wrapper" slot="popover"> + <div slot="popover"> <div class="dropdown-menu"> <span v-if="user.is_local"> <button diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index cfc5c8e7..279b01be 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -1,71 +1,99 @@ @import '../../_variables.scss'; -.popper-wrapper { +.tooltip.popover { z-index: 8; -} -.popper-wrapper .popper__arrow { - width: 0; - height: 0; - border-style: solid; - position: absolute; - margin: 5px; -} + .popover-inner { + box-shadow: 1px 1px 4px rgba(0,0,0,.6); + box-shadow: var(--panelShadow); + border-radius: $fallback--btnRadius; + border-radius: var(--btnRadius, $fallback--btnRadius); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + } -.popper-wrapper[x-placement^="top"] { - margin-bottom: 5px; -} + .popover-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: $fallback--bg; + border-color: var(--bg, $fallback--bg); + z-index: 1; + } -.popper-wrapper[x-placement^="top"] .popper__arrow { - border-width: 5px 5px 0 5px; - border-color: $fallback--bg transparent transparent transparent; - border-color: var(--bg, $fallback--bg) transparent transparent transparent; - bottom: -5px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; -} + &[x-placement^="top"] { + margin-bottom: 5px; + + .popover-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } -.popper-wrapper[x-placement^="bottom"] { - margin-top: 5px; -} + &[x-placement^="bottom"] { + margin-top: 5px; + + .popover-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } -.popper-wrapper[x-placement^="bottom"] .popper__arrow { - border-width: 0 5px 5px 5px; - border-color: transparent transparent $fallback--bg transparent; - border-color: transparent transparent var(--bg, $fallback--bg) transparent; - top: -5px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; -} + &[x-placement^="right"] { + margin-left: 5px; + + .popover-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } -.popper-wrapper[x-placement^="right"] { - margin-left: 5px; -} + &[x-placement^="left"] { + margin-right: 5px; -.popper-wrapper[x-placement^="right"] .popper__arrow { - border-width: 5px 5px 5px 0; - border-color: transparent $fallback--bg transparent transparent; - border-color: transparent var(--bg, $fallback--bg) transparent transparent; - left: -5px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; -} + .popover-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } -.popper-wrapper[x-placement^="left"] { - margin-right: 5px; -} + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } -.popper-wrapper[x-placement^="left"] .popper__arrow { - border-width: 5px 0 5px 5px; - border-color: transparent transparent transparent $fallback--bg; - border-color: transparent transparent transparent var(--bg, $fallback--bg); - right: -5px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } } .dropdown-menu { @@ -76,13 +104,6 @@ list-style: none; max-width: 100vw; z-index: 10; - box-shadow: 1px 1px 4px rgba(0,0,0,.6); - box-shadow: var(--panelShadow); - border: none; - border-radius: $fallback--btnRadius; - border-radius: var(--btnRadius, $fallback--btnRadius); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); .dropdown-divider { height: 0; diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index f987fbbb..ef3a5144 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -503,6 +503,7 @@ } } .user-interactions { + position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; |