Add heirarchy to SceneSelector dropdown (stream-labs#4205)

* Add heirarchy to SceneSelector dropdown * Fix test selector
Sh00k-ThaD3v · Jul 13, 2022 · db0317b · db0317b
1 parent f14dbbd
commit db0317b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/app/components-react/editor/elements/SceneSelector.m.less b/app/components-react/editor/elements/SceneSelector.m.less
@@ -100,6 +100,11 @@
   padding: 8px;
   border-radius: 4px;
   height: 100%;
+
+  .whisper {
+    font-size: 10px;
+    opacity: 0.7;
+  }
 }
 
 .dropdown-item {

diff --git a/app/components-react/editor/elements/SceneSelector.tsx b/app/components-react/editor/elements/SceneSelector.tsx
@@ -131,17 +131,12 @@ function SceneSelector() {
 
   const DropdownMenu = (
     <div className={cx(styles.dropdownContainer, 'react')}>
-      <TextInput
-        placeholder={$t('Search')}
-        value={searchQuery}
-        onChange={setSearchQuery}
-        nowrap
-        uncontrolled={false}
-      />
-      <div className="link link--pointer" onClick={manageCollections} style={{ marginTop: '6px' }}>
-        {$t('Manage All')}
+      <div className={styles.dropdownItem} onClick={manageCollections} style={{ marginTop: '6px' }}>
+        <i className="icon-edit" />
+        {$t('Manage Scene Collections')}
       </div>
       <hr style={{ borderColor: 'var(--border)' }} />
+      <span className={styles.whisper}>{$t('Your Scene Collections')}</span>
       <Scrollable style={{ height: 'calc(100% - 60px)' }}>
         {filteredCollections().map(collection => (
           <div
@@ -188,7 +183,7 @@ function SceneSelector() {
           <i className="icon-subtract icon-button icon-button--lg" onClick={removeScene} />
         </Tooltip>
         <Tooltip title={$t('Edit Scene Transitions.')} placement="bottom">
-          <i className="icon-settings icon-button icon-button--lg" onClick={showTransitions} />
+          <i className="icon-transition icon-button icon-button--lg" onClick={showTransitions} />
         </Tooltip>
       </div>
       <Scrollable style={{ height: '100%' }} className={styles.scenesContainer}>

diff --git a/app/i18n/en-US/scenes.json b/app/i18n/en-US/scenes.json
@@ -6,7 +6,6 @@
   "There needs to be at least one scene.": "There needs to be at least one scene.",
   "Projector:": "Projector:",
   "Projector: Output": "Projector: Output",
-  "Manage All": "Manage All",
   "This is where your Scene Collections live. Clicking the title will dropdown a menu where you can view & manage.": "This is where your Scene Collections live. Clicking the title will dropdown a menu where you can view & manage.",
   "Are you sure you want to remove %{collectionName}?": "Are you sure you want to remove %{collectionName}?",
   "Create Scene Projector": "Create Scene Projector",
@@ -40,5 +39,6 @@
   "Switch Scenes": "Switch Scenes",
   "Failed to load scene collection.  A new one will be created instead.": "Failed to load scene collection.  A new one will be created instead.",
   "New Scene": "New Scene",
-  "Projector": "Projector"
+  "Projector": "Projector",
+  "Your Scene Collections": "Your Scene Collections"
 }
diff --git a/test/helpers/modules/scenes.ts b/test/helpers/modules/scenes.ts
@@ -20,7 +20,7 @@ export async function clickRemoveScene() {
 
 export async function clickSceneTransitions() {
   await sleep(100);
-  await clickSceneAction('.icon-settings');
+  await clickSceneAction('.icon-transition');
 }
 
 export async function selectScene(name: string) {