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

Move dashboard help links to header icon

Browse source
This commit is contained in:
Bill Thornton 2024-10-25 16:14:19 -04:00
parent 6ae494e07d
commit dc35c9d59e
28 changed files with 102 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/apps/dashboard/AppLayout.tsx
View file

@ -16,6 +16,7 @@ import { useLocale } from 'hooks/useLocale';
import AppTabs from './components/AppTabs';
import AppDrawer from './components/drawer/AppDrawer';
import HelpButton from './components/toolbar/HelpButton';
import { DASHBOARD_APP_PATHS } from './routes/routes';
import './AppOverrides.scss';
@ -68,6 +69,9 @@ export const Component: FC = () => {
isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
buttons={
<HelpButton />
}
>
<AppTabs isDrawerOpen={isDrawerOpen} />
</AppToolbar>

36
src/apps/dashboard/components/toolbar/HelpButton.tsx Normal file
View file

@ -0,0 +1,36 @@
import HelpOutline from '@mui/icons-material/HelpOutline';
import IconButton from '@mui/material/IconButton/IconButton';
import Tooltip from '@mui/material/Tooltip/Tooltip';
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { HelpLinks } from 'apps/dashboard/constants/helpLinks';
import globalize from 'lib/globalize';
const HelpButton = () => (
<Routes>
{
HelpLinks.map(({ paths, url }) => paths.map(path => (
<Route
key={[url, path].join('-')}
path={path}
element={
<Tooltip title={globalize.translate('Help')}>
<IconButton
href={url}
rel='noopener noreferrer'
target='_blank'
size='large'
color='inherit'
>
<HelpOutline />
</IconButton>
</Tooltip>
}
/>
))).flat()
}
</Routes>
);
export default HelpButton;

51
src/apps/dashboard/constants/helpLinks.ts Normal file
View file

@ -0,0 +1,51 @@
export const HelpLinks = [
{
paths: ['/dashboard/devices'],
url: 'https://jellyfin.org/docs/general/server/devices'
}, {
paths: ['/dashboard/libraries'],
url: 'https://jellyfin.org/docs/general/server/libraries'
}, {
paths: [
'/dashboard/livetv',
'/dashboard/livetv/tuner',
'/dashboard/recordings'
],
url: 'https://jellyfin.org/docs/general/server/live-tv/'
}, {
paths: ['/dashboard/livetv/guide'],
url: 'https://jellyfin.org/docs/general/server/live-tv/setup-guide#adding-guide-data'
}, {
paths: ['/dashboard/networking'],
url: 'https://jellyfin.org/docs/general/networking/'
}, {
paths: ['/dashboard/playback/transcoding'],
url: 'https://jellyfin.org/docs/general/server/transcoding'
}, {
paths: [
'/dashboard/plugins',
'/dashboard/plugins/catalog'
],
url: 'https://jellyfin.org/docs/general/server/plugins/'
}, {
paths: ['/dashboard/plugins/repositories'],
url: 'https://jellyfin.org/docs/general/server/plugins/#repositories'
}, {
paths: ['/dashboard/settings'],
url: 'https://jellyfin.org/docs/general/server/settings'
}, {
paths: ['/dashboard/tasks'],
url: 'https://jellyfin.org/docs/general/server/tasks'
}, {
paths: ['/dashboard/users'],
url: 'https://jellyfin.org/docs/general/server/users/adding-managing-users'
}, {
paths: [
'/dashboard/users/access',
'/dashboard/users/parentalcontrol',
'/dashboard/users/password',
'/dashboard/users/profile'
],
url: 'https://jellyfin.org/docs/general/server/users/'
}
];

1
src/apps/dashboard/routes/playback/trickplay.tsx
View file

@ -150,7 +150,6 @@ const PlaybackTrickplay: FC = () => {
<div className='verticalSection'>
<SectionTitleContainer
title={globalize.translate('Trickplay')}
isLinkVisible={false}
/>
</div>

1
src/apps/dashboard/routes/users/access.tsx
View file

@ -247,7 +247,6 @@ const UserLibraryAccess = () => {
<div className='verticalSection'>
<SectionTitleContainer
title={userName}
url='https://jellyfin.org/docs/general/server/users/'
/>
</div>
<SectionTabs activeTab='userlibraryaccess'/>

1
src/apps/dashboard/routes/users/add.tsx
View file

@ -188,7 +188,6 @@ const UserNew = () => {
<div className='verticalSection'>
<SectionTitleContainer
title={globalize.translate('HeaderAddUser')}
url='https://jellyfin.org/docs/general/server/users/'
/>
</div>

1
src/apps/dashboard/routes/users/index.tsx
View file

@ -170,7 +170,6 @@ const UserProfiles = () => {
btnClassName='fab submit sectionTitleButton'
btnTitle='ButtonAddUser'
btnIcon='add'
url='https://jellyfin.org/docs/general/server/users/adding-managing-users'
/>
</div>

4
src/apps/dashboard/routes/users/parentalcontrol.tsx
View file

@ -362,7 +362,6 @@ const UserParentalControl = () => {
<div className='verticalSection'>
<SectionTitleContainer
title={userName}
url='https://jellyfin.org/docs/general/server/users/'
/>
</div>
<SectionTabs activeTab='userparentalcontrol'/>
@ -406,7 +405,6 @@ const UserParentalControl = () => {
btnClassName='fab submit sectionTitleButton'
btnTitle='Add'
btnIcon='add'
isLinkVisible={false}
/>
<div className='fieldDescription'>
{globalize.translate('AllowContentWithTagsHelp')}
@ -431,7 +429,6 @@ const UserParentalControl = () => {
btnClassName='fab submit sectionTitleButton'
btnTitle='Add'
btnIcon='add'
isLinkVisible={false}
/>
<div className='fieldDescription'>
{globalize.translate('BlockContentWithTagsHelp')}
@ -455,7 +452,6 @@ const UserParentalControl = () => {
btnClassName='fab submit sectionTitleButton'
btnTitle='Add'
btnIcon='add'
isLinkVisible={false}
/>
<p>{globalize.translate('HeaderAccessScheduleHelp')}</p>
<div className='accessScheduleList paperList'>

1
src/apps/dashboard/routes/users/password.tsx
View file

@ -42,7 +42,6 @@ const UserPassword = () => {
<div className='verticalSection'>
<SectionTitleContainer
title={userName}
url='https://jellyfin.org/docs/general/server/users/'
/>
</div>
<SectionTabs activeTab='userpassword'/>

1
src/apps/dashboard/routes/users/profile.tsx
View file

@ -290,7 +290,6 @@ const UserEdit = () => {
<div className='verticalSection'>
<SectionTitleContainer
title={userDto?.Name || ''}
url='https://jellyfin.org/docs/general/server/users/'
/>
</div>

1
src/components/tvproviders/schedulesdirect.template.html
View file

@ -1,7 +1,6 @@
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h1 class="sectionTitle">Schedules Direct</h1>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/setup-guide#adding-guide-data">${Help}</a>
</div>
<p class="createAccountHelp"></p>
</div>

1
src/components/tvproviders/xmltv.template.html
View file

@ -1,7 +1,6 @@
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h1 class="sectionTitle">Xml TV</h1>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/setup-guide#adding-guide-data">${Help}</a>
</div>
</div>

1
src/controllers/dashboard/devices/device.html
View file

@ -5,7 +5,6 @@
<div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle reportedName"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/devices">${Help}</a>
</div>
<div class="inputContainer">

11
src/controllers/dashboard/devices/devices.html
View file

@ -4,8 +4,15 @@
<div class="verticalSection verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards flex align-items-center">
<h2 class="sectionTitle sectionTitle-cards">${HeaderDevices}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/devices">${Help}</a>
<button id="deviceDeleteAll" is="emby-button" type="button" class="raised button-alt headerHelpButton">${DeleteAll}</button>
<button
id="deviceDeleteAll"
is="emby-button"
type="button"
class="raised button-alt"
style="margin-left: 1.25em !important; padding-bottom: 0.4em !important; padding-top: 0.4em !important;"
>
${DeleteAll}
</button>
</div>
</div>
<div is="emby-itemscontainer" class="devicesList vertical-wrap" data-multiselect="false"></div>

1
src/controllers/dashboard/encodingsettings.html
View file

@ -5,7 +5,6 @@
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${Transcoding}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/transcoding">${Help}</a>
</div>
</div>

1
src/controllers/dashboard/general.html
View file

@ -5,7 +5,6 @@
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${Settings}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/settings">${Help}</a>
</div>
</div>

1
src/controllers/dashboard/library.html
View file

@ -6,7 +6,6 @@
<span>${ButtonScanAllLibraries}</span>
</button>
<progress max="100" min="0" style="display: inline-block; vertical-align: middle;" class="refreshProgress"></progress>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt" target="_blank" href="https://jellyfin.org/docs/general/server/libraries">${Help}</a>
</div>
<div id="divVirtualFolders"></div>

1
src/controllers/dashboard/networking.html
View file

@ -5,7 +5,6 @@
<div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${TabNetworking}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/networking/">${Help}</a>
</div>
<fieldset class='verticalSection verticalSection-extrabottompadding'>

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

@ -6,9 +6,6 @@
<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}" />

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

@ -3,9 +3,6 @@
<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}" />

3
src/controllers/dashboard/plugins/repositories/index.html
View file

@ -6,9 +6,6 @@
<button is="emby-button" type="button" class="fab btnNewRepository submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/plugins/#repositories">
${Help}
</a>
</div>
<div id="repositories"></div>

1
src/controllers/dashboard/scheduledtasks/scheduledtask.html
View file

@ -4,7 +4,6 @@
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle taskName"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/tasks">${Help}</a>
</div>
<p id="pTaskDescription"></p>
</div>

6
src/controllers/dashboard/scheduledtasks/scheduledtasks.js
View file

@ -33,8 +33,7 @@ function populateList(page, tasks) {
let currentCategory;
let html = '';
for (let i = 0; i < tasks.length; i++) {
const task = tasks[i];
for (const task of tasks) {
if (task.Category != currentCategory) {
currentCategory = task.Category;
if (currentCategory) {
@ -46,9 +45,6 @@ function populateList(page, tasks) {
html += '<h2 class="sectionTitle">';
html += currentCategory;
html += '</h2>';
if (i === 0) {
html += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/tasks">' + globalize.translate('Help') + '</a>';
}
html += '</div>';
html += '<div class="paperList">';
}

1
src/controllers/livetvsettings.html
View file

@ -4,7 +4,6 @@
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${HeaderDVR}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/">${Help}</a>
</div>
</div>

1
src/controllers/livetvstatus.html
View file

@ -10,7 +10,6 @@
<button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
<a is="emby-linkbutton" rel="noopener noreferrer" style="margin-left:2em!important;" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/">${Help}</a>
</div>
<div class="devicesList itemsContainer vertical-wrap" data-hovermenu="false" data-multiselect="false" style="margin-top: .5em;"></div>
</div>

1
src/controllers/livetvtuner.html
View file

@ -5,7 +5,6 @@
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h1 class="sectionTitle">${HeaderLiveTvTunerSetup}</h1>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/">${Help}</a>
</div>
</div>

14
src/elements/SectionTitleContainer.tsx
View file

@ -1,7 +1,5 @@
import React, { FunctionComponent } from 'react';
import IconButtonElement from './IconButtonElement';
import LinkButton from './emby-button/LinkButton';
import globalize from 'lib/globalize';
type IProps = {
SectionClassName?: string;
@ -11,10 +9,8 @@ type IProps = {
btnClassName?: string;
btnTitle?: string;
btnIcon?: string;
isLinkVisible?: boolean;
url?: string;
};
const SectionTitleContainer: FunctionComponent<IProps> = ({ SectionClassName, title, isBtnVisible = false, btnId, btnClassName, btnTitle, btnIcon, isLinkVisible = true, url }: IProps) => {
const SectionTitleContainer: FunctionComponent<IProps> = ({ SectionClassName, title, isBtnVisible = false, btnId, btnClassName, btnTitle, btnIcon }: IProps) => {
return (
<div className={`${SectionClassName} sectionTitleContainer flex align-items-center`}>
<h2 className='sectionTitle'>
@ -29,14 +25,6 @@ const SectionTitleContainer: FunctionComponent<IProps> = ({ SectionClassName, ti
icon={btnIcon}
/>}
{isLinkVisible && <LinkButton
className='raised button-alt headerHelpButton'
target='_blank'
rel='noopener noreferrer'
href={url}>
{globalize.translate('Help')}
</LinkButton>}
</div>
);
};

6
src/styles/site.scss
View file

@ -99,12 +99,6 @@ form {
}
}
.headerHelpButton {
margin-left: 1.25em !important;
padding-bottom: 0.4em !important;
padding-top: 0.4em !important;
}
.mediaInfoContent {
margin-left: auto;
margin-right: auto;