feat: added a bunch of tooltips

lunarcast · Jul 20, 2020 · e6dedfb · e6dedfb
1 parent 6a0d064
commit e6dedfb
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 93 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,6 +12,7 @@
     "hygen",
     "lunarbox",
     "micromodal",
+    "microtip",
     "monospace",
     "neumorphism",
     "oxanium",

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@thi.ng/transducers": "^7.0.0",
     "@thi.ng/vectors": "^4.4.3",
     "micromodal": "^0.4.6",
+    "microtip": "^0.2.2",
     "normalize.css": "^8.0.1",
     "seedrandom": "^3.0.5",
     "ts-adt": "^1.0.1",

diff --git a/public/styles/components/tooltip.scss b/public/styles/components/tooltip.scss
diff --git a/public/styles/index.scss b/public/styles/index.scss
@@ -2,9 +2,9 @@
 
 // Libraries
 @import "normalize.css";
+@import "microtip/microtip.css";
 
 // Components
-@import "./components/tooltip.scss";
 @import "./components/switch.scss";
 @import "./components/node-input.scss";
 @import "./components/with-logo.scss";

diff --git a/public/styles/pages/projects.scss b/public/styles/pages/projects.scss
@@ -24,7 +24,8 @@
   flex-direction: column;
 
   height: calc(100vh - 8rem);
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .projects__back {
@@ -110,11 +111,14 @@
 }
 
 .project__data-icon--clickable {
+  @include utils.base-input;
+
+  color: inherit;
   transition: transform $transition-time;
 }
 
-.project__data-icon--clickable:hover {
-  transform: scale(1.4);
+.project__data-icon--clickable:hover .material-icons {
+  transform: scale(1.2);
 }
 
 .project--new {

diff --git a/src/Component/Editor.purs b/src/Component/Editor.purs
@@ -47,6 +47,7 @@ import Lunarbox.Component.Editor.Tree as TreeC
 import Lunarbox.Component.Icon (icon)
 import Lunarbox.Component.Modal as Modal
 import Lunarbox.Component.Switch (switch)
+import Lunarbox.Component.Tooltip as Tooltip
 import Lunarbox.Component.Utils (className, maybeElement, whenElem)
 import Lunarbox.Config (Config, _autosaveInterval)
 import Lunarbox.Data.Class.GraphRep (toGraph)
@@ -532,8 +533,11 @@ component =
     Native.Goto id -> Just $ GotoId id
     _ -> Nothing
 
-  sidebarIcon extraClasses activeTab current =
-    HH.div
+  sidebarIcon text extraClasses activeTab current =
+    Tooltip.tooltip
+      text
+      Tooltip.Right
+      HH.div
       [ classes $ ClassName <$> [ "editor__activity" ] <> (guard isActive $> "editor__activity--active") <> extraClasses
       , onClick $ const $ Just $ ChangeTab current
       ]
@@ -557,7 +561,7 @@ component =
 
     classes _ = []
 
-    icon tab = sidebarIcon (classes tab) currentTab tab
+    icon tab = sidebarIcon (show tab) (classes tab) currentTab tab
 
   mkPanel :: _
   mkPanel { title, actions, content, footer, header } =

diff --git a/src/Component/Editor/Tree.purs b/src/Component/Editor/Tree.purs
@@ -16,7 +16,7 @@ import Halogen.HTML.Events (onBlur, onClick, onInput, onKeyUp)
 import Halogen.HTML.Properties (classes)
 import Halogen.HTML.Properties as HP
 import Lunarbox.Component.Icon (icon)
-import Lunarbox.Component.Tooltip (maybeTooltip)
+import Lunarbox.Component.Tooltip as Tooltip
 import Lunarbox.Component.Utils (StaticHtml, className)
 import Lunarbox.Config (Config, shouldCancelOnBlur)
 import Lunarbox.Data.Editor.FunctionName (FunctionName(..))
@@ -28,10 +28,9 @@ data ValidationError
   = Duplicate String
   | Empty
 
-validationErrorToHtml :: forall a b. ValidationError -> HTML a b
-validationErrorToHtml (Duplicate s) = HH.span_ [ HH.text "Function ", HH.strong_ [ HH.text s ], HH.text " already exists." ]
-
-validationErrorToHtml Empty = HH.text "Function names cannot be empty"
+instance showValidationError :: Show ValidationError where
+  show (Duplicate s) = "Function " <> s <> " already exists."
+  show Empty = "Function names cannot be empty"
 
 type State
   = { functions :: List FunctionName
@@ -185,27 +184,34 @@ component =
     -- this is the html for the list of existing functions
     existingFunctions = List.toUnfoldable $ (displayFunction selected) <$> functions
 
+    inputAttribs =
+      [ className "explorer__input"
+      , onKeyUp \event -> do
+          -- when the user presses enter we create the function
+          guard (KE.key event == "Enter")
+          pure CreateFunction
+      -- if the user clicks outside the input we can cancel the creation
+      , onBlur $ const $ Just CancelCreation
+      -- this is called on each keystroke to validate the input
+      , onInput $ const $ Just ValidateFunctionName
+      -- this will only work for the first function creation, but it's still good to haves
+      , HP.autofocus true
+      -- the ref is necessary to solve focus issues
+      , HP.ref inputRef
+      -- we don't want autocomplete for function names
+      , HP.autocomplete false
+      ]
+
     -- this is a list which may contain the input box for creating new functions
     newFunctionTextBox =
       guard creating
         $> HH.div [ className "explorer__input-container" ]
             [ icon "code"
-            , maybeTooltip (validationErrorToHtml <$> validationError)
-                $ HH.input
-                    [ className "explorer__input"
-                    , onKeyUp \event -> do
-                        -- when the user presses enter we create the function
-                        guard (KE.key event == "Enter")
-                        pure CreateFunction
-                    -- if the user clicks outside the input we can cancel the creation
-                    , onBlur $ const $ Just CancelCreation
-                    -- this is called on each keystroke to validate the input
-                    , onInput $ const $ Just ValidateFunctionName
-                    -- this will only work for the first function creation, but it's still good to haves
-                    , HP.autofocus true
-                    -- the ref is necessary to solve focus issues
-                    , HP.ref inputRef
-                    -- we don't want autocomplete for function names
-                    , HP.autocomplete false
-                    ]
+            , case validationError of
+                Nothing -> HH.input inputAttribs
+                Just err ->
+                  Tooltip.tooltip (show err)
+                    Tooltip.Bottom
+                    HH.input
+                    inputAttribs
             ]
diff --git a/src/Component/Projects.purs b/src/Component/Projects.purs
@@ -24,6 +24,7 @@ import Lunarbox.Capability.Resource.Tutorial (class ManageTutorials, createTutor
 import Lunarbox.Component.Icon (icon)
 import Lunarbox.Component.Loading (loading)
 import Lunarbox.Component.Tabs as Tabs
+import Lunarbox.Component.Tooltip as Tooltip
 import Lunarbox.Component.Utils (className, whenElem)
 import Lunarbox.Component.WithLogo (withLogo)
 import Lunarbox.Config (Config)
@@ -184,16 +185,24 @@ component =
     HH.div [ className "project", onClick $ const $ Just $ (if isExample then CloneProject else OpenProject) id ]
       [ HH.div [ className "project__name no-overflow" ] [ HH.text name ]
       , HH.div [ className "project__data" ]
-          [ HH.div [ className "project__data-item" ]
+          [ Tooltip.tooltip ("This project has " <> show functionCount <> " functions")
+              Tooltip.Bottom
+              HH.div
+              [ className "project__data-item" ]
               [ icon "functions"
               , HH.text $ show functionCount
               ]
-          , HH.div [ className "project__data-item" ]
+          , Tooltip.tooltip ("This project has " <> show nodeCount <> " nodes")
+              Tooltip.Bottom
+              HH.div
+              [ className "project__data-item" ]
               [ icon "track_changes"
               , HH.text $ show nodeCount
               ]
           , whenElem (not isExample) \_ ->
-              HH.div
+              Tooltip.tooltip "Delete this tutorial"
+                Tooltip.Bottom
+                HH.button
                 [ className "project__data-icon project__data-icon--clickable"
                 , onClick $ Just <<< DeleteProject id
                 ]
@@ -227,8 +236,10 @@ component =
       where
       projects = sortBySearch _.name search exampleProjects
 
-  newProject a =
-    HH.div
+  newProject text a =
+    Tooltip.tooltip text
+      Tooltip.Top
+      HH.div
       [ className "project project--new"
       , onClick $ const
           $ Just a
@@ -241,31 +252,38 @@ component =
       where
       projects = sortBySearch _.name search userProjects
 
-      createProject = newProject CreateProject
+      createProject = newProject "Create a new project" CreateProject
 
   tutorialsHtml { projectList, search } = withRemoteData projectList go
     where
     go { tutorials } =
       HH.div [ className "projects__list" ]
-        $ [ newProject CreateTutorial ]
+        $ [ newProject "Create a new tutorial" CreateTutorial ]
         <> (mkItem <$> tutorials)
       where
       mkItem { name, completed, id, own } =
         HH.div [ className "project", onClick $ const $ Just $ StartTutorial id ]
           [ HH.div [ className "project__name no-overflow" ] [ HH.text name ]
           , HH.div [ className "project__data" ]
               [ whenElem completed \_ ->
-                  HH.div
+                  Tooltip.tooltip
+                    "You completed this tutorial"
+                    Tooltip.Bottom
+                    HH.div
                     [ className "project__data-icon"
                     ]
                     [ icon "verified" ]
               , whenElem own \_ ->
-                  HH.div
+                  Tooltip.tooltip "Edit this tutorial"
+                    Tooltip.Bottom
+                    HH.button
                     [ className "project__data-icon project__data-icon--clickable"
                     , onClick $ Just <<< EditTutorial' id
                     ]
                     [ icon "edit" ]
-              , HH.div
+              , Tooltip.tooltip "Delete this tutorial"
+                  Tooltip.Bottom
+                  HH.button
                   [ className "project__data-icon project__data-icon--clickable"
                   , onClick $ Just <<< DeleteTutorial id
                   ]

diff --git a/src/Component/Tooltip.purs b/src/Component/Tooltip.purs
@@ -1,36 +1,40 @@
 module Lunarbox.Component.Tooltip where
 
 import Prelude
-import Control.MonadZero (guard)
-import Data.Array ((:))
-import Data.Maybe (Maybe, fromMaybe, isJust)
-import Halogen.HTML (ClassName(..), HTML)
-import Halogen.HTML as HH
-import Halogen.HTML.Properties (classes)
-import Lunarbox.Component.Utils (className)
+import Halogen.HTML (AttrName(..), IProp, attr)
+import Halogen.HTML.Properties.ARIA as HA
 
--- Tooltip visible when passing true as an argument
-tooltip :: forall a b. Boolean -> HTML a b -> HTML a b -> HTML a b
-tooltip active child content =
-  HH.div [ classes $ ClassName <$> "tooltip" : ("tooltip--active" <$ guard active) ]
-    [ child
-    , HH.div
-        [ className "tooltip__content"
-        ]
-        [ content ]
-    ]
+data TooltipPosition
+  = Top
+  | TopLeft
+  | TopRight
+  | Bottom
+  | BottomLeft
+  | BottomRight
+  | Left
+  | Right
 
--- Tooltip visible on hover
-hoverTooltip :: forall a b. HTML a b -> HTML a b -> HTML a b
-hoverTooltip child content =
-  HH.div [ className "tooltip tooltip--hoverable" ]
-    [ child
-    , HH.div
-        [ className "tooltip__content"
-        ]
-        [ content ]
-    ]
+instance showTooltipPosition :: Show TooltipPosition where
+  show Top = "top"
+  show TopLeft = "top-left"
+  show TopRight = "top-right"
+  show Bottom = "bottom"
+  show BottomLeft = "bottom-left"
+  show BottomRight = "bottom-right"
+  show Left = "left"
+  show Right = "right"
 
--- Toolip which might or might not have some content
-maybeTooltip :: forall a b. Maybe (HTML a b) -> HTML a b -> HTML a b
-maybeTooltip content child = tooltip (isJust content) child (fromMaybe (HH.text "") content)
+-- | Wrapper around microtip.css
+tooltip ::
+  forall r i h.
+  String ->
+  TooltipPosition ->
+  (Array (IProp r i) -> h) -> Array (IProp r i) -> h
+tooltip text position element extraAttribs = element attribs
+  where
+  attribs =
+    [ HA.role "tooltip"
+    , HA.label text
+    , attr (AttrName "data-microtip-position") $ show position
+    ]
+      <> extraAttribs
diff --git a/src/Data/Tab.purs b/src/Data/Tab.purs
@@ -5,6 +5,7 @@ import Data.Argonaut (class DecodeJson, class EncodeJson)
 import Data.Argonaut.Decode.Generic.Rep (genericDecodeJson)
 import Data.Argonaut.Encode.Generic.Rep (genericEncodeJson)
 import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Show (genericShow)
 
 data Tab
   = Settings
@@ -16,6 +17,9 @@ derive instance eqTab :: Eq Tab
 
 derive instance genericTab :: Generic Tab _
 
+instance showTab :: Show Tab where
+  show = genericShow
+
 instance encodeJsonTab :: EncodeJson Tab where
   encodeJson = genericEncodeJson
 

diff --git a/yarn.lock b/yarn.lock
@@ -6464,6 +6464,11 @@ micromodal@^0.4.6:
   resolved "https://registry.yarnpkg.com/micromodal/-/micromodal-0.4.6.tgz#0425ad026c47923208cf826de6b58ed0693cb25a"
   integrity sha512-2VDso2a22jWPpqwuWT/4RomVpoU3Bl9qF9D01xzwlNp5UVsImeA0gY4nSpF44vqcQtQOtkiMUV9EZkAJSRxBsg==
 
+microtip@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/microtip/-/microtip-0.2.2.tgz#9d9d43cbbf6815d6d16a514abc71c17c5b91d1e9"
+  integrity sha512-oah38eH5vSHVFP6yXjbKWOYt92mav++0j3zh844h1vhOscqEg7Rf4agDEIwUTFCcAPPdlhYUQMe6eZfHgD+4oQ==
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"