[OP#41290] Add ui for delete an link between work-package and file (#87)

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: multiply;
 				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

@@ -31,10 +31,15 @@
 			<div class="existing-relations">
 				{{ t('integration_openproject', 'Existing relations:') }}
 			</div>
-			<WorkPackage v-for="(workpackage, index) in workpackages"
+			<div v-for="(workpackage, index) in workpackages"
 				:key="workpackage.id"
-				:workpackage="workpackage"
-				:class="{ 'workpackage-seperator': index !== workpackages.length-1 }" />
+				class="linked-workpackages">
+				<div class="linked-workpackages--workpackage">
+					<WorkPackage :workpackage="workpackage" />
+					<div class="linked-workpackages--workpackage--unlink icon-noConnection" />
+				</div>
+				<div :class="{ 'workpackage-seperator': index !== workpackages.length-1 }" />
+			</div>
 		</div>
 		<EmptyContent v-else
 			id="openproject-empty-content"
@@ -70,6 +75,9 @@ export default {
 		isLoading() {
 			return this.state === 'loading'
 		},
+		unlinkSvg() {
+			return require('../../img/noConnection.svg')
+		},
 	},
 	methods: {
 		/**
@@ -159,8 +167,39 @@ export default {
 		top: 140%;
 	}
 
-	.workpackage-seperator{
+	.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: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);
 	}
 }
+
+body.theme--dark .linked-workpackages--workpackage--unlink{
+	filter: invert(100%);
+}
 </style>