fix(ui): Textarea smaller and ghost buttons

This commit is contained in:
ArneBo 2025-01-24 03:01:43 +01:00
parent 1deb3df8ce
commit 5f1c28e588
2 changed files with 12 additions and 12 deletions

View File

@ -196,25 +196,25 @@ const focus = () => textarea.value.focus()
@keydown.ctrl.shift.x.exact.prevent="strikethrough" @keydown.ctrl.k.exact.prevent="link" :maxlength="max"
:placeholder="placeholder" v-model="model" id="textarea_id" />
<div class="textarea-buttons">
<Button @click="preview = !preview" icon="bi-eye" color="secondary" :aria-pressed="preview || undefined" />
<Button ghost @click="preview = !preview" icon="bi-eye" color="secondary" :aria-pressed="preview || undefined" />
<div class="separator" />
<Button @click="heading1" icon="bi-type-h1" color="secondary" :aria-pressed="isHeading1 || undefined" :disabled="preview" />
<Button @click="heading2" icon="bi-type-h2" color="secondary" :aria-pressed="isHeading2 || undefined" :disabled="preview" />
<Button @click="paragraph" icon="bi-paragraph" color="secondary" :aria-pressed="isParagraph || undefined" :disabled="preview" />
<Button @click="quote" icon="bi-quote" color="secondary" :aria-pressed="isQuote || undefined" :disabled="preview" />
<Button @click="orderedList" icon="bi-list-ol" color="secondary" :aria-pressed="isOrderedList || undefined"
<Button ghost @click="heading1" icon="bi-type-h1" color="secondary" :aria-pressed="isHeading1 || undefined" :disabled="preview" />
<Button ghost @click="heading2" icon="bi-type-h2" color="secondary" :aria-pressed="isHeading2 || undefined" :disabled="preview" />
<Button ghost @click="paragraph" icon="bi-paragraph" color="secondary" :aria-pressed="isParagraph || undefined" :disabled="preview" />
<Button ghost @click="quote" icon="bi-quote" color="secondary" :aria-pressed="isQuote || undefined" :disabled="preview" />
<Button ghost @click="orderedList" icon="bi-list-ol" color="secondary" :aria-pressed="isOrderedList || undefined"
:disabled="preview" />
<Button @click="unorderedList" icon="bi-list-ul" color="secondary" :aria-pressed="isUnorderedList || undefined"
<Button ghost @click="unorderedList" icon="bi-list-ul" color="secondary" :aria-pressed="isUnorderedList || undefined"
:disabled="preview" />
<div class="separator" />
<Button @click="bold" icon="bi-type-bold" color="secondary" :disabled="preview" />
<Button @click="italics" icon="bi-type-italic" color="secondary" :disabled="preview" />
<Button @click="strikethrough" icon="bi-type-strikethrough" color="secondary" :disabled="preview" />
<Button @click="link" icon="bi-link-45deg" color="secondary" :disabled="preview" />
<Button ghost @click="bold" icon="bi-type-bold" color="secondary" :disabled="preview" />
<Button ghost @click="italics" icon="bi-type-italic" color="secondary" :disabled="preview" />
<Button ghost @click="strikethrough" icon="bi-type-strikethrough" color="secondary" :disabled="preview" />
<Button ghost @click="link" icon="bi-link-45deg" color="secondary" :disabled="preview" />
<span v-if="max !== Infinity && typeof max === 'number'" class="letter-count">{{ max - model.length }}</span>
</div>

View File

@ -102,7 +102,7 @@
> textarea {
display: block;
width: 100%;
min-height: 240px;
min-height: 160px;
padding: 8px 12px 40px;
font-family: monospace;
background: transparent;