Commits: 8
Create browser window element that wraps ui element in a mock browser window
new file mode 100644
index 0000000..7902e60
--- /dev/null
+++ b/src/BrowserWindow.elm
@@ -0,0 +1,54 @@
+module BrowserWindow exposing (main, window)
+
+import Element exposing (Element)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Html exposing (Html)
+
+
+main : Html msg
+main =
+ Element.text "Hello World!"
+ |> window
+ |> Element.layout []
+
+
+window : Element msg -> Element msg
+window content =
+ let
+ circle : Char
+ circle =
+ Char.fromCode 9679
+ in
+ Element.column
+ [ Element.width Element.shrink
+ , Element.height Element.shrink
+ , Border.width 1
+ , Border.rounded 6
+ , Border.color <| Element.rgb 0.4 0.4 0.4
+ , Border.shadow { offset = ( 0, 0 ), size = 2, blur = 0, color = Element.rgb 0.35 0.35 0.35 }
+ ]
+ [ Element.row
+ [ Element.height <| Element.px <| 23
+ , Background.color <| Element.rgb 0.27 0.27 0.27
+ , Element.width Element.fill
+ , Border.widthEach { bottom = 2, left = 0, top = 0, right = 0 }
+ , Border.color <| Element.rgb 0.2 0.2 0.2
+ ]
+ ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
+ |> List.map
+ (\( red, green, blue ) ->
+ circle
+ |> String.fromChar
+ |> Element.text
+ |> Element.el
+ [ Element.rgb red green blue |> Font.color
+ , Font.size 35
+ , Element.height <| Element.px 42
+ , Element.moveRight 6
+ ]
+ )
+ )
+ , content
+ ]index b4f72e0..0da1f44 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -1,6 +1,7 @@
=module Main exposing (main)
=
=import Browser
+import BrowserWindow
=import CartesianCoordinates
=import CenteredDot
=import Counter
@@ -217,12 +218,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
= |> Element.map CounterMsg
=
= simplestBlock : Mark.Custom.Block Model Styling Msg
@@ -236,12 +232,7 @@ options =
= [ Element.width Element.fill
= , Element.height Element.fill
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= fillTheScreenBlock : Mark.Custom.Block Model Styling Msg
= fillTheScreenBlock =
@@ -254,12 +245,7 @@ options =
= [ Element.width Element.fill
= , Element.height Element.fill
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= centeredDotBlock : Mark.Custom.Block Model Styling Msg
= centeredDotBlock =
@@ -271,12 +257,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= lineBlock : Mark.Custom.Block Model Styling Msg
= lineBlock =
@@ -288,12 +269,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= gradientBlock : Mark.Custom.Block Model Styling Msg
= gradientBlock =
@@ -305,12 +281,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= transformationsBlock : Mark.Custom.Block Model Styling Msg
= transformationsBlock =
@@ -400,12 +371,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= spiralBlock : Mark.Custom.Block Model Styling Msg
= spiralBlock =
@@ -417,12 +383,7 @@ options =
= |> Element.el
= [ Element.centerX
= ]
- |> Element.el
- [ Element.centerX
- , Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= treeBlock : Mark.Custom.Block Model Styling Msg
= treeBlock =
@@ -471,11 +432,7 @@ options =
= ]
= in
= content
- |> Element.el
- [ Border.color (Element.rgb 1 0.6 0.6)
- , Border.rounded 5
- , Border.width 2
- ]
+ |> BrowserWindow.window
=
= viewBoxBlock : Mark.Custom.Block Model Styling Msg
= viewBoxBlock =Refactor circle in browser window
index 7902e60..34177eb 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -17,9 +17,15 @@ main =
=window : Element msg -> Element msg
=window content =
= let
- circle : Char
- circle =
+ circle : Element.Color -> Element msg
+ circle color =
= Char.fromCode 9679
+ |> String.fromChar
+ |> Element.text
+ |> Element.el
+ [ color |> Font.color
+ , Font.size 35
+ ]
= in
= Element.column
= [ Element.width Element.shrink
@@ -39,14 +45,10 @@ window content =
= ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
= |> List.map
= (\( red, green, blue ) ->
- circle
- |> String.fromChar
- |> Element.text
+ circle (Element.rgb red green blue)
= |> Element.el
- [ Element.rgb red green blue |> Font.color
- , Font.size 35
- , Element.height <| Element.px 42
- , Element.moveRight 6
+ [ Element.moveRight 6
+ , Element.moveUp 3
= ]
= )
= )Minor improvements to BrowserWindow layout
index 34177eb..161f379 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -5,6 +5,7 @@ import Element.Background as Background
=import Element.Border as Border
=import Element.Font as Font
=import Html exposing (Html)
+import Html.Attributes
=
=
=main : Html msg
@@ -25,32 +26,49 @@ window content =
= |> Element.el
= [ color |> Font.color
= , Font.size 35
+ , Element.width (Element.px 20)
+ , Element.height (Element.px 35)
+ , Font.center
= ]
= in
= Element.column
= [ Element.width Element.shrink
= , Element.height Element.shrink
- , Border.width 1
+ , Border.width 2
= , Border.rounded 6
- , Border.color <| Element.rgb 0.4 0.4 0.4
- , Border.shadow { offset = ( 0, 0 ), size = 2, blur = 0, color = Element.rgb 0.35 0.35 0.35 }
+ , Border.color <| Element.rgb 0.27 0.27 0.27
+ , Background.color <| Element.rgb 0.27 0.27 0.27
= ]
= [ Element.row
= [ Element.height <| Element.px <| 23
- , Background.color <| Element.rgb 0.27 0.27 0.27
= , Element.width Element.fill
= , Border.widthEach { bottom = 2, left = 0, top = 0, right = 0 }
= , Border.color <| Element.rgb 0.2 0.2 0.2
+ , Border.roundEach
+ { topLeft = 5
+ , topRight = 5
+ , bottomLeft = 0
+ , bottomRight = 0
+ }
+ , Element.paddingXY 10 15
= ]
= ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
= |> List.map
= (\( red, green, blue ) ->
= circle (Element.rgb red green blue)
- |> Element.el
- [ Element.moveRight 6
- , Element.moveUp 3
- ]
= )
= )
- , content
+ , Element.el
+ [ Background.color <| Element.rgb 1 1 1
+ , Element.width Element.fill
+ , Element.height Element.fill
+ , Border.roundEach
+ { topLeft = 0
+ , topRight = 0
+ , bottomLeft = 5
+ , bottomRight = 5
+ }
+ , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
+ ]
+ content
= ]Make browser window content not stretch to fill window
index 161f379..257c30b 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -38,18 +38,13 @@ window content =
= , Border.rounded 6
= , Border.color <| Element.rgb 0.27 0.27 0.27
= , Background.color <| Element.rgb 0.27 0.27 0.27
+ , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
= ]
= [ Element.row
= [ Element.height <| Element.px <| 23
= , Element.width Element.fill
= , Border.widthEach { bottom = 2, left = 0, top = 0, right = 0 }
= , Border.color <| Element.rgb 0.2 0.2 0.2
- , Border.roundEach
- { topLeft = 5
- , topRight = 5
- , bottomLeft = 0
- , bottomRight = 0
- }
= , Element.paddingXY 10 15
= ]
= ([ ( 1, 0.4, 0.3 ), ( 1, 0.75, 0.18 ), ( 0.16, 0.79, 0.26 ) ]
@@ -59,16 +54,14 @@ window content =
= )
= )
= , Element.el
- [ Background.color <| Element.rgb 1 1 1
+ [ Element.width Element.fill
= , Element.width Element.fill
- , Element.height Element.fill
- , Border.roundEach
- { topLeft = 0
- , topRight = 0
- , bottomLeft = 5
- , bottomRight = 5
- }
- , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
+ , Background.color <| Element.rgb 1 1 1
= ]
- content
+ (Element.el
+ [ Element.width Element.shrink
+ , Element.height Element.shrink
+ ]
+ content
+ )
= ]index 0da1f44..1edee6f 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -118,9 +118,7 @@ view model =
= |> Element.text
= in
= Element.layout
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
+ []
= content
=
=
@@ -228,10 +226,6 @@ options =
= simplestView : Styling -> Model -> Element Msg
= simplestView style model =
= Simplest.ui
- |> Element.el
- [ Element.width Element.fill
- , Element.height Element.fill
- ]
= |> BrowserWindow.window
=
= fillTheScreenBlock : Mark.Custom.Block Model Styling MsgMake only simplest example not fill screen
index 257c30b..d3b8508 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -58,10 +58,5 @@ window content =
= , Element.width Element.fill
= , Background.color <| Element.rgb 1 1 1
= ]
- (Element.el
- [ Element.width Element.shrink
- , Element.height Element.shrink
- ]
- content
- )
+ content
= ]index 1edee6f..0591a0c 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -226,6 +226,7 @@ options =
= simplestView : Styling -> Model -> Element Msg
= simplestView style model =
= Simplest.ui
+ |> Element.el []
= |> BrowserWindow.window
=
= fillTheScreenBlock : Mark.Custom.Block Model Styling MsgMake simplest example display a circle instead of a line
index ae4d919..27930cc 100644
--- a/src/Simplest.elm
+++ b/src/Simplest.elm
@@ -6,14 +6,12 @@ import Svg.Attributes
=
=
=main =
- Svg.svg [ Svg.Attributes.style "background: pink" ]
- [ Svg.line
- [ Svg.Attributes.x1 "0"
- , Svg.Attributes.x2 "20"
- , Svg.Attributes.y1 "0"
- , Svg.Attributes.y2 "0"
- , Svg.Attributes.stroke "black"
- , Svg.Attributes.strokeWidth <| String.fromInt <| 5
+ Svg.svg
+ [ Svg.Attributes.style "background: pink; height: 100%; width: 100%" ]
+ [ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "30"
+ , Svg.Attributes.cy "30"
= ]
= []
= ]Use Element.clip instead of overflow CSS property in BorwserWindow
index d3b8508..2714ed3 100644
--- a/src/BrowserWindow.elm
+++ b/src/BrowserWindow.elm
@@ -5,7 +5,6 @@ import Element.Background as Background
=import Element.Border as Border
=import Element.Font as Font
=import Html exposing (Html)
-import Html.Attributes
=
=
=main : Html msg
@@ -38,7 +37,7 @@ window content =
= , Border.rounded 6
= , Border.color <| Element.rgb 0.27 0.27 0.27
= , Background.color <| Element.rgb 0.27 0.27 0.27
- , Element.htmlAttribute (Html.Attributes.style "overflow" "hidden")
+ , Element.clip
= ]
= [ Element.row
= [ Element.height <| Element.px <| 23Use BrowserWindow decoration inside ViewBox example
index fadec31..5de8663 100644
--- a/src/ViewBox.elm
+++ b/src/ViewBox.elm
@@ -9,6 +9,7 @@ module ViewBox exposing
= )
=
=import Browser
+import BrowserWindow
=import CartesianPlane exposing (graph)
=import Element
=import Element.Background as Background
@@ -114,32 +115,32 @@ ui model =
= []
= ]
= )
- , Element.el
- [ Element.height <| Element.maximum 170 Element.fill
- , Element.width <| Element.maximum 170 Element.fill
+ , svg
+ [ [ model.left, model.top, model.width, model.height ]
+ |> List.map String.fromFloat
+ |> String.join " "
+ |> viewBox
+ , preserveAspectRatio "none"
+ , Svg.Attributes.style "width: 100%; height: 100%"
= ]
- (Element.html <|
- svg
- [ [ model.left, model.top, model.width, model.height ]
- |> List.map String.fromFloat
- |> String.join " "
- |> viewBox
- , preserveAspectRatio "none"
- , Svg.Attributes.style "width: 100%; height: 100%"
- ]
- [ g [] world
- , rect
- [ x (String.fromFloat model.left)
- , y (String.fromFloat model.top)
- , width (String.fromFloat model.width)
- , height (String.fromFloat model.height)
- , opacity "0.3"
- , stroke "white"
- , fill "pink"
- ]
- []
- ]
- )
+ [ g [] world
+ , rect
+ [ x (String.fromFloat model.left)
+ , y (String.fromFloat model.top)
+ , width (String.fromFloat model.width)
+ , height (String.fromFloat model.height)
+ , opacity "0.3"
+ , stroke "white"
+ , fill "pink"
+ ]
+ []
+ ]
+ |> Element.html
+ |> BrowserWindow.window
+ |> Element.el
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
= ]
= , Input.slider
= [ Element.behindContent