diff --git a/public/style.css b/public/style.css index 9a0cecf..50a5886 100644 --- a/public/style.css +++ b/public/style.css @@ -6,6 +6,11 @@ h1 { margin-left: 2rem; } +.command-label { + margin-top: 1.5rem; + margin-bottom: 0.5rem; +} + button { font-family: 'Nunito', sans-serif; font-size: 1rem; diff --git a/src/Command.elm b/src/Command.elm index e7dd160..4dcaa53 100644 --- a/src/Command.elm +++ b/src/Command.elm @@ -6,8 +6,11 @@ module Command exposing ( ) import Html.Styled as HS +import Html.Styled.Attributes as HSA +import Css import List import Maybe +import Svg.Styled as S import Space import Space.Content as Content @@ -20,6 +23,7 @@ import Command.Components exposing ( , toggle , choice , textButtonGroup + , commandLabel ) {-| Interactions with the command controls outside the drawing space -} @@ -54,6 +58,7 @@ viewBar {iterMode, baseContents} { incrementerDefaults | label = "# iteration frames" , min = Just 0} ChangeNumIterFrames (Content.numIterFrames baseContents) + ++ iterFrameKey iterMode.showIterFrames layerVisibilityControls : List (HS.Html Message) layerVisibilityControls @@ -119,3 +124,25 @@ getIterFrameIDtoDrop {baseContents} getNewIterFrameID : Space.Model -> ID.TreeID getNewIterFrameID {baseContents} = ID.Trunk <| "f" ++ String.fromInt (1 + Content.numIterFrames baseContents) + +iterFrameKey + : Bool + -> List (HS.Html msg) +iterFrameKey showIterFrames + = if showIterFrames + then + [ + commandLabel "iteration frame controls" + , S.svg + [ + HSA.css + [ + Css.marginLeft (Css.px 16) + , Css.marginRight (Css.px 16) + ] + ] + [ + IterFrame.showKey + ] + ] + else [] diff --git a/src/Command/Components.elm b/src/Command/Components.elm index 5ee9551..4b788d1 100644 --- a/src/Command/Components.elm +++ b/src/Command/Components.elm @@ -1,6 +1,7 @@ {- Visual components for controlling configuration -} module Command.Components exposing ( - incrementer + commandLabel + , incrementer , IncrementerSettings , incrementerDefaults , toggle @@ -15,6 +16,12 @@ import List import String import Css +{-| Common heading for command controls -} +commandLabel : String -> HS.Html msg +commandLabel text = + HS.h4 + [ HSA.class "command-label" ] + [ HS.text text ] incrementer : IncrementerSettings {- configuration -} @@ -23,7 +30,7 @@ incrementer -> List (HS.Html msg) incrementer settings sendIncrement current = [ - HS.h4 [] [HS.text settings.label] + commandLabel settings.label , HS.span [] [ HS.button ( @@ -99,7 +106,7 @@ toggle label sendToggle current = if current then "on" else "off" in [ - HS.h4 [] [HS.text label] + commandLabel label , HS.button [HSE.onClick sendToggle, pressed, style] [HS.text labelText] ] @@ -110,7 +117,7 @@ choice -> List (HS.Html msg) choice label choices = [ - HS.h4 [] [HS.text label] + commandLabel label , HS.select [] <| List.map (\(choiceText, msg) -> @@ -127,7 +134,7 @@ textButtonGroup textButtonGroup header buttons = [ HS.div [ HSA.css [Css.marginTop (Css.px 10)] ] - ( HS.h4 [] [ HS.text header ] + (commandLabel header :: List.map (\(label, msg) -> HS.button diff --git a/src/Space/IterFrame.elm b/src/Space/IterFrame.elm index 7bc877d..f8d4ec2 100644 --- a/src/Space/IterFrame.elm +++ b/src/Space/IterFrame.elm @@ -1,6 +1,7 @@ module Space.IterFrame exposing ( Def , show + , showKey , Mode , initMode , iterateShapes @@ -102,6 +103,23 @@ showSkewHandle frameDef ifDef atts (atts ++ [SA.fill "magenta"]) (G.Circle (cornerPoint frameDef ifDef G.BottomLeftCorner) 12) +{-| Show a simple IterFrame to serve as a key explaining the IterFrame controls. -} +showKey + : S.Svg msg +showKey + = S.g [] + [ + show + (Frame.Rectangle 36 36) + (\_ -> []) + {identityDef | offset = G.disp 62 50} + , S.text_ [SA.x "0", SA.y "10"] [S.text "move"] + , S.text_ [SA.x "84", SA.y "10"] [S.text "spin"] + , S.text_ [SA.x "0", SA.y "96"] [S.text "skew"] + , S.text_ [SA.x "84", SA.y "96"] [S.text "scale"] + ] + + getTransform : Def -> G.Transform getTransform d = G.makeAffineTransform d.xBasis d.yBasis d.offset