Adds button to HelpButton component. Create getHelperMessage and getHelperTitle functions on i18n object to access Help information on each entities.
This commit is contained in:
mateuswetah
parent
17d4122860
commit
c00bf47588
|
|
@ -7,8 +7,12 @@
|
|||
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
|
||||
<label class="label">
|
||||
{{$i18n.get('label_name')}}
|
||||
<span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
|
||||
<a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
|
||||
<span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'name')"
|
||||
:message="$i18n.getHelperMessage('fields', 'name')">
|
||||
</help-button>
|
||||
</label>
|
||||
<b-input v-model="editForm.name" name="name" @focus="clearErrors('name')"></b-input>
|
||||
</b-field>
|
||||
|
||||
|
|
@ -16,9 +20,13 @@
|
|||
:addons="false"
|
||||
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
|
||||
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
|
||||
<label class="label">{{$i18n.get('label_description')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon>
|
||||
<help-tooltip title="Ajuda Gente!" message="Este é um exemplo de mensagem de ajuda. Aqui vai um monte de informações úteis."></help-tooltip>
|
||||
</a></label>
|
||||
<label class="label">
|
||||
{{$i18n.get('label_description')}}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'description')"
|
||||
:message="$i18n.getHelperMessage('fields', 'description')">
|
||||
</help-button>
|
||||
</label>
|
||||
<b-input type="textarea" name="description" v-model="editForm.description" @focus="clearErrors('description')" ></b-input>
|
||||
</b-field>
|
||||
|
||||
|
|
@ -26,7 +34,13 @@
|
|||
:addons="false"
|
||||
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
|
||||
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
|
||||
<label class="label">{{$i18n.get('label_status')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
|
||||
<label class="label">
|
||||
{{$i18n.get('label_status')}}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'status')"
|
||||
:message="$i18n.getHelperMessage('fields', 'status')">
|
||||
</help-button>
|
||||
</label>
|
||||
<div class="inline-block">
|
||||
<b-radio
|
||||
@focus="clearErrors('label_status')"
|
||||
|
|
@ -62,7 +76,10 @@
|
|||
name="required">
|
||||
{{ $i18n.get('label_required') }}
|
||||
</b-checkbox>
|
||||
<a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'required')"
|
||||
:message="$i18n.getHelperMessage('fields', 'required')">
|
||||
</help-button>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
|
|
@ -76,7 +93,10 @@
|
|||
name="multiple">
|
||||
{{ $i18n.get('label_allow_multiple') }}
|
||||
</b-checkbox>
|
||||
<a class="help-button"> <b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'multiple')"
|
||||
:message="$i18n.getHelperMessage('fields', 'multiple')">
|
||||
</help-button>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
|
|
@ -90,16 +110,19 @@
|
|||
name="collecion_key">
|
||||
{{ $i18n.get('label_unique_value') }}
|
||||
</b-checkbox>
|
||||
<a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('fields', 'unique')"
|
||||
:message="$i18n.getHelperMessage('fields', 'unique')">
|
||||
</help-button>
|
||||
</b-field>
|
||||
</b-field>
|
||||
|
||||
<component
|
||||
:errors="formErrors['field_type_options']"
|
||||
v-if="(editForm.field_type_object && editForm.field_type_object.form_component) || editForm.edit_form == ''"
|
||||
:is="editForm.field_type_object.form_component"
|
||||
:field="editForm"
|
||||
v-model="editForm.field_type_options">
|
||||
:errors="formErrors['field_type_options']"
|
||||
v-if="(editForm.field_type_object && editForm.field_type_object.form_component) || editForm.edit_form == ''"
|
||||
:is="editForm.field_type_object.form_component"
|
||||
:field="editForm"
|
||||
v-model="editForm.field_type_options">
|
||||
</component>
|
||||
<div v-html="editForm.edit_form" v-else></div>
|
||||
|
||||
|
|
@ -117,7 +140,6 @@
|
|||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import HelpTooltip from '../other/help-tooltip.vue';
|
||||
|
||||
export default {
|
||||
name: 'FieldEditionForm',
|
||||
|
|
@ -137,9 +159,6 @@ export default {
|
|||
isRepositoryLevel: false,
|
||||
collectionId: ''
|
||||
},
|
||||
components: {
|
||||
HelpTooltip
|
||||
},
|
||||
created() {
|
||||
this.editForm = this.editedField;
|
||||
this.oldForm = JSON.parse(JSON.stringify(this.originalField));
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@
|
|||
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
|
||||
<label class="label">
|
||||
{{$i18n.get('label_name')}}
|
||||
<span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
|
||||
<a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
|
||||
<span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('filters', 'name')"
|
||||
:message="$i18n.getHelperMessage('filters', 'name')">
|
||||
</help-button>
|
||||
</label>
|
||||
<b-input v-model="editForm.name" name="name" @focus="clearErrors('name')"></b-input>
|
||||
</b-field>
|
||||
|
|
@ -17,7 +20,13 @@
|
|||
:addons="false"
|
||||
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
|
||||
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
|
||||
<label class="label">{{$i18n.get('label_description')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
|
||||
<label class="label">
|
||||
{{$i18n.get('label_description')}}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('filters', 'description')"
|
||||
:message="$i18n.getHelperMessage('filters', 'description')">
|
||||
</help-button>
|
||||
</label>
|
||||
<b-input type="textarea" name="description" v-model="editForm.description" @focus="clearErrors('description')" ></b-input>
|
||||
</b-field>
|
||||
|
||||
|
|
@ -25,7 +34,13 @@
|
|||
:addons="false"
|
||||
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
|
||||
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
|
||||
<label class="label">{{$i18n.get('label_status')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
|
||||
<label class="label">
|
||||
{{$i18n.get('label_status')}}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('filters', 'status')"
|
||||
:message="$i18n.getHelperMessage('filters', 'status')">
|
||||
</help-button>
|
||||
</label>
|
||||
<div class="inline-block">
|
||||
<b-radio
|
||||
@focus="clearErrors('label_status')"
|
||||
|
|
@ -46,14 +61,13 @@
|
|||
</b-radio>
|
||||
</div>
|
||||
</b-field>
|
||||
<br>
|
||||
|
||||
<component
|
||||
:errors="formErrors['filter_type_options']"
|
||||
v-if="(editForm.filter_type_object && editForm.filter_type_object.form_component) || editForm.edit_form == ''"
|
||||
:is="editForm.filter_type_object.form_component"
|
||||
:filter="editForm"
|
||||
v-model="editForm.filter_type_options">
|
||||
:errors="formErrors['filter_type_options']"
|
||||
v-if="(editForm.filter_type_object && editForm.filter_type_object.form_component) || editForm.edit_form == ''"
|
||||
:is="editForm.filter_type_object.form_component"
|
||||
:filter="editForm"
|
||||
v-model="editForm.filter_type_options">
|
||||
</component>
|
||||
<div v-html="editForm.edit_form" v-else></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@
|
|||
v-if="field.id != undefined"
|
||||
class="label-details">
|
||||
({{ $i18n.get(field.field_type_object.component) }})
|
||||
<em v-if="(editForms[field.id] != undefined && editForms[field.id].saved != true) || field.status == 'auto-draft'">
|
||||
<span class="not-saved" v-if="(editForms[field.id] != undefined && editForms[field.id].saved != true) || field.status == 'auto-draft'">
|
||||
{{ $i18n.get('info_not_saved') }}
|
||||
</em>
|
||||
</span>
|
||||
</span>
|
||||
<span class="loading-spinner" v-if="field.id == undefined"></span>
|
||||
<span class="controls" v-if="field.id !== undefined">
|
||||
|
|
@ -377,6 +377,11 @@ export default {
|
|||
font-weight: normal;
|
||||
color: $gray;
|
||||
}
|
||||
.not-saved {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: $danger;
|
||||
}
|
||||
.controls {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
|
|
@ -396,7 +401,7 @@ export default {
|
|||
cursor: default;
|
||||
background-color: white !important;
|
||||
|
||||
.label-details, .icon {
|
||||
.handle .label-details, .handle .icon, .handle .not-saved {
|
||||
color: $gray !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -406,7 +411,7 @@ export default {
|
|||
.field-name {
|
||||
color: $primary;
|
||||
}
|
||||
.label-details, .icon {
|
||||
.handle .label-details, .handle .icon, .handle .not-saved {
|
||||
color: $gray !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -419,7 +424,7 @@ export default {
|
|||
border-color: $secondary;
|
||||
color: white !important;
|
||||
|
||||
.label-details, .icon {
|
||||
.label-details, .icon, .not-saved {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,16 +31,16 @@
|
|||
<grip-icon></grip-icon>
|
||||
<span
|
||||
class="filter-name"
|
||||
:class="{'is-danger': formWithErrors == filter.id || filter.status == 'auto-draft' || (editForms[filter.id] != undefined && editForms[filter.id].saved != true) }">
|
||||
:class="{'is-danger': formWithErrors == filter.id }">
|
||||
{{ filter.name }}
|
||||
</span>
|
||||
<span
|
||||
v-if="filter.filter_type_object != undefined"
|
||||
class="label-details">
|
||||
({{ $i18n.get(filter.filter_type_object.component) }})
|
||||
<em v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'">
|
||||
<span class="not-saved" v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'">
|
||||
{{ $i18n.get('info_not_saved') }}
|
||||
</em>
|
||||
</span>
|
||||
</span>
|
||||
<span class="loading-spinner" v-if="filter.id == undefined"></span>
|
||||
<span class="controls" v-if="filter.filter_type != undefined">
|
||||
|
|
@ -488,6 +488,11 @@ export default {
|
|||
font-weight: normal;
|
||||
color: $gray;
|
||||
}
|
||||
.not-saved {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: $danger;
|
||||
}
|
||||
.controls {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
|
|
@ -512,7 +517,7 @@ export default {
|
|||
cursor: default;
|
||||
background-color: white !important;
|
||||
|
||||
.label-details, .icon {
|
||||
.handle .label-details, .handle .icon, .handle .not-saved {
|
||||
color: $gray !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -522,7 +527,7 @@ export default {
|
|||
.field-name {
|
||||
color: $primary;
|
||||
}
|
||||
.label-details, .icon {
|
||||
.handle .label-details, .handle .icon, .handle .not-saved {
|
||||
color: $gray !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
<template>
|
||||
<div class="help-tooltip">
|
||||
<div class="help-tooltip-header">
|
||||
<h5>{{ title }}</h5>
|
||||
</div>
|
||||
<div class="help-tooltip-body">
|
||||
<p>{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help-wrapper">
|
||||
<a class="help-button" @click="isOpened = !isOpened"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
|
||||
<div class="help-tooltip" :class="{ 'opened': isOpened }">
|
||||
<div class="help-tooltip-header">
|
||||
<h5>{{ title }}</h5><a @click="isOpened = false"><b-icon icon="close"></b-icon></a>
|
||||
</div>
|
||||
<div class="help-tooltip-body">
|
||||
<p>{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelpTooltip',
|
||||
name: 'HelpButton',
|
||||
data() {
|
||||
return {
|
||||
isOpened: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
title: '',
|
||||
message: ''
|
||||
|
|
@ -20,6 +28,26 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.help-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a.help-button .icon {
|
||||
i, i::before { font-size: 0.9em !important; }
|
||||
color: $gray;
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
.help-tooltip.opened {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.help-tooltip {
|
||||
color: #000;
|
||||
background-color: #e8f9f5;
|
||||
|
|
@ -30,14 +58,30 @@ export default {
|
|||
z-index: 99999999999999;
|
||||
bottom: 100%;
|
||||
left: 0%;
|
||||
display: block;
|
||||
min-width: 250px;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.help-tooltip-header {
|
||||
padding: 0.8em 0.8em 0.6em 0.8em;
|
||||
border-bottom: 1px solid #909293;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
h5 {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.icon {
|
||||
color: #909293 !important;
|
||||
right: 14px;
|
||||
top: 14px;
|
||||
position: absolute;
|
||||
&:hover {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-tooltip-body {
|
||||
|
|
@ -26,6 +26,7 @@ import TaincanFiltersList from '../../classes/filter-types/tainacan-filters-list
|
|||
|
||||
// Remaining imports
|
||||
import AdminPage from '../admin.vue'
|
||||
import HelpButton from '../components/other/help-button.vue';
|
||||
import draggable from 'vuedraggable'
|
||||
import store from '../../js/store/store'
|
||||
import router from './router'
|
||||
|
|
@ -56,6 +57,8 @@ Vue.component('tainacan-form-selectbox', FormSelectbox);
|
|||
|
||||
Vue.component('tainacan-form-item', TaincanFormItem);
|
||||
Vue.component('tainacan-filters-list', TaincanFiltersList);
|
||||
|
||||
Vue.component('help-button', HelpButton);
|
||||
Vue.component('draggable', draggable);
|
||||
|
||||
/* Filters */
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ I18NPlugin.install = function (Vue, options = {}) {
|
|||
Vue.prototype.$i18n = {
|
||||
get(key) {
|
||||
let string = tainacan_plugin.i18n[key];
|
||||
return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + tainacan_plugin.i18n[key];
|
||||
return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + key;
|
||||
},
|
||||
getFrom(entity, key) {
|
||||
if (entity == 'categories') // Temporary hack, while we decide this terminology...
|
||||
|
|
@ -22,8 +22,28 @@ I18NPlugin.install = function (Vue, options = {}) {
|
|||
if (tainacan_plugin.i18n['entities_labels'][entity] == undefined)
|
||||
return 'Invalid i18n entity: ' + entity;
|
||||
let string = tainacan_plugin.i18n['entities_labels'][entity][key];
|
||||
return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + tainacan_plugin.i18n[key];
|
||||
}
|
||||
return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + key;
|
||||
},
|
||||
getHelperTitle(entity, key) {
|
||||
if (entity == 'categories') // Temporary hack, while we decide this terminology...
|
||||
entity = 'taxonomies'
|
||||
if (tainacan_plugin.i18n['helpers_label'][entity] == undefined)
|
||||
return 'Invalid i18n entity: ' + entity;
|
||||
if (tainacan_plugin.i18n['helpers_label'][entity][key] == undefined)
|
||||
return 'Invalid i18n key: ' + key;
|
||||
let string = tainacan_plugin.i18n['helpers_label'][entity][key].title;
|
||||
return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n helper object.";
|
||||
},
|
||||
getHelperMessage(entity, key) {
|
||||
if (entity == 'categories') // Temporary hack, while we decide this terminology...
|
||||
entity = 'taxonomies'
|
||||
if (tainacan_plugin.i18n['helpers_label'][entity] == undefined)
|
||||
return 'Invalid i18n entity: ' + entity;
|
||||
if (tainacan_plugin.i18n['helpers_label'][entity][key] == undefined)
|
||||
return 'Invalid i18n key: ' + key;
|
||||
let string = tainacan_plugin.i18n['helpers_label'][entity][key].description;
|
||||
return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n helper object. ";
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 12.8 12.8" class="grip-icon"><circle cx="1.5" cy="1.5" r="1.5" class="undefined"/><circle cx="6.4" cy="1.5" r="1.5" class="undefined"/><circle cx="11.3" cy="1.5" r="1.5" class="undefined"/><circle cx="1.5" cy="6.4" r="1.5" class="undefined"/><circle cx="6.4" cy="6.4" r="1.5" class="undefined"/><circle cx="11.3" cy="6.4" r="1.5" class="undefined"/><circle cx="1.5" cy="11.3" r="1.5" class="undefined"/><circle cx="6.4" cy="11.3" r="1.5" class="undefined"/><circle cx="11.3" cy="11.3" r="1.5" class="undefined"/></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GripIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -99,15 +99,6 @@ html {
|
|||
color: $danger;
|
||||
}
|
||||
}
|
||||
a.help-button, a.help-button i, a.help-button i::before{
|
||||
font-size: 0.9em !important;
|
||||
color: $gray;
|
||||
position: relative;
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
i, i::before {color: $primary !important;}
|
||||
}
|
||||
}
|
||||
.input, .textarea {
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue