tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/admin/components/edition/field-edition-form.vue
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));

22
src/admin/components/edition/filter-edition-form.vue
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']"

15
src/admin/components/lists/fields-list.vue
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;
} }

15
src/admin/components/lists/filters-list.vue
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;
} }
} }

52
src/admin/components/other/help-tooltip.vue → src/admin/components/other/help-button.vue
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 {

3
src/admin/js/main.js
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 */

26
src/admin/js/utilities.js
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. ";
},
} }
} }

11
src/admin/other/grip-icon.vue
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>

9
src/admin/scss/tainacan-admin.scss
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;