Skip to content
This repository has been archived by the owner on May 23, 2019. It is now read-only.

Commit

Permalink
added edit icon with autofocus, some styles optimisations
Browse files Browse the repository at this point in the history
  • Loading branch information
@movefasta
movefasta committed Jun 20, 2018
1 parent 75611d7 commit cb03b4f
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 49 deletions.
4 changes: 2 additions & 2 deletions elm-package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@
"Microsoft/elm-json-tree-view": "1.0.1 <= v < 2.0.0",
"NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0",
"elm-community/json-extra": "2.1.0 <= v < 3.0.0",
"elm-community/material-icons": "1.1.0 <= v < 2.0.0",
"elm-community/string-extra": "1.4.0 <= v < 2.0.0",
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/dom": "1.1.1 <= v < 2.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"elm-lang/http": "1.0.0 <= v < 2.0.0",
"elm-lang/svg": "2.0.0 <= v < 3.0.0",
"evancz/elm-markdown": "3.0.2 <= v < 4.0.0",
"evancz/url-parser": "2.0.1 <= v < 3.0.0",
"krisajenkins/remotedata": "4.3.0 <= v < 5.0.0",
Expand All @@ -31,8 +33,6 @@
"sublime-build": {
"output": {
"components": {
"dir": "build",
"name": "elm",
"ext": "js"
},
"path": "build/elm.js"
Expand Down
3 changes: 1 addition & 2 deletions src/Msgs.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,5 @@ type Msg
| UpdateNode (WebData String)
| UpdatePreview (WebData String)
| UpdateDescription Data
| UpdateLink Link
| EditText Link
| UpdateLink Link EntryStatus
| NoOp
27 changes: 13 additions & 14 deletions src/Update.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,28 +51,27 @@ update msg model =
in
{ model | link = updateLink model.link } ! []

Msgs.UpdateLink link ->
Msgs.UpdateLink link status ->
let
updateLink x =
updateNodeLinksList x =
if x.name == link.name then
{ link | status = Completed }
{ link | status = status }
else
x

updateLinkStatus =
{ link | status = Completed }
{ link | status = status }

cmd =
case status of
Editing ->
Task.attempt (\_ -> Msgs.NoOp) <| Dom.focus ("link-" ++ link.name)
Completed ->
Cmd.none
in
{ model | node = List.map updateLink model.node, link = updateLinkStatus } ! []
{ model | node = List.map updateNodeLinksList model.node, link = updateLinkStatus }
! [ cmd ]

Msgs.EditText link ->
let
updateLinkStatus =
{ link | status = Editing }

focus =
Dom.focus ("link-" ++ link.name)
in
{ model | link = updateLinkStatus } ! [ Task.attempt (\_ -> Msgs.NoOp) focus ]
{-
Msgs.AddLink link ->
Expand Down
84 changes: 53 additions & 31 deletions src/View.elm
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module View exposing (..)

import Html exposing (Html)
import Html.Attributes as HtA exposing (width, height)
import Models exposing (..)
import Msgs exposing (Msg)
import RemoteData exposing (WebData)
Expand All @@ -15,22 +16,24 @@ import Style.Border as Border
import Style.Color as Color
import Style.Font as Font
import Commands exposing (objectEncoder)
import Material.Icons.Image as Icon exposing (edit)
import Svg exposing (svg)


view : Model -> Html Msg
view model =
E.layout stylesheet <|
E.column None [ padding 20, width (percent 100), spacing 10 ] <|
E.column None [ padding 20, spacing 10 ] <|
[ E.el None [] <| viewControls model
, E.el None [] <| viewPath model.path
, E.row Main [ spacing 20 ]
, E.row None [ spacing 20 ]
[ E.column None
[ spacing 5, minWidth (px 150) ]
[ spacing 5 ]
[ viewLinks model.node
]
, E.column None
[ spacing 5 ]
[ E.el None [] <| viewData model.data
, E.el None [] <| viewLinkProperties model.link
[ E.el None [] <| viewLinkProperties model.link
, E.el None [] <| maybeRemote viewRawDag model.raw_dag
]
]
Expand All @@ -42,7 +45,7 @@ viewRawDag raw_dag =

viewLinks : List Link -> Element Styles variation Msg
viewLinks links =
E.column Cell [ spacing 5 ] <|
E.column None [ spacing 5 ] <|
List.concat
[ (List.map (\link -> viewLink link) links) ]

Expand All @@ -55,21 +58,21 @@ viewLinkProperties link =
Input.text None
[ padding 5
, id ("link-" ++ link.name)
, onEnter <| Msgs.UpdateLink link
, Event.onBlur <| Msgs.UpdateLink link
, onEnter <| Msgs.UpdateLink link Completed
, Event.onBlur <| Msgs.UpdateLink link Completed
]
{ onChange = Msgs.UpdateDescription
, value = link.description
, label =
Input.placeholder { label = Input.hiddenLabel <| "", text = "Текст" }
, options = [ Input.textKey "Desc" ]
, options = []
}
Completed ->
E.el None [ padding 5 ] <| E.text link.description
E.el Cell [ padding 5 ] <| E.text link.description
in
E.column None
[ spacing 5 ]
[ E.el Cell [ Event.onClick <| Msgs.EditText link ] <| div
[ E.el Cell [ Event.onClick <| Msgs.UpdateLink link Editing ] <| div
, E.el None [ padding 5 ] <| E.text link.cid
]

Expand All @@ -78,20 +81,23 @@ viewLink : Link -> Element Styles variation Msg
viewLink link =
let
style =
case link.name of
"0" -> Red
"1" -> Green
_ -> CheckedCell
case link.status of
Editing -> CheckedCell
_ -> case link.name of
"0" -> Red
"1" -> Green
_ -> Cell
in
E.el style
[ padding 10
, width (px 150)
, maxHeight fill
, Event.onClick <| Msgs.PreviewGet link
, Event.onDoubleClick <| Msgs.DagGet link.name link.cid
E.row style [ spacing 5 ]
[ E.el None
[ padding 10
, minWidth (px 130)
, Event.onClick <| Msgs.PreviewGet link
, Event.onDoubleClick <| Msgs.DagGet link.name link.cid
]
<| E.paragraph None [] [ E.text link.description ]
, editIcon link
]
<| E.paragraph None [] [ E.text link.description ]


viewPath : List Node -> Element Styles variation Msg
viewPath path =
Expand Down Expand Up @@ -126,16 +132,26 @@ viewControls model =
[ padding 5
, Event.onClick <| Msgs.DagPut <| objectEncoder model.data model.node
]
<|
E.text "dag put"
<| E.text "dag put"
, E.button Cell
[ padding 5
, Event.onClick <| Msgs.DagGet "Home" model.hash
]
<|
E.text "dag get"
<| E.text "dag get"
]

editIcon : Link -> Element Styles variation Msg
editIcon link =
E.el EditIcon
[ padding 5
, Event.onClick <| Msgs.UpdateLink link Editing
]
<| E.html
<| Svg.svg
[ HtA.width 18
, HtA.height 18
]
[ Icon.edit Color.black 18 ]

-- STYLES

Expand Down Expand Up @@ -163,22 +179,27 @@ stylesheet =
]
, style Cell
[ cursor "pointer"
, hover [ Color.background <| Color.grayscale 0.1 ]
]
, style CheckedCell
[ Border.all 2.0
[ Border.right 2.0
, Border.solid
, Color.border Color.black
, Color.background Color.darkGrey
, Color.text Color.white
]
, style Green
[ Color.text Color.white
, Color.background Color.green
, Color.background Color.green
, hover
[ Color.background <| Color.black ]
]
, style Red
[ Color.text Color.white
, Color.background Color.red
, hover
[ Color.background <| Color.black ]
]
, style EditIcon
[ cursor "pointer" ]
]


Expand All @@ -190,6 +211,7 @@ type Styles
| Red
| Green
| CheckedCell
| EditIcon


findLinkByName : Name -> WebData Object -> Maybe Link
Expand Down

0 comments on commit cb03b4f

Please sign in to comment.