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

New representation for terms hierarchy dropdown. Fixes new tem cancel. Corrects some css color for hover.

This commit is contained in:
Mateus Machado Luna 2018-08-15 12:19:49 -03:00
parent 608630f2bc
commit e2826fc6ed
9 changed files with 72 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/admin/components/lists/basic-term-item.vue
View File

@ -128,7 +128,7 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@import "../../scss/_variables.scss";
// Term Item
@ -157,12 +157,6 @@ export default {
}
}
.children-icon {
color: $blue2;
position: absolute;
left: -21px;
}
.term-name {
text-overflow: ellipsis;
overflow-x: hidden;
@ -186,16 +180,6 @@ export default {
font-weight: bold;
color: $danger;
}
.children-dropdown {
margin-left: auto;
color: $blue4;
cursor: pointer;
padding-right: 1rem;
white-space: nowrap;
overflow: hidden;
display: flex;
align-items: center;
}
.controls {
visibility: hidden;
opacity: 0.0;
@ -215,7 +199,7 @@ export default {
}
}
}
.controls.is-disabled a, .children-dropdown.is-disabled {
.controls.is-disabled a {
color: $gray4 !important;
cursor: not-allowed !important;
user-select: none;

81
src/admin/components/lists/recursive-term-item.vue
View File

@ -14,52 +14,51 @@
class="icon children-icon">
<i class="mdi mdi-24px mdi-subdirectory-arrow-right"/>
</span>
<span class="children-dropdown icon">
<i
:class="{
'mdi-menu-right': !showChildren,
'mdi-menu-down': showChildren,
'is-disabled': isEditingTerm }"
class="mdi mdi-36px"
v-if="term.total_children > 0"
@click.prevent="toggleShowChildren()"/>
</span>
<span
class="term-name"
:class="{'is-danger': formWithErrors == term.id }">
{{ term.name }}
</span>
<span
v-if="term.id != undefined"
<span
v-if="term.id == 'new'"
class="label-details">
<span
class="not-saved"
v-if="term.id == 'new'">
<span class="not-saved" >
{{ $i18n.get('info_not_saved') }}
</span>
</span>
<span
class="children-dropdown"
:class="{'is-disabled': isEditingTerm}"
v-if="term.total_children > 0"
@click.prevent="toggleShowChildren()">
<span class="icon">
<i
:class="{
'mdi-menu-right': !showChildren,
'mdi-menu-down': showChildren }"
class="mdi mdi-24px"/>
</span>
class="children-counter"
v-if="term.total_children > 0">
<span>{{ term.total_children + ' ' + $i18n.get('label_children_terms') }}</span>
</span>
<span
class="controls"
:class="{'is-disabled': isEditingTerm}">
<a @click="addNewChildTerm(term, index)">
<b-icon
size="is-small"
icon="plus-circle"/>
<span class="icon">
<i class="mdi mdi-18px mdi-plus-circle"/>
</span>
</a>
<a
@click.prevent="editTerm()">
<b-icon
size="is-small"
icon="pencil"/>
<span class="icon">
<i class="mdi mdi-18px mdi-pencil"/>
</span>
</a>
<a @click.prevent="tryToRemoveTerm()">
<b-icon
size="is-small"
icon="delete"/>
<span class="icon">
<i class="mdi mdi-18px mdi-delete"/>
</span>
</a>
</span>
</div>
@ -251,13 +250,13 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@import "../../scss/_variables.scss";
// Term Item
.term-item {
font-size: 14px;
padding: 0 0 0 1.75rem;
padding: 0 0 0 2.75rem;
min-height: 40px;
display: flex;
position: relative;
@ -285,7 +284,12 @@ export default {
position: absolute;
left: -21px;
}
.children-dropdown {
color: $blue4;
position: absolute;
left: 5px;
cursor: pointer;
}
.term-name {
text-overflow: ellipsis;
overflow-x: hidden;
@ -302,30 +306,29 @@ export default {
.label-details {
font-weight: normal;
color: $gray3;
margin-left: 1rem;
margin-right: auto;
}
.children-counter {
margin-left: 1rem;
margin-right: auto;
color: $gray4;
padding-right: 1rem;
white-space: nowrap;
overflow: hidden;
}
.not-saved {
font-style: italic;
font-weight: bold;
color: $danger;
}
.children-dropdown {
margin-left: auto;
color: $blue4;
cursor: pointer;
padding-right: 1rem;
white-space: nowrap;
overflow: hidden;
display: flex;
align-items: center;
}
.controls {
visibility: hidden;
opacity: 0.0;
display: flex;
justify-content: space-between;
background-color: $gray2;
padding: 0.76rem 0.875rem;
padding: 0.5rem 0.875rem;
a {
display: flex;

43
src/admin/components/lists/terms-list.vue
View File

@ -227,34 +227,23 @@ export default {
this.$termsListBus.onEditTerm(newTerm);
},
onTermEditionFinished($event) {
this.$termsListBus.onTermEditionSaved($event);
},
onTermEditionCanceled($event) {
let term = $event;
let originalTerm;
for (let aTerm of this.termsList) {
if (aTerm.id == term.id)
originalTerm = aTerm;
else {
let childOriginalTerm = t.find(aTerm, [], (node) => { return node.id == term.id} );
if (childOriginalTerm != undefined)
originalTerm = childOriginalTerm;
}
}
if (originalTerm != undefined) {
if (term.id == 'new') {
for (let i = 0; i < this.localTerms.length; i++) {
if (this.localTerms[i].id == term.id) {
this.$set(this.localTerms, i, JSON.parse(JSON.stringify(originalTerm)));
this.localTerms.splice(i, 1);
break;
} else {
let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == originalTerm.parent });
let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == term.parent });
if (canceledParent != undefined) {
for (let j = 0; j < canceledParent['children'].length; j++){
if (canceledParent['children'][j].id == originalTerm.id) {
this.$set(canceledParent['children'], j, JSON.parse(JSON.stringify(originalTerm)));
if (canceledParent['children'][j].id == term.id) {
canceledParent['children'].splice(j, 1);
break;
}
}
@ -263,17 +252,29 @@ export default {
}
}
} else {
if (term.id == 'new') {
let originalTerm;
for (let aTerm of this.termsList) {
if (aTerm.id == term.id)
originalTerm = aTerm;
else {
let childOriginalTerm = t.find(aTerm, [], (node) => { return node.id == term.id} );
if (childOriginalTerm != undefined)
originalTerm = childOriginalTerm;
}
}
if (originalTerm != undefined) {
for (let i = 0; i < this.localTerms.length; i++) {
if (this.localTerms[i].id == term.id) {
this.localTerms.splice(i, 1);
this.$set(this.localTerms, i, JSON.parse(JSON.stringify(originalTerm)));
break;
} else {
let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == term.parent });
let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == originalTerm.parent });
if (canceledParent != undefined) {
for (let j = 0; j < canceledParent['children'].length; j++){
if (canceledParent['children'][j].id == term.id) {
canceledParent['children'].splice(j, i);
if (canceledParent['children'][j].id == originalTerm.id) {
this.$set(canceledParent['children'], j, JSON.parse(JSON.stringify(originalTerm)));
break;
}
}

2
src/admin/components/navigation/primary-menu.vue
View File

@ -194,7 +194,7 @@ export default {
}
.menu-text-import {
position: relative;
top: -2px;
top: -3px;
left: -6px;
}
}

2
src/admin/scss/_dropdown-and-autocomplete.scss
View File

@ -28,7 +28,7 @@
label { margin-bottom: 0; }
&.control { font-size: 13px !important; }
.b-checkbox { width: 100% };
&:hover { background-color: $gray1; }
&:hover { background-color: $gray2; }
.is-small { color: $gray4; }
&.is-active { background-color: $turquoise2; }

2
src/admin/scss/_filters-menu-modal.scss
View File

@ -5,7 +5,7 @@
background-color: $gray1;
&:hover {
background-color: $gray1;
background-color: $gray2;
}
&::before, &::after {
background-color: $secondary;

2
src/admin/scss/_selects.scss
View File

@ -11,7 +11,7 @@
margin-bottom: 0px !important;
color: $tainacan-input-color;
option:checked, option:hover {
background-color: $gray1 !important;
background-color: $gray2 !important;
}
&:focus, &:active {
box-shadow: none !important;

2
src/admin/scss/_tags.scss
View File

@ -8,7 +8,7 @@
overflow: hidden;
&:hover, &:hover .tag {
background-color: $gray1;
background-color: $gray2;
}
.tag {

2
src/admin/scss/tainacan-admin.scss
View File

@ -113,7 +113,7 @@ a:hover {
color: $blue5;
option:checked, option:hover {
background-color: $gray1 !important;
background-color: $gray2 !important;
}
}
.tainacan-table {