status-im/open-bounty
2
0
Fork 0
mirror of https://github.com/status-im/open-bounty.git synced 2025-01-11 10:06:20 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #224 from status-im/feature/pagination-#156

Browse Source 
[FIX #226] Pagination: add cursor pointer for buttons, scroll to top
This commit is contained in:
Vitaliy Vlasov 2018-01-26 13:44:36 +02:00 committed by GitHub
commit d1a34be891
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 114 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
(:require [re-frame.core :as rf]
[reagent.core :as r]
[commiteth.common :refer [moment-timestamp
items-per-page
display-data-page
issue-url]]))
@ -55,21 +56,29 @@
(str (subs (str tla) 1) " " balance)])])
[:div.time (moment-timestamp updated)]]]])
(defn activity-list [activity-page-data]
[:div.ui.container.activity-container
(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))])
(defn activity-list [{:keys [items item-count page-number total-count]
:as activity-page-data}
container-element]
(if (empty? (:items activity-page-data))
[:div.view-no-data-container
[:p "No recent activity yet"]]
[: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 container-element)]))
(defn activity-page []
(let [activity-page-data (rf/subscribe [:activities-page])
activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])]
activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])
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"]]]
[activity-list @activity-page-data]))))
[:div.ui.container.activity-container
{:ref #(reset! container-element %1)}
[:div.activity-header "Activities"]
[activity-list @activity-page-data container-element]]))))

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

@ -1,5 +1,6 @@
(ns commiteth.bounties
(:require [re-frame.core :as rf]
[reagent.core :as r]
[commiteth.common :refer [moment-timestamp
display-data-page
items-per-page
@ -45,25 +46,29 @@
[:img {:src avatar-url}]]]]))
(defn bounties-list [{:keys [items item-count page-number total-count]
:as bounty-page-data}]
[:div.ui.container.open-bounties-container
[:div.open-bounties-header "Bounties"]
(if (empty? items)
[:div.view-no-data-container
[:p "No recent activity yet"]]
[: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 bounty-page-data bounty-item :set-bounty-page-number)])])
:as bounty-page-data}
container-element]
(if (empty? items)
[:div.view-no-data-container
[:p "No recent activity yet"]]
[: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 bounty-page-data bounty-item container-element)]))
(defn bounties-page []
(let [bounty-page-data (rf/subscribe [:open-bounties-page])
open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])]
open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])
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"]]]
[bounties-list @bounty-page-data]))))
[:div.ui.container.open-bounties-container
{:ref #(reset! container-element %1)}
[:div.open-bounties-header "Bounties"]
[bounties-list @bounty-page-data container-element]]))
))

40
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]
@ -32,17 +33,20 @@
(def items-per-page 15)
(defn draw-page-numbers [page-number page-count set-page-kw]
(defn draw-page-numbers [page-number page-count container-element]
"Draw page numbers for the pagination component.
Inserts ellipsis when list is too long, by default
max 6 items are allowed"
Inserts ellipsis when list is too long, by default
max 6 items are allowed"
(let [draw-page-num-fn (fn [current? i]
^{:key i}
[:div.rectangle-rounded
(cond-> {}
(not current?)
(assoc :class "grayed-out"
:on-click #(rf/dispatch [set-page-kw i])))
(if current?
{:class "page-num-active"}
{:class "grayed-out-page-num"
:on-click #(do
(rf/dispatch [:set-page-number i])
(when @container-element
(.scrollIntoView @container-element)))})
i])
max-page-nums 6]
[:div.page-nums-container
@ -79,7 +83,7 @@
page-number
page-count]}
draw-item-fn
set-page-kw]
container-element]
"Draw data items along with pagination controls"
(let [draw-items (fn []
(into [:div.ui.items]
@ -90,14 +94,19 @@
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))])))
(dec page-number))])
(when @container-element
(.scrollIntoView @container-element))))
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"))]]))]
@ -107,9 +116,10 @@
[:div
[draw-items]
[:div.page-nav-container
[draw-rect :backward]
[draw-rect :forward]
[:div.page-direction-container
[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 container-element]]])))

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

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

@ -38,7 +38,6 @@
(println "redirecting to" path)
(set! (.-pathname js/location) path)))
(reg-event-fx
:initialize-db
[(inject-cofx :store)]
@ -64,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
@ -91,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)

52
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 {
@ -887,14 +894,26 @@ body {
flex: none;
align-items: center;
justify-content: center;
cursor: pointer;
}
.grayed-out {
.page-num-active {
cursor: auto;
}
.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);
@ -904,15 +923,6 @@ body {
filter: fliph;
}
.pagination-text {
width: 83px;
height: 15px;
font-family: PostGrotesk;
font-size: 15px;
text-align: center;
color: #8d99a4;
}
.icon-forward-gray {
width: 24px;
height: 24px;
@ -922,10 +932,24 @@ body {
.page-nav-container {
display: flex;
margin: 0 -6px;
@media (max-width: 767px) {
align-items: center;
flex-direction: column;
}
}
.page-direction-container {
display: flex;
@media (max-width: 767px) {
flex-direction: row;
}
}
.page-nums-container {
display: flex;
@media (max-width: 767px) {
display: none;
}
margin-left: auto;
justify-content: space-between;
}
@ -940,6 +964,10 @@ body {
flex: none;
align-items: center;
justify-content: center;
@media (max-width: 767px) {
margin-top: 12px;
}
}
.item-counts-label {