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

Adds Metadata Type Preview Templates.

This commit is contained in:
Mateus Machado Luna 2019-01-10 17:03:28 -02:00
parent 26aeacd07e
commit 4169d133ba
9 changed files with 171 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -172,6 +172,7 @@
v-for="(metadatum, index) in availableMetadatumList"
:key="index">
<div
aria-hidden="true"
v-if="metadatum.preview_template"
class="metadata-type-preview tainacan-form">
<div class="field">
@ -861,7 +862,12 @@ export default {
width: 100%;
}
}
.b-tabs .tab-content {
overflow-y: visible;
min-height: 500px;
}
.column:not(.available-metadata-area){
overflow: hidden;
flex-grow: 2;
@ -869,11 +875,11 @@ export default {
.page-title {
border-bottom: 1px solid $secondary;
margin: 1em 0em 2.0em 0em;
h2 {
color: $blue5;
font-weight: 500;
}
margin: 1em 0em 2.0em 0em;
}
.w-100 {
@ -1134,37 +1140,64 @@ export default {
.metadata-type-preview {
visibility: visible;
opacity: 1;
left: -210px;
left: -250px;
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;
padding: 12px 16px;
border-radius: 3px;
z-index: 9999999999999;
width: 180px;
height: 120px;
width: 218px;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
left: -180px;
top: -40px;
left: -220px;
top: -42px;
visibility: hidden;
opacity: 0;
transition: opacity ease 0.3s, visibility ease 0.3s, left ease 0.3s;
transition-delay: 0.1s;
pointer-events: none;
cursor: none;
input, select, textarea {
pointer-events: none;
cursor: none;
}
textarea {
min-height: 70px;
}
.field {
width: 100%;
}
.tags {
background: white;
}
.add-new-term {
font-size: 0.75rem;
text-decoration: underline;
margin: 0.875rem 1.5rem;
}
&::before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: 48px;
border-color: transparent transparent transparent $gray1;
border-left-width: 10px;
border-top-width: 10px;
border-bottom-width: 10px;
right: -13px;
}
}
}
@ -1172,6 +1205,12 @@ export default {
opacity: 1 !important;
}
.sortable-chosen {
.metadata-type-preview {
display: none;
}
}
@keyframes hightlighten {
0% {
color: #222;

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

@ -19,6 +19,13 @@ class Date extends Metadata_Type {
$this->set_component('tainacan-date');
$this->set_name( __('Date', 'tainacan') );
$this->set_description( __('Exact date type, with day, month and year.', 'tainacan') );
$this->set_preview_template('
<div>
<div class="control is-inline">
<input type="text" placeholder="' . __('mm/dd/yyyy') . '" class="input"></input>
</div>
</div>
');
}
/**

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

@ -16,6 +16,13 @@ class Numeric extends Metadata_Type {
$this->set_component('tainacan-numeric');
$this->set_name( __('Numeric', 'tainacan') );
$this->set_description( __('A numeric value, integer or float', 'tainacan') );
$this->set_preview_template('
<div>
<div class="control is-clearfix">
<input type="number" placeholder="' . __('3,1415') . '" class="input">
</div>
</div>
');
}
/**

26
src/classes/metadata-types/relationship/class-tainacan-relationship.php
View File

@ -17,6 +17,32 @@ class Relationship extends Metadata_Type {
$this->set_form_component('tainacan-form-relationship');
$this->set_name( __('Relationship', 'tainacan') );
$this->set_description( __('A relationship with another item', 'tainacan') );
$this->set_preview_template('
<div>
<div class="taginput control is-expanded has-selected">
<div class="taginput-container is-focusable">
<div class="autocomplete control">
<div class="control has-icon-right is-loading is-clearfix">
<input type="text" class="input" value="'. __('Item') . ' 9" >
</div>
<div class="dropdown-menu" style="">
<div class="dropdown-content">
<a class="dropdown-item is-hovered">
<span>'. __('Collection') . ' 2 <strong>'._('item') . ' 9</strong>9</span>
</a>
<a class="dropdown-item">
<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>9</span>
</a>
<a class="dropdown-item">
<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>8</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
');
}
/**

11
src/classes/metadata-types/selectbox/class-tainacan-selectbox.php
View File

@ -17,6 +17,17 @@ class Selectbox extends Metadata_Type {
$this->set_form_component('tainacan-form-selectbox');
$this->set_name( __('Selectbox', 'tainacan') );
$this->set_description( __('A selectbox with a fixed list of value to choose one from', 'tainacan') );
$this->set_preview_template('
<div>
<div class="control is-expanded">
<span class="select is-fullwidth">
<select>
<option value="someValue">' . __('Select here...') . '</option>
</select>
</span>
</div>
</div>
');
}
/**

46
src/classes/metadata-types/taxonomy/class-tainacan-taxonomy.php
View File

@ -26,7 +26,51 @@ class Taxonomy extends Metadata_Type {
$this->set_component('tainacan-taxonomy');
$this->set_name( __('Taxonomy', 'tainacan') );
$this->set_description( __('A metadatum to use a taxonomy in this collection', 'tainacan') );
}
$this->set_preview_template('
<div>
<div>
<p class="has-text-gray">'. __('Selected terms') . ': </p>
<div class="field selected-tags is-grouped-multiline is-grouped">
<div>
<div class="tags has-addons">
<span class="tag"><span>'. __('Term') . ' 2</span></span>
<a class="tag is-delete"></a>
</div>
</div>
<div>
<div class="tags has-addons">
<span class="tag"><span>'. __('Term') . ' 3</span></span>
<a class="tag is-delete"></a>
</div>
</div>
</div>
<div>
<label class="b-checkbox checkbox" border="" style="padding-left: 8px;">
<input type="checkbox" value="option1">
<span class="check"></span>
<span class="control-label">'. __('Term') . ' 1</span>
</label>
<br>
</div>
<div>
<label class="b-checkbox checkbox" border="" style="padding-left: 8px;">
<input type="checkbox" checked value="option2">
<span class="check"></span>
<span class="control-label">'. __('Term') . ' 2</span>
</label>
</div>
<div>
<label class="b-checkbox checkbox" border="" style="padding-left: 8px;">
<input type="checkbox" checked value="option3">
<span class="check"></span>
<span class="control-label">'. __('Term') . ' 3</span>
</label>
</div>
</div>
<a class="add-new-term">'. __('View all') . '</a>
</div>
');
}
/**
* @inheritdoc

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

@ -17,13 +17,13 @@ class Text extends Metadata_Type {
parent::set_component('tainacan-text');
$this->set_name( __('Text', '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>
// ');
$this->set_preview_template('
<div>
<div class="control is-clearfix">
<input type="text" placeholder="' . __('Type here...') . '" class="input">
</div>
</div>
');
}
/**

12
src/classes/metadata-types/textarea/class-tainacan-textarea.php
View File

@ -16,8 +16,16 @@ class Textarea extends Metadata_Type {
$this->set_primitive_type('long_string');
$this->set_component('tainacan-textarea');
$this->set_name( __('Textarea', 'tainacan') );
$this->set_description( __('A textarea with multiple lines', 'tainacan') );
}
$this->set_description( __('A textarea with multiple lines', 'tainacan') );
$this->set_preview_template('
<div>
<div class="control is-clearfix">
<textarea rows="3" placeholder="' . __('Type some long text here...') . '" class="input"></textarea>
</div>
</div>
');
}
/**
* @param $itemMetadata \Tainacan\Entities\Item_Metadata_Entity The instace of the entity itemMetadata

4
src/theme-helper/class-tainacan-theme-helper.php
View File

@ -444,7 +444,9 @@ class Theme_Helper {
'show_pagination' => true,
'full_screen' => false,
'dynamic_metadata' => false,
'implements_skeleton' => false,
'skeleton_template' => ''
);
$args = wp_parse_args($args, $defaults);