Enh/views menu and views modal

src/modules/main/partials/editViewPartials/SelectedViewColumns.vue

@@ -7,7 +7,7 @@
 			@dragover="dragOver(index)" @dragend="dragEnd(index)">
 			<div class="row-elements">
 				<NcButton
-					aria-label="Move"
+					aria-label="t('tables', 'Move')"
 					type="tertiary-no-background"
 					class="move-button">
 					<template #icon>
@@ -24,7 +24,7 @@
 					({{ t('tables', 'Metadata') }})
 				</div>
 			</div>
-			<div class="row-elements">
+			<div class="row-elements move">
 				<NcButton
 					:disabled="index === 0"
 					aria-label="Move"
@@ -126,62 +126,80 @@ export default {
 
 <style lang="scss" scoped>
 
-.column-entry {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: calc(var(--default-grid-baseline) * 1) 0;
-}
+	.column-entry {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: calc(var(--default-grid-baseline) * 1) 0;
+		border-radius: var(--border-radius-large);
+	}
 
-.display-checkbox {
-	padding-right: calc(var(--default-grid-baseline) * 4);
-}
+	.column-entry:hover {
+		background-color: var(--color-background-dark);
+	}
 
-:deep(.modal-container) {
-	min-width: 60% !important;
-}
+	.display-checkbox {
+		padding-right: calc(var(--default-grid-baseline) * 4);
+	}
 
-:deep(.button-vue) {
-	cursor: move !important;
-	min-height: auto !important;
-	min-width: auto !important;
-}
+	:deep(.modal-container) {
+		min-width: 60% !important;
+	}
 
-:deep(.button-vue__icon) {
-	height: auto !important;
-	width: auto !important;
-	min-height: auto !important;
-	min-width: auto !important;
-}
+	:deep(.button-vue) {
+		cursor: move !important;
+		min-height: auto !important;
+		min-width: auto !important;
+	}
 
-:deep(.checkbox-radio-switch__label) {
-	min-height: auto;
-	padding: 4px;
-}
+	:deep(.button-vue__icon) {
+		height: auto !important;
+		width: auto !important;
+		min-height: auto !important;
+		min-width: auto !important;
+	}
 
-:deep(.checkbox-radio-switch__icon) {
-	margin-right: 0 !important;
-	margin-left: 0 !important;
-}
+	:deep(.checkbox-radio-switch__label) {
+		min-height: auto;
+		padding: 4px;
+	}
 
-.selected-columns-wrapper {
-	display: flex;
-	flex-direction: column;
-}
+	:deep(.checkbox-radio-switch__icon) {
+		margin-right: 0 !important;
+		margin-left: 0 !important;
+	}
 
-.move-button {
-	padding-right: 10px !important;
-	cursor: move !important;
-}
+	.selected-columns-wrapper {
+		display: flex;
+		flex-direction: column;
+	}
 
-.meta-info {
-	font-style: italic;
-	padding-left:  calc(var(--default-grid-baseline) * 1);
-	color: var(--color-info);
-}
+	.move-button {
+		padding-right: 10px !important;
+		cursor: move !important;
+	}
 
-.row-elements {
-	display: flex;
-}
+	.move-button:hover {
+		cursor: move !important;
+	}
+
+	.meta-info {
+		font-style: italic;
+		padding-left:  calc(var(--default-grid-baseline) * 1);
+		color: var(--color-info);
+	}
+
+	.row-elements {
+		display: flex;
+		align-items: center;
+	}
+
+	.row-elements.move {
+		display: none;
+	}
+
+	.column-entry:hover .row-elements.move, .column-entry:focus-within .row-elements.move {
+		display: flex;
+	}
 
 </style>

src/modules/main/partials/editViewPartials/filter/FilterForm.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="filter-section">
-		<div class="filter-text">
+		<div v-if="hasFilter" class="filter-text">
 			{{ t('tables', 'Filtering rows') }}
 		</div>
 		<div v-for="(filterGroup, i) in mutableFilters" :key="i">
@@ -55,8 +55,13 @@ export default {
 			mutableFilters: this.filters,
 		}
 	},
+
 	computed: {
+		hasFilter() {
+			return (this.mutableFilters !== null && this.mutableFilters.length > 0)
+		},
 	},
+
 	methods: {
 		deleteFilterGroup(index) {
 			this.mutableFilters.splice(index, 1)

src/modules/main/sections/ElementDescription.vue

@@ -3,22 +3,14 @@
 		<h1>
 			{{ activeView.emoji }}&nbsp;{{ activeView.title }}
 		</h1>
-		<div v-if="!activeView.isShared || (activeView.isShared && activeView.onSharePermissions.manage)" class="light">
-			<NcButton
-				:aria-label="activeView.isBaseView ? t('tables', 'Edit table') : t('tables', 'Edit view')"
-				type="tertiary"
-				@click="editElement">
-				<template #icon>
-					<Pencil :size="20" />
-				</template>
-				{{ activeView.isBaseView ? t('tables', 'Edit table') : t('tables', 'Edit view') }}
-			</NcButton>
-		</div>
-		<div v-if="isFiltered" style="padding: 0 8px">
-			<InformationOutline :size="20" />
-		</div>
-		<div v-if="isFiltered">
-			{{ t('tables', 'Filtered view') }}
+		<div class="info">
+			<div v-if="isFiltered">
+				<TextIcon :size="15" />
+				{{ t('tables', 'Filtered view') }}&nbsp;&nbsp;
+			</div>
+			<NcSmallButton v-if="isViewSettingSet" @click="resetLocalAdjustments">
+				🔙 {{ t('tables', 'Reset local adjustments') }}
+			</NcSmallButton>
 		</div>
 		<div v-if="activeView.isShared" class="user-bubble">
 			<NcUserBubble
@@ -33,29 +25,45 @@
 
 import { mapGetters } from 'vuex'
 import { emit } from '@nextcloud/event-bus'
-import { NcButton, NcUserBubble } from '@nextcloud/vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import { NcUserBubble } from '@nextcloud/vue'
+import TextIcon from 'vue-material-design-icons/Text.vue'
+import NcSmallButton from '../../../shared/components/ncSmallButton/NcSmallButton.vue'
 
 export default {
 	name: 'ElementDescription',
+
 	components: {
-		NcButton,
 		NcUserBubble,
-		Pencil,
-		InformationOutline,
+		TextIcon,
+		NcSmallButton,
 	},
+
+	props: {
+		viewSetting: {
+			type: Object,
+			default: null,
+		},
+	},
+
 	computed: {
 		...mapGetters(['activeView']),
 		isFiltered() {
 			return this.activeView.filter && this.activeView.filter[0]?.length > 0
 		},
+
+		isViewSettingSet() {
+			return !(!this.viewSetting || ((!this.viewSetting.hiddenColumns || this.viewSetting.hiddenColumns.length === 0) && (!this.viewSetting.sorting) && (!this.viewSetting.filter || this.viewSetting.filter.length === 0)))
+		},
 	},
 
 	methods: {
 		editElement() {
 			emit('tables:view:edit', this.activeView)
 		},
+
+		resetLocalAdjustments() {
+			this.$store.dispatch('resetViewSetting')
+		},
 	},
 }
 </script>
@@ -83,4 +91,20 @@ export default {
 	padding-left: calc(var(--default-grid-baseline) * 2);
 }
 
+.info {
+	display: inline-flex;
+	margin-left: calc(var(--default-grid-baseline) * 2);
+	align-items: center;
+	color: var(--color-text-maxcontrast);
+}
+
+.info > div {
+	display: inline-flex;
+	width: max-content;
+}
+
+.info span {
+	padding: calc(var(--default-grid-baseline) * 1);
+}
+
 </style>

src/modules/navigation/partials/NavigationBaseViewItem.vue

@@ -28,17 +28,13 @@
 
 		<template #actions>
 			<NcActionButton v-if="canManageTable(baseView)"
-				icon="icon-add"
 				:close-after-click="true"
 				@click="createView">
+				<template #icon>
+					<PlaylistPlus :size="20" />
+				</template>
 				{{ t('tables', 'Create view') }}
 			</NcActionButton>
-			<NcActionButton v-if="canManageElement(baseView)"
-				icon="icon-rename"
-				:close-after-click="true"
-				@click="editView">
-				{{ t('tables', 'Edit table') }}
-			</NcActionButton>
 			<NcActionButton v-if="canShareElement(baseView)"
 				icon="icon-share"
 				:close-after-click="true"
@@ -94,6 +90,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import Creation from 'vue-material-design-icons/Creation.vue'
 import Import from 'vue-material-design-icons/Import.vue'
 import NavigationViewItem from './NavigationViewItem.vue'
+import PlaylistPlus from 'vue-material-design-icons/PlaylistPlus.vue'
 
 export default {
 	name: 'NavigationBaseViewItem',
@@ -109,6 +106,7 @@ export default {
 		NcCounterBubble,
 		NcAvatar,
 		Creation,
+		PlaylistPlus,
 	},
 
 	filters: {

src/modules/navigation/partials/NavigationViewItem.vue

@@ -24,11 +24,21 @@
 		</template>
 		<template #actions>
 			<NcActionButton v-if="canManageElement(view)"
-				icon="icon-rename"
 				:close-after-click="true"
 				@click="editView">
+				<template #icon>
+					<PlaylistEdit :size="20" />
+				</template>
 				{{ t('tables', 'Edit view') }}
 			</NcActionButton>
+			<NcActionButton v-if="canManageTable(view)"
+				:close-after-click="true"
+				@click="cloneView">
+				<template #icon>
+					<PlaylistPlay :size="20" decorative />
+				</template>
+				{{ t('tables', 'Duplicate view') }}
+			</NcActionButton>
 			<NcActionButton v-if="canShareElement(view)"
 				icon="icon-share"
 				:close-after-click="true"
@@ -51,14 +61,6 @@
 					<Creation :size="20" />
 				</template>
 			</NcActionButton>
-			<NcActionButton v-if="canManageTable(view)"
-				:close-after-click="true"
-				@click="cloneView">
-				<template #icon>
-					<TableMultiple :size="20" decorative />
-				</template>
-				{{ t('tables', 'Duplicate view') }}
-			</NcActionButton>
 			<NcActionButton v-if="canManageElement(view)"
 				icon="icon-delete"
 				:close-after-click="true"
@@ -86,14 +88,15 @@ import Table from 'vue-material-design-icons/Table.vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import DialogConfirmation from '../../../shared/modals/DialogConfirmation.vue'
 import Creation from 'vue-material-design-icons/Creation.vue'
-import Import from 'vue-material-design-icons/Import.vue'
-import TableMultiple from 'vue-material-design-icons/TableMultiple.vue'
+import PlaylistPlay from 'vue-material-design-icons/PlaylistPlay.vue'
 import { emit } from '@nextcloud/event-bus'
+import PlaylistEdit from 'vue-material-design-icons/PlaylistEdit.vue'
 
 export default {
 	name: 'NavigationViewItem',
 
 	components: {
+		PlaylistEdit,
 		// eslint-disable-next-line vue/no-reserved-component-names
 		Table,
 		NcAppNavigationItem,
@@ -102,8 +105,7 @@ export default {
 		NcActionButton,
 		Creation,
 		NcAvatar,
-		TableMultiple,
-		Import,
+		PlaylistPlay,
 	},
 
 	filters: {

src/pages/DefaultMainView.vue

@@ -3,7 +3,7 @@
 		<div v-if="isLoading" class="icon-loading" />
 
 		<div v-if="!isLoading && activeView">
-			<ElementDescription />
+			<ElementDescription :view-setting="viewSetting" />
 
 			<div class="table-wrapper">
 				<NcView v-if="columns.length > 0"