This commit is contained in:
parent
6f7b821c8b
commit
3a5b0bdcbc
162 changed files with 15801 additions and 224 deletions
249
FRONT/DEV/src/components/workSpace/modules/appModules/about.tsx
Normal file
249
FRONT/DEV/src/components/workSpace/modules/appModules/about.tsx
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
|
||||
import { MainButton } from "../../../UI/buttons/mainButton"
|
||||
import { workSpaceNames } from "../../../../const/workspace/names"
|
||||
import { useWorkSpaceStore } from "../../../../store"
|
||||
import styled, {useTheme} from "styled-components"
|
||||
import ThemeButton from "../../../UI/buttons/toggletheme"
|
||||
import {buttonNames} from "../../../../const/buttons/names";
|
||||
import {IconComponent} from "../../../../const/buttons/icons";
|
||||
|
||||
type Props = {
|
||||
from: 'reg' | 'helloWindow' | 'workSpace'
|
||||
onBack?: () => void
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: ${(props => props.theme.background)};
|
||||
padding: 50px;
|
||||
box-sizing: border-box;
|
||||
`
|
||||
|
||||
const Content = styled.div`
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 50px;
|
||||
background: ${(props => props.theme.primary)};
|
||||
border-radius: 18px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const Listing = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${(props => props.theme.secondary)};
|
||||
border-radius: 10px;
|
||||
padding: 24px 20px;
|
||||
p{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
`
|
||||
|
||||
const List = styled.ul`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
font-size: 18px;
|
||||
gap: 4px;
|
||||
& li:before {
|
||||
color: ${(props => props.theme.accent)};
|
||||
content: "•";
|
||||
font-size: 28px;
|
||||
width: .8em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
`
|
||||
|
||||
const Title = styled.div`
|
||||
font-size: 20px;
|
||||
`
|
||||
|
||||
const SubTitle = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
background-color:rgba(255, 248, 225, 0.6);
|
||||
border-left: #ff9800 solid 4px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
padding: 20px 12px;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: ${(props => props.theme.errorColor)};
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
width: max-content;
|
||||
}
|
||||
p{
|
||||
font-size: 18px;
|
||||
color: ${(props=>props.theme.textColor)};
|
||||
}
|
||||
.icon{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: #ff9800;
|
||||
}
|
||||
`
|
||||
|
||||
const Links = styled.div`
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
gap: 20px;
|
||||
`
|
||||
|
||||
const LinkBlock = styled.a`
|
||||
text-decoration: none;
|
||||
color: ${(props => props.theme.accent)};;
|
||||
`
|
||||
|
||||
const Copyright = styled.div`
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
color: ${(props => props.theme.offlineColor)};
|
||||
`
|
||||
|
||||
const ButtonContainer = styled.div`
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 14px;
|
||||
`
|
||||
const AboutLine = styled.hr`
|
||||
border: ${(props => props.theme.hoverBtn)} 1px solid;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
const MainTitle = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.version{
|
||||
text-wrap: nowrap;
|
||||
background-color: ${(props => props.theme.hoverBtn)};
|
||||
color: ${(props => props.theme.borderColor)};
|
||||
border-radius: 20px;
|
||||
font-size: 18px;
|
||||
padding: 10px 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
`
|
||||
|
||||
export default function About({ from, onBack }: Props) {
|
||||
const { setWorkModule } = useWorkSpaceStore()
|
||||
const getBackHandler = () => {
|
||||
switch (from) {
|
||||
case 'reg':
|
||||
return onBack
|
||||
case 'helloWindow':
|
||||
return () => setWorkModule(workSpaceNames[1])
|
||||
case 'workSpace':
|
||||
return () => setWorkModule(workSpaceNames[3])
|
||||
default:
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
const backHandler = getBackHandler()
|
||||
const showBackButton = from !== 'reg' || (from === 'reg' && onBack)
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Content>
|
||||
|
||||
<MainTitle>
|
||||
<div className={'title'}>
|
||||
<img src="./assets/images/gossys.png" alt="" />
|
||||
<div style={{width: '100%', display: "flex", justifyContent: 'center'}}><h1>О приложении</h1></div>
|
||||
</div>
|
||||
<p className={'version'}>v 0.0.3</p>
|
||||
</MainTitle>
|
||||
|
||||
<AboutLine/>
|
||||
|
||||
<Title>
|
||||
<p>ГоNets — минимально работоспособный кроссплатформенный продукт (MVP) для демонстрации нашего подхода к управлению настройками ПК в корпоративной среде.</p>
|
||||
</Title>
|
||||
|
||||
<Listing>
|
||||
<p>Возможности:</p>
|
||||
<List>
|
||||
<li>Визуализация активных сетевых ресурсов</li>
|
||||
<li>Настройка параметров локальных и удалённых сетевых ресурсов</li>
|
||||
<li>Управление взаимодействием ресурсов с Клиентом ГoNets</li>
|
||||
</List>
|
||||
</Listing>
|
||||
|
||||
<SubTitle>
|
||||
<svg className="icon" viewBox="0 0 24 24">
|
||||
<path d="M12 2L1 21h22M12 6l7.53 13H4.47M11 10v4h2v-4m-2 6v2h2v-2"/>
|
||||
</svg>
|
||||
<p>Программное обеспечение исключительно для ознакомления и домашнего использования.</p>
|
||||
<a href={'https://gossys.dev/pages/projects/gonets'}>Перейти на ГоNets-PRO</a>
|
||||
</SubTitle>
|
||||
|
||||
<Links>
|
||||
<LinkBlock href={'https://gossys.dev/pages/projects/gonets'}>
|
||||
Домашняя страницa
|
||||
</LinkBlock>
|
||||
|
||||
<LinkBlock href={'https://wiki.gossys.dev/ru/gonets'}>
|
||||
Документация
|
||||
</LinkBlock>
|
||||
|
||||
<LinkBlock href={'https://wiki.gossys.dev/ru/lic/GosysPUB'}>
|
||||
Лицензия
|
||||
</LinkBlock>
|
||||
</Links>
|
||||
|
||||
<Copyright>
|
||||
Разработано и поддерживается ООО «Гибридные Офисные Системы» 2024-2025 г. Все права защищены.
|
||||
</Copyright>
|
||||
|
||||
<ButtonContainer>
|
||||
{showBackButton && backHandler && (
|
||||
<IconComponent
|
||||
width="36"
|
||||
height="36"
|
||||
name={buttonNames[12]}
|
||||
onClick={backHandler}
|
||||
/>
|
||||
|
||||
)}
|
||||
|
||||
{from == 'reg' &&
|
||||
<ThemeButton />
|
||||
}
|
||||
</ButtonContainer>
|
||||
</Content>
|
||||
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue