diff --git a/fiddle/js/compiled/app.js b/fiddle/js/compiled/app.js index d4e1189..05e17c7 100644 --- a/fiddle/js/compiled/app.js +++ b/fiddle/js/compiled/app.js @@ -4939,13 +4939,13 @@ status_im.ui.components.colors.blue,new cljs.core.Keyword(null,"border-radius"," [status_im.ui.components.react.text,new cljs.core.PersistentArrayMap(null,1,[new cljs.core.Keyword(null,"style","style",-496642736),new cljs.core.PersistentArrayMap(null,2,[new cljs.core.Keyword(null,"color","color",1011675173),new cljs.core.Keyword(null,"white","white",-483998618),new cljs.core.Keyword(null,"font-size","font-size",-1847940346),11],null)],null),"PUBLISH"],null)],null)],null)],null)}}(keys9664),new cljs.core.Keyword(null,"display-name","display-name",694513143),cljs.core.name.call(null, new cljs.core.Symbol(null,"publish","publish",462504677,null))],null)))};goog.provide("status_fiddle.templates");goog.require("cljs.core");status_fiddle.templates.button='[react/view {:flex 1}\n [react/view {:flex 1 :background-color colors/blue :justify-content :center :margin-vertical 20}\n\n [button/button {:disabled? false\n :on-press #(js/alert "Button pressed")}\n "Button enabled"]\n\n [button/button {:disabled? false\n :text-style {:color :black}\n :on-press #(js/alert "Button pressed")}\n "Button black"]\n\n [button/button {:disabled? true\n :on-press #(js/alert "Button pressed")}\n "Button disabled 3333"]]\n\n [button/primary-button nil "Primary button"]\n\n [react/view {:height 20}]\n\n [button/secondary-button nil "Secondary button"]]'; status_fiddle.templates.button2='[react/view {:flex 1 :justify-content :space-around}\n\n [react/view {:align-items :center}\n [components.common/button {:on-press #(js/alert "Button")\n :label "Button"}]]\n\n [components.common/button {:on-press #(js/alert "Button")\n :label "Button"}]\n\n [components.common/button {:on-press #(js/alert "Button without background")\n :label "Button without background"\n :background? false}]]'; -status_fiddle.templates.input='[react/view {:align-items :center :flex 1 :justify-content :center}\n\n [text-input/text-input-with-label\n {:label "Label"\n :placeholder "Placeholder"}]]';status_fiddle.templates.toolbar='[react/view {:style {:flex 1}}\n\n [toolbar/simple-toolbar "Simple toolbar"]\n\n [toolbar/toolbar {}\n toolbar/default-nav-back\n [toolbar/content-title "Simple toolbar"]]\n\n [toolbar/toolbar {} nil\n [toolbar/content-title "Only title"]]\n\n [toolbar/toolbar {} nil\n [toolbar/content-title "With action"]\n [toolbar/actions [{:icon :icons/ok\n :icon-opts {:color :blue}\n :handler #(js/alert "Toolbar OK handler")}]]]]'; -status_fiddle.templates.action_button='[react/view\n\n [action-button/action-button {:label "Action button"\n :icon :icons/qr\n :icon-opts {:color :blue}\n :on-press #(js/alert "Action button")}]\n\n [action-button/action-button {:icon :icons/ok\n :icon-opts {:color :blue}\n :on-press #(js/alert "Action button OK")}]]'; +status_fiddle.templates.input='[react/view {:align-items :center :flex 1 :justify-content :center}\n\n [text-input/text-input-with-label\n {:label "Label"\n :placeholder "Placeholder"}]]';status_fiddle.templates.toolbar='[react/view {:style {:flex 1}}\n\n [toolbar/simple-toolbar "Simple toolbar"]\n\n [toolbar/toolbar {}\n toolbar/default-nav-back\n [toolbar/content-title "Simple toolbar"]]\n\n [toolbar/toolbar {} nil\n [toolbar/content-title "Only title"]]\n\n [toolbar/toolbar {} nil\n [toolbar/content-title "With action"]\n [toolbar/actions [{:icon :main-icons/check\n :icon-opts {:color :blue}\n :handler #(js/alert "Toolbar OK handler")}]]]]'; +status_fiddle.templates.action_button='[react/view\n\n [action-button/action-button {:label "Action button"\n :icon :main-icons/qr\n :icon-opts {:color :blue}\n :on-press #(js/alert "Action button")}]\n\n [action-button/action-button {:icon :main-icons/check\n :icon-opts {:color :blue}\n :on-press #(js/alert "Action button OK")}]]'; status_fiddle.templates.bottom_buttons='[bottom-buttons/bottom-buttons\n {:background-color colors/blue\n :padding-vertical 8}\n\n [button/button {:style {:flex 1}\n :on-press #()}\n "Cancel"]\n\n [button/button {:style {:flex-direction :row\n :align-items :center}\n :on-press #()}\n "Sign"\n [icons/icon :icons/forward {:color :white}]]]';status_fiddle.templates.bottom_buttons2='[react/view {:flex 1}\n [react/view {:flex 1}]\n\n [react/view {:flex-direction :row\n :margin-horizontal 12\n :margin-vertical 15\n :align-items :center}\n\n [components.common/bottom-button\n {:label "Back"\n :on-press #()}]\n\n [react/view {:style {:flex 1}}]\n\n [components.common/bottom-button\n {:forward? true\n :label "Next"\n :on-press #()}]]]'; status_fiddle.templates.contact='[react/scroll-view\n [react/view\n\n [contact/contact-view]\n\n [contact/contact-view {:contact {:name "Contact"}}]\n\n [contact/contact-view {:contact {:name "Contact"}\n :info "Info"}]\n\n [contact/contact-view {:contact {:name "Contact"}\n :show-forward? true}]\n\n [contact/contact-view {:contact {:name "Contact"}\n :extended? true\n :extend-options [1]}]]]'; status_fiddle.templates.screens_intro='(let [;; STYLES\n st-intro-view {:flex 1\n :padding-horizontal 30\n :background-color colors/white}\n st-intro-logo-container {:flex 1\n :align-items :center\n :justify-content :center}\n st-intro-text {:text-align :center\n :color colors/black\n :line-height 28\n :font-size 22\n :font-weight :bold\n :letter-spacing -0.3}\n st-intro-text-description {:line-height 21\n :margin-top 8\n :margin-bottom 16\n :font-size 14\n :letter-spacing -0.2\n :text-align :center\n :color colors/gray}\n st-buttons-container {:align-items :center}\n st-bottom-button-container {:margin-bottom 6\n :margin-top 38}\n st-intro-logo {:size 111\n :icon-size 46}\n\n ;;TEXT\n intro-text "Status is an open source decentralized chat and Ethereum browser"\n intro-text-description "Status is built with the help of the community to help you use all the benefits of decentralized web in your mobile phone"\n create-label "Create account"\n already-have-label "Already have account"]\n\n\n\n ;; INTRO SCREEN\n [react/view {:style st-intro-view}\n [react/view {:style st-intro-logo-container}\n [components.common/logo st-intro-logo]]\n [react/text {:style st-intro-text}\n intro-text]\n [react/view\n [react/text {:style st-intro-text-description}\n intro-text-description]]\n [react/view st-buttons-container\n [components.common/button {:button-style {:flex-direction :row}\n :on-press #(js/alert create-label)\n :label create-label}]\n [react/view st-bottom-button-container\n [components.common/button {:on-press #(js/alert already-have-label)\n :label already-have-label\n :background? false}]]]])'; status_fiddle.templates.screens_profile='(let [;; STYLES\n st-profile {:flex 1\n :background-color colors/white\n :flex-direction :column}\n st-label-action-text {:padding-right 16\n :color colors/blue\n :font-size 15}\n st-profile-form {:background-color colors/white\n :padding 16}\n\n st-profile-header-display {:flex-direction :column\n :justify-content :center\n :align-items :center}\n st-profile-header-name-container {:flex 1\n :justify-content :center}\n st-profile-name-text {:padding-vertical 14\n :font-size 15\n :text-align :center}\n st-actions-list {:background-color styles/color-white}\n st-share-contact-code {:margin-horizontal 16\n :flex-direction :row\n :justify-content :space-between\n :align-items :center\n :height 42\n :border-radius 8\n :background-color (colors/alpha colors/blue 0.1)}\n\n st-share-contact-code-text-container {:padding-left 16\n :padding-bottom 1\n :flex 0.9\n :flex-direction :row\n :justify-content :center\n :align-items :center}\n\n st-share-contact-code-text {:color colors/blue\n :font-size 15}\n st-share-contact-icon-container {:border-radius 50\n :flex 0.1\n :padding-right 5\n :align-items :center\n :justify-content :center}\n\n st-my-profile-info-container {:background-color colors/white}\n\n st-advanced-button {:margin-top 16\n :margin-bottom 12}\n\n st-advanced-button-container {:align-items :center\n :justify-content :center}\n\n st-advanced-button-container-background {:padding-left 16\n :padding-right 12\n :padding-vertical 6\n :border-radius 18\n :background-color (colors/alpha colors/blue 0.1)}\n\n st-advanced-button-row {:flex-direction :row\n :align-items :center}\n\n st-advanced-button-label {:font-size 15\n :letter-spacing -0.2\n :color colors/blue}\n st-settings-title {:color colors/gray\n :margin-left 16\n :margin-top 18\n :font-size 14}\n st-settings-item-separator {:margin-left 16}\n\n st-settings-item {:padding-horizontal 16\n :flex 1\n :flex-direction :row\n :align-items :center\n :background-color colors/white\n :height 52}\n\n st-settings-item-text-wrapper {:flex 1\n :flex-direction :row\n :justify-content :space-between}\n\n st-settings-item-text {:flex-wrap :nowrap\n :font-size 15}\n st-settings-item-value {:flex 1\n :flex-wrap :nowrap\n :text-align :right\n :padding-right 10\n :font-size 15\n :color colors/gray}\n\n ;; TEXT\n edit "Edit"\n acc-name "Andrey"\n share-contact-code "Share contact code"\n wallet-advanced "Advanced"\n settings "Settings"\n notifications "Notifications"\n main-currency "Main Currency"\n\n settings-item (fn [label value]\n [react/touchable-highlight {:on-press #()}\n [react/view st-settings-item\n [react/view st-settings-item-text-wrapper\n [react/text {:style st-settings-item-text\n :number-of-lines 1}\n label]\n (when value\n [react/text {:style st-settings-item-value\n :number-of-lines 1\n :uppercase? true}\n value])]\n [icons/icon :icons/forward {:color colors/gray}]]])]\n\n ;; PROFILE SCREEN\n [react/view st-profile\n [toolbar/toolbar {}\n nil\n [toolbar/content-title ""]\n [react/touchable-highlight\n {:on-press #(js/alert edit)}\n [react/view\n [react/text {:style st-label-action-text\n :uppercase? true}\n edit]]]]\n [react/scroll-view\n [react/view st-profile-form\n [react/view st-profile-header-display\n [chat-icon.screen/my-profile-icon {:account {:name acc-name}\n :edit? false}]\n [react/view st-profile-header-name-container\n [react/text {:style st-profile-name-text\n :number-of-lines 1}\n acc-name]]]]\n [react/view st-actions-list\n [react/touchable-highlight {:on-press #(js/alert share-contact-code)}\n [react/view st-share-contact-code\n [react/view st-share-contact-code-text-container\n [react/text {:style st-share-contact-code-text\n :uppercase? true}\n share-contact-code]]\n [react/view {:style st-share-contact-icon-container}\n [icons/icon :icons/qr {:color colors/blue}]]]]]\n [react/view st-my-profile-info-container\n [react/view\n [react/text {:style st-settings-title}\n settings]\n [settings-item main-currency "USD"]\n [components.common/separator st-settings-item-separator]\n [settings-item notifications]]]\n [react/view\n [react/touchable-highlight {:on-press #()\n :style st-advanced-button}\n [react/view {:style st-advanced-button-container}\n [react/view {:style st-advanced-button-container-background}\n [react/view {:style st-advanced-button-row}\n [react/text {:style st-advanced-button-label}\n wallet-advanced]\n [icons/icon :icons/down {:color colors/blue}]]]]]]]])\n'; -status_fiddle.templates.default$='[react/view {:style {:flex 1}}\n [toolbar/toolbar {}\n toolbar/default-nav-back\n [toolbar/content-title "Status"]]\n [react/view {:style {:flex 1\n :align-items :center\n :justify-content :center}}\n [icons/icon :icons/profile-active]\n [react/text {:style {:font-size 25 :padding 20}}\n "Hello!"]\n [react/text {:style {:padding-horizontal 20}}\n "This is an " (if platform/ios? "iPhone" "Android Phone") ", but you can change device in the listbox above ^."]\n [react/text {:style {:margin 20}}\n "And you can edit code, try to change text HERE"]\n [react/touchable-highlight {:on-press #(js/alert "HEY!")}\n [react/text {:style {:font-weight :bold}} "PRESS ME!"]]\n [react/text {:style {:margin 20}} "You can find component and screens examples in \'Components` and \'Screens` sections"]]]';goog.provide("status_fiddle.ui.code_mirror.views");goog.require("cljs.core");goog.require("reagent.core");goog.require("re_frame.core"); +status_fiddle.templates.default$='[react/view {:style {:flex 1}}\n [toolbar/toolbar {}\n toolbar/default-nav-back\n [toolbar/content-title "Status"]]\n [react/view {:style {:flex 1\n :align-items :center\n :justify-content :center}}\n [icons/icon :main-icons/user-profile]\n [react/text {:style {:font-size 25 :padding 20}}\n "Hello!"]\n [react/text {:style {:padding-horizontal 20}}\n "This is an " (if platform/ios? "iPhone" "Android Phone") ", but you can change device in the listbox above ^."]\n [react/text {:style {:margin 20}}\n "And you can edit code, try to change text HERE"]\n [react/touchable-highlight {:on-press #(js/alert "HEY!")}\n [react/text {:style {:font-weight :bold}} "PRESS ME!"]]\n [react/text {:style {:margin 20}} "You can find component and screens examples in \'Components` and \'Screens` sections"]]]';goog.provide("status_fiddle.ui.code_mirror.views");goog.require("cljs.core");goog.require("reagent.core");goog.require("re_frame.core"); status_fiddle.ui.code_mirror.views.code_mirror=function status_fiddle$ui$code_mirror$views$code_mirror(code_mirror_div,target_div){return reagent.core.create_class.call(null,new cljs.core.PersistentArrayMap(null,2,[new cljs.core.Keyword(null,"reagent-render","reagent-render",-985383853),function(){return new cljs.core.PersistentVector(null,1,5,cljs.core.PersistentVector.EMPTY_NODE,[cljs.core.keyword.call(null,["div#",cljs.core.str.cljs$core$IFn$_invoke$arity$1(cljs.core.name.call(null,code_mirror_div))].join(""))], null)},new cljs.core.Keyword(null,"component-did-mount","component-did-mount",-1126910518),function(_){var cm=CodeMirror(document.getElementById(cljs.core.name.call(null,code_mirror_div)));var debounce=cljs.core.atom.call(null,null);re_frame.core.dispatch.call(null,new cljs.core.PersistentVector(null,3,5,cljs.core.PersistentVector.EMPTY_NODE,[new cljs.core.Keyword(null,"set-cm","set-cm",592420043),target_div,cm],null));parinferCodeMirror.init(cm);return cm.on("change",function(cm,debounce){return function(___$1){if(cljs.core.truth_(cljs.core.deref.call(null, debounce)))clearTimeout(cljs.core.deref.call(null,debounce));else;return cljs.core.reset_BANG_.call(null,debounce,setTimeout(function(cm,debounce){return function(){return re_frame.core.dispatch.call(null,new cljs.core.PersistentVector(null,3,5,cljs.core.PersistentVector.EMPTY_NODE,[new cljs.core.Keyword(null,"compile-and-render","compile-and-render",1630575777),target_div,cm.getValue()],null))}}(cm,debounce),400))}}(cm,debounce))}],null))};goog.provide("status_fiddle.ui.panels.screens");goog.require("cljs.core");goog.require("status_im.ui.components.react");goog.require("status_fiddle.templates");goog.require("status_fiddle.ui.code_mirror.views");goog.require("status_fiddle.ui.components.views");if(cljs.core.truth_(cljs.core.find_ns.call(null,new cljs.core.Symbol(null,"re-frame.core","re-frame.core",-1549073474,null))));else goog.require("re_frame.core");