From bfe28a19f02886ff7df032d41c8b0cf2d24c4155 Mon Sep 17 00:00:00 2001 From: Jack McDade Date: Tue, 7 Mar 2023 09:26:01 -0500 Subject: [PATCH 01/19] Redesign the Entry Listing UI/UX Now with better use of space, more intuitive UX, and responsive friendly --- resources/css/components/tabs.css | 12 +++ resources/css/elements/badges.css | 12 ++- resources/css/elements/buttons.css | 2 +- resources/css/elements/tables.css | 6 +- .../js/components/data-list/ColumnPicker.vue | 4 +- resources/js/components/data-list/Filter.vue | 2 +- .../js/components/data-list/FilterPresets.vue | 102 ++++++++++++++++-- resources/js/components/data-list/Filters.vue | 54 ++-------- .../js/components/data-list/HasFilters.js | 44 +++++++- resources/js/components/data-list/Search.vue | 18 +++- resources/js/components/data-list/Table.vue | 11 +- resources/js/components/entries/Listing.vue | 46 +++++--- resources/svg/add-bold.svg | 1 + resources/svg/filter-lines.svg | 1 + 14 files changed, 226 insertions(+), 89 deletions(-) create mode 100644 resources/svg/add-bold.svg create mode 100644 resources/svg/filter-lines.svg diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css index 22c9b7f2ca4..0f5feb22a08 100644 --- a/resources/css/components/tabs.css +++ b/resources/css/components/tabs.css @@ -88,3 +88,15 @@ @screen md { .tabs .tab-button { @apply text-base; } } + +.pill-tab { + @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded; + + &:hover { + @apply text-gray-900; + } + + &.active { + @apply bg-blue-100 text-blue-900; + } +} diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css index f0b3c4f22e0..3ca495a000e 100644 --- a/resources/css/elements/badges.css +++ b/resources/css/elements/badges.css @@ -27,19 +27,23 @@ } .filter-badge { - @apply text-2xs text-gray-800 bg-gray-300 flex items-center; - height: 1.625rem; /* 24px */ + @apply text-2xs text-gray-800 bg-white border flex items-center rounded-full; + height: 1.625rem; padding-left: 10px; button { - @apply px-2 text-base text-gray-500 flex items-center rounded; + @apply px-2 text-base text-gray-600 flex items-center rounded; &:hover { - @apply text-gray-700; + @apply text-gray-800; } &:focus { @apply focus-outline; } } + + &.filter-badge-control { + @apply bg-gray-200 border border-gray-500 border-dashed hover:border-gray-600 hover:bg-gray-300; + } } diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css index 4e37adaccc5..103c883038d 100644 --- a/resources/css/elements/buttons.css +++ b/resources/css/elements/buttons.css @@ -97,7 +97,7 @@ button { } &:focus { - @apply focus-outline bg-gray-300; + @apply ring-2 outline-none; } &:active, &:focus:active { diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css index 7cda6424471..5fb8d3d24a6 100644 --- a/resources/css/elements/tables.css +++ b/resources/css/elements/tables.css @@ -37,14 +37,14 @@ overflow-x: auto; thead { - @apply text-sm text-gray-700 text-gray-900; + @apply bg-gray-100 text-xs text-gray-700 text-gray-900; tr { @apply border-b; } th { - @apply font-medium px-4 py-3; + @apply font-medium px-4 py-2; &:first-child { @apply rounded-tl; } &:last-child { @apply rounded-tr; } &:hover { @@ -127,12 +127,10 @@ } &.current-column { - @apply font-bold; svg { opacity: 1; } } svg { - /* transition: all 150ms ease; */ opacity: 0; } diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue index f1a5062cb40..3ddb79ed157 100644 --- a/resources/js/components/data-list/ColumnPicker.vue +++ b/resources/js/components/data-list/ColumnPicker.vue @@ -4,9 +4,9 @@ diff --git a/resources/js/components/data-list/Filter.vue b/resources/js/components/data-list/Filter.vue index e5765c689a8..c640322e301 100644 --- a/resources/js/components/data-list/Filter.vue +++ b/resources/js/components/data-list/Filter.vue @@ -2,7 +2,7 @@
-
+
+
-
+ + + + +
@@ -16,13 +47,21 @@ export default { props: { + activeFilters: Object, activePreset: String, + activePresetPayload: Object, + hasActiveFilters: Boolean, preferencesPrefix: String, + searchQuery: String, }, data() { return { presets: [], + showDeleteModal: false, + showSaveModal: false, + savingPresetName: null, + test: 'hello!' } }, @@ -30,6 +69,17 @@ export default { preferencesKey() { return this.preferencesPrefix ? `${this.preferencesPrefix}.filters` : null; }, + + presetPreferencesPayload() { + let payload = { + display: this.savingPresetName || this.activePresetPayload.display, + }; + + if (this.searchQuery) payload.query = this.searchQuery; + if (this.hasActiveFilters) payload.filters = clone(this.activeFilters); + + return payload; + }, }, created() { @@ -48,6 +98,46 @@ export default { this.viewPreset(handle) }, + deletePreset() { + this.$preferences.remove(`${this.preferencesKey}.${this.activePreset}`) + .then(response => { + this.$emit('deleted', this.activePreset); + this.$toast.success(__('View deleted')); + this.showDeleteModal = false; + this.refreshPresets(); + }) + .catch(error => { + this.$toast.error(__('Unable to delete view')); + this.showDeleteModal = false; + }); + }, + + savePreset() { + if (!this.activePreset) { + this.showSaveModal = true; + return; + } + + this.handleSavePreset(); + }, + + handleSavePreset() { + let presetHandle = this.activePreset || this.$slugify(this.savingPresetName, '_'); + + this.$preferences.set(`${this.preferencesKey}.${presetHandle}`, this.presetPreferencesPayload) + .then(response => { + this.$toast.success(__('View saved')); + this.showSaveModal = false; + this.getPresets(); + this.viewPreset(presetHandle); + this.hasActiveFilters ? this.$emit('hide-filters') : this.$emit('show-filters'); + }) + .catch(error => { + this.$toast.error(__('Unable to save view')); + this.showSaveModal = false; + }); + }, + refreshPresets() { this.getPresets(); this.viewAll(); diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue index becb28080ae..ba24461f37f 100644 --- a/resources/js/components/data-list/Filters.vue +++ b/resources/js/components/data-list/Filters.vue @@ -1,12 +1,11 @@