Skip to content

Commit 5c020dd

Browse files
committed
Welcome Screen: Initial Layout
1 parent bd3a77e commit 5c020dd

File tree

12 files changed

+302
-27
lines changed

12 files changed

+302
-27
lines changed
Lines changed: 7 additions & 0 deletions
Loading
Lines changed: 17 additions & 0 deletions
Loading

app/src/processing/app/ui/Welcome.kt

Lines changed: 141 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
11
package processing.app.ui
22

3-
import androidx.compose.foundation.layout.Box
4-
import androidx.compose.foundation.layout.sizeIn
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.*
6+
import androidx.compose.foundation.lazy.grid.GridCells
7+
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
8+
import androidx.compose.foundation.shape.RoundedCornerShape
9+
import androidx.compose.material.MaterialTheme
10+
import androidx.compose.material.MaterialTheme.colors
11+
import androidx.compose.material.MaterialTheme.typography
12+
import androidx.compose.material.Text
513
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Alignment
615
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.draw.clip
17+
import androidx.compose.ui.geometry.Offset
18+
import androidx.compose.ui.graphics.Brush
19+
import androidx.compose.ui.graphics.Color
20+
import androidx.compose.ui.res.painterResource
721
import androidx.compose.ui.unit.dp
822
import processing.app.Base
23+
import processing.app.ui.theme.LocalLocale
24+
import processing.app.ui.theme.PDEButton
925
import processing.app.ui.theme.PDEWindow
1026
import processing.app.ui.theme.pdeapplication
1127
import java.io.IOException
@@ -22,7 +38,129 @@ class Welcome @Throws(IOException::class) constructor(base: Base) {
2238
companion object {
2339
@Composable
2440
fun welcome() {
25-
Box(modifier = Modifier.sizeIn(815.dp, 450.dp)){
41+
Row(
42+
modifier = Modifier
43+
// .background(
44+
// Brush.linearGradient(
45+
// colorStops = arrayOf(0.0f to Color.Transparent, 1f to Color.Blue),
46+
// start = Offset(815f / 2, 0f),
47+
// end = Offset(815f, 450f)
48+
// )
49+
// )
50+
.size(815.dp, 450.dp)
51+
.padding(32.dp)
52+
53+
,
54+
horizontalArrangement = Arrangement.spacedBy(32.dp)
55+
){
56+
Box(modifier = Modifier
57+
.weight(1f)
58+
.fillMaxHeight()
59+
){
60+
intro()
61+
}
62+
Column(modifier = Modifier
63+
.weight(1.25f)
64+
.fillMaxHeight(),
65+
verticalArrangement = Arrangement.SpaceBetween
66+
){
67+
examples()
68+
val locale = LocalLocale.current
69+
Column(
70+
verticalArrangement = Arrangement.spacedBy(16.dp)
71+
) {
72+
Text(
73+
text = locale["welcome.action.examples"],
74+
)
75+
Text(
76+
text = locale["welcome.action.tutorials"],
77+
)
78+
}
79+
Row(
80+
modifier = Modifier.fillMaxWidth(),
81+
horizontalArrangement = Arrangement.SpaceBetween,
82+
verticalAlignment = Alignment.CenterVertically
83+
){
84+
Text(
85+
text = locale["welcome.action.startup"],
86+
)
87+
PDEButton(onClick = { println("Open") }) {
88+
val locale = LocalLocale.current
89+
Text(locale["welcome.action.go"])
90+
}
91+
}
92+
}
93+
}
94+
}
95+
96+
@Composable
97+
fun intro(){
98+
val locale = LocalLocale.current
99+
Column(
100+
modifier = Modifier
101+
.fillMaxHeight(),
102+
verticalArrangement = Arrangement.SpaceBetween) {
103+
Column {
104+
Text(
105+
text = locale["welcome.intro.title"],
106+
style = typography.h4,
107+
)
108+
Text(
109+
text = locale["welcome.intro.message"],
110+
style = typography.body1,
111+
)
112+
}
113+
Column {
114+
Text(
115+
text = locale["welcome.intro.suggestion"],
116+
style = typography.body1,
117+
modifier = Modifier
118+
.padding(vertical = 16.dp)
119+
.clip(RoundedCornerShape(12.dp))
120+
.background(colors.primary)
121+
.padding(16.dp)
122+
.sizeIn(maxWidth = 200.dp)
123+
124+
)
125+
Row(
126+
modifier = Modifier
127+
.fillMaxWidth(),
128+
horizontalArrangement = Arrangement.SpaceBetween
129+
) {
130+
Image(
131+
painter = painterResource("welcome/intro/long.svg"),
132+
contentDescription = locale["welcome.intro.long"],
133+
modifier = Modifier
134+
.offset(x = -32.dp)
135+
)
136+
Image(
137+
painter = painterResource("welcome/intro/short.svg"),
138+
contentDescription = locale["welcome.intro.short"],
139+
modifier = Modifier
140+
.align(Alignment.Bottom)
141+
)
142+
}
143+
}
144+
}
145+
}
146+
@Composable
147+
fun examples(){
148+
LazyVerticalGrid(
149+
columns = GridCells.Fixed(2),
150+
verticalArrangement = Arrangement.spacedBy(16.dp),
151+
horizontalArrangement = Arrangement.spacedBy(16.dp),
152+
){
153+
items(4){
154+
Column {
155+
Box(
156+
modifier = Modifier
157+
.background(colors.primary)
158+
.width(185.dp)
159+
.aspectRatio(16f / 9f)
160+
)
161+
Text("Example $it")
162+
}
163+
}
26164

27165
}
28166
}

app/src/processing/app/ui/WelcomeToBeta.kt

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -103,21 +103,8 @@ class WelcomeToBeta {
103103

104104
@JvmStatic
105105
fun main(args: Array<String>) {
106-
application {
107-
val windowState = rememberWindowState(
108-
size = DpSize.Unspecified,
109-
position = WindowPosition(Alignment.Center)
110-
)
111-
112-
Window(onCloseRequest = ::exitApplication, state = windowState, title = Locale()["beta.window.title"]) {
113-
ProcessingTheme {
114-
Surface(color = colors.background) {
115-
welcomeToBeta {
116-
exitApplication()
117-
}
118-
}
119-
}
120-
}
106+
pdeapplication("beta.window.title") {
107+
welcomeToBeta()
121108
}
122109
}
123110
}

app/src/processing/app/ui/theme/Typography.kt

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ package processing.app.ui.theme
22

33
import androidx.compose.material.MaterialTheme.typography
44
import androidx.compose.material.Typography
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.text.ExperimentalTextApi
57
import androidx.compose.ui.text.TextStyle
68
import androidx.compose.ui.text.font.FontFamily
79
import androidx.compose.ui.text.font.FontStyle
@@ -21,18 +23,39 @@ val processingFont = FontFamily(
2123
style = FontStyle.Normal
2224
)
2325
)
26+
val spaceGroteskFont = FontFamily(
27+
Font(
28+
resource = "SpaceGrotesk-Bold.ttf",
29+
weight = FontWeight.Bold,
30+
),
31+
Font(
32+
resource = "SpaceGrotesk-Regular.ttf",
33+
weight = FontWeight.Normal,
34+
),
35+
Font(
36+
resource = "SpaceGrotesk-Medium.ttf",
37+
weight = FontWeight.Medium,
38+
),
39+
Font(
40+
resource = "SpaceGrotesk-SemiBold.ttf",
41+
weight = FontWeight.SemiBold,
42+
),
43+
Font(
44+
resource = "SpaceGrotesk-Light.ttf",
45+
weight = FontWeight.Light,
46+
)
47+
)
2448

2549
val Typography = Typography(
50+
defaultFontFamily = spaceGroteskFont,
51+
h4 = TextStyle(
52+
fontWeight = FontWeight.Bold,
53+
fontSize = 19.sp,
54+
lineHeight = 24.sp
55+
),
2656
body1 = TextStyle(
27-
fontFamily = processingFont,
2857
fontWeight = FontWeight.Normal,
29-
fontSize = 13.sp,
30-
lineHeight = 16.sp
58+
fontSize = 15.sp,
59+
lineHeight = 19.sp
3160
),
32-
subtitle1 = TextStyle(
33-
fontFamily = processingFont,
34-
fontWeight = FontWeight.Bold,
35-
fontSize = 16.sp,
36-
lineHeight = 20.sp
37-
)
3861
)
84.5 KB
Binary file not shown.
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
2+
3+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
4+
This license is copied below, and is also available with a FAQ at:
5+
https://openfontlicense.org
6+
7+
8+
-----------------------------------------------------------
9+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10+
-----------------------------------------------------------
11+
12+
PREAMBLE
13+
The goals of the Open Font License (OFL) are to stimulate worldwide
14+
development of collaborative font projects, to support the font creation
15+
efforts of academic and linguistic communities, and to provide a free and
16+
open framework in which fonts may be shared and improved in partnership
17+
with others.
18+
19+
The OFL allows the licensed fonts to be used, studied, modified and
20+
redistributed freely as long as they are not sold by themselves. The
21+
fonts, including any derivative works, can be bundled, embedded,
22+
redistributed and/or sold with any software provided that any reserved
23+
names are not used by derivative works. The fonts and derivatives,
24+
however, cannot be released under any other type of license. The
25+
requirement for fonts to remain under this license does not apply
26+
to any document created using the fonts or their derivatives.
27+
28+
DEFINITIONS
29+
"Font Software" refers to the set of files released by the Copyright
30+
Holder(s) under this license and clearly marked as such. This may
31+
include source files, build scripts and documentation.
32+
33+
"Reserved Font Name" refers to any names specified as such after the
34+
copyright statement(s).
35+
36+
"Original Version" refers to the collection of Font Software components as
37+
distributed by the Copyright Holder(s).
38+
39+
"Modified Version" refers to any derivative made by adding to, deleting,
40+
or substituting -- in part or in whole -- any of the components of the
41+
Original Version, by changing formats or by porting the Font Software to a
42+
new environment.
43+
44+
"Author" refers to any designer, engineer, programmer, technical
45+
writer or other person who contributed to the Font Software.
46+
47+
PERMISSION & CONDITIONS
48+
Permission is hereby granted, free of charge, to any person obtaining
49+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
50+
redistribute, and sell modified and unmodified copies of the Font
51+
Software, subject to the following conditions:
52+
53+
1) Neither the Font Software nor any of its individual components,
54+
in Original or Modified Versions, may be sold by itself.
55+
56+
2) Original or Modified Versions of the Font Software may be bundled,
57+
redistributed and/or sold with any software, provided that each copy
58+
contains the above copyright notice and this license. These can be
59+
included either as stand-alone text files, human-readable headers or
60+
in the appropriate machine-readable metadata fields within text or
61+
binary files as long as those fields can be easily viewed by the user.
62+
63+
3) No Modified Version of the Font Software may use the Reserved Font
64+
Name(s) unless explicit written permission is granted by the corresponding
65+
Copyright Holder. This restriction only applies to the primary font name as
66+
presented to the users.
67+
68+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69+
Software shall not be used to promote, endorse or advertise any
70+
Modified Version, except to acknowledge the contribution(s) of the
71+
Copyright Holder(s) and the Author(s) or with their explicit written
72+
permission.
73+
74+
5) The Font Software, modified or unmodified, in part or in whole,
75+
must be distributed entirely under this license, and must not be
76+
distributed under any other license. The requirement for fonts to
77+
remain under this license does not apply to any document created
78+
using the Font Software.
79+
80+
TERMINATION
81+
This license becomes null and void if any of the above conditions are
82+
not met.
83+
84+
DISCLAIMER
85+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93+
OTHER DEALINGS IN THE FONT SOFTWARE.
84.6 KB
Binary file not shown.
84.6 KB
Binary file not shown.
84.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)