From bb5d4926318129eeaef3b10c94dd8c01eb28e940 Mon Sep 17 00:00:00 2001 From: Teemu Patja Date: Mon, 20 Feb 2017 17:03:01 +0200 Subject: [PATCH] Activity feed view * beginnings of activity feed reagent UI * uses place holder data for now * CSS + other UI tweaks --- src/cljs/commiteth/activity.cljs | 25 ++++++- src/cljs/commiteth/core.cljs | 99 +++++++++----------------- src/cljs/commiteth/db.cljs | 12 +++- src/cljs/commiteth/subscriptions.cljs | 5 ++ src/cljs/commiteth/update_address.cljs | 4 +- src/less/style.less | 64 ++++++++++++++--- 6 files changed, 129 insertions(+), 80 deletions(-) diff --git a/src/cljs/commiteth/activity.cljs b/src/cljs/commiteth/activity.cljs index c1d93ad..127feb2 100644 --- a/src/cljs/commiteth/activity.cljs +++ b/src/cljs/commiteth/activity.cljs @@ -1,7 +1,26 @@ (ns commiteth.activity (:require [re-frame.core :as rf])) + + +(defn activity-item [{{image-url :profile-image-url + display-name :display-name} :user + timestamp :timestamp + description :description} item] + + [:div.item.activity-item + [:div.ui.mini.circular.image + [:img {:src image-url}]] + [:div.content + [:div.header display-name] + [:div.description + [:p description]] + [:div.time timestamp]]]) + (defn activity-page [] - (fn [] - [:div.ui.container - [:div.ui.text "This will be the activity view"]])) + (let [activity-items (rf/subscribe [:activity-feed])] + (fn [] + [:div.ui.container + (into [:div.ui.items] + (for [item @activity-items] + [activity-item item]))]))) diff --git a/src/cljs/commiteth/core.cljs b/src/cljs/commiteth/core.cljs index 05b9a62..901729e 100644 --- a/src/cljs/commiteth/core.cljs +++ b/src/cljs/commiteth/core.cljs @@ -22,72 +22,40 @@ [re-frisk.core :refer [enable-re-frisk!]]) (:import goog.History)) -#_(defn error-pane - [] - (let [error (rf/subscribe [:error])] - (fn [] - (when @error - [:div.container - {:style {:background-color "#faeaea" - :padding "10px" - :color "red"} - :on-click #(rf/dispatch [:clear-error])} - (str @error)])))) - -#_(defn save-address - [user-id address] - (fn [_] - (rf/dispatch [:save-user-address user-id address]))) - -#_(defn address-settings [] - (let [user (rf/subscribe [:user]) - user-id (:id @user) - address (rf/subscribe [:get-in [:user :address]])] - (fn [] - [:div.tabnav-actions.float-right - [:div.tabnav-actions.logged-in - [:button.btn.tabnav-button - {:type "submit", :aria-haspopup "true" - :on-click (save-address user-id @address)} - "Update"] - [:div.auto-search-group - [(input {:placeholder "0x0000000000000000000000000000000000000000", - :autoComplete "off", - :size 55 - :type "text" - :value-path [:user :address]})] - [svg/octicon-broadcast]]]]))) - +(def user-dropdown-open? (r/atom false)) (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]]))])))) + (let [menu (if @user-dropdown-open? + [:div.ui.menu.transition.visible] + [:div.ui.menu]) + avatar-url (:avatar_url user)] + [:div.ui.left.item.dropdown + {:on-click #(swap! user-dropdown-open? not)} + [:div.item + [:img.ui.mini.circular.image {:src avatar-url}]] + [:div.item + (:login user)] + [:div.item + [: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"])) + (let [user (rf/subscribe [:user])] + (fn [] + (if @user + [:div.ui.text.menu.user-component + [:div.item + [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]) @@ -97,7 +65,7 @@ (when @user [[:repos "Repositories"] [:bounties "Bounties"]]))] - (into [:div.ui.attached.tabular.menu.tiny] + (into [:div.ui.attached.tabular.menu.tiny.commiteth-tabs] (for [[page caption] tabs] (let [props {:class (str "ui item" (when (= @current-page page) " active")) @@ -153,13 +121,14 @@ [:div.ui.vertical.segment [:div.ui.container [:div.ui.grid.stackable - [:div.twelve.wide.column + [:div.ten.wide.column [:div.ui.container.page-content [(pages @(rf/subscribe [:page]))]]] - [:div.four.wide.column.computer.only + [:div.six.wide.column.computer.only [:div.ui.container.page-content [:h3 "Top hunters"] - [top-hunters]]]]]]])) + [top-hunters]]]] + [:div.ui.divider]]]])) (secretary/set-config! :prefix "#") diff --git a/src/cljs/commiteth/db.cljs b/src/cljs/commiteth/db.cljs index 82adf2d..0e4507f 100644 --- a/src/cljs/commiteth/db.cljs +++ b/src/cljs/commiteth/db.cljs @@ -16,4 +16,14 @@ :eth-earned "11 000.00"} {:profile-image-url "https://randomuser.me/api/portraits/men/6.jpg" :display-name "Dummy User" - :eth-earned "8 400.00"}]}) + :eth-earned "8 400.00"}] + :activity-feed [{:type :submit-claim + :user {:display-name "Dummy User" + :profile-image-url "https://randomuser.me/api/portraits/men/6.jpg"} + :description "Submitted a claim for X" + :timestamp "1 day ago"} + {:type :submit-claim + :user {:display-name "Place Holder" + :profile-image-url "https://randomuser.me/api/portraits/men/4.jpg"} + :description "Posted ETH 15 bounty to Y" + :timestamp "2 days ago"}]}) diff --git a/src/cljs/commiteth/subscriptions.cljs b/src/cljs/commiteth/subscriptions.cljs index 43b7bd8..53f006d 100644 --- a/src/cljs/commiteth/subscriptions.cljs +++ b/src/cljs/commiteth/subscriptions.cljs @@ -46,6 +46,11 @@ (fn [db _] (:top-hunters db))) +(reg-sub + :activity-feed + (fn [db _] + (:activity-feed db))) + (reg-sub :get-in (fn [db [_ path]] diff --git a/src/cljs/commiteth/update_address.cljs b/src/cljs/commiteth/update_address.cljs index 8c9af01..5b4b100 100644 --- a/src/cljs/commiteth/update_address.cljs +++ b/src/cljs/commiteth/update_address.cljs @@ -16,7 +16,7 @@ (fn [] (println "web3-accounts" web3-accounts) [:div.ui.container.grid - [:div.ui.form.eight.wide.column + [:div.ui.form.sixteen.wide.column [:h3 "Update address"] [:p "Placeholder text for explaining what an Ethereum address is."] [:div.field @@ -26,7 +26,7 @@ (into [] (for [acc web3-accounts] acc))] - [:div.ui.input + [:div.ui.input.address-input [input address {:placeholder "0x0000000000000000000000000000000000000000" :auto-complete "off" :max-length 42}]])] diff --git a/src/less/style.less b/src/less/style.less index 89ec94a..670d4f5 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -25,12 +25,11 @@ .commiteth-header { background-color: #2f3f44!important; border-radius: 0em; - padding-top: 3em; + padding-top: 1.5em; } -.ui.text.menu .item { - color: #fff; - opacity: 0.98; +.commiteth-tabs { + padding-top: 1.8em; } .top-hunters { @@ -54,6 +53,7 @@ .ui.mini.circular.image { height: 35px; + width: 35px!important; } .ui.header { @@ -76,6 +76,7 @@ span.dropdown.icon { .user-component { margin-top: 0px!important; } + .ui.text.menu { .item:hover { color: #fff; @@ -83,12 +84,39 @@ span.dropdown.icon { } } -.ui.menu .ui.dropdown .menu>.item a { - color: #474951!important; +.ui.dropdown .item { + color: #fff!important; + opacity: 0.98; + } -.ui { +.ui.menu .ui.dropdown .menu>.item:hover, .ui.menu .ui.dropdown .menu>.selected.item { + background-color: #fff!important; +} + +.ui.input.address-input { + font-size: .8em; + width: 360px!important; +} + + +.ui.menu.transition.visible { font-family: 'postgrotesk'; + font-size: 1em; + border-radius: 8px; + border: none; + padding: .5em; + .item { + :hover { + color: #e96868; + } + a { + &:hover { + color: #e96868; + } + color: #474951; + } + } } .ui.attached.tabular { @@ -154,12 +182,23 @@ span.dropdown.icon { cursor: default; } -.ui.cards>.card { +.activity-item { + border: #e7e7e7 solid 0.1em!important; + box-shadow: none!important; + border-radius: 0.3em!important; + padding: 0.8em 1em 1.1em!important; + + flex-direction: row!important; + // .ui.mini.circular.image { + // margin: 0; + // } +} + +.ui.cards>.card { border: #e7e7e7 solid 0.1em; box-shadow: none; border-radius: 0.3em; padding: 0.8em 1em 1.1em; - } .ui.segment { border: #e7e7e7 solid 0.1em; @@ -182,7 +221,14 @@ span.dropdown.icon { } } +.ui.divider.hidden { + padding: 1em; +} .time { color: #a8aab1; } + +.ui { + font-family: 'postgrotesk'!important; +}