From 5dde7057e0687b946517fb038876bbb0720302c7 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Wed, 12 Dec 2018 14:42:44 -0200 Subject: [PATCH] Begins implementation of preview templates for metadata type. --- src/admin/components/lists/metadata-list.vue | 59 +++++++++++++++++-- ...ainacan-rest-metadata-types-controller.php | 5 +- .../class-tainacan-metadata-type.php | 19 +++++- .../text/class-tainacan-text.php | 9 ++- 4 files changed, 84 insertions(+), 8 deletions(-) diff --git a/src/admin/components/lists/metadata-list.vue b/src/admin/components/lists/metadata-list.vue index 3c4e3b2d7..39381803c 100644 --- a/src/admin/components/lists/metadata-list.vue +++ b/src/admin/components/lists/metadata-list.vue @@ -171,6 +171,21 @@ :class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': isRepositoryLevel }" v-for="(metadatum, index) in availableMetadatumList" :key="index"> +
+
+ + + + + + +
+
+
@@ -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 { diff --git a/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php b/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php index 04ad260fb..77056237d 100644 --- a/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php +++ b/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php @@ -51,7 +51,10 @@ class REST_Metadata_Types_Controller extends REST_Controller { ], 'form_component' => [ 'type' => 'boolean' - ] + ], + 'preview_template' => [ + 'type' => 'string' + ], ] ] ] diff --git a/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php b/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php index f7a7d8b08..612ac8b2b 100644 --- a/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php +++ b/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php @@ -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; diff --git a/src/classes/metadata-types/text/class-tainacan-text.php b/src/classes/metadata-types/text/class-tainacan-text.php index 35aa83cac..5e20fcdb6 100644 --- a/src/classes/metadata-types/text/class-tainacan-text.php +++ b/src/classes/metadata-types/text/class-tainacan-text.php @@ -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(' + //
+ //
+ // + //
+ //
+ // '); } /**