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 }"
|
: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 {
|
||||||
|
|
|
@ -51,7 +51,10 @@ class REST_Metadata_Types_Controller extends REST_Controller {
|
||||||
],
|
],
|
||||||
'form_component' => [
|
'form_component' => [
|
||||||
'type' => 'boolean'
|
'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
|
* The Metadata type description. Metadata type classes must set an internationalized string for this property
|
||||||
*/
|
*/
|
||||||
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 );
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -189,8 +203,8 @@ abstract class Metadata_Type {
|
||||||
public function _toArray(){
|
public function _toArray(){
|
||||||
$attributes = [];
|
$attributes = [];
|
||||||
|
|
||||||
$attributes['name'] = $this->get_name();
|
$attributes['name'] = $this->get_name();
|
||||||
$attributes['description'] = $this->get_description();
|
$attributes['description'] = $this->get_description();
|
||||||
$attributes['errors'] = $this->get_errors();
|
$attributes['errors'] = $this->get_errors();
|
||||||
$attributes['related_mapped_prop'] = $this->get_related_mapped_prop();
|
$attributes['related_mapped_prop'] = $this->get_related_mapped_prop();
|
||||||
$attributes['options'] = $this->get_options();
|
$attributes['options'] = $this->get_options();
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,14 @@ class Text extends Metadata_Type {
|
||||||
parent::set_primitive_type('string');
|
parent::set_primitive_type('string');
|
||||||
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>
|
||||||
|
// ');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue