layout improvements

src/pluto/playground/components/dialogs.cljs

@@ -0,0 +1,66 @@
+(ns pluto.playground.components.dialogs
+  (:require-macros [react-native-web.views :refer [defview letsubs]])
+  (:require [re-frame.core :as re-frame]
+            [react-native-web.react :as react]
+            [cljsjs.material-ui]
+            [status-im.colors :as colors]))
+
+(def Dialog (aget js/MaterialUI "Dialog"))
+(def DialogTitle (aget js/MaterialUI "DialogTitle"))
+(def CircularProgress (aget js/MaterialUI "CircularProgress"))
+
+(defview publish []
+  (letsubs [{:keys [in-progress? hash] :as publish} [:get :publish]]
+    [:> Dialog {:open (not (nil? publish)) :on-close #(re-frame/dispatch [:set :publish nil])}
+     [:> DialogTitle
+      "Publish extension"]
+     [:div {:style {:padding 20}}
+      (if in-progress?
+        [:> CircularProgress]
+        (let [ext-url (str "https://get.status.im/extension/ipfs@" hash "/")]
+          [:div {:style {:display :flex :flex-direction :column}}
+           [:p {:style {:margin-vertical 5 :font-weight :bold}} "Scan QR to install extension"]
+           [:div "Open Status -> Press (+) -> Scan QR "]
+           [:div {:style {:display :flex :align-items :center :justify-content :center}}
+            [:div {:style {:display :flex :margin 20}}
+             [(react/qr-code) {:value ext-url}]]]
+           [:div {:style {:display :flex :flex-direction :column}}
+            [:div {:style {:margin-vertical 5 :font-weight :bold}} "OR share extension URL"]
+            [:div ext-url]]]))]]))
+
+(def examples-data
+  [{:header "General"}
+   {:name "Components" :hash "QmadX7aF2tBaLJjEnNP4Bewc9JZbT5CGjZgKX71MCpvaDS"}
+   {:name "Queries" :hash "QmRyL2JJ7HoGQKQfHruWuECUp1bAkbxYjprQgFQGsmns1v"}
+   {:name "Events" :hash "QmUYEKhnXibFhSQ7rDWcPfBUwFr6A379N7dFtbW6PQZaee"}
+   {:header "Chat commands"}
+   {:name "Hello world" :hash "QmV8JsEA2fBnjstH3MJzK5SgF9F7qNSyKLo2LapYia5pX4"}
+   {:name "Ethereum logs tests" :hash "QmaKKKUgDsJKQJ5Q9BJg8V1SRDhhiKbyyQycoExF3eehUZ"}
+   {:name "Status Principles" :hash "QmSvd5iehhrkSCQR12hEyJtJzCjEQo1ax8936BnkBhQi5a"}
+   {:name "Gfycat" :hash "QmZCf2WJhSm3wfSLK9Mf4mYY4pmxvyE6RhqmsG1SNhNQfq"}
+   {:name "Weasel (one of EthSingapore winner)" :hash "QmZaUniGLGfjy4ggdK3Jhk3xq5b2T126zCYLjk5CTc7yiL"}
+   {:name "Aragon integration (one of EthSingapore winner)" :hash "QmeEGtHHBn8p11gjCWPh1EzNaojNtDzLqWCdN2XE3auJDV"}
+   {:header "Wallet settings"}
+   {:name "Hello world" :hash "QmTgi12UgbAdQgxwCaSJgWcHvtwtaTpoazi5SWRhChKQhK"}
+   {:name "Kyber exchange (WIP)" :hash "QmeqDrXwwwesgb6Dj9UurtgX1VoS4h6tApxLTLU1BSD7Vo"}])
+
+(defn example-item [{:keys [name hash header]}]
+  (if header
+    [:div {:style {:font-size 16 :font-weight :bold :padding-bottom 10 :padding-top 10}} header]
+    [:div {:style {:padding 5 :cursor :pointer} :on-click #(re-frame/dispatch [:open-example hash])}
+     [:div {:style {:font-size 15}} name]
+     [:div {:style {:font-size 12 :color colors/gray}} hash]]))
+
+(defview examples []
+  (letsubs [show? [:get :examples]]
+    [:> Dialog {:open show? :on-close #(re-frame/dispatch [:set :examples nil])}
+     [:> DialogTitle
+      "Extensions examples"]
+     [:div {:style {:padding 20 :overflow :auto}}
+      (for [item examples-data]
+        [example-item item])]]))
+
+(defn dialogs []
+  [:div
+   [publish]
+   [examples]])

src/pluto/playground/components/publish.cljs

@@ -1,28 +0,0 @@
-(ns pluto.playground.components.publish
-  (:require-macros [react-native-web.views :refer [defview letsubs]])
-  (:require [re-frame.core :as re-frame]
-            [react-native-web.react :as react]
-            [cljsjs.material-ui]))
-
-(def Dialog (aget js/MaterialUI "Dialog"))
-(def DialogTitle (aget js/MaterialUI "DialogTitle"))
-(def CircularProgress (aget js/MaterialUI "CircularProgress"))
-
-(defview publish-dialog []
-  (letsubs [{:keys [in-progress? hash] :as publish} [:get :publish]]
-    [:> Dialog {:open (not (nil? publish)) :on-close #(re-frame/dispatch [:set :publish nil])}
-     [:> DialogTitle
-      "Publish extension"]
-     [:div {:style {:padding 20}}
-      (if in-progress?
-        [:> CircularProgress]
-        (let [ext-url (str "https://get.status.im/extension/ipfs@" hash "/")]
-          [:div {:style {:display :flex :flex-direction :column}}
-           [:p {:style {:margin-vertical 5 :font-weight :bold}} "Scan QR to install extension"]
-           [:div "Open Status -> Press (+) -> Scan QR "]
-           [:div {:style {:display :flex :align-items :center :justify-content :center}}
-            [:div {:style {:display :flex :margin 20}}
-             [(react/qr-code) {:value ext-url}]]]
-           [:div {:style {:display :flex :flex-direction :column}}
-            [:div {:style {:margin-vertical 5 :font-weight :bold}} "OR share extension URL"]
-            [:div ext-url]]]))]]))

src/pluto/playground/core.cljs

@@ -13,7 +13,7 @@
             [re-frame.registrar :as registrar]
             [re-frame.loggers :as re-frame.loggers]
             [react-native-web.react :as react]
-            [pluto.playground.components.publish :as publish]))
+            [pluto.playground.components.dialogs :as dialogs]))
 
 (def warn (js/console.warn.bind js/console))
 (re-frame.loggers/set-loggers!
@@ -79,7 +79,7 @@
   (letsubs [logs [:extension/filtered-logs]
             errors [:extension/errors]]
     [:div {:style {:display :flex :flex 1}}
-     [publish/publish-dialog]
+     [dialogs/dialogs]
      [:div {:style {:display :inline-block :width "calc(100% - 400px)"}}
       [source/editor {:on-change #(re-frame.core/dispatch [:extension/update-source ctx %])}]
       [:div
@@ -91,7 +91,10 @@
       [:div {:style {:height "calc(40% - 50px)" :overflow :auto}}
        [logs/table (or (flatten-errors errors) logs)]]]
      [:div
-      [:div {:style {:display :flex :justify-content :flex-end}}
+      [:div {:style {:display :flex :justify-content :flex-end :padding-right 20 :padding-top 5}}
+       [button {:color "primary" :variant "contained" :on-click #(re-frame/dispatch [:set :examples true])}
+        "Examples"]
+       [:div {:style {:width 10}}]
        [button {:color "primary" :variant "contained" :on-click #(re-frame/dispatch [:extension/publish])}
         "Publish"]]
       [:div {:style {:border "40px solid #ddd" :border-width "20px 7px" :border-radius "40px" :margin 20}}

src/pluto/playground/fx.cljs

@@ -152,3 +152,15 @@
  :fetch-extension
  (fn [{:keys [db]} _]
    {:fetch-extension-fx nil}))
+
+(re-frame.core/reg-fx
+ :set-url-fx
+ (fn [hash]
+   (ipfs/set-url hash)))
+
+(re-frame.core/reg-event-fx
+ :open-example
+ (fn [{db :db} [_ hash]]
+   {:db (dissoc db :examples)
+    :set-url-fx hash
+    :dispatch [:fetch-extension]}))