Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add divider to gallery tab (#3508)

Browse Source
This commit is contained in:
CJ
2023-03-06 15:21:29 -06:00
committed by GitHub
parent 381486904b
commit 42fde9bc9f
3 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
View File

@@ -1,4 +1,4 @@
import { Tab, Nav, Dropdown } from "react-bootstrap"; import { Button, Tab, Nav, Dropdown } from "react-bootstrap";
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { useParams, useHistory, Link } from "react-router-dom"; import { useParams, useHistory, Link } from "react-router-dom";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@@ -40,6 +40,8 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
const Toast = useToast(); const Toast = useToast();
const intl = useIntl(); const intl = useIntl();
const [collapsed, setCollapsed] = useState(false);
const [activeTabKey, setActiveTabKey] = useState("gallery-details-panel"); const [activeTabKey, setActiveTabKey] = useState("gallery-details-panel");
const activeRightTabKey = tab === "images" || tab === "add" ? tab : "images"; const activeRightTabKey = tab === "images" || tab === "add" ? tab : "images";
const setActiveRightTabKey = (newTab: string | null) => { const setActiveRightTabKey = (newTab: string | null) => {
@@ -73,6 +75,10 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
} }
}; };
function getCollapseButtonText() {
return collapsed ? ">" : "<";
}
async function onRescan() { async function onRescan() {
if (!gallery || !path) { if (!gallery || !path) {
return; return;
@@ -285,7 +291,7 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
<title>{title}</title> <title>{title}</title>
</Helmet> </Helmet>
{maybeRenderDeleteDialog()} {maybeRenderDeleteDialog()}
<div className="gallery-tabs"> <div className={`gallery-tabs ${collapsed ? "collapsed" : ""}`}>
<div className="d-none d-xl-block"> <div className="d-none d-xl-block">
{gallery.studio && ( {gallery.studio && (
<h1 className="text-center"> <h1 className="text-center">
@@ -302,7 +308,14 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
</div> </div>
{renderTabs()} {renderTabs()}
</div> </div>
<div className="gallery-container">{renderRightTabs()}</div> <div className="gallery-divider d-none d-xl-block">
<Button onClick={() => setCollapsed(!collapsed)}>
{getCollapseButtonText()}
</Button>
</div>
<div className={`gallery-container ${collapsed ? "expanded" : ""}`}>
{renderRightTabs()}
</div>
</div> </div>
); );
}; };

39
ui/v2.5/src/components/Galleries/styles.scss
View File

@@ -63,11 +63,46 @@ $galleryTabWidth: 450px;
flex: 0 0 $galleryTabWidth; flex: 0 0 $galleryTabWidth;
max-width: $galleryTabWidth; max-width: $galleryTabWidth;
overflow: auto; overflow: auto;
&.collapsed {
display: none;
}
}
.gallery-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;
}
}
} }
.gallery-container { .gallery-container {
flex: 0 0 calc(100% - #{$galleryTabWidth}); flex: 0 0 calc(100% - #{$galleryTabWidth} - 15px);
max-width: calc(100% - #{$galleryTabWidth}); max-width: calc(100% - #{$galleryTabWidth} - 15px);
&.expanded {
flex: 0 0 calc(100% - 15px);
max-width: calc(100% - 15px);
}
} }
} }

1
ui/v2.5/src/docs/en/Changelog/v0200.md
View File

@@ -10,6 +10,7 @@
* Added toggleable favorite button to Performer cards. ([#3369](https://github.com/stashapp/stash/pull/3369)) * Added toggleable favorite button to Performer cards. ([#3369](https://github.com/stashapp/stash/pull/3369))
### 🎨 Improvements ### 🎨 Improvements
* Added collapsible divider to Gallery page. ([#3508](https://github.com/stashapp/stash/pull/3508))
* Overhauled and improved HLS streaming. ([#3274](https://github.com/stashapp/stash/pull/3274)) * Overhauled and improved HLS streaming. ([#3274](https://github.com/stashapp/stash/pull/3274))
### 🐛 Bug fixes ### 🐛 Bug fixes