puniko/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

migrate popper css

Browse source
This commit is contained in:
taehoon 2019-07-11 11:01:12 -04:00
parent 4f74392641
commit c4789a348f
4 changed files with 91 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/extra_buttons/extra_buttons.vue
View file

@ -2,10 +2,12 @@
<v-popover <v-popover
v-if="enabled" v-if="enabled"
trigger="click" trigger="click"
placement="top"
class="extra-button-popover" class="extra-button-popover"
:offset="5"
:container="false" :container="false"
> >
<div class="popper-wrapper" slot="popover"> <div slot="popover">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"

4
src/components/moderation_tools/moderation_tools.vue
View file

@ -4,10 +4,12 @@
trigger="click" trigger="click"
class="moderation-tools-popover" class="moderation-tools-popover"
:container="false" :container="false"
placement="bottom-end"
:offset="5"
@show="showDropDown = true" @show="showDropDown = true"
@hide="showDropDown = false" @hide="showDropDown = false"
> >
<div class="popper-wrapper" slot="popover"> <div slot="popover">
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="user.is_local"> <span v-if="user.is_local">
<button <button

85
src/components/popper/popper.scss
View file

@ -1,72 +1,100 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.popper-wrapper { .tooltip.popover {
z-index: 8; z-index: 8;
.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 .popper__arrow { .popover-arrow {
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
position: absolute; position: absolute;
margin: 5px; margin: 5px;
border-color: $fallback--bg;
border-color: var(--bg, $fallback--bg);
z-index: 1;
} }
.popper-wrapper[x-placement^="top"] { &[x-placement^="top"] {
margin-bottom: 5px; margin-bottom: 5px;
}
.popper-wrapper[x-placement^="top"] .popper__arrow { .popover-arrow {
border-width: 5px 5px 0 5px; border-width: 5px 5px 0 5px;
border-color: $fallback--bg transparent transparent transparent; border-left-color: transparent !important;
border-color: var(--bg, $fallback--bg) transparent transparent transparent; border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px; bottom: -5px;
left: calc(50% - 5px); left: calc(50% - 5px);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.popper-wrapper[x-placement^="bottom"] {
margin-top: 5px;
} }
.popper-wrapper[x-placement^="bottom"] .popper__arrow { &[x-placement^="bottom"] {
margin-top: 5px;
.popover-arrow {
border-width: 0 5px 5px 5px; border-width: 0 5px 5px 5px;
border-color: transparent transparent $fallback--bg transparent; border-left-color: transparent !important;
border-color: transparent transparent var(--bg, $fallback--bg) transparent; border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px; top: -5px;
left: calc(50% - 5px); left: calc(50% - 5px);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.popper-wrapper[x-placement^="right"] {
margin-left: 5px;
} }
.popper-wrapper[x-placement^="right"] .popper__arrow { &[x-placement^="right"] {
margin-left: 5px;
.popover-arrow {
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
border-color: transparent $fallback--bg transparent transparent; border-left-color: transparent !important;
border-color: transparent var(--bg, $fallback--bg) transparent transparent; border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px; left: -5px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.popper-wrapper[x-placement^="left"] {
margin-right: 5px;
} }
.popper-wrapper[x-placement^="left"] .popper__arrow { &[x-placement^="left"] {
margin-right: 5px;
.popover-arrow {
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent $fallback--bg; border-top-color: transparent !important;
border-color: transparent transparent transparent var(--bg, $fallback--bg); border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px; right: -5px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}
.dropdown-menu { .dropdown-menu {
display: block; display: block;
@ -76,13 +104,6 @@
list-style: none; list-style: none;
max-width: 100vw; max-width: 100vw;
z-index: 10; 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 { .dropdown-divider {
height: 0; height: 0;

1
src/components/user_card/user_card.vue
View file

@ -503,6 +503,7 @@
} }
} }
.user-interactions { .user-interactions {
position: relative;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;