Begins implementation of preview templates for metadata type.
This commit is contained in:
parent
c1fe137365
commit
5dde7057e0
|
@ -171,6 +171,21 @@
|
|||
:class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': isRepositoryLevel }"
|
||||
v-for="(metadatum, index) in availableMetadatumList"
|
||||
: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">
|
||||
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
|
||||
</span>
|
||||
|
@ -1089,8 +1104,8 @@ export default {
|
|||
max-width: 180px;
|
||||
width: 60%;
|
||||
}
|
||||
&:after,
|
||||
&:before {
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
@ -1099,7 +1114,7 @@ export default {
|
|||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
&:after {
|
||||
&::after {
|
||||
top: -1px;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-right-width: 16px;
|
||||
|
@ -1107,7 +1122,7 @@ export default {
|
|||
border-bottom-width: 20px;
|
||||
left: -19px;
|
||||
}
|
||||
&:before {
|
||||
&::before {
|
||||
top: -1px;
|
||||
border-color: transparent $gray2 transparent transparent;
|
||||
border-right-width: 16px;
|
||||
|
@ -1115,6 +1130,42 @@ export default {
|
|||
border-bottom-width: 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 {
|
||||
|
|
|
@ -51,7 +51,10 @@ class REST_Metadata_Types_Controller extends REST_Controller {
|
|||
],
|
||||
'form_component' => [
|
||||
'type' => 'boolean'
|
||||
]
|
||||
],
|
||||
'preview_template' => [
|
||||
'type' => 'string'
|
||||
],
|
||||
]
|
||||
]
|
||||
]
|
||||
|
|
|
@ -73,6 +73,12 @@ abstract class Metadata_Type {
|
|||
* The Metadata type description. Metadata type classes must set an internationalized string for this property
|
||||
*/
|
||||
private $description;
|
||||
|
||||
/**
|
||||
* The html template featuring a preview of how this metadata type componenet
|
||||
* @var string
|
||||
*/
|
||||
private $preview_template;
|
||||
|
||||
abstract function render( $itemMetadata );
|
||||
|
||||
|
@ -124,6 +130,14 @@ abstract class Metadata_Type {
|
|||
$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(){
|
||||
return $this->name;
|
||||
}
|
||||
|
@ -189,8 +203,8 @@ abstract class Metadata_Type {
|
|||
public function _toArray(){
|
||||
$attributes = [];
|
||||
|
||||
$attributes['name'] = $this->get_name();
|
||||
$attributes['description'] = $this->get_description();
|
||||
$attributes['name'] = $this->get_name();
|
||||
$attributes['description'] = $this->get_description();
|
||||
$attributes['errors'] = $this->get_errors();
|
||||
$attributes['related_mapped_prop'] = $this->get_related_mapped_prop();
|
||||
$attributes['options'] = $this->get_options();
|
||||
|
@ -199,6 +213,7 @@ abstract class Metadata_Type {
|
|||
$attributes['component'] = $this->get_component();
|
||||
$attributes['primitive_type'] = $this->get_primitive_type();
|
||||
$attributes['form_component'] = $this->get_form_component();
|
||||
$attributes['preview_template'] = $this->get_preview_template();
|
||||
|
||||
return $attributes;
|
||||
|
||||
|
|
|
@ -16,7 +16,14 @@ class Text extends Metadata_Type {
|
|||
parent::set_primitive_type('string');
|
||||
parent::set_component('tainacan-text');
|
||||
$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>
|
||||
// ');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue