From d437fa785e1cd9a533b6798dc9b78c6198995050 Mon Sep 17 00:00:00 2001 From: Nick Date: Wed, 20 Nov 2024 22:47:57 -0600 Subject: [PATCH] feat: added tooltips --- frontend/src/Config/Format.elm | 42 +++++++++++++++++++--- frontend/src/Debate/Helpers.elm | 64 +++++++++++++++++++++++---------- 2 files changed, 83 insertions(+), 23 deletions(-) diff --git a/frontend/src/Config/Format.elm b/frontend/src/Config/Format.elm index 9b2ef05..146eff5 100755 --- a/frontend/src/Config/Format.elm +++ b/frontend/src/Config/Format.elm @@ -1,16 +1,18 @@ module Config.Format exposing (..) import Config.Colour exposing (..) -import Element exposing (..) +import Element as E exposing (..) import Element.Background as B +import Element.Border as D exposing (..) import Element.Font as F +import Html exposing (col) import Html.Attributes as H exposing (style) topLevelContainer : Element msg -> Element msg topLevelContainer = el - [ width fill + [ E.width fill , height fill , B.color colourTheme.backgroundColour ] @@ -50,7 +52,7 @@ transitionNonHighlightedLinkHover = transitionNonHighlightedLinkHoverWithMove : Element msg -> Element msg transitionNonHighlightedLinkHoverWithMove content = el - [ width fill + [ E.width fill , height (px 30) ] (el @@ -152,7 +154,7 @@ paragraphBoldFormat = paragraphWidth : Attribute msg paragraphWidth = - width <| px 700 + E.width <| px 700 paragraphAlignLeft : List (Attr () msg) @@ -172,3 +174,35 @@ paragraphColumnFormat = [ spacing 20 , paragraphWidth ] + + +myTooltip : String -> Element msg +myTooltip str = + el + [ B.color colourTheme.backgroundColour + , F.color colourTheme.nonHighlightedText + , padding 15 + , D.rounded 5 + , D.width 2 + , F.center + , E.width <| px 300 + , D.color colourTheme.highlightText + , F.size 15 + , D.shadow + { offset = ( 0, 3 ), blur = 6, size = 0, color = rgba 0 0 0 0.32 } + ] + (text str) + +tooltip : (Element msg -> Attribute msg) -> Element Never -> Attribute msg +tooltip usher tooltip_ = + inFront <| + el + [ E.width fill + , height fill + , transparent True + , mouseOver [ transparent False ] + , (usher << map never) <| + el [ htmlAttribute (style "pointerEvents" "none") ] + tooltip_ + ] + none diff --git a/frontend/src/Debate/Helpers.elm b/frontend/src/Debate/Helpers.elm index cda6d78..4f448b9 100755 --- a/frontend/src/Debate/Helpers.elm +++ b/frontend/src/Debate/Helpers.elm @@ -4,10 +4,11 @@ import Config.Colour as T exposing (..) import Config.Format as O exposing (..) import Debate.Types exposing (..) import Effect exposing (Effect) -import Element exposing (..) +import Element as E exposing (..) +import Element.Background as B exposing (..) import Element.Border as D exposing (..) import Element.Events as V exposing (..) -import Element.Font as F +import Element.Font as F exposing (..) import Html import Html.Attributes as H exposing (style, title, wrap) import Layouts @@ -64,34 +65,59 @@ argumentMaker argument = maybeReductioField : Element msg maybeReductioField = case argument.propositionReductio of - "" -> + "" -> none - + reductio -> - paragraph (paragraphBoldFormat ++ [ F.size 18 ]) - [ text "Reductio: " |> el [ F.color colourTheme.highlightText ] - , text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ], text " Ⓘ" -- create a tooltip for this in the future + row [] + [ column + [ E.alignTop, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) + [ text "Reductio:" |> el [ F.color colourTheme.highlightText ] + ] + ] + , column [ E.width fill, E.alignLeft ] + [ paragraph [] + [ text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] + , el [ tooltip below (myTooltip "These are the propositions from which the reductio ad absurdum is derived") ] (text " Ⓘ") |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] + ] + ] ] in column - [ paragraphWidth, alignLeft, spacing 8, paddingEach { top = 0, right = 0, bottom = 60, left = 0 } ] + [ paragraphWidth, E.alignLeft, spacing 8, paddingEach { top = 0, right = 0, bottom = 60, left = 0 } ] [ paragraph (paragraphBoldFormat ++ [ F.size 20 ]) [ newTabLink [] { url = argument.proofLink , label = transitionNonHighlightedLinkHover <| text argument.argumentTitle - } --create expandable text for this in the future + } + + --create expandable text for this in the future ] - , paragraph (paragraphBoldFormat ++ [ F.size 18 ]) - [ text "Proposition: " |> el [ F.color colourTheme.highlightText ] - , text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] + , row [] + [ column + [ E.alignTop, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) + [ text "Proposition:" |> el [ F.color colourTheme.highlightText ] ] + ] + , column + [ E.width fill, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ] ] , maybeReductioField - , paragraph (paragraphBoldFormat ++ [ F.size 18 ]) - [ text "Summary: " |> el [ F.color colourTheme.highlightText ] - , text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] + , row [ E.alignTop ] + [ column + [ E.alignTop, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) + [ text "Summary:" |> el [ F.color colourTheme.highlightText ] + ] + ] + , column + [ E.width fill, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ] ] - , wrappedRow (paragraphBoldFormat ++ [ alignLeft ]) - [ Element.table + , wrappedRow (paragraphBoldFormat ++ [ E.alignLeft ]) + [ E.table [ spacing 0 , D.rounded 10 , D.width 1 @@ -117,7 +143,7 @@ argumentMaker argument = , D.widthEach { bottom = 1, top = 0, left = 1, right = 1 } , D.color colourTheme.nonHighlightedDarkText , padding 8 - , Element.height fill + , E.height fill ] [ row [ centerX ] [ paragraph [] [ text definition.definiendum ] @@ -141,7 +167,7 @@ argumentMaker argument = , D.widthEach { bottom = 1, top = 0, left = 0, right = 1 } , D.color colourTheme.nonHighlightedDarkText , padding 8 - , Element.height fill + , E.height fill ] [ row [] [ paragraph [] [ text definition.definiens ]