Activity feed view

* beginnings of activity feed reagent UI
* uses place holder data for now
* CSS + other UI tweaks
This commit is contained in:
Teemu Patja 2017-02-20 17:03:01 +02:00
parent b8facb1a97
commit bb5d492631
No known key found for this signature in database
GPG Key ID: F5B7035E6580FD4C
6 changed files with 129 additions and 80 deletions

View File

@ -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 []
(let [activity-items (rf/subscribe [:activity-feed])]
(fn []
[:div.ui.container
[:div.ui.text "This will be the activity view"]]))
(into [:div.ui.items]
(for [item @activity-items]
[activity-item item]))])))

View File

@ -22,53 +22,21 @@
[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?
(let [menu (if @user-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]
[: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
@ -76,18 +44,18 @@
(if (keyword? target)
{:on-click #(rf/dispatch [target])}
{:href target})
caption]]))]))))
caption]]))]))
(defn user-component [user]
(if user
(let [login (:login user)]
(let [user (rf/subscribe [:user])]
(fn []
(if @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"]))
[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 "#")

View File

@ -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"}]})

View File

@ -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]]

View File

@ -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}]])]

View File

@ -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;
}
.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;
}