Css Adjustments. Collection navigation menu with tooltips. Changes status order on most forms, according to Ref. #125.

This commit is contained in:
mateuswetah 2018-09-05 22:47:39 -03:00
parent 56190103a6
commit 66856bc556
7 changed files with 70 additions and 59 deletions

View File

@ -489,14 +489,14 @@ export default {
// Can be obtained from api later
statusOptions: [{
value: 'publish',
label: this.$i18n.get('publish')
}, {
value: 'draft',
label: this.$i18n.get('draft')
label: this.$i18n.get('public')
}, {
value: 'private',
label: this.$i18n.get('private')
}, {
value: 'draft',
label: this.$i18n.get('draft')
}, {
value: 'trash',
label: this.$i18n.get('trash')
}],

View File

@ -507,14 +507,14 @@ export default {
// Can be obtained from api later
statusOptions: [{
value: 'publish',
label: this.$i18n.get('publish')
}, {
value: 'draft',
label: this.$i18n.get('draft')
label: this.$i18n.get('public')
}, {
value: 'private',
label: this.$i18n.get('private')
}, {
value: 'draft',
label: this.$i18n.get('draft')
}, {
value: 'trash',
label: this.$i18n.get('trash')
}],

View File

@ -177,13 +177,13 @@
},
statusOptions: [{
value: 'publish',
label: this.$i18n.get('publish')
}, {
value: 'draft',
label: this.$i18n.get('draft')
label: this.$i18n.get('public')
}, {
value: 'private',
label: this.$i18n.get('private')
}, {
value: 'draft',
label: this.$i18n.get('draft')
}, {
value: 'trash',
label: this.$i18n.get('trash')

View File

@ -46,21 +46,19 @@
<ul class="menu-list level-right">
<li
v-tooltip.bottom="{
content: $i18n.get('items'),
autoHide: false,
placement: 'bottom',
offset: 100
}"
:class="activeRoute == 'ItemPage' || activeRoute == 'CollectionItemsPage' || activeRoute == 'ItemEditionForm' || activeRoute == 'ItemCreatePage' ? 'is-active':''"
class="level-item">
<router-link
tag="a"
:to="{ path: $routerHelper.getCollectionItemsPath(id, '') }"
:aria-label="$i18n.get('label_collection_items')">
<b-tooltip
:label="$i18n.get('items')"
position="is-bottom">
<span class="icon">
<i class="mdi mdi-file-multiple"/>
</span>
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
</router-link>
</li>
@ -71,14 +69,13 @@
tag="a"
:to="{ path: $routerHelper.getCollectionEditPath(id) }"
:aria-label="$i18n.get('label_settings')">
<span
v-tooltip.bottom="{
content: $i18n.get('label_settings'),
autoHide: false
}"
class="icon">
<b-tooltip
:label="$i18n.get('label_settings')"
position="is-bottom">
<span class="icon">
<i class="mdi mdi-settings"/>
</span>
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
</router-link>
</li>
@ -89,14 +86,13 @@
tag="a"
:to="{ path: $routerHelper.getCollectionMetadataPath(id) }"
:aria-label="$i18n.get('label_collection_metadata')">
<span
v-tooltip.bottom="{
content: $i18n.getFrom('metadata', 'name'),
autoHide: false
}"
class="icon">
<b-tooltip
:label="$i18n.getFrom('metadata', 'name')"
position="is-bottom">
<span class="icon">
<i class="mdi mdi-format-list-bulleted-type"/>
</span>
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
</router-link>
</li>
@ -107,14 +103,14 @@
tag="a"
:to="{ path: $routerHelper.getCollectionFiltersPath(id) }"
:aria-label="$i18n.get('label_collection_filters')">
<span
v-tooltip.bottom="{
content: $i18n.getFrom('filters', 'name'),
autoHide: false
}"
class="icon">
<b-tooltip
animated
:label="$i18n.getFrom('filters', 'name')"
position="is-bottom">
<span class="icon">
<i class="mdi mdi-filter"/>
</span>
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
</router-link>
</li>
@ -125,13 +121,14 @@
tag="a"
:to="{ path: $routerHelper.getCollectionEventsPath(id) }"
:aria-label="$i18n.get('label_collection_events')">
<activities-icon
v-tooltip.bottom="{
content: $i18n.get('events'),
autoHide: false
}" />
<b-tooltip
:label="$i18n.get('events')"
position="is-bottom">
<activities-icon />
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.get('events') }}</span> -->
</router-link>
</li>
</ul>
@ -262,7 +259,6 @@ export default {
height: $subheader-height;
max-height: $subheader-height;
width: 100%;
overflow-y: hidden;
padding-top: 18px;
padding-bottom: 18px;
padding-right: $page-side-padding;
@ -342,6 +338,11 @@ export default {
// overflow: hidden;
// max-width: 50px;
svg.activities-icon {
top: 3px;
position: relative;
}
&.is-active {
background-color: $turquoise4;
a {
@ -380,13 +381,13 @@ export default {
color: $gray4;
text-align: center;
white-space: nowrap;
padding: 10px;
padding: 9px;
min-width: 50px;
line-height: 22px;
border-radius: 0px;
position: relative;
align-items: center;
display: flex;
display: block;
}
a:focus{
box-shadow: none;
@ -395,7 +396,7 @@ export default {
margin: 0;
padding: 0;
i {
font-size: 19px !important;
font-size: 18px !important;
}
}
.menu-text {
@ -449,6 +450,14 @@ export default {
}
}
.tooltip.is-primary::after {
background-color: $turquoise1;
color: $turquoise5;
}
.tooltip.is-primary::before {
border-bottom-color: $turquoise1;
}
}
</style>

View File

@ -110,8 +110,9 @@ export const ThemeItemsListing = new Vue({
},
render: h => h(ThemeItemsList),
beforeMount () {
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
if (this.$el.attributes['default-view-mode'] != undefined)
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
if (this.$el.attributes['enabled-view-modes'] != undefined)

View File

@ -22,8 +22,8 @@
margin: 15px;
max-width: 425px;
min-width: 425px;
min-height: 210px;
max-height: 210px;
min-height: 215px;
max-height: 215px;
cursor: pointer;
@media screen and (max-width: 480px) {

View File

@ -74,6 +74,7 @@ return apply_filters( 'tainacan-admin-i18n', [
// Wordpress Status
'publish' => __( 'Publish', 'tainacan' ),
'public' => __( 'Public', 'tainacan' ),
'draft' => __( 'Draft', 'tainacan' ),
'private' => __( 'Private', 'tainacan' ),
'trash' => __( 'Trash', 'tainacan' ),