From e414bddfa9af11cee52c201ccc56c8027e294077 Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Tue, 2 Apr 2019 15:48:27 +0200 Subject: [PATCH] layout improvements --- src/pluto/playground/components/dialogs.cljs | 66 ++++++++++++++++++++ src/pluto/playground/components/publish.cljs | 28 --------- src/pluto/playground/core.cljs | 9 ++- src/pluto/playground/fx.cljs | 12 ++++ 4 files changed, 84 insertions(+), 31 deletions(-) create mode 100644 src/pluto/playground/components/dialogs.cljs delete mode 100644 src/pluto/playground/components/publish.cljs diff --git a/src/pluto/playground/components/dialogs.cljs b/src/pluto/playground/components/dialogs.cljs new file mode 100644 index 0000000..14cc4d7 --- /dev/null +++ b/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]]) \ No newline at end of file diff --git a/src/pluto/playground/components/publish.cljs b/src/pluto/playground/components/publish.cljs deleted file mode 100644 index c4ff78e..0000000 --- a/src/pluto/playground/components/publish.cljs +++ /dev/null @@ -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]]]))]])) \ No newline at end of file diff --git a/src/pluto/playground/core.cljs b/src/pluto/playground/core.cljs index 8bc4335..6a84325 100644 --- a/src/pluto/playground/core.cljs +++ b/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}} diff --git a/src/pluto/playground/fx.cljs b/src/pluto/playground/fx.cljs index cfc3c67..81e5848 100644 --- a/src/pluto/playground/fx.cljs +++ b/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]})) \ No newline at end of file