mirror of
https://github.com/status-im/re-frame-10x.git
synced 2025-02-16 16:06:23 +00:00
Add "x" button to remove app-db panel paths
This commit is contained in:
Daniel Compton
parent
2edf0b843a
commit
aec228f816
@ -105,3 +105,4 @@ If you want to work on re-frame-trace, see [DEVELOPERS.md](DEVELOPERS.md).
|
||||
* [open](https://thenounproject.com/search/?q=popout&i=334227) by Bluetip Design from the Noun Project
|
||||
* [reload](https://thenounproject.com/adnen.kadri/collection/arrows/?i=798299) by Adnen Kadri from the Noun Project
|
||||
* [Camera](https://thenounproject.com/search/?q=snapshot&i=200965) by Christian Shannon from the Noun Project
|
||||
* [Delete](https://thenounproject.com/term/delete/926276) by logan from the Noun Project
|
||||
|
||||
1
resources/day8/re_frame/trace/images/delete.svg
Normal file
1
resources/day8/re_frame/trace/images/delete.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 823.93427 823.93427" enable-background="new 0 0 2000 2000" xml:space="preserve"><path style="" d="m 776.75678,0 c -12.064,0 -24.124,4.608 -33.345,13.828 L 411.94378,345.27301 80.52575,13.879 c -18.443,-18.441 -48.255,-18.441 -66.695,0 -18.441,18.44 -18.441,48.244 0,66.685 l 331.418,331.39601 -331.418,331.399 c -18.441,18.44 -18.441,48.25 0,66.691 9.198,9.198 21.272,13.817 33.347,13.817 12.073,0 24.15,-4.619 33.348,-13.817 l 331.41803,-331.398 331.468,331.445 c 9.197,9.198 21.271,13.82 33.345,13.82 12.074,0 24.101,-4.622 33.346,-13.82 18.442,-18.441 18.442,-48.247 0,-66.687 l -331.464,-331.446 331.464,-331.44501 c 18.442,-18.441 18.442,-48.25 0,-66.691 C 800.88178,4.608 788.81678,0 776.75678,0 Z" fill="#444444"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -88,7 +88,7 @@
|
||||
:-webkit-font-smoothing "inherit"
|
||||
:letter-spacing "inherit"
|
||||
:background "none"
|
||||
:cursor "pointer"}]
|
||||
#_ #_ :cursor "pointer"}]
|
||||
[:img {:max-width (percent 100)
|
||||
:height "auto"
|
||||
:border "0"}]
|
||||
@ -218,7 +218,7 @@
|
||||
[:.button {:padding "5px 5px 3px"
|
||||
:margin "5px"
|
||||
:border-radius "2px"
|
||||
:cursor "pointer"}]
|
||||
#_ #_ :cursor "pointer"}]
|
||||
[:.text-button {:border-bottom "1px dotted #888"
|
||||
:font-weight "normal"}
|
||||
[(s/& s/focus) {:outline [[medium-gray "dotted" (px 1)]]}]]
|
||||
@ -257,8 +257,11 @@
|
||||
label-mixin)
|
||||
[:.filter-item-string {:color text-color
|
||||
:background yellow}]
|
||||
[:.subtree-button-string {:color text-color}]
|
||||
[(s/& s/hover) (s/& s/focus) {:text-decoration "line-through"}]]]
|
||||
[:.subtree-button-string {:color text-color}]]
|
||||
[:.subtree
|
||||
[:img {:opacity "0"}]
|
||||
[:&:hover
|
||||
[:img {"opacity" 1}]]]]
|
||||
|
||||
[:.icon {:display "inline-block"
|
||||
:width (em 1)
|
||||
@ -306,9 +309,7 @@
|
||||
[:.filter-control {:margin "10px 0 0 10px"}]
|
||||
[:.filter-items-count
|
||||
{:cursor "auto"}
|
||||
[(s/& ".active") {:background yellow
|
||||
:cursor "pointer"}
|
||||
[(s/& ":hover") {:text-decoration "line-through"}]]]
|
||||
[(s/& ".active") {:background yellow}]]
|
||||
[:.filter-fields {:margin-top "10px"}]
|
||||
[:.filter-category {:display "inline-block"
|
||||
:background "#efeef1"
|
||||
|
||||
@ -5,7 +5,11 @@
|
||||
[devtools.formatters.core]
|
||||
[day8.re-frame.trace.view.components :as components]
|
||||
[day8.re-frame.trace.utils.re-com :as re-com]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.utils.re-com :as rc])
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :as macros]))
|
||||
|
||||
(def delete (macros/slurp-macro "day8/re_frame/trace/images/delete.svg"))
|
||||
|
||||
(defn render-state [data]
|
||||
(let [subtree-input (r/atom "")
|
||||
@ -21,7 +25,6 @@
|
||||
:on-submit #(rf/dispatch [:app-db/add-path %])
|
||||
:change-on-blur? false
|
||||
:placeholder ":path :into :app-db"]
|
||||
|
||||
;; TODO: check for input errors
|
||||
; (if @input-error
|
||||
; [:div.input-error {:style {:color "red" :margin-top 5}}
|
||||
@ -35,9 +38,17 @@
|
||||
[:div.subtree
|
||||
[components/subtree
|
||||
(get-in @data path)
|
||||
[:button.subtree-button {:on-click #(rf/dispatch [:app-db/remove-path path])}
|
||||
[:span.subtree-button-string
|
||||
(str path)]]
|
||||
[rc/h-box
|
||||
:align :center
|
||||
:children
|
||||
[[:button.subtree-button
|
||||
[:span.subtree-button-string
|
||||
(str path)]]
|
||||
[:img
|
||||
{:src (str "data:image/svg+xml;utf8," delete)
|
||||
:style {:cursor "pointer"
|
||||
:height "10px"}
|
||||
:on-click #(rf/dispatch [:app-db/remove-path path])}]]]
|
||||
[path]]]])
|
||||
@subtree-paths))]
|
||||
[:div {:style {:margin-bottom "20px"}}
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
[goog.fx.dom :as fx]
|
||||
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||
[day8.re-frame.trace.utils.localstorage :as localstorage]
|
||||
[clojure.string :as str])
|
||||
[clojure.string :as str]
|
||||
[day8.re-frame.trace.utils.re-com :as rc])
|
||||
(:require-macros [day8.re-frame.trace.utils.macros :refer [with-cljs-devtools-prefs]]))
|
||||
|
||||
(defn search-input [{:keys [title placeholder on-save on-change on-stop]}]
|
||||
@ -166,21 +167,26 @@
|
||||
(defn subtree [data title path]
|
||||
(let [expanded? (rf/subscribe [:app-db/node-expanded? path])]
|
||||
(fn [data]
|
||||
[:div
|
||||
{:class (str/join " " ["re-frame-trace--object"
|
||||
(when @expanded? "expanded")])}
|
||||
[:span {:class "toggle"
|
||||
:on-click #(rf/dispatch [:app-db/toggle-expansion path])}
|
||||
[:button.expansion-button (if @expanded? "▼ " "▶ ")]]
|
||||
(or title "data")
|
||||
[:div {:style {:margin-left 20}}
|
||||
(cond
|
||||
(and @expanded?
|
||||
(or (string? data)
|
||||
(number? data)
|
||||
(boolean? data)
|
||||
(nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
|
||||
@expanded? (jsonml->hiccup (cljs-devtools-header data) (conj path 0)))]])))
|
||||
[rc/v-box
|
||||
:children
|
||||
[[rc/h-box
|
||||
:align :center
|
||||
:class (str/join " " ["re-frame-trace--object"
|
||||
(when @expanded? "expanded")])
|
||||
:children
|
||||
[[:span {:class "toggle"
|
||||
:on-click #(rf/dispatch [:app-db/toggle-expansion path])}
|
||||
[:button.expansion-button (if @expanded? "▼ " "▶ ")]]
|
||||
(or title "data")]]
|
||||
[rc/h-box
|
||||
:children [[:div {:style {:margin-left 20}}
|
||||
(cond
|
||||
(and @expanded?
|
||||
(or (string? data)
|
||||
(number? data)
|
||||
(boolean? data)
|
||||
(nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
|
||||
@expanded? (jsonml->hiccup (cljs-devtools-header data) (conj path 0)))]]]]])))
|
||||
|
||||
(defn subscription-render [data title path]
|
||||
(let [expanded? (r/atom true) #_(rf/subscribe [:app-db/node-expanded? path])]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user