aboutsummaryrefslogtreecommitdiff
path: root/src/components/reply_button/reply_button.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/reply_button/reply_button.vue')
-rw-r--r--src/components/reply_button/reply_button.vue32
1 files changed, 28 insertions, 4 deletions
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index c17041da..56156c55 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -7,10 +7,24 @@
:title="$t('tool_tip.reply')"
@click.prevent="$emit('toggle')"
>
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="reply"
- />
+ <FALayers class="fa-old-padding-layer">
+ <FAIcon
+ class="fa-scale-110"
+ icon="reply"
+ />
+ <FAIcon
+ v-if="!replying"
+ class="focus-marker"
+ transform="shrink-6 up-8 right-16"
+ icon="plus"
+ />
+ <FAIcon
+ v-else
+ class="focus-marker"
+ transform="shrink-6 up-8 right-16"
+ icon="times"
+ />
+ </FALayers>
</button>
<span v-else>
<FAIcon
@@ -52,6 +66,16 @@
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
+
+ .focus-marker {
+ visibility: hidden;
+ }
+
+ &:hover, &:focus {
+ .focus-marker {
+ visibility: visible;
+ }
+ }
}
}