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
parent
b8facb1a97
commit
bb5d492631
|
|
@ -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]))])))
|
||||
|
|
|
|||
|
|
@ -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 "#")
|
||||
|
||||
|
|
|
|||
|
|
@ -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"}]})
|
||||
|
|
|
|||
|
|
@ -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]]
|
||||
|
|
|
|||
|
|
@ -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}]])]
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue