mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add headings and links to plugin pages

Browse source
This commit is contained in:
Bill Thornton 2024-07-15 10:25:56 -04:00
parent f071ea2a1f
commit f0626465b0
5 changed files with 30 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/apps/dashboard/components/drawer/sections/AdvancedDrawerSection.tsx
View file

@ -77,12 +77,13 @@ const AdvancedDrawerSection = () => {
<ListItemLink to='/dashboard/plugins' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabMyPlugins')} />
</ListItemLink>
<ListItemLink to='/dashboard/plugins/catalog' sx={{ pl: 4 }}>
<ListItemLink
to='/dashboard/plugins/catalog'
includePaths={[ '/dashboard/plugins/repositories' ]}
sx={{ pl: 4 }}
>
<ListItemText inset primary={globalize.translate('TabCatalog')} />
</ListItemLink>
<ListItemLink to='/dashboard/plugins/repositories' sx={{ pl: 4 }}>
<ListItemText inset primary={globalize.translate('TabRepositories')} />
</ListItemLink>
</List>
</Collapse>
<ListItem disablePadding>

9
src/components/ListItemLink.tsx
View file

@ -4,6 +4,8 @@ import { Link, useLocation, useSearchParams } from 'react-router-dom';
interface ListItemLinkProps extends ListItemButtonBaseProps {
to: string
includePaths?: string[]
excludePaths?: string[]
}
const isMatchingParams = (routeParams: URLSearchParams, currentParams: URLSearchParams) => {
@ -19,6 +21,8 @@ const isMatchingParams = (routeParams: URLSearchParams, currentParams: URLSearch
const ListItemLink: FC<ListItemLinkProps> = ({
children,
to,
includePaths = [],
excludePaths = [],
...params
}) => {
const location = useLocation();
@ -27,8 +31,11 @@ const ListItemLink: FC<ListItemLinkProps> = ({
const [ toPath, toParams ] = to.split('?');
// eslint-disable-next-line compat/compat
const toSearchParams = new URLSearchParams(`?${toParams}`);
const selectedPaths = [ toPath, ...includePaths ];
const selected = location.pathname === toPath && (!toParams || isMatchingParams(toSearchParams, searchParams));
const selected = selectedPaths.includes(location.pathname)
&& !excludePaths.includes(location.pathname + location.search)
&& (!toParams || isMatchingParams(toSearchParams, searchParams));
return (
<ListItemButton

9
src/controllers/dashboard/plugins/available/index.html
View file

@ -1,6 +1,15 @@
<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage fullWidthContent">
<div>
<div class="content-primary">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${TabCatalog}</h2>
<a is="emby-linkbutton" class="fab" href="#/dashboard/plugins/repositories" style="margin-left:1em;" title="${Settings}">
<span class="material-icons settings" aria-hidden="true"></span>
</a>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/plugins/">
${Help}
</a>
</div>
<div class="inputContainer">
<input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" label="${Search}" />
</div>

6
src/controllers/dashboard/plugins/installed/index.html
View file

@ -1,6 +1,12 @@
<div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage fullWidthContent">
<div>
<div class="content-primary">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${TabMyPlugins}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/plugins/">
${Help}
</a>
</div>
<div class="inputContainer">
<input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" label="${Search}" />
</div>

3
src/styles/dashboard.scss
View file

@ -156,7 +156,8 @@ div[data-role=controlgroup] a.ui-btn-active {
padding-left: 1em;
}
.content-primary ul:first-child {
.content-primary ul:first-child,
.type-interior .content-primary > .sectionTitleContainer {
margin-top: 0;
}