Skip to content

Commit

Permalink
Minor refactoring for welcome view (#2333)
Browse files Browse the repository at this point in the history 
* Minor refactoring for welcome view

### What's done:
 * Moved gradients to const strings
 * Moved useful welcome menu functions to external `WelcomeUtils.kt` file
  • Loading branch information
@sanyavertolet
sanyavertolet authored Jul 14, 2023
1 parent b9759b1 commit 9385ada
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 148 deletions.
12 changes: 6 additions & 6 deletions .../src/main/kotlin/com/saveourtool/save/frontend/components/mobile/SaveWelcomeMobileView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
package com.saveourtool.save.frontend.components.mobile

import com.saveourtool.save.frontend.components.views.welcome.chevron
import com.saveourtool.save.frontend.components.views.welcome.pagers.allWelcomePagers
import com.saveourtool.save.frontend.components.views.welcome.pagers.allSaveWelcomePagers
import com.saveourtool.save.frontend.components.views.welcome.pagers.renderReadMorePage
import com.saveourtool.save.frontend.components.views.welcome.welcomeMarketingTitle
import com.saveourtool.save.frontend.components.views.welcome.saveWelcomeMarketingTitle
import com.saveourtool.save.frontend.externals.animations.animator
import com.saveourtool.save.frontend.externals.animations.scrollContainer
import com.saveourtool.save.frontend.externals.animations.scrollPage
import com.saveourtool.save.frontend.utils.SAVE_LIGHT_GRADIENT
import com.saveourtool.save.frontend.utils.particles

import js.core.jso
Expand All @@ -26,8 +27,7 @@ import web.cssom.*
val saveWelcomeMobileView: VFC = VFC {
div {
style = jso {
background =
"-webkit-linear-gradient(270deg, rgb(209, 229, 235), rgb(217, 215, 235))".unsafeCast<Background>()
background = SAVE_LIGHT_GRADIENT.unsafeCast<Background>()
}
particles()
sorryYourScreenIsTooSmall()
Expand All @@ -42,7 +42,7 @@ private fun ChildrenBuilder.sorryYourScreenIsTooSmall() {
@Suppress("EMPTY_BLOCK_STRUCTURE_ERROR")
scrollContainer {
scrollPage {}
allWelcomePagers.forEach { pager ->
allSaveWelcomePagers.forEach { pager ->
scrollPage { }
pager.forEach {
scrollPage {
Expand Down Expand Up @@ -88,6 +88,6 @@ private fun ChildrenBuilder.title() {
div {
className = ClassName("row justify-content-center mx-auto")
// Marketing information
welcomeMarketingTitle("text-primary", true)
saveWelcomeMarketingTitle("text-primary", true)
}
}
3 changes: 2 additions & 1 deletion save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/AbstractView.kt
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.saveourtool.save.frontend.components.views

import com.saveourtool.save.frontend.utils.ComponentWithScope
import com.saveourtool.save.frontend.utils.SAVE_BLUE_GRADIENT

import react.*

Expand All @@ -15,7 +16,7 @@ abstract class AbstractView<P : Props, S : State>(private val hasBg: Boolean = t
override fun componentDidMount() {
val style = if (hasBg) {
Style(
"-webkit-linear-gradient(270deg, rgb(0,20,73), rgb(13,71,161))",
SAVE_BLUE_GRADIENT,
"",
"transparent",
"px-0",
Expand Down
2 changes: 1 addition & 1 deletion ...src/main/kotlin/com/saveourtool/save/frontend/components/views/welcome/MarketingTitles.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import web.cssom.*
* @param textColor
* @param isDark
*/
fun ChildrenBuilder.welcomeMarketingTitle(textColor: String, isDark: Boolean = false) {
fun ChildrenBuilder.saveWelcomeMarketingTitle(textColor: String, isDark: Boolean = false) {
div {
className = ClassName("col-4 text-left mt-5 $textColor")
marketingTitle("Software", isDark)
Expand Down
160 changes: 22 additions & 138 deletions ...src/main/kotlin/com/saveourtool/save/frontend/components/views/welcome/SaveWelcomeView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,8 @@ import com.saveourtool.save.validation.FrontendRoutes
import js.core.jso
import org.w3c.fetch.Headers
import react.*
import react.dom.html.ReactHTML.a
import react.dom.html.ReactHTML.div
import react.dom.html.ReactHTML.form
import react.dom.html.ReactHTML.h4
import react.dom.html.ReactHTML.hr
import react.dom.html.ReactHTML.main
import react.dom.html.ReactHTML.p
import react.dom.html.ReactHTML.span
import web.cssom.*

Expand All @@ -54,8 +49,7 @@ val saveWelcomeView: FC<WelcomeProps> = FC { props ->
className = ClassName("page-header align-items-start")
style = jso {
height = "100vh".unsafeCast<Height>()
background =
"-webkit-linear-gradient(270deg, rgb(0,20,73), rgb(13,71,161))".unsafeCast<Background>()
background = SAVE_BLUE_GRADIENT.unsafeCast<Background>()
position = Position.relative
}
span {
Expand All @@ -67,7 +61,7 @@ val saveWelcomeView: FC<WelcomeProps> = FC { props ->

className = ClassName("row justify-content-center")
// Marketing information
welcomeMarketingTitle("text-white")
saveWelcomeMarketingTitle("text-white")

// Sign-in header
div {
Expand All @@ -76,7 +70,24 @@ val saveWelcomeView: FC<WelcomeProps> = FC { props ->
className = ClassName("card z-index-0 fadeIn3 fadeInBottom")
// if user is not logged in - he needs to input credentials
props.userInfo?.let {
welcomeUserView(props.userInfo)
welcomeUserMenu(props.userInfo) {
div {
className = ClassName("text-sm")
menuTextAndLink("Contests", "/#/${FrontendRoutes.CONTESTS.path}", faCode)
hrNoMargin()
menuTextAndLink("List of Projects", "#/${FrontendRoutes.PROJECTS.path}", faExternalLinkAlt)
hrNoMargin()
menuTextAndLink("Benchmarks Archive", "/#/${FrontendRoutes.AWESOME_BENCHMARKS.path}", faFolderOpen)
hrNoMargin()
menuTextAndLink("Create new organization", "/#/${FrontendRoutes.CREATE_ORGANIZATION.path}", faUser)
if (props.userInfo.isSuperAdmin()) {
hrNoMargin()
menuTextAndLink("Manage organizations", "/#/${FrontendRoutes.MANAGE_ORGANIZATIONS.path}", faUser)
}
hrNoMargin()
menuTextAndLink("New project in organization", "/#/${FrontendRoutes.CREATE_PROJECT.path}", faPlus)
}
}
}
?: run {
inputCredentialsView(oauthProviders)
Expand All @@ -91,16 +102,15 @@ val saveWelcomeView: FC<WelcomeProps> = FC { props ->
div {
className = ClassName("min-vh-100")
style = jso {
background =
"-webkit-linear-gradient(270deg, rgb(209, 229, 235), rgb(217, 215, 235))".unsafeCast<Background>()
background = SAVE_LIGHT_GRADIENT.unsafeCast<Background>()
}

renderGeneralInfoPage()

@Suppress("EMPTY_BLOCK_STRUCTURE_ERROR")
scrollContainer {
scrollPage { }
allWelcomePagers.forEach { pager ->
allSaveWelcomePagers.forEach { pager ->
scrollPage { }
scrollPage {
pager.forEach {
Expand All @@ -127,129 +137,3 @@ external interface WelcomeProps : PropsWithChildren {
*/
var userInfo: UserInfo?
}

@Suppress("TOO_LONG_FUNCTION")
private fun ChildrenBuilder.welcomeUserView(userInfo: UserInfo?) {
div {
className = ClassName("card-header p-0 position-relative mt-n4 mx-3 z-index-2 rounded")
div {
className = ClassName("shadow-primary border-radius-lg py-3 pe-1 rounded")
style = jso {
backgroundColor = "#3075c0".unsafeCast<BackgroundColor>()
}
h4 {
className = ClassName("text-white font-weight-bolder text-center mt-2 mb-0")
div {
className = ClassName("row")
div {
className = ClassName("col text-center px-1 mb-3")
fontAwesomeIcon(icon = faHome)
}
}
+"Welcome, ${userInfo?.name}!"
}
}
}

div {
className = ClassName("card-body")
div {
className = ClassName("text-sm")
menuTextAndLink("Contests", "/#/${FrontendRoutes.CONTESTS.path}", faCode)
hrNoMargin()
menuTextAndLink("List of Projects", "#/${FrontendRoutes.PROJECTS.path}", faExternalLinkAlt)
hrNoMargin()
menuTextAndLink("Benchmarks Archive", "/#/${FrontendRoutes.AWESOME_BENCHMARKS.path}", faFolderOpen)
hrNoMargin()
menuTextAndLink("Create new organization", "/#/${FrontendRoutes.CREATE_ORGANIZATION.path}", faUser)
if (userInfo.isSuperAdmin()) {
hrNoMargin()
menuTextAndLink("Manage organizations", "/#/${FrontendRoutes.MANAGE_ORGANIZATIONS.path}", faUser)
}
hrNoMargin()
menuTextAndLink("New project in organization", "/#/${FrontendRoutes.CREATE_PROJECT.path}", faPlus)
}
}
}

@Suppress("TOO_LONG_FUNCTION")
private fun ChildrenBuilder.inputCredentialsView(oauthProviders: List<OauthProviderInfo>) {
div {
className = ClassName("card-header p-0 position-relative mt-n4 mx-3 z-index-2 rounded")
div {
className = ClassName("shadow-primary border-radius-lg py-3 pe-1 rounded")
style = jso {
backgroundColor = "#3075c0".unsafeCast<BackgroundColor>()
}
h4 {
className = ClassName("text-white font-weight-bolder text-center mt-2 mb-3")
+"Sign in"
}
div {
className = ClassName("row")
oauthProviders.map {
processRegistrationId(
OauthProvidersFeConfig(
size = 3.rem,
it,
)
)
}
}
}
}

div {
className = ClassName("card-body")
form {
className = ClassName("needs-validation")
div {
className = ClassName("mt-4 text-sm text-center")
p {
className = ClassName("mb-0")
+"Don't have an account?"
}

div {
className = ClassName("text-sm text-center")
h4 {
style = jso {
color = "#3075c0".unsafeCast<Color>()
}
a {
href = "#/${FrontendRoutes.PROJECTS.path}"
className = ClassName("text-gradient font-weight-bold ml-2 mr-2")
+"Continue "
fontAwesomeIcon(icon = faSignInAlt)
}
}
+"with limited functionality"
}
}
}
}
}

private fun ChildrenBuilder.menuTextAndLink(text: String, link: String, icon: FontAwesomeIconModule) {
a {
className = ClassName("text-gradient font-weight-bold ml-2 mr-2")
href = link
h4 {
style = jso {
color = "#3075c0".unsafeCast<Color>()
marginBottom = "0.0em".unsafeCast<Margin>()
}
fontAwesomeIcon(icon = icon, "ml-2 mr-2")
+text
}
}
}

private fun ChildrenBuilder.hrNoMargin() {
hr {
style = jso {
marginTop = "0.0em".unsafeCast<Margin>()
marginBottom = "0.0em".unsafeCast<Margin>()
}
}
}
Loading

0 comments on commit 9385ada

Please sign in to comment.