vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed 189 - Order indicators for Multi column sorting

pull/310/head
cagataycivici 2020-04-18 19:03:21 +03:00
parent 22e33d6b42
commit 4d89b18706
12 changed files with 185 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/themes/luna-amber/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #FFB300;
background-color: #212121;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #FFB300;
background-color: #212121;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;

18
public/themes/luna-blue/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #1f7ed0;
background-color: #ffffff;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #1f7ed0;
background-color: #ffffff;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;

18
public/themes/luna-green/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #1ea04c;
background-color: #ffffff;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #1ea04c;
background-color: #ffffff;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;

18
public/themes/luna-pink/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #cc285c;
background-color: #ffffff;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #888888;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #cc285c;
background-color: #ffffff;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #4c4c4c;
color: #dedede;

18
public/themes/nova-colored/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #e02365;
background-color: #ffffff;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #e02365;
background-color: #ffffff;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;

18
public/themes/nova-dark/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #007ad9;
background-color: #ffffff;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #007ad9;
background-color: #ffffff;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;

18
public/themes/nova-light/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #007ad9;
background-color: #ffffff;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #007ad9;
background-color: #ffffff;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;

18
public/themes/nova-vue/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #41b883;
background-color: #ffffff;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #848484;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #41b883;
background-color: #ffffff;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #e0e0e0;
color: #333333;

18
public/themes/rhea/theme.css
View File

@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
body .p-datatable .p-sortable-column .p-sortable-column-icon {
color: #666666;
}
body .p-datatable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #AFD3C8;
background-color: #385048;
}
body .p-datatable .p-sortable-column:not(.p-highlight):hover {
background-color: #eaeaea;
color: #666666;
@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
body .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #666666;
}
body .p-treetable .p-sortable-column .p-sortable-column-badge {
border-radius: 50%;
height: 18px;
min-width: 18px;
line-height: 18px;
display: inline-block;
color: #AFD3C8;
background-color: #385048;
}
body .p-treetable .p-sortable-column:not(.p-highlight):hover {
background-color: #eaeaea;
color: #666666;

1
src/components/datatable/DataTable.vue
View File

@ -1852,6 +1852,7 @@ export default {
.p-datatable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-datatable .p-sortable-column-icon {

12
src/components/datatable/TableHeader.vue
View File

@ -12,6 +12,7 @@
<DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple' && !hasColumnFilter()" />
</th>
</template>
@ -34,6 +35,7 @@
<ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
<DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
</th>
@ -95,13 +97,17 @@ export default {
}
},
methods: {
isMultiSorted(column) {
return column.sortable && this.getMultiSortMetaIndex(column) > -1
},
isColumnSorted(column) {
return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.field || this.sortField === column.sortField)) : this.isMultiSorted(column);
},
getColumnHeaderClass(column) {
const sorted = this.sortMode === 'single' ? (this.sortField && (this.sortField === column.field || this.sortField === column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
return [column.headerClass,
{'p-sortable-column': column.sortable},
{'p-resizable-column': this.resizableColumns},
{'p-highlight': sorted}
{'p-highlight': this.isColumnSorted(column)}
];
},
getFilterColumnHeaderClass(column) {

22
src/components/treetable/TreeTable.vue
View File

@ -29,6 +29,7 @@
<TTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
</th>
</tr>
<tr v-if="hasColumnFilter()">
@ -357,24 +358,26 @@ export default {
this.d_first = 0;
this.$emit('update:first', this.d_first);
},
isMultiSorted(column) {
return column.sortable && this.getMultiSortMetaIndex(column) > -1
},
isColumnSorted(column) {
if (column.sortable) {
return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
}
return false;
},
getColumnHeaderClass(column) {
const sorted = this.isColumnSorted(column);
return [column.headerClass,
{'p-sortable-column': column.sortable},
{'p-resizable-column': this.resizableColumns},
{'p-highlight': sorted}
{'p-highlight': this.isColumnSorted(column)}
];
},
getFilterColumnHeaderClass(column) {
return ['p-filter-column', column.filterHeaderClass];
},
isColumnSorted(column) {
if (column.sortable)
return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
else
return false;
},
getSortableColumnIcon(column) {
let sorted = false;
let sortOrder = null;
@ -897,6 +900,7 @@ export default {
.p-treetable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-treetable .p-sortable-column-icon {