WIP: new UX

* semantic UI + less based UI styling * header, tabs, user-profile component * store avatar URL in DB, show image in user * unify :user and :user-profile in app-db for simplicity
2017-02-12 22:25:32 +02:00 · 2017-02-12 22:25:32 +02:00 · 6e646280c2
parent 6fc8702a34
commit 6e646280c2
20 changed files with 324 additions and 110 deletions
--- a/resources/migrations/20170212181519-store-avatar-url.down.sql
+++ b/resources/migrations/20170212181519-store-avatar-url.down.sql
--- a/resources/migrations/20170212181519-store-avatar-url.up.sql
+++ b/resources/migrations/20170212181519-store-avatar-url.up.sql
@ -0,0 +1,2 @@
+ALTER TABLE public.users
+  ADD avatar_url VARCHAR(255);
--- a/resources/public/img/icon_dropdown.svg
+++ b/resources/public/img/icon_dropdown.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>C09316C0-28C3-4D2D-AF57-806E1D6C1FE6</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="commiteth-desktop_repositories" transform="translate(-1098.000000, -32.000000)" fill="#FFFFFF">
+            <g id="header">
+                <g id="user" transform="translate(956.000000, 24.000000)">
+                    <g id="icon_dropdown" transform="translate(142.000000, 8.000000)">
+                        <path d="M7.76596419,11.5564843 C8.07705085,11.6115965 8.40862642,11.5177766 8.64937808,11.277025 L13.3038251,6.62257794 C13.6942764,6.23212667 13.695553,5.59768507 13.3050287,5.20716078 C12.9117818,4.81391382 12.2808006,4.81717535 11.8896116,5.20836438 L7.76949482,9.32848112 L3.64937808,5.20836438 C3.25892681,4.81791311 2.62448521,4.81663648 2.23396092,5.20716078 C1.84071396,5.60040773 1.84397549,6.23138892 2.23516452,6.62257794 L6.88961157,11.277025 C7.12783981,11.5152532 7.45689724,11.6086052 7.76596419,11.5564843 L7.76596419,11.5564843 Z" id="shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/resources/sql/queries.sql
+++ b/resources/sql/queries.sql
@ -3,19 +3,20 @@
 -- :name create-user! :<! :1
 -- :doc creates a new user record
 INSERT INTO users
-(id, login, name, email, token, address, created)
+(id, login, name, email, avatar_url, token, address, created)
 SELECT
  :id,
  :login,
  :name,
  :email,
+  :avatar_url,
  :token,
  :address,
  :created
 WHERE NOT exists(SELECT 1
                 FROM users
                 WHERE id = :id)
-RETURNING id, login, name, email, token, address, created;
+RETURNING id, login, name, email, avatar_url, token, address, created;

 -- :name update-user! :! :n
 -- :doc updates an existing user record
--- a/resources/templates/home.html
+++ b/resources/templates/home.html
@ -19,15 +19,11 @@
 <body>

 <div id="app">
-    <div class="container-fluid">
-    </div>
 </div>

 <!-- scripts and styles -->
-{% style "//cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" %}
-{% style "//cdn.jsdelivr.net/bootstrap-social/5.1.1/bootstrap-social.css" %}
-{% style "//cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" %}
-{% style "/css/main.css" %}
+{% style "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" %}
+{% style "/css/style.css" %}

 <script type="text/javascript">
    var context = "{{servlet-context}}";
--- a/src/clj/commiteth/db/users.clj
+++ b/src/clj/commiteth/db/users.clj
@ -4,7 +4,7 @@
  (:import [java.util Date]))

 (defn create-user
-  [user-id login name email token]
+  [user-id login name email avatar-url token]
  (jdbc/with-db-connection [con-db *db*]
    (db/create-user! con-db
      {:id      user-id
@ -12,6 +12,7 @@
       :name    name
       :email   email
       :token   token
+       :avatar_url avatar-url
       :address nil
       :created (new Date)})))

--- a/src/clj/commiteth/github/core.clj
+++ b/src/clj/commiteth/github/core.clj
@ -93,6 +93,7 @@
 (defn add-webhook
  [full-repo token]
  (log/debug "adding webhook" full-repo token)
+  ; TODO: use secret key in config param
  (let [[user repo] (str/split full-repo #"/")]
    (repos/create-hook user repo "web"
                       {:url          (str (server-address) "/webhook")
--- a/src/clj/commiteth/middleware.clj
+++ b/src/clj/commiteth/middleware.clj
@ -3,7 +3,6 @@
            [clojure.tools.logging :as log]
            [commiteth.layout :refer [*app-context* error-page]]
            [ring.middleware.anti-forgery :refer [wrap-anti-forgery]]
-            [ring.middleware.webjars :refer [wrap-webjars]]
            [ring.middleware.format :refer [wrap-restful-format]]
            [commiteth.config :refer [env]]
            [ring.middleware.flash :refer [wrap-flash]]
@ -83,7 +82,6 @@
 (defn wrap-base [handler]
  (-> ((:middleware defaults) handler)
    wrap-auth
-    wrap-webjars
    wrap-flash
    (wrap-session {:timeout      (* 60 60 6)
                   :cookie-attrs {:http-only true}})
--- a/src/clj/commiteth/routes/home.clj
+++ b/src/clj/commiteth/routes/home.clj
@ -10,9 +10,9 @@

 (defroutes home-routes
  (GET "/" {{identity :identity} :session}
-    (home-page identity))
+       (home-page identity))
  (GET "/logout" {session :session}
-    (-> (redirect "/")
-        (assoc :session (dissoc session :identity))))
+       (-> (redirect "/")
+           (assoc :session (dissoc session :identity))))
  (GET "/docs" [] (-> (ok (-> "docs/docs.md" io/resource slurp))
-                    (header "Content-Type" "text/plain; charset=utf-8"))))
+                      (header "Content-Type" "text/plain; charset=utf-8"))))
--- a/src/clj/commiteth/routes/redirect.clj
+++ b/src/clj/commiteth/routes/redirect.clj
@ -16,9 +16,10 @@
 (defn- create-user [token user]
  (let [{name    :name
         login   :login
-         user-id :id} user
+         user-id :id
+         avatar-url :avatar_url} user
        email (github/get-user-email token)]
-    (users/create-user user-id login name email token)))
+    (users/create-user user-id login name email avatar-url token)))

 (defn- get-or-create-user
  [token]
--- a/src/clj/commiteth/routes/services.clj
+++ b/src/clj/commiteth/routes/services.clj
@ -59,7 +59,8 @@
                         :current-user user
                         (ok {:repositories (->> (github/list-repos (:token user))
                                                 (map #(select-keys %
-                                                                    [:id :html_url :name :full_name :description])))}))
+                                                                    [:id :html_url
+                                                                     :name :full_name :description])))}))
                    (GET "/enabled-repositories" []
                         :auth-rules authenticated?
                         :current-user user
--- a/src/cljs/commiteth/activity.cljs
+++ b/src/cljs/commiteth/activity.cljs
@ -0,0 +1,6 @@
+(ns commiteth.activity
+  (:require [re-frame.core :as rf]))
+
+(defn activity-page []
+  (fn []
+    [:div "This will be the activity view"]))
--- a/src/cljs/commiteth/core.cljs
+++ b/src/cljs/commiteth/core.cljs
@ -9,27 +9,16 @@
            [commiteth.ajax :refer [load-interceptors!]]
            [commiteth.handlers]
            [commiteth.subscriptions]
+            [commiteth.activity :refer [activity-page]]
            [commiteth.manage :refer [manage-page]]
            [commiteth.issues :refer [issues-page]]
            [commiteth.common :refer [input checkbox]]
-            [commiteth.subscriptions :refer [user-address-path]]
            [commiteth.config :as config]
            [commiteth.svg :as svg]
            [clojure.set :refer [rename-keys]]
            [re-frisk.core :refer [enable-re-frisk!]])
  (:import goog.History))

-(defn login-link []
-  (let [user (rf/subscribe [:user])]
-    (fn []
-      (if-let [login (:login @user)]
-        [:div.tabnav-actions
-         [:span.profile-link "Signed in as "
-          [:a {:href (str "https://github.com/" login)} login] " "]
-         [:a.btn.tabnav-button {:href "/logout"} "Sign out"]]
-        [:div.tabnav-actions.logged-out
-         [:a.btn.tabnav-button {:href js/authorizeUrl} "Sign in"]]))))
-
 (defn error-pane
  []
  (let [error (rf/subscribe [:error])]
@ -50,7 +39,7 @@
 (defn address-settings []
  (let [user    (rf/subscribe [:user])
        user-id (:id @user)
-        address (rf/subscribe [:get-in user-address-path])]
+        address (rf/subscribe [:get-in [:user :address]])]
    (fn []
      [:div.tabnav-actions.float-right
       [:div.tabnav-actions.logged-in
@ -63,59 +52,91 @@
                  :autoComplete "off",
                  :size         55
                  :type         "text"
-                  :value-path   user-address-path})]
+                  :value-path   [:user :address]})]
         [svg/octicon-broadcast]]]])))

-(defn header []
-  (let [page (rf/subscribe [:page])
-        user (rf/subscribe [:user])]
-    (fn []
-      [:header.main-header
-       [:div.container
-        [:div.flex-table.mt-4.mb-4
-         [:header.logo]
-         [:a {:href "/"}
-          [:img {:src "/img/logo.svg"}

-           ;;[:img {:src "img/logo.png", :alt "commiteth", :width "100"}]
-           ]]
-         [:div.flex-table-item.flex-table-item-primary
-          [:a {:href "/"}]
-          [:h1.main-title.lh-condensed "commiteth"]
-          [:span.main-link
-           "Earn ETH by committing to open source projects"]]
-         [:div.flex-table-item.flex-table-item-primary
-          [login-link]]]
-        [:div.tabnav
-         (when @user [(address-settings)])
-         [:nav.header-nav.tabnav-tabs
-          [:a.tabnav-tab
-           {:href  "#"
-            :class (when (= :issues @page) "selected")}
-           [svg/octicon-repo]
-           "Open Bounties"]
-          (when @user [:a.tabnav-tab
-                       {:href  "#/manage"
-                        :class (when (= :manage @page) "selected")}
-                       [svg/octicon-organization]
-                       "Manage Transactions"])]]]])))
+(defn user-dropdown [user items]
+  (let [dropdown-open? (r/atom false)]
+    (fn []
+      (let [menu (if @dropdown-open?
+                   [:div.ui.menu.transition.visible]
+                   [:div.ui.menu])]
+        [:div.ui.browse.item.dropdown
+         {:on-click #(swap! dropdown-open? not)}
+         (:login user)
+         [:span.dropdown.icon]
+         (into menu
+               (for [[target caption] items]
+                 ^{:key target} [:div.item
+                                    [:a
+                                     (if (keyword? target)
+                                       {:on-click #(rf/dispatch [target])}
+                                       {:href target})
+                                     caption]]))]))))
+
+
+(defn user-component [user]
+  (if user
+    (let [login (:login user)]
+      [:div.ui.text.menu.user-component
+       [:div.item
+        [:img.ui.mini.circular.image {:src (:avatar_url user)}]]
+       [user-dropdown user [[:update-address "Update address"]
+                            ["/logout" "Sign out"]]]])
+    [:a.ui.button.small {:href js/authorizeUrl} "Sign in"]))
+
+(defn tabs []
+  (let [user (rf/subscribe [:user])
+        current-page (rf/subscribe [:page])]
+    (fn []
+      (let [tabs (apply conj [[:activity "Activity"]]
+                        (when @user
+                          [[:issues "Bounties"]
+                           [:manage "Repositories"]]))]
+        (into [:div.ui.attached.tabular.menu.tiny]
+              (for [[page caption] tabs]
+                (let [props {:class (str "ui item"
+                                         (when (= @current-page page) " active"))
+                             :on-click #(rf/dispatch [:set-active-page page])}]
+                  ^{:key page} [:div props caption])))))))
+
+
+(defn page-header []
+  (let [user (rf/subscribe [:user])]
+    (fn []
+      [:div.vertical.segment.commiteth-header
+       [:div.ui.grid.container
+        [:div.twelve.wide.column
+         [:div.ui.image
+          [:img.left.aligned {:src "/img/logo.svg"}]]]
+        [:div.four.wide.column
+         [user-component @user]]
+        (when-not @user
+          [:div.ui.text.content
+           [:div.ui.divider.hidden]
+           [:h2.ui.header "Commit ETH"]
+           [:h2.ui.subheader "Earn ETH by committing to open source projects"]
+           [:div.ui.divider.hidden]])
+        [tabs]]])))

 (def pages
-  {:issues #'issues-page
+  {:activity #'activity-page
+   :issues #'issues-page
   :manage #'manage-page})

 (defn page []
  (fn []
-    [:div.app
-     [:nav.main-navbar [:div.container]]
-     [header]
+    [:div.ui.pusher
+     [page-header]
     [error-pane]
-     [(pages @(rf/subscribe [:page]))]]))
+     [:div.ui.vertical.segment
+      [(pages @(rf/subscribe [:page]))]]]))

 (secretary/set-config! :prefix "#")

 (secretary/defroute "/" []
-  (rf/dispatch [:set-active-page :issues]))
+  (rf/dispatch [:set-active-page :activity]))

 (secretary/defroute "/manage" []
  (if js/user
@ -125,9 +146,9 @@
 (defn hook-browser-navigation! []
  (doto (History.)
    (events/listen
-      HistoryEventType/NAVIGATE
-      (fn [event]
-        (secretary/dispatch! (.-token event))))
+     HistoryEventType/NAVIGATE
+     (fn [event]
+       (secretary/dispatch! (.-token event))))
    (.setEnabled true)))

 (defn mount-components []
@ -135,7 +156,10 @@

 (defn load-user []
  (when-let [login js/user]
-    (rf/dispatch [:set-active-user {:login login :id js/userId :token js/token}])))
+    (rf/dispatch [:set-active-user
+                  {:login login
+                   :id (js/parseInt js/userId)
+                   :token js/token}])))

 (defn load-issues []
  (rf/dispatch [:load-bounties]))
--- a/src/cljs/commiteth/db.cljs
+++ b/src/cljs/commiteth/db.cljs
@ -3,7 +3,6 @@
 (def default-db
  {:page             :issues
   :user             nil
-   :user-profile     nil
   :repos-loading?   false
   :repos            []
   :enabled-repos    {}
--- a/src/cljs/commiteth/handlers.cljs
+++ b/src/cljs/commiteth/handlers.cljs
@ -59,6 +59,13 @@
                  [:load-enabled-repos]
                  [:load-owner-bounties]]}))

+(reg-event-fx
+  :sign-out
+  (fn [{:keys [db]} [_]]
+    {:db (assoc db :user nil)
+     :http {:method GET
+            :url "/logout"}}))
+
 (reg-event-fx
  :load-bounties
  (fn [{:keys [db]} [_]]
@ -106,7 +113,7 @@
 (reg-event-db
  :set-user-profile
  (fn [db [_ user-profile]]
-    (assoc db :user-profile user-profile)))
+    (assoc db :user (:user user-profile))))

 (reg-event-db
  :set-user-repos
--- a/src/cljs/commiteth/manage.cljs
+++ b/src/cljs/commiteth/manage.cljs
@ -1,7 +1,6 @@
 (ns commiteth.manage
  (:require [re-frame.core :as rf]
            [commiteth.common :refer [input checkbox]]
-            [commiteth.subscriptions :refer [user-address-path]]
            [commiteth.issues :refer [issues-list-table issue-url]]
            [clojure.set :refer [rename-keys]]))

--- a/src/cljs/commiteth/subscriptions.cljs
+++ b/src/cljs/commiteth/subscriptions.cljs
@ -45,5 +45,3 @@
  :get-in
  (fn [db [_ path]]
    (get-in db path)))
-
-(def user-address-path [:user-profile :user :address])
--- a/src/cljs/commiteth/svg.cljs
+++ b/src/cljs/commiteth/svg.cljs
@ -1,4 +1,4 @@
-(ns .commiteth.svg)
+(ns commiteth.svg)

 (defn octicon-broadcast []
  [:svg.octicon.octicon-broadcast
--- a/src/less/style.less
+++ b/src/less/style.less
@ -0,0 +1,123 @@
+
+@font-face {
+    font-family: 'postgrotesk';
+    src: url('/fonts/PostGrotesk-Book.woff') format('woff');
+    font-weight: normal;
+}
+
+
+.ui.button {
+    background-color: #b0f1ee;
+    white-space: nowrap;
+}
+
+.commiteth-header {
+    background-color: #2f3f44!important;
+    border-radius: 0em;
+    padding-top: 3em;
+}
+
+.ui.text.menu .item {
+    color: #fff;
+    opacity: 0.98;
+}
+
+.ui.mini.circular.image {
+    height: 35px;
+}
+
+.ui.header {
+    //font-weight: normal;
+    color: #fff;
+}
+
+.ui.subheader {
+    color: #848e91;
+    font-weight: normal;
+}
+
+.ui.card a {
+    color: #848e91;
+}
+
+span.dropdown.icon {
+    content: url("/img/icon_dropdown.svg");
+}
+
+.user-component {
+    margin-top: 0px!important;
+}
+.ui.text.menu {
+    .item:hover {
+        color: #fff;
+        opacity: 0.98;
+    }
+}
+
+.ui.menu .ui.dropdown .menu>.item a {
+    color: #474951!important;
+}
+
+.ui {
+    font-family: 'postgrotesk';
+}
+
+.ui.tabular {
+    background-color: #2f3f44;
+    .ui.item {
+        padding: 1.5em;
+        color: #fff;
+        opacity: 0.98;
+        cursor: pointer;
+    }
+    .ui.item.active {
+        border-radius: .8rem .8rem 0 0!important;
+        color: #b0f1ee;
+        background-color: fade(#fff, 10%);
+        border-width: 0em;
+        cursor: default;
+    }
+}
+
+
+.repo-label {
+    color: #1bb5c1;
+    font-weight: bold;
+}
+
+.repo-description {
+    color: #474951;
+}
+
+.ui.button.repo-added-button {
+    color: white;
+    background-color: #61deb0;
+    cursor: default;
+}
+.ui.segment {
+    // margin: 2.5em;
+    // line-height: 3em;
+    border: #e7e7e7 solid 0.1em;
+    box-shadow: none;
+    border-radius: 0.3em;
+
+    h3 {
+        color: #474951;
+    }
+    a:not(.ui) {
+        color: #1bb5c1;
+    }
+    .label {
+        background-color: #61deb0;
+        color: #fff;
+        margin-right: 1em;
+    }
+    .time {
+        color: #a8aab1;
+    }
+}
+
+
+.time {
+    color: #a8aab1;
+}
--- a/test/cljs/commiteth/cards.cljs
+++ b/test/cljs/commiteth/cards.cljs
@ -12,11 +12,9 @@


 (def app-state (r/atom {:repo-state :disabled
-                        :active-tab :activity}))
-
-
-(deftest tests-can-be-done-here
-  (is (= 0 0)))
+                        :active-tab :activity
+                        :user {:login "foobar"
+                               :profile-image "https://randomuser.me/api/portraits/men/4.jpg"}}))

 (defn fake-toggle-action [app-state]
  (let [repo-state (:repo-state @app-state)]
@ -55,10 +53,51 @@
  app-state)


-(defn top-hunters-dynamic [state-ratom]
-  [:div "TODO"])
+(defn dropdown-component [state-ratom]
+  (let [menu (if (:dropdown-open? @state-ratom)
+               [:div.ui.menu.transition.visible]
+               [:div.ui.menu])]
+    [:div.ui.right.dropdown.item
+     {:on-click #(swap! state-ratom update-in [:dropdown-open?] not)}
+     (:name @state-ratom)
+     [:i.dropdown.icon]
+     (into menu
+           (for [item (:items @state-ratom)]
+             ^{:key item} [:div.item item]))]))


+(defn dropdown-component2 [dropdown-open? caption items]
+  (let [menu (if @dropdown-open?
+               [:div.ui.menu.transition.visible]
+               [:div.ui.menu])]
+    [:div.ui.browse.item.dropdown
+     {:on-click #(swap! dropdown-open? not)}
+     caption
+     [:i.dropdown.icon]
+     (into menu
+           (for [item items]
+             ^{:key item} [:div.item item]))]))
+
+
+(defn user-component [state-ratom]
+  (if-let [user (get-in @state-ratom [:user])]
+    (let [login (:login user)]
+      [:div.ui.text.menu
+       [:div.item
+        [:img.ui.mini.circular.image {:src (:profile-image user)}]]
+       [dropdown-component2 (r/atom false) login ["Update address" "Sign out"]]
+
+       #_[:a.browse.item.username-label
+          ;;    {:href (str "https://github.com/" login)}
+
+          ;; login
+          ;; [:i.dropdown.icon]
+
+          ;;        [:a.ui.button.tiny {:href "/logout"} "Sign out"]
+          ]])
+    [:a.ui.button.tiny {:href "#";;js/authorizeUrl
+                        } "Sign in"]))
+
 (defn activate-tab! [tab]
  (swap! app-state assoc :active-tab tab))

@ -73,21 +112,21 @@
                    :on-click #(activate-tab! tab)}]
         ^{:key tab} [:div props caption]))]))

-
 (defn page-header-dynamic [state-ratom]
-  [:div.ui.grid.container.commiteth-header
+  [:div.ui.grid.commiteth-header
   [:div.ui.grid.four.column.container
    [:div.column
     [:img {:src "/img/logo.svg"}]]
    ^{:key 1} [:div.column]
    ^{:key 2} [:div.column]
    [:div.column
-     [:div.ui.button.tiny "Sign in"]]]
-   [:div.ui.text.content.justified
-    [:div.ui.divider.hidden]
-    [:h2.ui.header "Commit ETH"]
-    [:h3.ui.subheader "Earn ETH by committing to open source projects"]
-    [:div.ui.divider.hidden]]
+     [user-component state-ratom]]]
+   (when-not (:user @state-ratom)
+     [:div.ui.text.content.justified
+      [:div.ui.divider.hidden]
+      [:h2.ui.header "Commit ETH"]
+      [:h3.ui.subheader "Earn ETH by committing to open source projects"]
+      [:div.ui.divider.hidden]])
   [tabs @state-ratom]])

 (defcard-rg page-header
@ -95,9 +134,19 @@
  app-state
  {})

+#_(defcard-rg login-button
+    [login-button {:login "foobar"}])
+
+
+(defn top-hunters-dynamic [state-ratom]
+  [:div "TODO"])
+
+
+
+
 #_{:activity-item {:type :bounty-created
-                 :issue-id 1
-                 :foo 42}}
+                   :issue-id 1
+                   :foo 42}}

 (defcard-rg feeditem-bounty-created
  "An activity feed item with a bounty-created event"
@ -136,19 +185,6 @@
        [:div.time "2h ago"]]]]]]])


-(defn dropdown-component [state-ratom]
-  (let [menu (if (:dropdown-open? @state-ratom)
-               [:div.ui.menu.transition.visible]
-               [:div.ui.menu])]
-    [:div.ui.right.dropdown.item
-     {:on-click #(swap! state-ratom update-in [:dropdown-open?] not)}
-     (:name @state-ratom)
-     [:i.dropdown.icon]
-     (into menu
-           (for [item (:items @state-ratom)]
-             ^{:key item} [:div.item item]))]))
-
-
 (defcard-rg user-menu
  "Top right user menu component"
  (fn [state _]
@ -160,3 +196,6 @@
           :name "Random User"
           :items ["foo" "bar"]})
  {:inspect-data true})
+
+(deftest tests-can-also-be-done-here
+  (is (= 0 0)))