Изменение окна 'О программе' и улучшение визуала
This commit is contained in:
test
parent
f4aae4f3c4
commit
81ad18d75c
15 changed files with 277 additions and 135 deletions
|
|
@ -2,8 +2,10 @@
|
|||
import { MainButton } from "../../../UI/buttons/mainButton"
|
||||
import { workSpaceNames } from "../../../../const/workspace/names"
|
||||
import { useWorkSpaceStore } from "../../../../store"
|
||||
import styled from "styled-components"
|
||||
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'
|
||||
|
|
@ -29,23 +31,41 @@ const Content = styled.div`
|
|||
justify-content: space-between;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 25px 50px;
|
||||
background: ${(props => props.theme.secondary)};
|
||||
padding: 40px 50px;
|
||||
background: ${(props => props.theme.primary)};
|
||||
border-radius: 18px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const Listing = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
background-color: ${(props => props.theme.secondary)};
|
||||
border-radius: 10px;
|
||||
padding: 24px 20px;
|
||||
p{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
`
|
||||
|
||||
const List = styled.div`
|
||||
const List = styled.ul`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-left: 10px;
|
||||
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`
|
||||
|
|
@ -55,43 +75,55 @@ const Title = styled.div`
|
|||
const SubTitle = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
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;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
gap: 20px;
|
||||
`
|
||||
|
||||
const LinkColumn = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
`
|
||||
|
||||
|
||||
const LinkBlock = styled.div`
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
const LinkBlock = styled.a`
|
||||
text-decoration: none;
|
||||
color: ${(props => props.theme.accent)};;
|
||||
`
|
||||
|
||||
const Copyright = styled.div`
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
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%;
|
||||
display: flex;
|
||||
justifi-content: flex-start;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
const MainTitle = styled.div`
|
||||
|
|
@ -99,24 +131,33 @@ const MainTitle = styled.div`
|
|||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 50px;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
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;
|
||||
}
|
||||
`
|
||||
const Text = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
`
|
||||
|
||||
export default function About({ from, onBack }: Props) {
|
||||
const { setWorkModule } = useWorkSpaceStore()
|
||||
|
||||
const getBackHandler = () => {
|
||||
switch (from) {
|
||||
case 'reg':
|
||||
|
|
@ -138,68 +179,63 @@ export default function About({ from, onBack }: Props) {
|
|||
<Content>
|
||||
|
||||
<MainTitle>
|
||||
<img src="./assets/images/gossys.png" alt="" />
|
||||
<div style={{width: '100%', display: "flex", justifyContent: 'center'}}><h1>О приложении</h1></div>
|
||||
|
||||
<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/>
|
||||
|
||||
<Text>
|
||||
<Title>
|
||||
<p>ГоNets — минимально работоспособный кроссплатформенный продукт (MVP) для демонстрации нашего подхода к управлению настройками ПК в корпоративной среде.</p>
|
||||
</Title>
|
||||
|
||||
<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>
|
||||
|
||||
<Listing>
|
||||
<p>Данное приложение умеет:</p>
|
||||
<List>
|
||||
<p>- Отображать в графическом виде активные сетевые ресурсы</p>
|
||||
<p>- Настраивать сетевые параметры локального и удаленных сетевых ресурсов</p>
|
||||
<p>- Отображать и изменять взаимодействие сетевых ресурсов с установленным Клиентом ГоNets</p>
|
||||
</List>
|
||||
</Listing>
|
||||
<Links>
|
||||
<LinkBlock href={'https://gossys.dev/pages/projects/gonets'}>
|
||||
Домашняя страницa
|
||||
</LinkBlock>
|
||||
|
||||
<SubTitle>
|
||||
<p>Программное обеспечение исключительно для ознакомления и домашнего использования.</p>
|
||||
<p>Для коммерческого использования приобретите версию ГоNets-PRO (Подробная информация на странице продукта)</p>
|
||||
</SubTitle>
|
||||
<LinkBlock href={'https://wiki.gossys.dev/ru/gonets'}>
|
||||
Документация
|
||||
</LinkBlock>
|
||||
|
||||
<Links>
|
||||
<LinkBlock>
|
||||
<p>Ссылка на домашнюю страницу:</p>
|
||||
<a href="https://gossys.dev/pages/projects/gonets">https://gossys.dev/pages/projects/gonets</a>
|
||||
</LinkBlock>
|
||||
|
||||
<LinkBlock>
|
||||
<p>Инструкции и информация:</p>
|
||||
<a href="https://wiki.gossys.dev/ru/gonets">https://wiki.gossys.dev/ru/gonets</a>
|
||||
</LinkBlock>
|
||||
|
||||
<LinkColumn>
|
||||
<p>Распространяется под лицензией GosysPUB текущей версии.</p>
|
||||
<LinkBlock>
|
||||
<p>Полный текст актуальной лицензии:</p>
|
||||
<a href="https://wiki.gossys.dev/ru/lic/GosysPUB">https://wiki.gossys.dev/ru/lic/GosysPUB</a>
|
||||
</LinkBlock>
|
||||
</LinkColumn>
|
||||
|
||||
</Links>
|
||||
|
||||
<Copyright>
|
||||
<p>Разработано и поддерживается ООО «Гибридные Офисные Системы» 2024-2025 г. Все права защищены.</p>
|
||||
</Copyright>
|
||||
|
||||
</Text>
|
||||
<LinkBlock href={'https://wiki.gossys.dev/ru/lic/GosysPUB'}>
|
||||
Лицензия
|
||||
</LinkBlock>
|
||||
</Links>
|
||||
|
||||
<Copyright>
|
||||
Разработано и поддерживается ООО «Гибридные Офисные Системы» 2024-2025 г. Все права защищены.
|
||||
</Copyright>
|
||||
|
||||
<ButtonContainer>
|
||||
{showBackButton && backHandler && (
|
||||
<MainButton
|
||||
title="Назад"
|
||||
<IconComponent
|
||||
width="36"
|
||||
height="36"
|
||||
name={buttonNames[12]}
|
||||
onClick={backHandler}
|
||||
style={{ marginRight: '10px' }}
|
||||
/>
|
||||
|
||||
)}
|
||||
|
||||
{from == 'reg' &&
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue