Make settings wrench orange when opening settings panel

This commit is contained in:
Daniel Compton 2018-01-04 09:35:14 +13:00
parent 0a7de66e4d
commit 6ea438146d
2 changed files with 24 additions and 7 deletions

View File

@ -0,0 +1,14 @@
<svg width="31" height="32" viewBox="0 0 31 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Vector</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(-3725 368)">
<g id="Vector">
<use xlink:href="#path0_fill" transform="translate(3725 -367.837)" fill="#F2994A"/>
</g>
</g>
<defs>
<path id="path0_fill" fill-rule="evenodd"
d="M 15.5001 31C 12.5872 31 9.86218 30.1958 7.53433 28.7983L 14.6971 21.6358C 21.2835 23.6822 25.2592 17.8705 22.9365 12.2083L 18.8728 16.2718C 16.269 18.908 12.3821 15.0188 14.9848 12.4161L 19.0645 8.33617C 14.1423 5.425 7.06425 10.1695 9.45688 16.7157L 2.39433 23.778C 0.878415 21.3831 0 18.5441 0 15.5C 0 6.93958 6.93962 -1.35465e-09 15.5001 -1.35465e-09C 24.0606 -1.35465e-09 31 6.93958 31 15.5C 31 24.0604 24.0606 31 15.5001 31Z"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 891 B

View File

@ -21,6 +21,7 @@
(def open-external (macros/slurp-macro "day8/re_frame/trace/images/logout.svg")) (def open-external (macros/slurp-macro "day8/re_frame/trace/images/logout.svg"))
(def settings-svg (macros/slurp-macro "day8/re_frame/trace/images/wrench.svg")) (def settings-svg (macros/slurp-macro "day8/re_frame/trace/images/wrench.svg"))
(def orange-settings-svg (macros/slurp-macro "day8/re_frame/trace/images/orange-wrench.svg"))
(def pause-svg (macros/slurp-macro "day8/re_frame/trace/images/pause.svg")) (def pause-svg (macros/slurp-macro "day8/re_frame/trace/images/pause.svg"))
(def outer-margins {:margin (str "0px " common/gs-19s)}) (def outer-margins {:margin (str "0px " common/gs-19s)})
@ -30,7 +31,7 @@
panel-type (:panel-type opts) panel-type (:panel-type opts)
external-window? (= panel-type :popup) external-window? (= panel-type :popup)
unloading? (rf/subscribe [:global/unloading?]) unloading? (rf/subscribe [:global/unloading?])
show-tabs? (not= @selected-tab :settings)] showing-settings? (= @selected-tab :settings)]
[:div.panel-content [:div.panel-content
{:style {:width "100%" :display "flex" :flex-direction "column" :background-color common/standard-background-color}} {:style {:width "100%" :display "flex" :flex-direction "column" :background-color common/standard-background-color}}
[rc/h-box [rc/h-box
@ -56,14 +57,16 @@
[:img.nav-icon [:img.nav-icon
{:title "Settings" {:title "Settings"
:src (str "data:image/svg+xml;utf8," :src (str "data:image/svg+xml;utf8,"
settings-svg) (if showing-settings?
orange-settings-svg
settings-svg))
:on-click #(rf/dispatch [:settings/toggle-settings])}] :on-click #(rf/dispatch [:settings/toggle-settings])}]
(when-not external-window? (when-not external-window?
[:img.nav-icon.active [:img.nav-icon.active
{:src (str "data:image/svg+xml;utf8," {:src (str "data:image/svg+xml;utf8,"
open-external) open-external)
:on-click #(rf/dispatch-sync [:global/launch-external])}])]]]] :on-click #(rf/dispatch-sync [:global/launch-external])}])]]]]
(when show-tabs? (when-not showing-settings?
[rc/h-box [rc/h-box
:class "panel-content-tabs" :class "panel-content-tabs"
:justify :between :justify :between