Change the design of UI

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>

css/tab.css

@@ -9,4 +9,5 @@ span.icon-openproject {
 
 #tab-open-project {
 	height: 100%;
+	padding: 0;
 }

src/components/tab/SearchInput.vue

@@ -178,6 +178,10 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+#searchBar {
+ padding: 10px;
+}
+
 .searchInput {
 	width: 100%;
 }

src/components/tab/WorkPackage.vue

@@ -56,7 +56,7 @@ export default {
 <style scoped lang="scss">
 .workpackage {
 	width: 100%;
-	padding: 10px 6px 0 6px;
+	padding: 15px 6px 0 10px;
 
 	.row {
 		display: flex;
@@ -76,10 +76,10 @@ export default {
 			margin-right: 4px;
 
 			&__title {
-				mix-blend-mode: difference;
 				font-size: 0.75rem;
 				line-height: 14px;
 				text-align: center;
+				filter: contrast(0) brightness(0);
 			}
 		}
 
@@ -123,4 +123,8 @@ export default {
 		}
 	}
 }
+
+.workpackage div {
+	cursor: pointer;
+}
 </style>

src/views/ProjectsTab.vue

@@ -34,18 +34,11 @@
 			<div v-for="(workpackage, index) in workpackages"
 				:key="workpackage.id"
 				class="linked-workpackages">
-				<WorkPackage
-					:workpackage="workpackage" 
-					:class="{ 'workpackage-seperator': index !== workpackages.length-1 }" />
-				<Actions class="linked-workpackages--menu" menu-align="right">
-					<ActionButton class="linked-workpackages--menu--open" icon="icon-openproject">
-						{{ openLink }}
-					</ActionButton>
-					<ActionSeparator />
-					<ActionButton class="linked-workpackages--menu--delete" icon="icon-delete">
-						{{ deleteLink }}
-					</ActionButton>
-				</Actions>
+				<div class="linked-workpackages--workpackage">
+					<WorkPackage :workpackage="workpackage" />
+					<img class="linked-workpackages--workpackage--unlink" :src="unlinkSvg">
+				</div>
+				<div :class="{ 'workpackage-seperator': index !== workpackages.length-1 }" />
 			</div>
 		</div>
 		<EmptyContent v-else
@@ -58,11 +51,7 @@
 <script>
 import EmptyContent from '../components/tab/EmptyContent'
 import WorkPackage from '../components/tab/WorkPackage'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
 import axios from '@nextcloud/axios'
-import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import SearchInput from '../components/tab/SearchInput'
 import { loadState } from '@nextcloud/initial-state'
@@ -74,9 +63,6 @@ export default {
 		EmptyContent,
 		SearchInput,
 		WorkPackage,
-		Actions,
-		ActionButton,
-		ActionSeparator,
 	},
 	data: () => ({
 		error: '',
@@ -89,11 +75,8 @@ export default {
 		isLoading() {
 			return this.state === 'loading'
 		},
-		deleteLink() {
-			return t('integration_openproject', 'Delete Link')
-		},
-		openLink() {
-			return t('integration_openproject', 'Open in OpenProject')
+		unlinkSvg() {
+			return require('../../img/noConnection.svg')
 		},
 	},
 	methods: {
@@ -184,15 +167,35 @@ export default {
 		top: 140%;
 	}
 
-	.workpackage-seperator{
-		border-bottom: 1px solid rgb(237 237 237);
-	}
-	#openproject-linked-workpackages {
+	.linked-workpackages--workpackage{
+		display: flex;
 		position: relative;
+		width: 100%;
+		&--unlink{
+			position: absolute;
+			top: 12px;
+			right: 14px;
+			height: 15px;
+			width: 18px;
+			align-items: center;
+			filter: contrast(0) brightness(0);
+			visibility: hidden;
+		}
 	}
 
-	.linked-workpackages{
-		display: flex;
+	.linked-workpackages:hover {
+		background-color: var(--color-background-dark);
+	}
+
+	.linked-workpackages:hover .linked-workpackages--workpackage--unlink {
+		visibility: visible;
+		cursor: pointer;
+	}
+
+	.workpackage-seperator {
+		height: 0;
+		margin: 0px 10px;
+		border-bottom: 1px solid rgb(237 237 237);
 	}
 }
 </style>

tests/jest/views/ProjectsTab.spec.js

@@ -16,10 +16,6 @@ describe('ProjectsTab.vue Test', () => {
 	const workPackagesSelector = '#openproject-linked-workpackages'
 	const existingRelationSelector = '.existing-relations'
 	const searchInputStubSelector = 'searchinput-stub'
-	const toggleMenuSelector = '.action-item__menutoggle'
-	const toggleMenuOpenSelector = '.action-item--open'
-	const openWorkpackageSelector = '.linked-workpackages--menu--open'
-	const deleteWorkpackageSelector = '.linked-workpackages--menu--delete'
 
 	beforeEach(() => {
 		// eslint-disable-next-line no-import-assign
@@ -285,25 +281,9 @@ describe('ProjectsTab.vue Test', () => {
 			expect(workPackages).toMatchSnapshot()
 		})
 	})
-
-	describe('action menu', () => {
-		it('should display the action menu for linked work packages', async () => {
-			wrapper = mountWrapper(false)
-			await wrapper.setData({
-				workpackages: workPackagesSearchResponse,
-			})
-			await localVue.nextTick()
-			expect(wrapper.find(toggleMenuOpenSelector).exists()).toBeFalsy()
-			await wrapper.find(toggleMenuSelector).trigger('click')
-			const toggleMenuOpen = wrapper.find(toggleMenuOpenSelector)
-			expect(toggleMenuOpen.exists()).toBeTruthy()
-			expect(wrapper.find(openWorkpackageSelector).text()).toBe('Open in OpenProject')
-			expect(wrapper.find(deleteWorkpackageSelector).text()).toBe('Delete Link')
-		})
-	})
 })
 
-function mountWrapper(stub = true) {
+function mountWrapper() {
 	return mount(ProjectsTab, {
 		localVue,
 		mocks: {
@@ -315,7 +295,6 @@ function mountWrapper(stub = true) {
 		stubs: {
 			SearchInput: true,
 			Avatar: true,
-			Actions: stub,
 		},
 		data: () => ({
 			error: '',