status-im
/
open-bounty
mirror of https://github.com/status-im/open-bounty.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[FIX #226] UI changes; refactor React refs usage

This commit is contained in:
Vitaliy Vlasov 2018-01-22 13:53:33 +02:00
parent b2ab0949f6
commit 326c221988
7 changed files with 88 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/cljs/commiteth/activity.cljs
View File

@ -2,7 +2,9 @@
(:require [re-frame.core :as rf]
[reagent.core :as r]
[commiteth.common :refer [moment-timestamp
items-per-page
display-data-page
scroll-div
issue-url]]))
@ -55,28 +57,29 @@
(str (subs (str tla) 1) " " balance)])])
[:div.time (moment-timestamp updated)]]]])
(defn activity-list [activity-page-data]
(defn activity-list [{:keys [items item-count page-number total-count]
:as activity-page-data}]
(if (empty? (:items activity-page-data))
[:div.view-no-data-container
[:p "No recent activity yet"]]
(display-data-page activity-page-data activity-item :set-activity-page-number)))
[:div
(let [left (inc (* (dec page-number) items-per-page))
right (dec (+ left item-count))]
[:div.item-counts-label
[:span (str "Showing " left "-" right " of " total-count)]])
(display-data-page activity-page-data activity-item)]))
(defn activity-page []
(let [activity-page-data (rf/subscribe [:activities-page])
activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])
container-element (atom nil)
render-fn (fn []
(if @activity-feed-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[:div.ui.container.activity-container
{:ref #(reset! container-element %1)}
[activity-list @activity-page-data]]))]
(r/create-class
{:component-did-update (fn []
(when @container-element
(.scrollIntoView @container-element)))
:reagent-render render-fn})))
container-element (atom nil)]
(fn []
(if @activity-feed-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[:div.ui.container.activity-container
{:ref #(reset! container-element %1)}
[scroll-div container-element]
[:div.activity-header "Activities"]
[activity-list @activity-page-data]]))))

30
src/cljs/commiteth/bounties.cljs
View File

@ -3,6 +3,7 @@
[reagent.core :as r]
[commiteth.common :refer [moment-timestamp
display-data-page
scroll-div
items-per-page
issue-url]]))
@ -55,23 +56,20 @@
right (dec (+ left item-count))]
[:div.item-counts-label
[:span (str "Showing " left "-" right " of " total-count)]])
(display-data-page bounty-page-data bounty-item :set-bounty-page-number)]))
(display-data-page bounty-page-data bounty-item)]))
(defn bounties-page []
(let [bounty-page-data (rf/subscribe [:open-bounties-page])
open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])
container-element (atom nil)
render-fn (fn []
(if @open-bounties-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[:div.ui.container.open-bounties-container
{:ref #(reset! container-element %1)}
[:div.open-bounties-header "Bounties"]
[bounties-list @bounty-page-data]]))]
(r/create-class
{:component-did-update (fn []
(when @container-element
(.scrollIntoView @container-element)))
:reagent-render render-fn})))
container-element (atom nil)]
(fn []
(if @open-bounties-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[:div.ui.container.open-bounties-container
{:ref #(reset! container-element %1)}
[scroll-div container-element]
[:div.open-bounties-header "Bounties"]
[bounties-list @bounty-page-data]]))
))

34
src/cljs/commiteth/common.cljs
View File

@ -1,6 +1,7 @@
(ns commiteth.common
(:require [reagent.core :as r]
[re-frame.core :as rf]
[clojure.string :as str]
[cljsjs.moment]))
(defn input [val-ratom props]
@ -30,9 +31,22 @@
(defn issue-url [owner repo number]
(str "https://github.com/" owner "/" repo "/issues/" number))
(defn scroll-div [container-element]
"This is an invisible div that exists
for the sole purpose of scrolling the container-element into view
when page-number is updated"
(let [page-number (rf/subscribe [:page-number])]
(r/create-class
{:component-did-update (fn []
(when @container-element
(.scrollIntoView @container-element)))
:reagent-render (fn []
[:div {:style {:display "none"}}
@page-number])})))
(def items-per-page 15)
(defn draw-page-numbers [page-number page-count set-page-kw]
(defn draw-page-numbers [page-number page-count]
"Draw page numbers for the pagination component.
Inserts ellipsis when list is too long, by default
max 6 items are allowed"
@ -41,8 +55,8 @@
[:div.rectangle-rounded
(cond-> {}
(not current?)
(assoc :class "grayed-out"
:on-click #(rf/dispatch [set-page-kw i])))
(assoc :class "grayed-out-page-num"
:on-click #(rf/dispatch [:set-page-number i])))
i])
max-page-nums 6]
[:div.page-nums-container
@ -78,8 +92,7 @@
total-count
page-number
page-count]}
draw-item-fn
set-page-kw]
draw-item-fn]
"Draw data items along with pagination controls"
(let [draw-items (fn []
(into [:div.ui.items]
@ -90,14 +103,17 @@
forward?)
(and (< 1 page-number)
(not forward?)))
(rf/dispatch [set-page-kw
(rf/dispatch [:set-page-number
(if forward?
(inc page-number)
(dec page-number))])))
draw-rect (fn [direction]
(let [forward? (= direction :forward)]
(let [forward? (= direction :forward)
gray-out? (or (and forward? (= page-number page-count))
(and (not forward?) (= page-number 1))) ]
[:div.rectangle-rounded
{:on-click (on-direction-click forward?)}
(cond-> {:on-click (on-direction-click forward?)}
gray-out? (assoc :class "grayed-out-direction"))
[:img.icon-forward-gray
(cond-> {:src "icon-forward-gray.svg"}
forward? (assoc :class "flip-horizontal"))]]))]
@ -110,6 +126,6 @@
[draw-rect :backward]
[draw-rect :forward]
[:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
[draw-page-numbers page-number page-count set-page-kw]]])))
[draw-page-numbers page-number page-count]]])))

3
src/cljs/commiteth/db.cljs
View File

@ -8,8 +8,7 @@
:activity-feed-loading? false
:open-bounties-loading? false
:open-bounties []
:bounty-page-number 1
:activity-page-number 1
:page-number 1
:owner-bounties {}
:top-hunters []
:activity-feed []})

17
src/cljs/commiteth/handlers.cljs
View File

@ -63,19 +63,15 @@
(reg-event-db
:set-active-page
(fn [db [_ page]]
(assoc db :page page)))
:set-active-page
(fn [db [_ page]]
(assoc db :page page
:page-number 1)))
(reg-event-db
:set-bounty-page-number
:set-page-number
(fn [db [_ page]]
(assoc db :bounty-page-number page)))
(reg-event-db
:set-activity-page-number
(fn [db [_ page]]
(assoc db :activity-page-number page)))
(assoc db :page-number page)))
(reg-event-fx
:set-flash-message
@ -90,7 +86,6 @@
(fn [db _]
(dissoc db :flash-message)))
(defn assoc-in-if-not-empty [m path val]
(if (seq val)
(assoc-in m path val)

13
src/cljs/commiteth/subscriptions.cljs
View File

@ -37,14 +37,14 @@
(vec (:open-bounties db))))
(reg-sub
:bounty-page-number
:page-number
(fn [db _]
(:bounty-page-number db)))
(:page-number db)))
(reg-sub
:open-bounties-page
:<- [:open-bounties]
:<- [:bounty-page-number]
:<- [:page-number]
(fn [[open-bounties page-number] _]
(let [total-count (count open-bounties)
start (* (dec page-number) items-per-page)
@ -77,15 +77,10 @@
(fn [db _]
(vec (:activity-feed db))))
(reg-sub
:activity-page-number
(fn [db _]
(:activity-page-number db)))
(reg-sub
:activities-page
:<- [:activity-feed]
:<- [:activity-page-number]
:<- [:page-number]
(fn [[activities page-number] _]
(let [total-count (count activities)
start (* (dec page-number) items-per-page)

20
src/less/style.less
View File

@ -523,7 +523,7 @@
}
}
border: #e7e7e7 solid 0.1em!important;
border-bottom: #eaecee 1px solid !important;
box-shadow: none!important;
border-radius: 0.3em!important;
padding: 0.8em 1em 1.1em!important;
@ -588,9 +588,16 @@
}
.activity-container {
background-color: #fff;
transform: translate(0, -45px);
border-radius: 10px;
padding: 24px;
.activity-header {
font-family: "PostGrotesk-Medium";
font-size: 21px;
font-weight: 500;
color: #42505c;
}
}
.footer-row {
@ -890,12 +897,19 @@ body {
cursor: pointer;
}
.grayed-out {
.grayed-out-page-num {
color: #8d99a4;
background-color: #f2f5f8;
opacity: 1.0;
}
.grayed-out-direction {
color: #8d99a4;
background-color: #f2f5f8;
opacity: 0.4;
cursor: auto
}
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);