Merge pull request #1052 from rponline/fix/property-title-displacement

fixing displaced property title if tooltip icon shown
nextcloud · Apr 9, 2019 · 2196bc8 · 2196bc8
2 parents 6a9025c + b6599d7
commit 2196bc8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
@@ -41,22 +41,22 @@ $property-value-max-width: 250px;
 	&--addressbooks &__actions {
 		display: none !important;
 	}
-		
+
 	// property row
 	&__row {
 		display: flex;
 		align-items: center;
 		position: relative;
 	}
-	
+
 	// property label or multiselect within row
 	&__label,
 	&__label.multiselect {
 		margin: $grid-input-margin 5px $grid-input-margin 0;
 		padding: $grid-input-padding 0;
 		flex: 1 0; // min width is 60px, let's grow until 120px
 		height: $grid-input-height-with-margin;
-		width: $property-label-min-width; 
+		width: $property-label-min-width;
 		min-width: $property-label-min-width !important; // override multiselect
 		max-width: $property-label-max-width;
 
@@ -174,7 +174,7 @@ $property-value-max-width: 250px;
 			opacity: .7;
 		}
 	}
-	
+
 	// Delete property button + actions
 	&__actions {
 		position: absolute !important;
@@ -185,7 +185,7 @@ $property-value-max-width: 250px;
 		border: 0;
 		background-color: transparent;
 		z-index: 10;
-		// opacity applies on the single action OR 
+		// opacity applies on the single action OR
 		&:not(.action-item--multiple),
 		&.action-item--multiple .icon-more {
 			opacity: 0.5;
@@ -199,4 +199,7 @@ $property-value-max-width: 250px;
 			}
 		}
 	}
+	.property__value {
+		margin-right: 0;
+	}
 }
diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss
@@ -27,10 +27,14 @@
 	opacity: 0.6;
 	user-select: none;
 
+	.property__title--right {
+		display: flex;
+		justify-content: space-between;
+	}
 	.property__title--icon {
 		background-position: center right;
 	}
 	.property__title--icon-details {
 		margin-left: 7px;
 	}
-}
+}
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
@@ -23,11 +23,11 @@
 <template>
 	<h3 class="property__title property__row">
 		<div :class="icon" class="property__label property__title--icon" />
-		<span class="property__value">
-			{{ readableName }}
+		<span class="property__value property__title--right">
+			<div>{{ readableName }}</div>
+			<!-- display tooltip with hint if available -->
+			<div v-if="info" v-tooltip.auto="info" class="property__title--icon-details icon-details" />
 		</span>
-		<!-- display tooltip with hint if available -->
-		<div v-if="info" v-tooltip.auto="info" class="property__title--icon-details icon-details" />
 	</h3>
 </template>