refactor repl module

src/renderer/attribute/views.cljs

@@ -84,7 +84,7 @@
             :on-blur #(on-change-handler % key value)
             :on-key-down #(keyb/input-key-down-handler % value on-change-handler key value)}]
    (when-not (or (empty? (str value)) disabled?)
-     [:button.button.ml-px.level-1.text-muted.absolute.right-0.clear-input-button
+     [:button.button.ml-px.level-1.text-muted.absolute.right-0.clear-input-button.hover:bg-transparent
       {:style {:width "26px" :height "26px"}
        :on-pointer-down #(rf/dispatch [:element/remove-attr key])}
       [comp/icon "times" {:class "small"}]])])

src/renderer/components.cljs

@@ -48,13 +48,16 @@
            (into [:div.shortcuts])))))
 
 (defn toggle-icon-button
-  [{:keys [active? active-icon inactive-icon active-text inactive-text action class]}]
-  [:button.icon-button {:class class
-                        :title (if active? active-text inactive-text)
-                        :on-double-click #(.stopPropagation %)
-                        :on-click #(when action
-                                     (.stopPropagation %)
-                                     (action))}
+  [{:keys [active? active-icon inactive-icon active-text inactive-text action class]}
+   attrs]
+  [:button.icon-button
+   (merge attrs
+          {:class class
+           :title (if active? active-text inactive-text)
+           :on-double-click #(.stopPropagation %)
+           :on-click #(when action
+                        (.stopPropagation %)
+                        (action))})
    [icon (if active? active-icon inactive-icon) {:fixed-width true}]])
 
 (defn toggle-collapsed-button

src/renderer/document/styles.css

@@ -1,5 +1,5 @@
 .document-tab {
-  @apply items-center h-full mr-px text-left level-1 gap-2 opacity-50;
+  @apply button flex items-center h-full mr-px text-left level-1 gap-2 opacity-50 hover:level-1;
   padding: 8px 8px 8px 16px;
   flex: 0 1 130px;
 

src/renderer/document/views.cljs

@@ -51,7 +51,7 @@
 
 (defn close-button
   [key]
-  [:button.icon-button.small.close-document-button
+  [:button.icon-button.small.close-document-button.hover:bg-transparent
    {:key key
     :title "Close document"
     :on-pointer-down #(.stopPropagation %)
@@ -75,7 +75,7 @@
     (fn [key document active?]
       [:> ContextMenu/Root
        [:> ContextMenu/Trigger
-        [:div.flex.button.document-tab.level-1
+        [:div.document-tab
          {:class (when active? "active")
           :on-wheel #(rf/dispatch [:document/scroll (.-deltaY %)])
           :on-pointer-down #(case (.-buttons %)

src/renderer/menubar/views.cljs

@@ -238,11 +238,6 @@
              :type :checkbox
              :checked? [:panel/visible? :history]
              :action [:panel/toggle :history]}
-            {:key :toggle-command-history
-             :type :checkbox
-             :label "Command history"
-             :checked? [:panel/visible? :repl-history]
-             :action [:panel/toggle :repl-history]}
             {:key :divider-2
              :type :separator}
             {:key :toggle-grid

src/renderer/reepl/README.md

@@ -8,10 +8,10 @@ Based on reepl https://github.com/jaredly/reepl by Jared Forsyth under "ISC Lice
 - Conform with replumb breaking changes https://github.com/arichiardi/replumb#usage
 - Parinfer removed
 - Multiple view and style changes
+- Separate styles
 
 ## Todo
 
-- Separate styles
 - Use re-frame to store and retrieve state to global app-db
 
 ## Considerations

src/renderer/reepl/codemirror.cljs

@@ -55,8 +55,8 @@
     (when-not (empty? words)
       {:list words
        :num (count words)
-       :active (= (get (first words) 2) text)
-       :show-all false
+       :active? (= (get (first words) 2) text)
+       :show-all? false
        :initial-text text
        :pos 0
        :from (:start range)
@@ -99,25 +99,25 @@
   evt
     the triggering event. it will be `.preventDefault'd if there are completions
     to cycle through."
-  [{:keys [num pos active from to list initial-text] :as state}
+  [{:keys [num pos active? from to list initial-text] :as state}
    go-back? cm evt]
   (when (and state (or (< 1 (count list))
                        (and (< 0 (count list))
                             (not= initial-text (get (first list) 2)))))
     (.preventDefault evt)
     (let [initial-active (= initial-text (get (first list) 2))
-          [active pos] (if active
-                         (cycle-pos num pos go-back? initial-active)
-                         [true (if go-back? (dec num) pos)])
-          text (if active
+          [active? pos] (if active?
+                          (cycle-pos num pos go-back? initial-active)
+                          [true (if go-back? (dec num) pos)])
+          text (if active?
                  (get (get list pos) 2)
                  initial-text)]
       ;; TODO: don't replaceRange here, instead watch the state atom and react to
       ;; that.
       (.replaceRange cm text from to)
       (assoc state
              :pos pos
-             :active active
+             :active? active?
              :to #js {:line (.-line from)
                       :ch (+ (count text)
                              (.-ch from))}))))
@@ -199,15 +199,15 @@
                  (if (cancel-keys (.-keyCode evt))
                    (reset! complete-atom nil)
                    (if (cmp-show (.-keyCode evt))
-                     (swap! complete-atom assoc :show-all false)
+                     (swap! complete-atom assoc :show-all? false)
                      (when-not (cmp-ignore (.-keyCode evt))
                        (reset! complete-atom (repl-hint complete-word inst nil)))))))
 
           (.on inst "keydown"
                (fn [inst evt]
                  (case (.-keyCode evt)
                    (17 18 91 93)
-                   (swap! complete-atom assoc :show-all true)
+                   (swap! complete-atom assoc :show-all? true)
                    ;; tab
                    ;; TODO: do I ever want to use TAB normally?
                    ;; Maybe if there are no completions...

src/renderer/reepl/completions.cljs

@@ -3,66 +3,38 @@
    ["react" :as react]
    [cljs.reader]
    [cljs.tools.reader]
-   [reagent.core :as r]
-   [renderer.reepl.helpers :as helpers]))
+   [reagent.core :as ra]
+   [renderer.utils.dom :as dom]))
 
-(def styles
-  {:completion-list {:flex-direction :row
-                     :position :absolute
-                     :bottom "100%"
-                     :left 0
-                     :right 0
-                     :overflow :hidden
-                     :font-size 12}
-
-   :completion-show-all {:top 0
-                         :left 0
-                         :right 0
-                         :z-index 1000
-                         :flex-direction :row
-                         :flex-wrap :wrap}
-   :completion-item {;; :cursor :pointer TODO: make these clickable
-                     :padding "3px 5px"
-                     :background-color "var(--level-0)"}
-   :completion-selected {:background-color "var(--level-1)"}
-   :completion-active {:background-color "var(--accent"}})
-
-(def view (partial helpers/view styles))
-
-(def canScrollIfNeeded
-  (some? (.-scrollIntoViewIfNeeded js/document.body)))
-
-(defn completion-item [_text _is-selected _is-active _set-active]
+(defn completion-item
+  [_text _selected? _active? _set-active]
   (let [ref (react/createRef)]
-    (r/create-class
+    (ra/create-class
      {:component-did-update
-      (fn [this [_ _ old-is-selected]]
-        (let [[_ _ is-selected] (r/argv this)]
-          (when (and (not old-is-selected)
-                     is-selected)
-            (when canScrollIfNeeded
-              (.scrollIntoViewIfNeeded (.-current ref) false)
-              (.scrollIntoView (.-current ref))))))
+      (fn [this [_ _ old-selected?]]
+        (let [[_ _ selected?] (ra/argv this)]
+          (when (and (not old-selected?)
+                     selected?)
+            (dom/scroll-into-view (.-current ref)))))
       :reagent-render
-      (fn [text is-selected is-active set-active]
-        [view {:on-click set-active
-               :ref ref
-               :style [:completion-item
-                       (and is-selected
-                            (if is-active
-                              :completion-active
-                              :completion-selected))]}
+      (fn [text selected? active? set-active]
+        [:div.p-1.level-0.text-nowrap
+         {:on-click set-active
+          :class (and selected? (if active? "bg-accent" "level-1"))
+          :ref ref}
          text])})))
 
-(defn completion-list [{:keys [pos list active show-all]} set-active]
+(defn completion-list
+  [docs {:keys [pos list active? show-all?]} set-active]
   (let [items (map-indexed
                #(-> [completion-item
                      (get %2 2)
                      (= %1 pos)
-                     active
+                     active?
                      (partial set-active %1)]) list)]
-    (when show-all
-      (into [view :completion-show-all] items))
-    (into
-     [view :completion-list]
-     items)))
+    [:div.absolute.bottom-full.left-0.w-full.text-xs
+     (when docs [:div.level-1.drop-shadow.p-4.absolute.bottom-full docs])
+     (into
+      [:div.overflow-hidden.flex
+       {:class (when show-all? "flex-wrap")}]
+      items)]))