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

Begins implementation of preview templates for metadata type.

This commit is contained in:
Mateus Machado Luna 2018-12-12 14:42:44 -02:00
parent c1fe137365
commit 5dde7057e0
4 changed files with 84 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/admin/components/lists/metadata-list.vue
View File

@ -171,6 +171,21 @@
:class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': isRepositoryLevel }" :class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': isRepositoryLevel }"
v-for="(metadatum, index) in availableMetadatumList" v-for="(metadatum, index) in availableMetadatumList"
:key="index"> :key="index">
<div
v-if="metadatum.preview_template"
class="metadata-type-preview tainacan-form">
<div class="field">
<span class="collapse-handle">
<span class="icon">
<i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
</span>
<label class="label has-tooltip">
{{ metadatum.name }}
</label>
</span>
<div v-html="metadatum.preview_template"/>
</div>
</div>
<span class="icon grip-icon"> <span class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
</span> </span>
@ -1089,8 +1104,8 @@ export default {
max-width: 180px; max-width: 180px;
width: 60%; width: 60%;
} }
&:after, &::after,
&:before { &::before {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@ -1099,7 +1114,7 @@ export default {
height: 0; height: 0;
border-style: solid; border-style: solid;
} }
&:after { &::after {
top: -1px; top: -1px;
border-color: transparent white transparent transparent; border-color: transparent white transparent transparent;
border-right-width: 16px; border-right-width: 16px;
@ -1107,7 +1122,7 @@ export default {
border-bottom-width: 20px; border-bottom-width: 20px;
left: -19px; left: -19px;
} }
&:before { &::before {
top: -1px; top: -1px;
border-color: transparent $gray2 transparent transparent; border-color: transparent $gray2 transparent transparent;
border-right-width: 16px; border-right-width: 16px;
@ -1115,6 +1130,42 @@ export default {
border-bottom-width: 20px; border-bottom-width: 20px;
left: -20px; left: -20px;
} }
&:hover {
.metadata-type-preview {
visibility: visible;
opacity: 1;
left: -210px;
transition-delay: 1s;
&::before {
border-color: transparent $gray1 transparent transparent;
border-left-width: 16px;
border-top-width: 20px;
border-bottom-width: 20px;
right: -19px;
}
}
}
.metadata-type-preview {
position: absolute;
background: $gray1;
padding: 12px;
border-radius: 3px;
z-index: 9999999999999;
width: 180px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
left: -180px;
top: -40px;
visibility: hidden;
opacity: 0;
transition: opacity ease 0.3s, visibility ease 0.3s, left ease 0.3s;
transition-delay: 0.1s;
}
} }
.sortable-drag { .sortable-drag {

5
src/api/endpoints/class-tainacan-rest-metadata-types-controller.php
View File

@ -51,7 +51,10 @@ class REST_Metadata_Types_Controller extends REST_Controller {
], ],
'form_component' => [ 'form_component' => [
'type' => 'boolean' 'type' => 'boolean'
] ],
'preview_template' => [
'type' => 'string'
],
] ]
] ]
] ]

15
src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php
View File

@ -74,6 +74,12 @@ abstract class Metadata_Type {
*/ */
private $description; private $description;
/**
* The html template featuring a preview of how this metadata type componenet
* @var string
*/
private $preview_template;
abstract function render( $itemMetadata ); abstract function render( $itemMetadata );
public function __construct(){ public function __construct(){
@ -124,6 +130,14 @@ abstract class Metadata_Type {
$this->form_component = $form_component; $this->form_component = $form_component;
} }
public function get_preview_template() {
return $this->preview_template;
}
public function set_preview_template($preview_template){
$this->preview_template = $preview_template;
}
public function get_name(){ public function get_name(){
return $this->name; return $this->name;
} }
@ -199,6 +213,7 @@ abstract class Metadata_Type {
$attributes['component'] = $this->get_component(); $attributes['component'] = $this->get_component();
$attributes['primitive_type'] = $this->get_primitive_type(); $attributes['primitive_type'] = $this->get_primitive_type();
$attributes['form_component'] = $this->get_form_component(); $attributes['form_component'] = $this->get_form_component();
$attributes['preview_template'] = $this->get_preview_template();
return $attributes; return $attributes;

7
src/classes/metadata-types/text/class-tainacan-text.php
View File

@ -17,6 +17,13 @@ class Text extends Metadata_Type {
parent::set_component('tainacan-text'); parent::set_component('tainacan-text');
$this->set_name( __('Text', 'tainacan') ); $this->set_name( __('Text', 'tainacan') );
$this->set_description( __('A simple, one line, text input', 'tainacan') ); $this->set_description( __('A simple, one line, text input', 'tainacan') );
// $this->set_preview_template('
// <div>
// <div class="control is-clearfix">
// <input type="text" autocomplete="on" class="input">
// </div>
// </div>
// ');
} }
/** /**