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

Fix panel resizing

This commit is contained in:
chris (daiyi) 2017-08-09 16:16:07 +02:00
parent e70c86cbe7
commit bec8b73789
1 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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