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 2018-03-22 12:20:23 -03:00
parent 17d4122860
commit c00bf47588
9 changed files with 161 additions and 71 deletions

View File

@ -8,7 +8,11 @@
<label class="label"> <label class="label">
{{$i18n.get('label_name')}} {{$i18n.get('label_name')}}
<span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span> <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> <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-input v-model="editForm.name" name="name" @focus="clearErrors('name')"></b-input>
</b-field> </b-field>
@ -16,9 +20,13 @@
:addons="false" :addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''" :type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''"> :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> <label class="label">
<help-tooltip title="Ajuda Gente!" message="Este é um exemplo de mensagem de ajuda. Aqui vai um monte de informações úteis."></help-tooltip> {{$i18n.get('label_description')}}
</a></label> <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-input type="textarea" name="description" v-model="editForm.description" @focus="clearErrors('description')" ></b-input>
</b-field> </b-field>
@ -26,7 +34,13 @@
:addons="false" :addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''" :type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''"> :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"> <div class="inline-block">
<b-radio <b-radio
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
@ -62,7 +76,10 @@
name="required"> name="required">
{{ $i18n.get('label_required') }} {{ $i18n.get('label_required') }}
</b-checkbox> </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>
<b-field <b-field
@ -76,7 +93,10 @@
name="multiple"> name="multiple">
{{ $i18n.get('label_allow_multiple') }} {{ $i18n.get('label_allow_multiple') }}
</b-checkbox> </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>
<b-field <b-field
@ -90,7 +110,10 @@
name="collecion_key"> name="collecion_key">
{{ $i18n.get('label_unique_value') }} {{ $i18n.get('label_unique_value') }}
</b-checkbox> </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>
</b-field> </b-field>
@ -117,7 +140,6 @@
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import HelpTooltip from '../other/help-tooltip.vue';
export default { export default {
name: 'FieldEditionForm', name: 'FieldEditionForm',
@ -137,9 +159,6 @@ export default {
isRepositoryLevel: false, isRepositoryLevel: false,
collectionId: '' collectionId: ''
}, },
components: {
HelpTooltip
},
created() { created() {
this.editForm = this.editedField; this.editForm = this.editedField;
this.oldForm = JSON.parse(JSON.stringify(this.originalField)); this.oldForm = JSON.parse(JSON.stringify(this.originalField));

View File

@ -8,7 +8,10 @@
<label class="label"> <label class="label">
{{$i18n.get('label_name')}} {{$i18n.get('label_name')}}
<span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span> <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> <help-button
:title="$i18n.getHelperTitle('filters', 'name')"
:message="$i18n.getHelperMessage('filters', 'name')">
</help-button>
</label> </label>
<b-input v-model="editForm.name" name="name" @focus="clearErrors('name')"></b-input> <b-input v-model="editForm.name" name="name" @focus="clearErrors('name')"></b-input>
</b-field> </b-field>
@ -17,7 +20,13 @@
:addons="false" :addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''" :type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''"> :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-input type="textarea" name="description" v-model="editForm.description" @focus="clearErrors('description')" ></b-input>
</b-field> </b-field>
@ -25,7 +34,13 @@
:addons="false" :addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''" :type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''"> :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"> <div class="inline-block">
<b-radio <b-radio
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
@ -46,7 +61,6 @@
</b-radio> </b-radio>
</div> </div>
</b-field> </b-field>
<br>
<component <component
:errors="formErrors['filter_type_options']" :errors="formErrors['filter_type_options']"

View File

@ -37,9 +37,9 @@
v-if="field.id != undefined" v-if="field.id != undefined"
class="label-details"> class="label-details">
({{ $i18n.get(field.field_type_object.component) }}) ({{ $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') }} {{ $i18n.get('info_not_saved') }}
</em> </span>
</span> </span>
<span class="loading-spinner" v-if="field.id == undefined"></span> <span class="loading-spinner" v-if="field.id == undefined"></span>
<span class="controls" v-if="field.id !== undefined"> <span class="controls" v-if="field.id !== undefined">
@ -377,6 +377,11 @@ export default {
font-weight: normal; font-weight: normal;
color: $gray; color: $gray;
} }
.not-saved {
font-style: italic;
font-weight: bold;
color: $danger;
}
.controls { .controls {
position: absolute; position: absolute;
right: 5px; right: 5px;
@ -396,7 +401,7 @@ export default {
cursor: default; cursor: default;
background-color: white !important; background-color: white !important;
.label-details, .icon { .handle .label-details, .handle .icon, .handle .not-saved {
color: $gray !important; color: $gray !important;
} }
} }
@ -406,7 +411,7 @@ export default {
.field-name { .field-name {
color: $primary; color: $primary;
} }
.label-details, .icon { .handle .label-details, .handle .icon, .handle .not-saved {
color: $gray !important; color: $gray !important;
} }
} }
@ -419,7 +424,7 @@ export default {
border-color: $secondary; border-color: $secondary;
color: white !important; color: white !important;
.label-details, .icon { .label-details, .icon, .not-saved {
color: white !important; color: white !important;
} }

View File

@ -31,16 +31,16 @@
<grip-icon></grip-icon> <grip-icon></grip-icon>
<span <span
class="filter-name" 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 }} {{ filter.name }}
</span> </span>
<span <span
v-if="filter.filter_type_object != undefined" v-if="filter.filter_type_object != undefined"
class="label-details"> class="label-details">
({{ $i18n.get(filter.filter_type_object.component) }}) ({{ $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') }} {{ $i18n.get('info_not_saved') }}
</em> </span>
</span> </span>
<span class="loading-spinner" v-if="filter.id == undefined"></span> <span class="loading-spinner" v-if="filter.id == undefined"></span>
<span class="controls" v-if="filter.filter_type != undefined"> <span class="controls" v-if="filter.filter_type != undefined">
@ -488,6 +488,11 @@ export default {
font-weight: normal; font-weight: normal;
color: $gray; color: $gray;
} }
.not-saved {
font-style: italic;
font-weight: bold;
color: $danger;
}
.controls { .controls {
position: absolute; position: absolute;
right: 5px; right: 5px;
@ -512,7 +517,7 @@ export default {
cursor: default; cursor: default;
background-color: white !important; background-color: white !important;
.label-details, .icon { .handle .label-details, .handle .icon, .handle .not-saved {
color: $gray !important; color: $gray !important;
} }
} }
@ -522,7 +527,7 @@ export default {
.field-name { .field-name {
color: $primary; color: $primary;
} }
.label-details, .icon { .handle .label-details, .handle .icon, .handle .not-saved {
color: $gray !important; color: $gray !important;
} }
} }

View File

@ -1,17 +1,25 @@
<template> <template>
<div class="help-tooltip"> <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"> <div class="help-tooltip-header">
<h5>{{ title }}</h5> <h5>{{ title }}</h5><a @click="isOpened = false"><b-icon icon="close"></b-icon></a>
</div> </div>
<div class="help-tooltip-body"> <div class="help-tooltip-body">
<p>{{ message }}</p> <p>{{ message }}</p>
</div> </div>
</div> </div>
</span>
</template> </template>
<script> <script>
export default { export default {
name: 'HelpTooltip', name: 'HelpButton',
data() {
return {
isOpened: false
}
},
props: { props: {
title: '', title: '',
message: '' message: ''
@ -20,6 +28,26 @@ export default {
</script> </script>
<style lang="scss"> <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 { .help-tooltip {
color: #000; color: #000;
background-color: #e8f9f5; background-color: #e8f9f5;
@ -30,14 +58,30 @@ export default {
z-index: 99999999999999; z-index: 99999999999999;
bottom: 100%; bottom: 100%;
left: 0%; left: 0%;
display: block;
min-width: 250px; min-width: 250px;
display: block;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
.help-tooltip-header { .help-tooltip-header {
padding: 0.8em 0.8em 0.6em 0.8em; padding: 0.8em 0.8em 0.6em 0.8em;
border-bottom: 1px solid #909293; border-bottom: 1px solid #909293;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
h5 {
margin-right: 25px;
}
.icon {
color: #909293 !important;
right: 14px;
top: 14px;
position: absolute;
&:hover {
color: black !important;
}
}
} }
.help-tooltip-body { .help-tooltip-body {

View File

@ -26,6 +26,7 @@ import TaincanFiltersList from '../../classes/filter-types/tainacan-filters-list
// Remaining imports // Remaining imports
import AdminPage from '../admin.vue' import AdminPage from '../admin.vue'
import HelpButton from '../components/other/help-button.vue';
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import store from '../../js/store/store' import store from '../../js/store/store'
import router from './router' import router from './router'
@ -56,6 +57,8 @@ Vue.component('tainacan-form-selectbox', FormSelectbox);
Vue.component('tainacan-form-item', TaincanFormItem); Vue.component('tainacan-form-item', TaincanFormItem);
Vue.component('tainacan-filters-list', TaincanFiltersList); Vue.component('tainacan-filters-list', TaincanFiltersList);
Vue.component('help-button', HelpButton);
Vue.component('draggable', draggable); Vue.component('draggable', draggable);
/* Filters */ /* Filters */

View File

@ -14,7 +14,7 @@ I18NPlugin.install = function (Vue, options = {}) {
Vue.prototype.$i18n = { Vue.prototype.$i18n = {
get(key) { get(key) {
let string = tainacan_plugin.i18n[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) { getFrom(entity, key) {
if (entity == 'categories') // Temporary hack, while we decide this terminology... 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) if (tainacan_plugin.i18n['entities_labels'][entity] == undefined)
return 'Invalid i18n entity: ' + entity; return 'Invalid i18n entity: ' + entity;
let string = tainacan_plugin.i18n['entities_labels'][entity][key]; 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. ";
},
} }
} }

View File

@ -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>

View File

@ -99,15 +99,6 @@ html {
color: $danger; 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 { .input, .textarea {
font-size: 14px; font-size: 14px;
border: none; border: none;