fix translation and layout
This commit is contained in:
parent
86be9d522b
commit
6dd5c338fe
@ -12,7 +12,7 @@ import {
|
|||||||
EmailInput, PasswordInput,
|
EmailInput, PasswordInput,
|
||||||
InputBlock, Checkbox, Link,
|
InputBlock, Checkbox, Link,
|
||||||
GroupButton, DropDownItem,
|
GroupButton, DropDownItem,
|
||||||
Button, Box, Loader,
|
Button, Box, Loader, Scrollbar,
|
||||||
ModalDialog, utils
|
ModalDialog, utils
|
||||||
} from 'asc-web-components';
|
} from 'asc-web-components';
|
||||||
|
|
||||||
@ -26,6 +26,8 @@ const { EmailSettings } = utils.email;
|
|||||||
const settings = new EmailSettings();
|
const settings = new EmailSettings();
|
||||||
settings.allowDomainPunycode = true;
|
settings.allowDomainPunycode = true;
|
||||||
|
|
||||||
|
const { tablet, mobile } = utils.device;
|
||||||
|
|
||||||
const HeaderContent = styled.div`
|
const HeaderContent = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -42,11 +44,11 @@ const HeaderContent = styled.div`
|
|||||||
left: 240px;
|
left: 240px;
|
||||||
top: 14.5px;
|
top: 14.5px;
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
left: 144px;
|
left: 144px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 375px) {
|
@media ${mobile} {
|
||||||
left: 32px;
|
left: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -65,16 +67,17 @@ const sectionHeaderContent = <HeaderContent>
|
|||||||
const WizardContainer = styled.div`
|
const WizardContainer = styled.div`
|
||||||
.form-container {
|
.form-container {
|
||||||
width: 960px;
|
width: 960px;
|
||||||
|
|
||||||
height: 496px;
|
height: 496px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
width: 480px
|
width: 480px
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 375px) {
|
@media ${mobile} {
|
||||||
width: 311px;
|
width: 311px;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
}
|
}
|
||||||
@ -103,14 +106,14 @@ const WizardContainer = styled.div`
|
|||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
.wizard-title, .wizard-desc {
|
.wizard-title, .wizard-desc {
|
||||||
margin: 10px 0px;
|
margin: 10px 0px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 375px) {
|
@media ${mobile} {
|
||||||
width: 311px;
|
width: 311px;
|
||||||
|
|
||||||
.wizard-title {
|
.wizard-title {
|
||||||
@ -148,10 +151,10 @@ const WizardContainer = styled.div`
|
|||||||
.input-relative {
|
.input-relative {
|
||||||
width: 311px;
|
width: 311px;
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
width: 480px;
|
width: 480px;
|
||||||
}
|
}
|
||||||
@media(max-width: 375px) {
|
@media ${mobile} {
|
||||||
width: 311px;
|
width: 311px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -201,12 +204,12 @@ const WizardContainer = styled.div`
|
|||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
width: 480px;
|
width: 480px;
|
||||||
margin: 32px 0 0 0;
|
margin: 32px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 375px) {
|
@media ${mobile} {
|
||||||
width: 311px;
|
width: 311px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -219,7 +222,7 @@ const WizardContainer = styled.div`
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.settings-title {
|
.settings-title {
|
||||||
|
width: 66px;
|
||||||
font-family: Open Sans;
|
font-family: Open Sans;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@ -229,7 +232,6 @@ const WizardContainer = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.values {
|
.values {
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
@ -262,12 +264,20 @@ const WizardContainer = styled.div`
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
.language-value{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timezone-value {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ${tablet} {
|
||||||
width: 480px;
|
width: 480px;
|
||||||
margin: 32px 0 0 0;
|
margin: 32px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${mobile} {
|
||||||
width: 311px;
|
width: 311px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -278,7 +288,7 @@ const WizardContainer = styled.div`
|
|||||||
height: 44px;
|
height: 44px;
|
||||||
margin: 32px auto 0 auto;
|
margin: 32px auto 0 auto;
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -287,7 +297,7 @@ const WizardContainer = styled.div`
|
|||||||
height: 32px;
|
height: 32px;
|
||||||
width: 528px;
|
width: 528px;
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
width: 293px;
|
width: 293px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -296,7 +306,7 @@ const WizardContainer = styled.div`
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
||||||
@media(max-width: 768px) {
|
@media ${tablet} {
|
||||||
width: 293px;
|
width: 293px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
@ -385,15 +395,19 @@ class Body extends Component {
|
|||||||
|
|
||||||
const machineName = new Promise((res, rej) => {
|
const machineName = new Promise((res, rej) => {
|
||||||
getMachineName(wizardToken)
|
getMachineName(wizardToken)
|
||||||
.then(() => res());
|
.then(() => res());
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
Promise.all([wizardInfo, portalTimezones, portalLanguages, machineName]).then(() => setIsWizardLoaded(true));
|
Promise.all([
|
||||||
|
wizardInfo, portalTimezones,
|
||||||
|
portalLanguages, machineName
|
||||||
|
])
|
||||||
|
.then(() => setIsWizardLoaded(true));
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldComponentUpdate(prevProps) {
|
shouldComponentUpdate(nextProps) {
|
||||||
if(prevProps.isWizardLoaded === true) {
|
if(nextProps.isWizardLoaded === true) {
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false;
|
||||||
@ -679,7 +693,10 @@ class Body extends Component {
|
|||||||
<Box className="values">
|
<Box className="values">
|
||||||
<Text className="text value">{machineName}</Text>
|
<Text className="text value">{machineName}</Text>
|
||||||
{contentEmail}
|
{contentEmail}
|
||||||
<GroupButton className="drop-down value" label={selectLanguage.label} isDropdown={true}>
|
<GroupButton
|
||||||
|
className="drop-down value language-value"
|
||||||
|
label={selectLanguage.label}
|
||||||
|
isDropdown={true}>
|
||||||
{
|
{
|
||||||
languages.map(el => (
|
languages.map(el => (
|
||||||
<DropDownItem
|
<DropDownItem
|
||||||
@ -690,17 +707,22 @@ class Body extends Component {
|
|||||||
))
|
))
|
||||||
}
|
}
|
||||||
</GroupButton>
|
</GroupButton>
|
||||||
<GroupButton className="drop-down value" label={selectTimezone.label} isDropdown={true}>
|
|
||||||
{
|
<GroupButton
|
||||||
timezones.map(el => (
|
className="drop-down value timezone-value"
|
||||||
<DropDownItem
|
label={selectTimezone.label}
|
||||||
key={el.key}
|
isDropdown={true}>
|
||||||
label={el.label}
|
{
|
||||||
onClick={() => this.onSelectTimezoneHandler(el)}
|
timezones.map(el => (
|
||||||
/>
|
<DropDownItem
|
||||||
))
|
key={el.key}
|
||||||
}
|
label={el.label}
|
||||||
</GroupButton>
|
onClick={() => this.onSelectTimezoneHandler(el)}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</GroupButton>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
"errorLicenseBody": "Лицензия не действительна. Убедитесь что вы выбрали верный файл",
|
"errorLicenseBody": "Лицензия не действительна. Убедитесь что вы выбрали верный файл",
|
||||||
"changeEmailTitle": "Измененить адрес электронной почты",
|
"changeEmailTitle": "Измененить адрес электронной почты",
|
||||||
"changeEmailBtn": "Сохранить",
|
"changeEmailBtn": "Сохранить",
|
||||||
"tooltipPasswordTitle": "Пароль должен сожержать:",
|
"tooltipPasswordTitle": "Пароль должен содержать:",
|
||||||
"tooltipPasswordLength": "символов",
|
"tooltipPasswordLength": "символов",
|
||||||
"tooltipPasswordDigits": "цыфры",
|
"tooltipPasswordDigits": "цыфры",
|
||||||
"tooltipPasswordCapital": "Заглавные буквы",
|
"tooltipPasswordCapital": "Заглавные буквы",
|
||||||
|
@ -4,11 +4,6 @@ const initState = {
|
|||||||
isWizardLoaded: false,
|
isWizardLoaded: false,
|
||||||
isOwner: false,
|
isOwner: false,
|
||||||
ownerEmail: '',
|
ownerEmail: '',
|
||||||
domain: '',
|
|
||||||
language: '',
|
|
||||||
timezone: '',
|
|
||||||
languages: [],
|
|
||||||
timezones: [],
|
|
||||||
machineName: ''
|
machineName: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user