diff --git a/ui/v2.5/src/components/Changelog/versions/v040.md b/ui/v2.5/src/components/Changelog/versions/v040.md index ec30c82f6..4573898bb 100644 --- a/ui/v2.5/src/components/Changelog/versions/v040.md +++ b/ui/v2.5/src/components/Changelog/versions/v040.md @@ -3,6 +3,7 @@ * Add selective scene export. ### 🎨 Improvements +* Add button to hide left panel on scene page. * Add link to parent studio in studio page. * Add missing scenes movie filter. * Add gallery icon to scene cards. diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss index 1614d4001..5dff4b042 100644 --- a/ui/v2.5/src/components/ScenePlayer/styles.scss +++ b/ui/v2.5/src/components/ScenePlayer/styles.scss @@ -41,6 +41,14 @@ $scrubberHeight: 120px; } } +.scene-tabs, +.scene-player-container { + padding-left: 15px; + padding-right: 15px; + position: relative; + width: 100%; +} + $sceneTabWidth: 450px; @media (min-width: 1200px) { @@ -48,20 +56,48 @@ $sceneTabWidth: 450px; flex: 0 0 $sceneTabWidth; max-width: $sceneTabWidth; overflow: auto; + + &.collapsed { + display: none; + } + } + + .scene-divider { + flex: 0 0 15px; + max-width: 15px; + + button { + background-color: transparent; + border: 0; + color: $link-color; + cursor: pointer; + font-size: 10px; + font-weight: 800; + height: 100%; + line-height: 100%; + padding: 0; + text-align: center; + width: 100%; + + &:active:not(:hover), + &:focus:not(:hover) { + background-color: transparent; + border: 0; + box-shadow: none; + } + } } .scene-player-container { - flex: 0 0 calc(100% - #{$sceneTabWidth}); - max-width: calc(100% - #{$sceneTabWidth}); - } -} + flex: 0 0 calc(100% - #{$sceneTabWidth} - 15px); + max-width: calc(100% - #{$sceneTabWidth} - 15px); + padding-left: 0; -.scene-tabs, -.scene-player-container { - padding-left: 15px; - padding-right: 15px; - position: relative; - width: 100%; + &.expanded { + flex: 0 0 calc(100% - 15px); + max-width: calc(100% - 15px); + } + } } .scrubber-wrapper { diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx index 8edc3a9ba..b2f9669ba 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx @@ -1,4 +1,4 @@ -import { Tab, Nav, Dropdown } from "react-bootstrap"; +import { Tab, Nav, Dropdown, Button } from "react-bootstrap"; import queryString from "query-string"; import React, { useEffect, useState } from "react"; import { useParams, useLocation, useHistory, Link } from "react-router-dom"; @@ -37,6 +37,7 @@ export const Scene: React.FC = () => { const Toast = useToast(); const [generateScreenshot] = useSceneGenerateScreenshot(); const [timestamp, setTimestamp] = useState(getInitialTimestamp()); + const [collapsed, setCollapsed] = useState(false); const [scene, setScene] = useState(); const { data, error, loading } = useFindScene(id); @@ -315,6 +316,10 @@ export const Scene: React.FC = () => { }; }); + function getCollapseButtonText() { + return collapsed ? ">" : "<"; + } + if (loading || streamableLoading || !scene || !data?.findScene) { return ; } @@ -326,7 +331,11 @@ export const Scene: React.FC = () => {
{maybeRenderSceneGenerateDialog()} {maybeRenderDeleteDialog()} -
+
{scene.studio && (

@@ -345,7 +354,16 @@ export const Scene: React.FC = () => {

{renderTabs()}
-
+
+ +
+