Activity feed view
* beginnings of activity feed reagent UI * uses place holder data for now * CSS + other UI tweaks
This commit is contained in:
parent
b8facb1a97
commit
bb5d492631
|
@ -1,7 +1,26 @@
|
||||||
(ns commiteth.activity
|
(ns commiteth.activity
|
||||||
(:require [re-frame.core :as rf]))
|
(: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 []
|
(defn activity-page []
|
||||||
(fn []
|
(let [activity-items (rf/subscribe [:activity-feed])]
|
||||||
[:div.ui.container
|
(fn []
|
||||||
[:div.ui.text "This will be the activity view"]]))
|
[: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!]])
|
[re-frisk.core :refer [enable-re-frisk!]])
|
||||||
(:import goog.History))
|
(:import goog.History))
|
||||||
|
|
||||||
#_(defn error-pane
|
(def user-dropdown-open? (r/atom false))
|
||||||
[]
|
|
||||||
(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]]]])))
|
|
||||||
|
|
||||||
|
|
||||||
(defn user-dropdown [user items]
|
(defn user-dropdown [user items]
|
||||||
(let [dropdown-open? (r/atom false)]
|
(let [menu (if @user-dropdown-open?
|
||||||
(fn []
|
[:div.ui.menu.transition.visible]
|
||||||
(let [menu (if @dropdown-open?
|
[:div.ui.menu])
|
||||||
[:div.ui.menu.transition.visible]
|
avatar-url (:avatar_url user)]
|
||||||
[:div.ui.menu])]
|
[:div.ui.left.item.dropdown
|
||||||
[:div.ui.browse.item.dropdown
|
{:on-click #(swap! user-dropdown-open? not)}
|
||||||
{:on-click #(swap! dropdown-open? not)}
|
[:div.item
|
||||||
(:login user)
|
[:img.ui.mini.circular.image {:src avatar-url}]]
|
||||||
[:span.dropdown.icon]
|
[:div.item
|
||||||
(into menu
|
(:login user)]
|
||||||
(for [[target caption] items]
|
[:div.item
|
||||||
^{:key target} [:div.item
|
[:span.dropdown.icon]]
|
||||||
[:a
|
(into menu
|
||||||
(if (keyword? target)
|
(for [[target caption] items]
|
||||||
{:on-click #(rf/dispatch [target])}
|
^{:key target} [:div.item
|
||||||
{:href target})
|
[:a
|
||||||
caption]]))]))))
|
(if (keyword? target)
|
||||||
|
{:on-click #(rf/dispatch [target])}
|
||||||
|
{:href target})
|
||||||
|
caption]]))]))
|
||||||
|
|
||||||
|
|
||||||
(defn user-component [user]
|
(defn user-component [user]
|
||||||
(if user
|
(let [user (rf/subscribe [:user])]
|
||||||
(let [login (:login user)]
|
(fn []
|
||||||
[:div.ui.text.menu.user-component
|
(if @user
|
||||||
[:div.item
|
[:div.ui.text.menu.user-component
|
||||||
[:img.ui.mini.circular.image {:src (:avatar_url user)}]]
|
[:div.item
|
||||||
[user-dropdown user [[:update-address "Update address"]
|
[user-dropdown @user [[:update-address "Update address"]
|
||||||
["/logout" "Sign out"]]]])
|
["/logout" "Sign out"]]]]]
|
||||||
[:a.ui.button.small {:href js/authorizeUrl} "Sign in"]))
|
[:a.ui.button.small {:href js/authorizeUrl} "Sign in"]))))
|
||||||
|
|
||||||
(defn tabs []
|
(defn tabs []
|
||||||
(let [user (rf/subscribe [:user])
|
(let [user (rf/subscribe [:user])
|
||||||
|
@ -97,7 +65,7 @@
|
||||||
(when @user
|
(when @user
|
||||||
[[:repos "Repositories"]
|
[[:repos "Repositories"]
|
||||||
[:bounties "Bounties"]]))]
|
[:bounties "Bounties"]]))]
|
||||||
(into [:div.ui.attached.tabular.menu.tiny]
|
(into [:div.ui.attached.tabular.menu.tiny.commiteth-tabs]
|
||||||
(for [[page caption] tabs]
|
(for [[page caption] tabs]
|
||||||
(let [props {:class (str "ui item"
|
(let [props {:class (str "ui item"
|
||||||
(when (= @current-page page) " active"))
|
(when (= @current-page page) " active"))
|
||||||
|
@ -153,13 +121,14 @@
|
||||||
[:div.ui.vertical.segment
|
[:div.ui.vertical.segment
|
||||||
[:div.ui.container
|
[:div.ui.container
|
||||||
[:div.ui.grid.stackable
|
[:div.ui.grid.stackable
|
||||||
[:div.twelve.wide.column
|
[:div.ten.wide.column
|
||||||
[:div.ui.container.page-content
|
[:div.ui.container.page-content
|
||||||
[(pages @(rf/subscribe [:page]))]]]
|
[(pages @(rf/subscribe [:page]))]]]
|
||||||
[:div.four.wide.column.computer.only
|
[:div.six.wide.column.computer.only
|
||||||
[:div.ui.container.page-content
|
[:div.ui.container.page-content
|
||||||
[:h3 "Top hunters"]
|
[:h3 "Top hunters"]
|
||||||
[top-hunters]]]]]]]))
|
[top-hunters]]]]
|
||||||
|
[:div.ui.divider]]]]))
|
||||||
|
|
||||||
(secretary/set-config! :prefix "#")
|
(secretary/set-config! :prefix "#")
|
||||||
|
|
||||||
|
|
|
@ -16,4 +16,14 @@
|
||||||
:eth-earned "11 000.00"}
|
:eth-earned "11 000.00"}
|
||||||
{:profile-image-url "https://randomuser.me/api/portraits/men/6.jpg"
|
{:profile-image-url "https://randomuser.me/api/portraits/men/6.jpg"
|
||||||
:display-name "Dummy User"
|
: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 _]
|
(fn [db _]
|
||||||
(:top-hunters db)))
|
(:top-hunters db)))
|
||||||
|
|
||||||
|
(reg-sub
|
||||||
|
:activity-feed
|
||||||
|
(fn [db _]
|
||||||
|
(:activity-feed db)))
|
||||||
|
|
||||||
(reg-sub
|
(reg-sub
|
||||||
:get-in
|
:get-in
|
||||||
(fn [db [_ path]]
|
(fn [db [_ path]]
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
(fn []
|
(fn []
|
||||||
(println "web3-accounts" web3-accounts)
|
(println "web3-accounts" web3-accounts)
|
||||||
[:div.ui.container.grid
|
[:div.ui.container.grid
|
||||||
[:div.ui.form.eight.wide.column
|
[:div.ui.form.sixteen.wide.column
|
||||||
[:h3 "Update address"]
|
[:h3 "Update address"]
|
||||||
[:p "Placeholder text for explaining what an Ethereum address is."]
|
[:p "Placeholder text for explaining what an Ethereum address is."]
|
||||||
[:div.field
|
[:div.field
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
(into []
|
(into []
|
||||||
(for [acc web3-accounts]
|
(for [acc web3-accounts]
|
||||||
acc))]
|
acc))]
|
||||||
[:div.ui.input
|
[:div.ui.input.address-input
|
||||||
[input address {:placeholder "0x0000000000000000000000000000000000000000"
|
[input address {:placeholder "0x0000000000000000000000000000000000000000"
|
||||||
:auto-complete "off"
|
:auto-complete "off"
|
||||||
:max-length 42}]])]
|
:max-length 42}]])]
|
||||||
|
|
|
@ -25,12 +25,11 @@
|
||||||
.commiteth-header {
|
.commiteth-header {
|
||||||
background-color: #2f3f44!important;
|
background-color: #2f3f44!important;
|
||||||
border-radius: 0em;
|
border-radius: 0em;
|
||||||
padding-top: 3em;
|
padding-top: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.text.menu .item {
|
.commiteth-tabs {
|
||||||
color: #fff;
|
padding-top: 1.8em;
|
||||||
opacity: 0.98;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-hunters {
|
.top-hunters {
|
||||||
|
@ -54,6 +53,7 @@
|
||||||
|
|
||||||
.ui.mini.circular.image {
|
.ui.mini.circular.image {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
width: 35px!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.header {
|
.ui.header {
|
||||||
|
@ -76,6 +76,7 @@ span.dropdown.icon {
|
||||||
.user-component {
|
.user-component {
|
||||||
margin-top: 0px!important;
|
margin-top: 0px!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.text.menu {
|
.ui.text.menu {
|
||||||
.item:hover {
|
.item:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -83,12 +84,39 @@ span.dropdown.icon {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.menu .ui.dropdown .menu>.item a {
|
.ui.dropdown .item {
|
||||||
color: #474951!important;
|
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-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 {
|
.ui.attached.tabular {
|
||||||
|
@ -154,12 +182,23 @@ span.dropdown.icon {
|
||||||
cursor: default;
|
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;
|
border: #e7e7e7 solid 0.1em;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-radius: 0.3em;
|
border-radius: 0.3em;
|
||||||
padding: 0.8em 1em 1.1em;
|
padding: 0.8em 1em 1.1em;
|
||||||
|
|
||||||
}
|
}
|
||||||
.ui.segment {
|
.ui.segment {
|
||||||
border: #e7e7e7 solid 0.1em;
|
border: #e7e7e7 solid 0.1em;
|
||||||
|
@ -182,7 +221,14 @@ span.dropdown.icon {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.divider.hidden {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
color: #a8aab1;
|
color: #a8aab1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui {
|
||||||
|
font-family: 'postgrotesk'!important;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue