feat(app): allow content in UI menu and display items in a straight row

HSF · Apr 23, 2021 · e3d83ea · e3d83ea
1 parent af017f4
commit e3d83ea
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/...s/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.html b/...s/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.html
@@ -11,58 +11,61 @@
     </svg>
   </button>
   <div id="optionsPanel" [hidden]="hideUIMenu">
-    <!-- Toggle for shareable link constructor modal-->
-    <app-share-link></app-share-link>
+    <!-- Event selector -->
+    <app-event-selector></app-event-selector>
 
-    <!-- Toggle for loading geometries modal-->
-    <app-io-options
-      [eventDataImportOptions]="eventDataImportOptions"
-    ></app-io-options>
+    <!-- Zoom in and zoom out controls -->
+    <app-zoom-controls></app-zoom-controls>
 
-    <!-- Toggle for screenshot mode -->
-    <app-ss-mode></app-ss-mode>
+    <app-view-options></app-view-options>
 
-    <!-- Toggle for VR -->
-    <app-vr-toggle></app-vr-toggle>
+    <app-auto-rotate></app-auto-rotate>
 
-    <!-- Toggle for performance -->
-    <app-performance-toggle></app-performance-toggle>
+    <!-- Dark theme toggle -->
+    <app-dark-theme></app-dark-theme>
 
-    <!-- Toggle for collections info -->
-    <app-collections-info></app-collections-info>
+    <!-- Toggle for clipping geometries -->
+    <app-object-clipping></app-object-clipping>
 
-    <!-- Toggle for animating camera through event -->
-    <app-animate-camera></app-animate-camera>
+    <!-- Main view toggle -->
+    <app-main-view-toggle></app-main-view-toggle>
 
-    <!-- Toggle for animating the event data -->
-    <app-animate-event></app-animate-event>
+    <!-- Toggle for overlay panel -->
+    <app-overlay-view></app-overlay-view>
+
+    <!-- Toggle for selected object panel -->
+    <app-object-selection></app-object-selection>
 
     <!-- Info panel -->
     <app-info-panel></app-info-panel>
 
-    <!-- Toggle for selected object panel -->
-    <app-object-selection></app-object-selection>
+    <!-- Toggle for animating the event data -->
+    <app-animate-event></app-animate-event>
 
-    <!-- Toggle for overlay panel -->
-    <app-overlay-view></app-overlay-view>
+    <!-- Toggle for animating camera through event -->
+    <app-animate-camera></app-animate-camera>
 
-    <!-- Main view toggle -->
-    <app-main-view-toggle></app-main-view-toggle>
+    <!-- Toggle for collections info -->
+    <app-collections-info></app-collections-info>
 
-    <!-- Toggle for clipping geometries -->
-    <app-object-clipping></app-object-clipping>
+    <!-- Toggle for performance -->
+    <app-performance-toggle></app-performance-toggle>
 
-    <!-- Dark theme toggle -->
-    <app-dark-theme></app-dark-theme>
+    <!-- Toggle for VR -->
+    <app-vr-toggle></app-vr-toggle>
 
-    <app-auto-rotate></app-auto-rotate>
+    <!-- Toggle for screenshot mode -->
+    <app-ss-mode></app-ss-mode>
 
-    <app-view-options></app-view-options>
+    <!-- Toggle for loading geometries modal-->
+    <app-io-options
+      [eventDataImportOptions]="eventDataImportOptions"
+    ></app-io-options>
 
-    <!-- Zoom in and zoom out controls -->
-    <app-zoom-controls></app-zoom-controls>
+    <!-- Toggle for shareable link constructor modal-->
+    <app-share-link></app-share-link>
 
-    <!-- Event selector -->
-    <app-event-selector></app-event-selector>
+    <!-- Extra options -->
+    <ng-content></ng-content>
   </div>
 </div>
diff --git a/...s/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.scss b/...s/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.scss
@@ -10,7 +10,6 @@
 
 #optionsPanel {
   display: flex;
-  flex-direction: row-reverse;
   justify-content: center;
   align-items: center;
   background: var(--phoenix-background-color-secondary);