status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Pin traces to bottom for autoscrolling

This commit is contained in:
Saskia Lindner 2017-08-25 11:43:00 +02:00
parent 098340c2ff
commit d5aefa9b1d
3 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/day8/re_frame/trace.cljs
View File

@ -227,9 +227,10 @@
(:filter-type item) ": " [:span.filter-item-string (:query item)]
[:span.icon-button [components/icon-remove]]]])
@filter-items)]]
[:div.panel-content-scrollable
[components/autoscroll-list {:class "panel-content-scrollable" :scroll? true}
[:table
{:cell-spacing "0" :width "100%"}
{:style {:margin-bottom 10}
:cell-spacing "0" :width "100%"}
[:thead>tr
[:th [:button.text-button
{:style {:cursor "pointer"}

33
src/day8/re_frame/trace/components.cljs
View File

@ -1,4 +1,6 @@
(ns day8.re-frame.trace.components)
(ns day8.re-frame.trace.components
(:require [reagent.core :as r]
[goog.fx.dom :as fx]))
(defn icon-add []
[:svg.icon.icon-add
@ -13,3 +15,32 @@
[:title "remove"]
[:path
{:d "M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"}]])
(defn scroll! [el start end time]
(.play (fx/Scroll. el (clj->js start) (clj->js end) time)))
(defn scrolled-to-end? [el tolerance]
;; at-end?: element.scrollHeight - element.scrollTop === element.clientHeight
(> tolerance (- (.-scrollHeight el) (.-scrollTop el) (.-clientHeight el))))
(defn autoscroll-list [{:keys [class scroll?] :as opts} childr]
(let [should-scroll (r/atom true)]
(r/create-class
{:display-name "autoscroll-list"
:component-did-mount
(fn [this]
(let [n (r/dom-node this)]
(scroll! n [0 (.-scrollTop n)] [0 (.-scrollHeight n)] 0)))
:component-will-update
(fn [this]
(let [n (r/dom-node this)]
(reset! should-scroll (scrolled-to-end? n 100))))
:component-did-update
(fn [this]
(let [scroll? (:scroll? (r/props this))
n (r/dom-node this)]
(when (and scroll? @should-scroll)
(scroll! n [0 (.-scrollTop n)] [0 (.-scrollHeight n)] 1600))))
:reagent-render
(fn [{:keys [class]} child]
[:div {:class class} child])})))

6
src/day8/re_frame/trace/styles.cljs
View File

@ -95,12 +95,12 @@
flex: 1;
}
#--re-frame-trace-- .panel-content-scrollable {
margin: 10px 0 0 10px;
flex: 1 0 auto;
height: 100%;
margin: 10px;
overflow: auto;
flex: 1 1 auto;
}
#--re-frame-trace-- .filter-control {
margin: 10px 0 0 10px;
flex: none;
}
")