Wrap the OrientationPanel in a DropdownContent

vue/Element/DetailsPanel.vue

@@ -42,7 +42,10 @@
 
     <div v-if="!retrievedDetails" class="loading-content loader"></div>
     <template v-else>
-      <OrientationPanel :element-id="elementId" v-if="elementType.folder === false" />
+      <template v-if="elementType.folder === false">
+        <OrientationPanel :element-id="elementId" />
+        <hr />
+      </template>
 
       <DropdownContent title="Classifications" :disabled="(!canWrite(corpus) || !hasMlClasses) && !classifications.length">
         <HelpModal class="is-pulled-right" title="Help for classifications" :data="CLASSIFICATIONS_HELP" />

vue/Element/OrientationPanel.vue

 <template>
-  <div class="field is-horizontal">
-    <div class="field-label is-normal is-flex-grow-0">
-      <div class="label">
-        Rotation
+  <DropdownContent title="Orientation">
+    <div class="field is-horizontal">
+      <div class="field-label is-normal is-flex-grow-0">
+        <div class="label">
+          Rotation
+        </div>
       </div>
-    </div>
-    <div class="field-body">
-      <div class="field is-narrow">
-        <div class="control">
-          <div class="select is-fullwidth">
-            <select v-model="rotationAngle" :disabled="loading">
-              <option v-for="rotation in allowedRotations" :key="rotation" :value="rotation">
-                {{ rotation }}°
-              </option>
-              <!-- Handle non-allowed values set via the API -->
-              <option v-if="!allowedRotations.includes(rotationAngle)" :value="rotationAngle" disabled>
-                {{ rotationAngle }}°
-              </option>
-            </select>
+      <div class="field-body">
+        <div class="field is-narrow">
+          <div class="control">
+            <div class="select is-fullwidth">
+              <select v-model="rotationAngle" :disabled="loading">
+                <option v-for="rotation in allowedRotations" :key="rotation" :value="rotation">
+                  {{ rotation }}°
+                </option>
+                <!-- Handle non-allowed values set via the API -->
+                <option v-if="!allowedRotations.includes(rotationAngle)" :value="rotationAngle" disabled>
+                  {{ rotationAngle }}°
+                </option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="field-label is-normal has-text-left">
-        <div class="control">
-          <input
-            id="mirroredSwitch"
-            type="checkbox"
-            class="switch is-rounded is-info"
-            :checked="mirrored"
-            :disabled="loading"
-            v-on:click="toggleMirrored"
-          />
-          <label for="mirroredSwitch">Mirror</label>
+        <div class="field-label is-normal has-text-left">
+          <div class="control">
+            <input
+              id="mirroredSwitch"
+              type="checkbox"
+              class="switch is-rounded is-info"
+              :checked="mirrored"
+              :disabled="loading"
+              v-on:click="toggleMirrored"
+            />
+            <label for="mirroredSwitch">Mirror</label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </DropdownContent>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
+import DropdownContent from '~/vue/DropdownContent'
 
 export default {
   props: {
@@ -48,6 +51,9 @@ export default {
       required: true
     }
   },
+  components: {
+    DropdownContent
+  },
   data: () => ({
     allowedRotations: [0, 90, 180, 270],
     rotationAngle: 0,