From 64c9670778a6b74c15f310e6a1136780620f04c7 Mon Sep 17 00:00:00 2001 From: Matthew Griffith Date: Tue, 2 Oct 2018 10:41:12 -0400 Subject: [PATCH] Move workspace to separate area --- .../FontAdjustment.elm | 88 +++---- experiments/workspace/Basic.elm | 233 +++++++++++++++++ experiments/workspace/Form.elm | 234 ++++++++++++++++++ experiments/workspace/Scrollbars.elm | 204 +++++++++++++++ experiments/workspace/Table.elm | 65 +++++ experiments/workspace/elm.json | 25 ++ 6 files changed, 805 insertions(+), 44 deletions(-) create mode 100644 experiments/workspace/Basic.elm create mode 100644 experiments/workspace/Form.elm create mode 100644 experiments/workspace/Scrollbars.elm create mode 100644 experiments/workspace/Table.elm create mode 100644 experiments/workspace/elm.json diff --git a/experiments/font-adjustment-updated/FontAdjustment.elm b/experiments/font-adjustment-updated/FontAdjustment.elm index 33ae8d8..365b40b 100644 --- a/experiments/font-adjustment-updated/FontAdjustment.elm +++ b/experiments/font-adjustment-updated/FontAdjustment.elm @@ -65,6 +65,7 @@ garamond = , font = { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond" , name = "EB Garamond" + , variants = [] , adjustment = { capital = default.capital , lowercase = default.lowercase @@ -92,6 +93,7 @@ catamaran = , font = { url = Just "https://fonts.googleapis.com/css?family=Catamaran" , name = "Catamaran" + , variants = [] , adjustment = { capital = default.capital , lowercase = default.lowercase @@ -119,6 +121,7 @@ poiret = , font = { url = Just "https://fonts.googleapis.com/css?family=Poiret+One" , name = "Poiret One" + , variants = [] , adjustment = { capital = default.capital , lowercase = default.lowercase @@ -152,6 +155,7 @@ roboto = , baseline = default.baseline , descender = default.descender } + , variants = [] } } @@ -283,7 +287,46 @@ adjusted size adjustment = , centerX , centerY ] - [ el [ Font.size 32 ] (text "Standard Defaults in CSS") + [ el + [ Font.size 32 ] + (text "New Adjustments in Els") + , row + [ Font.size 85 + , padding 80 + , spacing 48 + ] + [ el + [ Font.size 95 + , Font.full + , Background.color (rgb 0 0.8 0.9) + , above (el [ Font.size 24, moveUp 6 ] (text "full height")) + , onLeft <| + el + [ centerY + , width (px 40) + , height (px 95) + , Background.color (rgb 0.9 0.8 0) + ] + none + ] + (text "Typography") + , el + [ Font.sizeByCapital + , Font.size 85 + , Background.color (rgb 0 0.8 0.9) + , above (el [ Font.size 24, moveUp 6 ] (text "corrected capital")) + , onLeft <| + el + [ centerY + , width (px 40) + , height (px 85) + , Background.color (rgb 0.9 0.8 0) + ] + none + ] + (text "Typography") + ] + , el [ Font.size 32 ] (text "Standard Defaults in CSS") , row [ spacing 32 , Font.size 120 @@ -302,30 +345,6 @@ adjusted size adjustment = ] (text "Typography") ] - , el - [ Font.size 32 ] - (text "New Adjustments in Els") - , row - [ Font.size 120 - , padding 80 - ] - [ --corrected adjustment.full "corrected" - -- , corrected adjustment.capital "corrected capital" - el - [ Font.sizeByCapital - , Background.color (rgb 0 0.8 0.9) - , above (el [ Font.size 12, moveUp 6 ] (text "corrected capital")) - , onLeft <| - el - [ centerY - , width (px 40) - , height (px 120) - , Background.color (rgb 0.9 0.8 0) - ] - none - ] - (text "Typography") - ] , row [ spacing 120 ] [ paragraph [ Font.size 25 @@ -465,8 +484,6 @@ viewAdjustment label adjustment size left lineHeight updateWith = onLeft (el [ moveLeft left - - -- , moveUp (0.125 * toFloat size) , height (px (round (toFloat size * lineHeight))) ] <| @@ -522,23 +539,6 @@ viewAdjustment label adjustment size left lineHeight updateWith = , Border.width 1 , Border.color (Element.rgb 0.5 0.5 0.5) , Background.color (Element.rgb 1 1 1) - - -- , onRight - -- (el - -- [ height (px 0) - -- , width (px 1200) - -- , moveDown 8 - -- , Border.color (rgb 0 0 0) - -- , Border.dashed - -- , Border.widthEach - -- { top = 1 - -- , right = 0 - -- , bottom = 0 - -- , left = 0 - -- } - -- ] - -- none - -- ) ] , value = adjustment } diff --git a/experiments/workspace/Basic.elm b/experiments/workspace/Basic.elm new file mode 100644 index 0000000..d57d6d6 --- /dev/null +++ b/experiments/workspace/Basic.elm @@ -0,0 +1,233 @@ +module Main exposing (main) + +{-| -} + +import Element exposing (..) +import Element.Background as Background +import Element.Font as Font + + +box = + el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none + + +main = + Element.layout + [ Background.color (rgba 1 1 1 1) + , Font.color (rgba 1 1 1 1) + , Font.size 64 + , Font.family + [ Font.external + { url = "https://fonts.googleapis.com/css?family=EB+Garamond" + , name = "EB Garamond" + } + , Font.sansSerif + ] + ] + <| + column + [ spacing 40 + , Background.color (rgb 1 1 1) + , centerX + , inFront + (el + [ Background.color (rgb 1 0 0) + , width (px 20) + , height (px 20) + ] + (text "in front of everything") + ) + , behindContent + (el + [ Background.color (rgb 0.5 0.7 0) + , Font.color (rgb 1 1 1) + , moveDown 30 + ] + (text "hi there") + ) + ] + [ el + [ Background.color (rgba 0 0.9 0.8 1) + , Font.color (rgb 0 0 0) + , behindContent + (el + [ Background.color (rgb 0.9 0.9 0) + , Font.color (rgb 1 1 1) + ] + (text "hi there") + ) + , inFront + (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "in front of stuff, behind one")) + + -- , Font.sizeByCapital + -- , Font.variant Font.smallCaps + -- , Font.variant Font.ligatures + -- , Font.variant Font.diagonalFractions + ] + (text "Quality 1st Hello stylish friend! ofl 123456 1/3") + , row + [ Background.color (rgba 0 0.9 0.8 1) + , Font.color (rgb 0 0 0) + , spacing 87 + , behindContent + (el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there")) + , inFront + (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo")) + + -- , Font.sizeByCapital + -- , Font.variant Font.smallCaps + -- , Font.variant Font.ligatures + -- , Font.variant Font.diagonalFractions + ] + [ text "Quality 1st Hello stylish friend! ofl 123456 1/3" + ] + , el + [ Background.color (rgb 0.1 0.1 0.1) + , width (px 200) + , height (px 200) + + -- , below + -- (el + -- [ Background.color (rgb 1 0 0) + -- , width (px 20) + -- , height (px 20) + -- , moveDown 30 + -- ] + -- none + -- ) + , below + (el + [ Background.color (rgb 0.1 0.1 0.6) + , width (px 150) + , height (px 150) + + -- , alignBottom + ] + none + ) + ] + none + , el + [ Background.color (rgb 0.1 0.1 0.1) + , width (px 200) + , height (px 200) + , above + (el + [ Background.color (rgb 1 0 0) + , width (px 20) + , height (px 20) + + -- , moveUp 30 + ] + none + ) + , onRight + (el + [ Background.color (rgb 1 0 0) + , width (px 20) + , height fill + + -- , moveUp 30 + ] + none + ) + + -- , inFront + -- (el + -- [ Background.color (rgb 0.1 0.1 0.6) + -- , width (px 150) + -- , height (px 150) + -- ] + -- none + -- ) + -- , above + -- (el + -- [ Background.color (rgb 1 0 0) + -- , width (px 20) + -- , height (px 20) + -- , moveUp 30 + -- ] + -- none + -- ) + ] + none + , el + [ Background.color (rgb 0.1 0.1 0.1) + , width (px 200) + , height (px 200) + , below + (el + [ Background.color (rgb 1 0 0) + , width fill + , height (px 20) + ] + none + ) + , above + (el + [ Background.color (rgb 1 0 0) + , width fill + , height (px 20) + ] + none + ) + , onLeft + (el + [ Background.color (rgb 1 0 0) + , width (px 20) + , height fill + ] + none + ) + , onRight + (el + [ Background.color (rgb 1 0 0) + , width (px 20) + , height fill + ] + none + ) + ] + none + , el + [ Background.color (rgb 0.1 0.1 0.1) + , width (px 200) + , height (px 200) + , inFront + (el + [ Background.color (rgb 1 0 0) + , width fill + , height fill + ] + none + ) + ] + none + ] + + + +-- row +-- [ --width (px 420) +-- padding 0 +-- , spacing 20 +-- , Background.color (rgb 0.2 0.2 0.3) +-- ] +-- [ box +-- , box +-- , box +-- -- , box +-- -- , box +-- ] +-- wrappedRow +-- [ width (px 420) +-- , padding 10 +-- , spacing 20 +-- , Background.color (rgb 0.2 0.2 0.3) +-- ] +-- [ box +-- , box +-- , box +-- , box +-- , box +-- ] diff --git a/experiments/workspace/Form.elm b/experiments/workspace/Form.elm new file mode 100644 index 0000000..57b94a1 --- /dev/null +++ b/experiments/workspace/Form.elm @@ -0,0 +1,234 @@ +module Main exposing (Form, Lunch(..), Msg(..), blue, darkBlue, grey, init, main, red, update, view, white) + +{-| -} + +import Browser +import Element exposing (..) +import Element.Background as Background +import Element.Border as Border +import Element.Font as Font +import Element.Input as Input +import Element.Region as Region +import Html.Attributes + + +white = + Element.rgb 1 1 1 + + +grey = + Element.rgb 0.9 0.9 0.9 + + +blue = + Element.rgb 0 0 0.8 + + +red = + Element.rgb 0.8 0 0 + + +darkBlue = + Element.rgb 0 0 0.9 + + +main = + Browser.sandbox + { init = init + , view = view + , update = update + } + + +init = + { username = "" + , password = "" + , agreeTOS = False + , comment = "Extra hot sauce?\n\n\nYes pls" + , lunch = Gyro + , spiciness = 2 + } + + +type alias Form = + { username : String + , password : String + , agreeTOS : Bool + , comment : String + , lunch : Lunch + , spiciness : Float + } + + +type Msg + = Update Form + + +update msg model = + case Debug.log "msg" msg of + Update new -> + new + + +id i = + htmlAttribute (Html.Attributes.id i) + + +type Lunch + = Burrito + | Taco + | Gyro + + +view model = + Element.layout + [ Font.size 20 + ] + <| + Element.column + [ width (px 800) + , height shrink + , centerY + , centerX + , spacing 36 + , padding 10 + ] + [ el + [ Region.heading 1 + , alignLeft + , Font.size 36 + ] + (text "Welcome to the Stylish Elephants Lunch Emporium") + , Input.radio + [ spacing 12 + , alpha 0.5 + , id "radio-1" + ] + { selected = Just model.lunch + , onChange = \new -> Update { model | lunch = new } + , label = + -- Input.labelHidden "Just a label" + Input.labelAbove + [ Font.size 14 + , paddingXY 0 12 + ] + (text "What would you like for lunch?") + , options = + [ Input.option Gyro (text "Gyro") + , Input.option Burrito (text "Burrito") + , Input.option Taco (text "Taco") + ] + } + , Input.text + [ spacing 12 + , id "text-1" + ] + { text = model.username + , placeholder = + Just + (Input.placeholder + [ focused + [ moveUp 30 ] + ] + (text "Placeholder Label") + ) + , onChange = \new -> Update { model | username = new } + , label = + Input.labelHidden "Just a label" + + -- Input.labelBelow + -- [ Font.size 14 + -- , focused + -- [ moveUp 30 ] + -- ] + -- (text "Username") + } + , Input.currentPassword [ spacing 12, width shrink ] + { text = model.password + , placeholder = Nothing + , onChange = \new -> Update { model | password = new } + , label = Input.labelAbove [ Font.size 14 ] (text "Password") + , show = False + } + , Input.multiline + [ height + (shrink + |> maximum 400 + ) + , spacing 12 + , id "multiline-1" + ] + { text = model.comment + , placeholder = Just (Input.placeholder [] (text "Extra hot sauce?\n\n\nYes pls")) + , onChange = \new -> Update { model | comment = new } + , label = + -- Input.labelAbove [ Font.size 14 ] (text "Leave a comment!") + Input.labelHidden "Just a label" + , spellcheck = False + } + , Input.checkbox [ id "checkbox-1" ] + { checked = model.agreeTOS + , onChange = \new -> Update { model | agreeTOS = new } + , icon = Input.defaultCheckbox + , label = + -- Input.labelRight [] (text "Agree to Terms of Service") + Input.labelHidden "Just a label" + } + , Input.slider + [ Element.height (Element.px 30) + , Element.behindContent + (Element.el + [ Element.width Element.fill + , Element.height (Element.px 2) + , Element.centerY + , Background.color grey + , Border.rounded 2 + ] + Element.none + ) + ] + { onChange = \new -> Update { model | spiciness = new } + , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness)) + , min = 0 + , max = 3.2 + , step = Nothing + , value = model.spiciness + , thumb = + Input.defaultThumb + } + , --el [height (px 300), width (px 30)] <| + Input.slider + [ Element.width (Element.px 40) + , Element.height (Element.px 80) + , Element.behindContent + (Element.el + [ Element.height Element.fill + , Element.width (Element.px 2) + , Element.centerX + , Background.color grey + , Border.rounded 2 + ] + Element.none + ) + ] + { onChange = \new -> Update { model | spiciness = new } + , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness)) + , min = 0 + , max = 3.2 + , step = Nothing + , value = model.spiciness + , thumb = + Input.defaultThumb + } + , Input.button + [-- Background.color blue + -- , Font.color white + -- , Border.color darkBlue + -- , paddingXY 32 16 + -- , Border.rounded 3 + -- , width fill + ] + { onPress = Nothing + , label = Element.text "Place your lunch order!" + } + ] diff --git a/experiments/workspace/Scrollbars.elm b/experiments/workspace/Scrollbars.elm new file mode 100644 index 0000000..90116c5 --- /dev/null +++ b/experiments/workspace/Scrollbars.elm @@ -0,0 +1,204 @@ +module Main exposing (main) + +{-| -} + +import Element exposing (..) +import Element.Background as Background +import Element.Font as Font + + +box = + el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none + + +main = + Element.layout + [ Background.color (rgba 1 1 1 1) + , Font.color (rgba 1 1 1 1) + , Font.size 64 + + -- , Font.italic + , Font.family + [ Font.external + { url = "https://fonts.googleapis.com/css?family=EB+Garamond" + , name = "EB Garamond" + } + + -- Font.with + -- { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond" + -- , name = "EB Garamond" + -- , adjustment = + -- { capital = 1.09 + -- , lowercase = 0.81 + -- , baseline = 0.385 + -- , descender = 0.095 + -- } + -- , variants = + -- [ Font.swash 1 + -- , Font.smallCaps + -- -- , Font.diagonalFractions + -- -- , Font.ordinal + -- -- , Font.ligatures + -- ] + -- } + -- Font.with + -- { url = Just "https://fonts.googleapis.com/css?family=Raleway" + -- , name = "Raleway" + -- , adjustment = + -- { capital = 1.09 + -- , lowercase = 0.81 + -- , baseline = 0.385 + -- , descender = 0.095 + -- } + -- , variants = + -- [ Font.swash 2 + -- , Font.ordinal + -- , Font.ligatures + -- -- , Font.small + -- ] + -- } + , Font.sansSerif + ] + ] + <| + column + [ spacing 20 + , Background.color (rgb 1 1 1) + , inFront + (el + [ Background.color (rgb 1 0 0) + , width (px 20) + , height (px 20) + ] + none + ) + , behindContent + (el + [ Background.color (rgb 0.5 0.7 0) + , Font.color (rgb 1 1 1) + , moveDown 30 + ] + (text "hi there") + ) + ] + [ el + [ Background.color (rgba 0 0.9 0.8 1) + , Font.color (rgb 0 0 0) + , behindContent + (el + [ Background.color (rgb 0.9 0.9 0) + , Font.color (rgb 1 1 1) + ] + (text "hi there") + ) + , inFront + (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo")) + + -- , Font.sizeByCapital + -- , Font.variant Font.smallCaps + -- , Font.variant Font.ligatures + -- , Font.variant Font.diagonalFractions + ] + (text "Quality 1st Hello stylish friend! ofl 123456 1/3") + , el + [ Background.color (rgba 0 0.9 0.8 1) + , Font.color (rgb 0 0 0) + , behindContent + (el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there")) + , inFront + (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo")) + + -- , Font.sizeByCapital + -- , Font.variant Font.smallCaps + -- , Font.variant Font.ligatures + -- , Font.variant Font.diagonalFractions + ] + (text "Quality 1st Hello stylish friend! ofl 123456 1/3") + , el + [ Background.color (rgb 0.1 0.1 0.1) + , width (px 200) + , height (px 200) + + -- , below + -- (el + -- [ Background.color (rgb 1 0 0) + -- , width (px 20) + -- , height (px 20) + -- , moveDown 30 + -- ] + -- none + -- ) + , below + (el + [ Background.color (rgb 0.1 0.1 0.6) + , width (px 150) + , height (px 150) + + -- , alignBottom + ] + none + ) + ] + none + , el + [ Background.color (rgb 0.1 0.1 0.1) + , width (px 200) + , height (px 200) + , onRight + (el + [ Background.color (rgb 1 0 0) + , width (px 20) + , height fill + + -- , moveUp 30 + ] + none + ) + + -- , inFront + -- (el + -- [ Background.color (rgb 0.1 0.1 0.6) + -- , width (px 150) + -- , height (px 150) + -- ] + -- none + -- ) + -- , above + -- (el + -- [ Background.color (rgb 1 0 0) + -- , width (px 20) + -- , height (px 20) + -- , moveUp 30 + -- ] + -- none + -- ) + ] + none + ] + + + +-- row +-- [ --width (px 420) +-- padding 0 +-- , spacing 20 +-- , Background.color (rgb 0.2 0.2 0.3) +-- ] +-- [ box +-- , box +-- , box +-- -- , box +-- -- , box +-- ] +-- wrappedRow +-- [ width (px 420) +-- , padding 10 +-- , spacing 20 +-- , Background.color (rgb 0.2 0.2 0.3) +-- ] +-- [ box +-- , box +-- , box +-- , box +-- , box +-- ] diff --git a/experiments/workspace/Table.elm b/experiments/workspace/Table.elm new file mode 100644 index 0000000..4290536 --- /dev/null +++ b/experiments/workspace/Table.elm @@ -0,0 +1,65 @@ +module Main exposing (..) + +{-| -} + +import Element exposing (..) +import Element.Background as Background +import Element.Font as Font +import Element.Input +import Element.Lazy + + +type alias Person = + { firstName : String + , lastName : String + } + + +persons : List Person +persons = + [ { firstName = "David" + , lastName = "Bowie" + } + , { firstName = "Florence" + , lastName = "Welch" + } + ] + + +main = + Element.layout + [ Background.color (rgba 0 0 0 1) + , Font.color (rgba 1 1 1 1) + , Font.italic + , Font.size 32 + , Font.family + [ Font.external + { url = "https://fonts.googleapis.com/css?family=EB+Garamond" + , name = "EB Garamond" + } + , Font.sansSerif + ] + ] + <| + Element.table + [ Element.centerX + , Element.centerY + , Element.spacing 5 + , Element.padding 10 + ] + { data = persons + , columns = + [ { header = Element.text "First Name" + , width = px 200 + , view = + \person -> + Element.text person.firstName + } + , { header = Element.text "Last Name" + , width = fill + , view = + \person -> + Element.text person.lastName + } + ] + } diff --git a/experiments/workspace/elm.json b/experiments/workspace/elm.json new file mode 100644 index 0000000..b77f68d --- /dev/null +++ b/experiments/workspace/elm.json @@ -0,0 +1,25 @@ +{ + "type": "application", + "source-directories": [ + ".", + "../src/" + ], + "elm-version": "0.19.0", + "dependencies": { + "direct": { + "elm/browser": "1.0.0", + "elm/core": "1.0.0", + "elm/html": "1.0.0", + "elm/json": "1.0.0", + "elm/virtual-dom": "1.0.0" + }, + "indirect": { + "elm/time": "1.0.0", + "elm/url": "1.0.0" + } + }, + "test-dependencies": { + "direct": {}, + "indirect": {} + } +} \ No newline at end of file