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

More color adustments and removes hover animation from Collection subheader menu.

This commit is contained in:
Mateus Machado Luna 2018-07-27 12:32:57 -03:00
parent cc4271181b
commit f88f7e2b4a
4 changed files with 95 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/admin/components/lists/filters-list.vue
View File

@ -37,7 +37,8 @@
:class="{
'not-sortable-item': filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name,
'not-focusable-item': openedFilterId == filter.id,
'disabled-filter': filter.enabled == false
'disabled-filter': filter.enabled == false,
'inherited-filter': filter.collection_id != collectionId || isRepositoryLevel
}"
v-for="(filter, index) in activeFilterList"
:key="index">
@ -130,7 +131,7 @@
</div>
<div class="column available-metadata-area">
<div class="field" >
<h3 class="label has-text-primary"> {{ $i18n.get('label_available_metadata') }}</h3>
<h3 class="label has-text-secondary"> {{ $i18n.get('label_available_metadata') }}</h3>
<draggable
v-if="availableMetadatumList.length > 0"
v-model="availableMetadatumList"
@ -141,6 +142,7 @@
}">
<div
class="available-metadatum-item"
:class="{'inherited-metadatum': metadatum.collection_id != collectionId || isRepositoryLevel}"
v-if="metadatum.enabled"
v-for="(metadatum, index) in availableMetadatumList"
:key="index"
@ -733,5 +735,36 @@ export default {
}
}
.inherited-filter {
&.active-filter-item:hover:not(.not-sortable-item) {
background-color: $blue5;
border-color: $blue5;
.switch.is-small {
input[type="checkbox"] + .check {
background-color: $blue5 !important;
}
&:hover input[type="checkbox"] + .check {
background-color: $blue5 !important;
}
}
}
}
.inherited-metadatum {
&.available-metadatum-item:hover {
background-color: $blue5 !important;
border-color: $blue5 !important;
&:after {
border-color: transparent $blue5 transparent transparent !important;
}
&:before {
border-color: transparent $blue5 transparent transparent !important;
}
}
}
</style>

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

@ -41,7 +41,8 @@
:class="{
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' ,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': metadatum.enabled == false
'disabled-metadatum': metadatum.enabled == false,
'inherited-metadatum': metadatum.collection_id != collectionId || isRepositoryLevel
}"
v-for="(metadatum, index) in activeMetadatumList"
:key="index">
@ -124,7 +125,7 @@
<div
@click.prevent="addMetadatumViaButton(metadatum)"
class="available-metadatum-item"
:class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name }"
:class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': isRepositoryLevel }"
v-for="(metadatum, index) in availableMetadatumList"
:key="index">
<grip-icon/>
@ -1093,6 +1094,33 @@ export default {
}
}
.inherited-metadatum {
&.active-metadatum-item:hover:not(.not-sortable-item) {
background-color: $blue5;
border-color: $blue5;
.switch.is-small {
input[type="checkbox"] + .check {
background-color: $blue5 !important;
}
&:hover input[type="checkbox"] + .check {
background-color: $blue5 !important;
}
}
}
&.available-metadatum-item:hover {
background-color: $blue5 !important;
border-color: $blue5 !important;
&:after {
border-color: transparent $blue5 transparent transparent !important;
}
&:before {
border-color: transparent $blue5 transparent transparent !important;
}
}
}
#mappers-options-dropdown {
background-color: transparent;
color: #fff;

45
src/admin/components/navigation/tainacan-collection-subheader.vue
View File

@ -254,8 +254,6 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-webkit-transition: margin-bottom 0.2s linear; /* Safari */
transition: margin-bottom 0.2s linear;
}
.back-button {
@ -295,10 +293,10 @@ export default {
li{
margin-right: 0px;
transition: max-width 0.4s linear, width 0.4s linear;
-webkit-transition: max-width 0.4s linear, width 0.4s linear;
overflow: hidden;
max-width: 50px;
// transition: max-width 0.4s ease-in , width 0.4s ease-in ;
// -webkit-transition: max-width 0.4s ease-in, width 0.4s ease-in ;
// overflow: hidden;
// max-width: 50px;
&.is-active {
background-color: $turquoise4;
@ -312,20 +310,26 @@ export default {
}
}
&:hover {
max-width: 100%;
transition: max-width 0.4s linear, width 0.4s linear;
-webkit-transition: max-width 0.4s linear, width 0.4s linear;
background-color: $turquoise3;
// max-width: 100%;
// transition: max-width 0.4s ease-out 0.2s, width 0.4s ease-out 0.2s;
// -webkit-transition: max-width 0.4s ease-out 0.2s, width 0.4s ease-out 0.2s;
a {
background-color: transparent;
text-decoration: none;
color: white;
}
.menu-text {
opacity: 1.0;
width: 100%;
visibility: visible;
transition: opacity 0.2s linear, visibility 0.2s linear, width 0.4s linear;
-webkit-transition: opacity 0.2s linear, visibility 0.2s linear, width 0.4s linear;
svg.activities-icon {
fill: white !important;
}
// .menu-text {
// opacity: 1.0;
// width: 100%;
// right: 0%;
// visibility: visible;
// transition: opacity 0.4s ease-out 0.2s, visibility 0.4s ease-out 0.2s, width 0.4s ease-out 0.2s, right 0.4s ease-out 0.2s;
// -webkit-transition: opacity 0.4s ease-out 0.2s , visibility 0.4s ease-out 0.2s, width 0.4s ease-out 0.2s, right 0.4s ease-out 0.2s;
// }
}
a {
color: $gray4;
@ -351,11 +355,12 @@ export default {
.menu-text {
font-size: 14px;
display: inline-flex;
width: 0px;
opacity: 0.0;
visibility: hidden;
transition: opacity 0.2s linear, visibility 0.2s linear, width 0.4s linear;
-webkit-transition: opacity 0.2s linear, visibility 0.2s linear, width 0.4s linear;
// width: 0px;
// right: 100%;
// opacity: 0.0;
// visibility: hidden;
// transition: opacity 0.4s ease-in, visibility 0.4s ease-in , width 0.2s ease-in, right 0.2s ease-in;
// -webkit-transition: opacity 0.4s ease-in, visibility 0.4s ease-in, width 0.2s ease-in, right 0.2s ease-in;
}
}

2
src/admin/components/navigation/tainacan-header.vue
View File

@ -200,7 +200,7 @@
margin-right: 28px;
.control {
.search-header {
border: 1px solid $gray3 !important;
border: 1px solid $gray2 !important;
height: 27px;
font-size: 11px;
transition: width linear 0.15s;