[4.x] Redesign the Entry Listing UI/UX

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;
+ }
+}

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;
+ }
 }

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 {

resources/css/elements/forms.css

@@ -142,7 +142,10 @@ input.input-text-minimal:read-only,
 
 .radio-fieldtype .option,
 .checkboxes-fieldtype .option {
- @apply mt-3 flex items-center;
+ @apply flex items-center;
+ &:not(:first-child) {
+ @apply mt-3;
+ }
 
  input {
  @apply leading-normal mr-1;

resources/css/elements/tables.css

@@ -16,7 +16,7 @@
 }
 
 .data-list-bulk-actions {
-	@apply bg-white absolute w-full py-3 z-10;
+	@apply bg-white absolute w-full py-2 z-10;
 	padding-left: 56px;
 }
 
@@ -37,16 +37,16 @@
 	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;
- &:first-child { @apply rounded-tl; }
- &:last-child { @apply rounded-tr; }
+ @apply font-medium px-4 py-2;
+ &:first-child { @apply rounded-tl-lg; }
+ &:last-child { @apply rounded-tr-lg; }
  &:hover {
  @apply text-gray-900;
  }
@@ -127,12 +127,10 @@
  }
 
  &.current-column {
- @apply font-bold;
  svg { opacity: 1; }
  }
 
  svg {
- /* transition: all 150ms ease; */
  opacity: 0;
  }
 

resources/js/components/DropdownList.vue

@@ -20,7 +20,7 @@ export default {
  },
  placement: {
  type: String,
- default: 'bottom-end'
+ default: 'bottom'
  },
  scroll: {
  type: Boolean,

resources/js/components/Popover.vue

@@ -26,7 +26,7 @@ export default {
  },
  placement: {
  type: String,
- default: 'bottom-end',
+ default: 'bottom',
  },
  offset: {
  type: Array,

resources/js/components/data-list/BulkActions.vue

@@ -3,8 +3,9 @@
  <div v-if="showAlways || hasSelections" class="data-list-bulk-actions">
  <div class="input-group input-group-sm relative z-10">
  <div class="input-group-prepend">
- <div class="text-gray-700"
+ <div class="text-gray-700 hidden md:inline-block"
  v-text="__n(`:count item selected|:count items selected`, selections.length)" />
+ <div class="text-gray-700 md:hidden" v-text="selections.length" />
  </div>
 
  <data-list-action

resources/js/components/data-list/ColumnPicker.vue

@@ -4,9 +4,9 @@
  <template slot="trigger">
  <button
  v-tooltip="__('Customize Columns')"
- class="btn btn-sm px-1 py-1 -ml-1 cursor-pointer"
+ class="btn py-1 px-1 h-8 w-8 flex items-center justify-center"
  >
- <svg-icon name="settings-horizontal" class="w-4" />
+ <svg-icon name="settings-horizontal" class="w-4 h-4" />
  </button>
  </template>
 

resources/js/components/data-list/Filter.vue

@@ -2,7 +2,7 @@
 
  <div class="w-full no-label">
  <publish-container
- class="p-4"
+ class="p-3"
  v-if="filter.fields.length"
  :name="`filter-${filter.handle}`"
  :meta="{}"

resources/js/components/data-list/FilterPresets.vue

@@ -1,35 +1,85 @@
 <template>
- <div v-if="presets" class="border-b px-4 text-sm">
+ <div>
+ <div class="flex flex-wrap items-center">
 
- <button class="data-list-filter-link" :class="{ active: ! activePreset }" @click="viewAll" v-text="__('All')" />
+<button class="pill-tab mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
 
- <template v-for="(preset, handle) in presets">
- <button class="data-list-filter-link" :class="{ active: handle === activePreset }" @click="viewPreset(handle)">
- {{ preset.display }}
+ <template v-for="(preset, handle) in presets">
+ <button class="pill-tab active mr-1" v-if="handle === activePreset">
+ {{ preset.display }}
+ <button class="opacity-50 hover:opacity-100" @click="showDeleteModal = true">
+ <span class="w-2 h-2 ml-2 mr-1">&times;</span>
+ </button>
+ </button>
+ <button class="pill-tab mr-1" v-else @click="viewPreset(handle)">
+ {{ preset.display }}
+ </button>
+ </template>
+
+ <button class="pill-tab" @click="createNewEmptyPreset" >
+ <svg-icon name="add-bold" class="w-3 h-3"/>
  </button>
- </template>
+ </div>
+
+ <confirmation-modal
+ :buttonText="__('Save')"
+ :title="__('Create New View')"
+ v-if="showSaveModal"
+ @cancel="showSaveModal = false"
+ @confirm="handleSavePreset"
+ >
+ <text-input :focus="true" v-model="savingPresetName" @keydown.enter="handleSavePreset" />
+ </confirmation-modal>
 
+ <confirmation-modal
+ v-if="showDeleteModal"
+ :title="__('Delete View')"
+ :bodyText="__('Are you sure you want to delete this view?')"
+ :buttonText="__('Delete')"
+ :danger="true"
+ @confirm="deletePreset"
+ @cancel="showDeleteModal = false"
+ />
  </div>
 </template>
 
 <script>
 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!'
  }
  },
 
  computed: {
  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,11 +98,62 @@ 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();
+ },
+
+ createNewEmptyPreset() {
+ this.savingPresetName = null;
+ this.showSaveModal = true;
+ },
+
+ 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.refreshPreset() : this.$emit('show-filters');
+ })
+ .catch(error => {
+ this.$toast.error(__('Unable to save view'));
+ this.showSaveModal = false;
+ });
+ },
+
  refreshPresets() {
  this.getPresets();
  this.viewAll();
  },
 
+ refreshPreset() {
+ this.getPresets();
+ this.$emit('hide-filters');
+ this.viewPreset(this.activePreset);
+ },
+
  viewAll() {
  this.$emit('reset');
  },