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 AccessContainer into its own Components

Browse source
This commit is contained in:
grafixeyehero 2022-05-07 22:10:01 +03:00
parent 01d29bcf11
commit 0c4851b092
3 changed files with 146 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/dashboard/users/AccessContainer.tsx Normal file
View file

@ -0,0 +1,41 @@
import React, { FunctionComponent } from 'react';
import globalize from '../../../scripts/globalize';
import CheckBoxElement from './CheckBoxElement';
type IProps = {
ContainerClassName?: string;
HeaderTitle?: string;
CheckBoxClassName?: string;
CheckBoxTitle?: string;
ListContainerClassName?: string;
AccessClassName?: string;
ListTitle?: string;
Description?: string;
children?: React.ReactNode
}
const AccessContainer: FunctionComponent<IProps> = ({ContainerClassName, HeaderTitle, CheckBoxClassName, CheckBoxTitle, ListContainerClassName, AccessClassName, ListTitle, Description, children }: IProps) => {
return (
<div className={ContainerClassName}>
<h2>{globalize.translate(HeaderTitle)}</h2>
<CheckBoxElement labelClassName='checkboxContainer' type='checkbox' className={CheckBoxClassName} title={CheckBoxTitle} />
<div className={ListContainerClassName}>
<div className={AccessClassName}>
<h3 className='checkboxListLabel'>
{globalize.translate(ListTitle)}
</h3>
<div className='checkboxList paperList' style={{
padding: '.5em 1em'
}}>
{children}
</div>
</div>
<div className='fieldDescription'>
{globalize.translate(Description)}
</div>
</div>
</div>
);
};
export default AccessContainer;

65
src/components/pages/NewUserPage.tsx
View file

@ -9,6 +9,7 @@ import InputElement from '../dashboard/users/InputElement';
import CheckBoxElement from '../dashboard/users/CheckBoxElement'; import CheckBoxElement from '../dashboard/users/CheckBoxElement';
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import ButtonElement from '../dashboard/users/ButtonElement'; import ButtonElement from '../dashboard/users/ButtonElement';
import AccessContainer from '../dashboard/users/AccessContainer';
type userInput = { type userInput = {
Name?: string; Name?: string;
@ -194,20 +195,16 @@ const NewUserPage: FunctionComponent = () => {
label='LabelPassword' label='LabelPassword'
/> />
</div> </div>
<AccessContainer
<div className='folderAccessContainer'> ContainerClassName='folderAccessContainer'
<h2>{globalize.translate('HeaderLibraryAccess')}</h2> HeaderTitle='HeaderLibraryAccess'
<CheckBoxElement CheckBoxClassName='chkEnableAllFolders'
type='checkbox' CheckBoxTitle='OptionEnableAccessToAllLibraries'
className='chkEnableAllFolders' ListContainerClassName='folderAccessListContainer'
title='OptionEnableAccessToAllLibraries' AccessClassName='folderAccess'
/> ListTitle='HeaderLibraries'
<div className='folderAccessListContainer'> Description='LibraryAccessHelp'
<div className='folderAccess'> >
<h3 className='checkboxListLabel'>
{globalize.translate('HeaderLibraries')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{mediaFoldersItems.map(Item => ( {mediaFoldersItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -217,26 +214,18 @@ const NewUserPage: FunctionComponent = () => {
checkedAttribute='' checkedAttribute=''
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'> <AccessContainer
{globalize.translate('LibraryAccessHelp')} ContainerClassName='channelAccessContainer verticalSection-extrabottompadding hide'
</div> HeaderTitle='HeaderChannelAccess'
</div> CheckBoxClassName='chkEnableAllChannels'
</div> CheckBoxTitle='OptionEnableAccessToAllChannels'
<div className='channelAccessContainer verticalSection-extrabottompadding hide'> ListContainerClassName='channelAccessListContainer'
<h2>{globalize.translate('HeaderChannelAccess')}</h2> AccessClassName='channelAccess'
<CheckBoxElement ListTitle='Channels'
type='checkbox' Description='ChannelAccessHelp'
className='chkEnableAllChannels' >
title='OptionEnableAccessToAllChannels'
/>
<div className='channelAccessListContainer'>
<div className='channelAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('Channels')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{channelsItems.map(Item => ( {channelsItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -246,13 +235,7 @@ const NewUserPage: FunctionComponent = () => {
checkedAttribute='' checkedAttribute=''
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'>
{globalize.translate('ChannelAccessHelp')}
</div>
</div>
</div>
<div> <div>
<ButtonElement <ButtonElement
type='submit' type='submit'

107
src/components/pages/UserLibraryAccessPage.tsx
View file

@ -11,6 +11,7 @@ import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import ButtonElement from '../dashboard/users/ButtonElement'; import ButtonElement from '../dashboard/users/ButtonElement';
import { getParameterByName } from '../../utils/url'; import { getParameterByName } from '../../utils/url';
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer'; import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
import AccessContainer from '../dashboard/users/AccessContainer';
type ItemsArr = { type ItemsArr = {
Name?: string; Name?: string;
@ -231,22 +232,17 @@ const UserLibraryAccessPage: FunctionComponent = () => {
<SectionTitleContainer title={userName}/> <SectionTitleContainer title={userName}/>
<SectionTabs activeTab='userlibraryaccess'/> <SectionTabs activeTab='userlibraryaccess'/>
<form className='userLibraryAccessForm'> <form className='userLibraryAccessForm'>
<div className='folderAccessContainer'> <AccessContainer
<h2>{globalize.translate('HeaderLibraryAccess')}</h2> ContainerClassName='folderAccessContainer'
<CheckBoxElement HeaderTitle='HeaderLibraryAccess'
labelClassName='checkboxContainer' CheckBoxClassName='chkEnableAllFolders'
type='checkbox' CheckBoxTitle='OptionEnableAccessToAllLibraries'
className='chkEnableAllFolders' ListContainerClassName='folderAccessListContainer'
title='OptionEnableAccessToAllLibraries' AccessClassName='folderAccess'
/> ListTitle='HeaderLibraries'
<div className='folderAccessListContainer'> Description='LibraryAccessHelp'
<div className='folderAccess'> >
<h3 className='checkboxListLabel'> {mediaFoldersItems.map(Item => (
{globalize.translate('HeaderLibraries')}
</h3>
<div className='checkboxList paperList checkboxList-paperList'>
{mediaFoldersItems.map(Item => {
return (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
className='chkFolder' className='chkFolder'
@ -254,29 +250,19 @@ const UserLibraryAccessPage: FunctionComponent = () => {
Name={Item.Name} Name={Item.Name}
checkedAttribute={Item.checkedAttribute} checkedAttribute={Item.checkedAttribute}
/> />
); ))}
})} </AccessContainer>
</div>
</div> <AccessContainer
<div className='fieldDescription'> ContainerClassName='channelAccessContainer hide'
{globalize.translate('LibraryAccessHelp')} HeaderTitle='HeaderChannelAccess'
</div> CheckBoxClassName='chkEnableAllChannels'
</div> CheckBoxTitle='OptionEnableAccessToAllChannels'
</div> ListContainerClassName='channelAccessListContainer'
<div className='channelAccessContainer hide'> AccessClassName='channelAccess'
<h2>{globalize.translate('HeaderChannelAccess')}</h2> ListTitle='Channels'
<CheckBoxElement Description='ChannelAccessHelp'
labelClassName='checkboxContainer' >
type='checkbox'
className='chkEnableAllChannels'
title='OptionEnableAccessToAllChannels'
/>
<div className='channelAccessListContainer'>
<div className='channelAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('Channels')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{channelsItems.map(Item => ( {channelsItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -286,28 +272,18 @@ const UserLibraryAccessPage: FunctionComponent = () => {
checkedAttribute={Item.checkedAttribute} checkedAttribute={Item.checkedAttribute}
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'> <AccessContainer
{globalize.translate('ChannelAccessHelp')} ContainerClassName='deviceAccessContainer hide'
</div> HeaderTitle='HeaderDeviceAccess'
</div> CheckBoxClassName='chkEnableAllDevices'
</div> CheckBoxTitle='OptionEnableAccessFromAllDevices'
<br /> ListContainerClassName='deviceAccessListContainer'
<div className='deviceAccessContainer hide'> AccessClassName='deviceAccess'
<h2>{globalize.translate('HeaderDeviceAccess')}</h2> ListTitle='HeaderDevices'
<CheckBoxElement Description='DeviceAccessHelp'
labelClassName='checkboxContainer' >
type='checkbox'
className='chkEnableAllDevices'
title='OptionEnableAccessFromAllDevices'
/>
<div className='deviceAccessListContainer'>
<div className='deviceAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('HeaderDevices')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{devicesItems.map(Item => ( {devicesItems.map(Item => (
<CheckBoxListItem <CheckBoxListItem
key={Item.Id} key={Item.Id}
@ -318,14 +294,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
checkedAttribute={Item.checkedAttribute} checkedAttribute={Item.checkedAttribute}
/> />
))} ))}
</div> </AccessContainer>
</div>
<div className='fieldDescription'>
{globalize.translate('DeviceAccessHelp')}
</div>
</div>
<br />
</div>
<br /> <br />
<div> <div>
<ButtonElement <ButtonElement