Skip to content

Commit

Permalink
Merge pull request #16 from sherpal/master
Browse files Browse the repository at this point in the history
Publishing with *all* components implemented and demoed
  • Loading branch information
sherpal authored Aug 16, 2022
2 parents 5db3f1a + a4e660b commit 7ce0fe3
Show file tree
Hide file tree
Showing 204 changed files with 6,303 additions and 1,720 deletions.
4 changes: 4 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"
/>
<!-- Loads the Quicksand font -->
<link
href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700"
Expand Down
16 changes: 15 additions & 1 deletion demo/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@
"preview": "vite preview"
},
"devDependencies": {
"http-proxy": "1.18.1",
"vite": "2.9.0",
"vite-plugin-html": "2.0.7",
"http-proxy": "1.18.1"
"vite-plugin-html": "2.0.7"
},
"dependencies": {
"@ui5/webcomponents": "1.3.0",
"@ui5/webcomponents-fiori": "1.3.0",
"@ui5/webcomponents-icons": "1.3.0"
"@ui5/webcomponents-icons": "1.3.0",
"highlight.js": "11.6.0"
}
}
34 changes: 20 additions & 14 deletions demo/src/main/scala/demo/AvatarExample.scala
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,38 @@ package demo
import be.doeraene.webcomponents.ui5.*
import be.doeraene.webcomponents.ui5.configkeys.*
import com.raquo.laminar.api.L.*
import demo.helpers.{DemoPanel, Example}
import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub}
import demo.helpers.MTG

object AvatarExample extends Example("Avatar") {

private def sherpal = img(src := "/images/avatars/sherpal.png", alt := "sherpal")
private def manaSymbolImage(name: String) = img(src := MTG.manaSymbolsRefs(name), alt := name)

def component: HtmlElement = div(
DemoPanel(
"Basic examples",
def component(using
demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo
): HtmlElement = div(
DemoPanel("Basic examples") {
//-- Begin: Basic examples
div(Avatar(_ => sherpal), Avatar(_.shape := AvatarShape.Square, _ => sherpal))
),
DemoPanel(
"Avatar sizes",
//-- End
},
DemoPanel("Avatar sizes") {
//-- Begin: Avatar sizes
div(
AvatarSize.allValues
.zip(MTG.manaSymbolsShortNames)
.map((size, mana) => Avatar(_.size := size, _ => manaSymbolImage(mana)))
)
),
DemoPanel(
"Avatar with icons",
//-- End
},
DemoPanel("Avatar with icons") {
//-- Begin: Avatar with icons
div(AvatarSize.allValues.zip(IconName.allValues).map((size, icon) => Avatar(_.size := size, _.icon := icon)))
),
DemoPanel(
"Avatar with initials",
//-- End
},
DemoPanel("Avatar with initials") {
//-- Begin: Avatar with initials
div(AvatarSize.allValues.map { size =>
val initials: AvatarInitials = size.value.toList.take(2) match {
case c :: Nil => c
Expand All @@ -38,7 +43,8 @@ object AvatarExample extends Example("Avatar") {
}
Avatar(_.size := size, _.initials := initials)
})
)
//-- End
}
)

}
52 changes: 52 additions & 0 deletions demo/src/main/scala/demo/AvatarGroupExample.scala
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
package demo

import be.doeraene.webcomponents.ui5.*
import be.doeraene.webcomponents.ui5.configkeys.*
import com.raquo.laminar.api.L.*
import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub}
import org.scalajs.dom

object AvatarGroupExample extends Example("AvatarGroup") {

def component(using demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo): HtmlElement = div(
DemoPanel("Avatar Group - type 'Individual'") {
//-- Begin: Avatar Group - type 'Individual'
AvatarGroup(
_.tpe := AvatarGroupType.Individual,
_ => IconName.allValues.take(5).map(icon => Avatar(_.icon := icon, _.size := AvatarSize.M))
)
//-- End
},
DemoPanel("Avatar Group - type 'Group'") {
//-- Begin: Avatar Group - type 'Group'
AvatarGroup(
_.tpe := AvatarGroupType.Group,
_ => IconName.allValues.take(5).map(icon => Avatar(_.icon := icon, _.size := AvatarSize.M))
)
//-- End
},
DemoPanel("Avatar Group with overflow") {
//-- Begin: Avatar Group with overflow
def allAvatars = IconName.allValues.take(10).map(icon => Avatar(_.icon := icon, _.size := AvatarSize.M))

val avatarsForPopoverBus: EventBus[List[HtmlElement]] = new EventBus
val popoverOpenerBus: EventBus[dom.HTMLElement] = new EventBus

div(
AvatarGroup(
_.tpe := AvatarGroupType.Individual,
_ => allAvatars,
_ => width := "400px",
_.events.onClick.map(_.target.hiddenItems.length).map(allAvatars.takeRight) --> avatarsForPopoverBus.writer,
_.events.onClick.filter(_.detail.overflowButtonClicked).map(_.detail.targetRef) --> popoverOpenerBus.writer
),
Popover(
_.showAtFromEvents(popoverOpenerBus.events),
_ => children <-- avatarsForPopoverBus
)
)
//-- End
}
)

}
16 changes: 10 additions & 6 deletions demo/src/main/scala/demo/BadgeExample.scala
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ package demo
import be.doeraene.webcomponents.ui5.*
import be.doeraene.webcomponents.ui5.configkeys.*
import com.raquo.laminar.api.L.*
import demo.helpers.{DemoPanel, Example}
import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub}

object BadgeExample extends Example("Badge") {

Expand All @@ -20,22 +20,26 @@ object BadgeExample extends Example("Badge") {
"the last"
)

def component: HtmlElement = div(
DemoPanel(
"Basic badge",
def component(using
demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo
): HtmlElement = div(
DemoPanel("Basic badge")(
//-- Begin: Basic badge
div(
ColourScheme.allValues
.zip(someTexts)
.map((colourScheme, text) => Badge(_.colourScheme := colourScheme, _ => text)),
Badge(_ => width := "200px", _ => "This text is very long and it will be truncated with ellipsis")
)
//-- End
),
DemoPanel(
"Badge with icon",
DemoPanel("Badge with icon")(
//-- Begin: Badge with icon
div(
Badge(_.colourScheme := ColourScheme._1, _.slots.icon := Icon(_.name := IconName.add), _ => "Add"),
Badge(_.colourScheme := ColourScheme._2, _.slots.icon := Icon(_.name := IconName.customer))
)
//-- End
)
)

Expand Down
12 changes: 6 additions & 6 deletions demo/src/main/scala/demo/BarExample.scala
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ package demo
import be.doeraene.webcomponents.ui5.*
import be.doeraene.webcomponents.ui5.configkeys.*
import com.raquo.laminar.api.L.*
import demo.helpers.{DemoPanel, Example}
import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub}

object BarExample extends Example("Bar") {

Expand All @@ -23,16 +23,16 @@ object BarExample extends Example("Bar") {
_.slots.endContent := Button(_.design := ButtonDesign.Transparent, _ => "Cancel")
)

def component: HtmlElement = div(
def component(using
demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo
): HtmlElement = div(
List(BarDesign.Header, BarDesign.Subheader).map(design =>
DemoPanel(
s"${design.value} Bar",
DemoPanel(s"${design.value} Bar")(
Bar((headerBarContent(s"${design.value} Title") :+ (_.design := design)): _*)
)
),
List(BarDesign.Footer, BarDesign.FloatingFooter).map(design =>
DemoPanel(
s"${design.value} Bar",
DemoPanel(s"${design.value} Bar")(
Bar(footerBarContent: _*)
)
)
Expand Down
49 changes: 49 additions & 0 deletions demo/src/main/scala/demo/BarcodeScannerDialogExample.scala
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
package demo

import be.doeraene.webcomponents.ui5.*
import be.doeraene.webcomponents.ui5.configkeys.*
import com.raquo.laminar.api.L.*
import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub}

object BarcodeScannerDialogExample extends Example("BarcodeScannerDialog") {

def component(using demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo): HtmlElement = div(
DemoPanel("Usage") {
//-- Begin: Usage
// Feed this bus in order to open the barcode scanner
val openScannerBus: EventBus[Unit] = new EventBus

// Feed this bus to pass the information of a failed scan
val barcodeScanFailedBus: EventBus[BarcodeScannerDialog.events.ErrorInfo] = new EventBus
// Feed this bus to pass the information of a successful scan
val barcodeScanSuccessBus: EventBus[BarcodeScannerDialog.events.SuccessInfo] = new EventBus

val barcodeScanEvents = EventStream
.merge(
barcodeScanSuccessBus.events,
barcodeScanFailedBus.events
)
.mapTo(())

div(
BarcodeScannerDialog(
_.showOnEvents(openScannerBus.events),
_.closeOnEvents(barcodeScanEvents),
_.events.onScanSuccess.map(_.detail) --> barcodeScanSuccessBus.writer,
_.events.onScanError.map(_.detail) --> barcodeScanFailedBus.writer
),
Title.h3(_ => "Click on the button below and show a QR code to the camera:"),
Button(
_.icon := IconName.camera,
_.tooltip := "Start Camera",
_ => "Scan",
_.events.onClick.mapTo(()) --> openScannerBus.writer
),
div(Label(_ => child.text <-- barcodeScanSuccessBus.events.map(_.text))),
div(Label(_ => child.text <-- barcodeScanFailedBus.events.map(_.message)))
)
//-- End
}
)

}
21 changes: 13 additions & 8 deletions demo/src/main/scala/demo/BreadcrumbsExample.scala
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ package demo
import be.doeraene.webcomponents.ui5.*
import be.doeraene.webcomponents.ui5.configkeys.*
import com.raquo.laminar.api.L.*
import demo.helpers.{DemoPanel, Example}
import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub}

object BreadcrumbsExample extends Example("Breadcrumbs") {
def component: HtmlElement = div(
DemoPanel(
"Standard Breadcrumbs",
def component(using
demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo
): HtmlElement = div(
DemoPanel("Standard Breadcrumbs")(
//-- Begin: Standard Breadcrumbs
Breadcrumbs(
_.Item(
_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings",
Expand All @@ -19,9 +21,10 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
_.Item(_ => "Current page"),
_.events.onItemClick.map(_.detail.item) --> Observer(x => org.scalajs.dom.console.log(x))
)
//-- End
),
DemoPanel(
"Breadcrumbs with no current page",
DemoPanel("Breadcrumbs with no current page")(
//-- Begin: Breadcrumbs with no current page
Breadcrumbs(
_.design := BreadcrumbsDesign.NoCurrentPage,
_.Item(
Expand All @@ -31,9 +34,10 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
),
_.Item(_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", _ => "Parent page")
)
//-- End
),
DemoPanel(
"Breadcrumbs with specific separator",
DemoPanel("Breadcrumbs with specific separator")(
//-- Begin: Breadcrumbs with specific separator
div(
BreadcrumbsSeparatorStyle.allValues.map(separatorStyle =>
Breadcrumbs(
Expand All @@ -48,6 +52,7 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
)
)
)
//-- End
)
)
}
Loading

0 comments on commit 7ce0fe3

Please sign in to comment.