From 1b081a927288ff2f43025d688e2fa15cf6ce6be1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 19 Jul 2023 17:00:46 -0400
Subject: [PATCH] Make reply-or-quote selection display as horizontal button
group
---
.../post_status_form/post_status_form.vue | 50 ++++++-------------
1 file changed, 14 insertions(+), 36 deletions(-)
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0d7938854..9b108a5aa 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -129,44 +129,32 @@
<div
v-if="quotable"
role="radiogroup"
- class="reply-or-quote-selector"
+ class="btn-group reply-or-quote-selector"
>
- <div
- class="reply-or-quote-option"
+ <button
+ :id="`reply-or-quote-option-${randomSeed}-reply`"
+ class="btn button-default reply-or-quote-option"
+ :class="{ toggled: !newStatus.quoting }"
tabindex="0"
role="radio"
:aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
:aria-checked="!newStatus.quoting"
@click="newStatus.quoting = false"
>
- <input
- type="radio"
- :checked="!newStatus.quoting"
- >
- <label class="reply-or-quote-option-text">
- <span :id="`reply-or-quote-option-${randomSeed}-reply`">
- {{ $t('post_status.reply_option') }}
- </span>
- </label>
- </div>
- <div
- class="reply-or-quote-option"
+ {{ $t('post_status.reply_option') }}
+ </button>
+ <button
+ :id="`reply-or-quote-option-${randomSeed}-quote`"
+ class="btn button-default reply-or-quote-option"
+ :class="{ toggled: newStatus.quoting }"
tabindex="0"
role="radio"
:aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
:aria-checked="newStatus.quoting"
@click="newStatus.quoting = true"
>
- <input
- type="radio"
- :checked="newStatus.quoting"
- >
- <label class="reply-or-quote-option-text">
- <span :id="`reply-or-quote-option-${randomSeed}-quote`">
- {{ $t('post_status.quote_option') }}
- </span>
- </label>
- </div>
+ {{ $t('post_status.quote_option') }}
+ </button>
</div>
<EmojiInput
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
@@ -463,17 +451,7 @@
}
.reply-or-quote-selector {
- display: flex;
- flex-direction: column;
-
- .reply-or-quote-option {
- display: flex;
- align-items: center;
-
- .reply-or-quote-option-text::before {
- vertical-align: middle;
- }
- }
+ margin-bottom: 0.5em;
}
.text-format {
--
GitLab