Merge pull request #302 from unisonweb/show-hashvatar-perspective

Show Hashvatar in the sidebar perspective

Author: hojberg

src/Hashvatar.elm

@@ -9,6 +9,11 @@ import String.Extra exposing (break)
 import UI.Color as Color exposing (Color)
 
 
+empty : Html msg
+empty =
+    view_ HexGrid.empty
+
+
 view : Hash -> Html msg
 view hash =
     let
@@ -35,9 +40,12 @@ view hash =
                 |> toGrid
                 |> Maybe.withDefault HexGrid.empty
     in
-    div [ class "hashvatar" ]
-        [ HexGrid.view grid
-        ]
+    view_ grid
+
+
+view_ : HexGrid.HexGrid -> Html msg
+view_ grid =
+    div [ class "hashvatar" ] [ HexGrid.view grid ]
 
 
 

src/UI.elm

@@ -71,8 +71,3 @@ divider =
 charWidth : Int -> String
 charWidth numChars =
     String.fromInt numChars ++ "ch"
-
-
-namespaceSlug : Html msg
-namespaceSlug =
-    div [ class "namespace-slug" ] []

src/UnisonLocal/App.elm

@@ -9,6 +9,7 @@ import Env exposing (Env, OperatingSystem(..))
 import Finder
 import Finder.SearchOptions as SearchOptions
 import FullyQualifiedName as FQN exposing (FQN)
+import Hashvatar
 import Html exposing (Html, a, div, h1, h2, h3, nav, p, section, span, strong, text)
 import Html.Attributes exposing (class, classList, href, id, rel, target, title)
 import Html.Events exposing (onClick)
@@ -493,19 +494,24 @@ viewSidebarHeader env =
         Codebase _ ->
             UI.nothing
 
-        Namespace { fqn } ->
+        Namespace { fqn, details } ->
             let
                 -- Imprecise, but close enough, approximation of overflowing,
                 -- which results in a slight faded left edge A better way would
                 -- be to measure the DOM like we do for overflowing docs, but
                 -- thats quite involved...
                 isOverflowing =
                     fqn |> FQN.toString |> String.length |> (\l -> l > 20)
+
+                hashvatar =
+                    details
+                        |> RemoteData.map (Namespace.hash >> Hashvatar.view)
+                        |> RemoteData.withDefault Hashvatar.empty
             in
             Sidebar.header
                 [ Sidebar.headerItem
                     [ classList [ ( "is-overflowing", isOverflowing ) ] ]
-                    [ UI.namespaceSlug
+                    [ hashvatar
                     , h2 [ class "namespace" ] [ FQN.view fqn ]
                     ]
                 , UI.divider

src/UnisonShare/App.elm

@@ -7,6 +7,7 @@ import CodebaseTree
 import Definition.Reference exposing (Reference)
 import Env exposing (Env)
 import FullyQualifiedName as FQN exposing (FQN)
+import Hashvatar
 import Html exposing (Html, a, div, h1, h2, nav, p, span, text)
 import Html.Attributes exposing (class, classList, id, title)
 import Html.Events exposing (onClick)
@@ -512,7 +513,7 @@ viewSidebarHeader env =
         Codebase _ ->
             UI.nothing
 
-        Namespace { fqn } ->
+        Namespace { fqn, details } ->
             let
                 -- Imprecise, but close enough, approximation of overflowing,
                 -- which results in a slight faded left edge A better way would
@@ -527,11 +528,16 @@ viewSidebarHeader env =
                         |> Button.view
                         |> List.singleton
                         |> Sidebar.headerItem []
+
+                hashvatar =
+                    details
+                        |> RemoteData.map (Namespace.hash >> Hashvatar.view)
+                        |> RemoteData.withDefault Hashvatar.empty
             in
             Sidebar.header
                 [ Sidebar.headerItem
                     [ classList [ ( "is-overflowing", isOverflowing ) ] ]
-                    [ UI.namespaceSlug
+                    [ hashvatar
                     , h2 [ class "namespace" ] [ FQN.view fqn ]
                     ]
                 , download

src/css/elements.css

@@ -171,15 +171,6 @@ p {
   align-items: center;
 }
 
-/* Namespace Slug */
-.namespace-slug {
-  display: inline-flex;
-  flex: 0 0 1.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  background: url(../img/namespace-slug-untitled.svg);
-}
-
 @import "./elements/icon.css";
 @import "./elements/banner.css";
 @import "./elements/button.css";

src/css/ui/page-layout.css

@@ -240,11 +240,11 @@
   );
 }
 
-#main-sidebar .sidebar-header .namespace-slug {
+#main-sidebar .sidebar-header .hasvatar {
   position: relative;
 }
 
-#main-sidebar .sidebar-header .is-overflowing .namespace-slug:after {
+#main-sidebar .sidebar-header .is-overflowing .hashvatar:after {
   position: absolute;
   top: 0;
   right: -1.5rem;