Skip to content

WIP: adding clipboard copy for npub and validation status redesign #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
rodant wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

WIP: adding clipboard copy for npub and validation status redesign #16

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 52 additions & 10 deletions frontend/src/Ui/Profile.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ import FeatherIcons
import Graphics
import Html.Styled as Html exposing (Html, a, div, h2, img, p, text)
import Html.Styled.Attributes as Attr exposing (css)
import Html.Styled.Events as Events
import I18Next
import Json.Decode as Decode
import Json.Encode as Encode
import Nostr.Nip05 as Nip05
import Nostr.Nip19 as Nip19
import Nostr.Profile exposing (Profile, ProfileValidation(..), profileDisplayName, shortenedPubKey)
Expand Down Expand Up @@ -135,9 +139,9 @@ viewProfile profile profileViewData shared =
(styles.colorStyleGrayscaleText ++ styles.textStyleBody)
[ text (profile.about |> Maybe.withDefault "") ]
, viewWebsite styles profile
, viewNip05 styles profile
, viewNip05 styles profile profileViewData.validation
, viewLNAddress styles profile zapRelays
, viewNpub styles profile
, viewNpub styles profile shared.browserEnv.translations
]
, div
[ css
Expand Down Expand Up @@ -222,13 +226,21 @@ websiteLink url =
url


viewNip05 : Styles msg -> Profile -> Html msg
viewNip05 styles profile =
viewNip05 : Styles msg -> Profile -> ProfileValidation -> Html msg
viewNip05 styles profile validation =
case profile.nip05 of
Just nip05 ->
p
(styles.colorStyleGrayscaleText ++ styles.textStyleBody)
[ text <| Nip05.nip05ToDisplayString nip05 ]
(styles.colorStyleGrayscaleText ++ styles.textStyleBody ++ [ css [ Tw.flex, Tw.items_center ] ])
[ text <| Nip05.nip05ToDisplayString nip05
, div
[ css
[ Tw.mx_0_dot_5
, Tw.my_0_dot_5
]
]
[ validationIcon 20 validation ]
]

Nothing ->
div [] []
Expand All @@ -246,8 +258,8 @@ viewLNAddress styles profile zapRelays =
|> Maybe.withDefault (div [] [])


viewNpub : Styles msg -> Profile -> Html msg
viewNpub styles profile =
viewNpub : Styles msg -> Profile -> I18Next.Translations -> Html msg
viewNpub styles profile translations =
let
maybeNip19 =
Nip19.Npub profile.pubKey
Expand All @@ -257,13 +269,43 @@ viewNpub styles profile =
case maybeNip19 of
Just nip19 ->
p
(styles.colorStyleGrayscaleText ++ styles.textStyleBody)
[ text <| shortenedPubKey 11 nip19 ]
(styles.colorStyleGrayscaleText
++ styles.textStyleBody
++ [ css [ Tw.flex ] ]
)
[ text <| shortenedPubKey 11 nip19
, copyButton translations nip19 (shortenedPubKey 11 nip19)
]

Nothing ->
div [] []


copyButton : I18Next.Translations -> String -> String -> Html msg
copyButton translations copyText uniqueId =
div
[ css [ Tw.m_0_dot_5 ] ]
[ div
[ css [ Tw.cursor_pointer ]
, Attr.id uniqueId
]
[ Icon.FeatherIcon
(FeatherIcons.clipboard
|> FeatherIcons.withSize 20
)
|> Icon.view
]
, Html.node "js-clipboard-component"
[ Attr.property "buttonId" (Encode.string uniqueId)
, Attr.property "copyContent" (Encode.string copyText)

-- TODO: make a stateful profile component and use AlertTimerMessage to give users a visual feedback
--, Events.on "copiedToClipboard" (Decode.succeed (Translations.npubCopied [ translations ]))
]
[]
]


viewBanner : Maybe String -> Html msg
viewBanner maybeImage =
case maybeImage of
Expand Down