commit: 647d75f27c89b0972a58c62e7ab741d339c545d0
parent 6f3acb3c1beeaf50675f55afe40911d5fb26f2bf
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Tue, 9 Feb 2021 13:12:42 +0000
Merge branch 'reactbutton-consistency' into 'develop'
Some fixes for reactbutton/extrabuttons
See merge request pleroma/pleroma-fe!1340
Diffstat:
3 files changed, 62 insertions(+), 46 deletions(-)
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
@@ -139,6 +139,11 @@
@import '../../_variables.scss';
.ExtraButtons {
+ /* override of popover internal stuff */
+ .popover-trigger-button {
+ width: auto;
+ }
+
.popover-trigger {
position: static;
padding: 10px;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
@@ -7,6 +7,7 @@
ref="trigger"
class="button-unstyled -fullwidth popover-trigger-button"
@click="onClick"
+ type="button"
>
<slot name="trigger" />
</button>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
@@ -1,6 +1,7 @@
<template>
<Popover
trigger="click"
+ class="ReactButton"
placement="top"
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
@@ -42,7 +43,7 @@
</div>
<span
slot="trigger"
- class="ReactButton"
+ class="popover-trigger"
:title="$t('tool_tip.add_reaction')"
>
<FAIcon
@@ -58,62 +59,71 @@
<style lang="scss">
@import '../../_variables.scss';
-.reaction-picker-filter {
- padding: 0.5em;
- display: flex;
- input {
- flex: 1;
+.ReactButton {
+ .reaction-picker-filter {
+ padding: 0.5em;
+ display: flex;
+
+ input {
+ flex: 1;
+ }
}
-}
-.reaction-picker-divider {
- height: 1px;
- width: 100%;
- margin: 0.5em;
- background-color: var(--border, $fallback--border);
-}
+ .reaction-picker-divider {
+ height: 1px;
+ width: 100%;
+ margin: 0.5em;
+ background-color: var(--border, $fallback--border);
+ }
-.reaction-picker {
- width: 10em;
- height: 9em;
- font-size: 1.5em;
- overflow-y: scroll;
- display: flex;
- flex-wrap: wrap;
- padding: 0.5em;
- text-align: center;
- align-content: flex-start;
- user-select: none;
+ .reaction-picker {
+ width: 10em;
+ height: 9em;
+ font-size: 1.5em;
+ overflow-y: scroll;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0.5em;
+ text-align: center;
+ align-content: flex-start;
+ user-select: none;
- mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
- linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
- linear-gradient(to top, white, white);
- transition: mask-size 150ms;
- mask-size: 100% 20px, 100% 20px, auto;
- // Autoprefixed seem to ignore this one, and also syntax is different
- -webkit-mask-composite: xor;
- mask-composite: exclude;
+ mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+ linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+ linear-gradient(to top, white, white);
+ transition: mask-size 150ms;
+ mask-size: 100% 20px, 100% 20px, auto;
- .emoji-button {
- cursor: pointer;
+ /* Autoprefixed seem to ignore this one, and also syntax is different */
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
- flex-basis: 20%;
- line-height: 1.5em;
- align-content: center;
+ .emoji-button {
+ cursor: pointer;
- &:hover {
- transform: scale(1.25);
+ flex-basis: 20%;
+ line-height: 1.5em;
+ align-content: center;
+
+ &:hover {
+ transform: scale(1.25);
+ }
}
}
-}
-.ReactButton {
- padding: 10px;
- margin: -10px;
+ /* override of popover internal stuff */
+ .popover-trigger-button {
+ width: auto;
+ }
+
+ .popover-trigger {
+ padding: 10px;
+ margin: -10px;
- &:hover .svg-inline--fa {
- color: $fallback--text;
- color: var(--text, $fallback--text);
+ &:hover .svg-inline--fa {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ }
}
}