Skip to content

Commit

Permalink
Indicating order precedence on the sort icon by opacity
Browse files Browse the repository at this point in the history
  • Loading branch information
@balping
balping committed Jun 18, 2016
1 parent cbf3c66 commit c4189fd
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 2 deletions.
26 changes: 25 additions & 1 deletion dist/vue-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -724,6 +724,30 @@ exports.default = {
return '';
}
},
sortIconOpacity: function sortIconOpacity(field) {
//fields with stronger precedence have darker color

//if there are few fields, we go down by 0.3
//ex. 2 fields are selected: 1.0, 0.7

//if there are more we go down evenly on the given spectrum
//ex. 6 fields are selected: 1.0, 0.86, 0.72, 0.58, 0.44, 0.3

var max = 1.0;
var min = 0.3;
var step = 0.3;

var count = this.sortOrder.length;
var current = this.currentSortOrder(field);

if (max - count * step < min) {
step = (max - min) / (count - 1);
}

var opacity = max - current * step;

return opacity;
},
gotoPreviousPage: function gotoPreviousPage() {
if (this.currentPage > 1) {
this.currentPage--;
Expand Down Expand Up @@ -882,7 +906,7 @@ exports.default = {
}
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n <table class=\"vuetable {{tableClass}}\">\n <thead>\n <tr>\n <template v-for=\"field in fields\">\n <template v-if=\"field.visible\">\n <template v-if=\"isSpecialField(field.name)\">\n <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n </th>\n <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n {{field.title || ''}}\n </th>\n </template>\n <template v-else=\"\">\n <th @click=\"orderBy(field, $event)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n {{getTitle(field) | capitalize}}&nbsp;\n <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\"></i>\n </th>\n </template>\n </template>\n </template>\n </tr>\n </thead>\n <tbody v-cloak=\"\">\n <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n <template v-if=\"onRowChanged(item)\"></template>\n <template v-for=\"field in fields\">\n <template v-if=\"field.visible\">\n <template v-if=\"isSpecialField(field.name)\">\n <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n </td>\n <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n </td>\n <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n <template v-for=\"action in itemActions\">\n <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n </button>\n </template>\n </td>\n </template>\n <template v-else=\"\">\n <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n {{{ callCallback(field, item) }}}\n </td>\n <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n {{{ getObjectValue(item, field.name, \"\") }}}\n </td>\n </template>\n </template>\n </template>\n </tr>\n </tbody>\n </table>\n <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n </div>\n <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n </div>\n </div>\n</div>\n"
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n <table class=\"vuetable {{tableClass}}\">\n <thead>\n <tr>\n <template v-for=\"field in fields\">\n <template v-if=\"field.visible\">\n <template v-if=\"isSpecialField(field.name)\">\n <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n </th>\n <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n {{field.title || ''}}\n </th>\n </template>\n <template v-else=\"\">\n <th @click=\"orderBy(field, $event)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n {{getTitle(field) | capitalize}}&nbsp;\n <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\" v-bind:style=\"{opacity: sortIconOpacity(field)}\"></i>\n </th>\n </template>\n </template>\n </template>\n </tr>\n </thead>\n <tbody v-cloak=\"\">\n <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n <template v-if=\"onRowChanged(item)\"></template>\n <template v-for=\"field in fields\">\n <template v-if=\"field.visible\">\n <template v-if=\"isSpecialField(field.name)\">\n <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n </td>\n <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n </td>\n <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n <template v-for=\"action in itemActions\">\n <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n </button>\n </template>\n </td>\n </template>\n <template v-else=\"\">\n <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n {{{ callCallback(field, item) }}}\n </td>\n <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n {{{ getObjectValue(item, field.name, \"\") }}}\n </td>\n </template>\n </template>\n </template>\n </tr>\n </tbody>\n </table>\n <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n </div>\n <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n </div>\n </div>\n</div>\n"
if (module.hot) {(function () { module.hot.accept()
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), true)
Expand Down
27 changes: 26 additions & 1 deletion src/components/Vuetable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
id="_{{field.name}}"
class="{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}">
{{getTitle(field) | capitalize}}&nbsp;
<i v-if="isCurrentSortField(field)" class="{{ sortIcon(field) }}"></i>
<i v-if="isCurrentSortField(field)" class="{{ sortIcon(field) }}" v-bind:style="{opacity: sortIconOpacity(field)}"></i>
</th>
</template>
</template>
Expand Down Expand Up @@ -489,6 +489,31 @@ export default {
return '';
}
},
sortIconOpacity: function(field) {
//fields with stronger precedence have darker color
//if there are few fields, we go down by 0.3
//ex. 2 fields are selected: 1.0, 0.7
//if there are more we go down evenly on the given spectrum
//ex. 6 fields are selected: 1.0, 0.86, 0.72, 0.58, 0.44, 0.3
var max = 1.0;
var min = 0.3;
var step = 0.3;
var count = this.sortOrder.length;
var current = this.currentSortOrder(field);
if(max - count*step < min){
step = (max - min) / (count-1);
}
var opacity = max - current*step;
return opacity;
},
gotoPreviousPage: function() {
if (this.currentPage > 1) {
this.currentPage--
Expand Down

0 comments on commit c4189fd

Please sign in to comment.