diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..04559f6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/elm-stuff +/index.html diff --git a/elm.json b/elm.json new file mode 100644 index 0000000..dea3450 --- /dev/null +++ b/elm.json @@ -0,0 +1,24 @@ +{ + "type": "application", + "source-directories": [ + "src" + ], + "elm-version": "0.19.1", + "dependencies": { + "direct": { + "elm/browser": "1.0.2", + "elm/core": "1.0.5", + "elm/html": "1.0.0" + }, + "indirect": { + "elm/json": "1.1.3", + "elm/time": "1.0.0", + "elm/url": "1.0.0", + "elm/virtual-dom": "1.0.2" + } + }, + "test-dependencies": { + "direct": {}, + "indirect": {} + } +} diff --git a/src/Attachment.elm b/src/Attachment.elm new file mode 100644 index 0000000..6c2a0e6 --- /dev/null +++ b/src/Attachment.elm @@ -0,0 +1,31 @@ +module Attachment exposing (Attachment, init, view) + +import Html exposing (Html) +import Html.Attributes as Attrs + + +type alias Attachment = + { top : Int } + + +init : Int -> Attachment +init = + Attachment << abs + + +view : Int -> Attachment -> Html msg +view left { top } = + Html.div + [ Attrs.style "width" "15px" + , Attrs.style "height" "15px" + , Attrs.style "border" "1px solid blue" + , Attrs.style "border-radius" "100%" + , Attrs.style "background-color" "white" + , Attrs.style "cursor" "pointer" + + -- position + , Attrs.style "position" "absolute" + , Attrs.style "left" (String.fromInt left ++ "px") + , Attrs.style "top" (String.fromInt top ++ "px") + ] + [] diff --git a/src/Comment.elm b/src/Comment.elm new file mode 100644 index 0000000..52de022 --- /dev/null +++ b/src/Comment.elm @@ -0,0 +1,25 @@ +module Comment exposing (Comment, init, view) + +import Html exposing (Html) +import Html.Attributes as Attrs + + +type alias Comment = + { height : Int } + + +init : Int -> Comment +init = + Comment << abs + + +view : Comment -> Html msg +view { height } = + Html.div + [ Attrs.style "width" "150px" + , Attrs.style "height" (String.fromInt height ++ "px") + , Attrs.style "border" "1px solid blue" + , Attrs.style "border-radius" "10px" + , Attrs.style "background-color" "white" + ] + [] diff --git a/src/Main.elm b/src/Main.elm new file mode 100644 index 0000000..fbe1d46 --- /dev/null +++ b/src/Main.elm @@ -0,0 +1,75 @@ +module Main exposing (..) + +import Attachment exposing (Attachment) +import Browser +import Comment exposing (Comment) +import Html exposing (Html) +import Html.Attributes as Attrs + + +type alias Model = + { attachments : List Attachment + , comments : List Comment + } + + +type Msg + = AddNewCommentAndAttachment + + +init : () -> ( Model, Cmd Msg ) +init _ = + ( { attachments = [] + , comments = [] + } + , Cmd.none + ) + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update _ _ = + Debug.todo "update" + + +view : Model -> Browser.Document Msg +view model = + { title = "Comment Constraint Experiment" + , body = + [ Html.node "style" [] [ Html.text "body { user-select: none; }" ] + , Html.main_ + [ Attrs.style "width" "100%" + , Attrs.style "height" "100vh" + , Attrs.style "background-color" "aliceblue" + ] + (let + horizMargin = + 50 + in + -- line + [ Html.div + [ Attrs.style "width" "1px" + , Attrs.style "height" "94vh" + , Attrs.style "position" "absolute" + , Attrs.style "left" (String.fromInt horizMargin ++ "px") + , Attrs.style "top" "3vh" + , Attrs.style "background-color" "blue" + ] + [] + ] + -- attachments + ++ List.map (Attachment.view horizMargin) model.attachments + -- comments + ++ List.map Comment.view model.comments + ) + ] + } + + +main : Program () Model Msg +main = + Browser.document + { init = init + , update = update + , view = view + , subscriptions = \_ -> Sub.none + }