Browse Source

fix(ui): code block theme when toggling theme

charlie 4 years ago
parent
commit
81ae683689

+ 0 - 8
resources/css/codemirror.solarized.css

@@ -104,14 +104,6 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
 /* Editor styling */
 
 
-
-/* Little shadow on the view-port of the buffer view */
-.cm-s-solarized.CodeMirror {
-  -moz-box-shadow: inset 7px 0 12px -6px #000;
-  -webkit-box-shadow: inset 7px 0 12px -6px #000;
-  box-shadow: inset 7px 0 12px -6px #000;
-}
-
 /* Remove gutter border */
 .cm-s-solarized .CodeMirror-gutters {
   border-right: 0;

+ 5 - 3
src/main/frontend/components/lazy_editor.cljs

@@ -1,7 +1,8 @@
 (ns frontend.components.lazy-editor
   (:require [rum.core :as rum]
             [shadow.lazy :as lazy]
-            [frontend.ui :as ui]))
+            [frontend.ui :as ui]
+            [frontend.state :as state]))
 
 (def lazy-editor (lazy/loadable frontend.extensions.code/editor))
 
@@ -14,7 +15,8 @@
                               (reset! loaded? true)))
                  state)}
   [config id attr code options]
-  (let [loaded? (rum/react loaded?)]
+  (let [loaded? (rum/react loaded?)
+        theme (state/sub :ui/theme)]
     (if loaded?
-      (@lazy-editor config id attr code options)
+      (@lazy-editor config id attr code theme options)
       (ui/loading "CodeMirror"))))

+ 7 - 4
src/main/frontend/extensions/code.cljs

@@ -113,8 +113,9 @@
       (let [editor @editor-atom
             doc (.getDoc editor)
             code (nth (:rum/args state) 3)]
-        (.setValue doc code))
-      (let [[config id attr code] (:rum/args state)
+        (.setValue doc code)
+        @editor-atom)
+      (let [[config id attr code theme] (:rum/args state)
             original-mode (get attr :data-lang)
             mode (or original-mode "javascript")
             clojure? (contains? #{"clojure" "clj" "text/x-clojure" "cljs" "cljc"} mode)
@@ -127,7 +128,7 @@
                     (when textarea
                       (from-textarea textarea
                                      #js {:mode mode
-                                          :theme (if dark? "solarized dark" "solarized")
+                                          :theme (str "solarized " theme)
                                           :matchBrackets lisp?
                                           :autoCloseBrackets true
                                           :lineNumbers true
@@ -171,9 +172,11 @@
                 (load-and-render! state)
                 state)
    :did-update (fn [state]
+                 (when-let [editor @(:editor-atom state)]
+                   (.setOption editor "theme" (str "solarized " (nth (state :rum/args) 4))))
                  (load-and-render! state)
                  state)}
-  [state config id attr code options]
+  [state config id attr code theme options]
   [:div.extensions__code
    [:div.extensions__code-lang
     (let [mode (string/lower-case (get attr :data-lang "javascript"))]