Skip to content

Commit

Permalink
chore: optimizing onboarding dialogs for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@uggrock
uggrock committed Mar 15, 2024
1 parent ce12506 commit 58615ec
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 135 deletions.
280 changes: 146 additions & 134 deletions src/renderer/components/dialogs/OnboardingDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,6 @@ function OnboardingDialog(props: Props) {
</DialogTitle>
<DialogContent
style={{
margin: 'auto',
overflowY: 'auto',
overflowX: 'hidden',
}}
Expand All @@ -164,15 +163,20 @@ function OnboardingDialog(props: Props) {
}
`}
</style>
<div style={{ width: 500, minHeight: 600, textAlign: 'center' }}>
<Slider {...sliderSettings}>
<div>
<Slider {...sliderSettings}>
<div>
<div
style={{
padding: 15,
textAlign: 'center',
}}
>
<Typography variant="h5">
{t('core:welcomeToTagSpaces')}
</Typography>
<img
style={{
maxHeight: 300,
maxHeight: 250,
paddingTop: 15,
paddingBottom: 40,
margin: 'auto',
Expand All @@ -195,137 +199,145 @@ function OnboardingDialog(props: Props) {
<ToggleButton value="dark">Dark</ToggleButton>
</ToggleButtonGroup>
</div>
<div style={{ overflow: 'hidden' }}>
<Typography variant="h5">
Choose your the default tagging method for files
</Typography>
<Typography variant="h5">&nbsp;</Typography>
<Typography variant="body1">
Core functionality of the application the tagging of files and
folders. Here you can choose how tags will attached to files.
</Typography>
<FormControl
style={{ marginTop: 20, marginBottom: 20 }}
component="fieldset"
</div>
<div style={{ overflow: 'hidden' }}>
<Typography variant="h5">
Choose your the default tagging method for files
</Typography>
<Typography variant="h5">&nbsp;</Typography>
<Typography variant="body1">
Core functionality of the application the tagging of files and
folders. Here you can choose how tags will attached to files.
</Typography>
<FormControl
style={{ marginTop: 20, marginBottom: 20 }}
component="fieldset"
>
<RadioGroup
aria-label="fileTaggingType"
name="isPersistTagsInSidecar"
onChange={toggleTaggingType}
>
<RadioGroup
aria-label="fileTaggingType"
name="isPersistTagsInSidecar"
onChange={toggleTaggingType}
>
<FormControlLabel
value="false"
control={<Radio checked={!isPersistTagsInSidecar} />}
label={
<Typography
variant="subtitle1"
style={{ textAlign: 'left' }}
>
Use the name of file for saving the tags - Tagging the
file <strong>image.jpg</strong> with a tag{' '}
<strong>sunset</strong> will rename it to{' '}
<strong>image[sunset].jpg</strong>
</Typography>
}
/>
<FormControlLabel
value="false"
control={<Radio checked={!isPersistTagsInSidecar} />}
label={
<Typography
variant="subtitle1"
style={{ textAlign: 'left' }}
>
Use the name of file for saving the tags - Tagging the
file <strong>image.jpg</strong> with a tag{' '}
<strong>sunset</strong> will rename it to{' '}
<strong>image[sunset].jpg</strong>
</Typography>
}
/>

<FormControlLabel
style={{ marginTop: 20 }}
value="true"
control={<Radio checked={isPersistTagsInSidecar} />}
label={
<Typography
variant="subtitle1"
style={{ textAlign: 'left' }}
>
Use sidecar file for saving the tags - Tagging the file{' '}
<strong>image.jpg</strong> with a tag{' '}
<strong>sunset</strong> will save this tag in an
additional sidecar file called{' '}
<strong>image.jpg.json</strong> located in a sub folder
with the name
<strong>.ts</strong>
</Typography>
}
/>
<img
style={{ maxHeight: 200, marginTop: 15 }}
src={ChooseTagging}
alt=""
/>
</RadioGroup>
</FormControl>
<Typography variant="body1">
You can always revise you decision and change the tagging
method. But files already tagged with the renaming method will
stay renamed and the created sidecar file with the tags will
stay.
</Typography>
</div>
<div style={{ textAlign: 'center' }}>
<Typography variant="h5">
Collect web pages, create bookmarks or take screenshot from
websites directly in your web browser.
</Typography>
<img
style={{
maxHeight: 300,
paddingTop: 15,
paddingBottom: 20,
margin: 'auto',
display: 'block',
}}
src={BrowserExtension}
alt=""
/>
<Typography variant="h6">
Check out our web clipper browser extension for Chrome, Edge and
Firefox.
</Typography>
<Typography variant="h6">
It is available for free in the official browser stores.
</Typography>
<Button
style={{ marginTop: 20 }}
onClick={() => {
openURLExternally(Links.links.webClipper, true);
}}
variant="contained"
color="primary"
>
Get the web clipper
</Button>
</div>
<div>
<Typography variant="h5">
We hope you will love TagSpaces as much as we do!
</Typography>
<img
style={{
maxHeight: 300,
maxWidth: '90%',
paddingTop: 70,
margin: 'auto',
display: 'block',
}}
src={WizardFinished}
alt=""
/>
<Typography variant="h6">
If you want to learn more about the application, you can start
the introduction from the welcome screen.
</Typography>
<Button
style={{ marginTop: 20 }}
onClick={onClose}
variant="contained"
color="primary"
>
Start using TagSpaces
</Button>
</div>
</Slider>
</div>
<FormControlLabel
style={{ marginTop: 20 }}
value="true"
control={<Radio checked={isPersistTagsInSidecar} />}
label={
<Typography
variant="subtitle1"
style={{ textAlign: 'left' }}
>
Use sidecar file for saving the tags - Tagging the file{' '}
<strong>image.jpg</strong> with a tag{' '}
<strong>sunset</strong> will save this tag in an
additional sidecar file called{' '}
<strong>image.jpg.json</strong> located in a sub folder
with the name
<strong>.ts</strong>
</Typography>
}
/>
<img
style={{ maxHeight: 200, marginTop: 15 }}
src={ChooseTagging}
alt=""
/>
</RadioGroup>
</FormControl>
<Typography variant="body1">
You can always revise you decision and change the tagging method.
But files already tagged with the renaming method will stay
renamed and the created sidecar file with the tags will stay.
</Typography>
</div>
<div style={{ textAlign: 'center' }}>
<Typography variant="h5">
Collect web pages, create bookmarks or take screenshot from
websites directly in your web browser.
</Typography>
<img
style={{
maxHeight: 300,
paddingTop: 15,
paddingBottom: 20,
margin: 'auto',
display: 'block',
}}
src={BrowserExtension}
alt=""
/>
<Typography variant="body1">
Check out our web clipper browser extension for Chrome, Edge and
Firefox. It is available for free in the official browser stores.
</Typography>
<Button
style={{
marginTop: 20,
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: 20,
display: 'block',
}}
onClick={() => {
openURLExternally(Links.links.webClipper, true);
}}
variant="contained"
color="primary"
>
Get the web clipper
</Button>
</div>
<div>
<Typography variant="h5">
We hope you will love TagSpaces as much as we do!
</Typography>
<img
style={{
maxHeight: 300,
maxWidth: '90%',
paddingTop: 70,
margin: 'auto',
display: 'block',
}}
src={WizardFinished}
alt=""
/>
<Typography variant="body1">
If you want to learn more about the application, you can start the
introduction from the welcome screen.
</Typography>
<Button
style={{
marginTop: 20,
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: 20,
display: 'block',
}}
onClick={onClose}
variant="contained"
color="primary"
>
Start using TagSpaces
</Button>
</div>
</Slider>
</DialogContent>
</Dialog>
);
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/dialogs/ProTeaserDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function Slide(props: SlideProps) {
return (
<div
style={{
padding: 50,
padding: 15,
textAlign: 'left',
}}
>
Expand Down

0 comments on commit 58615ec

Please sign in to comment.