Adds download button to exposer options.

This commit is contained in:
Mateus Machado Luna 2018-12-03 17:58:54 -02:00
parent 554432a62b
commit f6f3fcf5da
1 changed files with 42 additions and 5 deletions

View File

@ -32,18 +32,27 @@
class="label"> class="label">
{{ exposerType.name }} {{ exposerType.name }}
</label> </label>
<span class="has-text-gray">{{ exposerType.description }}</span>
</span> </span>
<transition name="filter-item"> <transition name="filter-item">
<div v-show="!exposerType.collapsed"> <div v-show="!exposerType.collapsed">
<p>{{ exposerType.description }}</p>
<div class="exposer-item"> <div class="exposer-item">
<span>{{ $i18n.get('label_exposer') + ": " + exposerType.name }}</span> <span>{{ $i18n.get('label_exposer') + ": " + exposerType.name }}</span>
<span class="exposer-item-actions"> <span class="exposer-item-actions">
<a :href="exposerBaseURL + '&exposer=' + exposerType.slug"> <a
target="_blank"
:href="exposerBaseURL + '&exposer=' + exposerType.slug">
<span class="gray-icon"> <span class="gray-icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/>
</span> </span>
</a> </a>
<a
:href="exposerBaseURL + '&exposer=' + exposerType.slug + '&mapper=' + exposerMapper"
download>
<span class="gray-icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-download"/>
</span>
</a>
</span> </span>
</div> </div>
<div <div
@ -52,11 +61,20 @@
class="exposer-item"> class="exposer-item">
<span>{{ $i18n.get('label_exposer') + ": " + exposerType.name + ", " + $i18n.get('label_mapper') + ": " + exposerMapper }}</span> <span>{{ $i18n.get('label_exposer') + ": " + exposerType.name + ", " + $i18n.get('label_mapper') + ": " + exposerMapper }}</span>
<span class="exposer-item-actions"> <span class="exposer-item-actions">
<a :href="exposerBaseURL + '&exposer=' + exposerType.slug + '&mapper=' + exposerMapper"> <a
target="_blank"
:href="exposerBaseURL + '&exposer=' + exposerType.slug + '&mapper=' + exposerMapper">
<span class="gray-icon"> <span class="gray-icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/>
</span> </span>
</a> </a>
<a
:href="exposerBaseURL + '&exposer=' + exposerType.slug + '&mapper=' + exposerMapper"
download>
<span class="gray-icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-download"/>
</span>
</a>
</span> </span>
</div> </div>
</div> </div>
@ -102,6 +120,7 @@ export default {
exposerBaseURL() { exposerBaseURL() {
let baseURL = this.collectionId != undefined ? '/collection/' + this.collectionId + '/items/' : 'items'; let baseURL = this.collectionId != undefined ? '/collection/' + this.collectionId + '/items/' : 'items';
let currentParams = this.$route.query; let currentParams = this.$route.query;
return tainacan_plugin.root + baseURL + '?' + qs.stringify(currentParams); return tainacan_plugin.root + baseURL + '?' + qs.stringify(currentParams);
} }
}, },
@ -145,7 +164,6 @@ export default {
border-bottom: 1px solid $gray2; border-bottom: 1px solid $gray2;
padding: 0.75rem $page-side-padding; padding: 0.75rem $page-side-padding;
margin: 0; margin: 0;
cursor: pointer;
&:first-child { &:first-child {
margin-top: 0.75rem; margin-top: 0.75rem;
@ -154,8 +172,23 @@ export default {
border-bottom: none; border-bottom: none;
} }
.collapse-handler:hover { .collapse-handler:hover {
cursor: pointer;
background-color: $gray1; background-color: $gray1;
} }
.collapse-handle {
.label {
margin: 3px 0.75rem 0 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.has-text-gray {
font-size: 0.75rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
p { p {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@ -180,6 +213,10 @@ export default {
background-color: $gray2; background-color: $gray2;
} }
} }
.exposer-item-actions a {
cursor: pointer;
margin: 0 0.5rem;
}
} }
} }
} }