mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-11-03 21:34:30 +08:00
Refactor LibraryEditField component to use BFormTextarea and improve text handling
- Updated the textarea component to use BFormTextarea for consistency. - Added spacing and formatting adjustments for better readability. - Enhanced the toggle functionality for expanded text display.
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="text-field">
|
||||
<!-- edit mode -->
|
||||
<div v-if="isEditMode">
|
||||
<b-form-textarea class="form-control" :value="text" rows="3" no-resize @change="updateValue" />
|
||||
<BFormTextarea class="form-control" :value="text" rows="3" no-resize @change="updateValue" />
|
||||
</div>
|
||||
<!-- shrink long text -->
|
||||
<div v-else-if="text && text.length > maxDescriptionLength && !isExpanded">
|
||||
@@ -13,6 +13,7 @@
|
||||
:title="text"
|
||||
v-html="linkify(sanitize(text.substring(0, maxDescriptionLength)))">
|
||||
</span>
|
||||
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<span :title="text">...</span>
|
||||
<a class="more-text-btn" href="javascript:void(0)" @click="toggleDescriptionExpand">(more) </a>
|
||||
@@ -21,13 +22,14 @@
|
||||
<div v-else>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="linkify(sanitize(text ?? ''))"></div>
|
||||
|
||||
<!-- hide toggle expand if text is too short -->
|
||||
<a
|
||||
v-if="text && text.length > maxDescriptionLength"
|
||||
class="more-text-btn"
|
||||
href="javascript:void(0)"
|
||||
@click="toggleDescriptionExpand"
|
||||
>(less)
|
||||
@click="toggleDescriptionExpand">
|
||||
(less)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,16 +37,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BootstrapVue from "bootstrap-vue";
|
||||
import { BFormTextarea } from "bootstrap-vue";
|
||||
import purify from "dompurify";
|
||||
import linkifyHtml from "linkify-html";
|
||||
import Vue from "vue";
|
||||
|
||||
import { MAX_DESCRIPTION_LENGTH } from "@/components/Libraries/library-utils";
|
||||
|
||||
Vue.use(BootstrapVue);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BFormTextarea,
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
|
||||
Reference in New Issue
Block a user