Adjust layout of relation picker & relation picker group [notarize]

dainst · Dec 8, 2022 · c767666 · c767666
1 parent cbea06f
commit c767666
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 43 deletions.
diff --git a/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.html b/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.html
@@ -4,12 +4,10 @@
                      [relationIndex]="i"></relation-picker>
 </div>
 
-<div class="circular-button add-relation"
-     *ngIf="showPlusButton()"
+<div *ngIf="showPlusButton()"
+     class="circular-button add-relation"
+     [class.with-margin]="relations[relationDefinition.name]?.length > 0"
      type="button"
      (click)="createRelation()">+</div>
-
-
-<div class="circular-button add-relation-disabled"
-     *ngIf="!showPlusButton()"
-     type="button">+</div>
+<div *ngIf="!showPlusButton() && relations[relationDefinition.name]?.length > 1"
+     class="relation-picker-group-space"></div>
diff --git a/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.scss b/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.scss
@@ -13,13 +13,17 @@
   }
 }
 
-.add-relation-disabled {
-  display: none;
-}
-
-.add-relation, .add-relation-disabled {
+.add-relation {
   position: relative !important;
   color: #555 !important;
   box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.14) !important;
   user-select: none;
-}
+
+  &.with-margin {
+    margin-top: 5px;
+  }
+}
+
+.relation-picker-group-space {
+  height: 5px;
+}
diff --git a/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker.html b/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker.html
@@ -8,29 +8,31 @@
             <input [(ngModel)]="idSearchString" (keydown)="keyDown($event)" (keyup)="keyUp($event)"
                    (focus)="enterSuggestionMode()" (blur)="leaveSuggestionMode()" class="form-control">
 
-            <div *ngIf="suggestionsVisible" class="suggestion-container"
-                 (mouseleave)="selectedSuggestionIndex = -1">
+            <div *ngIf="suggestionsVisible" class="suggestion-container-positioning">
+                <div *ngIf="suggestionsVisible" class="suggestion-container"
+                    (mouseleave)="selectedSuggestionIndex = -1">
 
-                <div *ngIf="suggestions && suggestions.length > 0">
-                    <div *ngFor="let suggestion of suggestions; let i = index">
-                        <div *ngIf="selectedSuggestionIndex !== i"
-                             class="suggestion"
-                             (mousedown)="createRelation(suggestion)"
-                             (mouseover)="selectedSuggestionIndex = i">
-                            <span class="badge">{{suggestion.resource.identifier}}</span>
-                        </div>
-                        <div *ngIf="selectedSuggestionIndex === i"
-                             class="suggestion selected-suggestion"
-                             (mousedown)="createRelation(suggestion)">
-                            <span class="badge">{{suggestion.resource.identifier}}</span>
+                    <div *ngIf="suggestions && suggestions.length > 0">
+                        <div *ngFor="let suggestion of suggestions; let i = index">
+                            <div *ngIf="selectedSuggestionIndex !== i"
+                                class="suggestion"
+                                (mousedown)="createRelation(suggestion)"
+                                (mouseover)="selectedSuggestionIndex = i">
+                                <span class="badge">{{suggestion.resource.identifier}}</span>
+                            </div>
+                            <div *ngIf="selectedSuggestionIndex === i"
+                                class="suggestion selected-suggestion"
+                                (mousedown)="createRelation(suggestion)">
+                                <span class="badge">{{suggestion.resource.identifier}}</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="badge" *ngIf="!suggestions || suggestions.length === 0">
-                    <span i18n="@@docedit.relationsPicker.noTargetsFound">Keine Ziele gefunden</span>
+                    <div class="suggestion" *ngIf="!suggestions || suggestions.length === 0">
+                        <span class="badge no-targets-badge"
+                              i18n="@@docedit.relationsPicker.noTargetsFound">Keine Ziele gefunden</span>
+                    </div>
                 </div>
             </div>
-
         </div>
         <div *ngIf="relationPicker.selectedTarget">
             <button class="btn btn-default" type="button" (click)="editTarget()">

diff --git a/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker.scss b/desktop/src/app/components/docedit/widgets/relationpicker/relation-picker.scss
@@ -4,10 +4,10 @@
  */
 
 #relation-picker {
-  margin-bottom: 10px;
+  height: 39px;
 
   .red-button {
-    left: 24px;
+    left: 13px;
     margin-bottom: 0;
     box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.14) !important;
 
@@ -18,19 +18,29 @@
   }
 
   .badge {
+    position: relative;
     background-color: #ccc;
     color: #333;
     font-weight: normal;
     border-radius: 1px;
+
+    &.no-targets-badge {
+      font-style: italic;
+    }
   }
 
-  .suggestion-container {
-    position: absolute;
-    left: 71px;
-    background-color: #fff;
-    box-shadow: 3px 3px 3px #ccc;
-    z-index: 100;
-    cursor: default;
+  .suggestion-container-positioning {
+    position: relative;
+    top: 2px;
+
+    .suggestion-container {
+      position: absolute;
+      left: 50px;
+      background-color: #fff;
+      box-shadow: 3px 3px 3px #ccc;
+      z-index: 100;
+      cursor: default;
+    }
   }
 
   .suggestion {
@@ -41,13 +51,16 @@
     }
   }
 
-  .btn-default,
   input {
     position: relative;
     left: 50px;
+    top: 2px;
+    width: calc(100% - 50px);
   }
 
-  input {
-    width: calc(100% - 50px);
+  .btn-default {
+    position: relative;
+    left: 35px;
+    bottom: 2px;
   }
 }