scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-08 08:27:44 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix css for label view page [SCI-7085]

Browse source
This commit is contained in:
Anton 2022-08-25 13:25:34 +02:00
parent 771c40d4f0
commit 9daa3f6d69
4 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/label_templates/label_preview.scss
View file

@ -14,7 +14,7 @@
}
.label-preview__options-button {
color: $brand-primary-light;
color: $brand-primary;
cursor: pointer;
}

3
app/assets/stylesheets/label_templates/show.scss
View file

@ -39,6 +39,7 @@
}
.description {
margin: .5em 0 1em;
padding-left: 16px;
}
}
@ -92,6 +93,7 @@
.label-view-container {
cursor: pointer;
height: calc(100% - 3.5em);
margin-top: .5em;
padding: .5em;
position: relative;
white-space: pre;
@ -115,6 +117,7 @@
.label-textarea {
height: 100%;
margin-top: .5em;
padding: .5em;
width: 100%;
}

2
app/javascript/vue/label_template/components/label_preview.vue
View file

@ -7,7 +7,7 @@
<div class="label-preview__options-button" @click="optionsOpen = !optionsOpen">
{{ i18n.t('label_templates.label_preview.options') }}
<i class="fas" :class="{ 'fa-angle-down': !optionsOpen, 'fa-angle-up': optionsOpen }"></i>
<i class="fas" :class="{ 'fa-chevron-down': !optionsOpen, 'fa-chevron-up': optionsOpen }"></i>
</div>
</div>
<div class="label-preview__controls" :class="{'open': optionsOpen}">

24
app/javascript/vue/label_template/container.vue
View file

@ -48,8 +48,10 @@
<div class="title">
{{ i18n.t('label_templates.show.content_title', { format: labelTemplate.attributes.language_type.toUpperCase() }) }}
</div>
<InsertFieldDropdown :labelTemplate="labelTemplate"
@insertField="insertField"
<InsertFieldDropdown
v-if="editingContent"
:labelTemplate="labelTemplate"
@insertField="insertField"
/>
</div>
<template v-if="editingContent">
@ -66,7 +68,7 @@
<i class="fas fa-sync"></i>
{{ i18n.t('label_templates.show.buttons.refresh') }}
</div>
<div class="btn btn-secondary" @click="editingContent = false">
<div class="btn btn-secondary" @mousedown="disableContentEdit">
{{ i18n.t('general.cancel') }}
</div>
<div class="btn btn-primary save-template" @click="updateContent">
@ -122,13 +124,17 @@
},
methods: {
enableContentEdit() {
this.editingContent = true
this.editingContent = true;
this.$nextTick(() => {
this.$refs.contentInput.focus();
$(this.$refs.contentInput).prop('selectionStart', this.cursorPos)
$(this.$refs.contentInput).prop('selectionEnd', this.cursorPos)
$(this.$refs.contentInput).prop('selectionStart', this.cursorPos);
$(this.$refs.contentInput).prop('selectionEnd', this.cursorPos);
});
},
disableContentEdit() {
this.editingContent = false;
this.newContent = this.labelTemplate.attributes.content;
},
updateName(newName) {
$.ajax({
url: this.labelTemplate.attributes.urls.update,
@ -150,14 +156,14 @@
});
},
updateContent() {
this.cursorPos = $(this.$refs.contentInput).prop('selectionStart')
this.cursorPos = $(this.$refs.contentInput).prop('selectionStart');
$.ajax({
url: this.labelTemplate.attributes.urls.update,
type: 'PATCH',
data: {label_template: {content: this.newContent}},
success: (result) => {
this.labelTemplate.attributes.content = result.data.attributes.content
this.editingContent = false
this.labelTemplate.attributes.content = result.data.attributes.content;
this.editingContent = false;
}
});
},