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

Merge pull request #32 from Day8/bug/panel-resizing 

Fix panel resizing
This commit is contained in:
Daniel Compton 2017-08-14 21:19:43 +12:00 committed by GitHub
parent 9eae81a000 33765b3eeb
commit 775d61c4b0
1 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -244,11 +244,12 @@
;; Add clear button
;; Filter out different trace types
(let [position (r/atom :right)
size (r/atom 0.35)
panel-width-ratio (r/atom 0.35)
showing? (r/atom false)
dragging? (r/atom false)
pin-to-bottom? (r/atom true)
selected-tab (r/atom :traces)
window-width js/window.innerWidth
handle-keys (fn [e]
(let [combo-key? (or (.-ctrlKey e) (.-metaKey e) (.-altKey e))
tag-name (.-tagName (.-target e))
@ -261,36 +262,37 @@
(if @showing?
(enable-tracing!)
(disable-tracing!))
(.preventDefault e))))))]
(r/create-class
{:component-will-mount #(js/window.addEventListener "keydown" handle-keys)
:component-will-unmount #(js/window.removeEventListener "keydown" handle-keys)
:display-name "devtools outer"
:reagent-render (fn []
(let [draggable-area 10
full-width js/window.innerWidth
full-height js/window.innerHeight
left (if @showing? (str (* 100 (- 1 @size)) "%")
(str full-width "px"))
transition (if @showing?
ease-transition
(str ease-transition ", opacity 0.01s linear 0.2s"))]
[:div.panel-wrapper
{:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}}
[:div.panel
{:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.298039) 0px 0px 4px" :background "white"
:left left :top "0px" :width (str (* 100 @size) "%") :height "100%"
:transition transition}}
[:div.panel-resizer {:style (resizer-style draggable-area)
:on-mouse-down #(reset! dragging? true)
:on-mouse-up #(reset! dragging? false)
:on-mouse-move (fn [e]
(.preventDefault e))))))
handle-mousemove (fn [e]
(when @dragging?
(let [x (.-clientX e)
y (.-clientY e)]
(.preventDefault e)
(reset! size (/ (- full-width x)
full-width)))))}]
(reset! panel-width-ratio (/ (- window-width x) window-width)))))]
(r/create-class
{:component-will-mount (fn []
(js/window.addEventListener "keydown" handle-keys)
(js/window.addEventListener "mousemove" handle-mousemove))
:component-will-unmount (fn []
(js/window.removeEventListener "keydown" handle-keys)
(js/window.removeEventListener "mousemove" handle-mousemove))
:display-name "devtools outer"
:reagent-render (fn []
(let [draggable-area 10
left (if @showing? (str (* 100 (- 1 @panel-width-ratio)) "%")
(str window-width "px"))
transition (if @dragging?
""
ease-transition)]
[:div.panel-wrapper
{:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}}
[:div.panel
{:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.3) 0px 0px 4px" :background "white"
:left left :top "0px" :width (str (inc (int (* 100 @panel-width-ratio))) "%") :height "100%"
:transition transition}}
[:div.panel-resizer {:style (resizer-style draggable-area)
:on-mouse-down #(reset! dragging? true)
:on-mouse-up #(reset! dragging? false)}]
[:div.panel-content
{:style {:width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.panel-content-top