Emi
/
yes-no-maybe-kink-tool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a drag handle to tiles

This commit is contained in:
Emi Simpson 2023-07-04 21:50:32 -04:00
parent e78655c2c7
commit 89863ca743
Signed by: Emi
GPG Key ID: A12F2C2FFDC3D847
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/Main.elm
View File

@ -20,8 +20,8 @@ import List exposing (map, singleton)
import Maybe.Extra exposing (isJust)
import String exposing (fromInt, isEmpty)
import String.Extra exposing (isBlank)
import Svg exposing (Svg, svg)
import Svg.Attributes exposing (height, viewBox, width)
import Svg exposing (path, Svg, svg)
import Svg.Attributes exposing (d, fill, height, stroke, viewBox, width)
import Svg.Events exposing (on)
import Task
import Url exposing (Url)
@ -169,7 +169,8 @@ viewTile isTileHeld columnIndex tileIndex tile =
)
, attributeIf isTileHeld (onMouseEnter <| HeldOverNewTile columnIndex tileIndex)
]
[ input
[ viewGrip
, input
[ value tile.text
, onInput (SetTileText columnIndex tileIndex)
, onBlur (TileDeselected columnIndex)
@ -185,6 +186,24 @@ viewTile isTileHeld columnIndex tileIndex tile =
(map viewSticker tile.stickers)
]
viewGrip : Html any
viewGrip =
svg
[ viewBox "0 0 103.4 103.4"
, width "30"
, height "30"
, Svg.Attributes.class "drag-gripper"
]
[ path
[ d gripPath
, fill "currentColor"
, stroke "none"
]
[]
]
gripPath = "m17.697 3.3505e-8a17.698 17.698 0 0 0-17.697 17.697 17.698 17.698 0 0 0 17.697 17.699 17.698 17.698 0 0 0 17.699-17.699 17.698 17.698 0 0 0-17.699-17.697zm68 0a17.698 17.698 0 0 0-17.697 17.697 17.698 17.698 0 0 0 17.697 17.699 17.698 17.698 0 0 0 17.699-17.699 17.698 17.698 0 0 0-17.699-17.697zm-68 68a17.698 17.698 0 0 0-17.697 17.697 17.698 17.698 0 0 0 17.697 17.699 17.698 17.698 0 0 0 17.699-17.699 17.698 17.698 0 0 0-17.699-17.697zm68 0a17.698 17.698 0 0 0-17.697 17.697 17.698 17.698 0 0 0 17.697 17.699 17.698 17.698 0 0 0 17.699-17.699 17.698 17.698 0 0 0-17.699-17.697z"
viewAddTile : Int -> Html Msg
viewAddTile columnIndex =
button

8
style.sass
View File

@ -57,6 +57,14 @@ input
margin-bottom: 15px
border: none
svg.drag-gripper
color: var(--color-strong)
position: absolute
padding: 8px
top: 17px // Centered in 80px with 30px body and 8px padding
left: 15px
border-radius: 8px
&::after
width: 400px
height: 20px